Merge remote-tracking branch 'origin/main' into feat-v3.3

CHANGELOG.en-US.md

@@ -57,6 +57,43 @@
   - 💄 优化 Upload 操作按钮的样式细节。
 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。
 
+## 3.2.15
+
+`2022-11-10`
+
+- 🐞 Fix the problem of preview image error when `Image` is deleted dynamically
+
+## 3.2.14
+
+`2022-11-07`
+
+- 🐞 Fix the problem of dynamic theme failure when custom `prefixCls` [#6063](https://github.com/vueComponent/ant-design-vue/issues/6063)
+- 🐞 Fix `DatePicker` error when using select and other popup components as slots [#6062](https://github.com/vueComponent/ant-design-vue/issues/6062)
+- 🐞 Fix `DirectoryTree` not exposing scrollTo method [#6067](https://github.com/vueComponent/ant-design-vue/issues/6067)
+- 🐞 Fix `RangePicker` popup position does not change [#6073](https://github.com/vueComponent/ant-design-vue/issues/6073)
+
+## 3.2.13
+
+`2022-10-08`
+
+- 🌟 Support Vue 3 upgrade tool `@vue/compat` [#5973](https://github.com/vueComponent/ant-design-vue/issues/5973)
+- 🌟 Cascader add tagRender slot [#5954](https://github.com/vueComponent/ant-design-vue/issues/5954)
+- 🐞 Fix image flickering issue when Image preview is closed [#5955](https://github.com/vueComponent/ant-design-vue/issues/5955)
+- 🐞 Fix Tag close icon style display misplaced [#5956](https://github.com/vueComponent/ant-design-vue/issues/5956)
+- 🐞 Fix Table loading property ts type error [#5964](https://github.com/vueComponent/ant-design-vue/issues/5964)
+- 🐞 Fix Transfer deletion exception [#5975](https://github.com/vueComponent/ant-design-vue/issues/5975)
+- 🐞 Fix the scroll shadow display issue of Table fixed column [#5996](https://github.com/vueComponent/ant-design-vue/issues/5996)
+- 🐞 Fix DirectoryTree's default expansion failure issue when customizing fieldNames [#6007](https://github.com/vueComponent/ant-design-vue/issues/6007)
+
+## 3.2.12
+
+`2022-09-02`
+
+- 🐞 Fix DescriptionItem labelStyle does not take effect [#5920](https://github.com/vueComponent/ant-design-vue/issues/5920)
+- 🌟 Typography copy button prevents bubbling [##5746](https://github.com/vueComponent/ant-design-vue/issues/5746)
+- 🐞 Fix table merged column scroll shadow occlusion issue [#5786](https://github.com/vueComponent/ant-design-vue/issues/5786)
+- 🐞 Fix the inconsistency between css var and ConfigProvider variables [#5929](https://github.com/vueComponent/ant-design-vue/issues/5929)
+
 ## 3.2.11
 
 `2022-08-08`

CHANGELOG.zh-CN.md

@@ -57,6 +57,43 @@
   - 💄 优化 Upload 操作按钮的样式细节。
 - 🐞 修复 Switch 在暗黑主题下关闭时的颜色问题。
 
+## 3.2.15
+
+`2022-11-10`
+
+- 🐞 修复 `Image` 动态删除时，预览图片错误问题
+
+## 3.2.14
+
+`2022-11-07`
+
+- 🐞 修复自定义 `prefixCls` 时，动态主题失效问题 [#6063](https://github.com/vueComponent/ant-design-vue/issues/6063)
+- 🐞 修复 `DatePicker` 使用 select 等弹窗组件作为插槽时，报错问题 [#6062](https://github.com/vueComponent/ant-design-vue/issues/6062)
+- 🐞 修复 `DirectoryTree` 未暴露 scrollTo 方法 [#6067](https://github.com/vueComponent/ant-design-vue/issues/6067)
+- 🐞 修复 `RangePicker` 弹窗位置不改变问题 [#6073](https://github.com/vueComponent/ant-design-vue/issues/6073)
+
+## 3.2.13
+
+`2022-10-08`
+
+- 🌟 支持 Vue 3 升级工具 `@vue/compat` [#5973](https://github.com/vueComponent/ant-design-vue/issues/5973)
+- 🌟 Cascader 添加 tagRender 插槽 [#5954](https://github.com/vueComponent/ant-design-vue/issues/5954)
+- 🐞 修复 Image 预览关闭时，图片闪动问题 [#5955](https://github.com/vueComponent/ant-design-vue/issues/5955)
+- 🐞 修复 Tag 关闭图标样式显示错位 [#5956](https://github.com/vueComponent/ant-design-vue/issues/5956)
+- 🐞 修复 Table loading 属性 ts 类型错误 [#5964](https://github.com/vueComponent/ant-design-vue/issues/5964)
+- 🐞 修复 Transfer 删除异常问题 [#5975](https://github.com/vueComponent/ant-design-vue/issues/5975)
+- 🐞 修复 Table 固定列的滚动阴影显示问题 [#5996](https://github.com/vueComponent/ant-design-vue/issues/5996)
+- 🐞 修复 DirectoryTree 在自定义 fieldNames 时，默认展开失效问题 [#6007](https://github.com/vueComponent/ant-design-vue/issues/6007)
+
+## 3.2.12
+
+`2022-09-02`
+
+- 🐞 修复 DescriptionItem labelStyle 不生效问题 [#5920](https://github.com/vueComponent/ant-design-vue/issues/5920)
+- 🌟 Typography 复制按钮阻止冒泡 [##5746](https://github.com/vueComponent/ant-design-vue/issues/5746)
+- 🐞 修复 table 合并列滚动阴影遮挡问题 [#5786](https://github.com/vueComponent/ant-design-vue/issues/5786)
+- 🐞 修复 css var 和 ConfigProvider 变量不一致问题 [#5929](https://github.com/vueComponent/ant-design-vue/issues/5929)
+
 ## 3.2.11
 
 `2022-08-08`

LICENSE

@@ -44,3 +44,25 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+MIT License
+
+Copyright (c) 2019-PRESENT Anthony Fu<https://github.com/antfu>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README-zh_CN.md

@@ -86,7 +86,7 @@ ant-design-vue 是 MIT 协议的开源项目。为了项目能够更好的持续
 
 Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
 
-<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
+<a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
 
 ## Backers
 

README.md

@@ -80,7 +80,7 @@ ant-design-vue is an MIT-licensed open source project. In order to achieve bette
 
 Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
 
-<a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
+<a href="http://www.jeecg.com/" target="_blank"><img src="https://aliyuncdn.antdv.com/jeecg-logo.png" height="64"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/0/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/1/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/2/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/3/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/4/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/5/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/6/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/7/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/8/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/9/avatar.svg"></a> <a href="https://opencollective.com/ant-design-vue/sponsor/10/website" target="_blank"><img src="https://opencollective.com/ant-design-vue/sponsor/10/avatar.svg"></a>
 
 ## [More Sponsor (From Patreon、alipay、wechat、paypal...)](https://github.com/vueComponent/ant-design-vue/blob/master/BACKERS.md)
 

antd-tools/generator-types/src/parser.ts

@@ -25,7 +25,7 @@ function readLine(input: string) {
 }
 
 function splitTableLine(line: string) {
-  line = line.replace('\\|', 'JOIN');
+  line = line.replace(/\\\|/g, 'JOIN');
 
   const items = line.split('|').map(item => item.trim().replace('JOIN', '|'));
 

components/_util/ActionButton.tsx

@@ -26,6 +26,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ActionButton',
   props: actionButtonProps,
   setup(props, { slots }) {

components/_util/BaseInput.tsx

@@ -2,6 +2,7 @@ import { defineComponent, ref, withDirectives } from 'vue';
 import antInput from './antInputDirective';
 import PropTypes from './vue-types';
 const BaseInput = defineComponent({
+  compatConfig: { MODE: 3 },
   props: {
     value: PropTypes.string.def(''),
   },

components/_util/Portal.tsx

@@ -11,6 +11,7 @@ import {
 import { useInjectPortal } from '../vc-trigger/context';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: {

components/_util/PortalWrapper.tsx

@@ -49,6 +49,7 @@ const getParent = (getContainer: GetContainer) => {
 export type GetContainer = string | HTMLElement | (() => HTMLElement);
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PortalWrapper',
   inheritAttrs: false,
   props: {

components/_util/__mocks__/Portal.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: ['getContainer'],

components/_util/hooks/_vueuse/_configurable.ts

@@ -0,0 +1,34 @@
+import { isClient } from './is';
+
+export interface ConfigurableWindow {
+  /*
+   * Specify a custom `window` instance, e.g. working with iframes or in testing environments.
+   */
+  window?: Window;
+}
+
+export interface ConfigurableDocument {
+  /*
+   * Specify a custom `document` instance, e.g. working with iframes or in testing environments.
+   */
+  document?: Document;
+}
+
+export interface ConfigurableNavigator {
+  /*
+   * Specify a custom `navigator` instance, e.g. working with iframes or in testing environments.
+   */
+  navigator?: Navigator;
+}
+
+export interface ConfigurableLocation {
+  /*
+   * Specify a custom `location` instance, e.g. working with iframes or in testing environments.
+   */
+  location?: Location;
+}
+
+export const defaultWindow = /* #__PURE__ */ isClient ? window : undefined;
+export const defaultDocument = /* #__PURE__ */ isClient ? window.document : undefined;
+export const defaultNavigator = /* #__PURE__ */ isClient ? window.navigator : undefined;
+export const defaultLocation = /* #__PURE__ */ isClient ? window.location : undefined;

components/_util/hooks/_vueuse/is.ts

@@ -0,0 +1,28 @@
+export const isClient = typeof window !== 'undefined';
+export const isDef = <T = any>(val?: T): val is T => typeof val !== 'undefined';
+export const assert = (condition: boolean, ...infos: any[]) => {
+  if (!condition) console.warn(...infos);
+};
+const toString = Object.prototype.toString;
+export const isBoolean = (val: any): val is boolean => typeof val === 'boolean';
+export const isFunction = <T extends Function>(val: any): val is T => typeof val === 'function';
+export const isNumber = (val: any): val is number => typeof val === 'number';
+export const isString = (val: unknown): val is string => typeof val === 'string';
+export const isObject = (val: any): val is object => toString.call(val) === '[object Object]';
+export const isWindow = (val: any): val is Window =>
+  typeof window !== 'undefined' && toString.call(val) === '[object Window]';
+export const now = () => Date.now();
+export const timestamp = () => +Date.now();
+export const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n));
+export const noop = () => {};
+export const rand = (min: number, max: number) => {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+};
+export const isIOS =
+  /* #__PURE__ */ isClient &&
+  window?.navigator?.userAgent &&
+  /iP(ad|hone|od)/.test(window.navigator.userAgent);
+export const hasOwn = <T extends object, K extends keyof T>(val: T, key: K): key is K =>
+  Object.prototype.hasOwnProperty.call(val, key);

components/_util/hooks/_vueuse/resolveUnref.ts

@@ -0,0 +1,9 @@
+import { unref } from 'vue';
+import type { MaybeComputedRef } from './types';
+
+/**
+ * Get the value of value/ref/getter.
+ */
+export function resolveUnref<T>(r: MaybeComputedRef<T>): T {
+  return typeof r === 'function' ? (r as any)() : unref(r);
+}

components/_util/hooks/_vueuse/tryOnMounted.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line no-restricted-imports
+import { getCurrentInstance, nextTick, onMounted } from 'vue';
+import type { Fn } from './types';
+
+/**
+ * Call onMounted() if it's inside a component lifecycle, if not, just call the function
+ *
+ * @param fn
+ * @param sync if set to false, it will run in the nextTick() of Vue
+ */
+export function tryOnMounted(fn: Fn, sync = true) {
+  if (getCurrentInstance()) onMounted(fn);
+  else if (sync) fn();
+  else nextTick(fn);
+}

components/_util/hooks/_vueuse/tryOnScopeDispose.ts

@@ -0,0 +1,15 @@
+import { getCurrentScope, onScopeDispose } from 'vue';
+import type { Fn } from './types';
+
+/**
+ * Call onScopeDispose() if it's inside a effect scope lifecycle, if not, do nothing
+ *
+ * @param fn
+ */
+export function tryOnScopeDispose(fn: Fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}

components/_util/hooks/_vueuse/types.ts

@@ -0,0 +1,142 @@
+import type { ComputedRef, Ref, WatchOptions, WatchSource } from 'vue';
+
+/**
+ * Any function
+ */
+export type Fn = () => void;
+
+/**
+ * A ref that allow to set null or undefined
+ */
+export type RemovableRef<T> = Omit<Ref<T>, 'value'> & {
+  get value(): T;
+  set value(value: T | null | undefined);
+};
+
+/**
+ * @deprecated Use `RemovableRef`
+ */
+export type RemoveableRef<T> = RemovableRef<T>;
+
+/**
+ * Maybe it's a ref, or a plain value
+ *
+ * ```ts
+ * type MaybeRef<T> = T | Ref<T>
+ * ```
+ */
+export type MaybeRef<T> = T | Ref<T>;
+
+/**
+ * Maybe it's a ref, or a plain value, or a getter function
+ *
+ * ```ts
+ * type MaybeComputedRef<T> = (() => T) | T | Ref<T> | ComputedRef<T>
+ * ```
+ */
+export type MaybeComputedRef<T> = MaybeReadonlyRef<T> | MaybeRef<T>;
+
+/**
+ * Maybe it's a computed ref, or a getter function
+ *
+ * ```ts
+ * type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>
+ * ```
+ */
+export type MaybeReadonlyRef<T> = (() => T) | ComputedRef<T>;
+
+/**
+ * Make all the nested attributes of an object or array to MaybeRef<T>
+ *
+ * Good for accepting options that will be wrapped with `reactive` or `ref`
+ *
+ * ```ts
+ * UnwrapRef<DeepMaybeRef<T>> === T
+ * ```
+ */
+export type DeepMaybeRef<T> = T extends Ref<infer V>
+  ? MaybeRef<V>
+  : T extends Array<any> | object
+  ? { [K in keyof T]: DeepMaybeRef<T[K]> }
+  : MaybeRef<T>;
+
+/**
+ * Infers the element type of an array
+ */
+export type ElementOf<T> = T extends (infer E)[] ? E : never;
+
+export type ShallowUnwrapRef<T> = T extends Ref<infer P> ? P : T;
+
+export type Awaitable<T> = Promise<T> | T;
+
+export type ArgumentsType<T> = T extends (...args: infer U) => any ? U : never;
+
+export interface Pausable {
+  /**
+   * A ref indicate whether a pausable instance is active
+   */
+  isActive: Ref<boolean>;
+
+  /**
+   * Temporary pause the effect from executing
+   */
+  pause: Fn;
+
+  /**
+   * Resume the effects
+   */
+  resume: Fn;
+}
+
+export interface Stoppable {
+  /**
+   * A ref indicate whether a stoppable instance is executing
+   */
+  isPending: Ref<boolean>;
+
+  /**
+   * Stop the effect from executing
+   */
+  stop: Fn;
+
+  /**
+   * Start the effects
+   */
+  start: Fn;
+}
+
+/**
+ * @deprecated Use `Stoppable`
+ */
+export type Stopable = Stoppable;
+
+export interface ConfigurableFlush {
+  /**
+   * Timing for monitoring changes, refer to WatchOptions for more details
+   *
+   * @default 'pre'
+   */
+  flush?: WatchOptions['flush'];
+}
+
+export interface ConfigurableFlushSync {
+  /**
+   * Timing for monitoring changes, refer to WatchOptions for more details.
+   * Unlike `watch()`, the default is set to `sync`
+   *
+   * @default 'sync'
+   */
+  flush?: WatchOptions['flush'];
+}
+
+// Internal Types
+export type MapSources<T> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V> ? V : never;
+};
+export type MapOldSources<T, Immediate> = {
+  [K in keyof T]: T[K] extends WatchSource<infer V>
+    ? Immediate extends true
+      ? V | undefined
+      : V
+    : never;
+};

components/_util/hooks/_vueuse/unrefElement.ts

@@ -0,0 +1,24 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { MaybeComputedRef, MaybeRef } from './types';
+import { resolveUnref } from './resolveUnref';
+
+export type VueInstance = ComponentPublicInstance;
+export type MaybeElementRef<T extends MaybeElement = MaybeElement> = MaybeRef<T>;
+export type MaybeComputedElementRef<T extends MaybeElement = MaybeElement> = MaybeComputedRef<T>;
+export type MaybeElement = HTMLElement | SVGElement | VueInstance | undefined | null;
+
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends VueInstance
+  ? Exclude<MaybeElement, VueInstance>
+  : T | undefined;
+
+/**
+ * Get the dom element of a ref of element or Vue component instance
+ *
+ * @param elRef
+ */
+export function unrefElement<T extends MaybeElement>(
+  elRef: MaybeComputedElementRef<T>,
+): UnRefElementReturn<T> {
+  const plain = resolveUnref(elRef);
+  return (plain as VueInstance)?.$el ?? plain;
+}

components/_util/hooks/_vueuse/useElementSize.ts

@@ -0,0 +1,65 @@
+import { ref, watch } from 'vue';
+import type { MaybeComputedElementRef } from './unrefElement';
+import type { UseResizeObserverOptions } from './useResizeObserver';
+import { useResizeObserver } from './useResizeObserver';
+import { unrefElement } from './unrefElement';
+
+export interface ElementSize {
+  width: number;
+  height: number;
+}
+
+/**
+ * Reactive size of an HTML element.
+ *
+ * @see https://vueuse.org/useElementSize
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useElementSize(
+  target: MaybeComputedElementRef,
+  initialSize: ElementSize = { width: 0, height: 0 },
+  options: UseResizeObserverOptions = {},
+) {
+  const { box = 'content-box' } = options;
+  const width = ref(initialSize.width);
+  const height = ref(initialSize.height);
+
+  useResizeObserver(
+    target,
+    ([entry]) => {
+      const boxSize =
+        box === 'border-box'
+          ? entry.borderBoxSize
+          : box === 'content-box'
+          ? entry.contentBoxSize
+          : entry.devicePixelContentBoxSize;
+
+      if (boxSize) {
+        width.value = boxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0);
+        height.value = boxSize.reduce((acc, { blockSize }) => acc + blockSize, 0);
+      } else {
+        // fallback
+        width.value = entry.contentRect.width;
+        height.value = entry.contentRect.height;
+      }
+    },
+    options,
+  );
+
+  watch(
+    () => unrefElement(target),
+    ele => {
+      width.value = ele ? initialSize.width : 0;
+      height.value = ele ? initialSize.height : 0;
+    },
+  );
+
+  return {
+    width,
+    height,
+  };
+}
+
+export type UseElementSizeReturn = ReturnType<typeof useElementSize>;

components/_util/hooks/_vueuse/useResizeObserver.ts

@@ -0,0 +1,94 @@
+import { tryOnScopeDispose } from './tryOnScopeDispose';
+import { watch } from 'vue';
+import type { MaybeComputedElementRef } from './unrefElement';
+import { unrefElement } from './unrefElement';
+import { useSupported } from './useSupported';
+import type { ConfigurableWindow } from './_configurable';
+import { defaultWindow } from './_configurable';
+
+export interface ResizeObserverSize {
+  readonly inlineSize: number;
+  readonly blockSize: number;
+}
+
+export interface ResizeObserverEntry {
+  readonly target: Element;
+  readonly contentRect: DOMRectReadOnly;
+  readonly borderBoxSize?: ReadonlyArray<ResizeObserverSize>;
+  readonly contentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+  readonly devicePixelContentBoxSize?: ReadonlyArray<ResizeObserverSize>;
+}
+
+export type ResizeObserverCallback = (
+  entries: ReadonlyArray<ResizeObserverEntry>,
+  observer: ResizeObserver,
+) => void;
+
+export interface UseResizeObserverOptions extends ConfigurableWindow {
+  /**
+   * Sets which box model the observer will observe changes to. Possible values
+   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
+   *
+   * @default 'content-box'
+   */
+  box?: ResizeObserverBoxOptions;
+}
+
+declare class ResizeObserver {
+  constructor(callback: ResizeObserverCallback);
+  disconnect(): void;
+  observe(target: Element, options?: UseResizeObserverOptions): void;
+  unobserve(target: Element): void;
+}
+
+/**
+ * Reports changes to the dimensions of an Element's content or the border-box
+ *
+ * @see https://vueuse.org/useResizeObserver
+ * @param target
+ * @param callback
+ * @param options
+ */
+export function useResizeObserver(
+  target: MaybeComputedElementRef,
+  callback: ResizeObserverCallback,
+  options: UseResizeObserverOptions = {},
+) {
+  const { window = defaultWindow, ...observerOptions } = options;
+  let observer: ResizeObserver | undefined;
+  const isSupported = useSupported(() => window && 'ResizeObserver' in window);
+
+  const cleanup = () => {
+    if (observer) {
+      observer.disconnect();
+      observer = undefined;
+    }
+  };
+
+  const stopWatch = watch(
+    () => unrefElement(target),
+    el => {
+      cleanup();
+
+      if (isSupported.value && window && el) {
+        observer = new ResizeObserver(callback);
+        observer!.observe(el, observerOptions);
+      }
+    },
+    { immediate: true, flush: 'post' },
+  );
+
+  const stop = () => {
+    cleanup();
+    stopWatch();
+  };
+
+  tryOnScopeDispose(stop);
+
+  return {
+    isSupported,
+    stop,
+  };
+}
+
+export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;

components/_util/hooks/_vueuse/useSupported.ts

@@ -0,0 +1,14 @@
+import { tryOnMounted } from './tryOnMounted';
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+
+export function useSupported(callback: () => unknown, sync = false) {
+  const isSupported = ref() as Ref<boolean>;
+
+  const update = () => (isSupported.value = Boolean(callback()));
+
+  update();
+
+  tryOnMounted(update, sync);
+  return isSupported;
+}

components/_util/props-util/index.js

@@ -366,8 +366,8 @@ export function filterEmpty(children = []) {
   children.forEach(child => {
     if (Array.isArray(child)) {
       res.push(...child);
-    } else if (child && child.type === Fragment) {
-      res.push(...child.children);
+    } else if (child?.type === Fragment) {
+      res.push(...filterEmpty(child.children));
     } else {
       res.push(child);
     }

components/_util/transButton.tsx

@@ -15,6 +15,7 @@ const inlineStyle = {
 };
 
 const TransButton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TransButton',
   inheritAttrs: false,
   props: {

components/_util/wave.tsx

@@ -21,6 +21,7 @@ function isNotGrey(color: string) {
   return true;
 }
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Wave',
   props: {
     insertExtraNode: Boolean,

components/affix/index.tsx

@@ -72,6 +72,7 @@ export type AffixExpose = {
 
 export type AffixInstance = ComponentPublicInstance<AffixProps, AffixExpose>;
 const Affix = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAffix',
   props: affixProps(),
   setup(props, { slots, emit, expose }) {

components/alert/index.tsx

@@ -63,6 +63,7 @@ export const alertProps = () => ({
 export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;
 
 const Alert = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAlert',
   inheritAttrs: false,
   props: alertProps(),

components/anchor/Anchor.tsx

@@ -73,6 +73,7 @@ export interface AnchorState {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchor',
   inheritAttrs: false,
   props: anchorProps(),

components/anchor/AnchorLink.tsx

@@ -16,6 +16,7 @@ export const anchorLinkProps = () => ({
 export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchorLink',
   props: initDefaultProps(anchorLinkProps(), { href: '#' }),
   slots: ['title'],

components/anchor/__tests__/__snapshots__/demo.test.js.snap

@@ -32,11 +32,11 @@ exports[`renders ./components/anchor/demo/basic.vue correctly 1`] = `
 exports[`renders ./components/anchor/demo/customizeHighlight.vue correctly 1`] = `
 <div class="ant-anchor-wrapper" style="max-height: 100vh;">
   <div class="ant-anchor ant-anchor-fixed">
-    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball visible" style="top: -4.5px;"></span></div>
+    <div class="ant-anchor-ink"><span class="ant-anchor-ink-ball"></span></div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-basic" title="Basic demo">Basic demo</a>
       <!---->
     </div>
-    <div class="ant-anchor-link ant-anchor-link-active"><a class="ant-anchor-link-title ant-anchor-link-title-active" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
+    <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#components-anchor-demo-static" title="Static demo">Static demo</a>
       <!---->
     </div>
     <div class="ant-anchor-link"><a class="ant-anchor-link-title" href="#API" title="API">API</a>

components/auto-complete/index.tsx

@@ -41,6 +41,7 @@ export const AutoCompleteOption = Option;
 export const AutoCompleteOptGroup = OptGroup;
 
 const AutoComplete = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: autoCompleteProps(),

components/avatar/Avatar.tsx

@@ -37,6 +37,7 @@ export const avatarProps = () => ({
 export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const Avatar = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatar',
   inheritAttrs: false,
   props: avatarProps(),

components/avatar/Group.tsx

@@ -27,6 +27,7 @@ export const groupProps = () => ({
 export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
 
 const Group = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatarGroup',
   inheritAttrs: false,
   props: groupProps(),

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

@@ -20,37 +20,37 @@ exports[`renders ./components/avatar/demo/basic.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/avatar/demo/dynamic.vue correctly 1`] = `
-<span style="background-color: rgb(245, 106, 0); vertical-align: middle;" class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span>
+<span style="background-color: rgb(245, 106, 0); vertical-align: middle;" class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
 <button style="margin-left: 16px; vertical-align: middle;" class="ant-btn ant-btn-sm" type="button">
   <!----><span>改 变</span>
 </button>
 `;
 
 exports[`renders ./components/avatar/demo/group.vue correctly 1`] = `
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(245, 106, 0);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">K</span></span>
   <!----><span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
   <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
-  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">K</span></span>
+  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">+2</span></span>
 </div>
 <div class="ant-divider ant-divider-horizontal" role="separator">
   <!---->
 </div>
-<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">K</span></span>
-  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">+2</span></span>
+<div class="ant-avatar-group"><span class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span><span style="background-color: rgb(24, 144, 255);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">K</span></span>
+  <!----><span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-lg ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">+2</span></span>
 </div>
 `;
 
-exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon" style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;
+exports[`renders ./components/avatar/demo/responsive.vue correctly 1`] = `<span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="ant-design" class="anticon anticon-ant-design"><svg focusable="false" class="" data-icon="ant-design" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M716.3 313.8c19-18.9 19-49.7 0-68.6l-69.9-69.9.1.1c-18.5-18.5-50.3-50.3-95.3-95.2-21.2-20.7-55.5-20.5-76.5.5L80.9 474.2a53.84 53.84 0 000 76.4L474.6 944a54.14 54.14 0 0076.5 0l165.1-165c19-18.9 19-49.7 0-68.6a48.7 48.7 0 00-68.7 0l-125 125.2c-5.2 5.2-13.3 5.2-18.5 0L189.5 521.4c-5.2-5.2-5.2-13.3 0-18.5l314.4-314.2c.4-.4.9-.7 1.3-1.1 5.2-4.1 12.4-3.7 17.2 1.1l125.2 125.1c19 19 49.8 19 68.7 0zM408.6 514.4a106.3 106.2 0 10212.6 0 106.3 106.2 0 10-212.6 0zm536.2-38.6L821.9 353.5c-19-18.9-49.8-18.9-68.7.1a48.4 48.4 0 000 68.6l83 82.9c5.2 5.2 5.2 13.3 0 18.5l-81.8 81.7a48.4 48.4 0 000 68.6 48.7 48.7 0 0068.7 0l121.8-121.7a53.93 53.93 0 00-.1-76.4z"></path></svg></span></span>`;
 
 exports[`renders ./components/avatar/demo/type.vue correctly 1`] = `
 <span class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
-<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span>
-<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">USER</span></span>
+<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
+<span class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">USER</span></span>
 <span class="ant-avatar ant-avatar-circle ant-avatar-image"><img src="https://joeschmoe.io/api/v1/random"></span>
-<span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);">U</span></span>
+<span style="color: rgb(245, 106, 0); background-color: rgb(253, 227, 207);" class="ant-avatar ant-avatar-circle"><span class="ant-avatar-string" style="opacity: 0;">U</span></span>
 <span style="background-color: rgb(135, 208, 104);" class="ant-avatar ant-avatar-circle ant-avatar-icon"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span>
 `;

components/avatar/index.en-US.md

@@ -14,7 +14,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | alt | This attribute defines the alternative text describing the image | string | - |  |
-| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
+| crossOrigin | cors settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
 | draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
 | gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
 | icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |  |

components/avatar/index.zh-CN.md

@@ -19,7 +19,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | alt | 图像无法显示时的替代文本 | string | - |  |
-| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
+| crossOrigin | cors 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
 | draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
 | icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |  |

components/back-top/index.tsx

@@ -32,6 +32,7 @@ export const backTopProps = () => ({
 export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
 
 const BackTop = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABackTop',
   inheritAttrs: false,
   props: backTopProps(),

components/badge/Badge.tsx

@@ -34,6 +34,7 @@ export const badgeProps = () => ({
 export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadge',
   Ribbon,
   inheritAttrs: false,

components/badge/Ribbon.tsx

@@ -16,6 +16,7 @@ export const ribbonProps = () => ({
 export type RibbonProps = Partial<ExtractPropTypes<ReturnType<typeof ribbonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadgeRibbon',
   inheritAttrs: false,
   props: ribbonProps(),

components/badge/ScrollNumber.tsx

@@ -18,6 +18,7 @@ const scrollNumberProps = {
 export type ScrollNumberProps = Partial<ExtractPropTypes<typeof scrollNumberProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ScrollNumber',
   inheritAttrs: false,
   props: scrollNumberProps,

components/badge/SingleNumber.tsx

@@ -45,6 +45,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SingleNumber',
   props: {
     prefixCls: String,

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

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/badge/demo/basic.vue correctly 1`] = `
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
 <!----></span>
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">0</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="0"><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"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><span role="img" aria-label="clock-circle" style="color: rgb(245, 34, 45);" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><span role="img" aria-label="clock-circle" style="color: rgb(245, 34, 45);" class="anticon anticon-clock-circle ant-scroll-number-custom-component"><svg focusable="false" class="" data-icon="clock-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 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span>
 <!----></span>
 `;
 
 exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
-<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<div><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
   <div class="ant-btn-group"><button class="ant-btn" type="button">
       <!----><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span>
@@ -21,7 +21,7 @@ exports[`renders ./components/badge/demo/change.vue correctly 1`] = `
 <div class="ant-divider ant-divider-horizontal" role="separator">
   <!---->
 </div>
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-dot"></sup>
 <!----></span>
 <button type="button" role="switch" aria-checked="true" class="ant-switch-checked ant-switch">
   <div class="ant-switch-handle">
@@ -64,7 +64,7 @@ exports[`renders ./components/badge/demo/dot.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/link.vue correctly 1`] = `
-<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<a href="#"><span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="5"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
   <!----></span>
 </a>
 `;
@@ -78,13 +78,13 @@ exports[`renders ./components/badge/demo/no-wrapper.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/overflow.vue correctly 1`] = `
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">9</p></span></sup>
 <!----></span>
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="100">99+</sup>
 <!----></span>
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="99">10+</sup>
 <!----></span>
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count ant-badge-multiple-words" title="1000">999+</sup>
 <!----></span>
 `;
 
@@ -246,6 +246,6 @@ exports[`renders ./components/badge/demo/status.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/title.vue correctly 1`] = `
-<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%);"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
+<span class="ant-badge"><span class="ant-avatar ant-avatar-lg ant-avatar-square"><span class="ant-avatar-string" style="opacity: 0;"><!----></span></span><sup data-show="true" class="ant-scroll-number ant-badge-count" title="Custom hover text"><span class="ant-scroll-number-only" style="transition: none;"><p class="ant-scroll-number-only-unit current">5</p></span></sup>
 <!----></span>
 `;

components/breadcrumb/Breadcrumb.tsx

@@ -52,6 +52,7 @@ function defaultItemRender(opt: {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumb',
   props: breadcrumbProps(),
   slots: ['separator', 'itemRender'],

components/breadcrumb/BreadcrumbItem.tsx

@@ -17,6 +17,7 @@ export const breadcrumbItemProps = () => ({
 
 export type BreadcrumbItemProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbItemProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbItem',
   inheritAttrs: false,
   __ANT_BREADCRUMB_ITEM: true,

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -11,6 +11,7 @@ export type BreadcrumbSeparatorProps = Partial<
 >;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,

components/button/LoadingIcon.tsx

@@ -25,6 +25,7 @@ const resetStyle = (node: HTMLSpanElement) => {
   }
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'LoadingIcon',
   props: {
     prefixCls: String,

components/button/button-group.tsx

@@ -19,6 +19,7 @@ export const GroupSizeContext = createContext<{
   size: ComputedRef<SizeType>;
 }>();
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButtonGroup',
   props: buttonGroupProps(),
   setup(props, { slots }) {

components/button/button.tsx

@@ -30,6 +30,7 @@ function isUnBorderedButtonType(type: ButtonType | undefined) {
 }
 export { buttonProps };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,

components/card/Card.tsx

@@ -49,6 +49,7 @@ export const cardProps = () => ({
 export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
 
 const Card = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACard',
   props: cardProps(),
   slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],

components/card/Grid.tsx

@@ -8,6 +8,7 @@ export const cardGridProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardGridProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardGrid',
   __ANT_CARD_GRID: true,
   props: cardGridProps(),

components/card/Meta.tsx

@@ -12,6 +12,7 @@ export const cardMetaProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardMeta',
   props: cardMetaProps(),
   slots: ['title', 'description', 'avatar'],

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -302,11 +302,11 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
         <div class="ant-tabs-nav-wrap">
           <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px);">
             <div class="ant-tabs-tab ant-tabs-tab-active">
-              <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-tab1" aria-controls="rc-tabs-test-panel-tab1"><span><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span> tab1</span></div>
+              <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0"><span><span role="img" aria-label="home" class="anticon anticon-home"><svg focusable="false" class="" data-icon="home" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M946.5 505L560.1 118.8l-25.9-25.9a31.5 31.5 0 00-44.4 0L77.5 505a63.9 63.9 0 00-18.8 46c.4 35.2 29.7 63.3 64.9 63.3h42.5V940h691.8V614.3h43.4c17.1 0 33.2-6.7 45.3-18.8a63.6 63.6 0 0018.7-45.3c0-17-6.7-33.1-18.8-45.2zM568 868H456V664h112v204zm217.9-325.7V868H632V640c0-22.1-17.9-40-40-40H432c-22.1 0-40 17.9-40 40v228H238.1V542.3h-96l370-369.7 23.1 23.1L882 542.3h-96.1z"></path></svg></span> tab1</span></div>
               <!---->
             </div>
             <div class="ant-tabs-tab">
-              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-tab2" aria-controls="rc-tabs-test-panel-tab2">tab2</div>
+              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">tab2</div>
               <!---->
             </div>
             <!---->
@@ -314,7 +314,7 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
           </div>
         </div>
         <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden">
-          <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-test-more-popup" id="rc-tabs-test-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
+          <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
           <!---->
         </div>
         <!---->
@@ -322,10 +322,10 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
       </div>
       <div class="ant-tabs-content-holder">
         <div class="ant-tabs-content ant-tabs-content-top">
-          <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-tab1" aria-labelledby="rc-tabs-test-tab-tab1">
+          <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
             <!---->
           </div>
-          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-tab2" aria-labelledby="rc-tabs-test-tab-tab2">
+          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane">
             <!---->
           </div>
         </div>
@@ -350,15 +350,15 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
         <div class="ant-tabs-nav-wrap">
           <div class="ant-tabs-nav-list" style="transform: translate(0px, 0px);">
             <div class="ant-tabs-tab">
-              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-article" aria-controls="rc-tabs-test-panel-article">article</div>
+              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">article</div>
               <!---->
             </div>
             <div class="ant-tabs-tab ant-tabs-tab-active">
-              <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-app" aria-controls="rc-tabs-test-panel-app">app</div>
+              <div role="tab" aria-selected="true" class="ant-tabs-tab-btn" tabindex="0">app</div>
               <!---->
             </div>
             <div class="ant-tabs-tab">
-              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0" id="rc-tabs-test-tab-project" aria-controls="rc-tabs-test-panel-project">project</div>
+              <div role="tab" aria-selected="false" class="ant-tabs-tab-btn" tabindex="0">project</div>
               <!---->
             </div>
             <!---->
@@ -366,7 +366,7 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
           </div>
         </div>
         <div class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden">
-          <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="rc-tabs-test-more-popup" id="rc-tabs-test-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
+          <!----><button type="button" class="ant-tabs-nav-more" style="visibility: hidden; order: 1;" tabindex="-1" aria-hidden="true" aria-haspopup="listbox" aria-controls="null-more-popup" id="null-more" aria-expanded="false"><span role="img" aria-label="ellipsis" class="anticon anticon-ellipsis"><svg focusable="false" class="" data-icon="ellipsis" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></button>
           <!---->
         </div>
         <div class="ant-tabs-extra-content"><a href="#">More</a></div>
@@ -374,13 +374,13 @@ exports[`renders ./components/card/demo/tabs.vue correctly 1`] = `
       </div>
       <div class="ant-tabs-content-holder">
         <div class="ant-tabs-content ant-tabs-content-top">
-          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-article" aria-labelledby="rc-tabs-test-tab-article">
+          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane">
             <!---->
           </div>
-          <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active" id="rc-tabs-test-panel-app" aria-labelledby="rc-tabs-test-tab-app">
+          <div role="tabpanel" tabindex="0" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
             <!---->
           </div>
-          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane" id="rc-tabs-test-panel-project" aria-labelledby="rc-tabs-test-tab-project">
+          <div role="tabpanel" tabindex="-1" aria-hidden="true" style="display: none;" class="ant-tabs-tabpane">
             <!---->
           </div>
         </div>

components/carousel/__tests__/__snapshots__/demo.test.js.snap

@@ -5,64 +5,64 @@ exports[`renders ./components/carousel/demo/autoplay.vue correctly 1`] = `
   <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
+      <div class="slick-track" style="width: 900%;">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -87,64 +87,64 @@ exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
   <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
+      <div class="slick-track" style="width: 900%;">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -169,64 +169,64 @@ exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
   <div class="slick-slider slick-initialized" dir="ltr">
     <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
+      <div class="slick-track" style="width: 900%;">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -250,48 +250,48 @@ exports[`renders ./components/carousel/demo/customPaging.vue correctly 1`] = `
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized" dir="ltr"><button type="button" data-role="none" class="slick-arrow slick-prev" style="display: block;"> Previous</button>
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
+      <div class="slick-track" style="width: 900%;">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract04.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract01.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract02.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract03.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract04.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract01.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract02.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract03.jpg"></div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;"><img src="https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/abstract04.jpg"></div>
           </div>
@@ -313,29 +313,29 @@ exports[`renders ./components/carousel/demo/fade.vue correctly 1`] = `
   <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1;">
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;">
+      <div class="slick-track" style="width: 900%;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%; position: relative; left: 0px; opacity: 1; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -11px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -22px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px; position: relative; left: 0px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%; position: relative; left: -33px; opacity: 0; transition: opacity 500ms ease, visibility 500ms ease;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
@@ -361,64 +361,64 @@ exports[`renders ./components/carousel/demo/position.vue correctly 1`] = `
   <div class="slick-slider slick-initialized" dir="ltr">
     <!---->
     <div class="slick-list">
-      <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
-        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
+      <div class="slick-track" style="width: 900%;">
+        <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="0" aria-hidden="false" class="slick-slide slick-active slick-current" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="1" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="2" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 0px;">
+        <div tabindex="-1" data-index="3" aria-hidden="true" class="slick-slide" style="outline: none; width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="4" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>1</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="5" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>2</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="6" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>3</h3>
             </div>
           </div>
         </div>
-        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 0px;">
+        <div tabindex="-1" data-index="7" aria-hidden="true" class="slick-slide slick-cloned" style="width: 11.11111111111111%;">
           <div>
             <div tabindex="-1" style="width: 100%; display: inline-block;">
               <h3>4</h3>

components/carousel/index.tsx

@@ -70,6 +70,7 @@ export const carouselProps = () => ({
 });
 export type CarouselProps = Partial<ExtractPropTypes<ReturnType<typeof carouselProps>>>;
 const Carousel = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACarousel',
   inheritAttrs: false,
   props: carouselProps(),

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

@@ -197,3 +197,21 @@ exports[`renders ./components/cascader/demo/suffix.vue correctly 1`] = `
   <!---->
 </div>
 `;
+
+exports[`renders ./components/cascader/demo/tagRender.vue correctly 1`] = `
+<div suffixicon="Shopping Around" class="ant-select ant-cascader ant-select-multiple ant-select-allow-clear">
+  <!---->
+  <!---->
+  <div class="ant-select-selector">
+    <div class="ant-select-selection-overflow">
+      <!---->
+      <div class="ant-select-selection-overflow-item ant-select-selection-overflow-item-suffix" style="opacity: 1;">
+        <div class="ant-select-selection-search" style="width: 0px;"><input type="search" id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" readonly="" unselectable="on" style="opacity: 0;"><span class="ant-select-selection-search-mirror" aria-hidden="true">&nbsp;</span></div>
+      </div>
+      <!---->
+    </div><span class="ant-select-selection-placeholder">Please select</span>
+  </div>
+  <!---->
+  <!---->
+</div>
+`;

components/cascader/demo/index.vue

@@ -12,6 +12,7 @@
     <fields-name />
     <suffix />
     <multipleVue />
+    <tagRender />
   </demo-sort>
 </template>
 <script>
@@ -27,6 +28,7 @@ import Size from './size.vue';
 import FieldsName from './fields-name.vue';
 import Suffix from './suffix.vue';
 import multipleVue from './multiple.vue';
+import tagRender from './tagRender.vue';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -47,6 +49,7 @@ export default defineComponent({
     FieldsName,
     Suffix,
     multipleVue,
+    tagRender,
   },
 });
 </script>

components/cascader/demo/tagRender.vue

@@ -0,0 +1,91 @@
+<docs>
+---
+order: 10
+title:
+  zh-CN: 自定义 tag 内容
+  en-US: The custom tag
+---
+
+</docs>
+
+<template>
+  <a-cascader
+    v-model:value="value"
+    multiple
+    :options="options"
+    placeholder="Please select"
+    suffix-icon="Shopping Around"
+  >
+    <template #tagRender="data">
+      <a-tag :key="data.value" color="blue">{{ data.label }}</a-tag>
+    </template>
+  </a-cascader>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import type { CascaderProps } from 'ant-design-vue';
+const options: CascaderProps['options'] = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'freezeKey',
+        label: 'freeze',
+        children: [
+          {
+            value: 'key1',
+            label: 'salmon',
+          },
+          {
+            value: 'key2',
+            label: 'beef',
+          },
+        ],
+      },
+      {
+        value: 'fruitsKey',
+        label: 'fruits',
+        children: [
+          {
+            value: 'key11',
+            label: 'apple',
+          },
+          {
+            value: 'key22',
+            label: 'banana',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'Chinese delicious food',
+    label: '中国美食',
+    children: [
+      {
+        value: 'key3',
+        label: '月饼',
+        children: [
+          {
+            value: 'key4',
+            label: '蛋黄馅',
+          },
+          {
+            value: 'key5',
+            label: '五仁馅',
+          },
+        ],
+      },
+    ],
+  },
+];
+export default defineComponent({
+  setup() {
+    return {
+      value: ref<string[]>([]),
+      options,
+    };
+  },
+});
+</script>

components/cascader/index.tsx

@@ -120,6 +120,7 @@ export interface CascaderRef {
 }
 
 const Cascader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACascader',
   inheritAttrs: false,
   props: initDefaultProps(cascaderProps(), {
@@ -298,6 +299,7 @@ const Cascader = defineComponent({
             ...slots,
             checkable: () => <span class={`${cascaderPrefixCls.value}-checkbox-inner`} />,
           }}
+          tagRender={props.tagRender || slots.tagRender}
           displayRender={props.displayRender || slots.displayRender}
           maxTagPlaceholder={props.maxTagPlaceholder || slots.maxTagPlaceholder}
           showArrow={formItemInputContext.hasFeedback || props.showArrow}

components/checkbox/Checkbox.tsx

@@ -12,6 +12,7 @@ import type { CheckboxChangeEvent, CheckboxProps } from './interface';
 import { CheckboxGroupContextKey, checkboxProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckbox',
   inheritAttrs: false,
   __ANT_CHECKBOX: true,

components/checkbox/Group.tsx

@@ -6,6 +6,7 @@ import type { CheckboxOptionType } from './interface';
 import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckboxGroup',
   props: checkboxGroupProps(),
   // emits: ['change', 'update:value'],

components/collapse/Collapse.tsx

@@ -31,6 +31,7 @@ function getActiveKeysArray(activeKey: Key | Key[]) {
 export { collapseProps };
 export type CollapseProps = Partial<ExtractPropTypes<ReturnType<typeof collapseProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapse',
   inheritAttrs: false,
   props: initDefaultProps(collapseProps(), {

components/collapse/CollapsePanel.tsx

@@ -11,6 +11,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 export { collapsePanelProps };
 export type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapsePanel',
   inheritAttrs: false,
   props: initDefaultProps(collapsePanelProps(), {

components/collapse/PanelContent.tsx

@@ -3,6 +3,7 @@ import { collapsePanelProps } from './commonProps';
 import classNames from '../_util/classNames';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PanelContent',
   props: collapsePanelProps(),
   setup(props, { slots }) {

components/comment/index.tsx

@@ -22,6 +22,7 @@ export const commentProps = () => ({
 export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>;
 
 const Comment = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AComment',
   props: commentProps(),
   slots: ['actions', 'author', 'avatar', 'content', 'datetime'],

components/config-provider/cssVariables.tsx

@@ -28,7 +28,7 @@ export function getStyle(globalPrefixCls: string, theme: Theme) {
     variables[`${type}-color`] = formatColor(baseColor);
     variables[`${type}-color-disabled`] = colorPalettes[1];
     variables[`${type}-color-hover`] = colorPalettes[4];
-    variables[`${type}-color-active`] = colorPalettes[7];
+    variables[`${type}-color-active`] = colorPalettes[6];
     variables[`${type}-color-outline`] = baseColor.clone().setAlpha(0.2).toRgbString();
     variables[`${type}-color-deprecated-bg`] = colorPalettes[1];
     variables[`${type}-color-deprecated-border`] = colorPalettes[3];

components/config-provider/index.en-US.md

@@ -59,7 +59,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | locale | language package setting, you can find the packages in [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/) | object | - | 1.5.0 |
 | pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader]\(<(/components/page-header)> | { ghost:boolean } | 'true' | 1.5.0 |
 | prefixCls | set prefix class | string | ant |  |
-| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| Function(componentName: string): ReactNode | - |  |
+| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| Function(componentName: string): VNode | - |  |
 | space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 3.0 |
 | transformCellText | Table data can be changed again before rendering. The default configuration of general user empty data. | Function({ text, column, record, index }) => any | - | 1.5.4 |
 | virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |

components/config-provider/index.tsx

@@ -79,6 +79,7 @@ const setGlobalConfig = (params: GlobalConfigProviderProps & { theme?: Theme })
   }
   stopWatchEffect = watchEffect(() => {
     Object.assign(globalConfigBySet, reactive(params));
+    Object.assign(globalConfigForApi, reactive(params));
   });
   if (params.theme) {
     registerTheme(getGlobalPrefixCls(), params.theme);
@@ -112,6 +113,7 @@ export const globalConfig = () => ({
 });
 
 const ConfigProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AConfigProvider',
   inheritAttrs: false,
   props: configProviderProps(),

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -25,6 +25,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
   extraProps: ExtraProps,
 ) {
   const RangePicker = defineComponent({
+    compatConfig: { MODE: 3 },
     name: 'ARangePicker',
     inheritAttrs: false,
     props: {

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -29,6 +29,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
       ...extraProps,
     };
     return defineComponent({
+      compatConfig: { MODE: 3 },
       name: displayName,
       inheritAttrs: false,
       props: comProps,

components/descriptions/Row.tsx

@@ -1,8 +1,7 @@
 import Cell from './Cell';
 import { getSlot, getClass, getStyle } from '../_util/props-util';
-import type { FunctionalComponent, VNode } from 'vue';
+import type { CSSProperties, FunctionalComponent, VNode } from 'vue';
 import { inject, ref } from 'vue';
-import type { DescriptionsContextProp } from './index';
 import { descriptionsContext } from './index';
 
 interface CellConfig {
@@ -32,29 +31,29 @@ const Row: FunctionalComponent<RowProps> = props => {
       showContent,
       labelStyle: rootLabelStyle,
       contentStyle: rootContentStyle,
-    }: CellConfig & DescriptionsContextProp,
+    }: CellConfig & { labelStyle?: CSSProperties; contentStyle?: CSSProperties },
   ) => {
     return items.map((item, index) => {
+      const itemProps = item.props || {};
       const {
         prefixCls: itemPrefixCls = prefixCls,
         span = 1,
-        labelStyle,
-        contentStyle,
+        labelStyle = itemProps['label-style'],
+        contentStyle = itemProps['content-style'],
         label = (item.children as any)?.label?.(),
-      } = item.props || {};
+      } = itemProps;
       const children = getSlot(item);
       const className = getClass(item);
       const style = getStyle(item);
       const { key } = item;
-
       if (typeof component === 'string') {
         return (
           <Cell
             key={`${type}-${String(key) || index}`}
             class={className}
             style={style}
-            labelStyle={{ ...rootLabelStyle.value, ...labelStyle }}
-            contentStyle={{ ...rootContentStyle.value, ...contentStyle }}
+            labelStyle={{ ...rootLabelStyle, ...labelStyle }}
+            contentStyle={{ ...rootContentStyle, ...contentStyle }}
             span={span}
             colon={colon}
             component={component}
@@ -70,7 +69,7 @@ const Row: FunctionalComponent<RowProps> = props => {
         <Cell
           key={`label-${String(key) || index}`}
           class={className}
-          style={{ ...rootLabelStyle.value, ...style, ...labelStyle }}
+          style={{ ...rootLabelStyle, ...style, ...labelStyle }}
           span={1}
           colon={colon}
           component={component[0]}
@@ -81,7 +80,7 @@ const Row: FunctionalComponent<RowProps> = props => {
         <Cell
           key={`content-${String(key) || index}`}
           class={className}
-          style={{ ...rootContentStyle.value, ...style, ...contentStyle }}
+          style={{ ...rootContentStyle, ...style, ...contentStyle }}
           span={span * 2 - 1}
           component={component[1]}
           itemPrefixCls={itemPrefixCls}
@@ -105,8 +104,8 @@ const Row: FunctionalComponent<RowProps> = props => {
             component: 'th',
             type: 'label',
             showLabel: true,
-            labelStyle,
-            contentStyle,
+            labelStyle: labelStyle.value,
+            contentStyle: contentStyle.value,
           })}
         </tr>
         <tr key={`content-${index}`} class={`${prefixCls}-row`}>
@@ -114,8 +113,8 @@ const Row: FunctionalComponent<RowProps> = props => {
             component: 'td',
             type: 'content',
             showContent: true,
-            labelStyle,
-            contentStyle,
+            labelStyle: labelStyle.value,
+            contentStyle: contentStyle.value,
           })}
         </tr>
       </>
@@ -129,8 +128,8 @@ const Row: FunctionalComponent<RowProps> = props => {
         type: 'item',
         showLabel: true,
         showContent: true,
-        labelStyle,
-        contentStyle,
+        labelStyle: labelStyle.value,
+        contentStyle: contentStyle.value,
       })}
     </tr>
   );

components/descriptions/index.tsx

@@ -46,6 +46,7 @@ export type DescriptionsItemProp = Partial<
 >;
 
 export const DescriptionsItem = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptionsItem',
   props: descriptionsItemProp(),
   slots: ['label'],
@@ -157,6 +158,7 @@ export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
   Symbol('descriptionsContext');
 
 const Descriptions = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptions',
   props: descriptionsProps(),
   slots: ['title', 'extra'],

components/divider/index.tsx

@@ -27,6 +27,7 @@ export const dividerProps = () => ({
 export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
 
 const Divider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADivider',
   props: dividerProps(),
   setup(props, { slots }) {

components/drawer/index.tsx

@@ -95,6 +95,7 @@ export const drawerProps = () => ({
 export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>;
 
 const Drawer = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADrawer',
   inheritAttrs: false,
   props: initDefaultProps(drawerProps(), {

components/dropdown/dropdown-button.tsx

@@ -12,6 +12,7 @@ const ButtonGroup = Button.Group;
 export type DropdownButtonProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownButtonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdownButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,

components/dropdown/dropdown.tsx

@@ -15,6 +15,7 @@ import getPlacements from '../tooltip/placements';
 export type DropdownProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownProps>>>;
 
 const Dropdown = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdown',
   inheritAttrs: false,
   props: initDefaultProps(dropdownProps(), {

components/form/ErrorList.tsx

@@ -14,6 +14,7 @@ export interface ErrorListProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ErrorList',
   props: ['errors', 'help', 'onDomErrorVisibleChange', 'helpStatus', 'warnings'],
   setup(props) {

components/form/Form.tsx

@@ -99,6 +99,7 @@ function isEqualName(name1: NamePath, name2: NamePath) {
 }
 
 const Form = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AForm',
   inheritAttrs: false,
   props: initDefaultProps(formProps(), {

components/form/FormItem.tsx

@@ -136,6 +136,7 @@ let indexGuid = 0;
 const defaultItemNamePrefixCls = 'form_item';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItem',
   inheritAttrs: false,
   __ANT_NEW_FORM_ITEM: true,

components/form/FormItemContext.ts

@@ -96,6 +96,7 @@ export const useInjectFormItemContext = () => {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItemRest',
   setup(_, { slots }) {
     provide(InternalContextKey, defaultInternalContext);

components/form/FormItemInput.tsx

@@ -23,6 +23,7 @@ export interface FormItemInputProps {
 }
 
 const FormItemInput = defineComponent({
+  compatConfig: { MODE: 3 },
   slots: ['help', 'extra', 'errors'],
   inheritAttrs: false,
   props: [

components/form/demo/customized-form-controls.vue

@@ -28,7 +28,7 @@ Controls must injects `useInjectFormItemContext` and calls the corresponding met
 </template>
 <script lang="ts">
 import { defineComponent, reactive } from 'vue';
-// sorceCode https://github.com/vueComponent/ant-design-vue/blob/cb3c002e17f0f4f5b3e8d01846069da0e2645aff/components/form/demo/price-input.vue
+// sourceCode https://github.com/vueComponent/ant-design-vue/blob/cb3c002e17f0f4f5b3e8d01846069da0e2645aff/components/form/demo/price-input.vue
 import PriceInput from './price-input.vue';
 import type { Currency } from './price-input.vue';
 

components/form/index.en-US.md

@@ -111,7 +111,7 @@ But it also has some disadvantages:
 </a-form-item>
 ```
 
-As above Form.Item does not know whether to collect `name="a"` or `name=`b\`\`, you can solve this kind of problem in the following two ways:
+As above Form.Item does not know whether to collect `name="a"` or `name="b"`, you can solve this kind of problem in the following two ways:
 
 The first is to use multiple `a-form-item`:
 

components/form/index.zh-CN.md

@@ -110,7 +110,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 </a-form-item>
 ```
 
-如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name=`b\`\`，你可以通过如下三种方式去解决此类问题：
+如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name="b"`，你可以通过如下三种方式去解决此类问题：
 
 第一种，使用多个 `a-form-item`:
 

components/grid/Col.tsx

@@ -69,6 +69,7 @@ export const colProps = () => ({
 export type ColProps = Partial<ExtractPropTypes<ReturnType<typeof colProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACol',
   props: colProps(),
   setup(props, { slots }) {

components/grid/Row.tsx

@@ -32,6 +32,7 @@ export const rowProps = () => ({
 export type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>;
 
 const ARow = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARow',
   props: rowProps(),
   setup(props, { slots }) {

components/icon/__tests__/__snapshots__/demo.test.js.snap

@@ -17,8 +17,6 @@ exports[`renders ./components/icon/demo/basic.vue correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/icon/demo/custom.vue correctly 1`] = `<div class="custom-icons-list"><span style="color: hotpink;" role="img" class="anticon"><svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"><path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z"></path></svg></span><span style="font-size: 32px;" role="img" class="anticon"><svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z" fill="#6B676E" p-id="1143"></path><path d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z" fill="#FFEBD2" p-id="1144"></path><path d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z" fill="#E9D7C3" p-id="1145"></path><path d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z" fill="#FFFFFF" p-id="1146"></path><path d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z" fill="#6B676E" p-id="1147"></path><path d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z" fill="#464655" p-id="1148"></path><path d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1149"></path><path d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z" fill="#464655" p-id="1150"></path></svg></span></div>`;
-
 exports[`renders ./components/icon/demo/iconfont.vue correctly 1`] = `
 <div class="ant-space ant-space-horizontal ant-space-align-center">
   <div class="ant-space-item" style="margin-right: 8px;"><span role="img" class="anticon"><svg width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><use xlink:href="#icon-tuichu"></use></svg></span></div>

components/image/PreviewGroup.tsx

@@ -21,6 +21,7 @@ export const icons = {
 };
 
 const InternalPreviewGroup = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AImagePreviewGroup',
   inheritAttrs: false,
   props: { previewPrefixCls: String },

components/input-number/index.tsx

@@ -37,6 +37,7 @@ export const inputNumberProps = () => ({
 export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>;
 
 const InputNumber = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputNumber',
   inheritAttrs: false,
   props: inputNumberProps(),

components/input-number/src/InputNumber.tsx

@@ -79,6 +79,7 @@ export const inputNumberProps = () => ({
 });
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'InnerInputNumber',
   inheritAttrs: false,
   props: {

components/input-number/src/StepHandler.tsx

@@ -14,6 +14,7 @@ const STEP_INTERVAL = 200;
 const STEP_DELAY = 600;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'StepHandler',
   inheritAttrs: false,
   props: {

components/input/ClearableLabeledInput.tsx

@@ -15,6 +15,7 @@ import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 const ClearableInputType = ['text', 'input'];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ClearableLabeledInput',
   inheritAttrs: false,
   props: {

components/input/Group.tsx

@@ -6,6 +6,7 @@ import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterfa
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputGroup',
   props: {
     prefixCls: String,
@@ -36,8 +37,8 @@ export default defineComponent({
       return (
         <span
           class={cls.value}
-          onMouseenter={props.onMouseEnter}
-          onMouseleave={props.onMouseLeave}
+          onMouseenter={props.onMouseenter}
+          onMouseleave={props.onMouseleave}
           onFocus={props.onFocus}
           onBlur={props.onBlur}
         >

components/input/Input.tsx

@@ -15,6 +15,7 @@ import omit from '../_util/omit';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInput',
   inheritAttrs: false,
   props: inputProps(),

components/input/Password.tsx

@@ -17,6 +17,7 @@ const ActionMap = {
 const defaultIconRender = (visible: boolean) =>
   visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputPassword',
   inheritAttrs: false,
   props: {

components/input/ResizableTextArea.tsx

@@ -23,6 +23,7 @@ const RESIZE_STATUS_RESIZING = 1;
 const RESIZE_STATUS_RESIZED = 2;
 
 const ResizableTextArea = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ResizableTextArea',
   inheritAttrs: false,
   props: textAreaProps(),

components/input/Search.tsx

@@ -18,6 +18,7 @@ import isMobile from '../_util/isMobile';
 import inputProps from './inputProps';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputSearch',
   inheritAttrs: false,
   props: {

components/input/TextArea.tsx

@@ -46,6 +46,7 @@ function setTriggerValue(
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATextarea',
   inheritAttrs: false,
   props: textAreaProps(),

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -32,20 +32,7 @@ exports[`renders ./components/input/demo/allow-clear.vue correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/input/demo/autosize-textarea.vue correctly 1`] = `
-<div><textarea placeholder="Autosize height based on content lines" class="ant-input" style="height: 0px; min-height: -9007199254740991px; max-height: 9007199254740991px; overflow-y: hidden; resize: none; overflow-x: hidden;"></textarea>
-  <div style="margin: 24px 0px;"></div><textarea placeholder="Autosize height with minimum and maximum number of lines" class="ant-input" style="height: -20px; min-height: -8px; max-height: -20px; overflow-y: hidden; resize: none; overflow-x: hidden;"></textarea>
-</div>
-`;
-
-exports[`renders ./components/input/demo/basic.vue correctly 1`] = `
-<div class="ant-space ant-space-vertical">
-  <div class="ant-space-item" style="margin-bottom: 8px;"><input placeholder="Basic usage" type="text" class="ant-input"></div>
-  <!---->
-  <div class="ant-space-item"><input placeholder="Lazy usage" type="text" autofocus="" class="ant-input"></div>
-  <!---->
-</div>
-`;
+exports[`renders ./components/input/demo/basic.vue correctly 1`] = `<input placeholder="Basic usage" type="text" class="ant-input">`;
 
 exports[`renders ./components/input/demo/borderless.vue correctly 1`] = `<input placeholder="Borderless" type="text" class="ant-input ant-input-borderless">`;
 

components/layout/Sider.tsx

@@ -58,6 +58,7 @@ const generateId = (() => {
 })();
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ALayoutSider',
   inheritAttrs: false,
   props: initDefaultProps(siderProps(), {

components/layout/__tests__/__snapshots__/demo.test.js.snap

@@ -8,8 +8,8 @@ exports[`renders ./components/layout/demo/basic.vue correctly 1`] = `
 </section>
 <section class="ant-layout">
   <header class="ant-layout-header">Header</header>
-  <section class="ant-layout ant-layout-has-sider">
-    <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
+  <section class="ant-layout">
+    <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
       <div class="ant-layout-sider-children">Sider</div>
       <!---->
     </aside>
@@ -19,17 +19,17 @@ exports[`renders ./components/layout/demo/basic.vue correctly 1`] = `
 </section>
 <section class="ant-layout">
   <header class="ant-layout-header">Header</header>
-  <section class="ant-layout ant-layout-has-sider">
+  <section class="ant-layout">
     <main class="ant-layout-content">Content</main>
-    <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
+    <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
       <div class="ant-layout-sider-children">Sider</div>
       <!---->
     </aside>
   </section>
   <footer class="ant-layout-footer">Footer</footer>
 </section>
-<section class="ant-layout ant-layout-has-sider">
-  <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
+<section class="ant-layout">
+  <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">Sider</div>
     <!---->
   </aside>
@@ -42,8 +42,8 @@ exports[`renders ./components/layout/demo/basic.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/layout/demo/custom-trigger.vue correctly 1`] = `
-<section class="ant-layout ant-layout-has-sider">
-  <aside class="ant-layout-sider ant-layout-sider-dark" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
+<section class="ant-layout">
+  <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
@@ -68,8 +68,8 @@ exports[`renders ./components/layout/demo/custom-trigger.vue correctly 1`] = `
     <!---->
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"><span role="img" aria-label="menu-fold" tabindex="-1" class="anticon anticon-menu-fold trigger"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span></header>
-    <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; min-height: 280px; background: rgb(255, 255, 255);"> Content </main>
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"><span role="img" aria-label="menu-fold" tabindex="-1" class="anticon anticon-menu-fold trigger"><svg focusable="false" class="" data-icon="menu-fold" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"></path></svg></span></header>
+    <main class="ant-layout-content" style="margin: 24px 16px; padding: 24px; background: rgb(255, 255, 255); min-height: 280px;"> Content </main>
   </section>
 </section>
 `;
@@ -167,11 +167,11 @@ exports[`renders ./components/layout/demo/fixed-sider.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/layout/demo/responsive.vue correctly 1`] = `
-<section class="ant-layout ant-layout-has-sider">
-  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-collapsed ant-layout-sider-below ant-layout-sider-zero-width" style="max-width: 0px; min-width: 0px; width: 0px; flex: 0 0 0px;">
+<section class="ant-layout">
+  <aside class="ant-layout-sider ant-layout-sider-dark" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
-      <ul class="ant-menu ant-menu-root ant-menu-vertical ant-menu-inline-collapsed ant-menu-dark" role="menu" data-menu-list="true">
+      <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
         <!---->
         <li class="ant-menu-item" style="padding-left: 24px;" role="menuitem" tabindex="-1" data-menu-id="1" aria-disabled="false">
           <!----><span class="ant-menu-title-content"><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span><span class="nav-text">nav 1</span></span>
@@ -193,10 +193,11 @@ exports[`renders ./components/layout/demo/responsive.vue correctly 1`] = `
         <!--teleport start-->
         <!--teleport end-->
       </ul>
-    </div><span class="ant-layout-sider-zero-width-trigger ant-layout-sider-zero-width-trigger-left"><span role="img" aria-label="bars" class="anticon anticon-bars"><svg focusable="false" class="" data-icon="bars" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="0 0 1024 1024"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0zm0 284a56 56 0 10112 0 56 56 0 10-112 0z"></path></svg></span></span>
+    </div>
+    <!---->
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
     <main class="ant-layout-content" style="margin: 24px 16px 0px;">
       <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;">content</div>
     </main>
@@ -206,8 +207,8 @@ exports[`renders ./components/layout/demo/responsive.vue correctly 1`] = `
 `;
 
 exports[`renders ./components/layout/demo/side.vue correctly 1`] = `
-<section class="ant-layout ant-layout-has-sider" style="min-height: 100vh;">
-  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="max-width: 200px; min-width: 200px; width: 200px; flex: 0 0 200px;">
+<section class="ant-layout" style="min-height: 100vh;">
+  <aside class="ant-layout-sider ant-layout-sider-dark ant-layout-sider-has-trigger" style="flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;">
     <div class="ant-layout-sider-children">
       <div class="logo"></div>
       <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-dark" role="menu" data-menu-list="true">
@@ -264,7 +265,7 @@ exports[`renders ./components/layout/demo/side.vue correctly 1`] = `
     <div class="ant-layout-sider-trigger" style="width: 200px;"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></div>
   </aside>
   <section class="ant-layout">
-    <header class="ant-layout-header" style="padding: 0px; background: rgb(255, 255, 255);"></header>
+    <header class="ant-layout-header" style="background: rgb(255, 255, 255); padding: 0px;"></header>
     <main class="ant-layout-content" style="margin: 0px 16px;">
       <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">User</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">Bill</span><span class="ant-breadcrumb-separator">/</span></span></div>
       <div style="padding: 24px; background: rgb(255, 255, 255); min-height: 360px;"> Bill is a cat. </div>
@@ -340,11 +341,11 @@ exports[`renders ./components/layout/demo/top-side.vue correctly 1`] = `
   </header>
   <main class="ant-layout-content" style="padding: 0px 50px;">
     <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
-    <section class="ant-layout ant-layout-has-sider" style="padding: 24px 0px; background: rgb(255, 255, 255);">
-      <aside style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255); flex: 0 0 200px;" class="ant-layout-sider ant-layout-sider-dark">
+    <section class="ant-layout" style="padding: 24px 0px; background: rgb(255, 255, 255);">
+      <aside style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
         <div class="ant-layout-sider-children">
           <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="height: 100%;" role="menu" data-menu-list="true">
-            <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="none" data-submenu-id="sub1">
+            <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
               <!---->
               <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_11_$$_sub1-popup" aria-disabled="false"><span class="ant-menu-title-content"><span><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span> subnav 1 </span></span><i class="ant-menu-submenu-arrow"></i></div>
               <ul id="sub_menu_11_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
@@ -453,11 +454,11 @@ exports[`renders ./components/layout/demo/top-side-2.vue correctly 1`] = `
       <!--teleport end-->
     </ul>
   </header>
-  <section class="ant-layout ant-layout-has-sider">
-    <aside style="max-width: 200px; min-width: 200px; width: 200px; background: rgb(255, 255, 255); flex: 0 0 200px;" class="ant-layout-sider ant-layout-sider-dark">
+  <section class="ant-layout">
+    <aside style="background: rgb(255, 255, 255); flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;" class="ant-layout-sider ant-layout-sider-dark">
       <div class="ant-layout-sider-children">
         <ul class="ant-menu ant-menu-root ant-menu-inline ant-menu-light" style="height: 100%; border-right: 0;" role="menu" data-menu-list="true">
-          <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected" role="none" data-submenu-id="sub1">
+          <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="none" data-submenu-id="sub1">
             <!---->
             <div style="padding-left: 24px;" class="ant-menu-submenu-title" tabindex="-1" data-menu-id="sub1" aria-expanded="true" aria-haspopup="true" aria-controls="sub_menu_5_$$_sub1-popup" aria-disabled="false"><span class="ant-menu-title-content"><span><span role="img" aria-label="user" class="anticon anticon-user"><svg focusable="false" class="" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span> subnav 1 </span></span><i class="ant-menu-submenu-arrow"></i></div>
             <ul id="sub_menu_5_$$_sub1-popup" class="ant-menu ant-menu-sub ant-menu-inline v-enter-from v-enter-active" data-menu-list="true">
@@ -533,7 +534,7 @@ exports[`renders ./components/layout/demo/top-side-2.vue correctly 1`] = `
     </aside>
     <section class="ant-layout" style="padding: 0px 24px 24px;">
       <div class="ant-breadcrumb" style="margin: 16px 0px;"><span><span class="ant-breadcrumb-link">Home</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">List</span><span class="ant-breadcrumb-separator">/</span></span><span><span class="ant-breadcrumb-link">App</span><span class="ant-breadcrumb-separator">/</span></span></div>
-      <main class="ant-layout-content" style="padding: 24px; margin: 0px; min-height: 280px; background: rgb(255, 255, 255);"> Content </main>
+      <main class="ant-layout-content" style="background: rgb(255, 255, 255); padding: 24px; margin: 0px; min-height: 280px;"> Content </main>
     </section>
   </section>
 </section>

components/layout/layout.tsx

@@ -20,6 +20,7 @@ type GeneratorArgument = {
 function generator({ suffixCls, tagName, name }: GeneratorArgument) {
   return (BasicComponent: typeof Basic) => {
     const Adapter = defineComponent({
+      compatConfig: { MODE: 3 },
       name,
       props: basicProps(),
       setup(props, { slots }) {
@@ -39,6 +40,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
 }
 
 const Basic = defineComponent({
+  compatConfig: { MODE: 3 },
   props: basicProps(),
   setup(props, { slots }) {
     return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
@@ -46,6 +48,7 @@ const Basic = defineComponent({
 });
 
 const BasicLayout = defineComponent({
+  compatConfig: { MODE: 3 },
   props: basicProps(),
   setup(props, { slots }) {
     const { direction } = useConfigInject('', props);