Merge branch 'next' of https://github.com/vueComponent/ant-design-vue into next

components/_util/vue-types/index.ts

@@ -30,7 +30,7 @@ PropTypes.extend([
   },
 ]);
 
-export function withUndefined(type: any) {
+export function withUndefined<T extends { default?: any }>(type: T): T {
   type.default = undefined;
   return type;
 }

components/affix/index.tsx

@@ -198,7 +198,6 @@ const Affix = defineComponent({
       this.setState(newState);
     },
 
-    // @ts-ignore TS6133
     prepareMeasure() {
       this.setState({
         status: AffixStatus.Prepare,

components/anchor/Anchor.tsx

@@ -64,7 +64,7 @@ export interface AntAnchor {
   unregisterLink: (link: string) => void;
   $data: AnchorState;
   scrollTo: (link: string) => void;
-  $emit?: Function
+  $emit?: Function;
 }
 interface AnchorState {
   activeLink: null | string;
@@ -242,7 +242,9 @@ export default defineComponent({
         `${sPrefixCls}-link-title-active`,
       )[0];
       if (linkNode) {
-        (this.$refs.inkNode as HTMLElement).style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
+        (this.$refs.inkNode as HTMLElement).style.top = `${linkNode.offsetTop +
+          linkNode.clientHeight / 2 -
+          4.5}px`;
       }
     },
   },

components/auto-complete/index.tsx

@@ -45,7 +45,7 @@ const AutoComplete = defineComponent({
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
       popupRef: null,
-      select: null
+      select: null,
     };
   },
   created() {
@@ -86,7 +86,7 @@ const AutoComplete = defineComponent({
 
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('select', customizePrefixCls);
-    const { class: className} = this.$attrs as any;
+    const { class: className } = this.$attrs as any;
     const cls = {
       [className]: !!className,
       [`${prefixCls}-lg`]: size === 'large',

components/card/Card.tsx

@@ -17,8 +17,6 @@ export interface CardTabListType {
 }
 
 export type CardType = 'inner';
-const CardSize = tuple('default', 'small');
-export type CardSizeType = typeof CardSize[number];
 
 const { TabPane } = Tabs;
 
@@ -35,10 +33,7 @@ const Card = defineComponent({
     loading: PropTypes.looseBool.def(false),
     hoverable: PropTypes.looseBool.def(false),
     type: PropTypes.string,
-    size: {
+    size: PropTypes.oneOf(tuple('default', 'small')),
-      type: String as PropType<CardSizeType>,
-      validator: (val: CardSizeType) => CardSize.includes(val),
-    },
     actions: PropTypes.VNodeChild,
     tabList: {
       type: Array as PropType<CardTabListType[]>,

components/empty/index.tsx

@@ -1,6 +1,6 @@
 import { CSSProperties, VNodeTypes, inject, App, SetupContext, FunctionalComponent } from 'vue';
 import classNames from '../_util/classNames';
-import { defaultConfigProvider, ConfigConsumerProps } from '../config-provider';
+import { defaultConfigProvider } from '../config-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';
@@ -11,7 +11,7 @@ const defaultEmptyImg = <DefaultEmptyImg />;
 const simpleEmptyImg = <SimpleEmptyImg />;
 
 export interface TransferLocale {
-  description: string;
+  description?: string;
 }
 
 export interface EmptyProps {
@@ -31,7 +31,7 @@ interface EmptyType extends FunctionalComponent<EmptyProps> {
 }
 
 const Empty: EmptyType = (props: EmptyProps, { slots = {}, attrs }: SetupContext) => {
-  const configProvider = inject<ConfigConsumerProps>('configProvider', defaultConfigProvider);
+  const configProvider = inject('configProvider', defaultConfigProvider);
   const { getPrefixCls, direction } = configProvider;
   const {
     prefixCls: customizePrefixCls,

components/locale-provider/LocaleReceiver.tsx

@@ -1,4 +1,5 @@
 import { inject, defineComponent, VNodeTypes, PropType } from 'vue';
+import PropTypes from '../_util/vue-types';
 import defaultLocaleData from './default';
 import { Locale } from '.';
 
@@ -12,12 +13,14 @@ interface LocaleInterface {
   [key: string]: any;
 }
 
+export interface LocaleReceiverContext {
+  antLocale?: LocaleInterface;
+}
+
 export default defineComponent({
   name: 'LocaleReceiver',
   props: {
-    componentName: {
+    componentName: PropTypes.string,
-      type: String,
-    },
     defaultLocale: {
       type: [Object, Function],
     },
@@ -29,7 +32,7 @@ export default defineComponent({
   },
   setup() {
     return {
-      localeData: inject('localeData', {}),
+      localeData: inject<LocaleReceiverContext>('localeData', {}),
     };
   },
   methods: {

components/locale-provider/index.tsx

@@ -1,4 +1,4 @@
-import { provide, App, defineComponent, VNode } from 'vue';
+import { provide, App, defineComponent, VNode, PropType } from 'vue';
 import PropTypes from '../_util/vue-types';
 import moment from 'moment';
 import interopDefault from '../_util/interopDefault';
@@ -39,7 +39,7 @@ const LocaleProvider = defineComponent({
   name: 'ALocaleProvider',
   props: {
     locale: {
-      type: Object,
+      type: Object as PropType<Locale>,
     },
     ANT_MARK__: PropTypes.string,
   },

components/tabs/TabBar.tsx

@@ -1,22 +1,27 @@
+import { defineComponent, PropType } from 'vue';
+import { tuple } from '../_util/type';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import LeftOutlined from '@ant-design/icons-vue/LeftOutlined';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar';
-import PropTypes, { withUndefined } from '../_util/vue-types';
+import PropTypes from '../_util/vue-types';
 
-const TabBar = {
+const TabBar = defineComponent({
   name: 'TabBar',
   inheritAttrs: false,
   props: {
     prefixCls: PropTypes.string,
-    tabBarStyle: PropTypes.object,
+    tabBarStyle: PropTypes.style,
-    tabBarExtraContent: PropTypes.any,
+    tabBarExtraContent: PropTypes.VNodeChild,
-    type: PropTypes.oneOf(['line', 'card', 'editable-card']),
+    type: PropTypes.oneOf(tuple('line', 'card', 'editable-card')),
-    tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),
+    tabPosition: PropTypes.oneOf(tuple('top', 'right', 'bottom', 'left')).def('top'),
-    tabBarPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    tabBarPosition: PropTypes.oneOf(tuple('top', 'right', 'bottom', 'left')),
-    size: PropTypes.oneOf(['default', 'small', 'large']),
+    size: PropTypes.oneOf(tuple('default', 'small', 'large')),
-    animated: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
+    animated: {
+      type: [Boolean, Object] as PropType<boolean | { inkBar: boolean; tabPane: boolean }>,
+      default: undefined,
+    },
     renderTabBar: PropTypes.func,
     panels: PropTypes.array.def([]),
     activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -56,7 +61,7 @@ const TabBar = {
     );
     // Additional className for style usage
     const cls = {
-      [this.$attrs.class]: this.$attrs.class,
+      [this.$attrs.class as string]: this.$attrs.class,
       [`${prefixCls}-${tabPosition}-bar`]: true,
       [`${prefixCls}-${size}-bar`]: !!size,
       [`${prefixCls}-card-bar`]: type && type.indexOf('card') >= 0,
@@ -80,6 +85,6 @@ const TabBar = {
       return <ScrollableInkTabBar {...renderProps} />;
     }
   },
-};
+});
 
 export default TabBar;

components/tabs/index.ts

@@ -1,3 +1,4 @@
+import { App } from 'vue';
 import Tabs from './tabs';
 import TabPane from '../vc-tabs/src/TabPane';
 import TabContent from '../vc-tabs/src/TabContent';
@@ -6,7 +7,7 @@ Tabs.TabPane = { ...TabPane, name: 'ATabPane', __ANT_TAB_PANE: true };
 Tabs.TabContent = { ...TabContent, name: 'ATabContent' };
 
 /* istanbul ignore next */
-Tabs.install = function(app) {
+Tabs.install = function(app: App) {
   app.component(Tabs.name, Tabs);
   app.component(Tabs.TabPane.name, Tabs.TabPane);
   app.component(Tabs.TabContent.name, Tabs.TabContent);

components/tabs/tabs.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, inject } from 'vue';
+import { defineComponent, inject, PropType } from 'vue';
+import { tuple } from '../_util/type';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import PlusOutlined from '@ant-design/icons-vue/PlusOutlined';
 import VcTabs, { TabPane } from '../vc-tabs/src';
@@ -30,19 +31,29 @@ export default defineComponent({
     tabBarStyle: PropTypes.object,
     tabBarExtraContent: PropTypes.any,
     destroyInactiveTabPane: PropTypes.looseBool.def(false),
-    type: PropTypes.oneOf(['line', 'card', 'editable-card']),
+    type: PropTypes.oneOf(tuple('line', 'card', 'editable-card')),
     tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),
     size: PropTypes.oneOf(['default', 'small', 'large']),
     animated: withUndefined(PropTypes.oneOfType([PropTypes.looseBool, PropTypes.object])),
     tabBarGutter: PropTypes.number,
     renderTabBar: PropTypes.func,
-    onChange: PropTypes.func,
+    onChange: {
-    onTabClick: PropTypes.func,
+      type: Function as PropType<(activeKey: string) => void>,
-    onPrevClick: PropTypes.func,
-    onNextClick: PropTypes.func,
-    onEdit: PropTypes.func,
-    'onUpdate:activeKey': PropTypes.func,
     },
+    onTabClick: PropTypes.func,
+    onPrevClick: {
+      type: Function as PropType<(e: MouseEvent) => void>,
+    },
+    onNextClick: {
+      type: Function as PropType<(e: MouseEvent) => void>,
+    },
+    onEdit: {
+      type: Function as PropType<
+        (targetKey: string | MouseEvent, action: 'add' | 'remove') => void
+      >,
+    },
+  },
+  emits: ['update:activeKey', 'edit', 'change'],
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
@@ -56,17 +67,17 @@ export default defineComponent({
     }
   },
   methods: {
-    removeTab(targetKey, e) {
+    removeTab(targetKey: string, e: MouseEvent) {
       e.stopPropagation();
       if (isValid(targetKey)) {
         this.$emit('edit', targetKey, 'remove');
       }
     },
-    handleChange(activeKey) {
+    handleChange(activeKey: string) {
       this.$emit('update:activeKey', activeKey);
       this.$emit('change', activeKey);
     },
-    createNewTab(targetKey) {
+    createNewTab(targetKey: MouseEvent) {
       this.$emit('edit', targetKey, 'add');
     },
   },
@@ -95,7 +106,7 @@ export default defineComponent({
       tabPaneAnimated = 'animated' in props ? tabPaneAnimated : false;
     }
     const cls = {
-      [className]: className,
+      [className as string]: className,
       [`${prefixCls}-vertical`]: tabPosition === 'left' || tabPosition === 'right',
       [`${prefixCls}-${size}`]: !!size,
       [`${prefixCls}-card`]: type.indexOf('card') >= 0,
@@ -107,7 +118,7 @@ export default defineComponent({
     if (type === 'editable-card') {
       childrenWithClose = [];
       children.forEach((child, index) => {
-        const props = getPropsData(child);
+        const props = getPropsData(child) as any;
         let closable = props.closable;
         closable = typeof closable === 'undefined' ? true : closable;
         const closeIcon = closable ? (

components/vc-select2/OptGroup.tsx

@@ -2,7 +2,7 @@ import { FunctionalComponent } from 'vue';
 
 import { OptionGroupData } from './interface';
 
-export interface OptGroupProps extends Omit<OptionGroupData, 'options'> {}
+export type OptGroupProps = Omit<OptionGroupData, 'options'>;
 
 export interface OptionGroupFC extends FunctionalComponent<OptGroupProps> {
   /** Legacy for check if is a Option Group */

components/vc-select2/generate.tsx

@@ -254,7 +254,7 @@ export default function generateSelector<
       const mergedId = computed(() => props.id || `rc_select_${getUUID()}`);
 
       // optionLabelProp
-      let mergedOptionLabelProp = computed(() => {
+      const mergedOptionLabelProp = computed(() => {
         let mergedOptionLabelProp = props.optionLabelProp;
         if (mergedOptionLabelProp === undefined) {
           mergedOptionLabelProp = props.options ? 'label' : 'children';
@@ -554,7 +554,7 @@ export default function generateSelector<
       // ============================== Open ==============================
 
       const innerOpen = ref(undefined);
-      let mergedOpen = ref(undefined);
+      const mergedOpen = ref(undefined);
       const setInnerOpen = (val: boolean) => {
         innerOpen.value = val;
         mergedOpen.value = innerOpen.value;

components/vc-tabs/src/ScrollableInkTabBar.jsx

@@ -1,10 +1,11 @@
+import { defineComponent } from 'vue';
 import InkTabBarNode from './InkTabBarNode';
 import TabBarTabsNode from './TabBarTabsNode';
 import TabBarRootNode from './TabBarRootNode';
 import ScrollableTabBarNode from './ScrollableTabBarNode';
 import SaveRef from './SaveRef';
 
-export default {
+export default defineComponent({
   name: 'ScrollableInkTabBar',
   inheritAttrs: false,
   render() {
@@ -22,4 +23,4 @@ export default {
       />
     );
   },
-};
+});