chore: 更新至vue3.3.4

package.json

@@ -48,7 +48,7 @@
     "@types/node": "^18.15.11",
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vitest/coverage-c8": "^0.30.0",
     "c8": "^7.11.3",
     "chalk": "^4.1.0",
@@ -79,7 +79,7 @@
     "vite": "^4.3.8",
     "vitepress": "1.0.0-beta.1",
     "vitest": "^0.31.1",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "config": {
     "commitizen": {

packages/design/package.json

@@ -36,20 +36,19 @@
     "typescript"
   ],
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.6.5"
-    "vue-tsc": "^1.2.0"
   }
 }

packages/design/src/Autocomplete.vue

@@ -26,23 +26,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMAutocomplete">
+<script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
 import { getConfig } from './config';
+import type { AutocompleteProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string;
+  name: 'TMAutocomplete',
-  placeholder?: string;
+});
-  label?: string;
+
-  clearable?: boolean;
+const props = defineProps<AutocompleteProps>();
-  disabled?: boolean;
-  triggerOnFocus?: boolean;
-  valueKey?: string;
-  debounce?: number;
-  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
-  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
-}>();
 
 const uiComponent = getConfig('components').autocomplete;
 

packages/design/src/Badge.vue

@@ -4,18 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMBadge">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { BadgeProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  value?: string | number;
+  name: 'TMBadge',
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+});
-  max?: number;
+
-  isDot?: boolean;
+const props = defineProps<BadgeProps>();
-  hidden?: boolean;
-}>();
 
 const uiComponent = getConfig('components').badge;
 

packages/design/src/Button.vue

@@ -6,17 +6,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMButton">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ButtonProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  type?: string;
+  name: 'TMButton',
-  size?: 'large' | 'default' | 'small';
+});
-  text?: boolean;
+
-  icon?: any;
+const props = defineProps<ButtonProps>();
-}>();
 
 const uiComponent = getConfig('components').button;
 

packages/design/src/Card.vue

@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCard">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CardProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  bodyStyle?: Record<string, any>;
+  name: 'TMCard',
-  shadow?: string;
+});
-  header?: string;
+
-}>();
+const props = defineProps<CardProps>();
 
 const uiComponent = getConfig('components').card;
 

packages/design/src/Cascader.vue

@@ -9,28 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMCascader">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
-import { CascaderOption } from './type';
+import { CascaderProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: any;
+  name: 'TMCascader',
-  placeholder?: string;
+});
-  disabled?: boolean;
+
-  clearable?: boolean;
+const props = defineProps<CascaderProps>();
-  filterable?: boolean;
-  options?: CascaderOption[];
-  size?: 'large' | 'default' | 'small';
-  props: {
-    expandTrigger?: 'click' | 'hover';
-    multiple?: boolean;
-    checkStrictly?: boolean;
-    emitPath?: boolean;
-    lazy?: boolean;
-  };
-}>();
 
 const uiComponent = getConfig('components').cascader;
 

packages/design/src/Checkbox.vue

@@ -12,25 +12,20 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCheckbox">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CheckboxProps } from './types';
 
-const props = withDefaults(
+defineOptions({
-  defineProps<{
+  name: 'TMCheckbox',
-    modelValue?: string | number | boolean;
+});
-    label?: any;
+
-    trueLabel?: string | number | boolean;
+const props = withDefaults(defineProps<CheckboxProps>(), {
-    falseLabel?: string | number | boolean;
+  trueLabel: undefined,
-    disabled?: boolean;
+  falseLabel: undefined,
-    size?: 'large' | 'default' | 'small';
+});
-  }>(),
-  {
-    trueLabel: undefined,
-    falseLabel: undefined,
-  },
-);
 
 const uiComponent = getConfig('components').checkbox;
 

packages/design/src/CheckboxGroup.vue

@@ -10,17 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCheckboxGroup">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CheckboxGroupProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: any[];
+  name: 'TMCheckboxGroup',
-  label?: string;
+});
-  disabled?: boolean;
+
-  size?: 'large' | 'default' | 'small';
+const props = defineProps<CheckboxGroupProps>();
-}>();
 
 const uiComponent = getConfig('components').checkboxGroup;
 

packages/design/src/Col.vue

@@ -4,14 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCol">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ColProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  span?: number;
+  name: 'TMCol',
-}>();
+});
+
+const props = defineProps<ColProps>();
 
 const uiComponent = getConfig('components').col;
 

packages/design/src/Collapse.vue

@@ -10,15 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCollapse">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CollapseProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string | string[];
+  name: 'TMCollapse',
-  accordion?: boolean;
+});
-}>();
+
+const props = defineProps<CollapseProps>();
 
 const uiComponent = getConfig('components').collapse;
 

packages/design/src/CollapseItem.vue

@@ -16,16 +16,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMCollapseItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { CollapseItemProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  name?: string | number;
+  name: 'TMCollapseItem',
-  title?: string;
+});
-  disabled?: boolean;
+
-}>();
+const props = defineProps<CollapseItemProps>();
 
 const uiComponent = getConfig('components').collapseItem;
 

packages/design/src/ColorPicker.vue

@@ -9,23 +9,20 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMColorPicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { ColorPickerProps } from './types';
 
-const props = withDefaults(
+defineOptions({
-  defineProps<{
+  name: 'TMColorPicker',
-    modelValue?: string;
+});
-    disabled?: boolean;
+
-    showAlpha?: boolean;
+const props = withDefaults(defineProps<ColorPickerProps>(), {
-    size?: 'large' | 'default' | 'small';
+  showAlpha: false,
-  }>(),
+  disabled: false,
-  {
+});
-    showAlpha: false,
-    disabled: false,
-  },
-);
 
 const uiComponent = getConfig('components').colorPicker;
 

packages/design/src/DatePicker.vue

@@ -9,32 +9,19 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDatePicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DatePickerProps } from './types';
 
-const props = withDefaults(
+defineOptions({
-  defineProps<{
+  name: 'TMDatePicker',
-    type?: string;
+});
-    modelValue?: any;
+
-    disabled?: boolean;
+const props = withDefaults(defineProps<DatePickerProps>(), {
-    placeholder?: string;
+  type: 'date',
-    rangeSeparator?: string;
+});
-    startPlaceholder?: string;
-    endPlaceholder?: string;
-    format?: string;
-    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
-    valueFormat?: string;
-    /** 在范围选择器里取消两个日期面板之间的联动 */
-    unlinkPanels?: boolean;
-    defaultTime?: any;
-    size?: 'large' | 'default' | 'small';
-  }>(),
-  {
-    type: 'date',
-  },
-);
 
 const uiComponent = getConfig('components').datePicker;
 

packages/design/src/Dialog.vue

@@ -14,21 +14,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDialog">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DialogProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: boolean;
+  name: 'TMDialog',
-  appendToBody?: boolean;
+});
-  beforeClose?: any;
+
-  title?: string;
+const props = defineProps<DialogProps>();
-  width?: string | number;
-  fullscreen?: boolean;
-  closeOnClickModal?: boolean;
-  closeOnPressEscape?: boolean;
-}>();
 
 const uiComponent = getConfig('components').dialog;
 

packages/design/src/Divider.vue

@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDivider">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DividerProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  direction?: string;
+  name: 'TMDivider',
-  borderStyle?: string;
+});
-  contentPosition?: string;
+
-}>();
+const props = defineProps<DividerProps>();
 
 const uiComponent = getConfig('components').divider;
 

packages/design/src/Drawer.vue

@@ -21,29 +21,24 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDrawer">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DrawerProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: boolean;
+  name: 'TMDrawer',
-  appendToBody?: boolean;
+});
-  beforeClose?: any;
+
-  title?: string;
+const props = defineProps<DrawerProps>();
-  size?: string | number;
+
-  fullscreen?: boolean;
+const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
-  closeOnClickModal?: boolean;
-  closeOnPressEscape?: boolean;
-  direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
-}>();
 
 const uiComponent = getConfig('components').drawer;
 
 const uiProps = computed(() => uiComponent.props(props));
 
-const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
-
 const openHandler = (...args: any[]) => {
   emit('open', ...args);
 };

packages/design/src/Dropdown.vue

@@ -8,26 +8,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdown">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DropdownProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  type?: string;
+  name: 'TMDropdown',
-  size?: string;
+});
-  maxHeight?: string | number;
+
-  splitButton?: boolean;
+const props = defineProps<DropdownProps>();
-  disable?: boolean;
-  placement?: string;
-  trigger?: string;
-  hideOnClick?: boolean;
-  showTimeout?: number;
-  role?: string;
-  tabindex?: number;
-  popperClass?: string;
-  popperOptions?: any;
-}>();
 
 const uiComponent = getConfig('components').dropdown;
 

packages/design/src/DropdownItem.vue

@@ -4,17 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdownItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { DropdownItemProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  command?: any;
+  name: 'TMDropdownItem',
-  disabled?: boolean;
+});
-  divided?: boolean;
+
-  icon?: any;
+const props = defineProps<DropdownItemProps>();
-}>();
 
 const uiComponent = getConfig('components').dropdownItem;
 

packages/design/src/DropdownMenu.vue

@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMDropdownMenu">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMDropdownMenu',
+});
+
 const uiComponent = getConfig('components').dropdownMenu;
 </script>

packages/design/src/Form.vue

@@ -4,25 +4,24 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMForm">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { FormProps } from './types';
 
-const form = ref<any>();
+defineOptions({
+  name: 'TMForm',
+});
 
-const props = defineProps<{
+const props = defineProps<FormProps>();
-  model?: any;
-  labelWidth?: string | number;
-  disabled?: boolean;
-  inline?: boolean;
-  labelPosition?: string;
-}>();
 
 const uiComponent = getConfig('components').form;
 
 const uiProps = computed(() => uiComponent.props(props));
 
+const form = ref<any>();
+
 defineExpose({
   validate() {
     return form.value?.validate();

packages/design/src/FormItem.vue

@@ -7,15 +7,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMFormItem">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
-const props = defineProps<{
+import type { FormItemProps } from './types';
-  prop?: string;
+
-  labelWidth?: string | number;
+defineOptions({
-  rules?: any;
+  name: 'TMFormItem',
-}>();
+});
+
+const props = defineProps<FormItemProps>();
 
 const uiComponent = getConfig('components').formItem;
 

packages/design/src/Icon.vue

@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMIcon">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMIcon',
+});
+
 const uiComponent = getConfig('components').icon;
 </script>

packages/design/src/Input.vue

@@ -22,19 +22,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMInput">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { InputProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string | number;
+  name: 'TMInput',
-  clearable?: boolean;
+});
-  disabled?: boolean;
+
-  placeholder?: string;
+const props = defineProps<InputProps>();
-  type?: string;
-  size?: 'large' | 'default' | 'small';
-}>();
 
 const uiComponent = getConfig('components').input;
 

packages/design/src/InputNumber.vue

@@ -9,22 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMInputNumber">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { InputNumberProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string | number | boolean;
+  name: 'TMInputNumber',
-  clearable?: boolean;
+});
-  controlsPosition?: string;
+
-  disabled?: boolean;
+const props = defineProps<InputNumberProps>();
-  placeholder?: string;
-  step?: number;
-  min?: number;
-  max?: number;
-  size?: 'large' | 'default' | 'small';
-}>();
 
 const uiComponent = getConfig('components').inputNumber;
 

packages/design/src/Option.vue

@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMOption">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { OptionProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  value?: any;
+  name: 'TMOption',
-  label?: string;
+});
-  disabled?: boolean;
+
-}>();
+const props = defineProps<OptionProps>();
 
 const uiComponent = getConfig('components').option;
 

packages/design/src/OptionGroup.vue

@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMOptionGroup">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { OptionGroupProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  label?: string;
+  name: 'TMOptionGroup',
-  disabled?: boolean;
+});
-}>();
+
+const props = defineProps<OptionGroupProps>();
 
 const uiComponent = getConfig('components').optionGroup;
 

packages/design/src/Pagination.vue

@@ -9,19 +9,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMPagination">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { PaginationProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  layout?: string;
+  name: 'TMPagination',
-  hideOnSinglePage?: boolean;
+});
-  curPage?: number;
+
-  pageSizes?: number[];
+const props = defineProps<PaginationProps>();
-  pagesize?: number;
-  total?: number;
-}>();
 
 const uiComponent = getConfig('components').pagination;
 

packages/design/src/Popover.vue

@@ -8,21 +8,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMPopover">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { PopoverProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  placement?: string;
+  name: 'TMPopover',
-  width?: string | number;
+});
-  title?: string;
+
-  trigger?: string;
+const props = defineProps<PopoverProps>();
-  effect?: string;
-  content?: string;
-  disabled?: boolean;
-  popperClass?: string;
-}>();
 
 const uiComponent = getConfig('components').popover;
 

packages/design/src/Radio.vue

@@ -4,14 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadio">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  label?: string | number | boolean;
+  name: 'TMRadio',
-}>();
+});
+
+const props = defineProps<RadioProps>();
 
 const uiComponent = getConfig('components').radio;
 

packages/design/src/RadioButton.vue

@@ -4,16 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadioButton">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioButtonProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  label?: string | number | boolean;
+  name: 'TMRadioButton',
-  disabled?: boolean;
+});
-  name?: string;
+
-}>();
+const props = defineProps<RadioButtonProps>();
 
 const uiComponent = getConfig('components').radioButton;
 

packages/design/src/RadioGroup.vue

@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRadioGroup">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { RadioGroupProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string | number | boolean;
+  name: 'TMRadioGroup',
-  disabled?: boolean;
+});
-  size?: 'large' | 'default' | 'small';
+
-}>();
+const props = defineProps<RadioGroupProps>();
 
 const uiComponent = getConfig('components').radioGroup;
 

packages/design/src/Row.vue

@@ -4,8 +4,12 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMRow">
+<script setup lang="ts">
 import { getConfig } from './config';
 
+defineOptions({
+  name: 'TMRow',
+});
+
 const uiComponent = getConfig('components').row;
 </script>

packages/design/src/Scrollbar.vue

@@ -1,17 +1,15 @@
 <template>
-  <component class="tmagic-design-scrollbar" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-scrollbar" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>
 
-<script setup lang="ts" name="TMScrollbar">
+<script setup lang="ts">
-import { computed } from 'vue';
-
 import { getConfig } from './config';
 
-const props = defineProps();
+defineOptions({
+  name: 'TMScrollbar',
+});
 
 const uiComponent = getConfig('components').scrollbar;
-
-const uiProps = computed(() => uiComponent.props(props));
 </script>

packages/design/src/Select.vue

@@ -13,28 +13,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSelect">
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 
 import { getConfig } from './config';
+import type { SelectProps } from './types';
 
-const select = ref<any>();
+defineOptions({
+  name: 'TMSelect',
+});
 
-const props = defineProps<{
+const props = defineProps<SelectProps>();
-  modelValue?: any;
-  clearable?: boolean;
-  filterable?: boolean;
-  popperClass?: string;
-  disabled?: boolean;
-  placeholder?: string;
-  remote?: boolean;
-  multiple?: boolean;
-  allowCreate?: boolean;
-  valueKey?: string;
-  remoteMethod?: any;
-  loading?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
 
 const uiComponent = getConfig('components').select;
 
@@ -42,6 +31,8 @@ const uiProps = computed(() => uiComponent.props(props));
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 
+const select = ref<any>();
+
 const changeHandler = (...args: any[]) => {
   emit('change', ...args);
 };

packages/design/src/Step.vue

@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMStep">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { StepProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  title?: string;
+  name: 'TMStep',
-  active?: number;
+});
-}>();
+
+const props = defineProps<StepProps>();
 
 const emit = defineEmits(['click']);
 

packages/design/src/Steps.vue

@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSteps">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { StepsProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  active?: number;
+  name: 'TMSteps',
-  space?: number | string;
+});
-}>();
+
+const props = defineProps<StepsProps>();
 
 const uiComponent = getConfig('components').steps;
 

packages/design/src/Switch.vue

@@ -12,19 +12,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMSwitch">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { SwitchProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: string | number | boolean;
+  name: 'TMSwitch',
-  label?: any;
+});
-  activeValue?: string | number | boolean;
+
-  inactiveValue?: string | number | boolean;
+const props = defineProps<SwitchProps>();
-  disabled?: boolean;
-  size?: 'large' | 'default' | 'small';
-}>();
 
 const uiComponent = getConfig('components').switch;
 

packages/design/src/TabPane.vue

@@ -10,16 +10,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTabPane">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TabPaneProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  name?: string;
+  name: 'TMTabPane',
-  label?: string;
+});
-  lazy?: boolean;
+
-}>();
+const props = defineProps<TabPaneProps>();
 const uiComponent = getConfig('components').tabPane;
 
 const uiProps = computed(() => uiComponent.props(props));

packages/design/src/Table.vue

@@ -13,22 +13,19 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTable">
+<script setup lang="ts">
 import { computed, ref, watchEffect } from 'vue';
 
 import { getConfig } from './config';
+import type { TableProps } from './types';
 
-const props = withDefaults(
+defineOptions({
-  defineProps<{
+  name: 'TMTable',
-    data?: any[];
+});
-    border?: boolean;
+
-    maxHeight?: number | string;
+const props = withDefaults(defineProps<TableProps>(), {
-    defaultExpandAll?: boolean;
+  data: () => [],
-  }>(),
+});
-  {
-    data: () => [],
-  },
-);
 
 const uiComponent = getConfig('components').table;
 

packages/design/src/TableColumn.vue

@@ -1,22 +1,23 @@
 <template>
   <component :is="uiComponent.component" v-bind="uiProps">
     <template #default="{ $index, row }">
+      <!-- eslint-disable-next-line vue/valid-attribute-name -->
       <slot :$index="$index" :row="row"></slot>
     </template>
   </component>
 </template>
 
-<script setup lang="ts" name="TMTableColumn">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TableColumnProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  label?: string;
+  name: 'TMTableColumn',
-  align?: string;
+});
-  fixed?: string | boolean;
+
-  width?: string | number;
+const props = defineProps<TableColumnProps>();
-}>();
 
 const uiComponent = getConfig('components').tableColumn;
 

packages/design/src/Tabs.vue

@@ -14,17 +14,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTabs">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TabsProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  type?: string;
+  name: 'TMTabs',
-  editable?: boolean;
+});
-  tabPosition?: string;
+
-  modelValue?: string | number;
+const props = defineProps<TabsProps>();
-}>();
 
 const uiComponent = getConfig('components').tabs;
 

packages/design/src/Tag.vue

@@ -4,15 +4,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTag">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TagProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  type?: string;
+  name: 'TMTag',
-  disableTransition?: boolean;
+});
-}>();
+
+const props = defineProps<TagProps>();
 
 const uiComponent = getConfig('components').tag;
 

packages/design/src/TimePicker.vue

@@ -9,17 +9,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTimePicker">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TimePickerProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  modelValue?: any;
+  name: 'TMTimePicker',
-  disabled?: boolean;
+});
-  placeholder?: string;
+
-  size?: 'large' | 'default' | 'small';
+const props = defineProps<TimePickerProps>();
-}>();
 
 const uiComponent = getConfig('components').timePicker;
 

packages/design/src/Tooltip.vue

@@ -7,19 +7,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTooltip">
+<script setup lang="ts">
 import { computed } from 'vue';
 
 import { getConfig } from './config';
+import type { TooltipProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  placement?: string;
+  name: 'TMTooltip',
-  disabled?: boolean;
+});
-  content?: string;
+
-  effect?: string;
+const props = defineProps<TooltipProps>();
-  transition?: string;
-  offset?: number;
-}>();
 
 const uiComponent = getConfig('components').tooltip;
 

packages/design/src/Tree.vue

@@ -19,37 +19,17 @@
   </component>
 </template>
 
-<script setup lang="ts" name="TMTree">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { TreeProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  data?: any[];
+  name: 'TMTree',
-  emptyText?: string;
+});
-  nodeKey?: string;
+
-  props?: any;
+const props = defineProps<TreeProps>();
-  renderAfterExpand?: boolean;
-  load?: any;
-  renderContent?: any;
-  highlightCurrent?: boolean;
-  defaultExpandAll?: boolean;
-  checkOnClickNode?: boolean;
-  autoExpandParent?: boolean;
-  defaultExpandedKeys?: any[];
-  showCheckbox?: boolean;
-  checkStrictly?: boolean;
-  defaultCheckedKeys?: any[];
-  currentNodeKey?: string | number;
-  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
-  accordion?: boolean;
-  indent?: number;
-  icon?: any;
-  lazy?: boolean;
-  draggable?: boolean;
-  allowDrag?: (node: any) => boolean;
-  allowDrop?: any;
-}>();
 
 const uiComponent = getConfig('components').tree;
 

packages/design/src/Upload.vue

@@ -8,16 +8,17 @@
   ></component>
 </template>
 
-<script setup lang="ts" name="TMUpload">
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 
 import { getConfig } from './config';
+import type { UploadProps } from './types';
 
-const props = defineProps<{
+defineOptions({
-  action?: string;
+  name: 'TMUpload',
-  autoUpload?: boolean;
+});
-  disabled?: boolean;
+
-}>();
+const props = defineProps<UploadProps>();
 
 const emit = defineEmits(['change']);
 

packages/design/src/config.ts

@@ -17,7 +17,7 @@
  */
 
 import defaultAdapter from './defaultAdapter';
-import { PluginOptions } from './type';
+import { PluginOptions } from './types';
 
 let $MAGIC_DESIGN: PluginOptions = {};
 

packages/design/src/defaultAdapter.ts

@@ -1,228 +1,272 @@
+import type {
+  AutocompleteProps,
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DividerProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from './types';
+
 export default {
   components: {
     badge: {
       component: 'el-badge',
-      props: (props: any) => props,
+      props: (props: BadgeProps) => props,
     },
 
     autocomplete: {
       component: 'el-autocomplete',
-      props: (props: any) => props,
+      props: (props: AutocompleteProps) => props,
     },
 
     button: {
       component: 'el-button',
-      props: (props: any) => props,
+      props: (props: ButtonProps) => props,
     },
 
     card: {
       component: 'el-card',
-      props: (props: any) => props,
+      props: (props: CardProps) => props,
     },
 
     cascader: {
       component: 'el-cascader',
-      props: (props: any) => props,
+      props: (props: CascaderProps) => props,
     },
 
     checkbox: {
       component: 'el-checkbox',
-      props: (props: any) => props,
+      props: (props: CheckboxProps) => props,
     },
 
     checkboxGroup: {
       component: 'el-checkbox-group',
-      props: (props: any) => props,
+      props: (props: CheckboxGroupProps) => props,
     },
 
     col: {
       component: 'el-col',
-      props: (props: any) => props,
+      props: (props: ColProps) => props,
     },
 
     collapse: {
       component: 'el-collapse',
-      props: (props: any) => props,
+      props: (props: CollapseProps) => props,
     },
 
     collapseItem: {
       component: 'el-collapse-item',
-      props: (props: any) => props,
+      props: (props: CollapseItemProps) => props,
     },
 
     colorPicker: {
       component: 'el-color-picker',
-      props: (props: any) => props,
+      props: (props: ColorPickerProps) => props,
     },
 
     datePicker: {
       component: 'el-date-picker',
-      props: (props: any) => props,
+      props: (props: DatePickerProps) => props,
     },
 
     dialog: {
       component: 'el-dialog',
-      props: (props: any) => props,
+      props: (props: DialogProps) => props,
     },
 
     divider: {
       component: 'el-divider',
-      props: (props: any) => props,
+      props: (props: DividerProps) => props,
     },
 
     drawer: {
       component: 'el-drawer',
-      props: (props: any) => props,
+      props: (props: DrawerProps) => props,
     },
 
     dropdown: {
       component: 'el-dropdown',
-      props: (props: any) => props,
+      props: (props: DropdownProps) => props,
     },
 
     dropdownItem: {
       component: 'dropdown-item',
-      props: (props: any) => props,
+      props: (props: DropdownItemProps) => props,
     },
 
     dropdownMenu: {
       component: 'dropdown-menu',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     form: {
       component: 'el-form',
-      props: (props: any) => props,
+      props: (props: FormProps) => props,
     },
 
     formItem: {
       component: 'el-form-item',
-      props: (props: any) => props,
+      props: (props: FormItemProps) => props,
     },
 
     icon: {
       component: 'el-icon',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     input: {
       component: 'el-input',
-      props: (props: any) => props,
+      props: (props: InputProps) => props,
     },
 
     inputNumber: {
       component: 'el-input-number',
-      props: (props: any) => props,
+      props: (props: InputNumberProps) => props,
     },
 
     option: {
       component: 'el-option',
-      props: (props: any) => props,
+      props: (props: OptionProps) => props,
     },
 
     optionGroup: {
       component: 'el-option-group',
-      props: (props: any) => props,
+      props: (props: OptionGroupProps) => props,
     },
 
     pagination: {
       component: 'el-pagination',
-      props: (props: any) => props,
+      props: (props: PaginationProps) => props,
     },
 
     popover: {
       component: 'el-popover',
-      props: (props: any) => props,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
       component: 'el-radio',
-      props: (props: any) => props,
+      props: (props: RadioProps) => props,
     },
 
     radioButton: {
       component: 'el-radio-button',
-      props: (props: any) => props,
+      props: (props: RadioButtonProps) => props,
     },
 
     radioGroup: {
       component: 'el-radio-group',
-      props: (props: any) => props,
+      props: (props: RadioGroupProps) => props,
     },
 
     row: {
       component: 'el-row',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     scrollbar: {
       component: 'el-scrollbar',
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     select: {
       component: 'el-select',
-      props: (props: any) => props,
+      props: (props: SelectProps) => props,
     },
 
     step: {
       component: 'el-step',
-      props: (props: any) => props,
+      props: (props: StepProps) => props,
     },
 
     steps: {
       component: 'el-steps',
-      props: (props: any) => props,
+      props: (props: StepsProps) => props,
     },
 
     switch: {
       component: 'el-switch',
-      props: (props: any) => props,
+      props: (props: SwitchProps) => props,
     },
 
     table: {
       component: 'el-table',
-      props: (props: any) => props,
+      props: (props: TableProps) => props,
     },
 
     tableColumn: {
       component: 'el-table-column',
-      props: (props: any) => props,
+      props: (props: TableColumnProps) => props,
     },
 
     tabPane: {
       component: 'el-tab-pane',
-      props: (props: any) => props,
+      props: (props: TabPaneProps) => props,
     },
 
     tabs: {
       component: 'el-tabs',
-      props: (props: any) => props,
+      props: (props: TabsProps) => props,
     },
 
     tag: {
       component: 'el-tag',
-      props: (props: any) => props,
+      props: (props: TagProps) => props,
     },
 
     timePicker: {
       component: 'el-time-picker',
-      props: (props: any) => props,
+      props: (props: TimePickerProps) => props,
     },
 
     tooltip: {
       component: 'el-tooltip',
-      props: (props: any) => props,
+      props: (props: TooltipProps) => props,
     },
 
     tree: {
       component: 'el-tree',
-      props: (props: any) => props,
+      props: (props: TreeProps) => props,
     },
 
     upload: {
       component: 'el-upload',
-      props: (props: any) => props,
+      props: (props: UploadProps) => props,
     },
   },
 };

packages/design/src/index.ts

@@ -1,9 +1,9 @@
 import { App } from 'vue';
 
 import { setConfig } from './config';
-import { PluginOptions, TMagicMessage, TMagicMessageBox } from './type';
+import { PluginOptions, TMagicMessage, TMagicMessageBox } from './types';
 
-export * from './type';
+export * from './types';
 export * from './config';
 
 /* eslint-disable @typescript-eslint/no-unused-vars */

packages/design/src/type.ts

@@ -1,54 +0,0 @@
-import { Directive } from 'vue';
-
-export interface CascaderOption {
-  /** 指定选项的值为选项对象的某个属性值 */
-  value: any;
-  /** 指定选项标签为选项对象的某个属性值 */
-  label: string;
-  /** 指定选项的子选项为选项对象的某个属性值 */
-  children?: CascaderOption[];
-}
-
-export interface TMagicMessage {
-  success: (msg: string) => void;
-  warning: (msg: string) => void;
-  info: (msg: string) => void;
-  error: (msg: string) => void;
-  closeAll: () => void;
-}
-
-export type ElMessageBoxShortcutMethod = ((
-  message: string,
-  title: string,
-  options?: any,
-  appContext?: any | null,
-) => Promise<any>) &
-  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
-
-export interface TMagicMessageBox {
-  alert: ElMessageBoxShortcutMethod;
-
-  confirm: ElMessageBoxShortcutMethod;
-
-  prompt: ElMessageBoxShortcutMethod;
-
-  close(): void;
-}
-
-export type LoadingBinding = boolean;
-
-const INSTANCE_KEY = Symbol('TdesignLoading');
-
-export interface ElementLoading extends HTMLElement {
-  [INSTANCE_KEY]?: {
-    instance: any;
-  };
-}
-
-export interface PluginOptions {
-  message?: TMagicMessage;
-  messageBox?: TMagicMessageBox;
-  components?: Record<string, any>;
-  loading?: Directive<ElementLoading, LoadingBinding>;
-  [key: string]: any;
-}

packages/design/src/types.ts

@@ -0,0 +1,416 @@
+import { Directive } from 'vue';
+
+export interface CascaderOption {
+  /** 指定选项的值为选项对象的某个属性值 */
+  value: any;
+  /** 指定选项标签为选项对象的某个属性值 */
+  label: string;
+  /** 指定选项的子选项为选项对象的某个属性值 */
+  children?: CascaderOption[];
+}
+
+export interface TMagicMessage {
+  success: (msg: string) => void;
+  warning: (msg: string) => void;
+  info: (msg: string) => void;
+  error: (msg: string) => void;
+  closeAll: () => void;
+}
+
+export type ElMessageBoxShortcutMethod = ((
+  message: string,
+  title: string,
+  options?: any,
+  appContext?: any | null,
+) => Promise<any>) &
+  ((message: string, options?: any, appContext?: any | null) => Promise<any>);
+
+export interface TMagicMessageBox {
+  alert: ElMessageBoxShortcutMethod;
+
+  confirm: ElMessageBoxShortcutMethod;
+
+  prompt: ElMessageBoxShortcutMethod;
+
+  close(): void;
+}
+
+export type LoadingBinding = boolean;
+
+const INSTANCE_KEY = Symbol('TdesignLoading');
+
+export interface ElementLoading extends HTMLElement {
+  [INSTANCE_KEY]?: {
+    instance: any;
+  };
+}
+
+export interface PluginOptions {
+  message?: TMagicMessage;
+  messageBox?: TMagicMessageBox;
+  components?: Record<string, any>;
+  loading?: Directive<ElementLoading, LoadingBinding>;
+  [key: string]: any;
+}
+
+export type FieldSize = 'large' | 'default' | 'small';
+
+export interface AutocompleteProps {
+  modelValue?: string;
+  placeholder?: string;
+  label?: string;
+  clearable?: boolean;
+  disabled?: boolean;
+  triggerOnFocus?: boolean;
+  valueKey?: string;
+  debounce?: number;
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
+  fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
+}
+
+export interface BadgeProps {
+  value?: string | number;
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  max?: number;
+  isDot?: boolean;
+  hidden?: boolean;
+}
+
+export interface ButtonProps {
+  type?: string;
+  size?: FieldSize;
+  text?: boolean;
+  icon?: any;
+}
+
+export interface CardProps {
+  bodyStyle?: Record<string, any>;
+  shadow?: string;
+  header?: string;
+}
+
+export interface CascaderProps {
+  modelValue?: any;
+  placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  filterable?: boolean;
+  options?: CascaderOption[];
+  size?: FieldSize;
+  props: {
+    expandTrigger?: 'click' | 'hover';
+    multiple?: boolean;
+    checkStrictly?: boolean;
+    emitPath?: boolean;
+    lazy?: boolean;
+  };
+}
+
+export interface CheckboxProps {
+  modelValue?: string | number | boolean;
+  value?: string | number | boolean;
+  label?: any;
+  trueLabel?: string | number | boolean;
+  falseLabel?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface CheckboxGroupProps {
+  modelValue?: any[];
+  label?: string;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface ColProps {
+  span?: number;
+}
+
+export interface CollapseProps {
+  modelValue?: string | string[];
+  accordion?: boolean;
+}
+
+export interface CollapseItemProps {
+  name?: string | number;
+  title?: string;
+  disabled?: boolean;
+}
+
+export interface ColorPickerProps {
+  modelValue?: string;
+  disabled?: boolean;
+  showAlpha?: boolean;
+  size?: FieldSize;
+}
+
+export interface DatePickerProps {
+  type?: string;
+  modelValue?: any;
+  disabled?: boolean;
+  placeholder?: string;
+  rangeSeparator?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
+  format?: string;
+  /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
+  valueFormat?: string;
+  /** 在范围选择器里取消两个日期面板之间的联动 */
+  unlinkPanels?: boolean;
+  defaultTime?: any;
+  size?: FieldSize;
+}
+
+export interface DialogProps {
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  beforeClose?: any;
+  title?: string;
+  width?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+}
+
+export interface DividerProps {
+  direction?: string;
+  borderStyle?: string;
+  contentPosition?: string;
+}
+
+export interface DrawerProps {
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  beforeClose?: any;
+  title?: string;
+  size?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  closeOnPressEscape?: boolean;
+  direction?: 'rtl' | 'ltr' | 'ttb' | 'bt';
+}
+
+export interface DropdownProps {
+  type?: string;
+  size?: string;
+  maxHeight?: string | number;
+  splitButton?: boolean;
+  disable?: boolean;
+  placement?: string;
+  trigger?: string;
+  hideOnClick?: boolean;
+  showTimeout?: number;
+  role?: string;
+  tabindex?: number;
+  popperClass?: string;
+  popperOptions?: any;
+}
+
+export interface DropdownItemProps {
+  command?: any;
+  disabled?: boolean;
+  divided?: boolean;
+  icon?: any;
+}
+
+export interface FormProps {
+  model?: any;
+  labelWidth?: string | number;
+  disabled?: boolean;
+  inline?: boolean;
+  labelPosition?: string;
+}
+
+export interface FormItemProps {
+  prop?: string;
+  labelWidth?: string | number;
+  rules?: any;
+}
+
+export interface InputProps {
+  modelValue?: string | number;
+  clearable?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  type?: string;
+  size?: FieldSize;
+}
+
+export interface InputNumberProps {
+  modelValue?: string | number | boolean;
+  clearable?: boolean;
+  controlsPosition?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  step?: number;
+  min?: number;
+  max?: number;
+  size?: FieldSize;
+}
+
+export interface OptionProps {
+  value?: any;
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface OptionGroupProps {
+  label?: string;
+  disabled?: boolean;
+}
+
+export interface PaginationProps {
+  layout?: string;
+  hideOnSinglePage?: boolean;
+  curPage?: number;
+  pageSizes?: number[];
+  pagesize?: number;
+  total?: number;
+}
+
+export interface PopoverProps {
+  placement?: string;
+  width?: string | number;
+  title?: string;
+  trigger?: string;
+  effect?: string;
+  content?: string;
+  disabled?: boolean;
+  popperClass?: string;
+}
+
+export interface RadioProps {
+  label?: string | number | boolean;
+}
+
+export interface RadioButtonProps {
+  label?: string | number | boolean;
+  disabled?: boolean;
+  name?: string;
+}
+
+export interface RadioGroupProps {
+  modelValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface SelectProps {
+  modelValue?: any;
+  clearable?: boolean;
+  filterable?: boolean;
+  popperClass?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  remote?: boolean;
+  multiple?: boolean;
+  allowCreate?: boolean;
+  valueKey?: string;
+  remoteMethod?: any;
+  loading?: boolean;
+  size?: FieldSize;
+  onSearch?: any;
+}
+
+export interface StepProps {
+  title?: string;
+  active?: number;
+  props?: any;
+  status?: any;
+}
+
+export interface StepsProps {
+  active?: number;
+  space?: number | string;
+}
+
+export interface SwitchProps {
+  modelValue?: string | number | boolean;
+  label?: any;
+  activeValue?: string | number | boolean;
+  inactiveValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: FieldSize;
+}
+
+export interface TableProps {
+  data?: any[];
+  border?: boolean;
+  maxHeight?: number | string;
+  defaultExpandAll?: boolean;
+}
+
+export interface TableColumnProps {
+  label?: string;
+  align?: string;
+  fixed?: string | boolean;
+  width?: string | number;
+}
+
+export interface TabPaneProps {
+  name?: string;
+  label?: string;
+  lazy?: boolean;
+}
+
+export interface TabsProps {
+  type?: string;
+  editable?: boolean;
+  tabPosition?: string;
+  modelValue?: string | number;
+}
+
+export interface TagProps {
+  type?: string;
+  disableTransition?: boolean;
+}
+
+export interface TimePickerProps {
+  modelValue?: any;
+  disabled?: boolean;
+  placeholder?: string;
+  size?: FieldSize;
+}
+
+export interface TooltipProps {
+  placement?: string;
+  disabled?: boolean;
+  content?: string;
+  effect?: string;
+  transition?: string;
+  offset?: number;
+}
+
+export interface TreeProps {
+  data?: any[];
+  emptyText?: string;
+  nodeKey?: string;
+  props?: any;
+  renderAfterExpand?: boolean;
+  load?: any;
+  renderContent?: any;
+  highlightCurrent?: boolean;
+  defaultExpandAll?: boolean;
+  checkOnClickNode?: boolean;
+  autoExpandParent?: boolean;
+  defaultExpandedKeys?: any[];
+  showCheckbox?: boolean;
+  checkStrictly?: boolean;
+  defaultCheckedKeys?: any[];
+  currentNodeKey?: string | number;
+  filterNodeMethod?: (value: any, data: any, node: any) => boolean;
+  accordion?: boolean;
+  indent?: number;
+  icon?: any;
+  lazy?: boolean;
+  draggable?: boolean;
+  allowDrag?: (node: any) => boolean;
+  allowDrop?: any;
+}
+
+export interface UploadProps {
+  action?: string;
+  autoUpload?: boolean;
+  disabled?: boolean;
+}

packages/design/vite.config.ts

@@ -17,13 +17,12 @@
  */
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   optimizeDeps: {
     esbuildOptions: {

packages/editor/package.json

@@ -61,28 +61,27 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.34.0",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@tmagic/design": "1.2.15",
     "@tmagic/form": "1.2.15",
     "monaco-editor": "^0.34.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.6.5"
-    "vue-tsc": "^1.0.11"
   }
 }

packages/editor/src/Editor.vue

@@ -86,7 +86,7 @@ import { initServiceEvents, initServiceState } from './initService';
 import type { Services } from './type';
 
 export default defineComponent({
-  name: 'm-editor',
+  name: 'MEditor',
 
   components: {
     TMagicNavMenu: NavMenu,

packages/editor/src/components/CodeDraftEditor.vue

@@ -23,7 +23,7 @@
     </div>
   </div>
 </template>
-<script lang="ts" setup name="MEditorCodeDraftEditor">
+<script lang="ts" setup>
 import { computed, inject, ref, watchEffect } from 'vue';
 import type * as monaco from 'monaco-editor';
 
@@ -34,6 +34,10 @@ import { datetimeFormatter } from '@tmagic/utils';
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeDraftEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 代码id */

packages/editor/src/components/ContentMenu.vue

@@ -22,13 +22,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorContentMenu">
+<script lang="ts" setup>
 import { nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { MenuButton, MenuComponent } from '@editor/type';
 
 import ToolButton from './ToolButton.vue';
 
+defineOptions({
+  name: 'MEditorContentMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     menuData?: (MenuButton | MenuComponent)[];

packages/editor/src/components/FunctionEditor.vue

@@ -32,7 +32,7 @@
     ></CodeDraftEditor>
   </TMagicCard>
 </template>
-<script lang="ts" setup name="MEditorFunctionEditor">
+<script lang="ts" setup>
 import { inject, ref, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -43,6 +43,11 @@ import { CodeParam, Id } from '@tmagic/schema';
 import type { Services } from '@editor/type';
 
 import CodeDraftEditor from './CodeDraftEditor.vue';
+
+defineOptions({
+  name: 'MEditorFunctionEditor',
+});
+
 const defaultParamColConfig: ColumnConfig = {
   type: 'row',
   label: '参数类型',

packages/editor/src/components/Icon.vue

@@ -7,12 +7,16 @@
   <TMagicIcon v-else class="magic-editor-icon"><component :is="toRaw(icon)"></component></TMagicIcon>
 </template>
 
-<script lang="ts" setup name="MEditorIcon">
+<script lang="ts" setup>
 import { toRaw } from 'vue';
 import { Edit } from '@element-plus/icons-vue';
 
 import { TMagicIcon } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorIcon',
+});
+
 defineProps<{
   icon?: any;
 }>();

packages/editor/src/components/Layout.vue

@@ -20,11 +20,15 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorLayout">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from '@editor/layouts/Resizer.vue';
 
+defineOptions({
+  name: 'MEditorLayout',
+});
+
 const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(

packages/editor/src/components/ScrollBar.vue

@@ -4,10 +4,14 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollBar">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorScrollBar',
+});
+
 const props = defineProps<{
   size: number;
   scrollSize: number;

packages/editor/src/components/ScrollViewer.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorScrollViewer">
+<script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import type { ScrollViewerEvent } from '@editor/type';
@@ -30,6 +30,10 @@ import { ScrollViewer } from '@editor/utils/scroll-viewer';
 
 import ScrollBar from './ScrollBar.vue';
 
+defineOptions({
+  name: 'MEditorScrollViewer',
+});
+
 const props = withDefaults(
   defineProps<{
     width?: number;

packages/editor/src/components/SearchInput.vue

@@ -19,6 +19,10 @@ import { Search } from '@element-plus/icons-vue';
 
 import { TMagicIcon, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorSearchInput',
+});
+
 const emit = defineEmits(['search']);
 
 const filterText = ref('');

packages/editor/src/components/ToolButton.vue

@@ -43,7 +43,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorToolButton">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
@@ -60,6 +60,10 @@ import {
 import MIcon from '../components/Icon.vue';
 import type { MenuButton, MenuComponent, Services } from '../type';
 
+defineOptions({
+  name: 'MEditorToolButton',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuButton | MenuComponent;

packages/editor/src/fields/Code.vue

@@ -8,9 +8,13 @@
   ></magic-code-editor>
 </template>
 
-<script lang="ts" setup name="MEditorCode">
+<script lang="ts" setup>
 import { computed } from 'vue';
 
+defineOptions({
+  name: 'MEditorCode',
+});
+
 const emit = defineEmits(['change']);
 
 const props = defineProps<{

packages/editor/src/fields/CodeLink.vue

@@ -2,10 +2,14 @@
   <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
 </template>
 
-<script lang="ts" setup name="MEditorCodeLink">
+<script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeLink',
+});
+
 const props = defineProps<{
   config: {
     type: 'code-link';

packages/editor/src/fields/CodeSelect.vue

@@ -6,13 +6,17 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelect">
+<script lang="ts" setup>
-import { computed, defineEmits, defineProps, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
 import { HookType } from '@tmagic/schema';
 
+defineOptions({
+  name: 'MEditorCodeSelect',
+});
+
 const emit = defineEmits(['change']);
 
 const props = withDefaults(

packages/editor/src/fields/CodeSelectCol.vue

@@ -16,8 +16,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeSelectCol">
+<script lang="ts" setup name="">
-import { computed, defineEmits, defineProps, inject, ref, watch } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
@@ -27,6 +27,10 @@ import { Id } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { CodeParamStatement, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorCodeSelectCol',
+});
+
 const services = inject<Services>('services');
 const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);

packages/editor/src/fields/DataSourceFields.vue

@@ -24,6 +24,10 @@ import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
 import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+defineOptions({
+  name: 'MEditorDataSourceFields',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

packages/editor/src/fields/DataSourceInput.vue

@@ -50,6 +50,10 @@ import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceInput',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

packages/editor/src/fields/EventSelect.vue

@@ -33,8 +33,8 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorEventSelect">
+<script lang="ts" setup>
-import { computed, defineProps, inject } from 'vue';
+import { computed, inject } from 'vue';
 import { Delete } from '@element-plus/icons-vue';
 import { has } from 'lodash-es';
 
@@ -44,7 +44,9 @@ import { ActionType } from '@tmagic/schema';
 
 import type { EventSelectConfig, Services } from '@editor/type';
 
-const services = inject<Services>('services');
+defineOptions({
+  name: 'MEditorEventSelect',
+});
 
 const props = defineProps<{
   config: EventSelectConfig;
@@ -53,8 +55,11 @@ const props = defineProps<{
   name: string;
   size: 'small' | 'default' | 'large';
 }>();
+
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 // 事件名称下拉框表单配置
 const eventNameConfig = computed(() => {
   const defaultEventNameConfig = {

packages/editor/src/fields/KeyValue.vue

@@ -38,6 +38,10 @@ import { Delete, Plus } from '@element-plus/icons-vue';
 
 import { TMagicButton, TMagicInput } from '@tmagic/design';
 
+defineOptions({
+  name: 'MEditorKeyValue',
+});
+
 const props = withDefaults(
   defineProps<{
     config: {

packages/editor/src/fields/UISelect.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorUISelect">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Close, Delete } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import { FormState } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorUISelect',
+});
+
 const props = defineProps<{
   config: any;
   model: any;

packages/editor/src/icons/AppManageIcon.vue

@@ -8,4 +8,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorAppManageIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorAppManageIcon',
+});
+</script>

packages/editor/src/icons/CodeIcon.vue

@@ -23,4 +23,8 @@
   </svg>
 </template>
 
-<script lang="ts" setup name="MEditorCodeIcon"></script>
+<script lang="ts" setup>
+defineOptions({
+  name: 'MEditorCodeIcon',
+});
+</script>

packages/editor/src/layouts/AddPageBox.vue

@@ -11,7 +11,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorAddPageBox">
+<script lang="ts" setup>
 import { inject, toRaw } from 'vue';
 import { Plus } from '@element-plus/icons-vue';
 
@@ -21,6 +21,10 @@ import MIcon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
+defineOptions({
+  name: 'MEditorAddPageBox',
+});
+
 const services = inject<Services>('services');
 
 const clickHandler = () => {

packages/editor/src/layouts/CodeEditor.vue

@@ -2,12 +2,16 @@
   <div ref="codeEditor" class="magic-code-editor"></div>
 </template>
 
-<script lang="ts" setup name="MEditorCodeEditor">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
+defineOptions({
+  name: 'MEditorCodeEditor',
+});
+
 const props = withDefaults(
   defineProps<{
     initValues?: string | Object;

packages/editor/src/layouts/Framework.vue

@@ -42,7 +42,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorFramework">
+<script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
@@ -52,6 +52,10 @@ import type { GetColumnWidth, Services } from '@editor/type';
 
 import AddPageBox from './AddPageBox.vue';
 
+defineOptions({
+  name: 'MEditorFramework',
+});
+
 const DEFAULT_LEFT_COLUMN_WIDTH = 310;
 const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 

packages/editor/src/layouts/NavMenu.vue

@@ -6,7 +6,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorNavMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw } from 'vue';
 import { Back, Delete, FullScreen, Grid, Memo, Right, ScaleToOriginal, ZoomIn, ZoomOut } from '@element-plus/icons-vue';
 
@@ -15,6 +15,10 @@ import { NodeType } from '@tmagic/schema';
 import ToolButton from '@editor/components/ToolButton.vue';
 import { ColumnLayout, MenuBarData, MenuButton, MenuComponent, MenuItem, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorNavMenu',
+});
+
 const props = withDefaults(
   defineProps<{
     data?: MenuBarData;

packages/editor/src/layouts/PropsPanel.vue

@@ -13,7 +13,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorPropsPanel">
+<script lang="ts" setup>
 import { computed, getCurrentInstance, inject, onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
@@ -22,6 +22,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorPropsPanel',
+});
+
 const emit = defineEmits(['mounted']);
 
 const internalInstance = getCurrentInstance();

packages/editor/src/layouts/Resizer.vue

@@ -4,10 +4,14 @@
   </span>
 </template>
 
-<script lang="ts" setup name="MEditorResizer">
+<script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
 import Gesto from 'gesto';
 
+defineOptions({
+  name: 'MEditorResizer',
+});
+
 const emit = defineEmits(['change']);
 
 const target = ref<HTMLSpanElement>();

packages/editor/src/layouts/sidebar/ComponentListPanel.vue

@@ -31,7 +31,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorComponentListPanel">
+<script lang="ts" setup>
 import { computed, inject, ref } from 'vue';
 import { Grid } from '@element-plus/icons-vue';
 import serialize from 'serialize-javascript';
@@ -43,6 +43,10 @@ import MIcon from '@editor/components/Icon.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorComponentListPanel',
+});
+
 const searchText = ref('');
 
 const filterTextChangeHandler = (v: string) => {

packages/editor/src/layouts/sidebar/LayerMenu.vue

@@ -2,7 +2,7 @@
   <ContentMenu :menu-data="menuData" ref="menu" style="overflow: initial"></ContentMenu>
 </template>
 
-<script lang="ts" setup name="MEditorLayerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref } from 'vue';
 import { CopyDocument, Delete, Files, Plus } from '@element-plus/icons-vue';
 
@@ -11,6 +11,10 @@ import { NodeType } from '@tmagic/schema';
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentGroup, MenuButton, MenuComponent, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorLayerMenu',
+});
+
 const props = defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -48,7 +48,7 @@
   </TMagicScrollbar>
 </template>
 
-<script lang="ts" setup name="MEditorLayerPanel">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref, watch } from 'vue';
 import KeyController from 'keycon';
 import { difference, throttle, union } from 'lodash-es';
@@ -64,6 +64,10 @@ import { Layout } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
 
+defineOptions({
+  name: 'MEditorLayerPanel',
+});
+
 defineProps<{
   layerContentMenu: (MenuButton | MenuComponent)[];
 }>();

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -83,7 +83,7 @@
   </component>
 </template>
 
-<script lang="ts" setup name="MEditorSidebar">
+<script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
@@ -98,6 +98,10 @@ import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
 import ComponentListPanel from './ComponentListPanel.vue';
 import LayerPanel from './LayerPanel.vue';
 
+defineOptions({
+  name: 'MEditorSidebar',
+});
+
 const props = withDefaults(
   defineProps<{
     data: SideBarData;

packages/editor/src/layouts/sidebar/code-block/CodeBlockEditor.vue

@@ -32,7 +32,7 @@
   </TMagicDrawer>
 </template>
 
-<script lang="ts" setup name="MEditorCodeBlockEditor">
+<script lang="ts" setup>
 import { computed, inject, reactive, ref, watchEffect } from 'vue';
 import { cloneDeep, forIn, isEmpty } from 'lodash-es';
 
@@ -45,6 +45,10 @@ import Layout from '@editor/components/Layout.vue';
 import type { ListState, Services } from '@editor/type';
 import { serializeConfig } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorCodeBlockEditor',
+});
+
 const services = inject<Services>('services');
 const codeOptions = inject('codeOptions', {});
 

packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -55,7 +55,7 @@
   </TMagicScrollbar>
 </template>
 
-<script setup lang="ts" name="MEditorCodeBlockList">
+<script setup lang="ts">
 import { computed, inject, ref } from 'vue';
 import { Close, Edit, View } from '@element-plus/icons-vue';
 
@@ -71,6 +71,10 @@ import { CodeDeleteErrorType, CodeDslItem, Services } from '@editor/type';
 
 import CodeBlockEditor from './CodeBlockEditor.vue';
 
+defineOptions({
+  name: 'MEditorCodeBlockList',
+});
+
 const props = defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
   paramsColConfig?: ColumnConfig;

packages/editor/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -27,6 +27,10 @@ import { MForm } from '@tmagic/form';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorDataSourceConfigPanel',
+});
+
 const props = defineProps<{
   title?: string;
   values: any;

packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -61,6 +61,10 @@ import type { Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 
+defineOptions({
+  name: 'MEditorDataSourceListPanel',
+});
+
 const services = inject<Partial<Services>>('services', {});
 const { dataSourceService, depService } = inject<Services>('services') || {};
 

packages/editor/src/layouts/workspace/Breadcrumb.vue

@@ -7,7 +7,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorBreadcrumb">
+<script setup lang="ts">
 import { computed, inject } from 'vue';
 
 import { TMagicButton } from '@tmagic/design';
@@ -16,6 +16,10 @@ import { getNodePath } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
+defineOptions({
+  name: 'MEditorBreadcrumb',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

packages/editor/src/layouts/workspace/PageBar.vue

@@ -46,7 +46,7 @@
   </PageBarScrollContainer>
 </template>
 
-<script lang="ts" setup name="MEditorPageBar">
+<script lang="ts" setup>
 import { computed, inject } from 'vue';
 import { CaretBottom, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
@@ -58,6 +58,10 @@ import type { Services } from '@editor/type';
 
 import PageBarScrollContainer from './PageBarScrollContainer.vue';
 
+defineOptions({
+  name: 'MEditorPageBar',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 

packages/editor/src/layouts/workspace/PageBarScrollContainer.vue

@@ -26,7 +26,7 @@
   </div>
 </template>
 
-<script setup lang="ts" name="MEditorPageBarScrollContainer">
+<script setup lang="ts">
 import { computed, inject, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from 'vue';
 import { ArrowLeftBold, ArrowRightBold, Plus } from '@element-plus/icons-vue';
 
@@ -36,6 +36,10 @@ import Icon from '@editor/components/Icon.vue';
 import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorPageBarScrollContainer',
+});
+
 const services = inject<Services>('services');
 const editorService = services?.editorService;
 const uiService = services?.uiService;

packages/editor/src/layouts/workspace/Stage.vue

@@ -26,7 +26,7 @@
   </ScrollViewer>
 </template>
 
-<script lang="ts" setup name="MEditorStage">
+<script lang="ts" setup>
 import { computed, inject, markRaw, nextTick, onMounted, onUnmounted, ref, toRaw, watch, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
@@ -39,6 +39,10 @@ import { useStage } from '@editor/utils/stage';
 
 import ViewerMenu from './ViewerMenu.vue';
 
+defineOptions({
+  name: 'MEditorStage',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();

packages/editor/src/layouts/workspace/ViewerMenu.vue

@@ -2,7 +2,7 @@
   <content-menu :menu-data="menuData" ref="menu"></content-menu>
 </template>
 
-<script lang="ts" setup name="MEditorViewerMenu">
+<script lang="ts" setup>
 import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Bottom, CopyDocument, Delete, DocumentCopy, Top } from '@element-plus/icons-vue';
 
@@ -14,6 +14,10 @@ import storageService from '@editor/services/storage';
 import { LayerOffset, Layout, MenuButton, MenuComponent, Services } from '@editor/type';
 import { COPY_STORAGE_KEY } from '@editor/utils/editor';
 
+defineOptions({
+  name: 'MEditorViewerMenu',
+});
+
 const props = withDefaults(
   defineProps<{ isMultiSelect?: boolean; stageContentMenu: (MenuButton | MenuComponent)[] }>(),
   { isMultiSelect: false },

packages/editor/src/layouts/workspace/Workspace.vue

@@ -15,7 +15,7 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorWorkspace">
+<script lang="ts" setup>
 import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
 import KeyController from 'keycon';
 
@@ -27,6 +27,10 @@ import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineOptions({
+  name: 'MEditorWorkspace',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();

packages/editor/vite.config.ts

@@ -19,13 +19,12 @@
 import path from 'path';
 
 import { defineConfig } from 'vite';
-import VueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vue from '@vitejs/plugin-vue';
 
 import pkg from './package.json';
 
 export default defineConfig({
-  plugins: [vue(), VueSetupExtend()],
+  plugins: [vue()],
 
   resolve: {
     alias:

packages/element-plus-adapter/package.json

@@ -36,12 +36,14 @@
     "typescript"
   ],
   "dependencies": {
+    "@tmagic/design": "^1.2.15",
     "element-plus": "^2.2.32",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
+    "@tmagic/design": "^1.2.15",
     "element-plus": "^2.2.32",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@types/node": "^15.12.4",

packages/element-plus-adapter/src/index.ts

@@ -48,233 +48,277 @@ import {
   ElUpload,
 } from 'element-plus';
 
+import type {
+  AutocompleteProps,
+  BadgeProps,
+  ButtonProps,
+  CardProps,
+  CascaderProps,
+  CheckboxGroupProps,
+  CheckboxProps,
+  CollapseItemProps,
+  CollapseProps,
+  ColorPickerProps,
+  ColProps,
+  DatePickerProps,
+  DialogProps,
+  DividerProps,
+  DrawerProps,
+  DropdownItemProps,
+  DropdownProps,
+  FormItemProps,
+  FormProps,
+  InputNumberProps,
+  InputProps,
+  OptionGroupProps,
+  OptionProps,
+  PaginationProps,
+  PopoverProps,
+  RadioButtonProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  StepProps,
+  StepsProps,
+  SwitchProps,
+  TableColumnProps,
+  TableProps,
+  TabPaneProps,
+  TabsProps,
+  TagProps,
+  TimePickerProps,
+  TooltipProps,
+  TreeProps,
+  UploadProps,
+} from '@tmagic/design';
+
 const adapter: any = {
   message: ElMessage,
   messageBox: ElMessageBox,
   components: {
     autocomplete: {
       component: ElAutocomplete,
-      props: (props: any) => props,
+      props: (props: AutocompleteProps) => props,
     },
 
     badge: {
       component: ElBadge,
-      props: (props: any) => props,
+      props: (props: BadgeProps) => props,
     },
 
     button: {
       component: ElButton,
-      props: (props: any) => props,
+      props: (props: ButtonProps) => props,
     },
 
     card: {
       component: ElCard,
-      props: (props: any) => props,
+      props: (props: CardProps) => props,
     },
 
     cascader: {
       component: ElCascader,
-      props: (props: any) => props,
+      props: (props: CascaderProps) => props,
     },
 
     checkbox: {
       component: ElCheckbox,
-      props: (props: any) => props,
+      props: (props: CheckboxProps) => props,
     },
 
     checkboxGroup: {
       component: ElCheckboxGroup,
-      props: (props: any) => props,
+      props: (props: CheckboxGroupProps) => props,
     },
 
     col: {
       component: ElCol,
-      props: (props: any) => props,
+      props: (props: ColProps) => props,
     },
 
     collapse: {
       component: ElCollapse,
-      props: (props: any) => props,
+      props: (props: CollapseProps) => props,
     },
 
     collapseItem: {
       component: ElCollapseItem,
-      props: (props: any) => props,
+      props: (props: CollapseItemProps) => props,
     },
 
     colorPicker: {
       component: ElColorPicker,
-      props: (props: any) => props,
+      props: (props: ColorPickerProps) => props,
     },
 
     datePicker: {
       component: ElDatePicker,
-      props: (props: any) => props,
+      props: (props: DatePickerProps) => props,
     },
 
     dialog: {
       component: ElDialog,
-      props: (props: any) => props,
+      props: (props: DialogProps) => props,
     },
 
     divider: {
       component: ElDivider,
-      props: (props: any) => props,
+      props: (props: DividerProps) => props,
     },
 
     drawer: {
       component: ElDrawer,
-      props: (props: any) => props,
+      props: (props: DrawerProps) => props,
     },
 
     dropdown: {
       component: ElDropdown,
-      props: (props: any) => props,
+      props: (props: DropdownProps) => props,
     },
 
     dropdownItem: {
       component: ElDropdownItem,
-      props: (props: any) => props,
+      props: (props: DropdownItemProps) => props,
     },
 
     dropdownMenu: {
       component: ElDropdownMenu,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     form: {
       component: ElForm,
-      props: (props: any) => props,
+      props: (props: FormProps) => props,
     },
 
     formItem: {
       component: ElFormItem,
-      props: (props: any) => props,
+      props: (props: FormItemProps) => props,
     },
 
     icon: {
       component: ElIcon,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     input: {
       component: ElInput,
-      props: (props: any) => props,
+      props: (props: InputProps) => props,
     },
 
     inputNumber: {
       component: ElInputNumber,
-      props: (props: any) => props,
+      props: (props: InputNumberProps) => props,
     },
 
     option: {
       component: ElOption,
-      props: (props: any) => props,
+      props: (props: OptionProps) => props,
     },
 
     optionGroup: {
       component: ElOptionGroup,
-      props: (props: any) => props,
+      props: (props: OptionGroupProps) => props,
     },
 
     pagination: {
       component: ElPagination,
-      props: (props: any) => props,
+      props: (props: PaginationProps) => props,
     },
 
     popover: {
       component: ElPopover,
-      props: (props: any) => props,
+      props: (props: PopoverProps) => props,
     },
 
     radio: {
       component: ElRadio,
-      props: (props: any) => props,
+      props: (props: RadioProps) => props,
     },
 
     radioButton: {
       component: ElRadioButton,
-      props: (props: any) => props,
+      props: (props: RadioButtonProps) => props,
     },
 
     radioGroup: {
       component: ElRadioGroup,
-      props: (props: any) => props,
+      props: (props: RadioGroupProps) => props,
     },
 
     row: {
       component: ElRow,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     scrollbar: {
       component: ElScrollbar,
-      props: (props: any) => props,
+      props: () => ({}),
     },
 
     select: {
       component: ElSelect,
-      props: (props: any) => props,
+      props: (props: SelectProps) => props,
     },
 
     step: {
       component: ElStep,
-      props: (props: any) => props,
+      props: (props: StepProps) => props,
     },
 
     steps: {
       component: ElSteps,
-      props: (props: any) => props,
+      props: (props: StepsProps) => props,
     },
 
     switch: {
       component: ElSwitch,
-      props: (props: any) => props,
+      props: (props: SwitchProps) => props,
     },
 
     table: {
       component: ElTable,
-      props: (props: any) => props,
+      props: (props: TableProps) => props,
     },
 
     tableColumn: {
       component: ElTableColumn,
-      props: (props: any) => props,
+      props: (props: TableColumnProps) => props,
     },
 
     tabPane: {
       component: ElTabPane,
-      props: (props: any) => props,
+      props: (props: TabPaneProps) => props,
     },
 
     tabs: {
       component: ElTabs,
-      props: (props: any) => props,
+      props: (props: TabsProps) => props,
     },
 
     tag: {
       component: ElTag,
-      props: (props: any) => props,
+      props: (props: TagProps) => props,
     },
 
     timePicker: {
       component: ElTimePicker,
-      props: (props: any) => props,
+      props: (props: TimePickerProps) => props,
     },
 
     tooltip: {
       component: ElTooltip,
-      props: (props: any) => props,
+      props: (props: TooltipProps) => props,
     },
 
     tree: {
       component: ElTree,
-      props: (props: any) => props,
+      props: (props: TreeProps) => props,
     },
 
     upload: {
       component: ElUpload,
-      props: (props: any) => props,
+      props: (props: UploadProps) => props,
     },
   },
 };

packages/form/package.json

@@ -40,24 +40,23 @@
     "@tmagic/utils": "1.2.15",
     "lodash-es": "^4.17.21",
     "sortablejs": "^1.14.0",
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/sortablejs": "^1.10.7",
-    "@vitejs/plugin-vue": "^4.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/compiler-sfc": "^3.3.4",
-    "@vue/test-utils": "^2.0.0",
+    "@vue/test-utils": "^2.3.2",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "typescript": "^5.0.4",
     "vite": "^4.3.8",
-    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue-tsc": "^1.6.5"
-    "vue-tsc": "^1.2.0"
   }
 }

packages/form/src/Form.vue

@@ -26,7 +26,7 @@
   </TMagicForm>
 </template>
 
-<script setup lang="ts" name="MForm">
+<script setup lang="ts">
 import { provide, reactive, ref, toRaw, watch, watchEffect } from 'vue';
 import { isEqual } from 'lodash-es';
 import cloneDeep from 'lodash-es/cloneDeep';
@@ -38,6 +38,10 @@ import { getConfig } from './utils/config';
 import { initValue } from './utils/form';
 import type { FormConfig, FormState, FormValue, ValidateError } from './schema';
 
+defineOptions({
+  name: 'MForm',
+});
+
 const props = withDefaults(
   defineProps<{
     /** 表单配置 */