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 ## 2.2.0-beta.5
`2021-06-24` `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 ## 2.2.0-beta.5
`2021-06-24` `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 { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
import { findDOMNode } from './props-util';
export const getTransitionProps = (transitionName: string, opt: object = {}) => { export const getTransitionProps = (transitionName: string, opt: object = {}) => {
if (process.env.NODE_ENV === 'test') { if (process.env.NODE_ENV === 'test') {
@ -46,23 +45,30 @@ let Transition = T;
let TransitionGroup = TG; let TransitionGroup = TG;
if (process.env.NODE_ENV === 'test') { if (process.env.NODE_ENV === 'test') {
Transition = (props, { slots }) => { Transition = defineComponent({
const child = slots.default?.()[0]; 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]) { if (child && child.dirs && child.dirs[0]) {
const value = child.dirs[0].value; const value = child.dirs[0].value;
const oldValue = child.dirs[0].oldValue; const oldValue = child.dirs[0].oldValue;
if (!value && value !== oldValue) { if (!value && value !== oldValue) {
nextTick(() => { nextTick(() => {
if (props.onAfterLeave) { if (attrs.onAfterLeave) {
props.onAfterLeave(findDOMNode(this)); (attrs as any).onAfterLeave(instance.vnode.el);
} }
}); });
} }
} }
});
return () => {
return slots.default?.(); return slots.default?.();
}; };
Transition.displayName = 'TransitionForTest'; },
Transition.inheritAttrs = false; }) as any;
TransitionGroup = defineComponent({ TransitionGroup = defineComponent({
name: 'TransitionGroupForTest', name: 'TransitionGroupForTest',
inheritAttrs: false, inheritAttrs: false,

View File

@ -17,7 +17,7 @@ describe('BackTop', () => {
}); });
window.scrollTo(0, 400); window.scrollTo(0, 400);
expect(document.documentElement.scrollTop).toBe(400); expect(document.documentElement.scrollTop).toBe(400);
await sleep(10); await sleep(100);
wrapper.find('.ant-back-top').trigger('click'); wrapper.find('.ant-back-top').trigger('click');
await sleep(500); await sleep(500);
expect(document.documentElement.scrollTop).toBe(0); expect(document.documentElement.scrollTop).toBe(0);

View File

@ -1,6 +1,6 @@
import { useInjectFormItemPrefix } from './context'; import { useInjectFormItemPrefix } from './context';
import type { VueNode } from '../_util/type'; 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 classNames from '../_util/classNames';
import Transition, { getTransitionProps } from '../_util/transition'; import Transition, { getTransitionProps } from '../_util/transition';
import useConfigInject from '../_util/hooks/useConfigInject'; import useConfigInject from '../_util/hooks/useConfigInject';

View File

@ -187,14 +187,14 @@ describe('Menu', () => {
await asyncExpect(() => { await asyncExpect(() => {
expect($$('.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
}, 0); }, 0);
// openKeys.value = []; openKeys.value = [];
// await asyncExpect(() => { await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).toBe('none'); expect($$('.ant-menu-sub')[0].style.display).toBe('none');
// }, 100); }, 100);
// wrapper.setProps({ openKeys: ['1'] }); openKeys.value = ['1'];
// await asyncExpect(() => { await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
// }, 0); }, 100);
}); });
it('vertical', async () => { it('vertical', async () => {
@ -376,28 +376,28 @@ describe('Menu', () => {
{ attachTo: 'body', sync: false }, { attachTo: 'body', sync: false },
); );
await asyncExpect(() => { await asyncExpect(() => {
expect(wrapper.findAll('.ant-menu-sub').length).toBe(0); expect(wrapper.findAll('.ant-menu-sub').length).toBe(1);
}); });
wrapper.setProps({ inlineCollapsed: true }); wrapper.setProps({ inlineCollapsed: true });
await asyncExpect(() => { // await asyncExpect(() => {
// 动画完成后的回调 // // 动画完成后的回调
wrapper.vm.$refs.menu.switchModeFromInline = false; // wrapper.vm.$refs.menu.switchModeFromInline = false;
wrapper.vm.$forceUpdate(); // wrapper.vm.$forceUpdate();
}); // });
// await asyncExpect(() => { // await asyncExpect(() => {
// wrapper.trigger('transitionend', { propertyName: 'width' }); // wrapper.trigger('transitionend', { propertyName: 'width' });
// }); // });
// await asyncExpect(() => { await asyncExpect(() => {
// $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter')); $$('.ant-menu-submenu-title')[0].dispatchEvent(new MouseEvent('mouseenter'));
// }); });
// await asyncExpect(() => { await asyncExpect(() => {
// expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain( expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain(
// 'ant-menu-submenu-vertical', 'ant-menu-submenu-vertical',
// ); );
// expect(wrapper.findAll('.ant-menu-submenu')[0].classes()).toContain('ant-menu-submenu-open'); 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].className).toContain('ant-menu-vertical');
// expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('ul.ant-menu-sub')[0].style.display).not.toBe('none');
// }, 500); }, 500);
}); });
// describe('open submenu when click submenu title', () => { // describe('open submenu when click submenu title', () => {
@ -405,40 +405,40 @@ describe('Menu', () => {
// document.body.innerHTML = ''; // document.body.innerHTML = '';
// }); // });
// const toggleMenu = (wrapper, index, event) => { const toggleMenu = (wrapper, index, event) => {
// wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event); wrapper.findAll('.ant-menu-submenu-title')[index].trigger(event);
// }; };
// it('inline', async () => { it('inline', async () => {
// const wrapper = mount( const wrapper = mount(
// { {
// render() { render() {
// return ( return (
// <Menu mode="inline"> <Menu mode="inline">
// <SubMenu key="1" title="submenu1"> <SubMenu key="1" title="submenu1">
// <Menu.Item key="submenu1">Option 1</Menu.Item> <Menu.Item key="submenu1">Option 1</Menu.Item>
// <Menu.Item key="submenu2">Option 2</Menu.Item> <Menu.Item key="submenu2">Option 2</Menu.Item>
// </SubMenu> </SubMenu>
// <Menu.Item key="2">menu2</Menu.Item> <Menu.Item key="2">menu2</Menu.Item>
// </Menu> </Menu>
// ); );
// }, },
// }, },
// { attachTo: 'body', sync: false }, { attachTo: 'body', sync: false },
// ); );
// await asyncExpect(() => { await asyncExpect(() => {
// expect($$('.ant-menu-sub').length).toBe(0); expect($$('.ant-menu-sub').length).toBe(1);
// toggleMenu(wrapper, 0, 'click'); toggleMenu(wrapper, 0, 'click');
// }, 0); }, 0);
// await asyncExpect(() => { await asyncExpect(() => {
// expect($$('.ant-menu-sub').length).toBe(1); expect($$('.ant-menu-sub').length).toBe(1);
// expect($$('.ant-menu-sub')[0].style.display).not.toBe('none'); expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
// toggleMenu(wrapper, 0, 'click'); toggleMenu(wrapper, 0, 'click');
// }, 500); }, 500);
// await asyncExpect(() => { await asyncExpect(() => {
// expect($$('.ant-menu-sub')[0].style.display).toBe('none'); expect($$('.ant-menu-sub')[0].style.display).toBe('none');
// }, 500); }, 500);
// }); });
// it('vertical', async () => { // it('vertical', async () => {
// const wrapper = mount( // 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 Transition from '../../_util/transition';
import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext'; import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
import SubMenuList from './SubMenuList'; 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 classNames from '../_util/classNames';
import { tuple } from '../_util/type'; import { tuple } from '../_util/type';
import PropTypes from '../_util/vue-types'; 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 classNames from '../../_util/classNames';
import pickAttrs from '../../_util/pickAttrs'; import pickAttrs from '../../_util/pickAttrs';
import PropTypes from '../../_util/vue-types'; 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'; import Overflow from '../../vc-overflow';
interface SelectorProps extends InnerSelectorProps { 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'; import { isFragment } from '../../_util/props-util';
export interface Option { export interface Option {

View File

@ -1,6 +1,6 @@
{ {
"name": "ant-design-vue", "name": "ant-design-vue",
"version": "2.2.0-beta.5", "version": "2.2.0-beta.6",
"title": "Ant Design Vue", "title": "Ant Design Vue",
"description": "An enterprise-class UI design language and Vue-based implementation", "description": "An enterprise-class UI design language and Vue-based implementation",
"keywords": [ "keywords": [