style: 完善@tmagic/design ts 类型

packages/design/src/Autocomplete.vue

@@ -2,7 +2,7 @@
   <component
     class="tmagic-design-auto-complete"
     ref="autocomplete"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @select="selectHandler"
@@ -38,9 +38,11 @@ defineOptions({
 
 const props = defineProps<AutocompleteProps>();
 
-const uiComponent = getConfig('components').autocomplete;
+const ui = getConfig('components')?.autocomplete;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-autocomplete';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'select', 'update:modelValue']);
 

packages/design/src/Badge.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-badge" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-badge" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,8 @@ defineOptions({
 
 const props = defineProps<BadgeProps>();
 
-const uiComponent = getConfig('components').badge;
+const ui = getConfig('components')?.badge;
+const uiComponent = ui?.component || 'el-badge';
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-button" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-button" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
     <template #default v-if="$slots.default">
       <slot></slot>
     </template>
@@ -18,9 +18,11 @@ defineOptions({
 
 const props = defineProps<ButtonProps>();
 
-const uiComponent = getConfig('components').button;
+const ui = getConfig('components')?.button;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-button';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['click']);
 

packages/design/src/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-card" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-card" :is="uiComponent" v-bind="uiProps">
     <template #header>
       <slot name="header" class="header"></slot>
     </template>
@@ -22,7 +22,9 @@ defineOptions({
 
 const props = defineProps<CardProps>();
 
-const uiComponent = getConfig('components').card;
+const ui = getConfig('components')?.card;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-card';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Cascader.vue

@@ -2,7 +2,7 @@
   <component
     ref="cascader"
     class="tmagic-design-cascader"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
     @change="changeHandler"
@@ -21,9 +21,11 @@ defineOptions({
 
 const props = defineProps<CascaderProps>();
 
-const uiComponent = getConfig('components').cascader;
+const ui = getConfig('components')?.cascader;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-cascader';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const cascader = ref<any>();
 

packages/design/src/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-checkbox"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
     @change="changeHandler"
@@ -27,9 +27,11 @@ const props = withDefaults(defineProps<CheckboxProps>(), {
   falseLabel: undefined,
 });
 
-const uiComponent = getConfig('components').checkbox;
+const ui = getConfig('components')?.checkbox;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-checkbox';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/CheckboxGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-checkbox-group"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @update:modelValue="updateModelValue"
@@ -22,9 +22,11 @@ defineOptions({
 
 const props = defineProps<CheckboxGroupProps>();
 
-const uiComponent = getConfig('components').checkboxGroup;
+const ui = getConfig('components')?.checkboxGroup;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-checkbox-group';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/Col.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-col" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-col" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<ColProps>();
 
-const uiComponent = getConfig('components').col;
+const ui = getConfig('components')?.col;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-col';
+
+const uiProps = computed(() => ui?.props(props));
 </script>

packages/design/src/Collapse.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-collapse"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
     @change="changeHandler"
@@ -22,9 +22,11 @@ defineOptions({
 
 const props = defineProps<CollapseProps>();
 
-const uiComponent = getConfig('components').collapse;
+const ui = getConfig('components')?.collapse;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-collapse';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/CollapseItem.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-collapse-item"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
     @change="changeHandler"
@@ -28,9 +28,11 @@ defineOptions({
 
 const props = defineProps<CollapseItemProps>();
 
-const uiComponent = getConfig('components').collapseItem;
+const ui = getConfig('components')?.collapseItem;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-collapse-item';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/ColorPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-color-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @update:modelValue="updateModelValue"
@@ -24,9 +24,11 @@ const props = withDefaults(defineProps<ColorPickerProps>(), {
   disabled: false,
 });
 
-const uiComponent = getConfig('components').colorPicker;
+const ui = getConfig('components')?.colorPicker;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-color-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/DatePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-date-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @update:modelValue="updateModelValue"
@@ -23,9 +23,11 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   type: 'date',
 });
 
-const uiComponent = getConfig('components').datePicker;
+const ui = getConfig('components')?.datePicker;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-date-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-dialog"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @close="closeHandler"
     @update:modelValue="updateModelValue"
@@ -26,9 +26,11 @@ defineOptions({
 
 const props = defineProps<DialogProps>();
 
-const uiComponent = getConfig('components').dialog;
+const ui = getConfig('components')?.dialog;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dialog';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['close', 'update:modelValue']);
 

packages/design/src/Divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-divider" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-divider" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<DividerProps>();
 
-const uiComponent = getConfig('components').divider;
+const ui = getConfig('components')?.divider;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-divider';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Drawer.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-drawer"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @open="openHandler"
     @opened="openedHandler"
@@ -35,9 +35,11 @@ const props = defineProps<DrawerProps>();
 
 const emit = defineEmits(['open', 'opened', 'close', 'closed', 'update:modelValue']);
 
-const uiComponent = getConfig('components').drawer;
+const ui = getConfig('components')?.drawer;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-drawer';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const openHandler = (...args: any[]) => {
   emit('open', ...args);

packages/design/src/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown" :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
+  <component class="tmagic-design-dropdown" :is="uiComponent" v-bind="uiProps" @command="commandHandler">
     <slot></slot>
 
     <template #dropdown>
@@ -20,9 +20,11 @@ defineOptions({
 
 const props = defineProps<DropdownProps>();
 
-const uiComponent = getConfig('components').dropdown;
+const ui = getConfig('components')?.dropdown;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dropdown';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['command']);
 

packages/design/src/DropdownItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown-item" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-item" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<DropdownItemProps>();
 
-const uiComponent = getConfig('components').dropdownItem;
+const ui = getConfig('components')?.dropdownItem;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-dropdown-item';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/DropdownMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component">
+  <component class="tmagic-design-dropdown-menu" :is="uiComponent">
     <slot></slot>
   </component>
 </template>
@@ -11,5 +11,7 @@ defineOptions({
   name: 'TMDropdownMenu',
 });
 
-const uiComponent = getConfig('components').dropdownMenu;
+const ui = getConfig('components')?.dropdownMenu;
+
+const uiComponent = ui?.component || 'el-dropdown-menu';
 </script>

packages/design/src/Form.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-form" ref="form" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form" ref="form" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,9 +16,11 @@ defineOptions({
 
 const props = defineProps<FormProps>();
 
-const uiComponent = getConfig('components').form;
+const ui = getConfig('components')?.form;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-form';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const form = ref<any>();
 

packages/design/src/FormItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-form-item" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form-item" :is="uiComponent" v-bind="uiProps">
     <template #label>
       <slot name="label"></slot>
     </template>
@@ -19,7 +19,9 @@ defineOptions({
 
 const props = defineProps<FormItemProps>();
 
-const uiComponent = getConfig('components').formItem;
+const ui = getConfig('components')?.formItem;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-form-item';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-icon" :is="uiComponent.component">
+  <component class="tmagic-design-icon" :is="uiComponent">
     <slot></slot>
   </component>
 </template>
@@ -11,5 +11,6 @@ defineOptions({
   name: 'TMIcon',
 });
 
-const uiComponent = getConfig('components').icon;
+const ui = getConfig('components')?.icon;
+const uiComponent = ui?.component || 'el-icon';
 </script>

packages/design/src/Input.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-input"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @input="inputHandler"
@@ -34,9 +34,11 @@ defineOptions({
 
 const props = defineProps<InputProps>();
 
-const uiComponent = getConfig('components').input;
+const ui = getConfig('components')?.input;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-input';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'input', 'update:modelValue']);
 

packages/design/src/InputNumber.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-input-number"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @input="inputHandler"
@@ -21,9 +21,11 @@ defineOptions({
 
 const props = defineProps<InputNumberProps>();
 
-const uiComponent = getConfig('components').inputNumber;
+const ui = getConfig('components')?.inputNumber;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-input-number';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'input', 'update:modelValue']);
 

packages/design/src/Option.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-option" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<OptionProps>();
 
-const uiComponent = getConfig('components').option;
+const ui = getConfig('components')?.option;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-option';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/OptionGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,9 +16,11 @@ defineOptions({
 
 const props = defineProps<OptionGroupProps>();
 
-const uiComponent = getConfig('components').optionGroup;
+const ui = getConfig('components')?.optionGroup;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-option-group';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const optionGroup = ref<any>();
 </script>

packages/design/src/Pagination.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-pagination"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @size-change="handleSizeChange"
     @page-size-change="handleSizeChange"
@@ -21,9 +21,11 @@ defineOptions({
 
 const props = defineProps<PaginationProps>();
 
-const uiComponent = getConfig('components').pagination;
+const ui = getConfig('components')?.pagination;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-pagination';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['size-change', 'current-change']);
 

packages/design/src/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-popover" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-popover" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
 
     <template #reference>
@@ -20,7 +20,9 @@ defineOptions({
 
 const props = defineProps<PopoverProps>();
 
-const uiComponent = getConfig('components').popover;
+const ui = getConfig('components')?.popover;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-popover';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-radio" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<RadioProps>();
 
-const uiComponent = getConfig('components').radio;
+const ui = getConfig('components')?.radio;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/RadioButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-radio-button" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio-button" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<RadioButtonProps>();
 
-const uiComponent = getConfig('components').radioButton;
+const ui = getConfig('components')?.radioButton;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio-button';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/RadioGroup.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-radio-group"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @update:modelValue="updateModelValue"
@@ -22,9 +22,11 @@ defineOptions({
 
 const props = defineProps<RadioGroupProps>();
 
-const uiComponent = getConfig('components').radioGroup;
+const ui = getConfig('components')?.radioGroup;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-radio-group';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-row" :is="uiComponent.component">
+  <component class="tmagic-design-row" :is="uiComponent">
     <slot></slot>
   </component>
 </template>
@@ -11,5 +11,5 @@ defineOptions({
   name: 'TMRow',
 });
 
-const uiComponent = getConfig('components').row;
+const uiComponent = getConfig('components')?.row.component || 'el-row';
 </script>

packages/design/src/Scrollbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-scrollbar" :is="uiComponent.component">
+  <component class="tmagic-design-scrollbar" :is="uiComponent">
     <slot></slot>
   </component>
 </template>
@@ -11,5 +11,7 @@ defineOptions({
   name: 'TMScrollbar',
 });
 
-const uiComponent = getConfig('components').scrollbar;
+const ui = getConfig('components')?.scrollbar;
+
+const uiComponent = ui?.component || 'el-scrollbar';
 </script>

packages/design/src/Select.vue

@@ -2,7 +2,7 @@
   <component
     class="tmagic-design-select"
     ref="select"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @visible-change="visibleHandler"
@@ -25,9 +25,11 @@ defineOptions({
 
 const props = defineProps<SelectProps>();
 
-const uiComponent = getConfig('components').select;
+const ui = getConfig('components')?.select;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-select';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 

packages/design/src/Step.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-step" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-step" :is="uiComponent" v-bind="uiProps" @click="clickHandler">
     <slot></slot>
   </component>
 </template>
@@ -22,7 +22,9 @@ const clickHandler = (...args: any[]) => {
   emit('click', ...args);
 };
 
-const uiComponent = getConfig('components').step;
+const ui = getConfig('components')?.step;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-step';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Steps.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-steps" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-steps" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<StepsProps>();
 
-const uiComponent = getConfig('components').steps;
+const ui = getConfig('components')?.steps;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-steps';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Switch.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-switch"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
     @change="changeHandler"
@@ -24,9 +24,11 @@ defineOptions({
 
 const props = defineProps<SwitchProps>();
 
-const uiComponent = getConfig('components').switch;
+const ui = getConfig('components')?.switch;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-switch';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/TabPane.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tab-pane" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tab-pane" :is="uiComponent" v-bind="uiProps">
     <template #default>
       <slot></slot>
     </template>
@@ -21,7 +21,10 @@ defineOptions({
 });
 
 const props = defineProps<TabPaneProps>();
-const uiComponent = getConfig('components').tabPane;
 
-const uiProps = computed(() => uiComponent.props(props));
+const ui = getConfig('components')?.tabPane;
+
+const uiComponent = ui?.component || 'el-tab-pane';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Table.vue

@@ -2,7 +2,7 @@
   <component
     class="tmagic-design-table"
     ref="table"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @select="selectHandler"
     @sort-change="sortChangeHandler"
@@ -27,9 +27,11 @@ const props = withDefaults(defineProps<TableProps>(), {
   data: () => [],
 });
 
-const uiComponent = getConfig('components').table;
+const ui = getConfig('components')?.table;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-table';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['select', 'sort-change', 'expand-change', 'cell-click']);
 

packages/design/src/TableColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component :is="uiComponent" v-bind="uiProps">
     <template #default="{ $index, row }">
       <!-- eslint-disable-next-line vue/valid-attribute-name -->
       <slot :$index="$index" :row="row"></slot>
@@ -19,7 +19,9 @@ defineOptions({
 
 const props = defineProps<TableColumnProps>();
 
-const uiComponent = getConfig('components').tableColumn;
+const ui = getConfig('components')?.tableColumn;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-table-column';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-tabs"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @tab-click="tabClickHandler"
     @tab-add="onTabAdd"
@@ -26,9 +26,11 @@ defineOptions({
 
 const props = defineProps<TabsProps>();
 
-const uiComponent = getConfig('components').tabs;
+const ui = getConfig('components')?.tabs;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tabs';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['tab-click', 'tab-add', 'tab-remove', 'update:model-value']);
 

packages/design/src/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tag" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tag" :is="uiComponent" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -16,7 +16,9 @@ defineOptions({
 
 const props = defineProps<TagProps>();
 
-const uiComponent = getConfig('components').tag;
+const ui = getConfig('components')?.tag;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tag';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/TimePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     class="tmagic-design-time-picker"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
     @update:modelValue="updateModelValue"
@@ -21,9 +21,11 @@ defineOptions({
 
 const props = defineProps<TimePickerProps>();
 
-const uiComponent = getConfig('components').timePicker;
+const ui = getConfig('components')?.timePicker;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-time-picker';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits(['change', 'update:modelValue']);
 

packages/design/src/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <component class="tmagic-design-tooltip" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tooltip" :is="uiComponent" v-bind="uiProps">
     <template #content>
       <slot name="content"></slot>
     </template>
@@ -19,7 +19,9 @@ defineOptions({
 
 const props = defineProps<TooltipProps>();
 
-const uiComponent = getConfig('components').tooltip;
+const ui = getConfig('components')?.tooltip;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tooltip';
+
+const uiProps = computed(() => ui?.props(props) || {});
 </script>

packages/design/src/Tree.vue

@@ -2,7 +2,7 @@
   <component
     class="tmagic-design-tree"
     ref="tree"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @node-click="nodeClickHandler"
     @node-contextmenu="contextmenu"
@@ -31,9 +31,11 @@ defineOptions({
 
 const props = defineProps<TreeProps>();
 
-const uiComponent = getConfig('components').tree;
+const ui = getConfig('components')?.tree;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-tree';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const emit = defineEmits([
   'node-click',

packages/design/src/Upload.vue

@@ -2,7 +2,7 @@
   <component
     class="tmagic-design-upload"
     ref="upload"
-    :is="uiComponent.component"
+    :is="uiComponent"
     v-bind="uiProps"
     @change="changeHandler"
   ></component>
@@ -25,9 +25,11 @@ const emit = defineEmits(['change']);
 const changeHandler = (...args: any[]) => {
   emit('change', ...args);
 };
-const uiComponent = getConfig('components').upload;
+const ui = getConfig('components')?.upload;
 
-const uiProps = computed(() => uiComponent.props(props));
+const uiComponent = ui?.component || 'el-upload';
+
+const uiProps = computed(() => ui?.props(props) || {});
 
 const upload = ref<any>();
 

packages/design/src/config.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import defaultAdapter from './defaultAdapter';
 import { PluginOptions } from './types';
 
 let $MAGIC_DESIGN: PluginOptions = {};
@@ -25,6 +24,6 @@ const setConfig = (options: PluginOptions): void => {
   $MAGIC_DESIGN = options;
 };
 
-const getConfig = (key: string): any => $MAGIC_DESIGN[key] || (defaultAdapter as any)[key];
+const getConfig = <K extends keyof PluginOptions>(key: K) => $MAGIC_DESIGN[key];
 
 export { getConfig, setConfig };

packages/design/src/defaultAdapter.ts

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

packages/design/src/types.ts

@@ -1,57 +1,4 @@
-import { Directive } from 'vue';
+import { DefineComponent, 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';
 
@@ -64,6 +11,7 @@ export interface AutocompleteProps {
   triggerOnFocus?: boolean;
   valueKey?: string;
   debounce?: number;
+  size?: FieldSize;
   placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
   fetchSuggestions?: (queryString: string, callback: (data: any[]) => any) => void;
 }
@@ -414,3 +362,328 @@ export interface UploadProps {
   autoUpload?: boolean;
   disabled?: boolean;
 }
+
+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 Components {
+  badge: {
+    component: DefineComponent<BadgeProps, {}, any> | string;
+    props: (props: BadgeProps) => BadgeProps;
+  };
+
+  autocomplete: {
+    component: DefineComponent<AutocompleteProps, {}, any> | string;
+    props: (props: AutocompleteProps) => AutocompleteProps;
+  };
+
+  button: {
+    component: DefineComponent<ButtonProps, {}, any> | string;
+    props: (props: ButtonProps) => ButtonProps;
+  };
+
+  card: {
+    component: DefineComponent<CardProps, {}, any> | string;
+    props: (props: CardProps) => CardProps;
+  };
+
+  cascader: {
+    component: DefineComponent<CascaderProps, {}, any> | string;
+    props: (props: CascaderProps) => CascaderProps;
+  };
+
+  checkbox: {
+    component: DefineComponent<CheckboxProps, {}, any> | string;
+    props: (props: CheckboxProps) => CheckboxProps;
+  };
+
+  checkboxGroup: {
+    component: DefineComponent<CheckboxGroupProps, {}, any> | string;
+    props: (props: CheckboxGroupProps) => CheckboxGroupProps;
+  };
+
+  col: {
+    component: DefineComponent<ColProps, {}, any> | string;
+    props: (props: ColProps) => ColProps;
+  };
+
+  collapse: {
+    component: DefineComponent<CollapseProps, {}, any> | string;
+    props: (props: CollapseProps) => CollapseProps;
+  };
+
+  collapseItem: {
+    component: DefineComponent<CollapseItemProps, {}, any> | string;
+    props: (props: CollapseItemProps) => CollapseItemProps;
+  };
+
+  colorPicker: {
+    component: DefineComponent<ColorPickerProps, {}, any> | string;
+    props: (props: ColorPickerProps) => ColorPickerProps;
+  };
+
+  datePicker: {
+    component: DefineComponent<DatePickerProps, {}, any> | string;
+    props: (props: DatePickerProps) => DatePickerProps;
+  };
+
+  dialog: {
+    component: DefineComponent<DialogProps, {}, any> | string;
+    props: (props: DialogProps) => DialogProps;
+  };
+
+  divider: {
+    component: DefineComponent<DividerProps, {}, any> | string;
+    props: (props: DividerProps) => DividerProps;
+  };
+
+  drawer: {
+    component: DefineComponent<DrawerProps, {}, any> | string;
+    props: (props: DrawerProps) => DrawerProps;
+  };
+
+  dropdown: {
+    component: DefineComponent<DropdownProps, {}, any> | string;
+    props: (props: DropdownProps) => DropdownProps;
+  };
+
+  dropdownItem: {
+    component: DefineComponent<DropdownItemProps, {}, any> | string;
+    props: (props: DropdownItemProps) => DropdownItemProps;
+  };
+
+  dropdownMenu: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  form: {
+    component: DefineComponent<FormProps, {}, any> | string;
+    props: (props: FormProps) => FormProps;
+  };
+
+  formItem: {
+    component: DefineComponent<FormItemProps, {}, any> | string;
+    props: (props: FormItemProps) => FormItemProps;
+  };
+
+  icon: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  input: {
+    component: DefineComponent<InputProps, {}, any> | string;
+    props: (props: InputProps) => InputProps;
+  };
+
+  inputNumber: {
+    component: DefineComponent<InputNumberProps, {}, any> | string;
+    props: (props: InputNumberProps) => InputNumberProps;
+  };
+
+  option: {
+    component: DefineComponent<OptionProps, {}, any> | string;
+    props: (props: OptionProps) => OptionProps;
+  };
+
+  optionGroup: {
+    component: DefineComponent<OptionGroupProps, {}, any> | string;
+    props: (props: OptionGroupProps) => OptionGroupProps;
+  };
+
+  pagination: {
+    component: DefineComponent<PaginationProps, {}, any> | string;
+    props: (props: PaginationProps) => PaginationProps;
+  };
+
+  popover: {
+    component: DefineComponent<PopoverProps, {}, any> | string;
+    props: (props: PopoverProps) => PopoverProps;
+  };
+
+  radio: {
+    component: DefineComponent<RadioProps, {}, any> | string;
+    props: (props: RadioProps) => RadioProps;
+  };
+
+  radioButton: {
+    component: DefineComponent<RadioButtonProps, {}, any> | string;
+    props: (props: RadioButtonProps) => RadioButtonProps;
+  };
+
+  radioGroup: {
+    component: DefineComponent<RadioGroupProps, {}, any> | string;
+    props: (props: RadioGroupProps) => RadioGroupProps;
+  };
+
+  row: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  scrollbar: {
+    component: DefineComponent<{}, {}, any> | string;
+    props: () => {};
+  };
+
+  select: {
+    component:
+      | DefineComponent<
+          SelectProps,
+          {
+            scrollbarWrap: HTMLDivElement | undefined;
+            setQuery: (v: string) => void;
+            setPreviousQuery: (v: string) => void;
+            setSelectedLabel: (v: string) => void;
+            setSelected: () => void;
+          },
+          any
+        >
+      | string;
+    props: (props: SelectProps) => SelectProps;
+  };
+
+  step: {
+    component: DefineComponent<StepProps, {}, any> | string;
+    props: (props: StepProps) => StepProps;
+  };
+
+  steps: {
+    component: DefineComponent<StepsProps, {}, any> | string;
+    props: (props: StepsProps) => StepsProps;
+  };
+
+  switch: {
+    component: DefineComponent<SwitchProps, {}, any> | string;
+    props: (props: SwitchProps) => SwitchProps;
+  };
+
+  table: {
+    component:
+      | DefineComponent<
+          TableProps,
+          {
+            instance: any;
+            $el: HTMLDivElement | undefined;
+            clearSelection: (...args: any[]) => void;
+            toggleRowSelection: (...args: any[]) => void;
+            toggleRowExpansion: (...args: any[]) => void;
+          },
+          any
+        >
+      | string;
+    props: (props: TableProps) => TableProps;
+  };
+
+  tableColumn: {
+    component: DefineComponent<TableColumnProps, {}, any> | string;
+    props: (props: TableColumnProps) => TableColumnProps;
+  };
+
+  tabPane: {
+    component: DefineComponent<TabPaneProps, {}, any> | string;
+    props: (props: TabPaneProps) => TabPaneProps;
+  };
+
+  tabs: {
+    component: DefineComponent<TabsProps, {}, any> | string;
+    props: (props: TabsProps) => TabsProps;
+  };
+
+  tag: {
+    component: DefineComponent<TagProps, {}, any> | string;
+    props: (props: TagProps) => TagProps;
+  };
+
+  timePicker: {
+    component: DefineComponent<TimePickerProps, {}, any> | string;
+    props: (props: TimePickerProps) => TimePickerProps;
+  };
+
+  tooltip: {
+    component: DefineComponent<TooltipProps, {}, any> | string;
+    props: (props: TooltipProps) => TooltipProps;
+  };
+
+  tree: {
+    component:
+      | DefineComponent<
+          TreeProps,
+          {
+            getData: () => TreeProps['data'];
+            getStore: () => any;
+            filter: (...args: any[]) => any;
+            getNode: (...args: any[]) => any;
+            setCheckedKeys: (...args: any[]) => any;
+            setCurrentKey: (...args: any[]) => any;
+          },
+          any
+        >
+      | string;
+    props: (props: TreeProps) => TreeProps;
+  };
+
+  upload: {
+    component:
+      | DefineComponent<
+          UploadProps,
+          {
+            clearFiles: (...args: any[]) => any;
+          },
+          any
+        >
+      | string;
+    props: (props: UploadProps) => UploadProps;
+  };
+}
+
+export interface PluginOptions {
+  message?: TMagicMessage;
+  messageBox?: TMagicMessageBox;
+  components?: Components;
+  loading?: Directive<ElementLoading, LoadingBinding>;
+  [key: string]: any;
+}

packages/editor/src/fields/DataSourceInput.vue

@@ -1,18 +1,18 @@
 <template>
   <component
-    v-if="!disabled && isFocused"
+    v-if="disabled || isFocused"
-    :is="getConfig('components').autocomplete.component"
+    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
     class="tmagic-design-auto-complete"
     ref="autocomplete"
     v-model="state"
     v-bind="
-      getConfig('components').autocomplete.props({
+      getConfig('components')?.autocomplete.props({
         disabled,
         size,
         fetchSuggestions: querySearch,
         triggerOnFocus: false,
         clearable: true,
-      })
+      }) || {}
     "
     style="width: 100%"
     @blur="blurHandler"
@@ -31,11 +31,13 @@
     </template>
   </component>
   <div :class="`el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
-    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`" style="justify-content: left">
+    <div :class="`el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
-      <template v-for="(item, index) in displayState">
+      <div class="el-input__inner">
-        <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
+        <template v-for="(item, index) in displayState">
-        <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+          <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
-      </template>
+          <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -44,7 +46,7 @@
 import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
-import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
+import { FieldSize, getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -66,7 +68,7 @@ const props = withDefaults(
     prop: string;
     disabled: boolean;
     lastValues?: Record<string, any>;
-    size?: 'large' | 'default' | 'small';
+    size?: FieldSize;
   }>(),
   {
     disabled: false,

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

@@ -3,13 +3,13 @@
     v-if="data.type === 'tabs' && data.items.length"
     v-model="activeTabName"
     class="m-editor-sidebar tmagic-design-tabs"
-    v-bind="tabsComponent.props({ type: 'card', tabPosition: 'left' })"
+    v-bind="tabsComponent?.props({ type: 'card', tabPosition: 'left' }) || {}"
-    :is="tabsComponent.component"
+    :is="tabsComponent?.component || 'el-tabs'"
   >
     <component
       v-for="(config, index) in sideBarItems"
-      v-bind="tabPaneComponent.props({ name: config.text, lazy: config.lazy })"
+      v-bind="tabPaneComponent?.props({ name: config.text, lazy: config.lazy }) || {}"
-      :is="tabPaneComponent.component"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="config.$key || index"
     >
       <template #label>
@@ -112,8 +112,8 @@ const props = withDefaults(
   },
 );
 
-const tabPaneComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabsComponent = getConfig('components')?.tabs;
 
 const activeTabName = ref(props.data?.status);
 

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

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

packages/form/src/containers/Tabs.vue

@@ -2,13 +2,13 @@
   <component
     v-model="activeTabName"
     v-bind="
-      tabsComponent.props({
+      tabsComponent?.props({
         type: config.tabType,
         editable: config.editable || false,
         tabPosition: config.tabPosition || 'top',
-      })
+      }) || {}
     "
-    :is="tabsComponent.component"
+    :is="tabsComponent?.component || 'el-tabs'"
     :class="`tmagic-design-tabs ${config.dynamic ? 'magic-form-dynamic-tab' : 'magic-form-tab'}`"
     @tab-click="tabClickHandler"
     @tab-add="onTabAdd"
@@ -16,9 +16,11 @@
   >
     <component
       v-for="(tab, tabIndex) in tabs"
-      :is="tabPaneComponent.component"
+      :is="tabPaneComponent?.component || 'el-tab-pane'"
       :key="tab[mForm?.keyProp || '__key'] ?? tabIndex"
-      v-bind="tabPaneComponent.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false })"
+      v-bind="
+        tabPaneComponent?.props({ name: filter(tab.status) || tabIndex.toString(), lazy: tab.lazy || false }) || {}
+      "
     >
       <template #label>
         <span>
@@ -86,8 +88,8 @@ type DiffCount = {
   [tabIndex: number]: number;
 };
 
-const tabPaneComponent = getConfig('components').tabPane;
+const tabPaneComponent = getConfig('components')?.tabPane;
-const tabsComponent = getConfig('components').tabs;
+const tabsComponent = getConfig('components')?.tabs;
 
 const getActive = (mForm: FormState | undefined, props: any, activeTabName: string) => {
   const { config, model, prop } = props;

packages/form/src/fields/SelectOptionGroups.vue

@@ -2,7 +2,7 @@
   <TMagicOptionGroup v-for="(group, index) in options" :key="index" :label="group.label" :disabled="group.disabled">
     <component
       v-for="(item, index) in group.options"
-      :is="uiComponent.component"
+      :is="uiComponent"
       :key="index"
       :label="item.label || item.text"
       :value="item.value"
@@ -25,5 +25,5 @@ defineProps<{
   options: SelectGroupOption[];
 }>();
 
-const uiComponent = getConfig('components').option;
+const uiComponent = getConfig('components')?.option.component || 'el-option';
 </script>

packages/form/src/index.ts

@@ -82,45 +82,47 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
-const defaultInstallOpt = {};
+export interface InstallOptions {
+  [key: string]: any;
+}
 
-const install = (app: App, opt: any) => {
+const defaultInstallOpt: InstallOptions = {};
-  const option = Object.assign(defaultInstallOpt, opt);
-
-  // eslint-disable-next-line no-param-reassign
-  app.config.globalProperties.$MAGIC_FORM = option;
-  setConfig(option);
-
-  app.component('m-form', Form);
-  app.component('m-form-dialog', FormDialog);
-  app.component('m-form-container', Container);
-  app.component('m-form-fieldset', Fieldset);
-  app.component('m-form-group-list', GroupList);
-  app.component('m-form-panel', Panel);
-  app.component('m-form-row', Row);
-  app.component('m-form-step', MStep);
-  app.component('m-form-table', Table);
-  app.component('m-form-tab', Tabs);
-  app.component('m-fields-text', Text);
-  app.component('m-fields-number', Number);
-  app.component('m-fields-textarea', Textarea);
-  app.component('m-fields-hidden', Hidden);
-  app.component('m-fields-date', Date);
-  app.component('m-fields-datetime', DateTime);
-  app.component('m-fields-daterange', Daterange);
-  app.component('m-fields-time', Time);
-  app.component('m-fields-checkbox', Checkbox);
-  app.component('m-fields-switch', Switch);
-  app.component('m-fields-color-picker', ColorPicker);
-  app.component('m-fields-checkbox-group', CheckboxGroup);
-  app.component('m-fields-radio-group', RadioGroup);
-  app.component('m-fields-display', Display);
-  app.component('m-fields-link', Link);
-  app.component('m-fields-select', Select);
-  app.component('m-fields-cascader', Cascader);
-  app.component('m-fields-dynamic-field', DynamicField);
-};
 
 export default {
-  install,
+  install(app: App, opt: InstallOptions = {}) {
+    const option = Object.assign(defaultInstallOpt, opt);
+
+    // eslint-disable-next-line no-param-reassign
+    app.config.globalProperties.$MAGIC_FORM = option;
+    setConfig(option);
+
+    app.component('m-form', Form);
+    app.component('m-form-dialog', FormDialog);
+    app.component('m-form-container', Container);
+    app.component('m-form-fieldset', Fieldset);
+    app.component('m-form-group-list', GroupList);
+    app.component('m-form-panel', Panel);
+    app.component('m-form-row', Row);
+    app.component('m-form-step', MStep);
+    app.component('m-form-table', Table);
+    app.component('m-form-tab', Tabs);
+    app.component('m-fields-text', Text);
+    app.component('m-fields-number', Number);
+    app.component('m-fields-textarea', Textarea);
+    app.component('m-fields-hidden', Hidden);
+    app.component('m-fields-date', Date);
+    app.component('m-fields-datetime', DateTime);
+    app.component('m-fields-daterange', Daterange);
+    app.component('m-fields-time', Time);
+    app.component('m-fields-checkbox', Checkbox);
+    app.component('m-fields-switch', Switch);
+    app.component('m-fields-color-picker', ColorPicker);
+    app.component('m-fields-checkbox-group', CheckboxGroup);
+    app.component('m-fields-radio-group', RadioGroup);
+    app.component('m-fields-display', Display);
+    app.component('m-fields-link', Link);
+    app.component('m-fields-select', Select);
+    app.component('m-fields-cascader', Cascader);
+    app.component('m-fields-dynamic-field', DynamicField);
+  },
 };

packages/table/src/Table.vue

@@ -29,7 +29,7 @@
         <component
           width="40"
           type="selection"
-          :is="tableColumnComponent.component"
+          :is="tableColumnComponent?.component || 'el-table-column'"
           :key="columnIndex"
           :selectable="item.selectable"
         ></component>
@@ -114,7 +114,7 @@ const tMagicTable = ref<InstanceType<typeof TMagicTable>>();
 
 const editState = ref([]);
 
-const tableColumnComponent = getConfig('components').tableColumn;
+const tableColumnComponent = getConfig('components')?.tableColumn;
 const selectionColumn = computed(() => {
   const column = props.columns.filter((item) => item.selection);
   return column.length ? column[0] : null;