release 2.2.0-beta.6

pull/4277/head 2.2.0-beta.6
tangjinzhou 2021-06-26 14:27:26 +08:00
parent e8b95784eb
commit 4a0fce5a0a
11 changed files with 103 additions and 83 deletions

View File

@ -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`

View File

@ -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`

View File

@ -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,

View File

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

View File

@ -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';

View File

@ -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 (
// <Menu mode="inline">
// <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item>
// </Menu>
// );
// },
// },
// { 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 (
<Menu mode="inline">
<SubMenu key="1" title="submenu1">
<Menu.Item key="submenu1">Option 1</Menu.Item>
<Menu.Item key="submenu2">Option 2</Menu.Item>
</SubMenu>
<Menu.Item key="2">menu2</Menu.Item>
</Menu>
);
},
},
{ 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(

View File

@ -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';

View File

@ -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';

View File

@ -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 {

View File

@ -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 {

View File

@ -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": [