refactor: modal (#5129), close #5096

* fix: can not scroll when close dialog #5096

* refactor: modal

components/_util/switchScrollingEffect.js

@@ -1,20 +0,0 @@
-import getScrollBarSize from './getScrollBarSize';
-
-export default close => {
-  const bodyIsOverflowing =
-    document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
-    window.innerWidth > document.body.offsetWidth;
-  if (!bodyIsOverflowing) {
-    return;
-  }
-  if (close) {
-    document.body.style.position = '';
-    document.body.style.width = '';
-    return;
-  }
-  const scrollBarSize = getScrollBarSize();
-  if (scrollBarSize) {
-    document.body.style.position = 'relative';
-    document.body.style.width = `calc(100% - ${scrollBarSize}px)`;
-  }
-};

components/_util/switchScrollingEffect.ts

@@ -0,0 +1,42 @@
+import getScrollBarSize from './getScrollBarSize';
+import setStyle from './setStyle';
+
+function isBodyOverflowing() {
+  return (
+    document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight) &&
+    window.innerWidth > document.body.offsetWidth
+  );
+}
+
+let cacheStyle = {};
+
+export default (close?: boolean) => {
+  if (!isBodyOverflowing() && !close) {
+    return;
+  }
+
+  // https://github.com/ant-design/ant-design/issues/19729
+  const scrollingEffectClassName = 'ant-scrolling-effect';
+  const scrollingEffectClassNameReg = new RegExp(`${scrollingEffectClassName}`, 'g');
+  const bodyClassName = document.body.className;
+
+  if (close) {
+    if (!scrollingEffectClassNameReg.test(bodyClassName)) return;
+    setStyle(cacheStyle);
+    cacheStyle = {};
+    document.body.className = bodyClassName.replace(scrollingEffectClassNameReg, '').trim();
+    return;
+  }
+
+  const scrollBarSize = getScrollBarSize();
+  if (scrollBarSize) {
+    cacheStyle = setStyle({
+      position: 'relative',
+      width: `calc(100% - ${scrollBarSize}px)`,
+    });
+    if (!scrollingEffectClassNameReg.test(bodyClassName)) {
+      const addClassName = `${bodyClassName} ${scrollingEffectClassName}`;
+      document.body.className = addClassName.trim();
+    }
+  }
+};

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() {
-    clearTimeout(this.timeoutId);
-  },
-  methods: {
-    onClick() {
-      const { actionFn, closeModal } = this;
-      if (actionFn) {
-        let ret: any;
-        if (actionFn.length) {
-          ret = actionFn(closeModal);
-        } else {
-          ret = actionFn();
-          if (!ret) {
-            closeModal();
-          }
-        }
-        if (ret && ret.then) {
-          this.setState({ loading: true });
-          ret.then(
-            (...args: any[]) => {
-              // It's unnecessary to set loading=false, for the Modal will be unmounted after close.
-              // this.setState({ loading: false });
-              closeModal(...args);
-            },
-            (e: Event) => {
-              // 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 });
-            },
-          );
-        }
-      } else {
-        closeModal();
       }
-    },
+    });
-  },
+    onBeforeUnmount(() => {
+      clearTimeout(timeoutId);
+    });
 
-  render() {
+    const handlePromiseOnOk = (returnValueOfOnOk?: PromiseLike<any>) => {
-    const { type, loading, buttonProps } = this;
+      const { close } = props;
-    const props = {
+      if (!isThenable(returnValueOfOnOk)) {
-      ...convertLegacyProps(type),
+        return;
-      onClick: this.onClick,
+      }
-      loading,
+      loading.value = true;
-      ...buttonProps,
+      returnValueOfOnOk!.then(
+        (...args: any[]) => {
+          loading.value = false;
+          close(...args);
+          clickedRef.value = false;
+        },
+        (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
+          loading.value = false;
+          clickedRef.value = false;
+        },
+      );
+    };
+
+    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>
+      );
     };
-    return <Button {...props}>{getSlot(this)}</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 {
-      prefixCls: customizePrefixCls,
-      sVisible: visible,
-      wrapClassName,
-      centered,
-      getContainer,
-      $attrs,
-    } = this;
-    const children = getSlot(this);
-    const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
-    const prefixCls = getPrefixCls('modal', customizePrefixCls);
-
-    const defaultFooter = this.renderFooter();
-    const closeIcon = getComponent(this, 'closeIcon');
-    const closeIconToRender = (
-      <span class={`${prefixCls}-close-x`}>
-        {closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />}
-      </span>
     );
-    const footer = getComponent(this, 'footer');
+
-    const title = getComponent(this, 'title');
+    const handleCancel = (e: MouseEvent) => {
-    const dialogProps = {
+      emit('update:visible', false);
-      ...this.$props,
+      emit('cancel', e);
-      ...$attrs,
+      emit('change', false);
-      getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
+    };
-      prefixCls,
+
-      wrapClassName: classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName),
+    const handleOk = (e: MouseEvent) => {
-      title,
+      emit('ok', e);
-      footer: footer === undefined ? defaultFooter : footer,
+    };
-      visible,
+
-      mousePosition,
+    const renderFooter = () => {
-      closeIcon: closeIconToRender,
+      const {
-      onClose: this.handleCancel,
+        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,
+        visible,
+        wrapClassName,
+        centered,
+        getContainer,
+        closeIcon = slots.closeIcon?.(),
+        focusTriggerAfterClose = true,
+        ...restProps
+      } = props;
+
+      const wrapClassNameExtended = classNames(wrapClassName, {
+        [`${prefixCls.value}-centered`]: !!centered,
+        [`${prefixCls.value}-wrap-rtl`]: direction.value === 'rtl',
+      });
+      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>
+              );
+            },
+          }}
+        ></Dialog>
+      );
     };
-    return <Dialog {...dialogProps}>{children}</Dialog>;
   },
 });

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

@@ -5,21 +5,19 @@ exports[`Modal render correctly 1`] = `
   <div></div>
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
-    <div tabindex="-1" class="ant-modal-wrap " role="dialog">
+    <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>
-                <!----><span>Cancel</span>
+            </button><button class="ant-btn ant-btn-primary" type="button">
-              </button><button class="ant-btn ant-btn-primary" type="button">
+              <!----><span>OK</span>
-                <!----><span>OK</span>
+            </button></div>
-              </button></div>
-          </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>
@@ -31,21 +29,19 @@ exports[`Modal render correctly 2`] = `
   <div></div>
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
-    <div tabindex="-1" class="ant-modal-wrap " role="dialog">
+    <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>
-                <!----><span>Cancel</span>
+            </button><button class="ant-btn ant-btn-primary" type="button">
-              </button><button class="ant-btn ant-btn-primary" type="button">
+              <!----><span>OK</span>
-                <!----><span>OK</span>
+            </button></div>
-              </button></div>
-          </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>
@@ -57,15 +53,15 @@ exports[`Modal render without footer 1`] = `
   <div></div>
   <div class="ant-modal-root">
     <div class="ant-modal-mask"></div>
-    <div tabindex="-1" class="ant-modal-wrap " role="dialog">
+    <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>
@@ -75,21 +71,21 @@ exports[`Modal render without footer 1`] = `
 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 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">
-              <!----><span>Cancel</span>
-            </button><button class="ant-btn ant-btn-primary" type="button">
-              <!----><span>OK</span>
-            </button></div>
         </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 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>

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/modal/style/confirm.less

@@ -8,7 +8,7 @@
   }
 
   .@{ant-prefix}-modal-body {
-    padding: 32px 32px 24px;
+    padding: @modal-confirm-body-padding;
   }
 
   &-body-wrapper {
@@ -49,7 +49,7 @@
     float: right;
     margin-top: 24px;
 
-    button + button {
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
       margin-bottom: 0;
       margin-left: 8px;
     }

components/modal/style/index.less

@@ -2,3 +2,6 @@
 @import '../../style/mixins/index';
 @import './modal';
 @import './confirm';
+@import './rtl';
+
+.popover-customize-bg(@dialog-prefix-cls, @popover-background);

components/modal/style/modal.less

@@ -1,36 +1,26 @@
 @dialog-prefix-cls: ~'@{ant-prefix}-modal';
-@table-prefix-cls: ~'@{ant-prefix}-table';
-@modal-footer-padding-vertical: 10px;
-@modal-footer-padding-horizontal: 16px;
 
 .@{dialog-prefix-cls} {
   .reset-component();
+  .modal-mask();
 
   position: relative;
   top: 100px;
   width: auto;
+  max-width: calc(100vw - 32px);
   margin: 0 auto;
   padding-bottom: 24px;
-  pointer-events: none;
 
   &-wrap {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
     z-index: @zindex-modal;
-    overflow: auto;
-    outline: 0;
-    -webkit-overflow-scrolling: touch;
   }
 
   &-title {
     margin: 0;
     color: @modal-heading-color;
     font-weight: 500;
-    font-size: @font-size-lg;
+    font-size: @modal-header-title-font-size;
-    line-height: 22px;
+    line-height: @modal-header-title-line-height;
     word-wrap: break-word;
   }
 
@@ -50,7 +40,7 @@
     right: 0;
     z-index: @zindex-popup-close;
     padding: 0;
-    color: @text-color-secondary;
+    color: @modal-close-color;
     font-weight: 700;
     line-height: 1;
     text-decoration: none;
@@ -62,11 +52,11 @@
 
     &-x {
       display: block;
-      width: 56px;
+      width: @modal-header-close-size;
-      height: 56px;
+      height: @modal-header-close-size;
       font-size: @font-size-lg;
       font-style: normal;
-      line-height: 56px;
+      line-height: @modal-header-close-size;
       text-align: center;
       text-transform: none;
       text-rendering: auto;
@@ -80,10 +70,11 @@
   }
 
   &-header {
-    padding: 16px 24px;
+    padding: @modal-header-padding;
     color: @text-color;
     background: @modal-header-bg;
-    border-bottom: @border-width-base @border-style-base @modal-header-border-color-split;
+    border-bottom: @modal-header-border-width @modal-header-border-style
+      @modal-header-border-color-split;
     border-radius: @border-radius-base @border-radius-base 0 0;
   }
 
@@ -98,38 +89,16 @@
     padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
     text-align: right;
     background: @modal-footer-bg;
-    border-top: @border-width-base @border-style-base @modal-footer-border-color-split;
+    border-top: @modal-footer-border-width @modal-footer-border-style
+      @modal-footer-border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
-    button + button {
+
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn:not(.@{ant-prefix}-dropdown-trigger) {
       margin-bottom: 0;
       margin-left: 8px;
     }
   }
 
-  &.zoom-enter,
-  &.zoom-appear {
-    transform: none; // reset scale avoid mousePosition bug
-    opacity: 0;
-    animation-duration: @animation-duration-slow;
-    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
-  }
-
-  &-mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: @zindex-modal-mask;
-    height: 100%;
-    background-color: @modal-mask-bg;
-    filter: ~'alpha(opacity=50)';
-
-    &-hidden {
-      display: none;
-    }
-  }
-
   &-open {
     overflow: hidden;
   }
@@ -137,6 +106,7 @@
 
 .@{dialog-prefix-cls}-centered {
   text-align: center;
+
   &::before {
     display: inline-block;
     width: 0;
@@ -147,6 +117,7 @@
   .@{dialog-prefix-cls} {
     top: 0;
     display: inline-block;
+    padding-bottom: 0;
     text-align: left;
     vertical-align: middle;
   }

components/modal/style/rtl.less

@@ -0,0 +1,74 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@dialog-prefix-cls: ~'@{ant-prefix}-modal';
+@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';
+@dialog-wrap-rtl-cls: ~'@{dialog-prefix-cls}-wrap-rtl';
+
+.@{dialog-prefix-cls} {
+  &-wrap {
+    &-rtl {
+      direction: rtl;
+    }
+  }
+
+  &-close {
+    .@{dialog-wrap-rtl-cls} & {
+      right: initial;
+      left: 0;
+    }
+  }
+
+  &-footer {
+    .@{dialog-wrap-rtl-cls} & {
+      text-align: left;
+    }
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+      .@{dialog-wrap-rtl-cls} & {
+        margin-right: 8px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  &-confirm {
+    &-body {
+      .@{dialog-wrap-rtl-cls} & {
+        direction: rtl;
+      }
+      > .@{iconfont-css-prefix} {
+        .@{dialog-wrap-rtl-cls} & {
+          float: right;
+          margin-right: 0;
+          margin-left: 16px;
+        }
+        + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
+          .@{dialog-wrap-rtl-cls} & {
+            margin-right: 38px;
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+    &-btns {
+      .@{dialog-wrap-rtl-cls} & {
+        float: left;
+      }
+      .@{ant-prefix}-btn + .@{ant-prefix}-btn {
+        .@{dialog-wrap-rtl-cls} & {
+          margin-right: 8px;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+}
+
+.@{dialog-prefix-cls}-centered {
+  .@{dialog-prefix-cls} {
+    .@{dialog-wrap-rtl-cls}& {
+      text-align: right;
+    }
+  }
+}

components/style/themes/default.less

@@ -522,17 +522,28 @@
 
 // Modal
 // --
-@modal-body-padding: 24px;
+@modal-header-padding-vertical: @padding-md;
+@modal-header-padding-horizontal: @padding-lg;
+@modal-body-padding: @padding-lg;
 @modal-header-bg: @component-background;
+@modal-header-padding: @modal-header-padding-vertical @modal-header-padding-horizontal;
+@modal-header-border-width: @border-width-base;
+@modal-header-border-style: @border-style-base;
+@modal-header-title-line-height: 22px;
+@modal-header-title-font-size: @font-size-lg;
 @modal-header-border-color-split: @border-color-split;
+@modal-header-close-size: 56px;
 @modal-content-bg: @component-background;
 @modal-heading-color: @heading-color;
+@modal-close-color: @text-color-secondary;
 @modal-footer-bg: transparent;
 @modal-footer-border-color-split: @border-color-split;
-@modal-mask-bg: fade(@black, 45%);
+@modal-footer-border-style: @border-style-base;
-@modal-close-color: @text-color-secondary;
 @modal-footer-padding-vertical: 10px;
 @modal-footer-padding-horizontal: 16px;
+@modal-footer-border-width: @border-width-base;
+@modal-mask-bg: fade(@black, 45%);
+@modal-confirm-body-padding: 32px 32px 24px;
 
 // Progress
 // --

components/vc-dialog/Content.tsx

@@ -0,0 +1,154 @@
+import type { CSSProperties, PropType } 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';
+import { offset } from './util';
+const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
+
+export type ContentRef = {
+  focus: () => void;
+  changeActive: (next: boolean) => void;
+};
+export default defineComponent({
+  name: 'Content',
+  inheritAttrs: false,
+  props: {
+    ...dialogPropTypes(),
+    motionName: String,
+    ariaId: String,
+    onVisibleChanged: Function as PropType<(visible: boolean) => void>,
+    onMousedown: Function as PropType<MouseEventHandler>,
+    onMouseup: Function as PropType<MouseEventHandler>,
+  },
+  setup(props, { expose, slots, attrs }) {
+    const sentinelStartRef = ref<HTMLDivElement>();
+    const sentinelEndRef = ref<HTMLDivElement>();
+    const dialogRef = ref<HTMLDivElement>();
+    expose({
+      focus: () => {
+        sentinelStartRef.value?.focus();
+      },
+      changeActive: next => {
+        const { activeElement } = document;
+        if (next && activeElement === sentinelEndRef.value) {
+          sentinelStartRef.value.focus();
+        } else if (!next && activeElement === sentinelStartRef.value) {
+          sentinelEndRef.value.focus();
+        }
+      },
+    });
+    const transformOrigin = ref<string>();
+    const contentStyleRef = computed(() => {
+      const { width, height } = props;
+      const contentStyle: CSSProperties = {};
+      if (width !== undefined) {
+        contentStyle.width = typeof width === 'number' ? `${width}px` : width;
+      }
+      if (height !== undefined) {
+        contentStyle.height = typeof height === 'number' ? `${height}px` : height;
+      }
+      if (transformOrigin.value) {
+        contentStyle.transformOrigin = transformOrigin.value;
+      }
+      return contentStyle;
+    });
+
+    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);
+    };
+    return () => {
+      const {
+        prefixCls,
+        footer = slots.footer?.(),
+        title = slots.title?.(),
+        ariaId,
+        closable,
+        closeIcon = slots.closeIcon?.(),
+        onClose,
+        bodyStyle,
+        bodyProps,
+        onMousedown,
+        onMouseup,
+        visible,
+        modalRender = slots.modalRender,
+        destroyOnClose,
+        motionName,
+      } = props;
+      let footerNode: any;
+      if (footer) {
+        footerNode = <div class={`${prefixCls}-footer`}>{footer}</div>;
+      }
+
+      let headerNode: any;
+      if (title) {
+        headerNode = (
+          <div class={`${prefixCls}-header`}>
+            <div class={`${prefixCls}-title`} id={ariaId}>
+              {title}
+            </div>
+          </div>
+        );
+      }
+
+      let closer: any;
+      if (closable) {
+        closer = (
+          <button type="button" onClick={onClose} aria-label="Close" class={`${prefixCls}-close`}>
+            {closeIcon || <span class={`${prefixCls}-close-x`} />}
+          </button>
+        );
+      }
+
+      const content = (
+        <div class={`${prefixCls}-content`}>
+          {closer}
+          {headerNode}
+          <div class={`${prefixCls}-body`} style={bodyStyle} {...bodyProps}>
+            {slots.default?.()}
+          </div>
+          {footerNode}
+        </div>
+      );
+      const transitionProps = getTransitionProps(motionName);
+      return (
+        <Transition
+          {...transitionProps}
+          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, ...(attrs.style as any) }}
+              class={[prefixCls, attrs.class]}
+              onMousedown={onMousedown}
+              onMouseup={onMouseup}
+            >
+              <div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
+              {modalRender ? modalRender({ originVNode: content }) : content}
+              <div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
+            </div>
+          ) : null}
+        </Transition>
+      );
+    };
+  },
+});

components/vc-dialog/Dialog.jsx

@@ -1,435 +0,0 @@
-import { defineComponent, provide } from 'vue';
-import { initDefaultProps, getSlot, findDOMNode } from '../_util/props-util';
-import KeyCode from '../_util/KeyCode';
-import contains from '../vc-util/Dom/contains';
-import LazyRenderBox from './LazyRenderBox';
-import BaseMixin from '../_util/BaseMixin';
-import { getTransitionProps, Transition } from '../_util/transition';
-import switchScrollingEffect from '../_util/switchScrollingEffect';
-import getDialogPropTypes from './IDialogPropTypes';
-import warning from '../_util/warning';
-const IDialogPropTypes = getDialogPropTypes();
-
-let uuid = 0;
-
-function noop() {}
-function getScroll(w, top) {
-  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
-  const method = `scroll${top ? 'Top' : 'Left'}`;
-  if (typeof ret !== 'number') {
-    const d = w.document;
-    ret = d.documentElement[method];
-    if (typeof ret !== 'number') {
-      ret = d.body[method];
-    }
-  }
-  return ret;
-}
-
-function setTransformOrigin(node, value) {
-  const style = node.style;
-  ['Webkit', 'Moz', 'Ms', 'ms'].forEach(prefix => {
-    style[`${prefix}TransformOrigin`] = value;
-  });
-  style[`transformOrigin`] = value;
-}
-
-function offset(el) {
-  const rect = el.getBoundingClientRect();
-  const pos = {
-    left: rect.left,
-    top: rect.top,
-  };
-  const doc = el.ownerDocument;
-  const w = doc.defaultView || doc.parentWindow;
-  pos.left += getScroll(w);
-  pos.top += getScroll(w, true);
-  return pos;
-}
-
-let cacheOverflow = {};
-
-export default defineComponent({
-  name: 'VcDialog',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  props: initDefaultProps(IDialogPropTypes, {
-    mask: true,
-    visible: false,
-    keyboard: true,
-    closable: true,
-    maskClosable: true,
-    destroyOnClose: false,
-    prefixCls: 'rc-dialog',
-    getOpenCount: () => null,
-    focusTriggerAfterClose: true,
-  }),
-  data() {
-    warning(!this.dialogClass, 'Modal', 'dialogClass is deprecated, please use class instead.');
-    warning(!this.dialogStyle, 'Modal', 'dialogStyle is deprecated, please use style instead.');
-    return {
-      inTransition: false,
-      titleId: `rcDialogTitle${uuid++}`,
-      dialogMouseDown: undefined,
-    };
-  },
-
-  watch: {
-    visible(val) {
-      this.$nextTick(() => {
-        this.updatedCallback(!val);
-      });
-    },
-  },
-  created() {
-    provide('dialogContext', this);
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.updatedCallback(false);
-      // if forceRender is true, set element style display to be none;
-      if ((this.forceRender || (this.getContainer === false && !this.visible)) && this.$refs.wrap) {
-        this.$refs.wrap.style.display = 'none';
-      }
-    });
-  },
-  beforeUnmount() {
-    const { visible, getOpenCount } = this;
-    if ((visible || this.inTransition) && !getOpenCount()) {
-      this.switchScrollingEffect();
-    }
-    clearTimeout(this.timeoutId);
-  },
-  methods: {
-    // 对外暴露的 api 不要更改名称或删除
-    getDialogWrap() {
-      return this.$refs.wrap;
-    },
-    updatedCallback(visible) {
-      const mousePosition = this.mousePosition;
-      const { mask, focusTriggerAfterClose } = this;
-      if (this.visible) {
-        // first show
-        if (!visible) {
-          this.openTime = Date.now();
-          // this.lastOutSideFocusNode = document.activeElement
-          this.switchScrollingEffect();
-          // this.$refs.wrap.focus()
-          this.tryFocus();
-          const dialogNode = findDOMNode(this.$refs.dialog);
-          if (mousePosition) {
-            const elOffset = offset(dialogNode);
-            setTransformOrigin(
-              dialogNode,
-              `${mousePosition.x - elOffset.left}px ${mousePosition.y - elOffset.top}px`,
-            );
-          } else {
-            setTransformOrigin(dialogNode, '');
-          }
-        }
-      } else if (visible) {
-        this.inTransition = true;
-        if (mask && this.lastOutSideFocusNode && focusTriggerAfterClose) {
-          try {
-            this.lastOutSideFocusNode.focus();
-          } catch (e) {
-            this.lastOutSideFocusNode = null;
-          }
-          this.lastOutSideFocusNode = null;
-        }
-      }
-    },
-    tryFocus() {
-      if (!contains(this.$refs.wrap, document.activeElement)) {
-        this.lastOutSideFocusNode = document.activeElement;
-        this.$refs.sentinelStart.focus();
-      }
-    },
-    onAnimateLeave() {
-      const { afterClose } = this;
-      // need demo?
-      // https://github.com/react-component/dialog/pull/28
-      if (this.$refs.wrap) {
-        this.$refs.wrap.style.display = 'none';
-      }
-      this.inTransition = false;
-      this.switchScrollingEffect();
-      if (afterClose) {
-        afterClose();
-      }
-    },
-    onDialogMouseDown() {
-      this.dialogMouseDown = true;
-    },
-
-    onMaskMouseUp() {
-      if (this.dialogMouseDown) {
-        this.timeoutId = setTimeout(() => {
-          this.dialogMouseDown = false;
-        }, 0);
-      }
-    },
-    onMaskClick(e) {
-      // android trigger click on open (fastclick??)
-      if (Date.now() - this.openTime < 300) {
-        return;
-      }
-      if (e.target === e.currentTarget && !this.dialogMouseDown) {
-        this.close(e);
-      }
-    },
-    onKeydown(e) {
-      const props = this.$props;
-      if (props.keyboard && e.keyCode === KeyCode.ESC) {
-        e.stopPropagation();
-        this.close(e);
-        return;
-      }
-      // keep focus inside dialog
-      if (props.visible) {
-        if (e.keyCode === KeyCode.TAB) {
-          const activeElement = document.activeElement;
-          const sentinelStart = this.$refs.sentinelStart;
-          if (e.shiftKey) {
-            if (activeElement === sentinelStart) {
-              this.$refs.sentinelEnd.focus();
-            }
-          } else if (activeElement === this.$refs.sentinelEnd) {
-            sentinelStart.focus();
-          }
-        }
-      }
-    },
-    getDialogElement() {
-      const {
-        closable,
-        prefixCls,
-        width,
-        height,
-        title,
-        footer: tempFooter,
-        bodyStyle,
-        visible,
-        bodyProps,
-        forceRender,
-        closeIcon,
-        dialogStyle = {},
-        dialogClass = '',
-      } = this;
-      const dest = { ...dialogStyle };
-      if (width !== undefined) {
-        dest.width = typeof width === 'number' ? `${width}px` : width;
-      }
-      if (height !== undefined) {
-        dest.height = typeof height === 'number' ? `${height}px` : height;
-      }
-
-      let footer;
-      if (tempFooter) {
-        footer = (
-          <div key="footer" class={`${prefixCls}-footer`} ref="footer">
-            {tempFooter}
-          </div>
-        );
-      }
-
-      let header;
-      if (title) {
-        header = (
-          <div key="header" class={`${prefixCls}-header`} ref="header">
-            <div class={`${prefixCls}-title`} id={this.titleId}>
-              {title}
-            </div>
-          </div>
-        );
-      }
-
-      let closer;
-      if (closable) {
-        closer = (
-          <button
-            type="button"
-            key="close"
-            onClick={this.close || noop}
-            aria-label="Close"
-            class={`${prefixCls}-close`}
-          >
-            {closeIcon || <span class={`${prefixCls}-close-x`} />}
-          </button>
-        );
-      }
-      const { style: stl, class: className } = this.$attrs;
-      const style = { ...stl, ...dest };
-      const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' };
-      const cls = [prefixCls, className, dialogClass];
-      const transitionName = this.getTransitionName();
-      const dialogElement = (
-        <LazyRenderBox
-          v-show={visible}
-          key="dialog-element"
-          role="document"
-          ref="dialog"
-          style={style}
-          class={cls}
-          forceRender={forceRender}
-          onMousedown={this.onDialogMouseDown}
-        >
-          <div tabindex={0} ref="sentinelStart" style={sentinelStyle} aria-hidden="true" />
-          <div class={`${prefixCls}-content`}>
-            {closer}
-            {header}
-            <div key="body" class={`${prefixCls}-body`} style={bodyStyle} ref="body" {...bodyProps}>
-              {getSlot(this)}
-            </div>
-            {footer}
-          </div>
-          <div tabindex={0} ref="sentinelEnd" style={sentinelStyle} aria-hidden="true" />
-        </LazyRenderBox>
-      );
-      const dialogTransitionProps = getTransitionProps(transitionName, {
-        onAfterLeave: this.onAnimateLeave,
-      });
-      return (
-        <Transition key="dialog" {...dialogTransitionProps}>
-          {visible || !this.destroyOnClose ? dialogElement : null}
-        </Transition>
-      );
-    },
-    getZIndexStyle() {
-      const style = {};
-      const props = this.$props;
-      if (props.zIndex !== undefined) {
-        style.zIndex = props.zIndex;
-      }
-      return style;
-    },
-    getWrapStyle() {
-      return { ...this.getZIndexStyle(), ...this.wrapStyle };
-    },
-    getMaskStyle() {
-      return { ...this.getZIndexStyle(), ...this.maskStyle };
-    },
-    getMaskElement() {
-      const props = this.$props;
-      let maskElement;
-      if (props.mask) {
-        const maskTransition = this.getMaskTransitionName();
-        const tempMaskElement = (
-          <LazyRenderBox
-            v-show={props.visible}
-            style={this.getMaskStyle()}
-            key="mask"
-            class={`${props.prefixCls}-mask`}
-            {...(props.maskProps || {})}
-          />
-        );
-        if (maskTransition) {
-          const maskTransitionProps = getTransitionProps(maskTransition);
-          maskElement = (
-            <Transition key="mask" {...maskTransitionProps}>
-              {tempMaskElement}
-            </Transition>
-          );
-        } else {
-          maskElement = tempMaskElement;
-        }
-      }
-      return maskElement;
-    },
-    getMaskTransitionName() {
-      const props = this.$props;
-      let transitionName = props.maskTransitionName;
-      const animation = props.maskAnimation;
-      if (!transitionName && animation) {
-        transitionName = `${props.prefixCls}-${animation}`;
-      }
-      return transitionName;
-    },
-    getTransitionName() {
-      const props = this.$props;
-      let transitionName = props.transitionName;
-      const animation = props.animation;
-      if (!transitionName && animation) {
-        transitionName = `${props.prefixCls}-${animation}`;
-      }
-      return transitionName;
-    },
-    // setScrollbar() {
-    //   if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
-    //     document.body.style.paddingRight = `${this.scrollbarWidth}px`;
-    //   }
-    // },
-    switchScrollingEffect() {
-      const { getOpenCount } = this;
-      const openCount = getOpenCount();
-      if (openCount === 1) {
-        if (cacheOverflow.hasOwnProperty('overflowX')) {
-          return;
-        }
-        cacheOverflow = {
-          overflowX: document.body.style.overflowX,
-          overflowY: document.body.style.overflowY,
-          overflow: document.body.style.overflow,
-        };
-        switchScrollingEffect();
-        // Must be set after switchScrollingEffect
-        document.body.style.overflow = 'hidden';
-      } else if (!openCount) {
-        // IE browser doesn't merge overflow style, need to set it separately
-        // https://github.com/ant-design/ant-design/issues/19393
-        if (cacheOverflow.overflow !== undefined) {
-          document.body.style.overflow = cacheOverflow.overflow;
-        }
-        if (cacheOverflow.overflowX !== undefined) {
-          document.body.style.overflowX = cacheOverflow.overflowX;
-        }
-        if (cacheOverflow.overflowY !== undefined) {
-          document.body.style.overflowY = cacheOverflow.overflowY;
-        }
-        cacheOverflow = {};
-        switchScrollingEffect(true);
-      }
-    },
-    // removeScrollingEffect() {
-    //   const { getOpenCount } = this;
-    //   const openCount = getOpenCount();
-    //   if (openCount !== 0) {
-    //     return;
-    //   }
-    //   document.body.style.overflow = '';
-    //   switchScrollingEffect(true);
-    //   // this.resetAdjustments();
-    // },
-    close(e) {
-      this.__emit('close', e);
-    },
-  },
-  render() {
-    const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this;
-    const style = this.getWrapStyle();
-    // clear hide display
-    // and only set display after async anim, not here for hide
-    if (visible) {
-      style.display = null;
-    }
-    return (
-      <div class={`${prefixCls}-root`}>
-        {this.getMaskElement()}
-        <div
-          tabindex={-1}
-          onKeydown={this.onKeydown}
-          class={`${prefixCls}-wrap ${wrapClassName || ''}`}
-          ref="wrap"
-          onClick={maskClosable ? this.onMaskClick : noop}
-          onMouseup={maskClosable ? this.onMaskMouseUp : noop}
-          role="dialog"
-          aria-labelledby={title ? this.titleId : null}
-          style={style}
-          {...wrapProps}
-        >
-          {this.getDialogElement()}
-        </div>
-      </div>
-    );
-  },
-});

components/vc-dialog/Dialog.tsx

@@ -0,0 +1,200 @@
+import type { PropType } from 'vue';
+import { defineComponent, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import contains from '../vc-util/Dom/contains';
+import type ScrollLocker from '../vc-util/Dom/scrollLocker';
+import classNames from '../_util/classNames';
+import type { MouseEventHandler } from '../_util/EventInterface';
+import KeyCode from '../_util/KeyCode';
+import omit from '../_util/omit';
+import pickAttrs from '../_util/pickAttrs';
+import { initDefaultProps } from '../_util/props-util';
+import type { ContentRef } from './Content';
+import Content from './Content';
+import dialogPropTypes from './IDialogPropTypes';
+import Mask from './Mask';
+import { getMotionName, getUUID } from './util';
+
+export default defineComponent({
+  name: 'Dialog',
+  inheritAttrs: false,
+  props: initDefaultProps(
+    {
+      ...dialogPropTypes(),
+      getOpenCount: Function as PropType<() => number>,
+      scrollLocker: Object as PropType<ScrollLocker>,
+    },
+    {
+      mask: true,
+      visible: false,
+      keyboard: true,
+      closable: true,
+      maskClosable: true,
+      destroyOnClose: false,
+      prefixCls: 'rc-dialog',
+      getOpenCount: () => null,
+      focusTriggerAfterClose: true,
+    },
+  ),
+  setup(props, { attrs, slots }) {
+    const lastOutSideActiveElementRef = ref<HTMLElement>();
+    const wrapperRef = ref<HTMLDivElement>();
+    const contentRef = ref<ContentRef>();
+    const animatedVisible = ref(props.visible);
+    const ariaIdRef = ref<string>(`vcDialogTitle${getUUID()}`);
+
+    // ========================= Events =========================
+    const onDialogVisibleChanged = (newVisible: boolean) => {
+      if (newVisible) {
+        // Try to focus
+        if (!contains(wrapperRef.value, document.activeElement as HTMLElement)) {
+          lastOutSideActiveElementRef.value = document.activeElement as HTMLElement;
+          contentRef.value?.focus();
+        }
+      } else {
+        const preAnimatedVisible = animatedVisible.value;
+        // Clean up scroll bar & focus back
+        animatedVisible.value = false;
+        if (props.mask && lastOutSideActiveElementRef.value && props.focusTriggerAfterClose) {
+          try {
+            lastOutSideActiveElementRef.value.focus({ preventScroll: true });
+          } catch (e) {
+            // Do nothing
+          }
+          lastOutSideActiveElementRef.value = null;
+        }
+
+        // Trigger afterClose only when change visible from true to false
+        if (preAnimatedVisible) {
+          props.afterClose?.();
+        }
+      }
+    };
+
+    const onInternalClose = (e: Event) => {
+      props.onClose?.(e);
+    };
+
+    // >>> Content
+    const contentClickRef = ref(false);
+    const contentTimeoutRef = ref<any>();
+
+    // We need record content click incase content popup out of dialog
+    const onContentMouseDown: MouseEventHandler = () => {
+      clearTimeout(contentTimeoutRef.value);
+      contentClickRef.value = true;
+    };
+
+    const onContentMouseUp: MouseEventHandler = () => {
+      contentTimeoutRef.value = setTimeout(() => {
+        contentClickRef.value = false;
+      });
+    };
+
+    const onWrapperClick = (e: MouseEvent) => {
+      if (!props.maskClosable) return null;
+      if (contentClickRef.value) {
+        contentClickRef.value = false;
+      } else if (wrapperRef.value === e.target) {
+        onInternalClose(e);
+      }
+    };
+    const onWrapperKeyDown = (e: KeyboardEvent) => {
+      if (props.keyboard && e.keyCode === KeyCode.ESC) {
+        e.stopPropagation();
+        onInternalClose(e);
+        return;
+      }
+
+      // keep focus inside dialog
+      if (props.visible) {
+        if (e.keyCode === KeyCode.TAB) {
+          contentRef.value.changeActive(!e.shiftKey);
+        }
+      }
+    };
+
+    watch(
+      () => props.visible,
+      () => {
+        if (props.visible) {
+          animatedVisible.value = true;
+        }
+      },
+      { flush: 'post' },
+    );
+
+    onBeforeUnmount(() => {
+      clearTimeout(contentTimeoutRef.value);
+      props.scrollLocker?.unLock();
+    });
+    watchEffect(() => {
+      props.scrollLocker?.unLock();
+      if (animatedVisible.value) {
+        props.scrollLocker?.lock();
+      }
+    });
+
+    return () => {
+      const {
+        prefixCls,
+        mask,
+        visible,
+        maskTransitionName,
+        maskAnimation,
+        zIndex,
+        wrapClassName,
+        wrapStyle,
+        closable,
+        maskProps,
+        maskStyle,
+        transitionName,
+        animation,
+        wrapProps,
+        title = slots.title,
+      } = props;
+      const { style, class: className } = attrs;
+      return (
+        <div class={`${prefixCls}-root`} {...pickAttrs(props, { data: true })}>
+          <Mask
+            prefixCls={prefixCls}
+            visible={mask && visible}
+            motionName={getMotionName(prefixCls, maskTransitionName, maskAnimation)}
+            style={{
+              zIndex,
+              ...maskStyle,
+            }}
+            maskProps={maskProps}
+          />
+          <div
+            tabIndex={-1}
+            onKeyDown={onWrapperKeyDown}
+            class={classNames(`${prefixCls}-wrap`, wrapClassName)}
+            ref={wrapperRef}
+            onClick={onWrapperClick}
+            role="dialog"
+            aria-labelledby={title ? ariaIdRef.value : null}
+            style={{ zIndex, ...wrapStyle, display: !animatedVisible.value ? 'none' : null }}
+            {...wrapProps}
+          >
+            <Content
+              {...omit(props, ['scrollLocker'])}
+              style={style}
+              class={className}
+              v-slots={slots}
+              onMousedown={onContentMouseDown}
+              onMouseup={onContentMouseUp}
+              ref={contentRef}
+              closable={closable}
+              ariaId={ariaIdRef.value}
+              prefixCls={prefixCls}
+              visible={visible}
+              onClose={onInternalClose}
+              onVisibleChanged={onDialogVisibleChanged}
+              motionName={getMotionName(prefixCls, transitionName, animation)}
+            />
+          </div>
+        </div>
+      );
+    };
+  },
+});

components/vc-dialog/DialogWrap.jsx

@@ -1,49 +0,0 @@
-import Dialog from './Dialog';
-import getDialogPropTypes from './IDialogPropTypes';
-import Portal from '../_util/PortalWrapper';
-import { getSlot } from '../_util/props-util';
-import { defineComponent } from 'vue';
-const IDialogPropTypes = getDialogPropTypes();
-const DialogWrap = defineComponent({
-  inheritAttrs: false,
-  props: {
-    ...IDialogPropTypes,
-    visible: IDialogPropTypes.visible.def(false),
-  },
-
-  render() {
-    const { visible, getContainer, forceRender } = this.$props;
-    let dialogProps = {
-      ...this.$props,
-      ...this.$attrs,
-      ref: '_component',
-      key: 'dialog',
-    };
-    // 渲染在当前 dom 里；
-    if (getContainer === false) {
-      return (
-        <Dialog
-          {...dialogProps}
-          getOpenCount={() => 2} // 不对 body 做任何操作。。
-        >
-          {getSlot(this)}
-        </Dialog>
-      );
-    }
-    return (
-      <Portal
-        visible={visible}
-        forceRender={forceRender}
-        getContainer={getContainer}
-        v-slots={{
-          default: childProps => {
-            dialogProps = { ...dialogProps, ...childProps };
-            return <Dialog {...dialogProps}>{getSlot(this)}</Dialog>;
-          },
-        }}
-      />
-    );
-  },
-});
-
-export default DialogWrap;

components/vc-dialog/DialogWrap.tsx

@@ -0,0 +1,72 @@
+import Dialog from './Dialog';
+import type { IDialogChildProps } from './IDialogPropTypes';
+import getDialogPropTypes from './IDialogPropTypes';
+import Portal from '../_util/PortalWrapper';
+import { defineComponent, ref, watch } from 'vue';
+const IDialogPropTypes = getDialogPropTypes();
+const DialogWrap = defineComponent({
+  name: 'DialogWrap',
+  inheritAttrs: false,
+  props: {
+    ...IDialogPropTypes,
+    visible: IDialogPropTypes.visible.def(false),
+  },
+  setup(props, { attrs, slots }) {
+    const animatedVisible = ref(props.visible);
+    watch(
+      () => props.visible,
+      () => {
+        if (props.visible) {
+          animatedVisible.value = true;
+        }
+      },
+      { flush: 'post' },
+    );
+    return () => {
+      const { visible, getContainer, forceRender, destroyOnClose = false, afterClose } = props;
+      let dialogProps = {
+        ...props,
+        ...attrs,
+        ref: '_component',
+        key: 'dialog',
+      } as IDialogChildProps;
+      // 渲染在当前 dom 里；
+      if (getContainer === false) {
+        return (
+          <Dialog
+            {...dialogProps}
+            getOpenCount={() => 2} // 不对 body 做任何操作。。
+            v-slots={slots}
+          ></Dialog>
+        );
+      }
+
+      // Destroy on close will remove wrapped div
+      if (!forceRender && destroyOnClose && !animatedVisible.value) {
+        return null;
+      }
+      return (
+        <Portal
+          visible={visible}
+          forceRender={forceRender}
+          getContainer={getContainer}
+          v-slots={{
+            default: (childProps: IDialogChildProps) => {
+              dialogProps = {
+                ...dialogProps,
+                ...childProps,
+                afterClose: () => {
+                  afterClose?.();
+                  animatedVisible.value = false;
+                },
+              };
+              return <Dialog {...dialogProps} v-slots={slots}></Dialog>;
+            },
+          }}
+        />
+      );
+    };
+  },
+});
+
+export default DialogWrap;

components/vc-dialog/IDialogPropTypes.ts

@@ -1,11 +1,11 @@
+import type { ExtractPropTypes } from 'vue';
 import PropTypes from '../_util/vue-types';
 
-function IDialogPropTypes() {
+function dialogPropTypes() {
   return {
     keyboard: PropTypes.looseBool,
     mask: PropTypes.looseBool,
     afterClose: PropTypes.func,
-    // onClose: PropTypes. (e: SyntheticEvent<HTMLDivElement>) =>any,
     closable: PropTypes.looseBool,
     maskClosable: PropTypes.looseBool,
     visible: PropTypes.looseBool,
@@ -41,7 +41,8 @@ function IDialogPropTypes() {
     // https://github.com/react-component/dialog/issues/95
     focusTriggerAfterClose: PropTypes.looseBool,
     onClose: PropTypes.func,
+    modalRender: PropTypes.func,
   };
 }
-
+export type IDialogChildProps = Partial<ExtractPropTypes<ReturnType<typeof dialogPropTypes>>>;
-export default IDialogPropTypes;
+export default dialogPropTypes;

components/vc-dialog/LazyRenderBox.jsx

@@ -1,15 +0,0 @@
-import PropTypes from '../_util/vue-types';
-import { getSlot } from '../_util/props-util';
-
-const ILazyRenderBoxPropTypes = {
-  visible: PropTypes.looseBool,
-  hiddenClassName: PropTypes.string,
-  forceRender: PropTypes.looseBool,
-};
-
-export default {
-  props: ILazyRenderBoxPropTypes,
-  render() {
-    return <div>{getSlot(this)}</div>;
-  },
-};

components/vc-dialog/Mask.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import Transition, { getTransitionProps } from '../_util/transition';
+
+export default defineComponent({
+  name: 'Mask',
+  props: {
+    prefixCls: String,
+    visible: Boolean,
+    motionName: String,
+    maskProps: Object,
+  },
+  setup(props, {}) {
+    return () => {
+      const { prefixCls, visible, maskProps, motionName } = props;
+      const transitionProps = getTransitionProps(motionName);
+      return (
+        <Transition {...transitionProps}>
+          <div v-show={visible} class={`${prefixCls}-mask`} {...maskProps} />
+        </Transition>
+      );
+    };
+  },
+});

components/vc-dialog/assets/bootstrap.less

@@ -1,3 +0,0 @@
-@prefixCls: rc-dialog;
-@import './bootstrap/Dialog.less';
-@import './index/Mask.less';

components/vc-dialog/assets/bootstrap/Dialog.less

@@ -1,133 +0,0 @@
-@import './variables.less';
-
-.clearfix() {
-  &:before,
-  &:after {
-    content: ' '; // 1
-    display: table; // 2
-  }
-  &:after {
-    clear: both;
-  }
-}
-
-.@{prefixCls} {
-  // Container that the rc-dialog scrolls within
-  &-wrap {
-    position: fixed;
-    overflow: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: @zindex-modal;
-    -webkit-overflow-scrolling: touch;
-
-    // Prevent Chrome on Windows from adding a focus outline. For details, see
-    // https://github.com/twbs/bootstrap/pull/10951.
-    outline: 0;
-  }
-
-  // Shell div to position the rc-dialog with bottom padding
-  position: relative;
-  width: auto;
-  margin: 10px;
-
-  // Actual rc-dialog
-  &-content {
-    position: relative;
-    background-color: @modal-content-bg;
-    border: 1px solid @modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
-    border: 1px solid @modal-content-border-color;
-    border-radius: @border-radius-large;
-    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-    background-clip: padding-box;
-    // Remove focus outline from opened rc-dialog
-    outline: 0;
-  }
-
-  // Modal header
-  // Top section of the rc-dialog w/ title and dismiss
-  &-header {
-    padding: @modal-title-padding;
-    border-bottom: 1px solid @modal-header-border-color;
-    &:extend(.clearfix all);
-  }
-
-  &-close {
-    cursor: pointer;
-    border: 0;
-    background: transparent;
-    font-size: 21px;
-    position: absolute;
-    right: 20px;
-    top: 12px;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: 0.2;
-    text-decoration: none;
-
-    &-x:after {
-      content: '×';
-    }
-
-    &:hover {
-      opacity: 1;
-      filter: alpha(opacity=100);
-      text-decoration: none;
-    }
-  }
-
-  // Title text within header
-  &-title {
-    margin: 0;
-    line-height: @modal-title-line-height;
-  }
-
-  // Modal body
-  // Where all rc-dialog content resides (sibling of &-header and &-footer)
-  &-body {
-    position: relative;
-    padding: @modal-inner-padding;
-  }
-
-  // Footer (for actions)
-  &-footer {
-    padding: @modal-inner-padding;
-    text-align: right; // right align buttons
-    border-top: 1px solid @modal-footer-border-color;
-    &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
-
-    // Properly space out buttons
-    .btn + .btn {
-      margin-left: 5px;
-      margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-    }
-    // but override that for button groups
-    .btn-group .btn + .btn {
-      margin-left: -1px;
-    }
-    // and override it for block buttons as well
-    .btn-block + .btn-block {
-      margin-left: 0;
-    }
-  }
-}
-
-// Scale up the rc-dialog
-@media (min-width: @screen-sm-min) {
-  .@{prefixCls} {
-    // Automatically set rc-dialog's width for larger viewports
-    width: @modal-md;
-    margin: 30px auto;
-
-    &-content {
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    }
-  }
-}
-
-@import './effect.less';

components/vc-dialog/assets/bootstrap/effect.less

@@ -1,43 +0,0 @@
-.@{prefixCls} {
-  &-slide-fade-enter,
-  &-slide-fade-appear {
-    transform: translate(0, -25%);
-  }
-
-  &-slide-fade-enter,
-  &-slide-fade-appear,
-  &-slide-fade-leave {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: ease-out;
-    animation-play-state: paused;
-  }
-
-  &-slide-fade-enter&-slide-fade-enter-active,
-  &-slide-fade-appear&-slide-fade-appear-active {
-    animation-name: rcDialogSlideFadeIn;
-    animation-play-state: running;
-  }
-
-  &-slide-fade-leave&-slide-fade-leave-active {
-    animation-name: rcDialogSlideFadeOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcDialogSlideFadeIn {
-    0% {
-      transform: translate(0, -25%);
-    }
-    100% {
-      transform: translate(0, 0);
-    }
-  }
-  @keyframes rcDialogSlideFadeOut {
-    0% {
-      transform: translate(0, 0);
-    }
-    100% {
-      transform: translate(0, -25%);
-    }
-  }
-}

components/vc-dialog/assets/bootstrap/variables.less

@@ -1,837 +0,0 @@
-//
-// Variables
-// --------------------------------------------------
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-base: #000;
-@gray-darker: lighten(@gray-base, 13.5%); // #222
-@gray-dark: lighten(@gray-base, 20%); // #333
-@gray: lighten(@gray-base, 33.5%); // #555
-@gray-light: lighten(@gray-base, 46.7%); // #777
-@gray-lighter: lighten(@gray-base, 93.5%); // #eee
-
-@brand-primary: darken(#428bca, 6.5%); // #337ab7
-@brand-success: #5cb85c;
-@brand-info: #5bc0de;
-@brand-warning: #f0ad4e;
-@brand-danger: #d9534f;
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg: #fff;
-//** Global text color on `<body>`.
-@text-color: @gray-dark;
-
-//** Global textual link color.
-@link-color: @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color: darken(@link-color, 15%);
-//** Link hover decoration.
-@link-hover-decoration: underline;
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-@font-family-serif: Georgia, 'Times New Roman', Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
-@font-family-base: @font-family-sans-serif;
-
-@font-size-base: 14px;
-@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
-@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
-@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
-@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
-@font-size-h5: @font-size-base;
-@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base: 1.428571429; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family: inherit;
-@headings-font-weight: 500;
-@headings-line-height: 1.1;
-@headings-color: inherit;
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-@icon-font-path: '../fonts/';
-//** File name for all font files.
-@icon-font-name: 'glyphicons-halflings-regular';
-//** Element ID within SVG icon file.
-@icon-font-svg-id: 'glyphicons_halflingsregular';
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical: 6px;
-@padding-base-horizontal: 12px;
-
-@padding-large-vertical: 10px;
-@padding-large-horizontal: 16px;
-
-@padding-small-vertical: 5px;
-@padding-small-horizontal: 10px;
-
-@padding-xs-vertical: 1px;
-@padding-xs-horizontal: 5px;
-
-@line-height-large: 1.3333333; // extra decimals for Win 8.1 Chrome
-@line-height-small: 1.5;
-
-@border-radius-base: 4px;
-@border-radius-large: 6px;
-@border-radius-small: 3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color: #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg: @brand-primary;
-
-//** Width of the `border` for generating carets that indicate dropdowns.
-@caret-width-base: 4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large: 5px;
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding: 8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding: 5px;
-
-//** Default background color used for all tables.
-@table-bg: transparent;
-//** Background color used for `.table-striped`.
-@table-bg-accent: #f9f9f9;
-//** Background color used for `.table-hover`.
-@table-bg-hover: #f5f5f5;
-@table-bg-active: @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color: #ddd;
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight: normal;
-
-@btn-default-color: #333;
-@btn-default-bg: #fff;
-@btn-default-border: #ccc;
-
-@btn-primary-color: #fff;
-@btn-primary-bg: @brand-primary;
-@btn-primary-border: darken(@btn-primary-bg, 5%);
-
-@btn-success-color: #fff;
-@btn-success-bg: @brand-success;
-@btn-success-border: darken(@btn-success-bg, 5%);
-
-@btn-info-color: #fff;
-@btn-info-bg: @brand-info;
-@btn-info-border: darken(@btn-info-bg, 5%);
-
-@btn-warning-color: #fff;
-@btn-warning-bg: @brand-warning;
-@btn-warning-border: darken(@btn-warning-bg, 5%);
-
-@btn-danger-color: #fff;
-@btn-danger-bg: @brand-danger;
-@btn-danger-border: darken(@btn-danger-bg, 5%);
-
-@btn-link-disabled-color: @gray-light;
-
-// Allows for customizing button radius independently from global border radius
-@btn-border-radius-base: @border-radius-base;
-@btn-border-radius-large: @border-radius-large;
-@btn-border-radius-small: @border-radius-small;
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg: #fff;
-//** `<input disabled>` background color
-@input-bg-disabled: @gray-lighter;
-
-//** Text color for `<input>`s
-@input-color: @gray;
-//** `<input>` border color
-@input-border: #ccc;
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius: @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large: @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small: @border-radius-small;
-
-//** Border color for inputs on focus
-@input-border-focus: #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder: #999;
-
-//** Default `.form-control` height
-@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large: (
-  ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2
-);
-//** Small `.form-control` height
-@input-height-small: (
-  floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2
-);
-
-//** `.form-group` margin
-@form-group-margin-bottom: 15px;
-
-@legend-color: @gray-dark;
-@legend-border-color: #e5e5e5;
-
-//** Background color for textual input addons
-@input-group-addon-bg: @gray-lighter;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//** Disabled cursor for form controls and buttons.
-@cursor-disabled: not-allowed;
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg: #fff;
-//** Dropdown menu `border-color`.
-@dropdown-border: rgba(0, 0, 0, 0.15);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border: #ccc;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg: #e5e5e5;
-
-//** Dropdown link text color.
-@dropdown-link-color: @gray-dark;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color: darken(@gray-dark, 5%);
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg: #f5f5f5;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color: @component-active-color;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg: @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color: @gray-light;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color: @gray-light;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color: #000;
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar: 1000;
-@zindex-dropdown: 1000;
-@zindex-popover: 1060;
-@zindex-tooltip: 1070;
-@zindex-navbar-fixed: 1030;
-@zindex-modal-background: 1040;
-@zindex-modal: 1050;
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs: 480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min: @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone: @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm: 768px;
-@screen-sm-min: @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet: @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md: 992px;
-@screen-md-min: @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop: @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg: 1200px;
-@screen-lg-min: @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop: @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max: (@screen-sm-min - 1);
-@screen-sm-max: (@screen-md-min - 1);
-@screen-md-max: (@screen-lg-min - 1);
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns: 12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width: 30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint: @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet: (720px + @grid-gutter-width);
-//** For `@screen-sm-min` and up.
-@container-sm: @container-tablet;
-
-// Medium screen / desktop
-@container-desktop: (940px + @grid-gutter-width);
-//** For `@screen-md-min` and up.
-@container-md: @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop: (1140px + @grid-gutter-width);
-//** For `@screen-lg-min` and up.
-@container-lg: @container-large-desktop;
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height: 50px;
-@navbar-margin-bottom: @line-height-computed;
-@navbar-border-radius: @border-radius-base;
-@navbar-padding-horizontal: floor((@grid-gutter-width / 2));
-@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height: 340px;
-
-@navbar-default-color: #777;
-@navbar-default-bg: #f8f8f8;
-@navbar-default-border: darken(@navbar-default-bg, 6.5%);
-
-// Navbar links
-@navbar-default-link-color: #777;
-@navbar-default-link-hover-color: #333;
-@navbar-default-link-hover-bg: transparent;
-@navbar-default-link-active-color: #555;
-@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
-@navbar-default-link-disabled-color: #ccc;
-@navbar-default-link-disabled-bg: transparent;
-
-// Navbar brand label
-@navbar-default-brand-color: @navbar-default-link-color;
-@navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%);
-@navbar-default-brand-hover-bg: transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg: #ddd;
-@navbar-default-toggle-icon-bar-bg: #888;
-@navbar-default-toggle-border-color: #ddd;
-
-//=== Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color: lighten(@gray-light, 15%);
-@navbar-inverse-bg: #222;
-@navbar-inverse-border: darken(@navbar-inverse-bg, 10%);
-
-// Inverted navbar links
-@navbar-inverse-link-color: lighten(@gray-light, 15%);
-@navbar-inverse-link-hover-color: #fff;
-@navbar-inverse-link-hover-bg: transparent;
-@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color: #444;
-@navbar-inverse-link-disabled-bg: transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color: @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color: #fff;
-@navbar-inverse-brand-hover-bg: transparent;
-
-// Inverted navbar toggle
-@navbar-inverse-toggle-hover-bg: #333;
-@navbar-inverse-toggle-icon-bar-bg: #fff;
-@navbar-inverse-toggle-border-color: #333;
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding: 10px 15px;
-@nav-link-hover-bg: @gray-lighter;
-
-@nav-disabled-link-color: @gray-light;
-@nav-disabled-link-hover-color: @gray-light;
-
-//== Tabs
-@nav-tabs-border-color: #ddd;
-
-@nav-tabs-link-hover-border-color: @gray-lighter;
-
-@nav-tabs-active-link-hover-bg: @body-bg;
-@nav-tabs-active-link-hover-color: @gray;
-@nav-tabs-active-link-hover-border-color: #ddd;
-
-@nav-tabs-justified-link-border-color: #ddd;
-@nav-tabs-justified-active-link-border-color: @body-bg;
-
-//== Pills
-@nav-pills-border-radius: @border-radius-base;
-@nav-pills-active-link-hover-bg: @component-active-bg;
-@nav-pills-active-link-hover-color: @component-active-color;
-
-//== Pagination
-//
-//##
-
-@pagination-color: @link-color;
-@pagination-bg: #fff;
-@pagination-border: #ddd;
-
-@pagination-hover-color: @link-hover-color;
-@pagination-hover-bg: @gray-lighter;
-@pagination-hover-border: #ddd;
-
-@pagination-active-color: #fff;
-@pagination-active-bg: @brand-primary;
-@pagination-active-border: @brand-primary;
-
-@pagination-disabled-color: @gray-light;
-@pagination-disabled-bg: #fff;
-@pagination-disabled-border: #ddd;
-
-//== Pager
-//
-//##
-
-@pager-bg: @pagination-bg;
-@pager-border: @pagination-border;
-@pager-border-radius: 15px;
-
-@pager-hover-bg: @pagination-hover-bg;
-
-@pager-active-bg: @pagination-active-bg;
-@pager-active-color: @pagination-active-color;
-
-@pager-disabled-color: @pagination-disabled-color;
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding: 30px;
-@jumbotron-color: inherit;
-@jumbotron-bg: @gray-lighter;
-@jumbotron-heading-color: inherit;
-@jumbotron-font-size: ceil((@font-size-base * 1.5));
-@jumbotron-heading-font-size: ceil((@font-size-base * 4.5));
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text: #3c763d;
-@state-success-bg: #dff0d8;
-@state-success-border: darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text: #31708f;
-@state-info-bg: #d9edf7;
-@state-info-border: darken(spin(@state-info-bg, -10), 7%);
-
-@state-warning-text: #8a6d3b;
-@state-warning-bg: #fcf8e3;
-@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
-
-@state-danger-text: #a94442;
-@state-danger-bg: #f2dede;
-@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width: 200px;
-//** Tooltip text color
-@tooltip-color: #fff;
-//** Tooltip background color
-@tooltip-bg: #000;
-@tooltip-opacity: 0.9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width: 5px;
-//** Tooltip arrow color
-@tooltip-arrow-color: @tooltip-bg;
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg: #fff;
-//** Popover maximum width
-@popover-max-width: 276px;
-//** Popover border color
-@popover-border-color: rgba(0, 0, 0, 0.2);
-//** Popover fallback border color
-@popover-fallback-border-color: #ccc;
-
-//** Popover title background color
-@popover-title-bg: darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width: 10px;
-//** Popover arrow color
-@popover-arrow-color: @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width: (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color: fadein(@popover-border-color, 5%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%);
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg: @gray-light;
-//** Primary label background color
-@label-primary-bg: @brand-primary;
-//** Success label background color
-@label-success-bg: @brand-success;
-//** Info label background color
-@label-info-bg: @brand-info;
-//** Warning label background color
-@label-warning-bg: @brand-warning;
-//** Danger label background color
-@label-danger-bg: @brand-danger;
-
-//** Default label text color
-@label-color: #fff;
-//** Default text color of a linked label
-@label-link-hover-color: #fff;
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding: 15px;
-
-//** Padding applied to the modal title
-@modal-title-padding: 15px;
-//** Modal title line-height
-@modal-title-line-height: @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg: #fff;
-//** Modal content border color
-@modal-content-border-color: rgba(0, 0, 0, 0.2);
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color: #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg: #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity: 0.5;
-//** Modal header border color
-@modal-header-border-color: #e5e5e5;
-//** Modal footer border color
-@modal-footer-border-color: @modal-header-border-color;
-
-@modal-lg: 900px;
-@modal-md: 600px;
-@modal-sm: 300px;
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding: 15px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
-
-@alert-success-bg: @state-success-bg;
-@alert-success-text: @state-success-text;
-@alert-success-border: @state-success-border;
-
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @state-info-text;
-@alert-info-border: @state-info-border;
-
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-border;
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg: #f5f5f5;
-//** Progress bar text color
-@progress-bar-color: #fff;
-//** Variable for setting rounded corners on progress bar.
-@progress-border-radius: @border-radius-base;
-
-//** Default progress bar color
-@progress-bar-bg: @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg: @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg: @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg: @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg: @brand-info;
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg: #fff;
-//** `.list-group-item` border color
-@list-group-border: #ddd;
-//** List group border radius
-@list-group-border-radius: @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg: #f5f5f5;
-//** Text color of active list items
-@list-group-active-color: @component-active-color;
-//** Background color of active list items
-@list-group-active-bg: @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border: @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color: lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color: @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg: @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color: #555;
-@list-group-link-hover-color: @list-group-link-color;
-@list-group-link-heading-color: #333;
-
-//== Panels
-//
-//##
-
-@panel-bg: #fff;
-@panel-body-padding: 15px;
-@panel-heading-padding: 10px 15px;
-@panel-footer-padding: @panel-heading-padding;
-@panel-border-radius: @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border: #ddd;
-@panel-footer-bg: #f5f5f5;
-
-@panel-default-text: @gray-dark;
-@panel-default-border: #ddd;
-@panel-default-heading-bg: #f5f5f5;
-
-@panel-primary-text: #fff;
-@panel-primary-border: @brand-primary;
-@panel-primary-heading-bg: @brand-primary;
-
-@panel-success-text: @state-success-text;
-@panel-success-border: @state-success-border;
-@panel-success-heading-bg: @state-success-bg;
-
-@panel-info-text: @state-info-text;
-@panel-info-border: @state-info-border;
-@panel-info-heading-bg: @state-info-bg;
-
-@panel-warning-text: @state-warning-text;
-@panel-warning-border: @state-warning-border;
-@panel-warning-heading-bg: @state-warning-bg;
-
-@panel-danger-text: @state-danger-text;
-@panel-danger-border: @state-danger-border;
-@panel-danger-heading-bg: @state-danger-bg;
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding: 4px;
-//** Thumbnail background color
-@thumbnail-bg: @body-bg;
-//** Thumbnail border color
-@thumbnail-border: #ddd;
-//** Thumbnail border radius
-@thumbnail-border-radius: @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color: @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding: 9px;
-
-//== Wells
-//
-//##
-
-@well-bg: #f5f5f5;
-@well-border: darken(@well-bg, 7%);
-
-//== Badges
-//
-//##
-
-@badge-color: #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color: #fff;
-@badge-bg: @gray-light;
-
-//** Badge text color in active nav link
-@badge-active-color: @link-color;
-//** Badge background color in active nav link
-@badge-active-bg: #fff;
-
-@badge-font-weight: bold;
-@badge-line-height: 1;
-@badge-border-radius: 10px;
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical: 8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg: #f5f5f5;
-//** Breadcrumb text color
-@breadcrumb-color: #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color: @gray-light;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator: '/';
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-
-@carousel-control-color: #fff;
-@carousel-control-width: 15%;
-@carousel-control-opacity: 0.5;
-@carousel-control-font-size: 20px;
-
-@carousel-indicator-active-bg: #fff;
-@carousel-indicator-border-color: #fff;
-
-@carousel-caption-color: #fff;
-
-//== Close
-//
-//##
-
-@close-font-weight: bold;
-@close-color: #000;
-@close-text-shadow: 0 1px 0 #fff;
-
-//== Code
-//
-//##
-
-@code-color: #c7254e;
-@code-bg: #f9f2f4;
-
-@kbd-color: #fff;
-@kbd-bg: #333;
-
-@pre-bg: #f5f5f5;
-@pre-color: @gray-dark;
-@pre-border-color: #ccc;
-@pre-scrollable-max-height: 340px;
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted: @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color: @gray-light;
-//** Headings small color
-@headings-small-color: @gray-light;
-//** Blockquote small color
-@blockquote-small-color: @gray-light;
-//** Blockquote font size
-@blockquote-font-size: (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color: @gray-lighter;
-//** Page header border color
-@page-header-border-color: @gray-lighter;
-//** Width of horizontal description list titles
-@dl-horizontal-offset: @component-offset-horizontal;
-//** Point at which .dl-horizontal becomes horizontal
-@dl-horizontal-breakpoint: @grid-float-breakpoint;
-//** Horizontal line color.
-@hr-border: @gray-lighter;

components/vc-dialog/assets/index.less

@@ -1,4 +0,0 @@
-@prefixCls: rc-dialog;
-
-@import './index/Dialog.less';
-@import './index/Mask.less';

components/vc-dialog/assets/index/Dialog.less

@@ -1,135 +0,0 @@
-.@{prefixCls} {
-  position: relative;
-  width: auto;
-  margin: 10px;
-
-  &-wrap {
-    position: fixed;
-    overflow: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1050;
-    -webkit-overflow-scrolling: touch;
-    outline: 0;
-  }
-
-  &-title {
-    margin: 0;
-    font-size: 14px;
-    line-height: 21px;
-    font-weight: bold;
-  }
-
-  &-content {
-    position: relative;
-    background-color: #ffffff;
-    border: none;
-    border-radius: 6px 6px;
-    background-clip: padding-box;
-  }
-
-  &-close {
-    cursor: pointer;
-    border: 0;
-    background: transparent;
-    font-size: 21px;
-    position: absolute;
-    right: 20px;
-    top: 12px;
-    font-weight: 700;
-    line-height: 1;
-    color: #000;
-    text-shadow: 0 1px 0 #fff;
-    filter: alpha(opacity=20);
-    opacity: 0.2;
-    text-decoration: none;
-
-    &-x:after {
-      content: '×';
-    }
-
-    &:hover {
-      opacity: 1;
-      filter: alpha(opacity=100);
-      text-decoration: none;
-    }
-  }
-
-  &-header {
-    padding: 13px 20px 14px 20px;
-    border-radius: 5px 5px 0 0;
-    background: #fff;
-    color: #666;
-    border-bottom: 1px solid #e9e9e9;
-  }
-
-  &-body {
-    padding: 20px;
-  }
-
-  &-footer {
-    border-top: 1px solid #e9e9e9;
-    padding: 10px 20px;
-    text-align: right;
-    border-radius: 0 0 5px 5px;
-  }
-
-  .effect() {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-  }
-
-  &-zoom-enter,
-  &-zoom-appear {
-    opacity: 0;
-    .effect();
-    animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
-    animation-play-state: paused;
-  }
-
-  &-zoom-leave {
-    .effect();
-    animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);
-    animation-play-state: paused;
-  }
-
-  &-zoom-enter&-zoom-enter-active,
-  &-zoom-appear&-zoom-appear-active {
-    animation-name: rcDialogZoomIn;
-    animation-play-state: running;
-  }
-
-  &-zoom-leave&-zoom-leave-active {
-    animation-name: rcDialogZoomOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcDialogZoomIn {
-    0% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
-    100% {
-      opacity: 1;
-      transform: scale(1, 1);
-    }
-  }
-  @keyframes rcDialogZoomOut {
-    0% {
-      transform: scale(1, 1);
-    }
-    100% {
-      opacity: 0;
-      transform: scale(0, 0);
-    }
-  }
-}
-
-@media (min-width: 768px) {
-  .@{prefixCls} {
-    width: 600px;
-    margin: 30px auto;
-  }
-}

components/vc-dialog/assets/index/Mask.less

@@ -1,65 +0,0 @@
-.@{prefixCls} {
-  &-mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    background-color: rgb(55, 55, 55);
-    background-color: rgba(55, 55, 55, 0.6);
-    height: 100%;
-    filter: alpha(opacity=50);
-    z-index: 1050;
-
-    &-hidden {
-      display: none;
-    }
-  }
-
-  .fade-effect() {
-    animation-duration: 0.3s;
-    animation-fill-mode: both;
-    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
-  }
-
-  &-fade-enter,
-  &-fade-appear {
-    opacity: 0;
-    .fade-effect();
-    animation-play-state: paused;
-  }
-
-  &-fade-leave {
-    .fade-effect();
-    animation-play-state: paused;
-  }
-
-  &-fade-enter&-fade-enter-active,
-  &-fade-appear&-fade-appear-active {
-    animation-name: rcDialogFadeIn;
-    animation-play-state: running;
-  }
-
-  &-fade-leave&-fade-leave-active {
-    animation-name: rcDialogFadeOut;
-    animation-play-state: running;
-  }
-
-  @keyframes rcDialogFadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes rcDialogFadeOut {
-    0% {
-      opacity: 1;
-    }
-    100% {
-      opacity: 0;
-    }
-  }
-}

components/vc-dialog/index.js

@@ -1,3 +0,0 @@
-// based on vc-dialog 7.5.14
-import DialogWrap from './DialogWrap';
-export default DialogWrap;

components/vc-dialog/index.ts

@@ -0,0 +1,7 @@
+// based on vc-dialog 8.6.0
+import DialogWrap from './DialogWrap';
+import dialogProps from './IDialogPropTypes';
+
+export { dialogProps };
+
+export default DialogWrap;

components/vc-dialog/util.ts

@@ -0,0 +1,46 @@
+// =============================== Motion ===============================
+export function getMotionName(prefixCls: string, transitionName?: string, animationName?: string) {
+  let motionName = transitionName;
+  if (!motionName && animationName) {
+    motionName = `${prefixCls}-${animationName}`;
+  }
+  return motionName;
+}
+
+// ================================ UUID ================================
+let uuid = -1;
+export function getUUID() {
+  uuid += 1;
+  return uuid;
+}
+
+// =============================== Offset ===============================
+function getScroll(w: Window, top?: boolean): number {
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  const method = `scroll${top ? 'Top' : 'Left'}`;
+  if (typeof ret !== 'number') {
+    const d = w.document;
+    ret = d.documentElement[method];
+    if (typeof ret !== 'number') {
+      ret = d.body[method];
+    }
+  }
+  return ret;
+}
+
+type CompatibleDocument = {
+  parentWindow?: Window;
+} & Document;
+
+export function offset(el: Element) {
+  const rect = el.getBoundingClientRect();
+  const pos = {
+    left: rect.left,
+    top: rect.top,
+  };
+  const doc = el.ownerDocument as CompatibleDocument;
+  const w = doc.defaultView || doc.parentWindow;
+  pos.left += getScroll(w);
+  pos.top += getScroll(w, true);
+  return pos;
+}

components/vc-drawer/assets/index.less

@@ -1,221 +0,0 @@
-@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-@duration: 0.3s;
-@drawer: drawer;
-.@{drawer} {
-  position: fixed;
-  z-index: 9999;
-  transition: width 0s ease @duration, height 0s ease @duration, transform @duration @ease-in-out-circ;
-  >* {
-     transition: transform @duration @ease-in-out-circ, opacity @duration @ease-in-out-circ, box-shadow @duration @ease-in-out-circ;
-  }
-  &.@{drawer}-open {
-    transition: transform @duration @ease-in-out-circ;
-  }
-  & &-mask {
-    background: #000;
-    opacity: 0;
-    width: 100%;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    transition: opacity @duration @ease-in-out-circ, 
-      height 0s ease @duration;
-  }
-  &-content-wrapper {
-    position: absolute;
-    background: #fff;
-  }
-  &-content {
-    overflow: auto;
-    z-index: 1;
-    position: relative;
-  }
-  &-handle {
-    position: absolute;
-    top: 72px;
-    width: 41px;
-    height: 40px;
-    cursor: pointer;
-    z-index: 0;
-    text-align: center;
-    line-height: 40px;
-    font-size: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #fff;
-    &-icon {
-      width: 14px;
-      height: 2px;
-      background: #333;
-      position: relative;
-      transition: background @duration @ease-in-out-circ;
-      &:before,
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        background: #333;
-        width: 100%;
-        height: 2px;
-        transition: transform @duration @ease-in-out-circ;
-      }
-      &:before {
-        top: -5px;
-      }
-      &:after {
-        top: 5px;
-      }
-    }
-  }
-  &-left,
-  &-right {
-    width: 0%;
-    height: 100%;
-    .@{drawer}-content-wrapper,
-    .@{drawer}-content {
-      height: 100%;
-    }
-    &.@{drawer}-open {
-      width: 100%;
-      &.no-mask {
-        width: 0%;
-      }
-    }
-  }
-  &-left {
-    top: 0;
-    left: 0;
-    .@{drawer} {
-      &-handle {
-        right: -40px;
-        box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
-        border-radius: 0 4px 4px 0;
-      }
-    }
-    &.@{drawer}-open {
-      .@{drawer} {
-        &-content-wrapper {
-          box-shadow: 2px 0 8px rgba(0, 0, 0, .15);
-        }
-      }
-    }
-  }
-  &-right {
-    top: 0;
-    right: 0;
-    .@{drawer} {
-      &-content-wrapper {
-        right: 0;
-      }
-      &-handle {
-        left: -40px;
-        box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
-        border-radius: 4px 0 0 4px;
-      }
-    }
-    &.@{drawer}-open {
-      & .@{drawer} {
-        &-content-wrapper {
-          box-shadow: -2px 0 8px rgba(0, 0, 0, .15);
-        }
-      }
-      &.no-mask {
-        // https://github.com/ant-design/ant-design/issues/18607
-        right: 1px;
-        transform: translateX(1px);
-      }
-    }
-  }
-  &-top,
-  &-bottom {
-    width: 100%;
-    height: 0%;
-    .@{drawer}-content-wrapper,
-    .@{drawer}-content {
-      width: 100%;
-    }
-    .@{drawer}-content {
-      height: 100%;
-    }
-    &.@{drawer}-open {
-      height: 100%;
-      &.no-mask {
-        height: 0%;
-      }
-    }
-    
-    .@{drawer} {
-      &-handle {
-        left: 50%;
-        margin-left: -20px;
-      }
-    }
-  }
-  &-top {
-    top: 0;
-    left: 0;
-    .@{drawer} {
-      &-handle {
-        top: auto;
-        bottom: -40px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
-        border-radius: 0 0 4px 4px;
-      }
-    }
-    &.@{drawer}-open {
-      .@{drawer} {
-        &-content-wrapper {
-          box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
-        }
-      }
-    }
-  }
-  &-bottom {
-    bottom: 0;
-    left: 0;
-    .@{drawer} {
-      &-content-wrapper {
-        bottom: 0;
-      }
-      &-handle {
-        top: -40px;
-        box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
-        border-radius: 4px 4px 0 0;
-      }
-    }
-    &.@{drawer}-open {
-      .@{drawer} {
-        &-content-wrapper {
-          box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
-        }
-      }
-      &.no-mask {
-        // https://github.com/ant-design/ant-design/issues/18607
-        bottom: 1px;
-        transform: translateY(1px);
-      }
-    }
-  }
-  &.@{drawer}-open {
-    .@{drawer} {
-      &-mask {
-        opacity: .3;
-        height: 100%;
-        transition: opacity 0.3s @ease-in-out-circ;
-      }
-      &-handle {
-        &-icon {
-          background: transparent;
-          &:before {
-            transform: translateY(5px) rotate(45deg);
-          }
-          &:after {
-            transform: translateY(-5px) rotate(-45deg);
-          }
-        }
-      }
-    }
-  }
-}

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",