From a32f911ab900abbb58a2ebda6f44c536ca125465 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Fri, 10 May 2024 17:13:47 +0800
Subject: [PATCH] 1,455th Commit

---
 .eslintrc                                     | 38 +++++++++--------
 .../(library)/data-display/tree/Basic.vue     |  6 +--
 .../data-display/tree/Controlled.vue          |  4 +-
 .../(library)/data-display/tree/Lazy.vue      |  3 +-
 .../data-display/tree/MultipleSelection.vue   |  4 +-
 .../(library)/navigation/tabs/+page.vue       |  2 +-
 .../(library)/navigation/tours/+page.vue      |  8 ++--
 .../(library)/network/fetch/+page.vue         |  2 +-
 package.json                                  |  1 +
 .../components/autocomplete/Autocomplete.vue  | 41 +++++++++++++------
 ui/src/components/highlight/Highlight.vue     |  4 +-
 .../multiautocomplete/Multiautocomplete.vue   |  2 +-
 ui/src/components/popover/Popover.vue         |  6 ++-
 .../components/range-slider/RangeSlider.vue   | 13 +++---
 ui/src/components/select/Select.vue           | 34 +++++++++------
 .../select/__tests__/Select.spec.ts           |  2 +-
 ui/src/components/spinner/Spinner.vue         |  4 +-
 ui/src/components/time-picker/TimePicker.vue  | 26 ++++++------
 ui/src/components/tooltip/Tooltip.vue         | 28 +++++++------
 ui/src/components/tour/Tour.vue               | 38 ++++++++++-------
 ui/src/components/week-picker/WeekPicker.vue  | 26 ++++++------
 ui/src/components/year-picker/YearPicker.vue  | 26 ++++++------
 22 files changed, 185 insertions(+), 133 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index ecbcce37..039781b9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -7,24 +7,16 @@
   ],
   "rules": {
     "vue/multi-word-component-names": "off",
-    "vue/attribute-hyphenation": "off",
-    "vue/v-on-event-hyphenation": "off",
+    "vue/attribute-hyphenation": ["error", "never"],
+    "vue/v-on-event-hyphenation": ["error", "never"],
+    "vue/no-v-html": "off",
 
     "vue/block-lang": ["error", { "script": { "lang": "ts" } }],
     "vue/block-order": ["error", { "order": ["script[setup]", "template", "style[scoped]"] }],
-    "vue/block-tag-newline": [
-      "error",
-      { "singleline": "always", "multiline": "always", "maxEmptyLines": 1 }
-    ],
     "vue/component-api-style": ["error", ["script-setup"]],
-    "vue/component-name-in-template-casing": [
-      "error",
-      "PascalCase",
-      { "registeredComponentsOnly": true }
-    ],
-    "vue/component-options-name-casing": ["error", "PascalCase"],
-    "vue/custom-event-name-casing": ["error", "camelCase"],
-    "vue/define-emits-declaration": ["error", "type-based"],
+    "vue/component-name-in-template-casing": "error",
+    "vue/custom-event-name-casing": "error",
+    "vue/define-emits-declaration": "error",
     "vue/define-macros-order": [
       "error",
       {
@@ -32,7 +24,21 @@
         "defineExposeLast": true
       }
     ],
-    "vue/define-props-declaration": ["error", "type-based"],
-    "vue/html-button-has-type": ["error", { "button": true, "submit": true, "reset": true }]
+    "vue/define-props-declaration": "error",
+    "vue/html-button-has-type": "error",
+    "vue/no-multiple-objects-in-class": "warn",
+    "vue/no-restricted-call-after-await": "error",
+    "vue/no-template-target-blank": "error",
+    "vue/no-unused-refs": "warn",
+    "vue/no-use-v-else-with-v-for": "error",
+    "vue/no-v-text": "error",
+    "vue/padding-line-between-blocks": "warn",
+    "vue/prefer-define-options": "error",
+    "vue/prefer-separate-static-class": "error",
+    "vue/prefer-true-attribute-shorthand": "warn",
+    "vue/require-macro-variable-name": "error",
+    "vue/require-typed-ref": "warn",
+    "vue/v-for-delimiter-style": "error",
+    "vue/valid-define-options": "error"
   }
 }
diff --git a/app/src/routes/(backstage)/(library)/data-display/tree/Basic.vue b/app/src/routes/(backstage)/(library)/data-display/tree/Basic.vue
index c38c9eff..9aa8d845 100644
--- a/app/src/routes/(backstage)/(library)/data-display/tree/Basic.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/tree/Basic.vue
@@ -4,7 +4,7 @@ import { XTree } from '@x/ui';
 
 import nodesData from './nodesData';
 
-const nodes = ref();
+const nodes = ref<typeof nodesData>();
 
 onMounted(() => {
   nodes.value = structuredClone(nodesData);
@@ -12,10 +12,10 @@ onMounted(() => {
 
 type XTreeProps = InstanceType<typeof XTree>;
 
-const selected = ref();
+const selected = ref('');
 
 const nodeSelect: XTreeProps['onSelect'] = (node) => {
-  selected.value = node.value;
+  selected.value = node.value as string;
 };
 </script>
 
diff --git a/app/src/routes/(backstage)/(library)/data-display/tree/Controlled.vue b/app/src/routes/(backstage)/(library)/data-display/tree/Controlled.vue
index 117acc0e..775888ce 100644
--- a/app/src/routes/(backstage)/(library)/data-display/tree/Controlled.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/tree/Controlled.vue
@@ -6,8 +6,8 @@ import { XTree, XButton } from '@x/ui';
 import nodesData from './nodesData';
 
 const tree = ref<ComponentExposed<typeof XTree>>();
-const selected = ref();
-const nodes = ref();
+const selected = ref('');
+const nodes = ref<typeof nodesData>();
 
 onMounted(() => {
   nodes.value = structuredClone(nodesData);
diff --git a/app/src/routes/(backstage)/(library)/data-display/tree/Lazy.vue b/app/src/routes/(backstage)/(library)/data-display/tree/Lazy.vue
index 2b9ab05d..8275670e 100644
--- a/app/src/routes/(backstage)/(library)/data-display/tree/Lazy.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/tree/Lazy.vue
@@ -1,8 +1,9 @@
 <script lang="ts" setup>
+import type { ComponentProps } from 'vue-component-type-helpers';
 import { ref, onMounted } from 'vue';
 import { XTree } from '@x/ui';
 
-const nodes = ref();
+const nodes = ref<ComponentProps<typeof XTree>['nodes']>();
 
 onMounted(() => {
   nodes.value = [
diff --git a/app/src/routes/(backstage)/(library)/data-display/tree/MultipleSelection.vue b/app/src/routes/(backstage)/(library)/data-display/tree/MultipleSelection.vue
index 62aad455..ea39cdbe 100644
--- a/app/src/routes/(backstage)/(library)/data-display/tree/MultipleSelection.vue
+++ b/app/src/routes/(backstage)/(library)/data-display/tree/MultipleSelection.vue
@@ -4,8 +4,8 @@ import { XTree } from '@x/ui';
 
 import nodesData from './nodesData';
 
-const selected = ref();
-const nodes = ref();
+const selected = ref<string[]>();
+const nodes = ref<typeof nodesData>();
 
 onMounted(() => {
   nodes.value = structuredClone(nodesData);
diff --git a/app/src/routes/(backstage)/(library)/navigation/tabs/+page.vue b/app/src/routes/(backstage)/(library)/navigation/tabs/+page.vue
index cffdc2fe..d42fa6de 100644
--- a/app/src/routes/(backstage)/(library)/navigation/tabs/+page.vue
+++ b/app/src/routes/(backstage)/(library)/navigation/tabs/+page.vue
@@ -144,7 +144,7 @@ function onClose(val: string | number | undefined) {
           <div class="text-red-500 p-4">Angular Content</div>
         </XTabs.Tab>
 
-        <XTabs.Tab title="React" :disabled="true">
+        <XTabs.Tab title="React" disabled>
           <div class="text-blue-500 p-4">React Content</div>
         </XTabs.Tab>
 
diff --git a/app/src/routes/(backstage)/(library)/navigation/tours/+page.vue b/app/src/routes/(backstage)/(library)/navigation/tours/+page.vue
index 0b971f15..82bfd1b4 100644
--- a/app/src/routes/(backstage)/(library)/navigation/tours/+page.vue
+++ b/app/src/routes/(backstage)/(library)/navigation/tours/+page.vue
@@ -6,10 +6,10 @@ import { XBreadcrumb, XCard, XButton, XTour } from '@x/ui';
 const open = ref(false);
 const step = ref(0);
 
-const el1 = ref();
-const el2 = ref();
-const el3 = ref();
-const el4 = ref();
+const el1 = ref<HTMLHeadingElement>();
+const el2 = ref<HTMLDivElement>();
+const el3 = ref<HTMLDivElement>();
+const el4 = ref<HTMLDivElement>();
 
 const steps = computed<ComponentProps<typeof XTour>['steps']>(() => [
   {
diff --git a/app/src/routes/(backstage)/(library)/network/fetch/+page.vue b/app/src/routes/(backstage)/(library)/network/fetch/+page.vue
index 9a60106a..0e1f0eaf 100644
--- a/app/src/routes/(backstage)/(library)/network/fetch/+page.vue
+++ b/app/src/routes/(backstage)/(library)/network/fetch/+page.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { XBreadcrumb, XCard, XButton } from '@x/ui';
 import { request } from '@x/ui';
 
-const text = ref();
+const text = ref<string>();
 
 const doFetch = async () => {
   const { _data } = await request<{ message: string }>('/hello-world', { method: 'GET' });
diff --git a/package.json b/package.json
index 9a8256f1..d80cd9c1 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "mock": "pnpm -C mock mock",
     "build": "pnpm -C app build",
     "preview": "pnpm -C app preview",
+    "lint": "eslint app/src ui/src",
     "check": "pnpm -C app check",
     "test": "pnpm -C app test",
     "e2e": "pnpm -C e2e e2e"
diff --git a/ui/src/components/autocomplete/Autocomplete.vue b/ui/src/components/autocomplete/Autocomplete.vue
index 9f99aa95..74c418df 100644
--- a/ui/src/components/autocomplete/Autocomplete.vue
+++ b/ui/src/components/autocomplete/Autocomplete.vue
@@ -32,11 +32,11 @@ const emit = defineEmits<{
   (evt: 'change', val: string | null, opt: any | null): void;
 }>();
 
-const target = ref();
-const autocompleteInput = ref();
-const autocompletePane = ref();
-const autocompleteList = ref();
-const autocompleteItem = ref<any[]>([]);
+const target = ref<HTMLDivElement>();
+const autocompleteInput = ref<typeof TextField>();
+const autocompletePane = ref<HTMLDivElement>();
+const autocompleteList = ref<HTMLDivElement>();
+const autocompleteItem = ref<HTMLDivElement[]>([]);
 
 const debouncedFn = useDebounceFn(async (val) => {
   if (!val.length) return;
@@ -44,6 +44,8 @@ const debouncedFn = useDebounceFn(async (val) => {
   const response = await request<any>('/suggestions', { query: { value: val } });
 
   nextTick(() => {
+    if (!autocompleteInput.value || !autocompletePane.value || !autocompleteList.value) return;
+
     const rect = autocompleteInput.value.$el.getBoundingClientRect();
 
     autocompletePane.value.style.width = `${rect.width}px`;
@@ -92,7 +94,11 @@ const flux = reactive({
       flux.show = true;
 
       nextTick(() => {
-        const active = autocompleteList.value.querySelector('.autocomplete-item-active');
+        if (!autocompleteList.value) return;
+
+        const active = autocompleteList.value.querySelector(
+          '.autocomplete-item-active',
+        ) as HTMLDivElement;
         const offsetTop = active?.offsetTop;
         if (offsetTop) autocompleteList.value.scrollTop = offsetTop - active.offsetHeight * 2;
       });
@@ -105,18 +111,26 @@ const flux = reactive({
     if (flux.itemHoverIndex === Number(flux.options?.length) - 1) return;
     flux.itemHoverIndex += 1;
 
-    const hover = autocompleteList.value.querySelector('.autocomplete-item-hover');
-    const offsetTop = hover?.offsetTop;
-    if (offsetTop) autocompleteList.value.scrollTop = offsetTop - hover.offsetHeight;
+    if (autocompleteList.value) {
+      const hover = autocompleteList.value.querySelector(
+        '.autocomplete-item-hover',
+      ) as HTMLDivElement;
+      const offsetTop = hover?.offsetTop;
+      if (offsetTop) autocompleteList.value.scrollTop = offsetTop - hover.offsetHeight;
+    }
   },
   onUp() {
     if (!flux.show && !flux.options?.length) return;
     if (flux.itemHoverIndex <= 0) return;
     flux.itemHoverIndex -= 1;
 
-    const hover = autocompleteList.value.querySelector('.autocomplete-item-hover');
-    const offsetTop = hover?.offsetTop;
-    if (offsetTop) autocompleteList.value.scrollTop = offsetTop - hover.offsetHeight * 3;
+    if (autocompleteList.value) {
+      const hover = autocompleteList.value.querySelector(
+        '.autocomplete-item-hover',
+      ) as HTMLDivElement;
+      const offsetTop = hover?.offsetTop;
+      if (offsetTop) autocompleteList.value.scrollTop = offsetTop - hover.offsetHeight * 3;
+    }
   },
   onEnter() {
     flux.onSelect(flux.options?.[flux.itemHoverIndex]?.value, flux.options?.[flux.itemHoverIndex]);
@@ -159,6 +173,7 @@ useScrollParent(
   computed(() => autocompletePane.value),
   () => {
     if (flux.show) {
+      if (!autocompleteInput.value || !autocompletePane.value) return;
       const rect = autocompleteInput.value.$el.getBoundingClientRect();
       autocompletePane.value.style.width = `${rect.width}px`;
       autocompletePane.value.style.left = `${rect.left}px`;
@@ -195,7 +210,7 @@ useScrollParent(
           <div ref="autocompleteList" class="select-menu">
             <div
               v-for="(item, index) in flux.options"
-              :ref="(el) => (autocompleteItem[index] = el)"
+              :ref="(el) => (autocompleteItem[index] = el as HTMLDivElement)"
               :key="item.value"
               class="select-menu-item"
               :class="{
diff --git a/ui/src/components/highlight/Highlight.vue b/ui/src/components/highlight/Highlight.vue
index 3c99ad6b..180184e5 100644
--- a/ui/src/components/highlight/Highlight.vue
+++ b/ui/src/components/highlight/Highlight.vue
@@ -2,11 +2,11 @@
 import type { VNode } from 'vue';
 import { toRef, useSlots, h } from 'vue';
 
-const prop = defineProps<{
+const props = defineProps<{
   query?: string[];
 }>();
 
-const queryRef = toRef(prop, 'query', []);
+const queryRef = toRef(props, 'query', []);
 
 const slots = useSlots();
 const defaultSlot = slots.default?.();
diff --git a/ui/src/components/multiautocomplete/Multiautocomplete.vue b/ui/src/components/multiautocomplete/Multiautocomplete.vue
index b6b42ebe..c8b3a01d 100644
--- a/ui/src/components/multiautocomplete/Multiautocomplete.vue
+++ b/ui/src/components/multiautocomplete/Multiautocomplete.vue
@@ -72,7 +72,7 @@ onClickOutside(target, () => {
             'select-section-up': flux.direction === 'up',
           }"
         >
-          <div ref="autocompleteList" class="list">
+          <div class="list">
             <div
               v-for="(item, index) in flux.options"
               :ref="(el) => (autocompleteItem[index] = el)"
diff --git a/ui/src/components/popover/Popover.vue b/ui/src/components/popover/Popover.vue
index 423e3b61..cb457e3b 100644
--- a/ui/src/components/popover/Popover.vue
+++ b/ui/src/components/popover/Popover.vue
@@ -17,8 +17,8 @@ const props = withDefaults(
   },
 );
 
-const target = ref();
-const panel = ref();
+const target = ref<HTMLDivElement>();
+const panel = ref<HTMLDivElement>();
 
 const flux = reactive({
   status: false,
@@ -44,6 +44,8 @@ const flux = reactive({
 
   direction: '' as 'down' | 'up' | '',
   resizePanel() {
+    if (!target.value || !panel.value) return;
+
     const rect = target.value.getBoundingClientRect();
 
     const center = window.innerHeight / 2;
diff --git a/ui/src/components/range-slider/RangeSlider.vue b/ui/src/components/range-slider/RangeSlider.vue
index 3e29b263..8ed8ab72 100644
--- a/ui/src/components/range-slider/RangeSlider.vue
+++ b/ui/src/components/range-slider/RangeSlider.vue
@@ -21,9 +21,11 @@ withDefaults(
   },
 );
 
-const target = ref();
+const target = ref<HTMLDivElement>();
 
 function onInput(evt: Event) {
+  if (!target.value) return;
+
   const slides = target.value.querySelectorAll('input');
   const min = parseFloat(slides[0].min);
   const max = parseFloat(slides[0].max);
@@ -34,8 +36,8 @@ function onInput(evt: Event) {
   const percentageMin = (slide1 / (max - min)) * 100;
   const percentageMax = (slide2 / (max - min)) * 100;
 
-  target.value.style.setProperty('--range-slider-value-low', percentageMin);
-  target.value.style.setProperty('--range-slider-value-high', percentageMax);
+  target.value.style.setProperty('--range-slider-value-low', String(percentageMin));
+  target.value.style.setProperty('--range-slider-value-high', String(percentageMax));
 
   if (slide1 >= slide2) {
     const tmp = slide2;
@@ -49,8 +51,9 @@ function onInput(evt: Event) {
     }
   }
 
-  target.value.querySelector('.RangeSlider-Output').setAttribute('data-low', slide1);
-  target.value.querySelector('.RangeSlider-Output').setAttribute('data-high', slide2);
+  const output = target.value.querySelector('.RangeSlider-Output') as HTMLOutputElement;
+  output.setAttribute('data-low', String(slide1));
+  output.setAttribute('data-high', String(slide2));
   startValueModel.value = String(slide1);
   endValueModel.value = String(slide2);
 }
diff --git a/ui/src/components/select/Select.vue b/ui/src/components/select/Select.vue
index 079fcfa4..2479e6b0 100644
--- a/ui/src/components/select/Select.vue
+++ b/ui/src/components/select/Select.vue
@@ -89,11 +89,11 @@ const flux = reactive({
   },
 });
 
-const target = ref();
-const selectInput = ref();
-const selectPanel = ref();
-const selectFilter = ref();
-const selectList = ref();
+const target = ref<HTMLDivElement>();
+const selectInput = ref<HTMLDivElement>();
+const selectPanel = ref<HTMLDivElement>();
+const selectFilter = ref<typeof TextField>();
+const selectList = ref<HTMLDivElement>();
 const selectItem = ref<HTMLDivElement[]>([]);
 
 const focused = ref(false);
@@ -111,6 +111,8 @@ watch(
 );
 
 function resizePanel() {
+  if (!selectInput.value || !selectPanel.value) return;
+
   const rect = selectInput.value.getBoundingClientRect();
   const offsetParent = selectInput.value.offsetParent as HTMLElement;
   const parentRect = offsetParent.getBoundingClientRect();
@@ -145,6 +147,8 @@ const open = () => {
   nextTick(() => {
     resizePanel();
 
+    if (!selectList.value || !selectPanel.value) return;
+
     /**
      * Because of the use of `whitespace-nowrap` on `Select-Item`,
      * if there's a scrollbar, set that width for all options; otherwise, keep it at 100%.
@@ -165,7 +169,7 @@ const open = () => {
       }
     }
 
-    const active = selectPanel.value.querySelector('.Select-Item-Active');
+    const active = selectPanel.value.querySelector('.Select-Item-Active') as HTMLDivElement;
     const offsetTop = props.filterable ? active?.offsetTop - 46 : active?.offsetTop;
     if (offsetTop) selectList.value.scrollTop = offsetTop - active.offsetHeight * 2;
 
@@ -238,9 +242,11 @@ function onKeydown(evt: KeyboardEvent) {
     if (hoverIndex.value === Number(flux.options?.length) - 1) return;
     hoverIndex.value += 1;
 
-    const hover = selectList.value.querySelector('.Select-Item-Hover');
-    const offsetTop = hover?.offsetTop;
-    if (offsetTop) selectList.value.scrollTop = offsetTop - hover.offsetHeight;
+    if (selectList.value) {
+      const hover = selectList.value.querySelector('.Select-Item-Hover') as HTMLDivElement;
+      const offsetTop = hover?.offsetTop;
+      if (offsetTop) selectList.value.scrollTop = offsetTop - hover.offsetHeight;
+    }
   }
 
   if (evt.code === 'ArrowUp') {
@@ -249,13 +255,15 @@ function onKeydown(evt: KeyboardEvent) {
     if (hoverIndex.value <= 0) return;
     hoverIndex.value -= 1;
 
-    const hover = selectList.value.querySelector('.Select-Item-Hover');
-    const offsetTop = hover?.offsetTop;
-    if (offsetTop) selectList.value.scrollTop = offsetTop - hover.offsetHeight;
+    if (selectList.value) {
+      const hover = selectList.value.querySelector('.Select-Item-Hover') as HTMLDivElement;
+      const offsetTop = hover?.offsetTop;
+      if (offsetTop) selectList.value.scrollTop = offsetTop - hover.offsetHeight;
+    }
   }
 
   if (evt.code === 'Tab') {
-    selectInput.value.blur();
+    selectInput.value?.blur();
     flux.show = false;
     focused.value = false;
   }
diff --git a/ui/src/components/select/__tests__/Select.spec.ts b/ui/src/components/select/__tests__/Select.spec.ts
index a6b7bc91..23b13462 100644
--- a/ui/src/components/select/__tests__/Select.spec.ts
+++ b/ui/src/components/select/__tests__/Select.spec.ts
@@ -35,7 +35,7 @@ describe('Select.vue', () => {
       },
     });
 
-    await wrapper.setProps({ modelValue: '1' });
+    await wrapper.setProps({ value: '1' });
 
     expect(wrapper.text()).toContain('Option 1');
   });
diff --git a/ui/src/components/spinner/Spinner.vue b/ui/src/components/spinner/Spinner.vue
index e0162309..5eb294ee 100644
--- a/ui/src/components/spinner/Spinner.vue
+++ b/ui/src/components/spinner/Spinner.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
-const spinnerWrapper = ref();
-const spinner = ref();
+const spinnerWrapper = ref<HTMLDivElement>();
+const spinner = ref<HTMLDivElement>();
 </script>
 
 <template>
diff --git a/ui/src/components/time-picker/TimePicker.vue b/ui/src/components/time-picker/TimePicker.vue
index 4d909723..fae0ed3d 100644
--- a/ui/src/components/time-picker/TimePicker.vue
+++ b/ui/src/components/time-picker/TimePicker.vue
@@ -55,25 +55,27 @@ const flux = reactive({
   },
 });
 
-const target = ref();
-const input = ref();
-const picker = ref();
+const target = ref<HTMLDivElement>();
+const input = ref<typeof TextField>();
+const picker = ref<HTMLDivElement>();
 
 const direction = ref<'down' | 'up'>('down');
 
 function resizePanel() {
-  const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
+  if (input.value && picker.value) {
+    const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
 
-  picker.value.style.left = `${rect.left}px`;
+    picker.value.style.left = `${rect.left}px`;
 
-  const center = window.innerHeight / 2;
+    const center = window.innerHeight / 2;
 
-  if (rect.top > center) {
-    picker.value.style.top = `${rect.top}px`;
-    direction.value = 'up';
-  } else {
-    picker.value.style.top = `${rect.bottom}px`;
-    direction.value = 'down';
+    if (rect.top > center) {
+      picker.value.style.top = `${rect.top}px`;
+      direction.value = 'up';
+    } else {
+      picker.value.style.top = `${rect.bottom}px`;
+      direction.value = 'down';
+    }
   }
 }
 
diff --git a/ui/src/components/tooltip/Tooltip.vue b/ui/src/components/tooltip/Tooltip.vue
index 10d22636..064df4f7 100644
--- a/ui/src/components/tooltip/Tooltip.vue
+++ b/ui/src/components/tooltip/Tooltip.vue
@@ -8,28 +8,30 @@ defineProps<{
   title?: string;
 }>();
 
-const target = ref();
-const panel = ref();
+const target = ref<HTMLDivElement>();
+const panel = ref<HTMLDivElement>();
 
 const flux = reactive({
   status: false,
   timeout: undefined as ReturnType<typeof setTimeout> | undefined,
   resizePanel() {
-    const rect = target.value.getBoundingClientRect();
+    if (target.value && panel.value) {
+      const rect = target.value.getBoundingClientRect();
 
-    const center = window.innerHeight / 2;
+      const center = window.innerHeight / 2;
 
-    panel.value.style.left = `${rect.x}px`;
-    panel.value.style.top = `${rect.y}px`;
+      panel.value.style.left = `${rect.x}px`;
+      panel.value.style.top = `${rect.y}px`;
 
-    const xAxis = `calc(${rect.width / 2}px - 50%)`;
+      const xAxis = `calc(${rect.width / 2}px - 50%)`;
 
-    if (rect.top > center) {
-      const yAxis = `calc(-100% - 0.25rem)`;
-      panel.value.style.transform = `translate(${xAxis}, ${yAxis})`;
-    } else {
-      const yAxis = `calc(${rect.height}px + 0.25rem)`;
-      panel.value.style.transform = `translate(${xAxis}, ${yAxis})`;
+      if (rect.top > center) {
+        const yAxis = `calc(-100% - 0.25rem)`;
+        panel.value.style.transform = `translate(${xAxis}, ${yAxis})`;
+      } else {
+        const yAxis = `calc(${rect.height}px + 0.25rem)`;
+        panel.value.style.transform = `translate(${xAxis}, ${yAxis})`;
+      }
     }
   },
   onMouseenter() {
diff --git a/ui/src/components/tour/Tour.vue b/ui/src/components/tour/Tour.vue
index 121e5876..3697dbc8 100644
--- a/ui/src/components/tour/Tour.vue
+++ b/ui/src/components/tour/Tour.vue
@@ -28,8 +28,8 @@ function onFinish() {
   openModel.value = false;
 }
 
-const tour = ref();
-const guide = ref();
+const tour = ref<HTMLDivElement>();
+const guide = ref<HTMLDivElement>();
 
 watch(
   () => openModel.value,
@@ -43,13 +43,17 @@ watch(
       currentTarget.scrollIntoView({ block: 'center' });
       const rect = currentTarget.getBoundingClientRect();
 
-      tour.value.style.width = `${rect.width}px`;
-      tour.value.style.height = `${rect.height}px`;
-      tour.value.style.left = `${rect.x}px`;
-      tour.value.style.top = `${rect.y}px`;
-
-      guide.value.style.left = `${rect.x}px`;
-      guide.value.style.top = `${rect.y + rect.height + 16}px`;
+      if (tour.value) {
+        tour.value.style.width = `${rect.width}px`;
+        tour.value.style.height = `${rect.height}px`;
+        tour.value.style.left = `${rect.x}px`;
+        tour.value.style.top = `${rect.y}px`;
+      }
+
+      if (guide.value) {
+        guide.value.style.left = `${rect.x}px`;
+        guide.value.style.top = `${rect.y + rect.height + 16}px`;
+      }
     } else {
       stepModel.value = 0;
     }
@@ -67,13 +71,17 @@ watch(
     currentTarget.scrollIntoView({ block: 'center' });
     const rect = currentTarget.getBoundingClientRect();
 
-    tour.value.style.width = `${rect.width}px`;
-    tour.value.style.height = `${rect.height}px`;
-    tour.value.style.left = `${rect.x}px`;
-    tour.value.style.top = `${rect.y}px`;
+    if (tour.value) {
+      tour.value.style.width = `${rect.width}px`;
+      tour.value.style.height = `${rect.height}px`;
+      tour.value.style.left = `${rect.x}px`;
+      tour.value.style.top = `${rect.y}px`;
+    }
 
-    guide.value.style.left = `${rect.x}px`;
-    guide.value.style.top = `${rect.y + rect.height + 16}px`;
+    if (guide.value) {
+      guide.value.style.left = `${rect.x}px`;
+      guide.value.style.top = `${rect.y + rect.height + 16}px`;
+    }
   },
 );
 
diff --git a/ui/src/components/week-picker/WeekPicker.vue b/ui/src/components/week-picker/WeekPicker.vue
index b200adf8..ec2c10e3 100644
--- a/ui/src/components/week-picker/WeekPicker.vue
+++ b/ui/src/components/week-picker/WeekPicker.vue
@@ -25,9 +25,9 @@ const emit = defineEmits<{
   (evt: 'change', val: string, startDate?: Date, endDate?: Date): void;
 }>();
 
-const target = ref();
-const input = ref();
-const picker = ref();
+const target = ref<HTMLDivElement>();
+const input = ref<typeof TextField>();
+const picker = ref<HTMLDivElement>();
 
 const currentMoment = ref(new Date());
 const show = ref(false);
@@ -80,18 +80,20 @@ const weekdays = ['Week', 'S', 'M', 'T', 'W', 'T', 'F', 'S'];
 type Week = Array<{ date?: Date; outOfRange?: boolean; week?: number }>;
 
 function resizePanel() {
-  const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
+  if (input.value && picker.value) {
+    const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
 
-  picker.value.style.left = `${rect.left}px`;
+    picker.value.style.left = `${rect.left}px`;
 
-  const center = window.innerHeight / 2;
+    const center = window.innerHeight / 2;
 
-  if (rect.top > center) {
-    picker.value.style.top = `${rect.top}px`;
-    direction.value = 'up';
-  } else {
-    picker.value.style.top = `${rect.bottom}px`;
-    direction.value = 'down';
+    if (rect.top > center) {
+      picker.value.style.top = `${rect.top}px`;
+      direction.value = 'up';
+    } else {
+      picker.value.style.top = `${rect.bottom}px`;
+      direction.value = 'down';
+    }
   }
 }
 
diff --git a/ui/src/components/year-picker/YearPicker.vue b/ui/src/components/year-picker/YearPicker.vue
index 9e1e231e..ec6f7272 100644
--- a/ui/src/components/year-picker/YearPicker.vue
+++ b/ui/src/components/year-picker/YearPicker.vue
@@ -15,26 +15,28 @@ defineProps<{
   disabled?: boolean;
 }>();
 
-const target = ref();
-const input = ref();
-const picker = ref();
+const target = ref<HTMLDivElement>();
+const input = ref<typeof TextField>();
+const picker = ref<HTMLDivElement>();
 
 const flux = reactive({
   showDatePicker: false,
   direction: '' as 'down' | 'up' | '',
   resizePanel() {
-    const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
+    if (input.value && picker.value) {
+      const rect = input.value.$el.querySelector('.TextField-Input').getBoundingClientRect();
 
-    picker.value.style.left = `${rect.left}px`;
+      picker.value.style.left = `${rect.left}px`;
 
-    const center = window.innerHeight / 2;
+      const center = window.innerHeight / 2;
 
-    if (rect.top > center) {
-      picker.value.style.top = `${rect.top}px`;
-      flux.direction = 'up';
-    } else {
-      picker.value.style.top = `${rect.bottom}px`;
-      flux.direction = 'down';
+      if (rect.top > center) {
+        picker.value.style.top = `${rect.top}px`;
+        flux.direction = 'up';
+      } else {
+        picker.value.style.top = `${rect.bottom}px`;
+        flux.direction = 'down';
+      }
     }
   },
   openPicker() {