parent
e8b95784eb
commit
4a0fce5a0a
|
@ -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`
|
||||||
|
|
|
@ -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`
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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(
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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": [
|
||||||
|
|
Loading…
Reference in New Issue