From cf85449b251c0aed5d0fa050f4a91816ddff316b Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 15 Aug 2022 17:56:13 +0800
Subject: [PATCH] refactor: define props with pure types via a generic type
 argument

Signed-off-by: Ryan Wang <i@ryanc.cc>
---
 .../components/src/components/alert/Alert.vue | 30 ++++------
 .../src/components/button/Button.vue          | 49 ++++++---------
 .../components/src/components/card/Card.vue   | 14 ++---
 .../src/components/checkbox/CheckBox.vue      | 26 ++++----
 .../src/components/checkbox/CheckBoxGroup.vue | 37 +++++-------
 .../src/components/codemirror/Codemirror.vue  | 33 +++++------
 .../src/components/dialog/Dialog.vue          | 59 +++++++------------
 .../src/components/header/PageHeader.vue      |  8 +--
 .../components/src/components/input/Input.vue | 29 ++++-----
 .../components/src/components/menu/Menu.vue   | 10 +---
 .../src/components/menu/MenuItem.vue          | 26 ++++----
 .../components/src/components/modal/Modal.vue | 35 +++++------
 .../src/components/pagination/Pagination.vue  | 28 ++++-----
 .../components/src/components/radio/Radio.vue | 20 ++-----
 .../src/components/radio/RadioGroup.vue       | 33 ++++-------
 .../src/components/select/Option.vue          |  8 +--
 .../src/components/select/Select.vue          | 29 ++++-----
 .../components/src/components/space/Space.vue | 27 ++++-----
 .../src/components/switch/Switch.vue          | 14 +++--
 .../src/components/tabs/TabItem.vue           | 12 ++--
 .../components/src/components/tabs/Tabbar.vue | 41 +++++--------
 .../components/src/components/tabs/Tabs.vue   | 38 +++++-------
 .../components/src/components/tag/Tag.vue     | 21 ++++---
 .../src/components/textarea/Textarea.vue      | 28 ++++-----
 .../AttachmentAliOSSStrategyEditingModal.vue  | 14 +++--
 .../components/AttachmentDetailModal.vue      | 14 +++--
 .../AttachmentLocalStrategyEditingModal.vue   | 14 +++--
 .../components/AttachmentSelectModal.vue      | 14 +++--
 .../components/AttachmentStrategiesModal.vue  | 15 ++---
 .../components/AttachmentUploadModal.vue      | 14 +++--
 .../components/CategoryEditingModal.vue       | 21 ++++---
 .../posts/components/PostSettingModal.vue     | 21 ++++---
 .../posts/tags/components/TagEditingModal.vue | 22 ++++---
 .../menus/components/MenuEditingModal.vue     | 24 ++++----
 .../menus/components/MenuItemEditingModal.vue | 24 ++++----
 .../menus/components/MenuItemListItem.vue     | 15 ++---
 .../interface/menus/components/MenuList.vue   | 15 ++---
 .../themes/components/ThemeInstallModal.vue   | 14 +++--
 .../themes/components/ThemeListModal.vue      | 27 ++++-----
 .../plugins/components/PluginInstallModal.vue | 14 +++--
 .../plugins/components/PluginListItem.vue     | 15 ++---
 .../roles/components/RoleEditingModal.vue     | 24 ++++----
 .../users/components/UserEditingModal.vue     | 21 ++++---
 .../components/UserPasswordChangeModal.vue    | 23 ++++----
 44 files changed, 450 insertions(+), 570 deletions(-)

diff --git a/packages/components/src/components/alert/Alert.vue b/packages/components/src/components/alert/Alert.vue
index 317b69d7..ee56a7f6 100644
--- a/packages/components/src/components/alert/Alert.vue
+++ b/packages/components/src/components/alert/Alert.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Component, PropType } from "vue";
+import type { Component } from "vue";
 import { computed } from "vue";
 import type { Type } from "./interface";
 import {
@@ -18,22 +18,18 @@ const TypeIcons: Record<Type, Component> = {
   error: IconCloseCircle,
 };
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  title: {
-    type: String,
-  },
-  description: {
-    type: String,
-  },
-  closable: {
-    type: Boolean,
-    default: true,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    title?: string;
+    description?: string;
+    closable?: boolean;
+  }>(),
+  {
+    type: "default",
+    closable: true,
+  }
+);
 
 const emit = defineEmits(["close"]);
 
diff --git a/packages/components/src/components/button/Button.vue b/packages/components/src/components/button/Button.vue
index f9bf15e0..1fd20def 100644
--- a/packages/components/src/components/button/Button.vue
+++ b/packages/components/src/components/button/Button.vue
@@ -35,41 +35,30 @@
   </button>
 </template>
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 import { useRouter } from "vue-router";
 import type { Size, Type } from "./interface";
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  circle: {
-    type: Boolean,
-    default: false,
-  },
-  block: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  route: {
-    type: Object as PropType<RouteLocationRaw>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    size?: Size;
+    circle?: boolean;
+    block?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    route?: RouteLocationRaw;
+  }>(),
+  {
+    type: "default",
+    size: "md",
+    circle: false,
+    block: false,
+    disabled: false,
+    loading: false,
+  }
+);
 
 const router = useRouter();
 const emit = defineEmits(["click"]);
diff --git a/packages/components/src/components/card/Card.vue b/packages/components/src/components/card/Card.vue
index 1efac2cd..b17f8e25 100644
--- a/packages/components/src/components/card/Card.vue
+++ b/packages/components/src/components/card/Card.vue
@@ -1,14 +1,8 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
-
-defineProps({
-  title: {
-    type: String,
-  },
-  bodyClass: {
-    type: Object as PropType<string[]>,
-  },
-});
+defineProps<{
+  title?: string;
+  bodyClass?: string[];
+}>();
 </script>
 
 <template>
diff --git a/packages/components/src/components/checkbox/CheckBox.vue b/packages/components/src/components/checkbox/CheckBox.vue
index 4663f9b3..be671fd9 100644
--- a/packages/components/src/components/checkbox/CheckBox.vue
+++ b/packages/components/src/components/checkbox/CheckBox.vue
@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-const props = defineProps({
-  checked: {
-    type: Boolean,
-    default: false,
-  },
-  value: {
-    type: [String, Number, Boolean],
-  },
-  label: {
-    type: String,
-  },
-  name: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    checked?: boolean;
+    value?: string | number | boolean;
+    label?: string;
+    name?: string;
+  }>(),
+  {
+    checked: false,
+  }
+);
 
 const id = ["checkbox", props.name, props.value]
   .filter((item) => !!item)
diff --git a/packages/components/src/components/checkbox/CheckBoxGroup.vue b/packages/components/src/components/checkbox/CheckBoxGroup.vue
index a9e91a57..638fbd71 100644
--- a/packages/components/src/components/checkbox/CheckBoxGroup.vue
+++ b/packages/components/src/components/checkbox/CheckBoxGroup.vue
@@ -1,29 +1,20 @@
 <script lang="ts" setup>
 import { VCheckbox } from "./index";
-import type { PropType } from "vue";
 
-const props = defineProps({
-  modelValue: {
-    type: Object as PropType<Array<string>>,
-    default: () => {
-      return [];
-    },
-  },
-  options: {
-    type: Object as PropType<Array<Record<string, string>>>,
-  },
-  valueKey: {
-    type: String,
-    default: "value",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-  name: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string[];
+    options?: Array<Record<string, string>>;
+    valueKey?: string;
+    labelKey?: string;
+    name?: string;
+  }>(),
+  {
+    modelValue: () => [],
+    valueKey: "value",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/codemirror/Codemirror.vue b/packages/components/src/components/codemirror/Codemirror.vue
index f9cc7108..f9540670 100644
--- a/packages/components/src/components/codemirror/Codemirror.vue
+++ b/packages/components/src/components/codemirror/Codemirror.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
 import type { EditorStateConfig } from "@codemirror/state";
 import { EditorState } from "@codemirror/state";
@@ -12,24 +11,20 @@ const languages = {
   yaml: StreamLanguage.define(yaml),
 };
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-    default: "",
-  },
-  height: {
-    type: String,
-    default: "auto",
-  },
-  language: {
-    type: String as PropType<"yaml">,
-    default: "yaml",
-  },
-  extensions: {
-    type: Array as PropType<EditorStateConfig["extensions"]>,
-    default: () => [],
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    height?: string;
+    language?: "yaml";
+    extensions?: EditorStateConfig["extensions"];
+  }>(),
+  {
+    modelValue: "",
+    height: "auto",
+    language: "yaml",
+    extensions: () => [],
+  }
+);
 
 const emit = defineEmits<{
   (e: "update:modelValue", value: string): void;
diff --git a/packages/components/src/components/dialog/Dialog.vue b/packages/components/src/components/dialog/Dialog.vue
index 09d8ff47..e9f8f6a3 100644
--- a/packages/components/src/components/dialog/Dialog.vue
+++ b/packages/components/src/components/dialog/Dialog.vue
@@ -8,47 +8,32 @@ import {
   IconForbidLine,
   IconInformation,
 } from "@/icons/icons";
-import type { PropType } from "vue";
 import { computed, ref } from "vue";
 import type { Type } from "@/components/dialog/interface";
 import type { Type as ButtonType } from "@/components/button/interface";
 
-const props = defineProps({
-  type: {
-    type: String as PropType<Type>,
-    default: "info",
-  },
-  title: {
-    type: String,
-    default: "提示",
-  },
-  description: {
-    type: String,
-    default: "",
-  },
-  confirmText: {
-    type: String,
-    default: "确定",
-  },
-  confirmType: {
-    type: String as PropType<ButtonType>,
-    default: "primary",
-  },
-  cancelText: {
-    type: String,
-    default: "取消",
-  },
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  onConfirm: {
-    type: Function as PropType<() => void>,
-  },
-  onCancel: {
-    type: Function as PropType<() => void>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    type?: Type;
+    title?: string;
+    description?: string;
+    confirmText?: string;
+    confirmType?: ButtonType;
+    cancelText?: string;
+    visible?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+  }>(),
+  {
+    type: "info",
+    title: "提示",
+    description: "",
+    confirmText: "确定",
+    confirmType: "primary",
+    cancelText: "取消",
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/packages/components/src/components/header/PageHeader.vue b/packages/components/src/components/header/PageHeader.vue
index 02f20ccb..1af92fd3 100644
--- a/packages/components/src/components/header/PageHeader.vue
+++ b/packages/components/src/components/header/PageHeader.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-defineProps({
-  title: {
-    type: String,
-  },
-});
+defineProps<{
+  title?: string;
+}>();
 </script>
 <template>
   <div class="flex items-center justify-between bg-white p-4 h-14">
diff --git a/packages/components/src/components/input/Input.vue b/packages/components/src/components/input/Input.vue
index 3790435b..950b2b56 100644
--- a/packages/components/src/components/input/Input.vue
+++ b/packages/components/src/components/input/Input.vue
@@ -1,24 +1,19 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Size } from "./interface";
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    size?: Size;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    size: "md",
+    disabled: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/packages/components/src/components/menu/Menu.vue b/packages/components/src/components/menu/Menu.vue
index 0653185e..34f5b933 100644
--- a/packages/components/src/components/menu/Menu.vue
+++ b/packages/components/src/components/menu/Menu.vue
@@ -1,13 +1,9 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { provide } from "vue";
 
-const props = defineProps({
-  openIds: {
-    type: Object as PropType<string[]>,
-    required: false,
-  },
-});
+const props = defineProps<{
+  openIds?: string[];
+}>();
 
 provide<string[] | undefined>("openIds", props.openIds);
 </script>
diff --git a/packages/components/src/components/menu/MenuItem.vue b/packages/components/src/components/menu/MenuItem.vue
index b76b102c..21ecd84c 100644
--- a/packages/components/src/components/menu/MenuItem.vue
+++ b/packages/components/src/components/menu/MenuItem.vue
@@ -2,20 +2,18 @@
 import { IconArrowRight } from "../../icons/icons";
 import { computed, inject, ref, useSlots } from "vue";
 
-const props = defineProps({
-  id: {
-    type: String,
-    default: "",
-  },
-  title: {
-    type: String,
-    default: "",
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    title?: string;
+    active?: boolean;
+  }>(),
+  {
+    id: "",
+    title: "",
+    active: false,
+  }
+);
 
 const emit = defineEmits(["select"]);
 
diff --git a/packages/components/src/components/modal/Modal.vue b/packages/components/src/components/modal/Modal.vue
index 259914be..8df24401 100644
--- a/packages/components/src/components/modal/Modal.vue
+++ b/packages/components/src/components/modal/Modal.vue
@@ -1,28 +1,21 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed, nextTick, ref, watch } from "vue";
 import { IconClose } from "../../icons/icons";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  title: {
-    type: String,
-  },
-  width: {
-    type: Number,
-    default: 500,
-  },
-  fullscreen: {
-    type: Boolean,
-    default: false,
-  },
-  bodyClass: {
-    type: Object as PropType<string[]>,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean;
+    title?: string;
+    width?: number;
+    fullscreen?: boolean;
+    bodyClass?: string[];
+  }>(),
+  {
+    visible: false,
+    width: 500,
+    fullscreen: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/packages/components/src/components/pagination/Pagination.vue b/packages/components/src/components/pagination/Pagination.vue
index 6a6f6c7d..f5500026 100644
--- a/packages/components/src/components/pagination/Pagination.vue
+++ b/packages/components/src/components/pagination/Pagination.vue
@@ -1,22 +1,20 @@
 <script lang="ts" setup>
 import { UseOffsetPagination } from "@vueuse/components";
 import { IconArrowLeft, IconArrowRight } from "../../icons/icons";
-import { defineProps, ref, toRefs, watch } from "vue";
+import { ref, toRefs, watch } from "vue";
 
-const props = defineProps({
-  page: {
-    type: Number,
-    default: 1,
-  },
-  size: {
-    type: Number,
-    default: 10,
-  },
-  total: {
-    type: Number,
-    default: 0,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    page?: number;
+    size?: number;
+    total?: number;
+  }>(),
+  {
+    page: 1,
+    size: 10,
+    total: 0,
+  }
+);
 
 const { page, size, total } = toRefs(props);
 
diff --git a/packages/components/src/components/radio/Radio.vue b/packages/components/src/components/radio/Radio.vue
index 372f3176..8aae291b 100644
--- a/packages/components/src/components/radio/Radio.vue
+++ b/packages/components/src/components/radio/Radio.vue
@@ -1,20 +1,12 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  value: {
-    type: [String, Number, Boolean],
-  },
-  label: {
-    type: String,
-  },
-  name: {
-    type: String,
-  },
-});
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  value?: string | number | boolean;
+  label?: string;
+  name?: string;
+}>();
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/radio/RadioGroup.vue b/packages/components/src/components/radio/RadioGroup.vue
index 9719d14b..761e2596 100644
--- a/packages/components/src/components/radio/RadioGroup.vue
+++ b/packages/components/src/components/radio/RadioGroup.vue
@@ -1,26 +1,19 @@
 <script lang="ts" setup>
 import { VRadio } from "./index";
-import type { PropType } from "vue";
 
-defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-  },
-  options: {
-    type: Object as PropType<Array<Record<string, string | number | boolean>>>,
-  },
-  valueKey: {
-    type: String,
-    default: "value",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-  name: {
-    type: String,
-  },
-});
+withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean;
+    options?: Array<Record<string, string | number | boolean>>;
+    valueKey?: string;
+    labelKey?: string;
+    name?: string;
+  }>(),
+  {
+    valueKey: "value",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/select/Option.vue b/packages/components/src/components/select/Option.vue
index b383c29b..e4f971df 100644
--- a/packages/components/src/components/select/Option.vue
+++ b/packages/components/src/components/select/Option.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-defineProps({
-  value: {
-    type: [String, Number, Boolean],
-  },
-});
+defineProps<{
+  value?: string | number | boolean;
+}>();
 </script>
 
 <template>
diff --git a/packages/components/src/components/select/Select.vue b/packages/components/src/components/select/Select.vue
index 106d4755..2d02db17 100644
--- a/packages/components/src/components/select/Select.vue
+++ b/packages/components/src/components/select/Select.vue
@@ -1,24 +1,19 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Size } from "./interface";
 
-const props = defineProps({
-  modelValue: {
-    type: String,
-  },
-  size: {
-    type: String as PropType<Size>,
-    default: "md",
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    size?: Size;
+    disabled?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    size: "md",
+    disabled: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/packages/components/src/components/space/Space.vue b/packages/components/src/components/space/Space.vue
index 20761ddc..7cc9f9f8 100644
--- a/packages/components/src/components/space/Space.vue
+++ b/packages/components/src/components/space/Space.vue
@@ -1,23 +1,20 @@
 <script lang="ts" setup>
 import type { Align, Direction, Spacing } from "./interface";
 import { SpacingSize } from "./interface";
-import type { PropType } from "vue";
 import { computed } from "vue";
 
-const props = defineProps({
-  spacing: {
-    type: String as PropType<Spacing>,
-    default: "xs",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  align: {
-    type: String as PropType<Align>,
-    default: "center",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    spacing?: Spacing;
+    direction?: Direction;
+    align?: Align;
+  }>(),
+  {
+    spacing: "xs",
+    direction: "row",
+    align: "center",
+  }
+);
 
 const wrapperClasses = computed(() => {
   const { direction, align } = props;
diff --git a/packages/components/src/components/switch/Switch.vue b/packages/components/src/components/switch/Switch.vue
index f4bd2ecb..aa53af5a 100644
--- a/packages/components/src/components/switch/Switch.vue
+++ b/packages/components/src/components/switch/Switch.vue
@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-const props = defineProps({
-  modelValue: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    modelValue?: boolean;
+  }>(),
+  {
+    modelValue: false,
+  }
+);
 
 const emit = defineEmits(["update:modelValue", "change"]);
 
diff --git a/packages/components/src/components/tabs/TabItem.vue b/packages/components/src/components/tabs/TabItem.vue
index 9fe182e0..b63ef9a0 100644
--- a/packages/components/src/components/tabs/TabItem.vue
+++ b/packages/components/src/components/tabs/TabItem.vue
@@ -2,14 +2,10 @@
 import type { ComputedRef } from "vue";
 import { computed, inject } from "vue";
 
-const props = defineProps({
-  id: {
-    type: String,
-  },
-  label: {
-    type: String,
-  },
-});
+const props = defineProps<{
+  id?: string;
+  label?: string;
+}>();
 
 const activeId = inject<ComputedRef<string | number | undefined>>("activeId");
 
diff --git a/packages/components/src/components/tabs/Tabbar.vue b/packages/components/src/components/tabs/Tabbar.vue
index b3c4c323..c1d6033b 100644
--- a/packages/components/src/components/tabs/Tabbar.vue
+++ b/packages/components/src/components/tabs/Tabbar.vue
@@ -1,32 +1,23 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Direction, Type } from "./interface";
 
-const props = defineProps({
-  activeId: {
-    type: [Number, String],
-  },
-  items: {
-    type: Object as PropType<Array<Record<string, string>>>,
-  },
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  idKey: {
-    type: String,
-    default: "id",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    activeId?: number | string;
+    items?: Array<Record<string, string>>;
+    type?: Type;
+    direction?: Direction;
+    idKey?: string;
+    labelKey?: string;
+  }>(),
+  {
+    type: "default",
+    direction: "row",
+    idKey: "id",
+    labelKey: "label",
+  }
+);
 
 const emit = defineEmits(["update:activeId", "change"]);
 
diff --git a/packages/components/src/components/tabs/Tabs.vue b/packages/components/src/components/tabs/Tabs.vue
index eaec5357..e8a32ec2 100644
--- a/packages/components/src/components/tabs/Tabs.vue
+++ b/packages/components/src/components/tabs/Tabs.vue
@@ -1,30 +1,24 @@
 <script lang="ts" setup>
-import type { ComputedRef, PropType } from "vue";
+import type { ComputedRef } from "vue";
 import { computed, provide, useSlots } from "vue";
 import { VTabbar } from "./index";
 import type { Direction, Type } from "./interface";
 
-const props = defineProps({
-  activeId: {
-    type: [Number, String],
-  },
-  type: {
-    type: String as PropType<Type>,
-    default: "default",
-  },
-  direction: {
-    type: String as PropType<Direction>,
-    default: "row",
-  },
-  idKey: {
-    type: String,
-    default: "id",
-  },
-  labelKey: {
-    type: String,
-    default: "label",
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    activeId?: number | string;
+    type?: Type;
+    direction?: Direction;
+    idKey?: string;
+    labelKey?: string;
+  }>(),
+  {
+    type: "default",
+    direction: "row",
+    idKey: "id",
+    labelKey: "label",
+  }
+);
 
 provide<ComputedRef<string | number | undefined>>(
   "activeId",
diff --git a/packages/components/src/components/tag/Tag.vue b/packages/components/src/components/tag/Tag.vue
index adf163b6..14ab978d 100644
--- a/packages/components/src/components/tag/Tag.vue
+++ b/packages/components/src/components/tag/Tag.vue
@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import type { PropType } from "vue";
 import { computed } from "vue";
 import type { Theme } from "./interface";
 
-const props = defineProps({
-  theme: {
-    type: String as PropType<Theme>,
-    default: "default",
-  },
-  rounded: {
-    type: Boolean,
-    default: false,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    theme?: Theme;
+    rounded?: boolean;
+  }>(),
+  {
+    theme: "default",
+    rounded: false,
+  }
+);
 
 const classes = computed(() => {
   return [`tag-${props.theme}`, { "tag-rounded": props.rounded }];
diff --git a/packages/components/src/components/textarea/Textarea.vue b/packages/components/src/components/textarea/Textarea.vue
index 0b144c1d..62bb8a21 100644
--- a/packages/components/src/components/textarea/Textarea.vue
+++ b/packages/components/src/components/textarea/Textarea.vue
@@ -1,20 +1,16 @@
 <script lang="ts" setup>
-defineProps({
-  modelValue: {
-    type: String,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-  },
-  rows: {
-    type: Number,
-    default: 3,
-  },
-});
+withDefaults(
+  defineProps<{
+    modelValue?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    rows?: number;
+  }>(),
+  {
+    disabled: false,
+    rows: 3,
+  }
+);
 
 const emit = defineEmits(["update:modelValue"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue b/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
index f23378ca..9d0e0cb8 100644
--- a/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentAliOSSStrategyEditingModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VAlert, VButton, VModal, VSpace } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentDetailModal.vue b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
index 4f038e6c..4646d87b 100644
--- a/src/modules/contents/attachments/components/AttachmentDetailModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentDetailModal.vue
@@ -8,12 +8,14 @@ import {
   VTag,
 } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue b/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
index bf6b9e72..4c443486 100644
--- a/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentLocalStrategyEditingModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentSelectModal.vue b/src/modules/contents/attachments/components/AttachmentSelectModal.vue
index 858e6a2b..76db7c1f 100644
--- a/src/modules/contents/attachments/components/AttachmentSelectModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentSelectModal.vue
@@ -1,12 +1,14 @@
 <script lang="ts" setup>
 import { VButton, VCard, VModal } from "@halo-dev/components";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue b/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
index 657acd70..ad5aa491 100644
--- a/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentStrategiesModal.vue
@@ -10,13 +10,14 @@ import AttachmentLocalStrategyEditingModal from "./AttachmentLocalStrategyEditin
 import AttachmentAliOSSStrategyEditingModal from "./AttachmentAliOSSStrategyEditingModal.vue";
 import { ref } from "vue";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
-
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 const emit = defineEmits(["update:visible", "close"]);
 
 const strategies = ref([
diff --git a/src/modules/contents/attachments/components/AttachmentUploadModal.vue b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
index f00f86d7..d4a08adf 100644
--- a/src/modules/contents/attachments/components/AttachmentUploadModal.vue
+++ b/src/modules/contents/attachments/components/AttachmentUploadModal.vue
@@ -8,12 +8,14 @@ import { ref } from "vue";
 
 const FilePond = vueFilePond(FilePondPluginImagePreview);
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index e4f23872..9c2ac242 100644
--- a/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  category: {
-    type: Object as PropType<unknown | null>,
-    default: null,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    category: unknown | null;
+  }>(),
+  {
+    visible: false,
+    category: undefined,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/contents/posts/components/PostSettingModal.vue b/src/modules/contents/posts/components/PostSettingModal.vue
index 202899f8..6d82314e 100644
--- a/src/modules/contents/posts/components/PostSettingModal.vue
+++ b/src/modules/contents/posts/components/PostSettingModal.vue
@@ -8,7 +8,6 @@ import {
   VTabItem,
   VTabs,
 } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { ref, unref, watch } from "vue";
 import type { Post } from "@halo-dev/admin-api";
 
@@ -17,16 +16,16 @@ interface FormState {
   saving: boolean;
 }
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  post: {
-    type: Object as PropType<Post | Record<string, unknown> | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    post: Post | Record<string, unknown> | null;
+  }>(),
+  {
+    visible: false,
+    post: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "previous", "next"]);
 
diff --git a/src/modules/contents/posts/tags/components/TagEditingModal.vue b/src/modules/contents/posts/tags/components/TagEditingModal.vue
index fa7b57ec..16baf62b 100644
--- a/src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -1,18 +1,16 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
-
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  tag: {
-    type: Object as PropType<unknown | null>,
-    default: null,
-  },
-});
 
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    tag: unknown | null;
+  }>(),
+  {
+    visible: false,
+    tag: undefined,
+  }
+);
 const emit = defineEmits(["update:visible", "close"]);
 
 const onVisibleChange = (visible: boolean) => {
diff --git a/src/modules/interface/menus/components/MenuEditingModal.vue b/src/modules/interface/menus/components/MenuEditingModal.vue
index 793170a3..a14754b3 100644
--- a/src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuEditingModal.vue
@@ -2,24 +2,22 @@
 import { VButton, VModal, VSpace } from "@halo-dev/components";
 import type { Menu } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
-import type { PropType } from "vue";
 import { computed, ref, watch } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  menu: {
-    type: Object as PropType<Menu | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    menu: Menu | null;
+  }>(),
+  {
+    visible: false,
+    menu: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/interface/menus/components/MenuItemEditingModal.vue b/src/modules/interface/menus/components/MenuItemEditingModal.vue
index 340c5975..fc2a2b20 100644
--- a/src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -1,25 +1,23 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { computed, ref, watch, watchEffect } from "vue";
 import type { MenuItem } from "@halo-dev/api-client";
 import { v4 as uuid } from "uuid";
 import { apiClient } from "@halo-dev/admin-shared";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  menuItem: {
-    type: Object as PropType<MenuItem | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    menuItem: MenuItem | null;
+  }>(),
+  {
+    visible: false,
+    menuItem: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "saved"]);
 
diff --git a/src/modules/interface/menus/components/MenuItemListItem.vue b/src/modules/interface/menus/components/MenuItemListItem.vue
index 96a4cf17..d700699d 100644
--- a/src/modules/interface/menus/components/MenuItemListItem.vue
+++ b/src/modules/interface/menus/components/MenuItemListItem.vue
@@ -1,16 +1,17 @@
 <script lang="ts" setup>
 import { IconList, IconSettings, VButton, VSpace } from "@halo-dev/components";
 import Draggable from "vuedraggable";
-import type { PropType } from "vue";
 import { ref } from "vue";
 import type { MenuTreeItem } from "@/modules/interface/menus/utils";
 
-defineProps({
-  menuTreeItems: {
-    type: Array as PropType<MenuTreeItem[]>,
-    default: () => [],
-  },
-});
+withDefaults(
+  defineProps<{
+    menuTreeItems: MenuTreeItem[];
+  }>(),
+  {
+    menuTreeItems: () => [],
+  }
+);
 
 const emit = defineEmits(["change", "open-editing", "delete"]);
 
diff --git a/src/modules/interface/menus/components/MenuList.vue b/src/modules/interface/menus/components/MenuList.vue
index e6bb1a52..228bd366 100644
--- a/src/modules/interface/menus/components/MenuList.vue
+++ b/src/modules/interface/menus/components/MenuList.vue
@@ -7,18 +7,19 @@ import {
   VSpace,
 } from "@halo-dev/components";
 import MenuEditingModal from "./MenuEditingModal.vue";
-import type { PropType } from "vue";
 import { defineExpose, onMounted, ref } from "vue";
 import type { Menu } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 import { useRouteQuery } from "@vueuse/router";
 
-const props = defineProps({
-  selectedMenu: {
-    type: Object as PropType<Menu | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    selectedMenu: Menu | null;
+  }>(),
+  {
+    selectedMenu: null,
+  }
+);
 
 const emit = defineEmits(["select", "update:selectedMenu"]);
 
diff --git a/src/modules/interface/themes/components/ThemeInstallModal.vue b/src/modules/interface/themes/components/ThemeInstallModal.vue
index c6e55fcc..385bee55 100644
--- a/src/modules/interface/themes/components/ThemeInstallModal.vue
+++ b/src/modules/interface/themes/components/ThemeInstallModal.vue
@@ -6,12 +6,14 @@ import { apiClient } from "@halo-dev/admin-shared";
 
 const FilePond = VueFilePond();
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/interface/themes/components/ThemeListModal.vue b/src/modules/interface/themes/components/ThemeListModal.vue
index 6b183de5..ea5a7ffe 100644
--- a/src/modules/interface/themes/components/ThemeListModal.vue
+++ b/src/modules/interface/themes/components/ThemeListModal.vue
@@ -9,25 +9,22 @@ import {
   VTag,
 } from "@halo-dev/components";
 import ThemeInstallModal from "./ThemeInstallModal.vue";
-import type { PropType } from "vue";
 import { onMounted, ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@halo-dev/admin-shared";
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  selectedTheme: {
-    type: Object as PropType<Theme | null>,
-    default: null,
-  },
-  activatedTheme: {
-    type: Object as PropType<Theme | null>,
-    default: null,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+    selectedTheme: Theme | null;
+    activatedTheme: Theme | null;
+  }>(),
+  {
+    visible: false,
+    selectedTheme: null,
+    activatedTheme: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close", "update:selectedTheme"]);
 
diff --git a/src/modules/system/plugins/components/PluginInstallModal.vue b/src/modules/system/plugins/components/PluginInstallModal.vue
index ed4493df..75ca14fc 100644
--- a/src/modules/system/plugins/components/PluginInstallModal.vue
+++ b/src/modules/system/plugins/components/PluginInstallModal.vue
@@ -7,12 +7,14 @@ import type { Plugin } from "@halo-dev/api-client";
 
 const FilePond = VueFilePond();
 
-defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-});
+withDefaults(
+  defineProps<{
+    visible: boolean;
+  }>(),
+  {
+    visible: false,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/plugins/components/PluginListItem.vue b/src/modules/system/plugins/components/PluginListItem.vue
index 4af42d46..d8886971 100644
--- a/src/modules/system/plugins/components/PluginListItem.vue
+++ b/src/modules/system/plugins/components/PluginListItem.vue
@@ -6,17 +6,18 @@ import {
   VSwitch,
   VTag,
 } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
 
-const props = defineProps({
-  plugin: {
-    type: Object as PropType<Plugin | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    plugin: Plugin | null;
+  }>(),
+  {
+    plugin: null,
+  }
+);
 
 const { plugin } = toRefs(props);
 
diff --git a/src/modules/system/roles/components/RoleEditingModal.vue b/src/modules/system/roles/components/RoleEditingModal.vue
index 827faacf..09d60d96 100644
--- a/src/modules/system/roles/components/RoleEditingModal.vue
+++ b/src/modules/system/roles/components/RoleEditingModal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { VButton, VModal, VSpace, VTabItem, VTabs } from "@halo-dev/components";
-import type { PropType } from "vue";
 import { computed, ref, watch } from "vue";
 import { rbacAnnotations } from "@/constants/annotations";
 import type { Role } from "@halo-dev/api-client";
@@ -9,20 +8,19 @@ import {
   useRoleTemplateSelection,
 } from "@/modules/system/roles/composables/use-role";
 import cloneDeep from "lodash.clonedeep";
-import { submitForm } from "@formkit/core";
+import { reset, submitForm } from "@formkit/core";
 import { useMagicKeys } from "@vueuse/core";
-import { reset } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  role: {
-    type: Object as PropType<Role | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    role: Role | null;
+  }>(),
+  {
+    visible: false,
+    role: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/users/components/UserEditingModal.vue b/src/modules/system/users/components/UserEditingModal.vue
index 43657305..8ffbbc36 100644
--- a/src/modules/system/users/components/UserEditingModal.vue
+++ b/src/modules/system/users/components/UserEditingModal.vue
@@ -1,5 +1,4 @@
 <script lang="ts" name="UserEditingModal" setup>
-import type { PropType } from "vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import type { Role, User } from "@halo-dev/api-client";
@@ -19,16 +18,16 @@ import cloneDeep from "lodash.clonedeep";
 import { useMagicKeys } from "@vueuse/core";
 import { reset, submitForm } from "@formkit/core";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  user: {
-    type: Object as PropType<User | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    user: User | null;
+  }>(),
+  {
+    visible: false,
+    user: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 
diff --git a/src/modules/system/users/components/UserPasswordChangeModal.vue b/src/modules/system/users/components/UserPasswordChangeModal.vue
index 63073b29..30110941 100644
--- a/src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -1,21 +1,20 @@
 <script lang="ts" setup>
-import { VModal, VButton, IconSave } from "@halo-dev/components";
+import { IconSave, VButton, VModal } from "@halo-dev/components";
 import { inject, ref } from "vue";
 import type { User } from "@halo-dev/api-client";
-import type { PropType } from "vue";
 import { apiClient } from "@halo-dev/admin-shared";
 import cloneDeep from "lodash.clonedeep";
 
-const props = defineProps({
-  visible: {
-    type: Boolean,
-    default: false,
-  },
-  user: {
-    type: Object as PropType<User | null>,
-    default: null,
-  },
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    user: User | null;
+  }>(),
+  {
+    visible: false,
+    user: null,
+  }
+);
 
 const emit = defineEmits(["update:visible", "close"]);
 const currentUser = inject<User>("currentUser");