feat: Vue 3 Migration Build support (#5973), close #5765

closes vueComponent/ant-design-vue#5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.

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/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/auto-complete/index.tsx

@@ -39,6 +39,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/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/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

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

components/button/button.tsx

@@ -29,6 +29,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/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/index.tsx

@@ -112,6 +112,7 @@ export interface CascaderRef {
 }
 
 const Cascader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACascader',
   inheritAttrs: false,
   props: initDefaultProps(cascaderProps(), {

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/index.tsx

@@ -105,6 +105,7 @@ export const globalConfig = () => ({
 });
 
 const ConfigProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AConfigProvider',
   inheritAttrs: false,
   props: configProviderProps(),

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -24,6 +24,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

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

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

@@ -90,6 +90,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

@@ -122,6 +122,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

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

components/form/FormItemInput.tsx

@@ -34,6 +34,7 @@ const iconMap: { [key: string]: any } = {
   validating: LoadingOutlined,
 };
 const FormItemInput = defineComponent({
+  compatConfig: { MODE: 3 },
   slots: ['help', 'extra', 'errors'],
   inheritAttrs: false,
   props: [

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

@@ -31,6 +31,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/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

@@ -30,6 +30,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

@@ -12,6 +12,7 @@ import { getInputClassName, hasAddon, hasPrefixSuffix } from './util';
 const ClearableInputType = ['text', 'input'];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ClearableLabeledInput',
   inheritAttrs: false,
   props: {

components/input/Group.tsx

@@ -5,6 +5,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,

components/input/Input.tsx

@@ -105,6 +105,7 @@ export function triggerFocus(
 }
 
 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

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

components/input/TextArea.tsx

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

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/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);

components/list/Item.tsx

@@ -20,6 +20,7 @@ export const listItemProps = () => ({
 
 export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AListItem',
   inheritAttrs: false,
   Meta: ItemMeta,

components/list/ItemMeta.tsx

@@ -13,6 +13,7 @@ export const listItemMetaProps = () => ({
 export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AListItemMeta',
   props: listItemMetaProps(),
   displayName: 'AListItemMeta', // 兼容历史函数式组件

components/list/index.tsx

@@ -77,6 +77,7 @@ import { ListContextKey } from './contextKey';
 import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 const List = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AList',
   Item,
   props: initDefaultProps(listProps(), {

components/locale-provider/LocaleReceiver.tsx

@@ -19,6 +19,7 @@ export interface LocaleReceiverContext {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'LocaleReceiver',
   props: {
     componentName: String as PropType<LocaleComponentName>,

components/locale-provider/index.tsx

@@ -53,6 +53,7 @@ export interface LocaleProviderProps {
 export const ANT_MARK = 'internalMark';
 
 const LocaleProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ALocaleProvider',
   props: {
     locale: {

components/mentions/index.tsx

@@ -88,6 +88,7 @@ export const mentionsProps = () => ({
 export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>;
 
 const Mentions = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMentions',
   inheritAttrs: false,
   props: mentionsProps(),
@@ -204,6 +205,7 @@ const Mentions = defineComponent({
 
 /* istanbul ignore next */
 export const MentionsOption = defineComponent({
+  compatConfig: { MODE: 3 },
   ...Option,
   name: 'AMentionsOption',
   props: optionProps,

components/menu/src/Divider.tsx

@@ -10,6 +10,7 @@ export const menuDividerProps = () => ({
 export type MenuDividerProps = Partial<ExtractPropTypes<ReturnType<typeof menuDividerProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenuDivider',
   props: menuDividerProps(),
   setup(props) {

components/menu/src/InlineSubMenuList.tsx

@@ -5,6 +5,7 @@ import type { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'InlineSubMenuList',
   inheritAttrs: false,
   props: {

components/menu/src/ItemGroup.tsx

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

components/menu/src/Menu.tsx

@@ -84,6 +84,7 @@ export type MenuProps = Partial<ExtractPropTypes<ReturnType<typeof menuProps>>>;
 
 const EMPTY_LIST: string[] = [];
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenu',
   inheritAttrs: false,
   props: menuProps(),

components/menu/src/MenuItem.tsx

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

components/menu/src/PopupTrigger.tsx

@@ -15,6 +15,7 @@ const popupPlacementMap = {
   'vertical-right': 'leftTop',
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PopupTrigger',
   inheritAttrs: false,
   props: {

components/menu/src/SubMenu.tsx

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

components/menu/src/hooks/useKeyPath.ts

@@ -28,6 +28,7 @@ const useProvideKeyPath = (eventKey: string, key: Key, menuInfo: StoreMenuInfo)
 
 const measure = Symbol('measure');
 export const PathContext = defineComponent({
+  compatConfig: { MODE: 3 },
   setup(_props, { slots }) {
     // 不需要响应式
     provide(measure, true);

components/menu/src/hooks/useMenuContext.ts

@@ -109,6 +109,7 @@ const useInjectFirstLevel = () => {
 };
 
 const MenuContextProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'MenuContextProvider',
   inheritAttrs: false,
   props: {

components/modal/Modal.tsx

@@ -140,6 +140,7 @@ export interface ModalLocale {
 export const destroyFns = [];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AModal',
   inheritAttrs: false,
   props: initDefaultProps(modalProps(), {

components/page-header/index.tsx

@@ -32,6 +32,7 @@ export const pageHeaderProps = () => ({
 export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHeaderProps>>>;
 
 const PageHeader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APageHeader',
   props: pageHeaderProps(),
   // emits: ['back'],

components/pagination/MiniSelect.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import VcSelect, { selectProps } from '../select';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
   props: selectProps(),
   Option: VcSelect.Option,

components/pagination/Pagination.tsx

@@ -75,6 +75,7 @@ export interface PaginationLocale {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APagination',
   inheritAttrs: false,
   props: paginationProps(),

components/popconfirm/index.tsx

@@ -56,6 +56,7 @@ export interface PopconfirmLocale {
 }
 
 const Popconfirm = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APopconfirm',
   props: initDefaultProps(popconfirmProps(), {
     ...tooltipDefaultProps(),

components/popover/index.tsx

@@ -19,6 +19,7 @@ export const popoverProps = () => ({
 export type PopoverProps = Partial<ExtractPropTypes<ReturnType<typeof popoverProps>>>;
 
 const Popover = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APopover',
   props: initDefaultProps(popoverProps(), {
     ...tooltipDefaultProps(),

components/progress/Circle.tsx

@@ -22,6 +22,7 @@ function getStrokeColor({
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Circle',
   inheritAttrs: false,
   props: progressProps(),

components/progress/Line.tsx

@@ -68,6 +68,7 @@ export const handleGradient = (strokeColor: ProgressGradient, directionConfig: D
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Line',
   props: lineProps(),
   setup(props, { slots }) {

components/progress/Steps.tsx

@@ -17,6 +17,7 @@ export const stepsProps = () => ({
 export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Steps',
   props: stepsProps(),
   setup(props, { slots }) {

components/progress/progress.tsx

@@ -14,6 +14,7 @@ import { progressProps, progressStatuses } from './props';
 import type { VueNode } from '../_util/type';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AProgress',
   props: initDefaultProps(progressProps(), {
     type: 'line',

components/radio/Group.tsx

@@ -39,6 +39,7 @@ export const radioGroupProps = () => ({
 export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadioGroup',
   props: radioGroupProps(),
   // emits: ['update:value', 'change'],

components/radio/Radio.tsx

@@ -29,6 +29,7 @@ export const radioProps = () => ({
 export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadio',
   props: radioProps(),
   // emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],

components/radio/RadioButton.tsx

@@ -5,6 +5,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import type { RadioGroupContext } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadioButton',
   props: radioProps(),
   setup(props, { slots }) {

components/rate/Star.tsx

@@ -20,6 +20,7 @@ export const starProps = {
 export type StarProps = Partial<ExtractPropTypes<typeof starProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Star',
   inheritAttrs: false,
   props: starProps,

components/rate/index.tsx

@@ -40,6 +40,7 @@ export const rateProps = () => ({
 export type RateProps = Partial<ExtractPropTypes<ReturnType<typeof rateProps>>>;
 
 const Rate = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARate',
   inheritAttrs: false,
   props: initDefaultProps(rateProps(), {

components/result/index.tsx

@@ -59,6 +59,7 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
   extra && <div class={`${prefixCls}-extra`}>{extra}</div>;
 
 const Result = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AResult',
   props: resultProps(),
   slots: ['title', 'subTitle', 'icon', 'extra'],

components/select/index.tsx

@@ -55,6 +55,7 @@ export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps
 
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 const Select = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASelect',
   Option,
   OptGroup,

components/skeleton/Avatar.tsx

@@ -15,6 +15,7 @@ export const avatarProps = () => {
 export type SkeletonAvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const SkeletonAvatar = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonAvatar',
   props: initDefaultProps(avatarProps(), {
     size: 'default',

components/skeleton/Button.tsx

@@ -16,6 +16,7 @@ export const skeletonButtonProps = () => {
 export type SkeletonButtonProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonButtonProps>>>;
 
 const SkeletonButton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonButton',
   props: initDefaultProps(skeletonButtonProps(), {
     size: 'default',

components/skeleton/Image.tsx

@@ -11,6 +11,7 @@ const path =
   'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
 
 const SkeletonImage = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonImage',
   props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
   setup(props) {

components/skeleton/Input.tsx

@@ -11,6 +11,7 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
 }
 
 const SkeletonInput = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonInput',
   props: {
     ...omit(skeletonElementProps(), ['shape']),