1,455th Commit

.eslintrc

@@ -7,32 +7,38 @@
   ],
   "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",
       {
         "order": ["defineOptions", "defineModel", "defineProps", "defineEmits", "defineSlots"],
         "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"
   }
 }

app/src/routes/(backstage)/(library)/data-display/tree/Basic.vue

@@ -4,18 +4,18 @@ import { XTree } from '@x/ui';
 
 import nodesData from './nodesData';
 
-const nodes = ref();
+const nodes = ref<typeof nodesData>();
 
 onMounted(() => {
   nodes.value = structuredClone(nodesData);
 });
 
 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>
 

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);

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 = [

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);

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>
 

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']>(() => [
   {

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' });

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"

ui/src/components/autocomplete/Autocomplete.vue

@@ -32,18 +32,20 @@ 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;
 
   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="{

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?.();

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)"

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;

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);
 }

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;
   }