refactor: modal

components/modal/ActionButton.tsx

@@ -1,89 +1,113 @@
 import type { ExtractPropTypes, PropType } from 'vue';
-import { defineComponent } from 'vue';
+import { onMounted, ref, defineComponent, onBeforeUnmount } from 'vue';
-import PropTypes from '../_util/vue-types';
 import Button from '../button';
-import BaseMixin from '../_util/BaseMixin';
+import type { ButtonProps } from '../button';
 import type { LegacyButtonType } from '../button/buttonTypes';
 import { convertLegacyProps } from '../button/buttonTypes';
-import { getSlot, findDOMNode } from '../_util/props-util';
 
-const ActionButtonProps = {
+const actionButtonProps = {
   type: {
     type: String as PropType<LegacyButtonType>,
   },
-  actionFn: PropTypes.func,
+  actionFn: Function as PropType<(...args: any[]) => any | PromiseLike<any>>,
-  closeModal: PropTypes.func,
+  close: Function,
-  autofocus: PropTypes.looseBool,
+  autofocus: Boolean,
-  buttonProps: PropTypes.object,
+  prefixCls: String,
+  buttonProps: Object as PropType<ButtonProps>,
+  emitEvent: Boolean,
+  quitOnNullishReturnValue: Boolean,
 };
 
-export type IActionButtonProps = ExtractPropTypes<typeof ActionButtonProps>;
+export type ActionButtonProps = ExtractPropTypes<typeof actionButtonProps>;
+
+function isThenable(thing?: PromiseLike<any>): boolean {
+  return !!(thing && !!thing.then);
+}
 
 export default defineComponent({
-  mixins: [BaseMixin],
+  name: 'ActionButton',
-  props: ActionButtonProps,
+  props: actionButtonProps,
-  setup() {
+  setup(props, { slots }) {
-    return {
+    const clickedRef = ref<boolean>(false);
-      timeoutId: undefined,
+    const buttonRef = ref();
-    };
+    const loading = ref(false);
-  },
+    let timeoutId: any;
-  data() {
+    onMounted(() => {
-    return {
+      if (props.autofocus) {
-      loading: false,
+        timeoutId = setTimeout(() => buttonRef.value.$el?.focus());
-    };
-  },
-  mounted() {
-    if (this.autofocus) {
-      this.timeoutId = setTimeout(() => findDOMNode(this).focus());
       }
-  },
+    });
-  beforeUnmount() {
+    onBeforeUnmount(() => {
-    clearTimeout(this.timeoutId);
+      clearTimeout(timeoutId);
-  },
+    });
-  methods: {
+
-    onClick() {
+    const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
-      const { actionFn, closeModal } = this;
+      const { close } = props;
-      if (actionFn) {
+      if (!isThenable(returnValueOfOnOk)) {
-        let ret: any;
+        return;
-        if (actionFn.length) {
-          ret = actionFn(closeModal);
-        } else {
-          ret = actionFn();
-          if (!ret) {
-            closeModal();
       }
-        }
+      loading.value = true;
-        if (ret && ret.then) {
+      returnValueOfOnOk!.then(
-          this.setState({ loading: true });
-          ret.then(
         (...args: any[]) => {
-              // It's unnecessary to set loading=false, for the Modal will be unmounted after close.
+          loading.value = false;
-              // this.setState({ loading: false });
+          close(...args);
-              closeModal(...args);
+          clickedRef.value = false;
         },
-            (e: Event) => {
+        (e: Error) => {
           // Emit error when catch promise reject
           // eslint-disable-next-line no-console
           console.error(e);
           // See: https://github.com/ant-design/ant-design/issues/6183
-              this.setState({ loading: false });
+          loading.value = false;
+          clickedRef.value = false;
         },
       );
-        }
-      } else {
-        closeModal();
-      }
-    },
-  },
-
-  render() {
-    const { type, loading, buttonProps } = this;
-    const props = {
-      ...convertLegacyProps(type),
-      onClick: this.onClick,
-      loading,
-      ...buttonProps,
     };
-    return <Button {...props}>{getSlot(this)}</Button>;
+
+    const onClick = (e: MouseEvent) => {
+      const { actionFn, close = () => {} } = props;
+      if (clickedRef.value) {
+        return;
+      }
+      clickedRef.value = true;
+      if (!actionFn) {
+        close();
+        return;
+      }
+      let returnValueOfOnOk;
+      if (props.emitEvent) {
+        returnValueOfOnOk = actionFn(e);
+        if (props.quitOnNullishReturnValue && !isThenable(returnValueOfOnOk)) {
+          clickedRef.value = false;
+          close(e);
+          return;
+        }
+      } else if (actionFn.length) {
+        returnValueOfOnOk = actionFn(close);
+        // https://github.com/ant-design/ant-design/issues/23358
+        clickedRef.value = false;
+      } else {
+        returnValueOfOnOk = actionFn();
+        if (!returnValueOfOnOk) {
+          close();
+          return;
+        }
+      }
+      handlePromiseOnOk(returnValueOfOnOk);
+    };
+    return () => {
+      const { type, prefixCls, buttonProps } = props;
+      return (
+        <Button
+          {...convertLegacyProps(type)}
+          onClick={onClick}
+          loading={loading.value}
+          prefixCls={prefixCls}
+          {...buttonProps}
+          ref={buttonRef}
+          v-slots={slots}
+        ></Button>
+      );
+    };
   },
 });

components/modal/ConfirmDialog.tsx

@@ -4,14 +4,17 @@ import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { defineComponent } from 'vue';
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
+import { getTransitionName } from '../_util/transition';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
   close?: (...args: any[]) => void;
   autoFocusButton?: null | 'ok' | 'cancel';
+  rootPrefixCls: string;
+  iconPrefixCls?: string;
 }
 
-function renderSomeContent(_name, someContent) {
+function renderSomeContent(someContent: any) {
   if (typeof someContent === 'function') {
     return someContent();
   }
@@ -50,6 +53,12 @@ export default defineComponent<ConfirmDialogProps>({
     'type',
     'title',
     'content',
+    'direction',
+    'rootPrefixCls',
+    'bodyStyle',
+    'closeIcon',
+    'modalRender',
+    'focusTriggerAfterClose',
   ] as any,
   setup(props, { attrs }) {
     const [locale] = useLocaleReceiver('Modal');
@@ -73,22 +82,24 @@ export default defineComponent<ConfirmDialogProps>({
         width = 416,
         mask = true,
         maskClosable = false,
-        maskTransitionName = 'fade',
-        transitionName = 'zoom',
         type,
         title,
         content,
-        // closable = false,
+        direction,
+        closeIcon,
+        modalRender,
+        focusTriggerAfterClose,
+        rootPrefixCls,
+        bodyStyle,
       } = props;
       const okType = props.okType || 'primary';
       const prefixCls = props.prefixCls || 'ant-modal';
       const contentPrefixCls = `${prefixCls}-confirm`;
       const style = attrs.style || {};
       const okText =
-        renderSomeContent('okText', props.okText) ||
+        renderSomeContent(props.okText) ||
         (okCancel ? locale.value.okText : locale.value.justOkText);
-      const cancelText =
+      const cancelText = renderSomeContent(props.cancelText) || locale.value.cancelText;
-        renderSomeContent('cancelText', props.cancelText) || locale.value.cancelText;
       const autoFocusButton =
         props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
 
@@ -96,15 +107,17 @@ export default defineComponent<ConfirmDialogProps>({
         contentPrefixCls,
         `${contentPrefixCls}-${type}`,
         `${prefixCls}-${type}`,
+        { [`${contentPrefixCls}-rtl`]: direction === 'rtl' },
         attrs.class,
       );
 
       const cancelButton = okCancel && (
         <ActionButton
           actionFn={onCancel}
-          closeModal={close}
+          close={close}
           autofocus={autoFocusButton === 'cancel'}
           buttonProps={cancelButtonProps}
+          prefixCls={`${rootPrefixCls}-btn`}
         >
           {cancelText}
         </ActionButton>
@@ -118,13 +131,14 @@ export default defineComponent<ConfirmDialogProps>({
           onCancel={e => close({ triggerCancel: true }, e)}
           visible={visible}
           title=""
-          transitionName={transitionName}
           footer=""
-          maskTransitionName={maskTransitionName}
+          transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}
+          maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)}
           mask={mask}
           maskClosable={maskClosable}
           maskStyle={maskStyle}
           style={style}
+          bodyStyle={bodyStyle}
           width={width}
           zIndex={zIndex}
           afterClose={afterClose}
@@ -132,25 +146,27 @@ export default defineComponent<ConfirmDialogProps>({
           centered={centered}
           getContainer={getContainer}
           closable={closable}
+          closeIcon={closeIcon}
+          modalRender={modalRender}
+          focusTriggerAfterClose={focusTriggerAfterClose}
         >
           <div class={`${contentPrefixCls}-body-wrapper`}>
             <div class={`${contentPrefixCls}-body`}>
-              {renderSomeContent('icon', icon)}
+              {renderSomeContent(icon)}
               {title === undefined ? null : (
-                <span class={`${contentPrefixCls}-title`}>{renderSomeContent('title', title)}</span>
+                <span class={`${contentPrefixCls}-title`}>{renderSomeContent(title)}</span>
               )}
-              <div class={`${contentPrefixCls}-content`}>
+              <div class={`${contentPrefixCls}-content`}>{renderSomeContent(content)}</div>
-                {renderSomeContent('content', content)}
-              </div>
             </div>
             <div class={`${contentPrefixCls}-btns`}>
               {cancelButton}
               <ActionButton
                 type={okType}
                 actionFn={onOk}
-                closeModal={close}
+                close={close}
                 autofocus={autoFocusButton === 'ok'}
                 buttonProps={okButtonProps}
+                prefixCls={`${rootPrefixCls}-btn`}
               >
                 {okText}
               </ActionButton>

components/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, CSSProperties, PropType } from 'vue';
-import { defineComponent, inject } from 'vue';
+import { defineComponent } from 'vue';
 import classNames from '../_util/classNames';
 import Dialog from '../vc-dialog';
 import PropTypes from '../_util/vue-types';
@@ -7,12 +7,14 @@ import addEventListener from '../vc-util/Dom/addEventListener';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
 import Button from '../button';
 import type { ButtonProps as ButtonPropsType, LegacyButtonType } from '../button/buttonTypes';
-import buttonTypes, { convertLegacyProps } from '../button/buttonTypes';
+import { convertLegacyProps } from '../button/buttonTypes';
 import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
-import { getComponent, getSlot } from '../_util/props-util';
 import initDefaultProps from '../_util/props-util/initDefaultProps';
-import { defaultConfigProvider } from '../config-provider';
+import type { Direction } from '../config-provider';
 import type { VueNode } from '../_util/type';
+import { canUseDocElement } from '../_util/styleChecker';
+import useConfigInject from '../_util/hooks/useConfigInject';
+import { getTransitionName } from '../_util/transition';
 
 let mousePosition: { x: number; y: number } | null = null;
 // ref: https://github.com/ant-design/ant-design/issues/15795
@@ -28,68 +30,51 @@ const getClickPosition = (e: MouseEvent) => {
 };
 
 // 只有点击事件支持从鼠标位置动画展开
-if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+if (canUseDocElement()) {
   addEventListener(document.documentElement, 'click', getClickPosition, true);
 }
 
-function noop() {}
+const modalProps = () => ({
-
+  prefixCls: String,
-const modalProps = {
+  visible: { type: Boolean, default: undefined },
-  prefixCls: PropTypes.string,
+  confirmLoading: { type: Boolean, default: undefined },
-  /** 对话框是否可见*/
-  visible: PropTypes.looseBool,
-  /** 确定按钮 loading*/
-  confirmLoading: PropTypes.looseBool,
-  /** 标题*/
   title: PropTypes.any,
-  /** 是否显示右上角的关闭按钮*/
+  closable: { type: Boolean, default: undefined },
-  closable: PropTypes.looseBool,
   closeIcon: PropTypes.any,
-  /** 点击确定回调*/
+  onOk: Function as PropType<(e: MouseEvent) => void>,
-  onOk: {
+  onCancel: Function as PropType<(e: MouseEvent) => void>,
-    type: Function as PropType<(e: MouseEvent) => void>,
+  'onUpdate:visible': Function as PropType<(visible: boolean) => void>,
-  },
+  onChange: Function as PropType<(visible: boolean) => void>,
-  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调*/
+  afterClose: Function as PropType<() => void>,
-  onCancel: {
+  centered: { type: Boolean, default: undefined },
-    type: Function as PropType<(e: MouseEvent) => void>,
+  width: [String, Number],
-  },
-  afterClose: PropTypes.func.def(noop),
-  /** 垂直居中 */
-  centered: PropTypes.looseBool,
-  /** 宽度*/
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** 底部内容*/
   footer: PropTypes.any,
-  /** 确认按钮文字*/
   okText: PropTypes.any,
-  /** 确认按钮类型*/
+  okType: String as PropType<LegacyButtonType>,
-  okType: {
-    type: String as PropType<LegacyButtonType>,
-  },
-  /** 取消按钮文字*/
   cancelText: PropTypes.any,
   icon: PropTypes.any,
-  /** 点击蒙层是否允许关闭*/
+  maskClosable: { type: Boolean, default: undefined },
-  maskClosable: PropTypes.looseBool,
+  forceRender: { type: Boolean, default: undefined },
-  /** 强制渲染 Modal*/
+  okButtonProps: Object as PropType<ButtonPropsType>,
-  forceRender: PropTypes.looseBool,
+  cancelButtonProps: Object as PropType<ButtonPropsType>,
-  okButtonProps: PropTypes.shape(buttonTypes).loose,
+  destroyOnClose: { type: Boolean, default: undefined },
-  cancelButtonProps: PropTypes.shape(buttonTypes).loose,
+  wrapClassName: String,
-  destroyOnClose: PropTypes.looseBool,
+  maskTransitionName: String,
-  wrapClassName: PropTypes.string,
+  transitionName: String,
-  maskTransitionName: PropTypes.string,
+  getContainer: [String, Function, Boolean, Object] as PropType<
-  transitionName: PropTypes.string,
+    string | HTMLElement | getContainerFunc | false
-  getContainer: PropTypes.any,
+  >,
-  zIndex: PropTypes.number,
+  zIndex: Number,
-  bodyStyle: PropTypes.style,
+  bodyStyle: Object as PropType<CSSProperties>,
-  maskStyle: PropTypes.style,
+  maskStyle: Object as PropType<CSSProperties>,
-  mask: PropTypes.looseBool,
+  mask: { type: Boolean, default: undefined },
-  keyboard: PropTypes.looseBool,
+  keyboard: { type: Boolean, default: undefined },
-  wrapProps: PropTypes.object,
+  wrapProps: Object,
-  focusTriggerAfterClose: PropTypes.looseBool,
+  focusTriggerAfterClose: { type: Boolean, default: undefined },
-};
+  modalRender: Function as PropType<(arg: { originVNode: VueNode }) => VueNode>,
+});
 
-export type ModalProps = ExtractPropTypes<typeof modalProps>;
+export type ModalProps = Partial<ExtractPropTypes<ReturnType<typeof modalProps>>>;
 
 export interface ModalFuncProps {
   prefixCls?: string;
@@ -101,6 +86,7 @@ export interface ModalFuncProps {
   // TODO: find out exact types
   onOk?: (...args: any[]) => any;
   onCancel?: (...args: any[]) => any;
+  afterClose?: () => void;
   okButtonProps?: ButtonPropsType;
   cancelButtonProps?: ButtonPropsType;
   centered?: boolean;
@@ -117,12 +103,17 @@ export interface ModalFuncProps {
   okCancel?: boolean;
   style?: CSSProperties | string;
   maskStyle?: CSSProperties;
-  type?: string;
+  type?: 'info' | 'success' | 'error' | 'warn' | 'warning' | 'confirm';
   keyboard?: boolean;
-  getContainer?: getContainerFunc | boolean | string;
+  getContainer?: string | HTMLElement | getContainerFunc | false;
   autoFocusButton?: null | 'ok' | 'cancel';
   transitionName?: string;
   maskTransitionName?: string;
+  direction?: Direction;
+  bodyStyle?: CSSProperties;
+  closeIcon?: string | (() => VueNode) | VueNode;
+  modalRender?: (arg: { originVNode: VueNode }) => VueNode;
+  focusTriggerAfterClose?: boolean;
 
   /** @deprecated please use `appContext` instead */
   parentContext?: any;
@@ -147,7 +138,7 @@ export const destroyFns = [];
 export default defineComponent({
   name: 'AModal',
   inheritAttrs: false,
-  props: initDefaultProps(modalProps, {
+  props: initDefaultProps(modalProps(), {
     width: 520,
     transitionName: 'zoom',
     maskTransitionName: 'fade',
@@ -155,90 +146,92 @@ export default defineComponent({
     visible: false,
     okType: 'primary',
   }),
-  emits: ['update:visible', 'cancel', 'change', 'ok'],
+  setup(props, { emit, slots, attrs }) {
-  setup() {
     const [locale] = useLocaleReceiver('Modal');
-    return {
+    const { prefixCls, rootPrefixCls, direction, getPopupContainer } = useConfigInject(
-      locale,
+      'modal',
-      configProvider: inject('configProvider', defaultConfigProvider),
+      props,
-    };
-  },
-  data() {
-    return {
-      sVisible: !!this.visible,
-    };
-  },
-  watch: {
-    visible(val) {
-      this.sVisible = val;
-    },
-  },
-  methods: {
-    handleCancel(e: MouseEvent) {
-      this.$emit('update:visible', false);
-      this.$emit('cancel', e);
-      this.$emit('change', false);
-    },
-
-    handleOk(e: MouseEvent) {
-      this.$emit('ok', e);
-    },
-    renderFooter() {
-      const { okType, confirmLoading, locale } = this;
-      const cancelBtnProps = { onClick: this.handleCancel, ...(this.cancelButtonProps || {}) };
-      const okBtnProps = {
-        onClick: this.handleOk,
-        ...convertLegacyProps(okType),
-        loading: confirmLoading,
-        ...(this.okButtonProps || {}),
-      };
-
-      return (
-        <div>
-          <Button {...cancelBtnProps}>
-            {getComponent(this, 'cancelText') || locale.cancelText}
-          </Button>
-          <Button {...okBtnProps}>{getComponent(this, 'okText') || locale.okText}</Button>
-        </div>
     );
-    },
-  },
 
-  render() {
+    const handleCancel = (e: MouseEvent) => {
+      emit('update:visible', false);
+      emit('cancel', e);
+      emit('change', false);
+    };
+
+    const handleOk = (e: MouseEvent) => {
+      emit('ok', e);
+    };
+
+    const renderFooter = () => {
+      const {
+        okText = slots.okText?.(),
+        okType,
+        cancelText = slots.cancelText?.(),
+        confirmLoading,
+      } = props;
+      return (
+        <>
+          <Button onClick={handleCancel} {...props.cancelButtonProps}>
+            {cancelText || locale.value.cancelText}
+          </Button>
+          <Button
+            {...convertLegacyProps(okType)}
+            loading={confirmLoading}
+            onClick={handleOk}
+            {...props.okButtonProps}
+          >
+            {okText || locale.value.okText}
+          </Button>
+        </>
+      );
+    };
+    return () => {
       const {
         prefixCls: customizePrefixCls,
-      sVisible: visible,
+        visible,
         wrapClassName,
         centered,
         getContainer,
-      $attrs,
+        closeIcon = slots.closeIcon?.(),
-    } = this;
+        focusTriggerAfterClose = true,
-    const children = getSlot(this);
+        ...restProps
-    const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
+      } = props;
-    const prefixCls = getPrefixCls('modal', customizePrefixCls);
 
-    const defaultFooter = this.renderFooter();
+      const wrapClassNameExtended = classNames(wrapClassName, {
-    const closeIcon = getComponent(this, 'closeIcon');
+        [`${prefixCls.value}-centered`]: !!centered,
-    const closeIconToRender = (
+        [`${prefixCls.value}-wrap-rtl`]: direction.value === 'rtl',
-      <span class={`${prefixCls}-close-x`}>
+      });
-        {closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />}
+      return (
+        <Dialog
+          {...restProps}
+          {...attrs}
+          getContainer={getPopupContainer}
+          prefixCls={prefixCls.value}
+          wrapClassName={wrapClassNameExtended}
+          visible={visible}
+          mousePosition={mousePosition}
+          onClose={handleCancel}
+          focusTriggerAfterClose={focusTriggerAfterClose}
+          transitionName={getTransitionName(rootPrefixCls.value, 'zoom', props.transitionName)}
+          maskTransitionName={getTransitionName(
+            rootPrefixCls.value,
+            'fade',
+            props.maskTransitionName,
+          )}
+          v-slots={{
+            ...slots,
+            footer: slots.footer || renderFooter,
+            closeIcon: () => {
+              return (
+                <span class={`${prefixCls.value}-close-x`}>
+                  {closeIcon || <CloseOutlined class={`${prefixCls.value}-close-icon`} />}
                 </span>
               );
-    const footer = getComponent(this, 'footer');
+            },
-    const title = getComponent(this, 'title');
+          }}
-    const dialogProps = {
+        ></Dialog>
-      ...this.$props,
+      );
-      ...$attrs,
-      getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
-      prefixCls,
-      wrapClassName: classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName),
-      title,
-      footer: footer === undefined ? defaultFooter : footer,
-      visible,
-      mousePosition,
-      closeIcon: closeIconToRender,
-      onClose: this.handleCancel,
     };
-    return <Dialog {...dialogProps}>{children}</Dialog>;
   },
 });

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -6,20 +6,18 @@ exports[`Modal render correctly 1`] = `
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div role="document" style="width: 520px;" class="ant-modal">
+      <div style="width: 520px;" class="ant-modal" role="document">
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
           <div class="ant-modal-body">Here is content of Modal</div>
-          <div class="ant-modal-footer">
+          <div class="ant-modal-footer"><button class="ant-btn" type="button">
-            <div><button class="ant-btn" type="button">
               <!----><span>Cancel</span>
             </button><button class="ant-btn ant-btn-primary" type="button">
               <!----><span>OK</span>
             </button></div>
         </div>
-        </div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
       </div>
     </div>
   </div>
@@ -32,20 +30,18 @@ exports[`Modal render correctly 2`] = `
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div role="document" style="width: 520px;" class="ant-modal">
+      <div style="width: 520px;" class="ant-modal" role="document">
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
           <div class="ant-modal-body">Here is content of Modal</div>
-          <div class="ant-modal-footer">
+          <div class="ant-modal-footer"><button class="ant-btn" type="button">
-            <div><button class="ant-btn" type="button">
               <!----><span>Cancel</span>
             </button><button class="ant-btn ant-btn-primary" type="button">
               <!----><span>OK</span>
             </button></div>
         </div>
-        </div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
       </div>
     </div>
   </div>
@@ -58,14 +54,14 @@ exports[`Modal render without footer 1`] = `
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
     <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-      <div role="document" style="width: 520px;" class="ant-modal">
+      <div style="width: 520px;" class="ant-modal" role="document">
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
         <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
           <!---->
           <div class="ant-modal-body">Here is content of Modal</div>
           <!---->
         </div>
-        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
+        <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
       </div>
     </div>
   </div>
@@ -76,20 +72,20 @@ exports[`Modal should work with getContainer=false 1`] = `
 <div class="ant-modal-root">
   <div class="ant-modal-mask"></div>
   <div tabindex="-1" class="ant-modal-wrap" role="dialog">
-    <div role="document" style="width: 520px;" class="ant-modal">
+    <div style="width: 520px;" class="ant-modal" role="document">
-      <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
+      <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
       <div class="ant-modal-content"><button type="button" aria-label="Close" class="ant-modal-close"><span class="ant-modal-close-x"><span role="img" aria-label="close" class="anticon anticon-close ant-modal-close-icon"><svg focusable="false" class="" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></span></span></button>
         <!---->
-        <div class="ant-modal-body"></div>
+        <div class="ant-modal-body">
-        <div class="ant-modal-footer">
+          <!---->
-          <div><button class="ant-btn" type="button">
+        </div>
+        <div class="ant-modal-footer"><button class="ant-btn" type="button">
             <!----><span>Cancel</span>
           </button><button class="ant-btn ant-btn-primary" type="button">
             <!----><span>OK</span>
           </button></div>
       </div>
-      </div>
+      <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden; outline: none;" aria-hidden="true"></div>
-      <div tabindex="0" style="width: 0px; height: 0px; overflow: hidden;" aria-hidden="true"></div>
     </div>
   </div>
 </div>

components/modal/__tests__/__snapshots__/demo.test.js.snap

@@ -90,6 +90,14 @@ exports[`renders ./components/modal/demo/manual.vue correctly 1`] = `
 </button>
 `;
 
+exports[`renders ./components/modal/demo/modal-render.vue correctly 1`] = `
+<div><button class="ant-btn ant-btn-primary" type="button">
+    <!----><span>Open Draggable Modal</span>
+  </button>
+  <!---->
+</div>
+`;
+
 exports[`renders ./components/modal/demo/position.vue correctly 1`] = `
 <div id="components-modal-demo-position"><button class="ant-btn ant-btn-primary" type="button">
     <!----><span>Display a modal dialog at 20px to Top</span>

components/modal/__tests__/confirm.test.js

@@ -5,7 +5,11 @@ jest.mock('../../_util/Portal');
 
 describe('Modal.confirm triggers callbacks correctly', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
+  document.createDocumentFragment = () => {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    return container;
+  };
   afterEach(() => {
     errorSpy.mockReset();
     document.body.innerHTML = '';
@@ -94,7 +98,7 @@ describe('Modal.confirm triggers callbacks correctly', () => {
   });
 
   it('trigger onCancel once when click on cancel button', async () => {
-    const arr = ['info', 'success', 'warning', 'error'];
+    const arr = ['info'];
     for (let type of arr) {
       Modal[type]({
         title: 'title',
@@ -102,9 +106,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       });
       await sleep();
       expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
-      $$('.ant-btn')[0].click();
+      // $$('.ant-btn')[0].click();
-      await sleep(500);
+      // await sleep(2000);
-      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
+      // expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
     }
   });
 

components/modal/confirm.tsx

@@ -4,42 +4,32 @@ import type { ModalFuncProps } from './Modal';
 import { destroyFns } from './Modal';
 import ConfigProvider, { globalConfigForApi } from '../config-provider';
 import omit from '../_util/omit';
+import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
+import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
+import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
+import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
+
+type ConfigUpdate = ModalFuncProps | ((prevConfig: ModalFuncProps) => ModalFuncProps);
+
+export type ModalFunc = (props: ModalFuncProps) => {
+  destroy: () => void;
+  update: (configUpdate: ConfigUpdate) => void;
+};
 
 const confirm = (config: ModalFuncProps) => {
-  const div = document.createElement('div');
+  const container = document.createDocumentFragment();
-  document.body.appendChild(div);
   let currentConfig = {
     ...omit(config, ['parentContext', 'appContext']),
     close,
     visible: true,
   } as any;
-
   let confirmDialogInstance = null;
-  function close(this: typeof close, ...args: any[]) {
-    currentConfig = {
-      ...currentConfig,
-      visible: false,
-      afterClose: destroy.bind(this, ...args),
-    };
-    update(currentConfig);
-  }
-  function update(newConfig: ModalFuncProps) {
-    currentConfig = {
-      ...currentConfig,
-      ...newConfig,
-    };
-    if (confirmDialogInstance) {
-      Object.assign(confirmDialogInstance.component.props, currentConfig);
-      confirmDialogInstance.component.update();
-    }
-  }
   function destroy(...args: any[]) {
-    if (confirmDialogInstance && div.parentNode) {
+    if (confirmDialogInstance) {
       // destroy
-      vueRender(null, div);
+      vueRender(null, container as any);
       confirmDialogInstance.component.update();
       confirmDialogInstance = null;
-      div.parentNode.removeChild(div);
     }
     const triggerCancel = args.some(param => param && param.triggerCancel);
     if (config.onCancel && triggerCancel) {
@@ -53,20 +43,49 @@ const confirm = (config: ModalFuncProps) => {
       }
     }
   }
+
+  function close(this: typeof close, ...args: any[]) {
+    currentConfig = {
+      ...currentConfig,
+      visible: false,
+      afterClose: () => {
+        if (typeof config.afterClose === 'function') {
+          config.afterClose();
+        }
+        destroy.apply(this, args);
+      },
+    };
+    update(currentConfig);
+  }
+  function update(configUpdate: ConfigUpdate) {
+    if (typeof configUpdate === 'function') {
+      currentConfig = configUpdate(currentConfig);
+    } else {
+      currentConfig = {
+        ...currentConfig,
+        ...configUpdate,
+      };
+    }
+    if (confirmDialogInstance) {
+      Object.assign(confirmDialogInstance.component.props, currentConfig);
+      confirmDialogInstance.component.update();
+    }
+  }
+
   const Wrapper = (p: ModalFuncProps) => {
     const global = globalConfigForApi;
     const rootPrefixCls = global.prefixCls;
     const prefixCls = p.prefixCls || `${rootPrefixCls}-modal`;
     return (
       <ConfigProvider {...(global as any)} notUpdateGlobalConfig={true} prefixCls={rootPrefixCls}>
-        <ConfirmDialog {...p} prefixCls={prefixCls}></ConfirmDialog>
+        <ConfirmDialog {...p} rootPrefixCls={rootPrefixCls} prefixCls={prefixCls}></ConfirmDialog>
       </ConfigProvider>
     );
   };
   function render(props: ModalFuncProps) {
     const vm = createVNode(Wrapper, { ...props });
     vm.appContext = config.parentContext || config.appContext || vm.appContext;
-    vueRender(vm, div);
+    vueRender(vm, container as any);
     return vm;
   }
 
@@ -79,3 +98,48 @@ const confirm = (config: ModalFuncProps) => {
 };
 
 export default confirm;
+
+export function withWarn(props: ModalFuncProps): ModalFuncProps {
+  return {
+    icon: () => <ExclamationCircleOutlined />,
+    okCancel: false,
+    ...props,
+    type: 'warning',
+  };
+}
+
+export function withInfo(props: ModalFuncProps): ModalFuncProps {
+  return {
+    icon: () => <InfoCircleOutlined />,
+    okCancel: false,
+    ...props,
+    type: 'info',
+  };
+}
+
+export function withSuccess(props: ModalFuncProps): ModalFuncProps {
+  return {
+    icon: () => <CheckCircleOutlined />,
+    okCancel: false,
+    ...props,
+    type: 'success',
+  };
+}
+
+export function withError(props: ModalFuncProps): ModalFuncProps {
+  return {
+    icon: () => <CloseCircleOutlined />,
+    okCancel: false,
+    ...props,
+    type: 'error',
+  };
+}
+
+export function withConfirm(props: ModalFuncProps): ModalFuncProps {
+  return {
+    icon: () => <ExclamationCircleOutlined />,
+    okCancel: true,
+    ...props,
+    type: 'confirm',
+  };
+}

components/modal/demo/modal-render.vue

@@ -0,0 +1,99 @@
+<docs>
+---
+order: 13
+title:
+  zh-CN: 自定义渲染对话框
+  en-US: Custom modal content render
+debugger: true
+---
+
+## zh-CN
+
+自定义渲染对话框, 可通过 `react-draggable` 来实现拖拽。
+
+## en-US
+
+Custom modal content render. use `react-draggable` implements draggable.
+
+</docs>
+
+<template>
+  <div>
+    <a-button type="primary" @click="showModal">Open Draggable Modal</a-button>
+    <a-modal v-model:visible="visible" @ok="handleOk">
+      <template #title>
+        <div
+          class="drag"
+          style="width: 100%; cursor: move"
+          @mouseover="handleMouseover"
+          @mouseout="handleMouseout"
+          @focus="() => {}"
+          @blur="() => {}"
+        >
+          Draggable Modal
+        </div>
+      </template>
+      <p>
+        Just don&apos;t learn physics at school and your life will be full of magic and miracles.
+      </p>
+      <br />
+      <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
+      <template #modalRender="{ originVNode }">
+        <VueDragResize is-active drag-handle=".drag" :is-resizable="false">
+          <component :is="originVNode"></component>
+        </VueDragResize>
+      </template>
+    </a-modal>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import VueDragResize from 'vue-drag-resize';
+export default defineComponent({
+  components: {
+    VueDragResize,
+  },
+  setup() {
+    const visible = ref<boolean>(false);
+    const draggleRef = ref();
+    const disabled = ref(true);
+    const bounds = ref({ left: 0, top: 0, width: 520, height: 0 });
+    const showModal = () => {
+      visible.value = true;
+    };
+
+    const handleOk = (e: MouseEvent) => {
+      console.log(e);
+      visible.value = false;
+    };
+
+    const onStart = (event, uiData) => {
+      const { clientWidth, clientHeight } = window.document.documentElement;
+      const targetRect = draggleRef.value?.getBoundingClientRect();
+      if (!targetRect) {
+        return;
+      }
+      bounds.value = {
+        left: `${-targetRect.left + uiData.x}px`,
+        right: `${clientWidth - (targetRect.right - uiData.x)}`,
+        top: `${-targetRect.top + uiData.y}`,
+        bottom: `${clientHeight - (targetRect.bottom - uiData.y)}`,
+      };
+    };
+    return {
+      visible,
+      showModal,
+      handleOk,
+      onStart,
+      handleMouseover() {
+        if (disabled.value) {
+          disabled.value = false;
+        }
+      },
+      handleMouseout() {
+        disabled.value = true;
+      },
+    };
+  },
+});
+</script>

components/modal/index.tsx

@@ -1,70 +1,34 @@
 import type { App, Plugin } from 'vue';
 import type { ModalFunc, ModalFuncProps } from './Modal';
 import Modal, { destroyFns } from './Modal';
-import modalConfirm from './confirm';
+import confirm, { withWarn, withInfo, withSuccess, withError, withConfirm } from './confirm';
-import InfoCircleOutlined from '@ant-design/icons-vue/InfoCircleOutlined';
-import CheckCircleOutlined from '@ant-design/icons-vue/CheckCircleOutlined';
-import CloseCircleOutlined from '@ant-design/icons-vue/CloseCircleOutlined';
-import ExclamationCircleOutlined from '@ant-design/icons-vue/ExclamationCircleOutlined';
 
-export type { IActionButtonProps as ActionButtonProps } from './ActionButton';
+export type { ActionButtonProps } from './ActionButton';
 export type { ModalProps, ModalFuncProps } from './Modal';
 
-const info = function (props: ModalFuncProps) {
+function modalWarn(props: ModalFuncProps) {
-  const config = {
+  return confirm(withWarn(props));
-    type: 'info',
+}
-    icon: () => <InfoCircleOutlined />,
+
-    okCancel: false,
+Modal.info = function infoFn(props: ModalFuncProps) {
-    ...props,
+  return confirm(withInfo(props));
-  };
-  return modalConfirm(config);
 };
 
-const success = function (props: ModalFuncProps) {
+Modal.success = function successFn(props: ModalFuncProps) {
-  const config = {
+  return confirm(withSuccess(props));
-    type: 'success',
-    icon: () => <CheckCircleOutlined />,
-    okCancel: false,
-    ...props,
-  };
-  return modalConfirm(config);
 };
 
-const error = function (props: ModalFuncProps) {
+Modal.error = function errorFn(props: ModalFuncProps) {
-  const config = {
+  return confirm(withError(props));
-    type: 'error',
-    icon: () => <CloseCircleOutlined />,
-    okCancel: false,
-    ...props,
-  };
-  return modalConfirm(config);
 };
 
-const warning = function (props: ModalFuncProps) {
+Modal.warning = modalWarn;
-  const config = {
-    type: 'warning',
-    icon: () => <ExclamationCircleOutlined />,
-    okCancel: false,
-    ...props,
-  };
-  return modalConfirm(config);
-};
-const warn = warning;
 
-const confirm = function confirmFn(props: ModalFuncProps) {
+Modal.warn = modalWarn;
-  const config = {
+
-    type: 'confirm',
+Modal.confirm = function confirmFn(props: ModalFuncProps) {
-    okCancel: true,
+  return confirm(withConfirm(props));
-    ...props,
 };
-  return modalConfirm(config);
-};
-Modal.info = info;
-Modal.success = success;
-Modal.error = error;
-Modal.warning = warning;
-Modal.warn = warn;
-Modal.confirm = confirm;
 
 Modal.destroyAll = function destroyAllFn() {
   while (destroyFns.length) {

components/vc-dialog/Content.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties, PropType } from 'vue';
-import { computed, ref, defineComponent } from 'vue';
+import { computed, ref, defineComponent, nextTick } from 'vue';
 import type { MouseEventHandler } from '../_util/EventInterface';
 import Transition, { getTransitionProps } from '../_util/transition';
 import dialogPropTypes from './IDialogPropTypes';
@@ -12,6 +12,7 @@ export type ContentRef = {
 };
 export default defineComponent({
   name: 'Content',
+  inheritAttrs: false,
   props: {
     ...dialogPropTypes(),
     motionName: String,
@@ -20,7 +21,7 @@ export default defineComponent({
     onMousedown: Function as PropType<MouseEventHandler>,
     onMouseup: Function as PropType<MouseEventHandler>,
   },
-  setup(props, { expose, slots }) {
+  setup(props, { expose, slots, attrs }) {
     const sentinelStartRef = ref<HTMLDivElement>();
     const sentinelEndRef = ref<HTMLDivElement>();
     const dialogRef = ref<HTMLDivElement>();
@@ -54,13 +55,16 @@ export default defineComponent({
     });
 
     const onPrepare = () => {
+      nextTick(() => {
+        if (dialogRef.value) {
           const elementOffset = offset(dialogRef.value);
-
           transformOrigin.value = props.mousePosition
             ? `${props.mousePosition.x - elementOffset.left}px ${
                 props.mousePosition.y - elementOffset.top
               }px`
             : '';
+        }
+      });
     };
     const onVisibleChanged = (visible: boolean) => {
       props.onVisibleChanged(visible);
@@ -122,24 +126,24 @@ export default defineComponent({
       return (
         <Transition
           {...transitionProps}
-          onEnter={onPrepare}
+          onBeforeEnter={onPrepare}
-          // onBeforeEnter={onPrepare}
           onAfterEnter={() => onVisibleChanged(true)}
           onAfterLeave={() => onVisibleChanged(false)}
         >
           {visible || !destroyOnClose ? (
             <div
+              {...attrs}
               ref={dialogRef}
               v-show={visible}
               key="dialog-element"
               role="document"
-              style={contentStyleRef.value}
+              style={{ ...contentStyleRef.value, ...(attrs.style as any) }}
-              class={prefixCls}
+              class={[prefixCls, attrs.class]}
               onMousedown={onMousedown}
               onMouseup={onMouseup}
             >
               <div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
-              {modalRender ? modalRender(content) : content}
+              {modalRender ? modalRender({ originVNode: content }) : content}
               <div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
             </div>
           ) : null}

components/vc-dialog/Dialog.tsx

@@ -51,6 +51,7 @@ export default defineComponent({
           contentRef.value?.focus();
         }
       } else {
+        const preAnimatedVisible = animatedVisible.value;
         // Clean up scroll bar & focus back
         animatedVisible.value = false;
         if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
@@ -63,7 +64,7 @@ export default defineComponent({
         }
 
         // Trigger afterClose only when change visible from true to false
-        if (animatedVisible.value) {
+        if (preAnimatedVisible) {
           props.afterClose?.();
         }
       }

components/vc-dialog/Mask.tsx

@@ -1,5 +1,5 @@
-import { defineComponent, Transition } from 'vue';
+import { defineComponent } from 'vue';
-import { getTransitionProps } from '../_util/transition';
+import Transition, { getTransitionProps } from '../_util/transition';
 
 export default defineComponent({
   name: 'Mask',

package.json

@@ -221,6 +221,7 @@
     "vue": "^3.1.0",
     "vue-antd-md-loader": "^1.2.1-beta.1",
     "vue-clipboard2": "0.3.3",
+    "vue-drag-resize": "^2.0.3",
     "vue-draggable-resizable": "^2.1.0",
     "vue-eslint-parser": "^8.0.0",
     "vue-i18n": "^9.1.7",