chore: use vue/vue3-recommended eslint plugin

Signed-off-by: Ryan Wang <i@ryanc.cc>

.eslintrc.cjs

@@ -4,7 +4,7 @@ require("@rushstack/eslint-patch/modern-module-resolution");
 module.exports = {
   root: true,
   extends: [
-    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
     "eslint:recommended",
     "@vue/eslint-config-typescript/recommended",
     "@vue/eslint-config-prettier",

packages/components/package.json

@@ -21,8 +21,7 @@
     "story:dev": "histoire dev --port 4000",
     "story:build": "histoire build",
     "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
-    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'",
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
-    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
     "halo",

packages/components/src/components/alert/Alert.vue

@@ -27,6 +27,8 @@ const props = withDefaults(
   }>(),
   {
     type: "default",
+    title: "",
+    description: "",
     closable: true,
   }
 );

packages/components/src/components/button/Button.vue

@@ -48,7 +48,7 @@ const props = withDefaults(
     block?: boolean;
     disabled?: boolean;
     loading?: boolean;
-    route?: RouteLocationRaw;
+    route?: RouteLocationRaw | undefined;
   }>(),
   {
     type: "default",
@@ -57,6 +57,7 @@ const props = withDefaults(
     block: false,
     disabled: false,
     loading: false,
+    route: undefined,
   }
 );
 

packages/components/src/components/checkbox/CheckBox.vue

@@ -2,12 +2,15 @@
 const props = withDefaults(
   defineProps<{
     checked?: boolean;
-    value?: string | number | boolean;
+    value?: string | number | boolean | undefined;
-    label?: string;
+    label?: string | undefined;
-    name?: string;
+    name?: string | undefined;
   }>(),
   {
     checked: false,
+    value: undefined,
+    label: undefined,
+    name: undefined,
   }
 );
 

packages/components/src/components/checkbox/CheckBoxGroup.vue

@@ -4,7 +4,7 @@ import { VCheckbox } from "./index";
 const props = withDefaults(
   defineProps<{
     modelValue?: string[];
-    options?: Array<Record<string, string>>;
+    options: Array<Record<string, string>>;
     valueKey?: string;
     labelKey?: string;
     name?: string;
@@ -13,6 +13,7 @@ const props = withDefaults(
     modelValue: () => [],
     valueKey: "value",
     labelKey: "label",
+    name: undefined,
   }
 );
 

packages/components/src/components/checkbox/__tests__/__snapshots__/CheckBox.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`CheckBox > should render 1`] = `
 "<div class=\\"checkbox-wrapper\\">
-  <div class=\\"checkbox-inner\\"><input id=\\"checkbox\\" type=\\"checkbox\\" value=\\"false\\"></div>
+  <div class=\\"checkbox-inner\\"><input id=\\"checkbox\\" type=\\"checkbox\\"></div>
   <!--v-if-->
 </div>"
 `;

packages/components/src/components/codemirror/Codemirror.story.vue

@@ -8,7 +8,7 @@ function initState() {
 }
 </script>
 <template>
-  <Story :initState="initState" title="Codemirror">
+  <Story :init-state="initState" title="Codemirror">
     <template #default="{ state }">
       <VCodemirror v-model="state.value" height="500px" language="yaml" />
     </template>

packages/components/src/components/dialog/Dialog.vue

@@ -32,6 +32,12 @@ const props = withDefaults(
     confirmType: "primary",
     cancelText: "取消",
     visible: false,
+    onConfirm: () => {
+      return;
+    },
+    onCancel: () => {
+      return;
+    },
   }
 );
 

packages/components/src/components/dialog/DialogProvider.vue

@@ -19,8 +19,8 @@ provide(DialogProviderProvideKey, options);
     :confirm-text="options.confirmText"
     :confirm-type="options.confirmType"
     :description="options.description"
-    :onCancel="options.onCancel"
+    :on-cancel="options.onCancel"
-    :onConfirm="options.onConfirm"
+    :on-confirm="options.onConfirm"
     :title="options.title"
     :type="options.type"
   ></VDialog>

packages/components/src/components/input/Input.vue

@@ -10,8 +10,10 @@ const props = withDefaults(
     placeholder?: string;
   }>(),
   {
+    modelValue: undefined,
     size: "md",
     disabled: false,
+    placeholder: undefined,
   }
 );
 

packages/components/src/components/menu/RoutesMenu.tsx

@@ -10,6 +10,7 @@ const VRoutesMenu = defineComponent({
   props: {
     menus: {
       type: Object as PropType<MenuGroupType[]>,
+      required: true,
     },
   },
   emits: ["select"],

packages/components/src/components/modal/Modal.vue

@@ -12,8 +12,10 @@ const props = withDefaults(
   }>(),
   {
     visible: false,
+    title: undefined,
     width: 500,
     fullscreen: false,
+    bodyClass: undefined,
   }
 );
 

packages/components/src/components/pagination/Pagination.vue

@@ -51,7 +51,7 @@ watch(
     :key="key"
     v-slot="{ currentPage, next, prev, pageCount }"
     :page="page"
-    :pageSize="size"
+    :page-size="size"
     :total="total"
     @page-change="onPageChange"
     @page-size-change="onPageChange"

packages/components/src/components/radio/RadioGroup.vue

@@ -10,8 +10,11 @@ withDefaults(
     name?: string;
   }>(),
   {
+    modelValue: undefined,
+    options: undefined,
     valueKey: "value",
     labelKey: "label",
+    name: undefined,
   }
 );
 

packages/components/src/components/select/Select.vue

@@ -10,8 +10,10 @@ const props = withDefaults(
     placeholder?: string;
   }>(),
   {
+    modelValue: undefined,
     size: "md",
     disabled: false,
+    placeholder: undefined,
   }
 );
 

packages/components/src/components/tabs/Tabbar.vue

@@ -12,6 +12,8 @@ const props = withDefaults(
     labelKey?: string;
   }>(),
   {
+    activeId: undefined,
+    items: undefined,
     type: "default",
     direction: "row",
     idKey: "id",

packages/components/src/components/tabs/Tabs.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     labelKey?: string;
   }>(),
   {
+    activeId: undefined,
     type: "default",
     direction: "row",
     idKey: "id",
@@ -54,7 +55,7 @@ const handleChange = (id: string | number) => {
   <div :class="classes" class="tabs-wrapper">
     <div class="tabs-bar-wrapper">
       <VTabbar
-        :activeId="activeId"
+        :active-id="activeId"
         :direction="direction"
         :items="tabItems"
         :type="type"

packages/components/src/components/textarea/Textarea.vue

@@ -7,7 +7,9 @@ withDefaults(
     rows?: number;
   }>(),
   {
+    modelValue: undefined,
     disabled: false,
+    placeholder: undefined,
     rows: 3,
   }
 );

packages/shared/package.json

@@ -8,7 +8,9 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "vite build",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+    "typecheck": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint ./src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts",
+    "prettier": "prettier --write './src/**/*.{vue,js,jsx,ts,tsx,css,scss,json,yml,yaml,html}'"
   },
   "keywords": [],
   "author": {

src/modules/contents/attachments/components/AttachmentUploadModal.vue

@@ -93,7 +93,7 @@ const onVisibleChange = (visible: boolean) => {
         label-idle="Drop files here..."
         name="test"
         server="/api"
-        v-bind:allow-multiple="true"
+        :allow-multiple="true"
       />
     </div>
   </VModal>

src/modules/contents/posts/PostList.vue

@@ -706,8 +706,8 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
                       class="inline-flex flex-wrap gap-1 text-xs text-gray-500"
                     >
                       分类：<span
-                        v-for="(category, index) in post.categories"
+                        v-for="(category, categoryIndex) in post.categories"
-                        :key="index"
+                        :key="categoryIndex"
                         class="cursor-pointer hover:text-gray-900"
                       >
                         {{ category.spec.displayName }}
@@ -720,11 +720,11 @@ function handlePhaseFilterItemChange(filterItem: FilterItem) {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <RouterLink
-                    v-for="(contributor, index) in post.contributors"
+                    v-for="(contributor, contributorIndex) in post.contributors"
-                    :key="index"
+                    :key="contributorIndex"
                     :to="{
                       name: 'UserDetail',
                       params: { name: contributor.name },

src/modules/contents/posts/components/PostPreviewModal.vue

@@ -27,7 +27,7 @@ const onVisibleChange = (visible: boolean) => {
 </script>
 <template>
   <VModal
-    :bodyClass="['!p-0']"
+    :body-class="['!p-0']"
     :visible="visible"
     fullscreen
     title="文章预览"

src/modules/dashboard/widgets/JournalPublishWidget.vue

@@ -3,7 +3,7 @@ import { VButton, VCard, VTextarea } from "@halo-dev/components";
 </script>
 <template>
   <VCard
-    :bodyClass="['h-full', 'overflow-y-auto']"
+    :body-class="['h-full', 'overflow-y-auto']"
     class="h-full"
     title="日志发表"
   >

src/modules/dashboard/widgets/QuickLinkWidget.vue

@@ -42,7 +42,7 @@ const router = useRouter();
 </script>
 <template>
   <VCard
-    :bodyClass="['h-full', 'overflow-y-auto', '!p-0']"
+    :body-class="['h-full', 'overflow-y-auto', '!p-0']"
     class="h-full"
     title="快捷访问"
   >

src/modules/dashboard/widgets/RecentLoginWidget.vue

@@ -6,7 +6,7 @@ const { users } = useUserFetch();
 </script>
 <template>
   <VCard
-    :bodyClass="['h-full', '!p-0', 'overflow-y-auto']"
+    :body-class="['h-full', '!p-0', 'overflow-y-auto']"
     class="h-full"
     title="最近登录"
   >

src/modules/dashboard/widgets/RecentPublishedWidget.vue

@@ -21,7 +21,7 @@ onMounted(handleFetchPosts);
 </script>
 <template>
   <VCard
-    :bodyClass="['h-full', '!p-0', 'overflow-y-auto']"
+    :body-class="['h-full', '!p-0', 'overflow-y-auto']"
     class="h-full"
     title="最近发布"
   >

src/modules/interface/menus/components/MenuList.vue

@@ -119,7 +119,7 @@ defineExpose({
     :menu="selectedMenuToUpdate"
     @close="handleFetchMenus"
   />
-  <VCard :bodyClass="['!p-0']" title="菜单">
+  <VCard :body-class="['!p-0']" title="菜单">
     <VEmpty
       v-if="!menus.length && !loading"
       message="你可以尝试刷新或者新建菜单"

src/modules/system/roles/components/RoleEditingModal.vue

@@ -156,13 +156,13 @@ const handleResetForm = () => {
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
                 <ul class="space-y-2">
-                  <li v-for="(role, index) in group.roles" :key="index">
+                  <li v-for="(roleTemplate, index) in group.roles" :key="index">
                     <label
                       class="inline-flex w-full cursor-pointer flex-row items-center gap-4 rounded-base border p-5 hover:border-primary"
                     >
                       <input
                         v-model="selectedRoleTemplates"
-                        :value="role.metadata.name"
+                        :value="roleTemplate.metadata.name"
                         class="h-4 w-4 rounded border-gray-300 text-indigo-600"
                         type="checkbox"
                         @change="handleRoleTemplateSelect"
@@ -170,14 +170,14 @@ const handleResetForm = () => {
                       <div class="flex flex-1 flex-col gap-y-3">
                         <span class="font-medium text-gray-900">
                           {{
-                            role.metadata.annotations?.[
+                            roleTemplate.metadata.annotations?.[
                               rbacAnnotations.DISPLAY_NAME
                             ]
                           }}
                         </span>
                         <span
                           v-if="
-                            role.metadata.annotations?.[
+                            roleTemplate.metadata.annotations?.[
                               rbacAnnotations.DEPENDENCIES
                             ]
                           "
@@ -186,7 +186,7 @@ const handleResetForm = () => {
                           依赖于
                           {{
                             JSON.parse(
-                              role.metadata.annotations?.[
+                              roleTemplate.metadata.annotations?.[
                                 rbacAnnotations.DEPENDENCIES
                               ]
                             ).join(", ")

src/modules/system/users/UserList.vue

@@ -311,11 +311,11 @@ onMounted(() => {
               </div>
               <div class="flex">
                 <div
-                  class="inline-flex flex-col flex-col-reverse items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
+                  class="inline-flex flex-col items-end gap-4 sm:flex-row sm:items-center sm:gap-6"
                 >
                   <div
-                    v-for="(role, index) in getRoles(user)"
+                    v-for="(role, roleIndex) in getRoles(user)"
-                    :key="index"
+                    :key="roleIndex"
                     class="hidden items-center sm:flex"
                   >
                     <VTag>