chore: merge next

.eslintrc

@@ -11,7 +11,7 @@
     "parser": "babel-eslint"
   },
   "extends": ["plugin:vue/vue3-recommended", "prettier"],
-  "plugins": ["markdown"],
+  "plugins": ["markdown", "jest"],
   "overrides": [
     {
       "files": ["**/demo/*.md"],
@@ -30,6 +30,7 @@
       "rules": {
         "@typescript-eslint/no-explicit-any": 0,
         "@typescript-eslint/ban-types": 0,
+        "@typescript-eslint/consistent-type-imports": 1,
         "@typescript-eslint/explicit-module-boundary-types": 0,
         "@typescript-eslint/no-empty-function": 0,
         "@typescript-eslint/no-non-null-assertion": 0,

.prettierrc

@@ -3,6 +3,7 @@
   "trailingComma": "all",
   "printWidth": 100,
   "proseWrap": "never",
+  "arrowParens": "avoid",
   "overrides": [
     {
       "files": ".prettierrc",

CHANGELOG.en-US.md

@@ -10,6 +10,46 @@
 
 ---
 
+## 2.2.0-rc.1
+
+`2021-06-29`
+
+- 🌟 Change babel configuration, smaller build package size
+- 🌟 Form provides the useForm function natively, and we will deprecate the @ant-design-vue/use library
+- 🐞 Fix the issue that the Form validateFirst property does not trigger reject when there are multiple validation rules [#4273](https://github.com/vueComponent/ant-design-vue/issues/4273)
+- 🐞 Fix List circular references causing errors in Vite [#4263](https://github.com/vueComponent/ant-design-vue/issues/4263)
+- 🐞 Fix the missing item attribute problem in Menu event callback [#4290](https://github.com/vueComponent/ant-design-vue/issues/4290)
+
+## 2.2.0-beta.6
+
+`2021-06-26`
+
+- 🌟 Menu performance optimization [e8b957](https://github.com/vueComponent/ant-design-vue/commit/e8b95784eb1ee0554b0d6b17bdc14e18775f2ae6)
+- 🐞 Fix `Layout` `RangePicker` `WeekPicker` `Textarea` on-demand loading failure
+
+## 2.2.0-beta.5
+
+`2021-06-24`
+
+- 🎉 Support vite-plugin-components to be loaded on demand
+- 🎉 Refactor the List component
+- 🌟 Select adds responsive folding option [656d14](https://github.com/vueComponent/ant-design-vue/commit/656d14fc4e4ef0f781324438f0d58cfb6816d583)
+- 🐞 Fix the problem that the virtual list cannot be scrolled when the Select dynamic update option [b2aa49d](https://github.com/vueComponent/ant-design-vue/commit/b2aa49d064a83c6ce786a6bb4cd9fc5266a5964d)
+- 🐞 Fix the incorrect location of Select keyboard events [604372](https://github.com/vueComponent/ant-design-vue/commit/604372ff2da521dd580ad5229f7dbd445c1c6190)
+- 🐞 Fix the issue that AutoComplete does not support options slot [#4012](https://github.com/vueComponent/ant-design-vue/issues/4012)
+
+## 2.2.0-beta.4
+
+`2021-06-21`
+
+- 🎉 Refactor Descriptions component [#4219](https://github.com/vueComponent/ant-design-vue/issues/4219)
+- 🐞 Fix the issue that Countdown does not trigger the finish event [#4222](https://github.com/vueComponent/ant-design-vue/issues/4222)
+- 🐞 Fix ConfigProvider reporting errors under vue 3.1 [#4225](https://github.com/vueComponent/ant-design-vue/issues/4225)
+- 🐞 Fix the problem of using SubMenu under Dropdown to report an error [#4205](https://github.com/vueComponent/ant-design-vue/issues/4205)
+- 🐞 Fix Col type error [#4226](https://github.com/vueComponent/ant-design-vue/issues/4226)
+- 🐞 Fix the problem that onEnd is not triggered when Typography is out of focus [#4227](https://github.com/vueComponent/ant-design-vue/issues/4227)
+- 🐞 Fix ImagePreview style loss problem [#4231](https://github.com/vueComponent/ant-design-vue/issues/4231)
+
 ## 2.2.0-beta.3
 
 `2021-06-11`

CHANGELOG.zh-CN.md

@@ -10,6 +10,46 @@
 
 ---
 
+## 2.2.0-rc.1
+
+`2021-06-29`
+
+- 🌟 更改 babel 配置，较小构建包大小
+- 🌟 Form 原生提供 useForm 功能，废弃 @ant-design-vue/use 库
+- 🐞 修复 Form validateFirst 属性在多个校验规则时不触发 reject 问题 [#4273](https://github.com/vueComponent/ant-design-vue/issues/4273)
+- 🐞 修复 List 循环引用导致 Vite 下报错问题 [#4263](https://github.com/vueComponent/ant-design-vue/issues/4263)
+- 🐞 修复 Menu 事件回调缺少 item 属性问题 [#4290](https://github.com/vueComponent/ant-design-vue/issues/4290)
+
+## 2.2.0-beta.6
+
+`2021-06-26`
+
+- 🌟 Menu 性能优化 [e8b957](https://github.com/vueComponent/ant-design-vue/commit/e8b95784eb1ee0554b0d6b17bdc14e18775f2ae6)
+- 🐞 修复 Layout、RangePicker、WeekPicker、Textarea 按需加载失效
+
+## 2.2.0-beta.5
+
+`2021-06-24`
+
+- 🎉 支持 vite-plugin-components 按需加载
+- 🎉 重构 List 组件
+- 🌟 Select 新增响应式折叠选项 [656d14](https://github.com/vueComponent/ant-design-vue/commit/656d14fc4e4ef0f781324438f0d58cfb6816d583)
+- 🐞 修复 Select 动态更新选项时虚拟列表无法滚动问题 [b2aa49d](https://github.com/vueComponent/ant-design-vue/commit/b2aa49d064a83c6ce786a6bb4cd9fc5266a5964d)
+- 🐞 修复 Select 键盘事件位置不正确问题 [604372](https://github.com/vueComponent/ant-design-vue/commit/604372ff2da521dd580ad5229f7dbd445c1c6190)
+- 🐞 修复 AutoComplete 不支持 options slot 问题 [#4012](https://github.com/vueComponent/ant-design-vue/issues/4012)
+
+## 2.2.0-beta.4
+
+`2021-06-21`
+
+- 🎉 重构 Descriptions 组件 [#4219](https://github.com/vueComponent/ant-design-vue/issues/4219)
+- 🐞 修复 Countdown 不触发 finish 事件问题 [#4222](https://github.com/vueComponent/ant-design-vue/issues/4222)
+- 🐞 修复 ConfigProvider 在 vue 3.1 下报错问题 [#4225](https://github.com/vueComponent/ant-design-vue/issues/4225)
+- 🐞 修复 Dropdown 下使用 SubMenu 报错问题 [#4205](https://github.com/vueComponent/ant-design-vue/issues/4205)
+- 🐞 修复 Col 类型错误 [#4226](https://github.com/vueComponent/ant-design-vue/issues/4226)
+- 🐞 修复 Typography 失焦时不触发 onEnd 问题 [#4227](https://github.com/vueComponent/ant-design-vue/issues/4227)
+- 🐞 修复 ImagePreview 样式丢失问题 [#4231](https://github.com/vueComponent/ant-design-vue/issues/4231)
+
 ## 2.2.0-beta.3
 
 `2021-06-11`

README-zh_CN.md

@@ -35,7 +35,7 @@ An enterprise-class UI components based on Ant Design and Vue 3.
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## 安装
 

README.md

@@ -35,7 +35,7 @@ English | [简体中文](./README-zh_CN.md)
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Electron |
 | --- | --- | --- | --- | --- | --- |
-| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
+| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
 
 ## Using npm or yarn
 

antd-tools/getBabelCommonConfig.js

@@ -1,6 +1,6 @@
 const { resolve } = require('./utils/projectHelper');
 
-module.exports = function(modules) {
+module.exports = function (modules) {
   const plugins = [
     [
       resolve('@babel/plugin-transform-typescript'),
@@ -16,6 +16,13 @@ module.exports = function(modules) {
     resolve('@babel/plugin-proposal-export-namespace-from'),
     resolve('@babel/plugin-proposal-class-properties'),
     resolve('@babel/plugin-syntax-dynamic-import'),
+    [
+      resolve('@babel/plugin-transform-runtime'),
+      {
+        useESModules: modules === false,
+        version: '^7.10.4',
+      },
+    ],
     // resolve('babel-plugin-inline-import-data-uri'),
     // resolve('@babel/plugin-transform-member-expression-literals'),
     // resolve('@babel/plugin-transform-property-literals'),
@@ -25,12 +32,6 @@ module.exports = function(modules) {
     // resolve('@babel/plugin-proposal-object-rest-spread'),
     // resolve('@babel/plugin-proposal-class-properties'),
   ];
-  plugins.push([
-    resolve('@babel/plugin-transform-runtime'),
-    {
-      helpers: false,
-    },
-  ]);
   return {
     presets: [
       [
@@ -38,14 +39,7 @@ module.exports = function(modules) {
         {
           modules,
           targets: {
-            browsers: [
+            browsers: ['last 2 versions', 'Firefox ESR', '> 1%', 'not ie 11'],
-              'last 2 versions',
-              'Firefox ESR',
-              '> 1%',
-              'ie >= 11',
-              'iOS >= 8',
-              'Android >= 4',
-            ],
           },
         },
       ],

components/_util/colors.ts

@@ -1,4 +1,5 @@
-import { ElementOf, tuple } from './type';
+import type { ElementOf } from './type';
+import { tuple } from './type';
 
 export const PresetStatusColorTypes = tuple('success', 'processing', 'error', 'default', 'warning');
 

components/_util/component-classes.ts

@@ -163,6 +163,6 @@ export class ClassList {
  * @return {ClassList}
  * @api public
  */
-export default function(el: Element): ClassList {
+export default function (el: Element): ClassList {
   return new ClassList(el);
 }

components/_util/copy-to-clipboard/index.ts

@@ -52,7 +52,7 @@ function copy(text: string, options?: Options): boolean {
     mark.style.MozUserSelect = 'text';
     mark.style.msUserSelect = 'text';
     mark.style.userSelect = 'text';
-    mark.addEventListener('copy', function(e) {
+    mark.addEventListener('copy', function (e) {
       e.stopPropagation();
       if (options.format) {
         e.preventDefault();

components/_util/copy-to-clipboard/toggle-selection.ts

@@ -3,7 +3,7 @@
 const deselectCurrent = (): (() => void) => {
   const selection = document.getSelection();
   if (!selection.rangeCount) {
-    return function() {};
+    return function () {};
   }
   let active = document.activeElement as any;
 
@@ -26,11 +26,11 @@ const deselectCurrent = (): (() => void) => {
   }
 
   selection.removeAllRanges();
-  return function() {
+  return function () {
     selection.type === 'Caret' && selection.removeAllRanges();
 
     if (!selection.rangeCount) {
-      ranges.forEach(function(range) {
+      ranges.forEach(function (range) {
         selection.addRange(range);
       });
     }

components/_util/dom-closest.js

@@ -11,7 +11,7 @@ import matches from './dom-matches';
  * @param context {Element=}
  * @return {Element}
  */
-export default function(element, selector, context) {
+export default function (element, selector, context) {
   context = context || document;
   // guard against orphans
   element = { parentNode: element };

components/_util/getRequestAnimationFrame.js

@@ -2,10 +2,10 @@ const availablePrefixs = ['moz', 'ms', 'webkit'];
 
 function requestAnimationFramePolyfill() {
   let lastTime = 0;
-  return function(callback) {
+  return function (callback) {
     const currTime = new Date().getTime();
     const timeToCall = Math.max(0, 16 - (currTime - lastTime));
-    const id = window.setTimeout(function() {
+    const id = window.setTimeout(function () {
       callback(currTime + timeToCall);
     }, timeToCall);
     lastTime = currTime + timeToCall;

components/_util/hooks/useBreakpoint.ts

@@ -1,5 +1,7 @@
-import { onMounted, onUnmounted, Ref, ref } from 'vue';
+import type { Ref } from 'vue';
-import ResponsiveObserve, { ScreenMap } from '../../_util/responsiveObserve';
+import { onMounted, onUnmounted, ref } from 'vue';
+import type { ScreenMap } from '../../_util/responsiveObserve';
+import ResponsiveObserve from '../../_util/responsiveObserve';
 
 function useBreakpoint(): Ref<ScreenMap> {
   const screens = ref<ScreenMap>({});

components/_util/hooks/useConfigInject.ts

@@ -1,11 +1,8 @@
-import { RequiredMark } from '../../form/Form';
+import type { RequiredMark } from '../../form/Form';
-import { computed, ComputedRef, inject, UnwrapRef } from 'vue';
+import type { ComputedRef, UnwrapRef, VNodeChild } from 'vue';
-import {
+import { computed, inject } from 'vue';
-  ConfigProviderProps,
+import type { ConfigProviderProps, Direction, SizeType } from '../../config-provider';
-  defaultConfigProvider,
+import { defaultConfigProvider } from '../../config-provider';
-  Direction,
-  SizeType,
-} from '../../config-provider';
 
 export default (
   name: string,
@@ -22,6 +19,7 @@ export default (
     requiredMark?: RequiredMark;
   }>;
   autoInsertSpaceInButton: ComputedRef<Boolean>;
+  renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
     'configProvider',
@@ -30,6 +28,7 @@ export default (
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
   const direction = computed(() => configProvider.direction);
   const autoInsertSpaceInButton = computed(() => configProvider.autoInsertSpaceInButton);
+  const renderEmpty = computed(() => configProvider.renderEmpty);
   const space = computed(() => configProvider.space);
   const pageHeader = computed(() => configProvider.pageHeader);
   const form = computed(() => configProvider.form);
@@ -45,5 +44,6 @@ export default (
     pageHeader,
     form,
     autoInsertSpaceInButton,
+    renderEmpty,
   };
 };

components/_util/hooks/useMemo.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue';
+import { ref, watch } from 'vue';
+
+export default function useMemo<T>(
+  getValue: () => T,
+  condition: any[],
+  shouldUpdate?: (prev: any[], next: any[]) => boolean,
+) {
+  const cacheRef: Ref<T> = ref(getValue() as any);
+  watch(condition, (next, pre) => {
+    if (shouldUpdate) {
+      if (shouldUpdate(next, pre)) {
+        cacheRef.value = getValue();
+      }
+    } else {
+      cacheRef.value = getValue();
+    }
+  });
+
+  return cacheRef;
+}

components/_util/hooks/usePrefixCls.ts

@@ -1,4 +1,5 @@
-import { computed, ComputedRef, inject } from 'vue';
+import type { ComputedRef } from 'vue';
+import { computed, inject } from 'vue';
 import { defaultConfigProvider } from '../../config-provider';
 
 export default (name: string, props: Record<any, any>): ComputedRef<string> => {

components/_util/hooks/useRef.ts

@@ -1,4 +1,5 @@
-import { onBeforeUpdate, ref, Ref } from 'vue';
+import type { Ref } from 'vue';
+import { onBeforeUpdate, ref } from 'vue';
 
 export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
 

components/_util/hooks/useSize.ts

@@ -1,5 +1,7 @@
-import { computed, ComputedRef, inject, provide, UnwrapRef } from 'vue';
+import type { ComputedRef, UnwrapRef } from 'vue';
-import { ConfigProviderProps, defaultConfigProvider, SizeType } from '../../config-provider';
+import { computed, inject, provide } from 'vue';
+import type { ConfigProviderProps, SizeType } from '../../config-provider';
+import { defaultConfigProvider } from '../../config-provider';
 
 const sizeProvider = Symbol('SizeProvider');
 
@@ -18,7 +20,7 @@ const useInjectSize = <T = SizeType>(props?: Record<any, any>): ComputedRef<T> =
     ? computed(() => props.size)
     : inject(
         sizeProvider,
-        computed(() => ('default' as unknown) as T),
+        computed(() => 'default' as unknown as T),
       );
   return size;
 };

components/_util/json2mq.js

@@ -3,23 +3,23 @@
  * https://github.com/akiran/json2mq.git
  */
 
-const camel2hyphen = function(str) {
+const camel2hyphen = function (str) {
   return str
-    .replace(/[A-Z]/g, function(match) {
+    .replace(/[A-Z]/g, function (match) {
       return '-' + match.toLowerCase();
     })
     .toLowerCase();
 };
 
-const isDimension = function(feature) {
+const isDimension = function (feature) {
   const re = /[height|width]$/;
   return re.test(feature);
 };
 
-const obj2mq = function(obj) {
+const obj2mq = function (obj) {
   let mq = '';
   const features = Object.keys(obj);
-  features.forEach(function(feature, index) {
+  features.forEach(function (feature, index) {
     let value = obj[feature];
     feature = camel2hyphen(feature);
     // Add px to dimension features
@@ -40,14 +40,14 @@ const obj2mq = function(obj) {
   return mq;
 };
 
-export default function(query) {
+export default function (query) {
   let mq = '';
   if (typeof query === 'string') {
     return query;
   }
   // Handling array of media queries
   if (query instanceof Array) {
-    query.forEach(function(q, index) {
+    query.forEach(function (q, index) {
       mq += obj2mq(q);
       if (index < query.length - 1) {
         mq += ', ';

components/_util/props-util/index.js

@@ -28,7 +28,7 @@ const parseStyleText = (cssText = '', camel) => {
   const res = {};
   const listDelimiter = /;(?![^(]*\))/g;
   const propertyDelimiter = /:(.+)/;
-  cssText.split(listDelimiter).forEach(function(item) {
+  cssText.split(listDelimiter).forEach(function (item) {
     if (item) {
       const tmp = item.split(propertyDelimiter);
       if (tmp.length > 1) {
@@ -333,6 +333,10 @@ export function isFragment(c) {
   return c.length === 1 && c[0].type === Fragment;
 }
 
+export function isEmptyContent(c) {
+  return c === undefined || c === null || c === '' || (Array.isArray(c) && c.length === 0);
+}
+
 export function isEmptyElement(c) {
   return (
     c.type === Comment ||

components/_util/props-util/initDefaultProps.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
-import { VueTypeValidableDef, VueTypeDef } from 'vue-types';
+import type { VueTypeValidableDef, VueTypeDef } from 'vue-types';
 
 const initDefaultProps = <T>(
   types: T,

components/_util/setStyle.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue';
 
 /**
  * Easy to set element style, return previous style

components/_util/shallowequal.js

@@ -45,6 +45,6 @@ function shallowEqual(objA, objB, compare, compareContext) {
   return true;
 }
 
-export default function(value, other, customizer, thisArg) {
+export default function (value, other, customizer, thisArg) {
   return shallowEqual(toRaw(value), toRaw(other), customizer, thisArg);
 }

components/_util/throttleByAnimationFrame.ts

@@ -19,7 +19,7 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
 
 export function throttleByAnimationFrameDecorator() {
   // eslint-disable-next-line func-names
-  return function(target: any, key: string, descriptor: any) {
+  return function (target: any, key: string, descriptor: any) {
     const fn = descriptor.value;
     let definingProperty = false;
     return {

components/_util/transButton.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, CSSProperties, ref, onMounted } from 'vue';
+import type { CSSProperties } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 /**
  * Wrap of sub component which need use as Button capacity (like Icon component).
  * This helps accessibility reader to tread as a interactive button to operation.

components/_util/transition.tsx

@@ -1,13 +1,6 @@
-import {
+import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
-  BaseTransitionProps,
+import { getCurrentInstance, onUpdated } from 'vue';
-  CSSProperties,
+import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
-  defineComponent,
-  nextTick,
-  Ref,
-  Transition as T,
-  TransitionGroup as TG,
-} from 'vue';
-import { findDOMNode } from './props-util';
 
 export const getTransitionProps = (transitionName: string, opt: object = {}) => {
   if (process.env.NODE_ENV === 'test') {
@@ -53,23 +46,30 @@ let Transition = T;
 let TransitionGroup = TG;
 
 if (process.env.NODE_ENV === 'test') {
-  Transition = (props, { slots }) => {
+  Transition = defineComponent({
-    const child = slots.default?.()[0];
+    name: 'TransitionForTest',
-    if (child && child.dirs && child.dirs[0]) {
+    inheritAttrs: false,
-      const value = child.dirs[0].value;
+    setup(_props, { slots, attrs }) {
-      const oldValue = child.dirs[0].oldValue;
+      const instance = getCurrentInstance();
-      if (!value && value !== oldValue) {
+      onUpdated(() => {
-        nextTick(() => {
+        const child = instance.subTree.children[0];
-          if (props.onAfterLeave) {
+        if (child && child.dirs && child.dirs[0]) {
-            props.onAfterLeave(findDOMNode(this));
+          const value = child.dirs[0].value;
+          const oldValue = child.dirs[0].oldValue;
+          if (!value && value !== oldValue) {
+            nextTick(() => {
+              if (attrs.onAfterLeave) {
+                (attrs as any).onAfterLeave(instance.vnode.el);
+              }
+            });
           }
-        });
+        }
-      }
+      });
-    }
+      return () => {
-    return slots.default?.();
+        return slots.default?.();
-  };
+      };
-  Transition.displayName = 'TransitionForTest';
+    },
-  Transition.inheritAttrs = false;
+  }) as any;
   TransitionGroup = defineComponent({
     name: 'TransitionGroupForTest',
     inheritAttrs: false,

components/_util/type.ts

@@ -1,4 +1,4 @@
-import { App, PropType, VNodeChild, Plugin } from 'vue';
+import type { App, PropType, VNodeChild, Plugin } from 'vue';
 
 export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead
@@ -34,7 +34,7 @@ export type VueNode = VNodeChild | JSX.Element;
 
 export const withInstall = <T>(comp: T) => {
   const c = comp as any;
-  c.install = function(app: App) {
+  c.install = function (app: App) {
     app.component(c.displayName || c.name, comp);
   };
 

components/_util/vue-types/index.ts

@@ -1,6 +1,7 @@
-import { CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue';
-import { createTypes, VueTypeValidableDef, VueTypesInterface } from 'vue-types';
+import type { VueTypeValidableDef, VueTypesInterface } from 'vue-types';
-import { VueNode } from '../type';
+import { createTypes } from 'vue-types';
+import type { VueNode } from '../type';
 const PropTypes = createTypes({
   func: undefined,
   bool: undefined,

components/affix/index.tsx

@@ -1,5 +1,5 @@
+import type { CSSProperties, ExtractPropTypes } from 'vue';
 import {
-  CSSProperties,
   defineComponent,
   ref,
   reactive,
@@ -9,7 +9,6 @@ import {
   computed,
   onUnmounted,
   onUpdated,
-  ExtractPropTypes,
 } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from '../_util/classNames';

components/affix/utils.ts

@@ -1,5 +1,5 @@
 import addEventListener from '../vc-util/Dom/addEventListener';
-import { ComponentPublicInstance } from 'vue';
+import type { ComponentPublicInstance } from 'vue';
 import supportsPassive from '../_util/supportsPassive';
 
 export type BindElement = HTMLElement | Window | null | undefined;

components/alert/index.tsx

@@ -1,4 +1,5 @@
-import { inject, cloneVNode, defineComponent, ref, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { inject, cloneVNode, defineComponent, ref } from 'vue';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';

components/anchor/Anchor.tsx

@@ -1,3 +1,4 @@
+import type { ExtractPropTypes } from 'vue';
 import {
   defineComponent,
   nextTick,
@@ -6,7 +7,6 @@ import {
   onUpdated,
   reactive,
   ref,
-  ExtractPropTypes,
   computed,
 } from 'vue';
 import PropTypes from '../_util/vue-types';
@@ -88,7 +88,7 @@ export default defineComponent({
       scrollEvent: null,
       animating: false,
     });
-    const activeLink = ref();
+    const activeLink = ref(null);
     const getContainer = computed(() => {
       const { getContainer } = props;
       return getContainer || getTargetContainer.value || getDefaultContainer;
@@ -122,7 +122,7 @@ export default defineComponent({
     };
     const setCurrentActiveLink = (link: string) => {
       const { getCurrentAnchor } = props;
-      if (activeLink.value !== link) {
+      if (activeLink.value === link) {
         return;
       }
       activeLink.value = typeof getCurrentAnchor === 'function' ? getCurrentAnchor() : link;
@@ -175,9 +175,9 @@ export default defineComponent({
         `${prefixCls.value}-link-title-active`,
       )[0];
       if (linkNode) {
-        (inkNodeRef.value as HTMLElement).style.top = `${linkNode.offsetTop +
+        (inkNodeRef.value as HTMLElement).style.top = `${
-          linkNode.clientHeight / 2 -
+          linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5
-          4.5}px`;
+        }px`;
       }
     };
 

components/anchor/AnchorLink.tsx

@@ -1,11 +1,5 @@
-import {
+import type { ExtractPropTypes } from 'vue';
-  defineComponent,
+import { defineComponent, nextTick, onBeforeUnmount, onMounted, watch } from 'vue';
-  ExtractPropTypes,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  watch,
-} from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import classNames from '../_util/classNames';

components/anchor/context.ts

@@ -1,4 +1,5 @@
-import { computed, Ref, inject, InjectionKey, provide } from 'vue';
+import type { Ref, InjectionKey } from 'vue';
+import { computed, inject, provide } from 'vue';
 
 export interface AnchorContext {
   registerLink: (link: string) => void;

components/anchor/index.tsx

@@ -1,11 +1,11 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Anchor, { AnchorProps } from './Anchor';
 import AnchorLink, { AnchorLinkProps } from './AnchorLink';
 
 Anchor.Link = AnchorLink;
 
 /* istanbul ignore next */
-Anchor.install = function(app: App) {
+Anchor.install = function (app: App) {
   app.component(Anchor.name, Anchor);
   app.component(Anchor.Link.name, Anchor.Link);
   return app;

components/auto-complete/OptGroup.tsx

@@ -0,0 +1,14 @@
+import type { FunctionalComponent } from 'vue';
+import type { OptionGroupData } from '../vc-select/interface';
+
+export type OptGroupProps = Omit<OptionGroupData, 'options'>;
+
+export interface OptionGroupFC extends FunctionalComponent<OptGroupProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOptGroup: boolean;
+}
+
+const OptGroup: OptionGroupFC = () => null;
+OptGroup.isSelectOptGroup = true;
+OptGroup.displayName = 'AAutoCompleteOptGroup';
+export default OptGroup;

components/auto-complete/Option.tsx

@@ -0,0 +1,17 @@
+import type { FunctionalComponent } from 'vue';
+import type { OptionCoreData } from '../vc-select/interface';
+
+export interface OptionProps extends Omit<OptionCoreData, 'label'> {
+  /** Save for customize data */
+  [prop: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+}
+
+export interface OptionFC extends FunctionalComponent<OptionProps> {
+  /** Legacy for check if is a Option Group */
+  isSelectOption: boolean;
+}
+
+const Option: OptionFC = () => null;
+Option.isSelectOption = true;
+Option.displayName = 'AAutoCompleteOption';
+export default Option;

components/auto-complete/__tests__/index.test.js

@@ -13,7 +13,10 @@ describe('AutoComplete with Custom Input Element Render', () => {
       {
         render() {
           return (
-            <AutoComplete ref="component" dataSource={['12345', '23456', '34567']}>
+            <AutoComplete
+              ref="component"
+              options={[{ value: '12345' }, { value: '23456' }, { value: '34567' }]}
+            >
               <input />
             </AutoComplete>
           );

components/auto-complete/index.tsx

@@ -1,4 +1,5 @@
-import { App, defineComponent, inject, provide, Plugin, VNode } from 'vue';
+import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
 import InputElement from './InputElement';
@@ -7,14 +8,14 @@ import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
 import Omit from 'omit.js';
 import warning from '../_util/warning';
-
+import Option from './Option';
-const { Option, OptGroup } = Select;
+import OptGroup from './OptGroup';
 
 function isSelectOptionOrSelectOptGroup(child: any): boolean {
   return child?.type?.isSelectOption || child?.type?.isSelectOptGroup;
 }
 
-const AutoCompleteProps = {
+const autoCompleteProps = {
   ...SelectProps(),
   dataSource: PropTypes.array,
   dropdownMenuStyle: PropTypes.style,
@@ -22,11 +23,17 @@ const AutoCompleteProps = {
   dropdownMatchSelectWidth: PropTypes.looseBool,
 };
 
+export type AutoCompleteProps = Partial<ExtractPropTypes<typeof autoCompleteProps>>;
+
+export const AutoCompleteOption = Option;
+
+export const AutoCompleteOptGroup = OptGroup;
+
 const AutoComplete = defineComponent({
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: {
-    ...AutoCompleteProps,
+    ...autoCompleteProps,
     prefixCls: PropTypes.string.def('ant-select'),
     showSearch: PropTypes.looseBool,
     transitionName: PropTypes.string.def('slide-up'),
@@ -38,8 +45,8 @@ const AutoComplete = defineComponent({
     defaultActiveFirstOption: PropTypes.looseBool.def(true),
   },
   emits: ['change', 'select', 'focus', 'blur'],
-  Option: { ...Option, name: 'AAutoCompleteOption' },
+  Option,
-  OptGroup: { ...OptGroup, name: 'AAutoCompleteOptGroup' },
+  OptGroup,
   setup(props, { slots }) {
     warning(
       !(props.dataSource !== undefined || 'dataSource' in slots),
@@ -94,7 +101,10 @@ const AutoComplete = defineComponent({
       [`${prefixCls}-show-search`]: true,
       [`${prefixCls}-auto-complete`]: true,
     };
-    const childArray = getSlot(this, 'dataSource');
+    let childArray = getSlot(this, 'dataSource');
+    if ('options' in this.$slots) {
+      childArray = getSlot(this, 'options');
+    }
     if (childArray.length && isSelectOptionOrSelectOptGroup(childArray[0])) {
       optionChildren = childArray;
     } else {
@@ -140,10 +150,10 @@ const AutoComplete = defineComponent({
 });
 
 /* istanbul ignore next */
-AutoComplete.install = function(app: App) {
+AutoComplete.install = function (app: App) {
   app.component(AutoComplete.name, AutoComplete);
-  app.component(AutoComplete.Option.name, AutoComplete.Option);
+  app.component(AutoComplete.Option.displayName, AutoComplete.Option);
-  app.component(AutoComplete.OptGroup.name, AutoComplete.OptGroup);
+  app.component(AutoComplete.OptGroup.displayName, AutoComplete.OptGroup);
   return app;
 };
 

components/avatar/Avatar.tsx

@@ -1,19 +1,12 @@
-import { tuple, VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
-import {
+import { tuple } from '../_util/type';
-  computed,
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
-  CSSProperties,
+import { computed, defineComponent, nextTick, onMounted, ref, watch } from 'vue';
-  defineComponent,
-  ExtractPropTypes,
-  nextTick,
-  onMounted,
-  PropType,
-  ref,
-  watch,
-} from 'vue';
 import { getPropsSlot } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
 import useBreakpoint from '../_util/hooks/useBreakpoint';
-import { Breakpoint, responsiveArray, ScreenSizeMap } from '../_util/responsiveObserve';
+import type { Breakpoint, ScreenSizeMap } from '../_util/responsiveObserve';
+import { responsiveArray } from '../_util/responsiveObserve';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import ResizeObserver from '../vc-resize-observer';
 import { useInjectSize } from '../_util/hooks/useSize';

components/avatar/Group.tsx

@@ -1,7 +1,9 @@
 import { cloneElement } from '../_util/vnode';
-import Avatar, { avatarProps, AvatarSize } from './Avatar';
+import type { AvatarSize } from './Avatar';
+import Avatar, { avatarProps } from './Avatar';
 import Popover from '../popover';
-import { defineComponent, PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import { tuple } from '../_util/type';

components/avatar/__tests__/Avatar.test.js

@@ -138,7 +138,7 @@ describe('Avatar Render', () => {
     });
 
     await asyncExpect(() => {
-      expect(wrapper.find('.ant-avatar-string')).toMatchSnapshot();
+      expect(wrapper.find('.ant-avatar-string').html()).toMatchSnapshot();
     }, 0);
 
     Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
@@ -155,7 +155,7 @@ describe('Avatar Render', () => {
       },
     });
     await asyncExpect(() => {
-      expect(wrapper.find('.ant-avatar-string')).toMatchSnapshot();
+      expect(wrapper.find('.ant-avatar-string').html()).toMatchSnapshot();
     }, 0);
   });
 
@@ -186,7 +186,7 @@ describe('Avatar Render', () => {
     });
   });
 
-  it('fallback', async () => {
+  it('fallback', () => {
     const div = global.document.createElement('div');
     global.document.body.appendChild(div);
     const wrapper = mount(
@@ -201,11 +201,9 @@ describe('Avatar Render', () => {
       },
       { attachTo: div },
     );
-    await asyncExpect(async () => {
+    wrapper.find('img').trigger('error');
-      await wrapper.find('img').trigger('error');
+    expect(wrapper.html()).toMatchSnapshot();
-      expect(wrapper.html()).toMatchSnapshot();
+    wrapper.unmount();
-      wrapper.unmount();
+    global.document.body.removeChild(div);
-      global.document.body.removeChild(div);
-    }, 0);
   });
 });

components/avatar/__tests__/__snapshots__/Avatar.test.js.snap

@@ -1,43 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] = `<span class="ant-avatar" style="width: 24px; height: 24px; line-height: 24px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 24px; height: 24px; line-height: 24px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] = `<span class="ant-avatar" style="width: 32px; height: 32px; line-height: 32px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 32px; height: 32px; line-height: 32px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render adjusts component size to 40 when window size is md 1`] = `<span class="ant-avatar" style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 40 when window size is md 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] = `<span class="ant-avatar" style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] = `<span class="ant-avatar" style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `<span class="ant-avatar" style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
+exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`] = `<span class="ant-avatar ant-avatar-circle" style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);"><!----></span></span>`;
 
-exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);">A</span></span>`;
+exports[`Avatar Render fallback 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-image"><img draggable="false" src="http://error.url"></span>`;
 
-exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
+exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `<span class="ant-avatar-string" style="transform: scale(0.72) translateX(-50%);">Avatar</span>`;
-DOMWrapper {
-  "wrapperElement": <span
-    class="ant-avatar-string"
-    style="transform: scale(0.72) translateX(-50%);"
-  >
-    
-    Avatar
-    
-  </span>,
-}
-`;
 
-exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
+exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `<span class="ant-avatar-string" style="transform: scale(0.32) translateX(-50%);">xx</span>`;
-DOMWrapper {
-  "wrapperElement": <span
-    class="ant-avatar-string"
-    style="transform: scale(0.32) translateX(-50%);"
-  >
-    
-    xx
-    
-  </span>,
-}
-`;
 
-exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `<span class="ant-avatar"><span class="ant-avatar-string" style="transform: scale(0.36) translateX(-50%);">Avatar</span></span>`;
+exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(0.36) translateX(-50%);">Avatar</span></span>`;

components/avatar/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Avatar from './Avatar';
 import Group from './Group';
 
@@ -8,12 +8,12 @@ export { AvatarGroupProps } from './Group';
 Avatar.Group = Group;
 
 /* istanbul ignore next */
-Avatar.install = function(app: App) {
+Avatar.install = function (app: App) {
   app.component(Avatar.name, Avatar);
   app.component(Group.name, Group);
   return app;
 };
-
+export { Group as AvatarGroup };
 export default Avatar as typeof Avatar &
   Plugin & {
     readonly Group: typeof Group;

components/back-top/__tests__/index.test.js

@@ -8,18 +8,19 @@ describe('BackTop', () => {
       props: {
         visibilityHeight: -1,
       },
+      attachTo: 'body',
     });
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       window.scrollY = y;
       window.pageYOffset = y;
+      document.documentElement.scrollTop = y;
     });
     window.scrollTo(0, 400);
-    // trigger scroll manually
+    expect(document.documentElement.scrollTop).toBe(400);
-    wrapper.vm.handleScroll();
+    await sleep(100);
-    await sleep();
     wrapper.find('.ant-back-top').trigger('click');
     await sleep(500);
-    expect(window.pageYOffset).toBe(0);
+    expect(document.documentElement.scrollTop).toBe(0);
     scrollToSpy.mockRestore();
   });
   it('support onClick', async () => {
@@ -29,15 +30,15 @@ describe('BackTop', () => {
         visibilityHeight: -1,
         onClick,
       },
+      attachTo: 'body',
     });
     const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
       window.scrollY = y;
       window.pageYOffset = y;
     });
+    document.dispatchEvent(new Event('scroll'));
     window.scrollTo(0, 400);
-    // trigger scroll manually
+    await sleep(10);
-    wrapper.vm.handleScroll();
-    await sleep();
     wrapper.find('.ant-back-top').trigger('click');
     expect(onClick).toHaveBeenCalled();
     scrollToSpy.mockRestore();

components/back-top/index.tsx

@@ -1,13 +1,12 @@
+import type { ExtractPropTypes, PropType } from 'vue';
 import {
   defineComponent,
-  ExtractPropTypes,
   inject,
   nextTick,
   onActivated,
   onBeforeUnmount,
   onMounted,
   reactive,
-  PropType,
   ref,
   watch,
   onDeactivated,

components/badge/Badge.tsx

@@ -4,7 +4,8 @@ import classNames from '../_util/classNames';
 import { getPropsSlot, flattenChildren } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
 import { getTransitionProps, Transition } from '../_util/transition';
-import { defineComponent, ExtractPropTypes, CSSProperties, computed, ref, watch } from 'vue';
+import type { ExtractPropTypes, CSSProperties } from 'vue';
+import { defineComponent, computed, ref, watch } from 'vue';
 import { tuple } from '../_util/type';
 import Ribbon from './Ribbon';
 import { isPresetColor } from './utils';
@@ -44,9 +45,11 @@ export default defineComponent({
 
     // ================================ Misc ================================
     const numberedDisplayCount = computed(() => {
-      return ((props.count as number) > (props.overflowCount as number)
+      return (
-        ? `${props.overflowCount}+`
+        (props.count as number) > (props.overflowCount as number)
-        : props.count) as string | number | null;
+          ? `${props.overflowCount}+`
+          : props.count
+      ) as string | number | null;
     });
 
     const hasStatus = computed(
@@ -157,13 +160,16 @@ export default defineComponent({
         visible || !text ? null : <span class={`${pre}-status-text`}>{text}</span>;
 
       // >>> Display Component
-      const displayNode = cloneElement(
+      const displayNode =
-        slots.count?.(),
+        typeof count === 'object' || (count === undefined && slots.count)
-        {
+          ? cloneElement(
-          style: mergedStyle,
+              count ?? slots.count?.(),
-        },
+              {
-        false,
+                style: mergedStyle,
-      );
+              },
+              false,
+            )
+          : null;
 
       const badgeClassName = classNames(
         pre,

components/badge/Ribbon.tsx

@@ -1,7 +1,9 @@
-import { LiteralUnion, tuple } from '../_util/type';
+import type { LiteralUnion } from '../_util/type';
-import { PresetColorType } from '../_util/colors';
+import { tuple } from '../_util/type';
+import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from './utils';
-import { CSSProperties, defineComponent, PropType, ExtractPropTypes, computed } from 'vue';
+import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
+import { defineComponent, computed } from 'vue';
 import PropTypes from '../_util/vue-types';
 import useConfigInject from '../_util/hooks/useConfigInject';
 

components/badge/ScrollNumber.tsx

@@ -1,13 +1,8 @@
 import classNames from '../_util/classNames';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
-import {
+import type { ExtractPropTypes, CSSProperties, DefineComponent, HTMLAttributes } from 'vue';
-  defineComponent,
+import { defineComponent } from 'vue';
-  ExtractPropTypes,
-  CSSProperties,
-  DefineComponent,
-  HTMLAttributes,
-} from 'vue';
 import useConfigInject from '../_util/hooks/useConfigInject';
 import SingleNumber from './SingleNumber';
 import { filterEmpty } from '../_util/props-util';
@@ -35,7 +30,7 @@ export default defineComponent({
         count,
         title,
         show,
-        component: Tag = ('sup' as unknown) as DefineComponent,
+        component: Tag = 'sup' as unknown as DefineComponent,
         class: className,
         style,
         ...restProps

components/badge/SingleNumber.tsx

@@ -1,4 +1,5 @@
-import { computed, CSSProperties, defineComponent, onUnmounted, reactive, ref, watch } from 'vue';
+import type { CSSProperties } from 'vue';
+import { computed, defineComponent, onUnmounted, reactive, ref, watch } from 'vue';
 import classNames from '../_util/classNames';
 
 export interface UnitNumberProps {

components/badge/__tests__/__snapshots__/index.test.js.snap

@@ -2,47 +2,47 @@
 
 exports[`Badge badge should support float number 1`] = `"3.5"`;
 
-exports[`Badge badge should support float number 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><sup title="3.5" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words">3.5</sup><!----></span>`;
+exports[`Badge badge should support float number 2`] = `<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="3.5">3.5</sup><!----></span>`;
 
 exports[`Badge render correct with negative number 1`] = `
-<div><span class="ant-badge ant-badge-not-a-wrapper"><sup title="-10" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-symbol">-</span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1000%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit current">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<div><span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="-10"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">-</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
-  <!----></span><span class="ant-badge ant-badge-not-a-wrapper"><sup title="-10" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-symbol">-</span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1000%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit current">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+  <!----></span><span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="-10"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">-</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
   <!----></span>
 </div>
 `;
 
 exports[`Badge should be compatible with borderColor style 1`] = `
-<span class="ant-badge ant-badge-not-a-wrapper" style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;"><sup title="4" data-show="true" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-1400%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit current">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9;" class="ant-badge ant-badge-not-a-wrapper"><!----><sup style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;" data-show="true" class="ant-scroll-number ant-badge-count" title="4"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">4</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should render when count is changed 1`] = `
-<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transition: none; transform: translateY(-2100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-2000%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit current">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="10"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transform: translateY(-100%);"><p class="ant-scroll-number-only-unit" style="position: absolute; top: -900%; left: 0px;">0</p><p style="position: absolute; top: -800%; left: 0px;" class="ant-scroll-number-only-unit">1</p><p style="position: absolute; top: -700%; left: 0px;" class="ant-scroll-number-only-unit">2</p><p style="position: absolute; top: -600%; left: 0px;" class="ant-scroll-number-only-unit">3</p><p style="position: absolute; top: -500%; left: 0px;" class="ant-scroll-number-only-unit">4</p><p style="position: absolute; top: -400%; left: 0px;" class="ant-scroll-number-only-unit">5</p><p style="position: absolute; top: -300%; left: 0px;" class="ant-scroll-number-only-unit">6</p><p style="position: absolute; top: -200%; left: 0px;" class="ant-scroll-number-only-unit">7</p><p style="position: absolute; top: -100%; left: 0px;" class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit current">9</p><p style="position: absolute; top: 100%; left: 0px;" class="ant-scroll-number-only-unit">0</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should render when count is changed 2`] = `
-<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="11"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transform: translateY(-200%);"><p class="ant-scroll-number-only-unit" style="position: absolute; top: -800%; left: 0px;">1</p><p style="position: absolute; top: -700%; left: 0px;" class="ant-scroll-number-only-unit">2</p><p style="position: absolute; top: -600%; left: 0px;" class="ant-scroll-number-only-unit">3</p><p style="position: absolute; top: -500%; left: 0px;" class="ant-scroll-number-only-unit">4</p><p style="position: absolute; top: -400%; left: 0px;" class="ant-scroll-number-only-unit">5</p><p style="position: absolute; top: -300%; left: 0px;" class="ant-scroll-number-only-unit">6</p><p style="position: absolute; top: -200%; left: 0px;" class="ant-scroll-number-only-unit">7</p><p style="position: absolute; top: -100%; left: 0px;" class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit current">9</p><p class="ant-scroll-number-only-unit" style="position: absolute; top: 100%; left: 0px;">0</p><p style="position: absolute; top: 200%; left: 0px;" class="ant-scroll-number-only-unit">1</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should render when count is changed 3`] = `
-<span class="ant-badge ant-badge-not-a-wrapper"><sup title="11" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="11"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transform: translateY(-200%);"><p class="ant-scroll-number-only-unit" style="position: absolute; top: -800%; left: 0px;">1</p><p style="position: absolute; top: -700%; left: 0px;" class="ant-scroll-number-only-unit">2</p><p style="position: absolute; top: -600%; left: 0px;" class="ant-scroll-number-only-unit">3</p><p style="position: absolute; top: -500%; left: 0px;" class="ant-scroll-number-only-unit">4</p><p style="position: absolute; top: -400%; left: 0px;" class="ant-scroll-number-only-unit">5</p><p style="position: absolute; top: -300%; left: 0px;" class="ant-scroll-number-only-unit">6</p><p style="position: absolute; top: -200%; left: 0px;" class="ant-scroll-number-only-unit">7</p><p style="position: absolute; top: -100%; left: 0px;" class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit current">9</p><p class="ant-scroll-number-only-unit" style="position: absolute; top: 100%; left: 0px;">0</p><p style="position: absolute; top: 200%; left: 0px;" class="ant-scroll-number-only-unit">1</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should render when count is changed 4`] = `
-<span class="ant-badge ant-badge-not-a-wrapper"><sup title="10" data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words"><span class="ant-scroll-number-only" style="transform: translateY(-1100%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit current">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span><span class="ant-scroll-number-only" style="transform: translateY(-1000%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit current">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="10"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">1</p></span><span class="ant-scroll-number-only" style="transform: translateY(-100%);"><p class="ant-scroll-number-only-unit" style="position: absolute; top: -900%; left: 0px;">0</p><p style="position: absolute; top: -800%; left: 0px;" class="ant-scroll-number-only-unit">1</p><p style="position: absolute; top: -700%; left: 0px;" class="ant-scroll-number-only-unit">2</p><p style="position: absolute; top: -600%; left: 0px;" class="ant-scroll-number-only-unit">3</p><p style="position: absolute; top: -500%; left: 0px;" class="ant-scroll-number-only-unit">4</p><p style="position: absolute; top: -400%; left: 0px;" class="ant-scroll-number-only-unit">5</p><p style="position: absolute; top: -300%; left: 0px;" class="ant-scroll-number-only-unit">6</p><p style="position: absolute; top: -200%; left: 0px;" class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit" style="position: absolute; top: -100%; left: 0px;">8</p><p class="ant-scroll-number-only-unit current">9</p><p style="position: absolute; top: 100%; left: 0px;" class="ant-scroll-number-only-unit">0</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should render when count is changed 5`] = `
-<span class="ant-badge ant-badge-not-a-wrapper"><sup title="9" data-show="true" class="ant-scroll-number ant-badge-count"><span class="ant-scroll-number-only" style="transform: translateY(-900%);"><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit current">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p><p class="ant-scroll-number-only-unit">0</p><p class="ant-scroll-number-only-unit">1</p><p class="ant-scroll-number-only-unit">2</p><p class="ant-scroll-number-only-unit">3</p><p class="ant-scroll-number-only-unit">4</p><p class="ant-scroll-number-only-unit">5</p><p class="ant-scroll-number-only-unit">6</p><p class="ant-scroll-number-only-unit">7</p><p class="ant-scroll-number-only-unit">8</p><p class="ant-scroll-number-only-unit">9</p></span></sup>
+<span class="ant-badge ant-badge-not-a-wrapper"><!----><sup data-show="true" class="ant-scroll-number ant-badge-count" title="9"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
 <!----></span>
 `;
 
 exports[`Badge should support offset when count is a VueNode 1`] = `
-<span class="ant-badge"><a href="#" class="head-example">head</a><span class="ant-scroll-number-custom-component custom" style="color: rgb(245, 34, 45); right: -10px; margin-top: 20px;"></span>
+<span class="ant-badge"><a href="#" class="head-example">head</a><span class="custom ant-scroll-number-custom-component" style="color: rgb(245, 34, 45); margin-top: 20px; right: -10px;"></span>
 <!----></span>
 `;
 

components/badge/index.ts

@@ -1,13 +1,16 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Badge from './Badge';
 import Ribbon from './Ribbon';
+export type { BadgeProps } from './Badge';
 
-Badge.install = function(app: App) {
+Badge.install = function (app: App) {
   app.component(Badge.name, Badge);
   app.component(Ribbon.name, Ribbon);
   return app;
 };
 
+export { Ribbon as BadgeRibbon };
+
 export default Badge as typeof Badge &
   Plugin & {
     readonly Ribbon: typeof Ribbon;

components/breadcrumb/Breadcrumb.tsx

@@ -1,10 +1,11 @@
-import { cloneVNode, defineComponent, PropType, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import { cloneVNode, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import warning from '../_util/warning';
 import BreadcrumbItem from './BreadcrumbItem';
 import Menu from '../menu';
-import { Omit, VueNode } from '../_util/type';
+import type { Omit, VueNode } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export interface Route {

components/breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getPropsSlot } from '../_util/props-util';
 import DropDown from '../dropdown/dropdown';

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,18 +1,19 @@
-import { defineComponent, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
-const breadcrumbSeparator = {
+const breadcrumbSeparatorProps = {
   prefixCls: PropTypes.string,
 };
-export type BreadcrumbSeparator = Partial<ExtractPropTypes<typeof breadcrumbSeparator>>;
+export type BreadcrumbSeparatorProps = Partial<ExtractPropTypes<typeof breadcrumbSeparatorProps>>;
 
 export default defineComponent({
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,
-  props: breadcrumbSeparator,
+  props: breadcrumbSeparatorProps,
   setup(props, { slots, attrs }) {
     const { prefixCls } = useConfigInject('breadcrumb', props);
 

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@@ -8,7 +8,7 @@ exports[`Breadcrumb should not display Breadcrumb Item when its children is fals
 </div>
 `;
 
-exports[`Breadcrumb should render a menu 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link"><a href="#/index">home</a></span><span class="ant-breadcrumb-separator">/</span></span><span><!----><span class="ant-breadcrumb-overlay-link ant-dropdown-trigger"><span class="ant-breadcrumb-link"><a href="#/index/first">first</a></span><span role="img" aria-label="down" class="anticon anticon-down"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><span>second</span></span><span class="ant-breadcrumb-separator">/</span></span></div>`;
+exports[`Breadcrumb should render a menu 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link"><a href="#/index">home</a></span><span class="ant-breadcrumb-separator">/</span></span><span><!----><span class="ant-breadcrumb-overlay-link ant-dropdown-trigger"><span class="ant-breadcrumb-link"><a href="#/index/first">first</a></span><span role="img" aria-label="down" class="anticon anticon-down"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link"><span>second</span></span><span class="ant-breadcrumb-separator">/</span></span></div>`;
 
 exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `<div class="ant-breadcrumb"><span><span class="ant-breadcrumb-link">Location</span><span class="ant-breadcrumb-separator">/</span></span><span><span><span class="ant-breadcrumb-link">Mock Node</span><span class="ant-breadcrumb-separator">/</span></span></span><span><span class="ant-breadcrumb-link">Application Center</span><span class="ant-breadcrumb-separator">/</span></span></div>`;
 

components/breadcrumb/index.ts

@@ -1,23 +1,24 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 
-export { BreadcrumbProps } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb';
-export { BreadcrumbItemProps } from './BreadcrumbItem';
+export type { BreadcrumbItemProps } from './BreadcrumbItem';
-export { BreadcrumbSeparator } from './BreadcrumbSeparator';
+export type { BreadcrumbSeparatorProps } from './BreadcrumbSeparator';
 
 Breadcrumb.Item = BreadcrumbItem;
 Breadcrumb.Separator = BreadcrumbSeparator;
 
 /* istanbul ignore next */
-Breadcrumb.install = function(app: App) {
+Breadcrumb.install = function (app: App) {
   app.component(Breadcrumb.name, Breadcrumb);
   app.component(BreadcrumbItem.name, BreadcrumbItem);
   app.component(BreadcrumbSeparator.name, BreadcrumbSeparator);
   return app;
 };
 
+export { BreadcrumbItem, BreadcrumbSeparator };
 export default Breadcrumb as typeof Breadcrumb &
   Plugin & {
     readonly Item: typeof BreadcrumbItem;

components/button/button.tsx

@@ -58,7 +58,7 @@ export default defineComponent({
 
     watch(
       loadingOrDelay,
-      (val) => {
+      val => {
         clearTimeout(delayTimeoutRef.value);
         if (typeof loadingOrDelay.value === 'number') {
           delayTimeoutRef.value = window.setTimeout(() => {
@@ -90,7 +90,6 @@ export default defineComponent({
           break;
       }
       return {
-        [attrs.class as string]: attrs.class,
         [`${pre}`]: true,
         [`${pre}-${type}`]: type,
         [`${pre}-${shape}`]: shape,
@@ -186,7 +185,7 @@ export default defineComponent({
         icon
       );
 
-      const kids = children.map((child) =>
+      const kids = children.map(child =>
         insertSpace(child, isNeedInserted && autoInsertSpace.value),
       );
 

components/button/index.ts

@@ -1,4 +1,4 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Button from './button';
 import ButtonGroup from './button-group';
 

components/calendar/Header.tsx

@@ -1,11 +1,12 @@
-import { defineComponent, inject, PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, inject } from 'vue';
 import Select from '../select';
 import { Group, Button } from '../radio';
 import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
-import { VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
-import moment from 'moment';
+import type moment from 'moment';
-import { RadioChangeEvent } from '../radio/interface';
+import type { RadioChangeEvent } from '../radio/interface';
 
 function getMonthsLocale(value: moment.Moment): string[] {
   const current = value.clone();

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -8,7 +8,7 @@ exports[`Calendar Calendar should support locale 1`] = `
       <!---->
       <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item" title="2018年">2018年</span>
         <!---->
-      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
       <!---->
     </div>
     <div class="ant-select ant-fullcalendar-month-select ant-select-single ant-select-show-arrow">
@@ -16,7 +16,7 @@ exports[`Calendar Calendar should support locale 1`] = `
       <!---->
       <div class="ant-select-selector"><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="opacity: 0;" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" readonly="" unselectable="on" type="search"></span><span class="ant-select-selection-item" title="Oct">Oct</span>
         <!---->
-      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+      </div><span class="ant-select-arrow" style="user-select: none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
       <!---->
     </div>
     <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>

components/calendar/index.tsx

@@ -1,4 +1,5 @@
-import { defineComponent, inject, PropType } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import { getOptionProps, hasProp } from '../_util/props-util';

components/card/Card.tsx

@@ -1,4 +1,5 @@
-import { inject, isVNode, defineComponent, VNodeTypes, PropType, VNode } from 'vue';
+import type { VNodeTypes, PropType, VNode, ExtractPropTypes } from 'vue';
+import { inject, isVNode, defineComponent } from 'vue';
 import { tuple } from '../_util/type';
 import Tabs from '../tabs';
 import Row from '../row';
@@ -20,32 +21,36 @@ export type CardType = 'inner';
 
 const { TabPane } = Tabs;
 
+const cardProps = {
+  prefixCls: PropTypes.string,
+  title: PropTypes.VNodeChild,
+  extra: PropTypes.VNodeChild,
+  bordered: PropTypes.looseBool.def(true),
+  bodyStyle: PropTypes.style,
+  headStyle: PropTypes.style,
+  loading: PropTypes.looseBool.def(false),
+  hoverable: PropTypes.looseBool.def(false),
+  type: PropTypes.string,
+  size: PropTypes.oneOf(tuple('default', 'small')),
+  actions: PropTypes.VNodeChild,
+  tabList: {
+    type: Array as PropType<CardTabListType[]>,
+  },
+  tabBarExtraContent: PropTypes.VNodeChild,
+  activeTabKey: PropTypes.string,
+  defaultActiveTabKey: PropTypes.string,
+  cover: PropTypes.VNodeChild,
+  onTabChange: {
+    type: Function as PropType<(key: string) => void>,
+  },
+};
+
+export type CardProps = Partial<ExtractPropTypes<typeof cardProps>>;
+
 const Card = defineComponent({
   name: 'ACard',
   mixins: [BaseMixin],
-  props: {
+  props: cardProps,
-    prefixCls: PropTypes.string,
-    title: PropTypes.VNodeChild,
-    extra: PropTypes.VNodeChild,
-    bordered: PropTypes.looseBool.def(true),
-    bodyStyle: PropTypes.style,
-    headStyle: PropTypes.style,
-    loading: PropTypes.looseBool.def(false),
-    hoverable: PropTypes.looseBool.def(false),
-    type: PropTypes.string,
-    size: PropTypes.oneOf(tuple('default', 'small')),
-    actions: PropTypes.VNodeChild,
-    tabList: {
-      type: Array as PropType<CardTabListType[]>,
-    },
-    tabBarExtraContent: PropTypes.VNodeChild,
-    activeTabKey: PropTypes.string,
-    defaultActiveTabKey: PropTypes.string,
-    cover: PropTypes.VNodeChild,
-    onTabChange: {
-      type: Function as PropType<(key: string) => void>,
-    },
-  },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),

components/card/index.ts

@@ -1,19 +1,23 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Card from './Card';
 import Meta from './Meta';
 import Grid from './Grid';
 
+export type { CardProps } from './Card';
+
 Card.Meta = Meta;
 Card.Grid = Grid;
 
 /* istanbul ignore next */
-Card.install = function(app: App) {
+Card.install = function (app: App) {
   app.component(Card.name, Card);
   app.component(Meta.name, Meta);
   app.component(Grid.name, Grid);
   return app;
 };
 
+export { Meta as CardMeta, Grid as CardGrid };
+
 export default Card as typeof Card &
   Plugin & {
     readonly Meta: typeof Meta;

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -3,15 +3,15 @@
 exports[`Cascader can be selected 1`] = `
 <div>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
@@ -21,15 +21,15 @@ exports[`Cascader can be selected 1`] = `
 exports[`Cascader can be selected 2`] = `
 <div>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
@@ -45,15 +45,15 @@ exports[`Cascader can be selected 2`] = `
 exports[`Cascader can be selected 3`] = `
 <div>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
   <ul class="ant-cascader-menu">
-    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+    <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
       <!---->
     </li>
   </ul>
@@ -72,10 +72,10 @@ exports[`Cascader popup correctly when panel is open 1`] = `
   <div class="ant-cascader-menus   ant-cascader-menus-placement-bottomLeft">
     <div>
       <ul class="ant-cascader-menu">
-        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
           <!---->
         </li>
-        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
           <!---->
         </li>
       </ul>
@@ -90,15 +90,15 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
   <div class="ant-cascader-menus   ant-cascader-menus-placement-bottomLeft">
     <div>
       <ul class="ant-cascader-menu">
-        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
           <!---->
         </li>
-        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
           <!---->
         </li>
       </ul>
       <ul class="ant-cascader-menu">
-        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
           <!---->
         </li>
       </ul>
@@ -113,4 +113,4 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 </div>
 `;
 
-exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input readonly="" type="text" autocomplete="off" class="ant-input ant-cascader-input "><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;
+exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input "><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;

components/cascader/__tests__/index.test.js

@@ -110,9 +110,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[0]
+      $$('.ant-cascader-menu')[0].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {
@@ -120,9 +118,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[1]
+      $$('.ant-cascader-menu')[1].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {
@@ -130,9 +126,7 @@ describe('Cascader', () => {
     });
 
     await asyncExpect(() => {
-      $$('.ant-cascader-menu')[2]
+      $$('.ant-cascader-menu')[2].querySelectorAll('.ant-cascader-menu-item')[0].click();
-        .querySelectorAll('.ant-cascader-menu-item')[0]
-        .click();
     });
 
     await asyncExpect(() => {

components/cascader/index.tsx

@@ -1,4 +1,5 @@
-import { inject, provide, PropType, defineComponent, CSSProperties } from 'vue';
+import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import { inject, provide, defineComponent } from 'vue';
 import PropTypes from '../_util/vue-types';
 import VcCascader from '../vc-cascader';
 import arrayTreeFilter from 'array-tree-filter';
@@ -23,8 +24,9 @@ import BaseMixin from '../_util/BaseMixin';
 import { cloneElement } from '../_util/vnode';
 import warning from '../_util/warning';
 import { defaultConfigProvider } from '../config-provider';
-import { tuple, VueNode, withInstall } from '../_util/type';
+import type { VueNode } from '../_util/type';
-import { RenderEmptyHandler } from '../config-provider/renderEmpty';
+import { tuple, withInstall } from '../_util/type';
+import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 export interface CascaderOptionType {
   value?: string | number;
@@ -99,7 +101,7 @@ export interface FilteredOptionsType extends EmptyFilteredOptionsType {
 // }).loose;
 function noop() {}
 
-const CascaderProps = {
+const cascaderProps = {
   /** 可选项数据源 */
   options: { type: Array as PropType<CascaderOptionType[]>, default: [] },
   /** 默认的选中项 */
@@ -154,6 +156,8 @@ const CascaderProps = {
   'onUpdate:value': PropTypes.func,
 };
 
+export type CascaderProps = Partial<ExtractPropTypes<typeof cascaderProps>>;
+
 // We limit the filtered item count by default
 const defaultLimit = 50;
 
@@ -214,7 +218,7 @@ const Cascader = defineComponent({
   name: 'ACascader',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  props: CascaderProps,
+  props: cascaderProps,
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),

components/checkbox/Checkbox.tsx

@@ -5,7 +5,7 @@ import VcCheckbox from '../vc-checkbox';
 import hasProp, { getOptionProps, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 import warning from '../_util/warning';
-import { RadioChangeEvent } from '../radio/interface';
+import type { RadioChangeEvent } from '../radio/interface';
 function noop() {}
 
 export default defineComponent({

components/checkbox/Group.tsx

@@ -1,9 +1,10 @@
-import { defineComponent, inject, PropType, provide } from 'vue';
+import type { PropType } from 'vue';
+import { defineComponent, inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import Checkbox from './Checkbox';
 import hasProp, { getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
-import { VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
 
 export type CheckboxValueType = string | number | boolean;
 export interface CheckboxOptionType {

components/checkbox/index.ts

@@ -1,16 +1,16 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './Group';
 
 Checkbox.Group = CheckboxGroup;
 
 /* istanbul ignore next */
-Checkbox.install = function(app: App) {
+Checkbox.install = function (app: App) {
   app.component(Checkbox.name, Checkbox);
   app.component(CheckboxGroup.name, CheckboxGroup);
   return app;
 };
-
+export { CheckboxGroup };
 export default Checkbox as typeof Checkbox &
   Plugin & {
     readonly Group: typeof CheckboxGroup;

components/col/index.ts

@@ -1,4 +1,4 @@
 import { Col } from '../grid';
 import { withInstall } from '../_util/type';
-
+export type { ColProps } from '../grid';
 export default withInstall(Col);

components/collapse/Collapse.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, defineComponent, inject, PropType } from 'vue';
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue';
+import { defineComponent, inject } from 'vue';
 import animation from '../_util/openAnimation';
 import { getOptionProps, getComponent, isValidElement, getSlot } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
@@ -6,7 +7,8 @@ import VcCollapse from '../vc-collapse';
 import RightOutlined from '@ant-design/icons-vue/RightOutlined';
 import { defaultConfigProvider } from '../config-provider';
 import PropTypes from '../_util/vue-types';
-import { tuple, VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
+import { tuple } from '../_util/type';
 
 export interface PanelProps {
   isActive?: boolean;
@@ -20,22 +22,27 @@ export interface PanelProps {
   extra?: VueNode;
 }
 type ActiveKeyType = Array<string | number> | string | number;
+
+const collapseProps = {
+  prefixCls: PropTypes.string,
+  activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
+  defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
+  accordion: PropTypes.looseBool,
+  destroyInactivePanel: PropTypes.looseBool,
+  bordered: PropTypes.looseBool.def(true),
+  expandIcon: PropTypes.func,
+  openAnimation: PropTypes.object.def(animation),
+  expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
+  'onUpdate:activeKey': PropTypes.func,
+  onChange: PropTypes.func,
+};
+
+export type CollapseProps = Partial<ExtractPropTypes<typeof collapseProps>>;
+
 export default defineComponent({
   name: 'ACollapse',
   inheritAttrs: false,
-  props: {
+  props: collapseProps,
-    prefixCls: PropTypes.string,
-    activeKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
-    defaultActiveKey: { type: [Array, Number, String] as PropType<ActiveKeyType> },
-    accordion: PropTypes.looseBool,
-    destroyInactivePanel: PropTypes.looseBool,
-    bordered: PropTypes.looseBool.def(true),
-    expandIcon: PropTypes.func,
-    openAnimation: PropTypes.object.def(animation),
-    expandIconPosition: PropTypes.oneOf(tuple('left', 'right')).def('left'),
-    'onUpdate:activeKey': PropTypes.func,
-    onChange: PropTypes.func,
-  },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),

components/collapse/CollapsePanel.tsx

@@ -1,27 +1,31 @@
+import type { ExtractPropTypes } from 'vue';
 import { defineComponent, inject } from 'vue';
 import { getOptionProps, getComponent, getSlot } from '../_util/props-util';
 import VcCollapse from '../vc-collapse';
 import { defaultConfigProvider } from '../config-provider';
 import PropTypes from '../_util/vue-types';
 
+const collapsePanelProps = {
+  openAnimation: PropTypes.object,
+  prefixCls: PropTypes.string,
+  header: PropTypes.VNodeChild,
+  headerClass: PropTypes.string,
+  showArrow: PropTypes.looseBool,
+  isActive: PropTypes.looseBool,
+  destroyInactivePanel: PropTypes.looseBool,
+  disabled: PropTypes.looseBool,
+  accordion: PropTypes.looseBool,
+  forceRender: PropTypes.looseBool,
+  expandIcon: PropTypes.func,
+  extra: PropTypes.VNodeChild,
+  panelKey: PropTypes.VNodeChild,
+};
+
+export type CollapsePanelProps = Partial<ExtractPropTypes<typeof collapsePanelProps>>;
 export default defineComponent({
   name: 'ACollapsePanel',
   inheritAttrs: false,
-  props: {
+  props: collapsePanelProps,
-    openAnimation: PropTypes.object,
-    prefixCls: PropTypes.string,
-    header: PropTypes.VNodeChild,
-    headerClass: PropTypes.string,
-    showArrow: PropTypes.looseBool,
-    isActive: PropTypes.looseBool,
-    destroyInactivePanel: PropTypes.looseBool,
-    disabled: PropTypes.looseBool,
-    accordion: PropTypes.looseBool,
-    forceRender: PropTypes.looseBool,
-    expandIcon: PropTypes.func,
-    extra: PropTypes.VNodeChild,
-    panelKey: PropTypes.VNodeChild,
-  },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),

components/collapse/__tests__/__snapshots__/index.test.js.snap

@@ -3,7 +3,7 @@
 exports[`Collapse should support remove expandIcon 1`] = `
 <div class="ant-collapse ant-collapse-icon-position-left">
   <div class="ant-collapse-item" role="tablist">
-    <div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span>header
+    <div class="ant-collapse-header" role="button" tabindex="0" aria-expanded="false"><span role="img" aria-label="right" class="anticon anticon-right ant-collapse-arrow"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span>header
       <!---->
     </div>
     <!---->

components/collapse/index.ts

@@ -1,16 +1,19 @@
-import { App, Plugin } from 'vue';
+import type { App, Plugin } from 'vue';
 import Collapse from './Collapse';
 import CollapsePanel from './CollapsePanel';
+export type { CollapseProps } from './Collapse';
+export type { CollapsePanelProps } from './CollapsePanel';
 
 Collapse.Panel = CollapsePanel;
 
 /* istanbul ignore next */
-Collapse.install = function(app: App) {
+Collapse.install = function (app: App) {
   app.component(Collapse.name, Collapse);
   app.component(CollapsePanel.name, CollapsePanel);
   return app;
 };
 
+export { CollapsePanel };
 export default Collapse as typeof Collapse &
   Plugin & {
     readonly Panel: typeof CollapsePanel;

components/color-picker/ColorPicker.jsx

@@ -97,7 +97,7 @@ export default {
       this.createPickr();
       this.eventsBinding();
     },
-    setColor: debounce(function(val) {
+    setColor: debounce(function (val) {
       this.pickr.setColor(val);
     }, 1000),
     eventsBinding() {

components/color-picker/index.js

@@ -1,6 +1,6 @@
 import ColorPicker from './ColorPicker';
 /* istanbul ignore next */
-ColorPicker.install = function(app) {
+ColorPicker.install = function (app) {
   app.component(ColorPicker.name, ColorPicker);
   return app;
 };

components/comment/__tests__/__snapshots__/index.test.js.snap

@@ -44,21 +44,26 @@ exports[`Comment Comment can be used as editor, user can customize the editor co
           <div>
             <div class="ant-row ant-form-item">
               <!---->
-              <div class="ant-col ant-form-item-control-wrapper">
+              <div class="ant-col ant-form-item-control">
-                <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea rows="4" class="ant-input"></textarea><!----></span>
+                <div class="ant-form-item-control-input">
-                  <!---->
+                  <div class="ant-form-item-control-input-content"><textarea rows="4" class="ant-input"></textarea></div>
                   <!---->
                 </div>
+                <!---->
+                <!---->
               </div>
             </div>
             <div class="ant-row ant-form-item">
               <!---->
-              <div class="ant-col ant-form-item-control-wrapper">
+              <div class="ant-col ant-form-item-control">
-                <div class="ant-form-item-control"><span class="ant-form-item-children"><button class="ant-btn ant-btn-primary" type="submit" ant-click-animating-without-extra-node="true"><!----><span>Add Comment</span></button>
+                <div class="ant-form-item-control-input">
-                  <!----></span>
+                  <div class="ant-form-item-control-input-content"><button class="ant-btn ant-btn-primary" type="submit" ant-click-animating-without-extra-node="true">
-                  <!---->
+                      <!----><span>Add Comment</span>
+                    </button></div>
                   <!---->
                 </div>
+                <!---->
+                <!---->
               </div>
             </div>
           </div>

components/comment/index.tsx

@@ -1,7 +1,9 @@
-import { defineComponent, ExtractPropTypes } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import { defineComponent } from 'vue';
 import PropsTypes from '../_util/vue-types';
 import { flattenChildren } from '../_util/props-util';
-import { VueNode, withInstall } from '../_util/type';
+import type { VueNode } from '../_util/type';
+import { withInstall } from '../_util/type';
 import useConfigInject from '../_util/hooks/useConfigInject';
 export const commentProps = {
   actions: PropsTypes.array,

components/components.ts

@@ -0,0 +1,197 @@
+export type { AffixProps } from './affix';
+export { default as Affix } from './affix';
+
+export type { AnchorProps, AnchorLinkProps } from './anchor';
+export { default as Anchor, AnchorLink } from './anchor';
+
+export type { AutoCompleteProps } from './auto-complete';
+export { default as AutoComplete, AutoCompleteOptGroup, AutoCompleteOption } from './auto-complete';
+
+export type { AlertProps } from './alert';
+export { default as Alert } from './alert';
+
+export type { AvatarProps } from './avatar';
+export { default as Avatar, AvatarGroup } from './avatar';
+
+export type { BackTopProps } from './back-top';
+export { default as BackTop } from './back-top';
+
+export type { BadgeProps } from './badge';
+export { default as Badge, BadgeRibbon } from './badge';
+
+export type { BreadcrumbProps, BreadcrumbItemProps, BreadcrumbSeparatorProps } from './breadcrumb';
+export { default as Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from './breadcrumb';
+
+export type { ButtonProps } from './button';
+export { default as Button, ButtonGroup } from './button';
+
+export type { CalendarProps } from './calendar';
+export { default as Calendar } from './calendar';
+
+export type { CardProps } from './card';
+export { default as Card, CardGrid, CardMeta } from './card';
+
+export type { CollapseProps, CollapsePanelProps } from './collapse';
+export { default as Collapse, CollapsePanel } from './collapse';
+
+export type { CarouselProps } from './carousel';
+export { default as Carousel } from './carousel';
+
+export type { CascaderProps } from './cascader';
+export { default as Cascader } from './cascader';
+
+export { default as Checkbox, CheckboxGroup } from './checkbox';
+
+export type { ColProps } from './col';
+export { default as Col } from './col';
+
+export type { CommentProps } from './comment';
+export { default as Comment } from './comment';
+
+export { default as ConfigProvider } from './config-provider';
+
+export { default as DatePicker, RangePicker, MonthPicker, WeekPicker } from './date-picker';
+
+export type { DescriptionsProps } from './descriptions';
+export { default as Descriptions, DescriptionsItem } from './descriptions';
+
+export type { DividerProps } from './divider';
+export { default as Divider } from './divider';
+
+export type { DropdownProps } from './dropdown';
+export { default as Dropdown, DropdownButton } from './dropdown';
+
+export { default as Drawer } from './drawer';
+
+export type { EmptyProps } from './empty';
+export { default as Empty } from './empty';
+
+export type { FormProps, FormItemProps } from './form';
+export { default as Form, FormItem } from './form';
+
+export { default as Grid } from './grid';
+
+export { default as Input, InputGroup, InputPassword, InputSearch, Textarea } from './input';
+
+export type { ImageProps } from './image';
+export { default as Image, ImagePreviewGroup } from './image';
+
+export type { InputNumberProps } from './input-number';
+export { default as InputNumber } from './input-number';
+
+export type { LayoutProps } from './layout';
+export {
+  default as Layout,
+  LayoutHeader,
+  LayoutSider,
+  LayoutFooter,
+  LayoutContent,
+} from './layout';
+
+export type { ListProps } from './list';
+export { default as List, ListItem, ListItemMeta } from './list';
+
+export type { MessageArgsProps } from './message';
+export { default as message } from './message';
+
+export type { MenuProps, MenuTheme, SubMenuProps, MenuItemProps } from './menu';
+export { default as Menu, MenuDivider, MenuItem, MenuItemGroup, SubMenu } from './menu';
+
+export type { MentionsProps } from './mentions';
+export { default as Mentions, MentionsOption } from './mentions';
+
+export type { ModalProps, ModalFuncProps } from './modal';
+export { default as Modal } from './modal';
+
+export type { StatisticProps } from './statistic';
+export { default as Statistic, StatisticCountdown } from './statistic';
+
+export { default as notification } from './notification';
+
+export type { PageHeaderProps } from './page-header';
+export { default as PageHeader } from './page-header';
+
+export type { PaginationProps } from './pagination';
+export { default as Pagination } from './pagination';
+
+export { default as Popconfirm } from './popconfirm';
+
+export { default as Popover } from './popover';
+
+export type { ProgressProps } from './progress';
+export { default as Progress } from './progress';
+
+export { default as Radio, RadioButton, RadioGroup } from './radio';
+
+export type { RateProps } from './rate';
+export { default as Rate } from './rate';
+
+export type { ResultProps } from './result';
+export { default as Result } from './result';
+
+export type { RowProps } from './row';
+export { default as Row } from './row';
+
+export type { SelectProps } from './select';
+export { default as Select, SelectOptGroup, SelectOption } from './select';
+
+export type { SkeletonProps } from './skeleton';
+export {
+  default as Skeleton,
+  SkeletonButton,
+  SkeletonAvatar,
+  SkeletonInput,
+  SkeletonImage,
+} from './skeleton';
+
+export { default as Slider } from './slider';
+
+export type { SpaceProps } from './space';
+export { default as Space } from './space';
+
+export type { SpinProps } from './spin';
+export { default as Spin } from './spin';
+
+export { default as Steps, Step } from './steps';
+
+export type { SwitchProps } from './switch';
+export { default as Switch } from './switch';
+
+export { default as Table, TableColumn, TableColumnGroup } from './table';
+
+export type { TransferProps } from './transfer';
+export { default as Transfer } from './transfer';
+
+export { default as Tree, TreeNode, DirectoryTree } from './tree';
+
+export type { TreeSelectProps } from './tree-select';
+export { default as TreeSelect, TreeSelectNode } from './tree-select';
+
+export { default as Tabs, TabPane, TabContent } from './tabs';
+
+export type { TagProps } from './tag';
+export { default as Tag, CheckableTag } from './tag';
+
+export type { TimePickerProps } from './time-picker';
+export { default as TimePicker } from './time-picker';
+
+export type { TimelineProps, TimelineItemProps } from './timeline';
+export { default as Timeline, TimelineItem } from './timeline';
+
+export type { TooltipProps } from './tooltip';
+export { default as Tooltip } from './tooltip';
+
+export type { TypographyProps } from './typography';
+export {
+  default as Typography,
+  TypographyLink,
+  TypographyParagraph,
+  TypographyText,
+  TypographyTitle,
+} from './typography';
+
+export type { UploadProps } from './upload';
+
+export { default as Upload } from './upload';
+
+export { default as LocaleProvider } from './locale-provider';

components/config-provider/index.tsx

@@ -1,19 +1,13 @@
-import {
+import type { PropType, ExtractPropTypes, UnwrapRef } from 'vue';
-  reactive,
+import { reactive, provide, defineComponent, watch } from 'vue';
-  provide,
-  PropType,
-  defineComponent,
-  watch,
-  ExtractPropTypes,
-  UnwrapRef,
-} from 'vue';
 import PropTypes from '../_util/vue-types';
 import defaultRenderEmpty, { RenderEmptyHandler } from './renderEmpty';
-import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
+import type { Locale } from '../locale-provider';
-import { TransformCellTextProps } from '../table/interface';
+import LocaleProvider, { ANT_MARK } from '../locale-provider';
+import type { TransformCellTextProps } from '../table/interface';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { withInstall } from '../_util/type';
-import { RequiredMark } from '../form/Form';
+import type { RequiredMark } from '../form/Form';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 

components/config-provider/renderEmpty.tsx

@@ -1,4 +1,5 @@
-import { inject, VNodeChild } from 'vue';
+import type { VNodeChild } from 'vue';
+import { inject } from 'vue';
 import Empty from '../empty';
 import { defaultConfigProvider } from '.';
 

components/date-picker/RangePicker.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, defineComponent, inject, nextTick } from 'vue';
+import type { CSSProperties } from 'vue';
+import { defineComponent, inject, nextTick } from 'vue';
 import moment from 'moment';
 import RangeCalendar from '../vc-calendar/src/RangeCalendar';
 import VcDatePicker from '../vc-calendar/src/Picker';

components/date-picker/__tests__/RangePicker.test.js

@@ -195,11 +195,9 @@ describe('RangePicker', () => {
       $$('.ant-calendar-picker-input')[0].click();
     });
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-cell')[23].getAttribute('class').split(' ')).toContain(
-        $$('.ant-calendar-cell')[23]
+        'ant-calendar-in-range-cell',
-          .getAttribute('class')
+      );
-          .split(' '),
-      ).toContain('ant-calendar-in-range-cell');
     });
   });
 

components/date-picker/__tests__/__snapshots__/DatePicker.test.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><!--teleport start--><!--teleport end--><div><input readonly="" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
+exports[`DatePicker prop locale should works 1`] = `<span class="ant-calendar-picker"><!--teleport start--><!--teleport end--><div><input readonly="" placeholder="Избери дата" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`RangePicker show month panel according to value 1`] = `
-<div data-v-app=""><span class="ant-calendar-picker" style="width: 350px;" tabindex="0"><!--teleport start--><!--teleport end--><span class="ant-calendar-picker-input ant-input"><input readonly="" placeholder="Start date" class="ant-calendar-range-picker-input" tabindex="-1"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="" placeholder="End date" class="ant-calendar-range-picker-input" tabindex="-1"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span>
+<div data-v-app=""><span class="ant-calendar-picker" style="width: 350px;" tabindex="0"><!--teleport start--><!--teleport end--><span class="ant-calendar-picker-input ant-input"><input readonly="" placeholder="Start date" class="ant-calendar-range-picker-input" tabindex="-1"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="" placeholder="End date" class="ant-calendar-range-picker-input" tabindex="-1"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span>
   <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
     <div>
       <!---->
@@ -383,7 +383,7 @@ exports[`RangePicker show month panel according to value 1`] = `
 `;
 
 exports[`RangePicker switch to corresponding month panel when click presetted ranges 1`] = `
-<span class="ant-calendar-picker" style="width: 350px;" tabindex="0"><!--teleport start--><!--teleport end--><span class="ant-calendar-picker-input ant-input"><input readonly="" placeholder="Start date" class="ant-calendar-range-picker-input" tabindex="-1"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="" placeholder="End date" class="ant-calendar-range-picker-input" tabindex="-1"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span>
+<span class="ant-calendar-picker" style="width: 350px;" tabindex="0"><!--teleport start--><!--teleport end--><span class="ant-calendar-picker-input ant-input"><input readonly="" placeholder="Start date" class="ant-calendar-range-picker-input" tabindex="-1"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="" placeholder="End date" class="ant-calendar-range-picker-input" tabindex="-1"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span>
 <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
   <div>
     <!---->

components/date-picker/__tests__/__snapshots__/other.test.js.snap

@@ -242,10 +242,10 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
 </div>
 `;
 
-exports[`Picker format by locale date 1`] = `<span class="ant-calendar-picker"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
+exports[`Picker format by locale date 1`] = `<span class="ant-calendar-picker"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
 
-exports[`Picker format by locale dateTime 1`] = `<span class="ant-calendar-picker" style="min-width: 195px;"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
+exports[`Picker format by locale dateTime 1`] = `<span class="ant-calendar-picker" style="min-width: 195px;"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
 
-exports[`Picker format by locale month 1`] = `<span class="ant-calendar-picker"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
+exports[`Picker format by locale month 1`] = `<span class="ant-calendar-picker"><!----><div><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg focusable="false" class="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span>`;
 
-exports[`Picker format by locale week 1`] = `<span class="ant-calendar-picker"><!----><span style="display: inline-block; width: 100%;"><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span></span></span>`;
+exports[`Picker format by locale week 1`] = `<span class="ant-calendar-picker"><!----><span style="display: inline-block; width: 100%;"><input readonly="" placeholder="请选择日期" class="ant-calendar-picker-input ant-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-calendar-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span class="ant-calendar-picker-icon"><!----></span></span></span>`;

components/date-picker/__tests__/showTime.test.js

@@ -124,30 +124,22 @@ describe('RangePicker with showTime', () => {
     );
 
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).toContain(
-        $$('.ant-calendar-time-picker-btn')[0]
+        'ant-calendar-time-picker-btn-disabled',
-          .getAttribute('class')
+      );
-          .split(' '),
+      expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).toContain(
-      ).toContain('ant-calendar-time-picker-btn-disabled');
+        'ant-calendar-ok-btn-disabled',
-      expect(
+      );
-        $$('.ant-calendar-ok-btn')[0]
-          .getAttribute('class')
-          .split(' '),
-      ).toContain('ant-calendar-ok-btn-disabled');
     });
     $$('.ant-calendar-date')[10].click();
     $$('.ant-calendar-date')[11].click();
     await asyncExpect(() => {
-      expect(
+      expect($$('.ant-calendar-time-picker-btn')[0].getAttribute('class').split(' ')).not.toContain(
-        $$('.ant-calendar-time-picker-btn')[0]
+        'ant-calendar-time-picker-btn-disabled',
-          .getAttribute('class')
+      );
-          .split(' '),
+      expect($$('.ant-calendar-ok-btn')[0].getAttribute('class').split(' ')).not.toContain(
-      ).not.toContain('ant-calendar-time-picker-btn-disabled');
+        'ant-calendar-ok-btn-disabled',
-      expect(
+      );
-        $$('.ant-calendar-ok-btn')[0]
-          .getAttribute('class')
-          .split(' '),
-      ).not.toContain('ant-calendar-ok-btn-disabled');
     });
     expect(onChangeFn).toHaveBeenCalled();
     expect(onOpenChangeFn).not.toHaveBeenCalled();

components/date-picker/createPicker.tsx

@@ -1,4 +1,5 @@
-import { CSSProperties, DefineComponent, defineComponent, inject, nextTick } from 'vue';
+import type { CSSProperties, DefineComponent } from 'vue';
+import { defineComponent, inject, nextTick } from 'vue';
 import moment from 'moment';
 import omit from 'lodash-es/omit';
 import MonthCalendar from '../vc-calendar/src/MonthCalendar';

components/date-picker/index.ts

@@ -1,4 +1,4 @@
-import { App, DefineComponent, Plugin } from 'vue';
+import type { App, DefineComponent, Plugin } from 'vue';
 import VcCalendar from '../vc-calendar';
 import MonthCalendar from '../vc-calendar/src/MonthCalendar';
 import createPicker from './createPicker';
@@ -6,40 +6,40 @@ import wrapPicker from './wrapPicker';
 import RangePicker from './RangePicker';
 import WeekPicker from './WeekPicker';
 import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './props';
-import {
+import type {
   DatePickerPropsTypes,
   RangePickerPropsTypes,
   MonthPickerPropsTypes,
   WeekPickerPropsTypes,
 } from './interface';
 
-const WrappedRangePicker = (wrapPicker(
+const WrappedRangePicker = wrapPicker(
   RangePicker as any,
   RangePickerProps,
   'date',
-) as unknown) as DefineComponent<RangePickerPropsTypes>;
+) as unknown as DefineComponent<RangePickerPropsTypes>;
 
-const WrappedWeekPicker = (wrapPicker(
+const WrappedWeekPicker = wrapPicker(
   WeekPicker as any,
   WeekPickerProps,
   'week',
-) as unknown) as DefineComponent<WeekPickerPropsTypes>;
+) as unknown as DefineComponent<WeekPickerPropsTypes>;
 
-const DatePicker = (wrapPicker(
+const DatePicker = wrapPicker(
   createPicker(VcCalendar as any, DatePickerProps, 'ADatePicker'),
   DatePickerProps,
   'date',
-) as unknown) as DefineComponent<DatePickerPropsTypes> & {
+) as unknown as DefineComponent<DatePickerPropsTypes> & {
   readonly RangePicker: typeof WrappedRangePicker;
   readonly MonthPicker: typeof MonthPicker;
   readonly WeekPicker: typeof WrappedWeekPicker;
 };
 
-const MonthPicker = (wrapPicker(
+export const MonthPicker = wrapPicker(
   createPicker(MonthCalendar as any, MonthPickerProps, 'AMonthPicker'),
   MonthPickerProps,
   'month',
-) as unknown) as DefineComponent<MonthPickerPropsTypes>;
+) as unknown as DefineComponent<MonthPickerPropsTypes>;
 
 Object.assign(DatePicker, {
   RangePicker: WrappedRangePicker,
@@ -48,7 +48,7 @@ Object.assign(DatePicker, {
 });
 
 /* istanbul ignore next */
-DatePicker.install = function(app: App) {
+DatePicker.install = function (app: App) {
   app.component(DatePicker.name, DatePicker);
   app.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
   app.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
@@ -56,4 +56,6 @@ DatePicker.install = function(app: App) {
   return app;
 };
 
+export { WrappedRangePicker as RangePicker, WrappedWeekPicker as WeekPicker };
+
 export default DatePicker as typeof DatePicker & Plugin;

components/date-picker/interface.tsx

@@ -1,6 +1,7 @@
-import moment from 'moment';
+import type moment from 'moment';
-import { CSSProperties } from 'vue';
+import type { CSSProperties } from 'vue';
-import { tuple, VueNode } from '../_util/type';
+import type { VueNode } from '../_util/type';
+import { tuple } from '../_util/type';
 
 export type RangePickerValue =
   | undefined[]
@@ -56,9 +57,7 @@ export interface DatePickerPropsTypes extends PickerProps, SinglePickerProps {
   showTime?: Record<string, any> | boolean;
   showToday?: boolean;
   open?: boolean;
-  disabledTime?: (
+  disabledTime?: (current?: moment.Moment | null) => {
-    current?: moment.Moment | null,
-  ) => {
     disabledHours?: () => number[];
     disabledMinutes?: () => number[];
     disabledSeconds?: () => number[];

components/date-picker/props.ts

@@ -1,5 +1,5 @@
-import { PropType } from 'vue';
+import type { PropType } from 'vue';
-import moment from 'moment';
+import type moment from 'moment';
 import PropTypes, { withUndefined } from '../_util/vue-types';
 import { tuple } from '../_util/type';
 

components/date-picker/utils.ts

@@ -1,4 +1,4 @@
-import moment from 'moment';
+import type moment from 'moment';
 
 type Value = moment.Moment | undefined | null;
 type Format = string | string[] | undefined | ((val?: Value) => string | string[] | undefined);

components/date-picker/wrapPicker.tsx

@@ -1,4 +1,5 @@
-import { provide, inject, defineComponent, DefineComponent, nextTick } from 'vue';
+import type { DefineComponent } from 'vue';
+import { provide, inject, defineComponent, nextTick } from 'vue';
 import TimePickerPanel from '../vc-time-picker/Panel';
 import classNames from '../_util/classNames';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';

components/descriptions/Cell.tsx

@@ -1,4 +1,4 @@
-import { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
+import type { VNodeTypes, HTMLAttributes, FunctionalComponent, CSSProperties } from 'vue';
 
 function notEmpty(val: any) {
   return val !== undefined && val !== null;

components/descriptions/Row.tsx

@@ -1,7 +1,9 @@
 import Cell from './Cell';
 import { getSlot, getClass, getStyle } from '../_util/props-util';
-import { FunctionalComponent, VNode, inject, ref } from 'vue';
+import type { FunctionalComponent, VNode } from 'vue';
-import { descriptionsContext, DescriptionsContextProp } from './index';
+import { inject, ref } from 'vue';
+import type { DescriptionsContextProp } from './index';
+import { descriptionsContext } from './index';
 
 interface CellConfig {
   component: string | [string, string];

components/descriptions/index.tsx

@@ -1,27 +1,18 @@
-import {
+import type {
-  ref,
   Ref,
   App,
-  defineComponent,
   PropType,
   VNode,
   HTMLAttributes,
   ExtractPropTypes,
-  onMounted,
-  onBeforeUnmount,
   Plugin,
   CSSProperties,
-  provide,
-  toRef,
   InjectionKey,
-  computed,
 } from 'vue';
+import { ref, defineComponent, onMounted, onBeforeUnmount, provide, toRef, computed } from 'vue';
 import warning from '../_util/warning';
-import ResponsiveObserve, {
+import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
-  Breakpoint,
+import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
-  responsiveArray,
-  ScreenMap,
-} from '../_util/responsiveObserve';
 import Row from './Row';
 import PropTypes from '../_util/vue-types';
 import { tuple } from '../_util/type';
@@ -154,9 +145,8 @@ export interface DescriptionsContextProp {
   contentStyle?: Ref<CSSProperties>;
 }
 
-export const descriptionsContext: InjectionKey<DescriptionsContextProp> = Symbol(
+export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
-  'descriptionsContext',
+  Symbol('descriptionsContext');
-);
 
 const Descriptions = defineComponent({
   name: 'ADescriptions',
@@ -244,12 +234,11 @@ const Descriptions = defineComponent({
   },
 });
 
-Descriptions.install = function(app: App) {
+Descriptions.install = function (app: App) {
   app.component(Descriptions.name, Descriptions);
   app.component(Descriptions.Item.name, Descriptions.Item);
   return app;
 };
-
 export default Descriptions as typeof Descriptions &
   Plugin & {
     readonly Item: typeof DescriptionsItem;

components/divider/index.tsx

@@ -1,5 +1,6 @@
 import { flattenChildren } from '../_util/props-util';
-import { computed, defineComponent, ExtractPropTypes, inject, PropType } from 'vue';
+import type { ExtractPropTypes, PropType } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
 import { defaultConfigProvider } from '../config-provider';
 import { withInstall } from '../_util/type';
 

components/drawer/__tests__/__snapshots__/Drawer.test.js.snap

@@ -8,7 +8,7 @@ exports[`Drawer class is test_drawer 1`] = `
       <div class="ant-drawer-content">
         <div class="ant-drawer-wrapper-body">
           <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
           </div>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
@@ -61,7 +61,7 @@ exports[`Drawer have a title 1`] = `
       <div class="ant-drawer-content">
         <div class="ant-drawer-wrapper-body">
           <div class="ant-drawer-header">
-            <div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+            <div class="ant-drawer-title">Test Title</div><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
           </div>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
@@ -80,7 +80,7 @@ exports[`Drawer render correctly 1`] = `
       <div class="ant-drawer-content">
         <div class="ant-drawer-wrapper-body">
           <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
           </div>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>
@@ -99,7 +99,7 @@ exports[`Drawer render top drawer 1`] = `
       <div class="ant-drawer-content">
         <div class="ant-drawer-wrapper-body">
           <div class="ant-drawer-header-no-title">
-            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
+            <!----><button aria-label="Close" class="ant-drawer-close"><span role="img" aria-label="close" class="anticon anticon-close"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></button>
           </div>
           <div class="ant-drawer-body">Here is content of Drawer</div>
         </div>