fix: vue 3.3 type error

tangjinzhou · tangjinzhou · commit 9499a7fc86aa · 2023-05-18T16:22:12.000+08:00
diff --git a/components/_util/type.ts b/components/_util/type.ts
@@ -1,4 +1,5 @@
-import type { App, PropType, Plugin, Ref, VNode } from 'vue';
+// @ts-ignore
+import type { App, PropType, Plugin, Ref, VNode, SlotsType } from 'vue';
 
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
 export const tuple = <T extends string[]>(...args: T) => args;
@@ -42,3 +43,5 @@ export const withInstall = <T>(comp: T) => {
 };
 
 export type MaybeRef<T> = T | Ref<T>;
+
+export type CustomSlotsType<T> = SlotsType<T>;
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
@@ -5,6 +5,7 @@ import { getPropsSlot, initDefaultProps } from '../_util/props-util';
 import classNames from '../_util/classNames';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import { useInjectAnchor } from './context';
+import type { CustomSlotsType } from '../_util/type';
 
 export const anchorLinkProps = () => ({
   prefixCls: String,
@@ -19,7 +20,10 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AAnchorLink',
   props: initDefaultProps(anchorLinkProps(), { href: '#' }),
-  slots: ['title'],
+  slots: Object as CustomSlotsType<{
+    title: AnchorLinkProps;
+    default: any;
+  }>,
   setup(props, { slots }) {
     let mergedTitle = null;
     const {
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
@@ -7,6 +7,7 @@ import Option from './Option';
 import OptGroup from './OptGroup';
 import omit from '../_util/omit';
 import useConfigInject from '../_util/hooks/useConfigInject';
+import type { CustomSlotsType } from '../_util/type';
 
 function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
@@ -44,7 +45,12 @@ const AutoComplete = defineComponent({
   inheritAttrs: false,
   props: autoCompleteProps(),
   // emits: ['change', 'select', 'focus', 'blur'],
-  slots: ['option'],
+  slots: Object as CustomSlotsType<{
+    option: any;
+    default: any;
+    notFoundContent: any;
+    dataSource: any;
+  }>,
   setup(props, { slots, attrs, expose }) {
     warning(
       !('dataSource' in slots),
diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
@@ -1,4 +1,4 @@
-import type { VueNode } from '../_util/type';
+import type { CustomSlotsType, VueNode } from '../_util/type';
 
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
 import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
@@ -41,7 +41,10 @@ const Avatar = defineComponent({
   name: 'AAvatar',
   inheritAttrs: false,
   props: avatarProps(),
-  slots: ['icon'],
+  slots: Object as CustomSlotsType<{
+    icon: AvatarProps;
+    default: any;
+  }>,
   setup(props, { slots, attrs }) {
     const isImgExist = ref(true);
     const isMounted = ref(false);
diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
@@ -11,6 +11,7 @@ import { isPresetColor } from './utils';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import isNumeric from '../_util/isNumeric';
 import type { PresetStatusColorType } from '../_util/colors';
+import type { CustomSlotsType } from '../_util/type';
 
 export const badgeProps = () => ({
   /** Number to show in badge */
@@ -39,7 +40,11 @@ export default defineComponent({
   Ribbon,
   inheritAttrs: false,
   props: badgeProps(),
-  slots: ['text', 'count'],
+  slots: Object as CustomSlotsType<{
+    text: BadgeProps;
+    count: any;
+    default: any;
+  }>,
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('badge', props);
 
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -1,4 +1,4 @@
-import type { LiteralUnion } from '../_util/type';
+import type { CustomSlotsType, LiteralUnion } from '../_util/type';
 import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from './utils';
 import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
@@ -20,7 +20,10 @@ export default defineComponent({
   name: 'ABadgeRibbon',
   inheritAttrs: false,
   props: ribbonProps(),
-  slots: ['text'],
+  slots: Object as CustomSlotsType<{
+    text: any;
+    default: any;
+  }>,
   setup(props, { attrs, slots }) {
     const { prefixCls, direction } = useConfigInject('ribbon', props);
     const colorInPreset = computed(() => isPresetColor(props.color));
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
@@ -5,7 +5,7 @@ import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
-import type { VueNode } from '../_util/type';
+import type { CustomSlotsType, VueNode } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export interface Route {
@@ -55,7 +55,11 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'ABreadcrumb',
   props: breadcrumbProps(),
-  slots: ['separator', 'itemRender'],
+  slots: Object as CustomSlotsType<{
+    separator: BreadcrumbProps;
+    itemRender: { route: Route; params: any; routes: Route[]; paths: string[] };
+    default: any;
+  }>,
   setup(props, { slots }) {
     const { prefixCls, direction } = useConfigInject('breadcrumb', props);
 
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -18,6 +18,7 @@ import LoadingIcon from './LoadingIcon';
 
 import type { ButtonType } from './buttonTypes';
 import type { VNode, Ref } from 'vue';
+import type { CustomSlotsType } from '../_util/type';
 
 type Loading = boolean | number;
 
@@ -34,7 +35,10 @@ export default defineComponent({
   inheritAttrs: false,
   __ANT_BUTTON: true,
   props: initDefaultProps(buttonProps(), { type: 'default' }),
-  slots: ['icon'],
+  slots: Object as CustomSlotsType<{
+    icon: any;
+    default: any;
+  }>,
   // emits: ['click', 'mousedown'],
   setup(props, { slots, attrs, emit, expose }) {
     const { prefixCls, autoInsertSpaceInButton, direction, size } = useConfigInject('btn', props);
diff --git a/components/vc-drawer/src/DrawerWrapper.tsx b/components/vc-drawer/src/DrawerWrapper.tsx
@@ -24,7 +24,6 @@ const DrawerWrapper = defineComponent({
     autofocus: true,
   }),
   emits: ['handleClick', 'close'],
-  slots: ['handler'],
   setup(props, { emit, slots }) {
     const dom = ref<HTMLElement>(null);
 
diff --git a/components/vc-dropdown/Dropdown.tsx b/components/vc-dropdown/Dropdown.tsx
@@ -33,7 +33,6 @@ export default defineComponent({
     mouseLeaveDelay: PropTypes.number.def(0.1),
   },
   emits: ['visibleChange', 'overlayClick'],
-  slots: ['overlay'],
   setup(props, { slots, emit, expose }) {
     const triggerVisible = ref(!!props.visible);
     watch(
diff --git a/components/vc-mentions/src/DropdownMenu.tsx b/components/vc-mentions/src/DropdownMenu.tsx
@@ -16,7 +16,6 @@ export default defineComponent({
       default: () => [],
     },
   },
-  slots: ['notFoundContent', 'option'],
   setup(props, { slots }) {
     const {
       activeIndex,
diff --git a/components/vc-mentions/src/KeywordTrigger.tsx b/components/vc-mentions/src/KeywordTrigger.tsx
@@ -55,7 +55,6 @@ export default defineComponent({
     getPopupContainer: Function,
     direction: String,
   },
-  slots: ['notFoundContent', 'option'],
   setup(props, { slots }) {
     const getDropdownPrefix = () => {
       return `${props.prefixCls}-dropdown`;
diff --git a/components/vc-mentions/src/Mentions.tsx b/components/vc-mentions/src/Mentions.tsx
@@ -37,7 +37,6 @@ export default defineComponent({
   name: 'Mentions',
   inheritAttrs: false,
   props: initDefaultProps(vcMentionsProps, defaultProps),
-  slots: ['notFoundContent', 'option'],
   emits: ['change', 'select', 'search', 'focus', 'blur', 'pressenter'],
   setup(props, { emit, attrs, expose, slots }) {
     const measure = ref(null);
diff --git a/components/vc-picker/Picker.tsx b/components/vc-picker/Picker.tsx
@@ -192,15 +192,6 @@ function Picker<DateType>() {
       'secondStep',
       'hideDisabledOptions',
     ] as any,
-    // slots: [
-    //   'suffixIcon',
-    //   'clearIcon',
-    //   'prevIcon',
-    //   'nextIcon',
-    //   'superPrevIcon',
-    //   'superNextIcon',
-    //   'panelRender',
-    // ],
     setup(props, { attrs, expose }) {
       const inputRef = ref(null);
       const picker = computed(() => props.picker ?? 'date');
diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx
@@ -37,7 +37,6 @@ const OptionList = defineComponent({
   compatConfig: { MODE: 3 },
   name: 'OptionList',
   inheritAttrs: false,
-  slots: ['option'],
   setup(_, { expose, slots }) {
     const baseProps = useBaseProps();
     const props = useSelectProps();
diff --git a/components/vc-slider/src/common/createSlider.tsx b/components/vc-slider/src/common/createSlider.tsx
@@ -43,7 +43,6 @@ export default function createSlider(Component) {
     name: 'CreateSlider',
     mixins: [BaseMixin, Component],
     inheritAttrs: false,
-    slots: ['mark'],
     props: initDefaultProps(propTypes, {
       prefixCls: 'rc-slider',
       min: 0,
diff --git a/components/vc-steps/Step.tsx b/components/vc-steps/Step.tsx
@@ -36,7 +36,6 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Step',
   props: VcStepProps(),
-  slots: ['title', 'subTitle', 'description', 'tailContent', 'stepIcon', 'progressDot'],
   emits: ['click', 'stepClick'],
   setup(props, { slots, emit }) {
     const onItemClick: EventHandler = e => {
diff --git a/components/vc-steps/Steps.tsx b/components/vc-steps/Steps.tsx
@@ -41,7 +41,6 @@ export default defineComponent({
     }).loose,
     stepIcon: Function,
   },
-  slots: ['stepIcon', 'progressDot'],
   emits: ['change'],
   setup(props, { slots, emit }) {
     const onStepClick = next => {
diff --git a/components/vc-table/Body/index.tsx b/components/vc-table/Body/index.tsx
@@ -32,7 +32,6 @@ export default defineComponent<BodyProps<any>>({
     'rowExpandable',
     'childrenColumnName',
   ] as any,
-  slots: ['emptyNode'],
   setup(props, { slots }) {
     const resizeContext = useInjectResize();
     const tableContext = useInjectTable();
diff --git a/components/vc-table/Cell/index.tsx b/components/vc-table/Cell/index.tsx
@@ -108,7 +108,6 @@ export default defineComponent<CellProps>({
     'cellType',
     'transformCellText',
   ] as any,
-  slots: ['appendNode'],
   setup(props, { slots }) {
     const contextSlots = useInjectSlots();
     const { onHover, startRow, endRow } = useInjectHover();
diff --git a/components/vc-table/Table.tsx b/components/vc-table/Table.tsx
@@ -192,7 +192,6 @@ export default defineComponent<TableProps<DefaultRecordType>>({
     'onUpdateInternalRefs',
     'transformCellText',
   ] as any,
-  slots: ['title', 'footer', 'summary', 'emptyText'],
   emits: ['expand', 'expandedRowsChange', 'updateInternalRefs', 'update:expandedRowKeys'],
   setup(props, { attrs, slots, emit }) {
     const mergedData = computed(() => props.data || EMPTY_DATA);
diff --git a/components/vc-tooltip/src/Content.tsx b/components/vc-tooltip/src/Content.tsx
@@ -14,7 +14,6 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Content',
   props: tooltipContentProps,
-  slots: ['overlay'],
   setup(props: TooltipContentProps, { slots }) {
     return () => (
       <div
diff --git a/components/vc-tooltip/src/Tooltip.tsx b/components/vc-tooltip/src/Tooltip.tsx
@@ -37,7 +37,6 @@ export default defineComponent({
     onVisibleChange: Function,
     onPopupAlign: Function,
   },
-  slots: ['arrowContent', 'overlay'],
   setup(props, { slots, attrs, expose }) {
     const triggerDOM = ref();
 
diff --git a/components/vc-tree-select/OptionList.tsx b/components/vc-tree-select/OptionList.tsx
@@ -35,7 +35,6 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'OptionList',
   inheritAttrs: false,
-  slots: ['notFoundContent', 'menuItemSelectedIcon'],
   setup(_, { slots, expose }) {
     const baseProps = useBaseProps();
     const legacyContext = useInjectLegacySelectContext();
diff --git a/components/vc-tree/MotionTreeNode.tsx b/components/vc-tree/MotionTreeNode.tsx
@@ -29,7 +29,6 @@ export default defineComponent({
     motionType: String,
     // treeNodeRequiredProps: { type: Object as PropType<TreeNodeRequiredProps> },
   },
-  slots: ['title', 'icon', 'switcherIcon', 'checkable'],
   setup(props, { attrs, slots }) {
     const visible = ref(true);
     const context = useInjectTreeContext();
diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
@@ -55,7 +55,6 @@ export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'Tree',
   inheritAttrs: false,
-  slots: ['checkable', 'title', 'icon', 'titleRender'],
   props: initDefaultProps(treeProps(), {
     prefixCls: 'vc-tree',
     showLine: false,
diff --git a/components/vc-tree/TreeNode.tsx b/components/vc-tree/TreeNode.tsx
@@ -29,7 +29,6 @@ export default defineComponent({
   inheritAttrs: false,
   props: treeNodeProps,
   isTreeNode: 1,
-  slots: ['title', 'icon', 'switcherIcon'],
   setup(props, { attrs, slots, expose }) {
     warning(
       !('slots' in props.data),
