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

2021-09-12 08:54:07 +08:00 · 2021-09-12 08:54:07 +08:00 · a6f37debb1
parent e9010e1cc7 752642afaf
commit a6f37debb1
16 changed files with 118 additions and 64 deletions
--- a/CHANGELOG.en-US.md
+++ b/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`
--- a/CHANGELOG.zh-CN.md
+++ b/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`
--- a/components/_util/props-util/initDefaultProps.ts
+++ b/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) {
--- a/components/button/buttonTypes.ts
+++ b/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,
--- a/components/form/useForm.ts
+++ b/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(
--- a/components/list/index.tsx
+++ b/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,
--- a/components/modal/ConfirmDialog.tsx
+++ b/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}
--- a/components/modal/Modal.tsx
+++ b/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;
-  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;
--- a/components/modal/confirm.tsx
+++ b/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;
--- a/components/modal/index.tsx
+++ b/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,
  };
--- a/components/upload/interface.tsx
+++ b/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,
--- a/components/vc-drawer/src/Drawer.jsx
+++ b/components/vc-drawer/src/Drawer.jsx
@ -81,7 +81,7 @@ const Drawer = defineComponent({
      }
      this.preProps.open = val;
      if (val) {
-        nextTick(() => {
+        setTimeout(() => {
          this.domFocus();
        });
      }
--- a/components/vc-overflow/Item.tsx
+++ b/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(() => {
--- a/components/vc-select/generate.tsx
+++ b/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<
-      Omit<OptionListProps<OptionType>, 'options'> & { options?: OptionType[] }
-    >;
+    // TODO
+    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;
-        if (serachVal) {
+        const searchVal = mergedSearchValue.value;
+        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('');
--- a/components/vc-select/interface/generator.ts
+++ b/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;
--- a/package.json
+++ b/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": [