Merge remote-tracking branch 'origin/next' into v2.3

CHANGELOG.en-US.md

@@ -10,6 +10,21 @@
 
 ---
 
+## 2.2.7
+
+`2021-09-08`
+
+- 🌟 Menu supports overflowedIndicator slot [#4515](https://github.com/vueComponent/ant-design-vue/issues/4515)
+- 🌟 useForm supports dynamic rule [#4498](https://github.com/vueComponent/ant-design-vue/issues/4498)
+- 🌟 Select supports Number type [#4570](https://github.com/vueComponent/ant-design-vue/issues/4570)
+- 🐞 Fix the warning problem caused by css zoom [#4554](https://github.com/vueComponent/ant-design-vue/issues/4554)
+- 🐞 Fix Mentions input Chinese error report [#4524](https://github.com/vueComponent/ant-design-vue/issues/4524)
+- 🐞 Fix the issue that AutoComplete does not support global prefixCls [#4566](https://github.com/vueComponent/ant-design-vue/issues/4566)
+- 🐞 Fix Table nested table error report [#4600](https://github.com/vueComponent/ant-design-vue/issues/4600)
+- 🐞 Fix MenuItem danger property under Dropdown has no style problem [#4618](https://github.com/vueComponent/ant-design-vue/issues/4618)
+- 🐞 Fix Modal.xxx and other methods passing appContext invalid problem [#4627](https://github.com/vueComponent/ant-design-vue/issues/4627)
+- 🐞 Fix some TS type errors
+
 ## 2.2.6
 
 `2021-08-12`

CHANGELOG.zh-CN.md

@@ -10,6 +10,21 @@
 
 ---
 
+## 2.2.7
+
+`2021-09-08`
+
+- 🌟 Menu 支持 overflowedIndicator 插槽 [#4515](https://github.com/vueComponent/ant-design-vue/issues/4515)
+- 🌟 useForm 支持动态 rule [#4498](https://github.com/vueComponent/ant-design-vue/issues/4498)
+- 🌟 Select 支持 Number 类型 [#4570](https://github.com/vueComponent/ant-design-vue/issues/4570)
+- 🐞 修复 css zoom 引起的 warning 问题 [#4554](https://github.com/vueComponent/ant-design-vue/issues/4554)
+- 🐞 修复 Mentions 输入中文报错问题 [#4524](https://github.com/vueComponent/ant-design-vue/issues/4524)
+- 🐞 修复 AutoComplete 不支持全局 prefixCls 问题 [#4566](https://github.com/vueComponent/ant-design-vue/issues/4566)
+- 🐞 修复 Table 嵌套表格报错问题 [#4600](https://github.com/vueComponent/ant-design-vue/issues/4600)
+- 🐞 修复 Dropdown 下的 MenuItem danger 属性无样式问题 [#4618](https://github.com/vueComponent/ant-design-vue/issues/4618)
+- 🐞 修复 Modal.xxx 等方法传递 appContext 失效问题 [#4627](https://github.com/vueComponent/ant-design-vue/issues/4627)
+- 🐞 修复一些 TS 类型错误
+
 ## 2.2.6
 
 `2021-08-12`

components/_util/props-util/initDefaultProps.ts

@@ -13,7 +13,7 @@ const initDefaultProps = <T>(
       : any;
   },
 ): T => {
-  const propTypes: T = { ...types } as T;
+  const propTypes: T = { ...types };
   Object.keys(defaultProps).forEach(k => {
     const prop = propTypes[k] as VueTypeValidableDef;
     if (prop) {

components/button/buttonTypes.ts

@@ -29,7 +29,7 @@ const buttonProps = () => ({
     type: String as PropType<SizeType>,
   },
   loading: {
-    type: [Boolean, Object],
+    type: [Boolean, Object] as PropType<boolean | { delay?: number }>,
     default: (): boolean | { delay?: number } => false,
   },
   disabled: PropTypes.looseBool,

components/form/useForm.ts

@@ -122,7 +122,7 @@ function useForm(
   const validateInfos = reactive<validateInfos>({});
 
   const rulesKeys = computed(() => {
-    return Object.keys(unref(rulesRef));
+    return rulesRef ? Object.keys(unref(rulesRef)) : [];
   });
 
   watch(

components/list/index.tsx

@@ -24,7 +24,7 @@ export type { ListItemMetaProps } from './ItemMeta';
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export const ListGridType = {
-  gutter: PropTypes.number,
+  gutter: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(Number)]),
   column: PropTypes.number,
   xs: PropTypes.number,
   sm: PropTypes.number,

components/modal/ConfirmDialog.tsx

@@ -3,14 +3,21 @@ import type { ModalFuncProps } from './Modal';
 import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
-import type { FunctionalComponent } from 'vue';
+import { FunctionalComponent } from 'vue';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
-  close: (...args: any[]) => void;
+  close?: (...args: any[]) => void;
   autoFocusButton?: null | 'ok' | 'cancel';
 }
 
+function renderSomeContent(_name, someContent) {
+  if (typeof someContent === 'function') {
+    return someContent();
+  }
+  return someContent;
+}
+
 const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
   const {
     icon,
@@ -40,8 +47,10 @@ const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
   // 默认为 false，保持旧版默认行为
   const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
   const runtimeLocale = getConfirmLocale();
-  const okText = props.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
+  const okText =
-  const cancelText = props.cancelText || runtimeLocale.cancelText;
+    renderSomeContent('okText', props.okText) ||
+    (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
+  const cancelText = renderSomeContent('cancelText', props.cancelText) || runtimeLocale.cancelText;
   const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
   const transitionName = props.transitionName || 'zoom';
   const maskTransitionName = props.maskTransitionName || 'fade';
@@ -89,11 +98,15 @@ const ConfirmDialog: FunctionalComponent<ConfirmDialogProps> = props => {
     >
       <div class={`${contentPrefixCls}-body-wrapper`}>
         <div class={`${contentPrefixCls}-body`}>
-          {icon}
+          {renderSomeContent('icon', icon)}
           {props.title === undefined ? null : (
-            <span class={`${contentPrefixCls}-title`}>{props.title}</span>
+            <span class={`${contentPrefixCls}-title`}>
+              {renderSomeContent('title', props.title)}
+            </span>
           )}
-          <div class={`${contentPrefixCls}-content`}>{props.content}</div>
+          <div class={`${contentPrefixCls}-content`}>
+            {renderSomeContent('content', props.content)}
+          </div>
         </div>
         <div class={`${contentPrefixCls}-btns`}>
           {cancelButton}

components/modal/Modal.tsx

@@ -95,9 +95,9 @@ export interface ModalFuncProps {
   prefixCls?: string;
   class?: string;
   visible?: boolean;
-  title?: VNodeTypes;
+  title?: (() => VNodeTypes) | VNodeTypes;
   closable?: boolean;
-  content?: VNodeTypes;
+  content?: (() => VNodeTypes) | VNodeTypes;
   // TODO: find out exact types
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
@@ -105,10 +105,10 @@ export interface ModalFuncProps {
   cancelButtonProps?: ButtonPropsType;
   centered?: boolean;
   width?: string | number;
-  okText?: VNodeTypes;
+  okText?: (() => VNodeTypes) | VNodeTypes;
   okType?: LegacyButtonType;
-  cancelText?: VNodeTypes;
+  cancelText?: (() => VNodeTypes) | VNodeTypes;
-  icon?: VNodeTypes;
+  icon?: (() => VNodeTypes) | VNodeTypes;
   /* Deprecated */
   iconType?: string;
   mask?: boolean;
@@ -123,7 +123,10 @@ export interface ModalFuncProps {
   autoFocusButton?: null | 'ok' | 'cancel';
   transitionName?: string;
   maskTransitionName?: string;
+
+  /** @deprecated please use `appContext` instead */
   parentContext?: any;
+  appContext?: any;
 }
 
 type getContainerFunc = () => HTMLElement;

components/modal/confirm.tsx

@@ -1,17 +1,20 @@
-import { createApp } from 'vue';
+import { createVNode, render as vueRender } from 'vue';
 import ConfirmDialog from './ConfirmDialog';
 import type { ModalFuncProps } from './Modal';
 import { destroyFns } from './Modal';
 
 import Omit from 'omit.js';
 
-export default function confirm(config: ModalFuncProps) {
+const confirm = (config: ModalFuncProps) => {
   const div = document.createElement('div');
   document.body.appendChild(div);
-  let currentConfig = { ...Omit(config, ['parentContext']), close, visible: true } as any;
+  let currentConfig = {
+    ...Omit(config, ['parentContext', 'appContext']),
+    close,
+    visible: true,
+  } as any;
 
   let confirmDialogInstance = null;
-  let confirmDialogProps = {};
   function close(this: typeof close, ...args: any[]) {
     currentConfig = {
       ...currentConfig,
@@ -25,12 +28,15 @@ export default function confirm(config: ModalFuncProps) {
       ...currentConfig,
       ...newConfig,
     };
-    confirmDialogInstance &&
+    if (confirmDialogInstance) {
-      Object.assign(confirmDialogInstance, { confirmDialogProps: currentConfig });
+      Object.assign(confirmDialogInstance.component.props, currentConfig);
+      confirmDialogInstance.component.update();
+    }
   }
   function destroy(...args: any[]) {
     if (confirmDialogInstance && div.parentNode) {
-      confirmDialogInstance.vIf = false; // hack destroy
+      Object.assign(confirmDialogInstance.component.props, { vIf: false }); // hack destroy
+      confirmDialogInstance.component.update();
       confirmDialogInstance = null;
       div.parentNode.removeChild(div);
     }
@@ -46,20 +52,14 @@ export default function confirm(config: ModalFuncProps) {
       }
     }
   }
-
+  const Wrapper = p => {
+    return p.vIf ? <ConfirmDialog {...p}></ConfirmDialog> : null;
+  };
   function render(props: ModalFuncProps) {
-    confirmDialogProps = props;
+    const vm = createVNode(Wrapper, { ...props, vIf: true });
-    return createApp({
+    vm.appContext = config.parentContext || config.appContext || vm.appContext;
-      parent: (config as any).parentContext,
+    vueRender(vm, div);
-      data() {
+    return vm;
-        return { confirmDialogProps, vIf: true };
-      },
-      render() {
-        // 先解构，避免报错，原因不详
-        const cdProps = { ...this.confirmDialogProps };
-        return this.vIf ? <ConfirmDialog {...cdProps} /> : null;
-      },
-    }).mount(div);
   }
 
   confirmDialogInstance = render(currentConfig);
@@ -68,4 +68,6 @@ export default function confirm(config: ModalFuncProps) {
     destroy: close,
     update,
   };
-}
+};
+
+export default confirm;

components/modal/index.tsx

@@ -13,7 +13,7 @@ export type { ModalProps, ModalFuncProps } from './Modal';
 const info = function (props: ModalFuncProps) {
   const config = {
     type: 'info',
-    icon: <InfoCircleOutlined />,
+    icon: () => <InfoCircleOutlined />,
     okCancel: false,
     ...props,
   };
@@ -23,7 +23,7 @@ const info = function (props: ModalFuncProps) {
 const success = function (props: ModalFuncProps) {
   const config = {
     type: 'success',
-    icon: <CheckCircleOutlined />,
+    icon: () => <CheckCircleOutlined />,
     okCancel: false,
     ...props,
   };
@@ -33,7 +33,7 @@ const success = function (props: ModalFuncProps) {
 const error = function (props: ModalFuncProps) {
   const config = {
     type: 'error',
-    icon: <CloseCircleOutlined />,
+    icon: () => <CloseCircleOutlined />,
     okCancel: false,
     ...props,
   };
@@ -43,7 +43,7 @@ const error = function (props: ModalFuncProps) {
 const warning = function (props: ModalFuncProps) {
   const config = {
     type: 'warning',
-    icon: <ExclamationCircleOutlined />,
+    icon: () => <ExclamationCircleOutlined />,
     okCancel: false,
     ...props,
   };

components/upload/interface.tsx

@@ -70,7 +70,7 @@ export const UploadProps = {
   action: PropsTypes.oneOfType([PropsTypes.string, PropsTypes.func]),
   directory: PropsTypes.looseBool,
   data: PropsTypes.oneOfType([PropsTypes.object, PropsTypes.func]),
-  method: PropsTypes.oneOf(tuple('POST', 'PUT', 'post', 'put')),
+  method: PropsTypes.oneOf(tuple('POST', 'PUT', 'PATCH', 'post', 'put', 'patch')),
   headers: PropsTypes.object,
   showUploadList: PropsTypes.oneOfType([PropsTypes.looseBool, ShowUploadListInterface]),
   multiple: PropsTypes.looseBool,

components/vc-drawer/src/Drawer.jsx

@@ -81,7 +81,7 @@ const Drawer = defineComponent({
       }
       this.preProps.open = val;
       if (val) {
-        nextTick(() => {
+        setTimeout(() => {
           this.domFocus();
         });
       }

components/vc-overflow/Item.tsx

@@ -14,7 +14,7 @@ export default defineComponent({
     item: PropTypes.any,
     renderItem: Function as PropType<(item: any) => VueNode>,
     responsive: Boolean,
-    itemKey: [String, Number],
+    itemKey: { type: [String, Number] as PropType<string | number> },
     registerSize: Function as PropType<(key: Key, width: number | null) => void>,
     display: Boolean,
     order: Number,
@@ -29,7 +29,7 @@ export default defineComponent({
 
     // ================================ Effect ================================
     function internalRegisterSize(width: number | null) {
-      props.registerSize(props.itemKey!, width);
+      props.registerSize(props.itemKey, width);
     }
 
     onUnmounted(() => {

components/vc-select/generate.tsx

@@ -36,7 +36,7 @@ import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
 import useCacheDisplayValue from './hooks/useCacheDisplayValue';
 import useCacheOptions from './hooks/useCacheOptions';
-import type { CSSProperties, DefineComponent, PropType, VNode, VNodeChild } from 'vue';
+import type { CSSProperties, PropType, VNode, VNodeChild } from 'vue';
 import { getCurrentInstance } from 'vue';
 import {
   computed,
@@ -215,9 +215,13 @@ export type SelectProps<T1, T2> = FuncReturnType<T1, T2>;
 export interface GenerateConfig<OptionType extends object> {
   prefixCls: string;
   components: {
-    optionList: DefineComponent<
+    // TODO
-      Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] }
+    optionList: (
-    >;
+      props: Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] },
+    ) => JSX.Element;
+    // optionList: DefineComponent<
+    //   Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] }
+    // >;
   };
   /** Convert jsx tree into `OptionType[]` */
   convertChildrenToData: (children: VNodeChild | JSX.Element) => OptionType[];
@@ -245,6 +249,7 @@ export interface GenerateConfig<OptionType extends object> {
   ) => OptionType[];
   omitDOMProps?: (props: object) => object;
 }
+
 type ValueType = DefaultValueType;
 /**
  * This function is in internal usage.
@@ -330,13 +335,18 @@ export default function generateSelector<
       // ============================== Ref ===============================
       const selectorDomRef = createRef();
 
-      const mergedValue = ref();
+      const innerSearchValue = ref('');
+      const setInnerSearchValue = (val: string) => {
+        innerSearchValue.value = val;
+      };
+
+      const mergedValue = ref(props.value !== undefined ? props.value : props.defaultValue);
       watch(
         () => props.value,
         () => {
-          mergedValue.value = props.value !== undefined ? props.value : props.defaultValue;
+          mergedValue.value = props.value;
+          innerSearchValue.value = '';
         },
-        { immediate: true },
       );
       // ============================= Value ==============================
 
@@ -358,10 +368,6 @@ export default function generateSelector<
       const setActiveValue = (val: string) => {
         activeValue.value = val;
       };
-      const innerSearchValue = ref('');
-      const setInnerSearchValue = (val: string) => {
-        innerSearchValue.value = val;
-      };
 
       const mergedSearchValue = computed(() => {
         let mergedSearchValue = innerSearchValue.value;
@@ -378,7 +384,7 @@ export default function generateSelector<
       const mergedOptions = computed((): OptionType[] => {
         let newOptions = props.options;
         if (newOptions === undefined) {
-          newOptions = convertChildrenToData(props.children);
+          newOptions = convertChildrenToData(props.children as VNodeChild);
         }
 
         /**
@@ -667,7 +673,7 @@ export default function generateSelector<
         // Check if match the `tokenSeparators`
         const patchLabels: string[] = isCompositing
           ? null
-          : getSeparatedContent(searchText, props.tokenSeparators);
+          : getSeparatedContent(searchText, props.tokenSeparators as string[]);
         let patchRawValues: RawValueType[] = patchLabels;
 
         if (props.mode === 'combobox') {
@@ -847,12 +853,12 @@ export default function generateSelector<
         if (props.disabled) {
           return;
         }
-        const serachVal = mergedSearchValue.value;
+        const searchVal = mergedSearchValue.value;
-        if (serachVal) {
+        if (searchVal) {
           // `tags` mode should move `searchValue` into values
           if (props.mode === 'tags') {
             triggerSearch('', false, false);
-            triggerChange(Array.from(new Set([...mergedRawValue.value, serachVal])));
+            triggerChange(Array.from(new Set([...mergedRawValue.value, searchVal])));
           } else if (props.mode === 'multiple') {
             // `multiple` mode only clean the search value but not trigger event
             setInnerSearchValue('');

components/vc-select/interface/generator.ts

@@ -12,7 +12,7 @@ export type RawValueType = string | number | null;
 export interface LabelValueType extends Record<string, any> {
   key?: Key;
   value?: RawValueType;
-  label?: VueNode;
+  label?: any;
   isCacheable?: boolean;
 }
 export type DefaultValueType = RawValueType | RawValueType[] | LabelValueType | LabelValueType[];
@@ -26,7 +26,7 @@ export type SingleType<MixType> = MixType extends (infer Single)[] ? Single : Mi
 export type OnClear = () => any;
 
 export type CustomTagProps = {
-  label: VueNode;
+  label: any;
   value: DefaultValueType;
   disabled: boolean;
   onClose: (event?: MouseEvent) => void;

package.json

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