feat: support vue@3.2

tangjinzhou · tangjinzhou · commit 6f3fca48a1f5 · 2021-08-10T14:36:28.000+08:00
diff --git a/components/_util/transition.tsx b/components/_util/transition.tsx
@@ -1,5 +1,5 @@
-import type { BaseTransitionProps, CSSProperties, Ref } from 'vue';
-import { getCurrentInstance, onUpdated } from 'vue';
+import { BaseTransitionProps, CSSProperties, onBeforeUpdate, Ref } from 'vue';
+import { getCurrentInstance } from 'vue';
 import { defineComponent, nextTick, Transition as T, TransitionGroup as TG } from 'vue';
 
 export const getTransitionProps = (transitionName: string, opt: object = {}) => {
@@ -51,7 +51,7 @@ if (process.env.NODE_ENV === 'test') {
     inheritAttrs: false,
     setup(_props, { slots, attrs }) {
       const instance = getCurrentInstance();
-      onUpdated(() => {
+      onBeforeUpdate(() => {
         const child = instance.subTree.children[0];
         if (child && child.dirs && child.dirs[0]) {
           const value = child.dirs[0].value;
diff --git a/components/auto-complete/InputElement.tsx b/components/auto-complete/InputElement.tsx
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
@@ -2,7 +2,6 @@ import type { App, Plugin, VNode, ExtractPropTypes } from 'vue';
 import { defineComponent, inject, provide } from 'vue';
 import Select, { SelectProps } from '../select';
 import Input from '../input';
-import InputElement from './InputElement';
 import PropTypes from '../_util/vue-types';
 import { defaultConfigProvider } from '../config-provider';
 import { getComponent, getOptionProps, isValidElement, getSlot } from '../_util/props-util';
@@ -72,7 +71,7 @@ const AutoComplete = defineComponent({
     getInputElement() {
       const children = getSlot(this);
       const element = children.length ? children[0] : <Input lazy={false} />;
-      return <InputElement {...element.props}>{element}</InputElement>;
+      return element;
     },
 
     focus() {
diff --git a/components/cascader/__tests__/__snapshots__/index.test.js.snap b/components/cascader/__tests__/__snapshots__/index.test.js.snap
@@ -113,4 +113,33 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
 </div>
 `;
 
-exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input "><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;
+exports[`Cascader popup correctly with defaultValue 2`] = `
+<div>
+  <!---->
+  <div class="ant-cascader-menus   ant-cascader-menus-placement-bottomLeft">
+    <div>
+      <ul class="ant-cascader-menu">
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Zhejiang" role="menuitem">Zhejiang<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+          <!---->
+        </li>
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand" title="Jiangsu" role="menuitem">Jiangsu<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+          <!---->
+        </li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active" title="Hangzhou" role="menuitem">Hangzhou<span class="ant-cascader-menu-item-expand-icon"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></span>
+          <!---->
+        </li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li class="ant-cascader-menu-item" title="West Lake" role="menuitem">West Lake
+          <!---->
+          <!---->
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader support controlled mode 1`] = `<!----><span class="ant-cascader-picker" tabindex="0"><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><input type="text" readonly="" autocomplete="off" class="ant-input ant-cascader-input"><span tabindex="-1" role="img" aria-label="close-circle" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>`;
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -123,7 +123,7 @@ const Drawer = defineComponent({
       }
       if (!this.visible) {
         this.destroyClose = true;
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
     },
 
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
@@ -128,7 +128,7 @@ export default defineComponent({
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       } else {
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
       nextTick(() => {
         callback && callback();
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
@@ -55,7 +55,7 @@ export default defineComponent({
       if (!hasProp(this, 'value')) {
         this.stateValue = value;
       } else {
-        this.$forceUpdate();
+        (this as any).$forceUpdate();
       }
       nextTick(() => {
         callback && callback();
diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx
@@ -10,6 +10,7 @@ import type { MenuInfo } from './interface';
 import KeyCode from '../../_util/KeyCode';
 import useDirectionStyle from './hooks/useDirectionStyle';
 import Overflow from '../../vc-overflow';
+import devWarning from '../../vc-util/devWarning';
 
 let indexGuid = 0;
 const menuItemProps = {
@@ -30,7 +31,15 @@ export default defineComponent({
   slots: ['icon', 'title'],
   setup(props, { slots, emit, attrs }) {
     const instance = getCurrentInstance();
-    const key = instance.vnode.key;
+
+    const key =
+      typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key;
+    devWarning(
+      typeof instance.vnode.key !== 'symbol',
+      'MenuItem',
+      `MenuItem \`:key="${String(key)}"\` not support Symbol type`,
+    );
+
     const eventKey = `menu_item_${++indexGuid}_$$_${key}`;
     const { parentEventKeys, parentKeys } = useInjectKeyPath();
     const {
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
@@ -12,6 +12,8 @@ import InlineSubMenuList from './InlineSubMenuList';
 import Transition, { getTransitionProps } from '../../_util/transition';
 import { cloneElement } from '../../_util/vnode';
 import Overflow from '../../vc-overflow';
+import devWarning from '../../vc-util/devWarning';
+import isValid from '../../_util/isValid';
 
 let indexGuid = 0;
 
@@ -39,14 +41,17 @@ export default defineComponent({
     useProvideFirstLevel(false);
 
     const instance = getCurrentInstance();
-    const key =
-      instance.vnode.key !== null ? instance.vnode.key : `sub_menu_${++indexGuid}_$$_not_set_key`;
-
+    const vnodeKey =
+      typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key;
+    devWarning(
+      typeof instance.vnode.key !== 'symbol',
+      'SubMenu',
+      `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`,
+    );
+    const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`;
     const eventKey =
       props.eventKey ??
-      (instance.vnode.key !== null
-        ? `sub_menu_${++indexGuid}_$$_${instance.vnode.key}`
-        : (key as string));
+      (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string));
     const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();
     const keysPath = computed(() => [...parentKeys.value, key]);
     const eventKeysPath = computed(() => [...parentEventKeys.value, eventKey]);
diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx
@@ -98,7 +98,7 @@ export default defineComponent({
       this.setVisible(false);
       // Call `setSelectedKeys` & `confirm` in the same time will make filter data not up to date
       // https://github.com/ant-design/ant-design/issues/12284
-      this.$forceUpdate();
+      (this as any).$forceUpdate();
       nextTick(this.confirmFilter2);
     },
 
diff --git a/components/upload/UploadList.tsx b/components/upload/UploadList.tsx
@@ -64,7 +64,7 @@ export default defineComponent({
           previewFile(file.originFileObj).then(previewDataUrl => {
             // Need append '' to avoid dead loop
             file.thumbUrl = previewDataUrl || '';
-            this.$forceUpdate();
+            (this as any).$forceUpdate();
           });
         }
       });
diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx
@@ -5,7 +5,7 @@ import classNames from '../_util/classNames';
 import pickAttrs from '../_util/pickAttrs';
 import { isValidElement } from '../_util/props-util';
 import createRef from '../_util/createRef';
-import type { VNodeChild } from 'vue';
+import type { PropType, VNodeChild } from 'vue';
 import { computed, defineComponent, nextTick, reactive, watch } from 'vue';
 import List from '../vc-virtual-list/List';
 import type {
@@ -61,7 +61,7 @@ const OptionListProps = {
   virtual: PropTypes.looseBool,
 
   onSelect: PropTypes.func,
-  onToggleOpen: PropTypes.func,
+  onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
   /** Tell Select that some value is now active to make accessibility work */
   onActiveValue: PropTypes.func,
   onScroll: PropTypes.func,
diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx
@@ -74,7 +74,7 @@ const Input = defineComponent<InputProps, { VCSelectContainerEvent: any; blurTim
       inputRef,
       attrs,
     } = this.$props as InputProps;
-    let inputNode: any = withDirectives((inputElement || <input />) as VNode, [[antInput]]);
+    let inputNode: any = inputElement || withDirectives((<input />) as VNode, [[antInput]]);
 
     const inputProps = inputNode.props || {};
     const {
diff --git a/components/vc-select/Selector/MultipleSelector.tsx b/components/vc-select/Selector/MultipleSelector.tsx
@@ -7,34 +7,34 @@ import type {
   DisplayLabelValueType,
 } from '../interface/generator';
 import type { RenderNode } from '../interface';
-import type { InnerSelectorProps } from '.';
+import type { InnerSelectorProps } from './interface';
 import Input from './Input';
-import type { VNodeChild, Ref } from 'vue';
+import type { VNodeChild, Ref, PropType } from 'vue';
 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 '../../_util/type';
 import Overflow from '../../vc-overflow';
 
-interface SelectorProps extends InnerSelectorProps {
+type SelectorProps = InnerSelectorProps & {
   // Icon
   removeIcon?: RenderNode;
 
   // Tags
   maxTagCount?: number | 'responsive';
   maxTagTextLength?: number;
-  maxTagPlaceholder?: VNodeChild;
+  maxTagPlaceholder?: VNodeChild | ((omittedValues: LabelValueType[]) => VNodeChild);
   tokenSeparators?: string[];
   tagRender?: (props: CustomTagProps) => VNodeChild;
-  onToggleOpen: (open?: boolean) => void;
+  onToggleOpen: any;
 
   // Motion
   choiceTransitionName?: string;
 
   // Event
   onSelect: (value: RawValueType, option: { selected: boolean }) => void;
-}
+};
 
 const props = {
   id: PropTypes.string,
@@ -62,6 +62,7 @@ const props = {
   ),
   tagRender: PropTypes.func,
 
+  onToggleOpen: { type: Function as PropType<(open?: boolean) => void> },
   onSelect: PropTypes.func,
   onInputChange: PropTypes.func,
   onInputPaste: PropTypes.func,
@@ -78,6 +79,8 @@ const onPreventMouseDown = (event: MouseEvent) => {
 
 const SelectSelector = defineComponent<SelectorProps>({
   name: 'MultipleSelectSelector',
+  inheritAttrs: false,
+  props: props as any,
   setup(props) {
     const measureRef = ref();
     const inputWidth = ref(0);
@@ -278,6 +281,5 @@ const SelectSelector = defineComponent<SelectorProps>({
     };
   },
 });
-SelectSelector.inheritAttrs = false;
-SelectSelector.props = props;
+
 export default SelectSelector;
diff --git a/components/vc-select/Selector/SingleSelector.tsx b/components/vc-select/Selector/SingleSelector.tsx
@@ -1,6 +1,6 @@
 import pickAttrs from '../../_util/pickAttrs';
 import Input from './Input';
-import type { InnerSelectorProps } from '.';
+import type { InnerSelectorProps } from './interface';
 import type { VNodeChild } from 'vue';
 import { computed, defineComponent, Fragment, ref, watch } from 'vue';
 import PropTypes from '../../_util/vue-types';
diff --git a/components/vc-select/Selector/index.tsx b/components/vc-select/Selector/index.tsx
diff --git a/components/vc-select/Selector/interface.ts b/components/vc-select/Selector/interface.ts
diff --git a/components/vc-select/generate.tsx b/components/vc-select/generate.tsx
diff --git a/v2-doc b/v2-doc

Original file line number	Diff line number	Diff line change
`@@ -123,7 +123,7 @@ const Drawer = defineComponent({`
`123`	`123`	`}`
`124`	`124`	`if (!this.visible) {`
`125`	`125`	`this.destroyClose = true;`
`126`		`- this.$forceUpdate();`
	`126`	`+ (this as any).$forceUpdate();`
`127`	`127`	`}`
`128`	`128`	`},`
`129`	`129`
Original file line number	Diff line number	Diff line change
`@@ -128,7 +128,7 @@ export default defineComponent({`
`128`	`128`	`if (!hasProp(this, 'value')) {`
`129`	`129`	`this.stateValue = value;`
`130`	`130`	`} else {`
`131`		`- this.$forceUpdate();`
	`131`	`+ (this as any).$forceUpdate();`
`132`	`132`	`}`
`133`	`133`	`nextTick(() => {`
`134`	`134`	`callback && callback();`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@ export default defineComponent({`
`55`	`55`	`if (!hasProp(this, 'value')) {`
`56`	`56`	`this.stateValue = value;`
`57`	`57`	`} else {`
`58`		`- this.$forceUpdate();`
	`58`	`+ (this as any).$forceUpdate();`
`59`	`59`	`}`
`60`	`60`	`nextTick(() => {`
`61`	`61`	`callback && callback();`