feat(design): 添加class

packages/design/src/Button.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-button" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
     <slot></slot>
   </component>
 </template>
@@ -11,7 +11,7 @@ import { getConfig } from './config';
 
 const props = defineProps<{
   type?: string;
-  size?: string;
+  size?: 'large' | 'default' | 'small';
   text?: boolean;
   icon?: any;
 }>();

packages/design/src/Card.vue

@@ -1,10 +1,12 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-card" :is="uiComponent.component" v-bind="uiProps">
     <template #header>
-      <slot name="header"></slot>
+      <slot name="header" class="header"></slot>
     </template>
 
-    <slot></slot>
+    <template #default>
+      <slot name="default"></slot>
+    </template>
   </component>
 </template>
 

packages/design/src/Cascader.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     ref="cascader"
+    class="tmagic-design-cascader"
     :is="uiComponent.component"
     v-bind="uiProps"
     @update:modelValue="updateModelValue"
@@ -21,7 +22,7 @@ const props = defineProps<{
   clearable?: boolean;
   filterable?: boolean;
   options?: CascaderOption[];
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
   props: {
     expandTrigger?: 'click' | 'hover';
     multiple?: boolean;

packages/design/src/Checkbox.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-checkbox"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <template #default>
       <slot></slot>
     </template>
@@ -18,7 +24,7 @@ const props = withDefaults(
     trueLabel?: string | number | boolean;
     falseLabel?: string | number | boolean;
     disabled?: boolean;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     trueLabel: undefined,

packages/design/src/CheckboxGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-checkbox-group"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
   </component>
 </template>
@@ -13,7 +19,7 @@ const props = defineProps<{
   modelValue?: any[];
   label?: string;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').checkboxGroup;

packages/design/src/Col.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-col" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Collapse.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-collapse"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <slot></slot>
   </component>
 </template>

packages/design/src/CollapseItem.vue

@@ -1,9 +1,18 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-collapse-item"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <slot></slot>
     <template #title>
       <slot name="title"></slot>
     </template>
+    <template #header>
+      <slot name="title"></slot>
+    </template>
   </component>
 </template>
 

packages/design/src/ColorPicker.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-color-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -13,7 +19,7 @@ const props = withDefaults(
     modelValue?: string;
     disabled?: boolean;
     showAlpha?: boolean;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     showAlpha: false,

packages/design/src/DatePicker.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-date-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -23,7 +29,7 @@ const props = withDefaults(
     /** 在范围选择器里取消两个日期面板之间的联动 */
     unlinkPanels?: boolean;
     defaultTime?: any;
-    size?: 'mini' | 'small' | 'medium';
+    size?: 'large' | 'default' | 'small';
   }>(),
   {
     type: 'date',

packages/design/src/Dialog.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @close="closeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-dialog"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @close="closeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
 
     <template #footer>
@@ -21,7 +27,6 @@ const props = defineProps<{
   width?: string | number;
   fullscreen?: boolean;
   closeOnClickModal?: boolean;
-  labelPosition?: string;
 }>();
 
 const uiComponent = getConfig('components').dialog;

packages/design/src/Divider.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-divider" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Dropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
+  <component class="tmagic-design-dropdown" :is="uiComponent.component" v-bind="uiProps" @command="commandHandler">
     <slot></slot>
 
     <template #dropdown>

packages/design/src/DropdownItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-item" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/DropdownMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-dropdown-menu" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Form.vue

@@ -1,5 +1,5 @@
 <template>
-  <component ref="form" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form" ref="form" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/FormItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-form-item" :is="uiComponent.component" v-bind="uiProps">
     <template #label>
       <slot name="label"></slot>
     </template>

packages/design/src/Icon.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component">
+  <component class="tmagic-design-icon" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>

packages/design/src/Input.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-input"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
@@ -21,12 +22,12 @@ import { computed } from 'vue';
 import { getConfig } from './config';
 
 const props = defineProps<{
-  modelValue?: string | number | boolean;
+  modelValue?: string | number;
   clearable?: boolean;
   disabled?: boolean;
   placeholder?: string;
   type?: string;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').input;

packages/design/src/InputNumber.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-input-number"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
@@ -22,7 +23,7 @@ const props = defineProps<{
   step?: number;
   min?: number;
   max?: number;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').inputNumber;

packages/design/src/Option.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/OptionGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <component ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-option-group" ref="optionGroup" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Pagination.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-pagination"
     :is="uiComponent.component"
     v-bind="uiProps"
     @size-change="handleSizeChange"

packages/design/src/Popover.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-popover" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
 
     <template #reference>

packages/design/src/Radio.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-radio" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/RadioGroup.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-radio-group"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
     <slot></slot>
   </component>
 </template>
@@ -12,7 +18,7 @@ import { getConfig } from './config';
 const props = defineProps<{
   modelValue?: string | number | boolean;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').radioGroup;

packages/design/src/Row.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component">
+  <component class="tmagic-design-row" :is="uiComponent.component">
     <slot></slot>
   </component>
 </template>

packages/design/src/Scrollbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-scrollbar" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Select.vue

@@ -1,10 +1,12 @@
 <template>
   <component
+    class="tmagic-design-select"
     ref="select"
     :is="uiComponent.component"
     v-bind="uiProps"
     @change="changeHandler"
     @visible-change="visibleHandler"
+    @popup-visible-change="visibleHandler"
     @update:modelValue="updateModelValue"
   >
     <slot></slot>
@@ -30,7 +32,7 @@ const props = defineProps<{
   allowCreate?: boolean;
   valueKey?: string;
   remoteMethod?: any;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').select;
@@ -39,22 +41,22 @@ const uiProps = computed(() => uiComponent.props(props));
 
 const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
 
-const changeHandler = (v: any) => {
-  emit('change', v);
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
 };
 
-const updateModelValue = (v: any) => {
-  emit('update:modelValue', v);
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
 };
 
-const visibleHandler = (v: any) => {
-  emit('visibleHandler', v);
+const visibleHandler = (...args: any[]) => {
+  emit('visibleHandler', ...args);
 };
 
 const scrollbarWrap = ref<HTMLDivElement | undefined>();
 
 onMounted(() => {
-  scrollbarWrap.value = select.value?.scrollbar.wrap$;
+  scrollbarWrap.value = select.value?.scrollbar?.wrap$;
 });
 
 defineExpose({

packages/design/src/Step.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+  <component class="tmagic-design-step" :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
     <slot></slot>
   </component>
 </template>

packages/design/src/Steps.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-steps" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>

packages/design/src/Switch.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+  <component
+    class="tmagic-design-switch"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  >
     <template #default>
       <slot></slot>
     </template>
@@ -17,7 +23,7 @@ const props = defineProps<{
   activeValue?: string | number | boolean;
   inactiveValue?: string | number | boolean;
   disabled?: boolean;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').switch;

packages/design/src/TabPane.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tab-pane" :is="uiComponent.component" v-bind="uiProps">
     <template #default>
       <slot></slot>
     </template>

packages/design/src/Table.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-table"
     ref="table"
     :is="uiComponent.component"
     v-bind="uiProps"

packages/design/src/Tabs.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-tabs"
     :is="uiComponent.component"
     v-bind="uiProps"
     @tab-click="tabClickHandler"

packages/design/src/Tag.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tag" :is="uiComponent.component" v-bind="uiProps">
     <slot></slot>
   </component>
 </template>
@@ -11,7 +11,7 @@ import { getConfig } from './config';
 
 const props = defineProps<{
   type?: string;
-  closeTransition?: boolean;
+  disableTransition?: boolean;
 }>();
 
 const uiComponent = getConfig('components').tag;

packages/design/src/TimePicker.vue

@@ -1,5 +1,11 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  <component
+    class="tmagic-design-time-picker"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @update:modelValue="updateModelValue"
+  >
   </component>
 </template>
 
@@ -12,7 +18,7 @@ const props = defineProps<{
   modelValue?: any;
   disabled?: boolean;
   placeholder?: string;
-  size?: 'mini' | 'small' | 'medium';
+  size?: 'large' | 'default' | 'small';
 }>();
 
 const uiComponent = getConfig('components').timePicker;

packages/design/src/Tooltip.vue

@@ -1,5 +1,5 @@
 <template>
-  <component :is="uiComponent.component" v-bind="uiProps">
+  <component class="tmagic-design-tooltip" :is="uiComponent.component" v-bind="uiProps">
     <template #content>
       <slot name="content"></slot>
     </template>

packages/design/src/Tree.vue

@@ -1,5 +1,6 @@
 <template>
   <component
+    class="tmagic-design-tree"
     ref="tree"
     :is="uiComponent.component"
     v-bind="uiProps"

packages/design/src/Upload.vue

@@ -1,5 +1,11 @@
 <template>
-  <component ref="upload" :is="uiComponent.component" v-bind="uiProps" @change="changeHandler"></component>
+  <component
+    class="tmagic-design-upload"
+    ref="upload"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+  ></component>
 </template>
 
 <script setup lang="ts" name="TMUpload">
@@ -10,6 +16,7 @@ import { getConfig } from './config';
 const props = defineProps<{
   action?: string;
   autoUpload?: boolean;
+  disabled?: boolean;
 }>();
 
 const emit = defineEmits(['change']);