diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 938c94c72..64c311c40 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -10,6 +10,13 @@
---
+## 2.2.0-beta.6
+
+`2021-06-26`
+
+- 🌟 Menu performance optimization [e8b957](https://github.com/vueComponent/ant-design-vue/commit/e8b95784eb1ee0554b0d6b17bdc14e18775f2ae6)
+- 🐞 Fix `Layout` `RangePicker` `WeekPicker` `Textarea` on-demand loading failure
+
## 2.2.0-beta.5
`2021-06-24`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 27a95c208..771eb0818 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -10,6 +10,13 @@
---
+## 2.2.0-beta.6
+
+`2021-06-26`
+
+- 🌟 Menu 性能优化 [e8b957](https://github.com/vueComponent/ant-design-vue/commit/e8b95784eb1ee0554b0d6b17bdc14e18775f2ae6)
+- 🐞 修复 Layout、RangePicker、WeekPicker、Textarea 按需加载失效
+
## 2.2.0-beta.5
`2021-06-24`
diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
index f1d1ba3ef..a7c088cde 100644
--- a/components/_util/transition.tsx
+++ b/components/_util/transition.tsx
@@ -1,6 +1,5 @@
-import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
+import { BaseTransitionProps, CSSProperties, getCurrentInstance, onUpdated, Ref } from 'vue';
import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
-import { findDOMNode } from './props-util';
export const getTransitionProps = (transitionName: string, opt: object = {}) => {
if (process.env.NODE_ENV === 'test') {
@@ -46,23 +45,30 @@ let Transition = T;
let TransitionGroup = TG;
if (process.env.NODE_ENV === 'test') {
- Transition = (props, { slots }) => {
- const child = slots.default?.()[0];
- if (child && child.dirs && child.dirs[0]) {
- const value = child.dirs[0].value;
- const oldValue = child.dirs[0].oldValue;
- if (!value && value !== oldValue) {
- nextTick(() => {
- if (props.onAfterLeave) {
- props.onAfterLeave(findDOMNode(this));
+ Transition = defineComponent({
+ name: 'TransitionForTest',
+ inheritAttrs: false,
+ setup(_props, { slots, attrs }) {
+ const instance = getCurrentInstance();
+ onUpdated(() => {
+ const child = instance.subTree.children[0];
+ if (child && child.dirs && child.dirs[0]) {
+ const value = child.dirs[0].value;
+ const oldValue = child.dirs[0].oldValue;
+ if (!value && value !== oldValue) {
+ nextTick(() => {
+ if (attrs.onAfterLeave) {
+ (attrs as any).onAfterLeave(instance.vnode.el);
+ }
+ });
}
- });
- }
- }
- return slots.default?.();
- };
- Transition.displayName = 'TransitionForTest';
- Transition.inheritAttrs = false;
+ }
+ });
+ return () => {
+ return slots.default?.();
+ };
+ },
+ }) as any;
TransitionGroup = defineComponent({
name: 'TransitionGroupForTest',
inheritAttrs: false,
diff --git a/components/back-top/__tests__/index.test.js b/components/back-top/__tests__/index.test.js
index b7a4c3cbf..e4e53ade4 100644
--- a/components/back-top/__tests__/index.test.js
+++ b/components/back-top/__tests__/index.test.js
@@ -17,7 +17,7 @@ describe('BackTop', () => {
});
window.scrollTo(0, 400);
expect(document.documentElement.scrollTop).toBe(400);
- await sleep(10);
+ await sleep(100);
wrapper.find('.ant-back-top').trigger('click');
await sleep(500);
expect(document.documentElement.scrollTop).toBe(0);
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 9b5fa50ac..27a2d9803 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -1,6 +1,6 @@
import { useInjectFormItemPrefix } from './context';
import type { VueNode } from '../_util/type';
-import { defineComponent, onBeforeUnmount, ref, watch } from '@vue/runtime-core';
+import { defineComponent, onBeforeUnmount, ref, watch } from 'vue';
import classNames from '../_util/classNames';
import Transition, { getTransitionProps } from '../_util/transition';
import useConfigInject from '../_util/hooks/useConfigInject';
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index 7563362c0..a2af96b41 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -187,14 +187,14 @@ describe('Menu', () => {
await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
}, 0);
- // openKeys.value = [];
- // await asyncExpect(() => {
- // expect($$('.ant-menu-sub')[0].style.display).toBe('none');
- // }, 100);
- // wrapper.setProps({ openKeys: ['1'] });
- // await asyncExpect(() => {
- // expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
- // }, 0);
+ openKeys.value = [];
+ await asyncExpect(() => {
+ expect($$('.ant-menu-sub')[0].style.display).toBe('none');
+ }, 100);
+ openKeys.value = ['1'];
+ await asyncExpect(() => {
+ expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
+ }, 100);
});
it('vertical', async () => {
@@ -376,28 +376,28 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false },
);
await asyncExpect(() => {
- expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
+ expect(wrapper.findAll('.ant-menu-sub').length).toBe(1);
});
wrapper.setProps({ inlineCollapsed: true });
- await asyncExpect(() => {
- // 动画完成后的回调
- wrapper.vm.$refs.menu.switchModeFromInline = false;
- wrapper.vm.$forceUpdate();
- });
+ // await asyncExpect(() => {
+ // // 动画完成后的回调
+ // wrapper.vm.$refs.menu.switchModeFromInline = false;
+ // wrapper.vm.$forceUpdate();
+ // });
// await asyncExpect(() => {
// wrapper.trigger('transitionend', { propertyName: 'width' });
// });
- // await asyncExpect(() => {
- // $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
- // });
- // await asyncExpect(() => {
- // expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
- // 'ant-menu-submenu-vertical',
- // );
- // expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open');
- // expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
- // expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
- // }, 500);
+ await asyncExpect(() => {
+ $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
+ });
+ await asyncExpect(() => {
+ expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
+ 'ant-menu-submenu-vertical',
+ );
+ expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open');
+ expect($$('ul.ant-menu-sub')[0].className).toContain('ant-menu-vertical');
+ expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
+ }, 500);
});
// describe('open submenu when click submenu title', () => {
@@ -405,40 +405,40 @@ describe('Menu', () => {
// document.body.innerHTML = '';
// });
- // const toggleMenu = (wrapper, index, event) => {
- // wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
- // };
+ const toggleMenu = (wrapper, index, event) => {
+ wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
+ };
- // it('inline', async () => {
- // const wrapper = mount(
- // {
- // render() {
- // return (
- //
- // );
- // },
- // },
- // { attachTo: 'body', sync: false },
- // );
- // await asyncExpect(() => {
- // expect($$('.ant-menu-sub').length).toBe(0);
- // toggleMenu(wrapper, 0, 'click');
- // }, 0);
- // await asyncExpect(() => {
- // expect($$('.ant-menu-sub').length).toBe(1);
- // expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
- // toggleMenu(wrapper, 0, 'click');
- // }, 500);
- // await asyncExpect(() => {
- // expect($$('.ant-menu-sub')[0].style.display).toBe('none');
- // }, 500);
- // });
+ it('inline', async () => {
+ const wrapper = mount(
+ {
+ render() {
+ return (
+
+ );
+ },
+ },
+ { attachTo: 'body', sync: false },
+ );
+ await asyncExpect(() => {
+ expect($$('.ant-menu-sub').length).toBe(1);
+ toggleMenu(wrapper, 0, 'click');
+ }, 0);
+ await asyncExpect(() => {
+ expect($$('.ant-menu-sub').length).toBe(1);
+ expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
+ toggleMenu(wrapper, 0, 'click');
+ }, 500);
+ await asyncExpect(() => {
+ expect($$('.ant-menu-sub')[0].style.display).toBe('none');
+ }, 500);
+ });
// it('vertical', async () => {
// const wrapper = mount(
diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx
index 4b42a6008..c3c9c3352 100644
--- a/components/menu/src/InlineSubMenuList.tsx
+++ b/components/menu/src/InlineSubMenuList.tsx
@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
+import { computed, defineComponent, ref, watch } from 'vue';
import Transition from '../../_util/transition';
import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
import SubMenuList from './SubMenuList';
diff --git a/components/skeleton/Element.tsx b/components/skeleton/Element.tsx
index efdbc7d5f..913308f2d 100644
--- a/components/skeleton/Element.tsx
+++ b/components/skeleton/Element.tsx
@@ -1,4 +1,4 @@
-import type { CSSProperties, ExtractPropTypes, FunctionalComponent } from '@vue/runtime-dom';
+import type { CSSProperties, ExtractPropTypes, FunctionalComponent } from 'vue';
import classNames from '../_util/classNames';
import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types';
diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx
index 7177e1634..dc9805a97 100644
--- a/components/vc-select/Selector/MultipleSelector.tsx
+++ b/components/vc-select/Selector/MultipleSelector.tsx
@@ -14,7 +14,7 @@ import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import classNames from '../../_util/classNames';
import pickAttrs from '../../_util/pickAttrs';
import PropTypes from '../../_util/vue-types';
-import type { VueNode } from 'ant-design-vue/es/_util/type';
+import type { VueNode } from '../../_util/type';
import Overflow from '../../vc-overflow';
interface SelectorProps extends InnerSelectorProps {
diff --git a/components/vc-util/Children/toArray.ts b/components/vc-util/Children/toArray.ts
index 9f128b6bc..0257fcd49 100644
--- a/components/vc-util/Children/toArray.ts
+++ b/components/vc-util/Children/toArray.ts
@@ -1,4 +1,4 @@
-import type { VNodeTypes } from '@vue/runtime-core';
+import type { VNodeTypes } from 'vue';
import { isFragment } from '../../_util/props-util';
export interface Option {
diff --git a/package.json b/package.json
index 770833f7b..e3e5c6bd8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ant-design-vue",
- "version": "2.2.0-beta.5",
+ "version": "2.2.0-beta.6",
"title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [