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

Author: tangjinzhou

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 cancelText = props.cancelText || runtimeLocale.cancelText;
+  const okText =
+    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,20 +95,20 @@ 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;
   okButtonProps?: ButtonPropsType;
   cancelButtonProps?: ButtonPropsType;
   centered?: boolean;
   width?: string | number;
-  okText?: VNodeTypes;
+  okText?: (() => VNodeTypes) | VNodeTypes;
   okType?: LegacyButtonType;
-  cancelText?: VNodeTypes;
-  icon?: VNodeTypes;
+  cancelText?: (() => VNodeTypes) | 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 &&
-      Object.assign(confirmDialogInstance, { confirmDialogProps: currentConfig });
+    if (confirmDialogInstance) {
+      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;
-    return createApp({
-      parent: (config as any).parentContext,
-      data() {
-        return { confirmDialogProps, vIf: true };
-      },
-      render() {
-        // 先解构，避免报错，原因不详
-        const cdProps = { ...this.confirmDialogProps };
-        return this.vIf ? <ConfirmDialog {...cdProps} /> : null;
-      },
-    }).mount(div);
+    const vm = createVNode(Wrapper, { ...props, vIf: true });
+    vm.appContext = config.parentContext || config.appContext || vm.appContext;
+    vueRender(vm, div);
+    return vm;
   }
 
   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,
   };