From 144bb2e6d5d73885dd447dc7702d7921a884b3b1 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Thu, 18 May 2023 22:53:21 +0800 Subject: [PATCH] feat: support vue 3.3 slot type --- components/auto-complete/index.tsx | 2 +- components/calendar/demo/customize-header.vue | 2 +- components/calendar/generateCalendar.tsx | 58 ++++++++++------- components/popconfirm/index.tsx | 1 + components/result/index.tsx | 2 +- components/table/Table.tsx | 64 +++++++++++-------- components/time-picker/time-picker.tsx | 14 ++-- components/typography/Typography.tsx | 7 +- package.json | 2 - 9 files changed, 90 insertions(+), 62 deletions(-) diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index f78f1bd2e..276de9679 100644 --- a/components/auto-complete/index.tsx +++ b/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; diff --git a/components/calendar/demo/customize-header.vue b/components/calendar/demo/customize-header.vue index 5cae0c869..eb460a0e1 100644 --- a/components/calendar/demo/customize-header.vue +++ b/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)); } " > diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index 6b6717f71..c3a866da6 100644 --- a/components/calendar/generateCalendar.tsx +++ b/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({ + 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, default: undefined as Props['locale'] }, + validRange: { type: Array as PropType, default: undefined }, + disabledDate: { type: Function as PropType, default: undefined }, + dateFullCellRender: { + type: Function as PropType, + default: undefined, + }, + dateCellRender: { type: Function as PropType, default: undefined }, + monthFullCellRender: { + type: Function as PropType, + default: undefined, + }, + monthCellRender: { type: Function as PropType, default: undefined }, + headerRender: { type: Function as PropType, default: undefined }, + value: { + type: [Object, String] as PropType, + default: undefined as Props['value'], + }, + defaultValue: { + type: [Object, String] as PropType, + default: undefined as Props['defaultValue'], + }, + mode: { type: String as PropType, default: undefined }, + fullscreen: { type: Boolean as PropType, default: undefined }, + onChange: { type: Function as PropType, default: undefined }, + 'onUpdate:value': { type: Function as PropType, default: undefined }, + onPanelChange: { type: Function as PropType, default: undefined }, + onSelect: { type: Function as PropType, 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) => { diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 40b6cee9d..bdda1b910 100644 --- a/components/popconfirm/index.tsx +++ b/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; diff --git a/components/result/index.tsx b/components/result/index.tsx index 2e4738a55..835130546 100644 --- a/components/result/index.tsx +++ b/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); diff --git a/components/table/Table.tsx b/components/table/Table.tsx index a7ec65a35..4e38051ef 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -224,38 +224,27 @@ export const tableProps = () => { type: [Boolean, Object] as PropType, default: true, }, - contextSlots: { - type: Object as PropType, - }, + transformCellText: { type: Function as PropType, }, }; }; -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; - 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, + }, + }, + { + 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({ +const Table = defineComponent({ name: 'ATable', inheritAttrs: false, + props: initDefaultProps(tableProps(), { + rowKey: 'key', + }), + slots: Object as CustomSlotsType<{ + emptyText?: any; + expandIcon?: RenderExpandIconProps; + title?: any; + footer?: any; + summary?: any; + expandedRowRender?: any; + bodyCell?: { + text: any; + value: any; + record: Record; + index: number; + column: ColumnType; + }; + headerCell?: { + title: any; + column: ColumnType; + }; + customFilterIcon?: any; + customFilterDropdown?: any; + default: any; + }>, setup(_props, { attrs, slots, expose }) { const table = ref(); expose({ diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx index 8179f6168..33c735247 100644 --- a/components/time-picker/time-picker.tsx +++ b/components/time-picker/time-picker.tsx @@ -85,7 +85,7 @@ function createTimePicker< }); const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any; - const TimePicker = defineComponent({ + const TimePicker = defineComponent({ name: 'ATimePicker', inheritAttrs: false, props: { @@ -93,7 +93,7 @@ function createTimePicker< ...datePickerProps(), ...timePickerProps(), addon: { type: Function }, - } as any, + }, slots: Object as CustomSlotsType<{ addon?: any; renderExtraFooter?: any; @@ -101,7 +101,8 @@ function createTimePicker< 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,7 +163,7 @@ function createTimePicker< }, }); - const TimeRangePicker = defineComponent({ + const TimeRangePicker = defineComponent({ name: 'ATimeRangePicker', inheritAttrs: false, props: { @@ -170,14 +171,15 @@ function createTimePicker< ...rangePickerProps(), ...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({ diff --git a/components/typography/Typography.tsx b/components/typography/Typography.tsx index a0797e35c..e5a32571b 100644 --- a/components/typography/Typography.tsx +++ b/components/typography/Typography.tsx @@ -18,28 +18,27 @@ export const typographyProps = () => ({ // Form Internal use component: String, }); -const Typography = defineComponent({ +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 ( {slots.default?.()} diff --git a/package.json b/package.json index 4945f762e..a3238eb36 100644 --- a/package.json +++ b/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",