feat: support vue 3.3 slot type

Author: tangjinzhou

components/auto-complete/index.tsx

@@ -46,7 +46,7 @@ const AutoComplete = defineComponent({
   props: autoCompleteProps(),
   // emits: ['change', 'select', 'focus', 'blur'],
   slots: Object as CustomSlotsType<{
-    option: any;
+    options: any;
     default: any;
     notFoundContent: any;
     dataSource: any;

components/calendar/demo/customize-header.vue

@@ -37,7 +37,7 @@ Customize Calendar header content.
                 :value="String(current.year())"
                 @change="
                   newYear => {
-                    onChange(current.year(newYear));
+                    onChange(current.year(+newYear));
                   }
                 "
               >

components/calendar/generateCalendar.tsx

@@ -12,7 +12,7 @@ import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
 import enUS from './locale/en_US';
 import CalendarHeader from './Header';
 import type { CustomSlotsType, VueNode } from '../_util/type';
-import type { App } from 'vue';
+import type { App, PropType } from 'vue';
 import { computed, defineComponent, toRef } from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import classNames from '../_util/classNames';
@@ -86,28 +86,41 @@ function generateCalendar<
     );
   }
 
-  const Calendar = defineComponent<Props>({
+  const Calendar = defineComponent({
     name: 'ACalendar',
     inheritAttrs: false,
-    props: [
-      'prefixCls',
-      'locale',
-      'validRange',
-      'disabledDate',
-      'dateFullCellRender',
-      'dateCellRender',
-      'monthFullCellRender',
-      'monthCellRender',
-      'headerRender',
-      'value',
-      'defaultValue',
-      'mode',
-      'fullscreen',
-      'onChange',
-      'onPanelChange',
-      'onSelect',
-      'valueFormat',
-    ] as any,
+    props: {
+      prefixCls: String,
+      locale: { type: Object as PropType<Props['locale']>, default: undefined as Props['locale'] },
+      validRange: { type: Array as PropType<DateType[]>, default: undefined },
+      disabledDate: { type: Function as PropType<Props['disabledDate']>, default: undefined },
+      dateFullCellRender: {
+        type: Function as PropType<Props['dateFullCellRender']>,
+        default: undefined,
+      },
+      dateCellRender: { type: Function as PropType<Props['dateCellRender']>, default: undefined },
+      monthFullCellRender: {
+        type: Function as PropType<Props['monthFullCellRender']>,
+        default: undefined,
+      },
+      monthCellRender: { type: Function as PropType<Props['monthCellRender']>, default: undefined },
+      headerRender: { type: Function as PropType<Props['headerRender']>, default: undefined },
+      value: {
+        type: [Object, String] as PropType<Props['value']>,
+        default: undefined as Props['value'],
+      },
+      defaultValue: {
+        type: [Object, String] as PropType<Props['defaultValue']>,
+        default: undefined as Props['defaultValue'],
+      },
+      mode: { type: String as PropType<Props['mode']>, default: undefined },
+      fullscreen: { type: Boolean as PropType<Props['fullscreen']>, default: undefined },
+      onChange: { type: Function as PropType<Props['onChange']>, default: undefined },
+      'onUpdate:value': { type: Function as PropType<Props['onUpdate:value']>, default: undefined },
+      onPanelChange: { type: Function as PropType<Props['onPanelChange']>, default: undefined },
+      onSelect: { type: Function as PropType<Props['onSelect']>, default: undefined },
+      valueFormat: { type: String, default: undefined },
+    },
     slots: Object as CustomSlotsType<{
       dateFullCellRender?: { current: DateType };
       dateCellRender?: { current: DateType };
@@ -121,7 +134,8 @@ function generateCalendar<
       };
       default: any;
     }>,
-    setup(props, { emit, slots, attrs }) {
+    setup(p, { emit, slots, attrs }) {
+      const props = p as unknown as Props;
       const { prefixCls, direction } = useConfigInject('picker', props);
       const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`);
       const maybeToString = (date: DateType) => {

components/popconfirm/index.tsx

@@ -76,6 +76,7 @@ const Popconfirm = defineComponent({
     content?: any;
     okText?: any;
     icon?: any;
+    cancel?: any;
     cancelText?: any;
     cancelButton?: any;
     okButton?: any;

components/result/index.tsx

@@ -68,7 +68,7 @@ const Result = defineComponent({
     subTitle?: any;
     icon?: any;
     extra?: any;
-    dfault?: any;
+    default?: any;
   }>,
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('result', props);

components/table/Table.tsx

@@ -224,38 +224,27 @@ export const tableProps = () => {
       type: [Boolean, Object] as PropType<boolean | TooltipProps>,
       default: true,
     },
-    contextSlots: {
-      type: Object as PropType<ContextSlots>,
-    },
+
     transformCellText: {
       type: Function as PropType<TableProps['transformCellText']>,
     },
   };
 };
 
-const InteralTable = defineComponent<
-  TableProps & {
-    contextSlots: ContextSlots;
-  }
->({
+const InteralTable = defineComponent({
   name: 'InteralTable',
   inheritAttrs: false,
-  props: initDefaultProps(tableProps(), {
-    rowKey: 'key',
-  }) as any,
-  slots: Object as CustomSlotsType<{
-    emptyText?: any;
-    expandIcon?: RenderExpandIconProps<any>;
-    title?: any;
-    footer?: any;
-    summary?: any;
-    expandedRowRender?: any;
-    bodyCell?: any;
-    headerCell?: any;
-    customFilterIcon?: any;
-    customFilterDropdown?: any;
-    default: any;
-  }>,
+  props: initDefaultProps(
+    {
+      ...tableProps(),
+      contextSlots: {
+        type: Object as PropType<ContextSlots>,
+      },
+    },
+    {
+      rowKey: 'key',
+    },
+  ),
   setup(props, { attrs, slots, expose, emit }) {
     devWarning(
       !(typeof props.rowKey === 'function' && props.rowKey.length > 1),
@@ -684,9 +673,34 @@ const InteralTable = defineComponent<
   },
 });
 
-const Table = defineComponent<TableProps>({
+const Table = defineComponent({
   name: 'ATable',
   inheritAttrs: false,
+  props: initDefaultProps(tableProps(), {
+    rowKey: 'key',
+  }),
+  slots: Object as CustomSlotsType<{
+    emptyText?: any;
+    expandIcon?: RenderExpandIconProps<any>;
+    title?: any;
+    footer?: any;
+    summary?: any;
+    expandedRowRender?: any;
+    bodyCell?: {
+      text: any;
+      value: any;
+      record: Record<string, any>;
+      index: number;
+      column: ColumnType;
+    };
+    headerCell?: {
+      title: any;
+      column: ColumnType;
+    };
+    customFilterIcon?: any;
+    customFilterDropdown?: any;
+    default: any;
+  }>,
   setup(_props, { attrs, slots, expose }) {
     const table = ref();
     expose({

components/time-picker/time-picker.tsx

@@ -85,23 +85,24 @@ function createTimePicker<
   });
 
   const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
-  const TimePicker = defineComponent<DTimePickerProps>({
+  const TimePicker = defineComponent({
     name: 'ATimePicker',
     inheritAttrs: false,
     props: {
       ...commonProps<DateType>(),
       ...datePickerProps<DateType>(),
       ...timePickerProps(),
       addon: { type: Function },
-    } as any,
+    },
     slots: Object as CustomSlotsType<{
       addon?: any;
       renderExtraFooter?: any;
       suffixIcon?: any;
       clearIcon?: any;
       default: any;
     }>,
-    setup(props, { slots, expose, emit, attrs }) {
+    setup(p, { slots, expose, emit, attrs }) {
+      const props = p as unknown as DTimePickerProps;
       const formItemContext = useInjectFormItemContext();
       devWarning(
         !(slots.addon || props.addon),
@@ -162,22 +163,23 @@ function createTimePicker<
     },
   });
 
-  const TimeRangePicker = defineComponent<DTimeRangePickerProps>({
+  const TimeRangePicker = defineComponent({
     name: 'ATimeRangePicker',
     inheritAttrs: false,
     props: {
       ...commonProps<DateType>(),
       ...rangePickerProps<DateType>(),
       ...timePickerProps(),
       order: { type: Boolean, default: true },
-    } as any,
+    },
     slots: Object as CustomSlotsType<{
       renderExtraFooter?: any;
       suffixIcon?: any;
       clearIcon?: any;
       default: any;
     }>,
-    setup(props, { slots, expose, emit, attrs }) {
+    setup(p, { slots, expose, emit, attrs }) {
+      const props = p as unknown as DTimeRangePickerProps;
       const pickerRef = ref();
       const formItemContext = useInjectFormItemContext();
       expose({

components/typography/Typography.tsx

@@ -18,28 +18,27 @@ export const typographyProps = () => ({
   // Form Internal use
   component: String,
 });
-const Typography = defineComponent<InternalTypographyProps>({
+const Typography = defineComponent({
   name: 'ATypography',
   inheritAttrs: false,
-  props: typographyProps() as any,
+  props: typographyProps(),
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('typography', props);
     return () => {
       const {
         prefixCls: _prefixCls,
-        class: _className,
         direction: _direction,
         component: Component = 'article' as any,
         ...restProps
       } = { ...props, ...attrs };
       return (
         <Component
+          {...restProps}
           class={classNames(
             prefixCls.value,
             { [`${prefixCls.value}-rtl`]: direction.value === 'rtl' },
             attrs.class,
           )}
-          {...restProps}
         >
           {slots.default?.()}
         </Component>

package.json

@@ -251,7 +251,6 @@
     "url-loader": "^3.0.0",
     "vite": "^3.0.0",
     "vue": "^3.2.0",
-    "vue-antd-md-loader": "^1.2.1-beta.1",
     "vue-clipboard2": "0.3.3",
     "vue-drag-resize": "^2.0.3",
     "vue-eslint-parser": "^8.0.0",
@@ -260,7 +259,6 @@
     "vue-loader": "^17.0.0",
     "vue-request": "^1.0.2",
     "vue-router": "^4.0.0",
-    "vue-server-renderer": "^2.6.11",
     "vue-style-loader": "^4.1.2",
     "vue-tsc": "^1.0.6",
     "vuex": "^4.0.0",