Cleans up define props with typescript and cleans up css (#1879)

* Tries to clean up defineprops

* Cleans up define props for all components

assets/components.d.ts

@@ -17,7 +17,7 @@ declare module '@vue/runtime-core' {
     copy: typeof import('./components/LogViewer/DockerEventLogItem copy.vue')['default']
     DockerEventLogItem: typeof import('./components/LogViewer/DockerEventLogItem.vue')['default']
     DropdownMenu: typeof import('./components/DropdownMenu.vue')['default']
-    FieldList: typeof import('./components/FieldList.vue')['default']
+    FieldList: typeof import('./components/LogViewer/FieldList.vue')['default']
     FuzzySearchModal: typeof import('./components/FuzzySearchModal.vue')['default']
     InfiniteLoader: typeof import('./components/InfiniteLoader.vue')['default']
     JSONPayload: typeof import('./components/LogViewer/JSONPayload.vue')['default']

assets/components/FuzzySearchModal.vue

@@ -36,12 +36,9 @@
 import fuzzysort from "fuzzysort";
 import { type Container } from "@/types/Container";
 
-const props = defineProps({
+const { maxResults = 20 } = defineProps<{
-  maxResults: {
+  maxResults: number;
-    default: 20,
+}>();
-    type: Number,
-  },
-});
 
 const emit = defineEmits(["close"]);
 
@@ -64,7 +61,7 @@ const preparedContainers = computed(() =>
 
 const results = computed(() => {
   const options = {
-    limit: props.maxResults,
+    limit: maxResults,
     key: "preparedName",
   };
   if (query.value) {

assets/components/InfiniteLoader.vue

@@ -9,21 +9,21 @@
 </template>
 
 <script lang="ts" setup>
-const props = defineProps({
+const { onLoadMore = () => {}, enabled } = defineProps<{
-  onLoadMore: Function,
+  onLoadMore: () => void;
-  enabled: Boolean,
+  enabled: boolean;
-});
+}>();
 
 const isLoading = ref(false);
 const root = ref<HTMLElement>();
 
 const observer = new IntersectionObserver(async (entries) => {
   if (entries[0].intersectionRatio <= 0) return;
-  if (props.onLoadMore && props.enabled) {
+  if (onLoadMore && enabled) {
     const scrollingParent = root.value?.closest("[data-scrolling]") || document.documentElement;
     const previousHeight = scrollingParent.scrollHeight;
     isLoading.value = true;
-    await props.onLoadMore();
+    await onLoadMore();
     isLoading.value = false;
     await nextTick();
     scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight;

assets/components/LogActionsToolbar.vue

@@ -41,22 +41,19 @@
 </template>
 
 <script lang="ts" setup>
-import { type PropType, type ComputedRef } from "vue";
+import { type ComputedRef } from "vue";
 import { type Container } from "@/types/Container";
 import hotkeys from "hotkeys-js";
 
 const { showSearch } = useSearchFilter();
 const { base } = config;
 
-const props = defineProps({
+const { onClearClicked = (e: Event) => {} } = defineProps<{
-  onClearClicked: {
+  onClearClicked: (e: Event) => void;
-    type: Function as PropType<(e: Event) => void>,
+}>();
-    default: (e: Event) => {},
-  },
-});
 
 const onHotkey = (event: Event) => {
-  props.onClearClicked(event);
+  onClearClicked(event);
   event.preventDefault();
 };
 

assets/components/LogViewer/ComplexLogItem.vue

@@ -1,13 +1,15 @@
 <template>
-  <ul class="fields" @click="expanded = !expanded">
+  <div>
-    <li v-for="(value, name) in logEntry.message">
+    <ul class="fields" @click="expanded = !expanded">
-      <template v-if="value">
+      <li v-for="(value, name) in logEntry.message">
-        <span class="has-text-grey">{{ name }}=</span>
+        <template v-if="value">
-        <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
+          <span class="has-text-grey">{{ name }}=</span>
-      </template>
+          <span class="has-text-weight-bold" v-html="markSearch(value)"></span>
-    </li>
+        </template>
-  </ul>
+      </li>
-  <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+    </ul>
+    <field-list :fields="logEntry.unfilteredMessage" :expanded="expanded" :visible-keys="visibleKeys"></field-list>
+  </div>
 </template>
 <script lang="ts" setup>
 import { type ComplexLogEntry } from "@/models/LogEntry";

assets/components/LogViewer/FieldList.vue

@@ -28,26 +28,18 @@
 </template>
 <script lang="ts" setup>
 import { arrayEquals, isObject } from "@/utils";
-import { nextTick, PropType, ref, toRaw } from "vue";
 
-const props = defineProps({
+const {
-  fields: {
+  fields,
-    type: Object as PropType<Record<string, any>>,
+  expanded = false,
-    required: true,
+  parentKey = [],
-  },
+  visibleKeys = [],
-  expanded: {
+} = defineProps<{
-    type: Boolean,
+  fields: Record<string, any>;
-    default: false,
+  expanded?: boolean;
-  },
+  parentKey?: string[];
-  parentKey: {
+  visibleKeys?: string[][];
-    type: Array as PropType<string[]>,
+}>();
-    default: [],
-  },
-  visibleKeys: {
-    type: Array as PropType<string[][]>,
-    default: [],
-  },
-});
 
 const root = ref<HTMLElement>();
 
@@ -55,9 +47,9 @@ async function toggleField(field: string) {
   const index = fieldIndex(field);
 
   if (index > -1) {
-    props.visibleKeys.splice(index, 1);
+    visibleKeys.splice(index, 1);
   } else {
-    props.visibleKeys.push(props.parentKey.concat(field));
+    visibleKeys.push(parentKey.concat(field));
   }
 
   await nextTick();
@@ -72,8 +64,8 @@ function hasField(field: string) {
 }
 
 function fieldIndex(field: string) {
-  const path = props.parentKey.concat(field);
+  const path = parentKey.concat(field);
-  return props.visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
+  return visibleKeys.findIndex((keys) => arrayEquals(toRaw(keys), toRaw(path)));
 }
 </script>
 

assets/components/LogViewer/LogContainer.vue

@@ -26,26 +26,25 @@
 <script lang="ts" setup>
 import LogViewerWithSource from "./LogViewerWithSource.vue";
 
-const props = withDefaults(
+const {
-  defineProps<{
+  id,
-    id: string;
+  showTitle = false,
-    showTitle?: boolean;
+  scrollable = false,
-    scrollable?: boolean;
+  closable = false,
-    closable?: boolean;
+} = defineProps<{
-  }>(),
+  id: string;
-  {
+  showTitle?: boolean;
-    showTitle: false,
+  scrollable?: boolean;
-    scrollable: false,
+  closable?: boolean;
-    closable: false,
+}>();
-  }
-);
 
-const emit = defineEmits(["close"]);
+const emit = defineEmits<{
+  (event: "close"): void;
+}>();
 
-const { id } = toRefs(props);
 const store = useContainerStore();
 
-const container = store.currentContainer(id);
+const container = store.currentContainer($$(id));
 
 provide("container", container);
 

assets/components/LogViewer/LogViewer.vue

@@ -40,12 +40,12 @@ const props = defineProps<{
   messages: LogEntry<string | JSONObject>[];
 }>();
 
-const { messages } = toRefs(props);
 let visibleKeys = persistentVisibleKeys(inject("container") as ComputedRef<Container>);
 
 const { filteredPayload } = useVisibleFilter(visibleKeys);
 const { filteredMessages, resetSearch, isSearching } = useSearchFilter();
 
+const { messages } = toRefs(props);
 const visible = filteredPayload(messages);
 const filtered = filteredMessages(visible);
 

assets/components/PastTime.vue

@@ -5,13 +5,13 @@
 <script lang="ts" setup>
 import formatDistance from "date-fns/formatDistance";
 
-const props = defineProps<{
+const { date } = defineProps<{
   date: Date;
 }>();
 
 const text = ref<string>();
 function updateFromNow() {
-  text.value = formatDistance(props.date, new Date(), {
+  text.value = formatDistance(date, new Date(), {
     addSuffix: true,
   });
 }

assets/components/RelativeTime.vue

@@ -7,7 +7,6 @@ defineProps<{
   date: Date;
 }>();
 
-// hourStyle
 const dateFormatter = new Intl.DateTimeFormat(undefined, { day: "2-digit", month: "2-digit", year: "numeric" });
 const use12Hour = $computed(() => ({ auto: undefined, "12": true, "24": false }[hourStyle.value]));
 const timeFormatter = $computed(

assets/components/ScrollProgress.vue

@@ -18,16 +18,10 @@
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(
+const { indeterminate = false, autoHide = false } = defineProps<{
-  defineProps<{
+  indeterminate?: boolean;
-    indeterminate: boolean;
+  autoHide?: boolean;
-    autoHide: boolean;
+}>();
-  }>(),
-  {
-    indeterminate: false,
-    autoHide: true,
-  }
-);
 
 const scrollProgress = ref(0);
 const animation = ref({ cancel: () => {} });
@@ -54,7 +48,7 @@ watchPostEffect(() => {
       : (scrollElement.value as HTMLElement);
   scrollProgress.value = scrollY.value / (parent.scrollHeight - parent.clientHeight);
   animation.value.cancel();
-  if (props.autoHide && root.value) {
+  if (autoHide && root.value) {
     animation.value = root.value.animate(
       { opacity: [1, 0] },
       {

assets/components/ScrollableView.vue

@@ -25,35 +25,28 @@
 </template>
 
 <script lang="ts" setup>
-withDefaults(
+const { scrollable = false } = defineProps<{ scrollable?: boolean }>();
-  defineProps<{
-    scrollable: boolean;
-  }>(),
-  {
-    scrollable: false,
-  }
-);
 
-const paused = ref(false);
+let paused = $ref(false);
-const hasMore = ref(false);
+let hasMore = $ref(false);
-const loading = ref(false);
+let loading = $ref(false);
 const scrollObserver = ref<HTMLElement>();
 const scrollableContent = ref<HTMLElement>();
 
 provide("scrollingPaused", paused);
 
 const mutationObserver = new MutationObserver((e) => {
-  if (!paused.value) {
+  if (!paused) {
     scrollToBottom();
   } else {
     const record = e[e.length - 1];
     if (record.target.children[record.target.children.length - 1] == record.addedNodes[record.addedNodes.length - 1]) {
-      hasMore.value = true;
+      hasMore = true;
     }
   }
 });
 
-const intersectionObserver = new IntersectionObserver((entries) => (paused.value = entries[0].intersectionRatio == 0), {
+const intersectionObserver = new IntersectionObserver((entries) => (paused = entries[0].intersectionRatio == 0), {
   threshold: [0, 1],
   rootMargin: "80px 0px",
 });
@@ -65,11 +58,11 @@ onMounted(() => {
 
 function scrollToBottom(behavior: "auto" | "smooth" = "auto") {
   scrollObserver.value?.scrollIntoView({ behavior });
-  hasMore.value = false;
+  hasMore = false;
 }
 
 function setLoading(value: boolean) {
-  loading.value = value;
+  loading = value;
 }
 </script>
 <style scoped lang="scss">

assets/pages/container/[id].vue

@@ -5,11 +5,9 @@
 
 <script lang="ts" setup>
 const store = useContainerStore();
-const props = defineProps<{ id: string }>();
+const { id } = defineProps<{ id: string }>();
 
-const { id } = toRefs(props);
+const currentContainer = store.currentContainer($$(id));
-
-const currentContainer = store.currentContainer(id);
 const { activeContainers } = storeToRefs(store);
 
 setTitle("loading");