diff --git a/components/_util/switchScrollingEffect.js b/components/_util/switchScrollingEffect.js
deleted file mode 100644
index 5346c80a7e..0000000000
--- a/components/_util/switchScrollingEffect.js
+++ /dev/null
@@ -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)`;
-  }
-};
diff --git a/components/_util/switchScrollingEffect.ts b/components/_util/switchScrollingEffect.ts
new file mode 100644
index 0000000000..e87985bdda
--- /dev/null
+++ b/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();
+    }
+  }
+};
diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less
index 9c9ea4a154..cf5c4047b0 100644
--- a/components/modal/style/confirm.less
+++ b/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;
     }
diff --git a/components/modal/style/index.less b/components/modal/style/index.less
index bc682e742b..5acc2608d4 100644
--- a/components/modal/style/index.less
+++ b/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);
diff --git a/components/modal/style/index.ts b/components/modal/style/index.tsx
similarity index 100%
rename from components/modal/style/index.ts
rename to components/modal/style/index.tsx
diff --git a/components/modal/style/modal.less b/components/modal/style/modal.less
index 8e32bc6114..6fb60849ca 100644
--- a/components/modal/style/modal.less
+++ b/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;
-    line-height: 22px;
+    font-size: @modal-header-title-font-size;
+    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;
-      height: 56px;
+      width: @modal-header-close-size;
+      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;
   }
diff --git a/components/modal/style/rtl.less b/components/modal/style/rtl.less
new file mode 100644
index 0000000000..8a19025b6b
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 7008f94c7c..a036d27539 100644
--- a/components/style/themes/default.less
+++ b/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-close-color: @text-color-secondary;
+@modal-footer-border-style: @border-style-base;
 @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
 // --
diff --git a/components/vc-dialog/Content.tsx b/components/vc-dialog/Content.tsx
new file mode 100644
index 0000000000..dad3a45e3c
--- /dev/null
+++ b/components/vc-dialog/Content.tsx
@@ -0,0 +1,150 @@
+import type { CSSProperties, PropType } from 'vue';
+import { computed, ref, defineComponent } 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',
+  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 }) {
+    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 = () => {
+      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}
+          onEnter={onPrepare}
+          // onBeforeEnter={onPrepare}
+          onAfterEnter={() => onVisibleChanged(true)}
+          onAfterLeave={() => onVisibleChanged(false)}
+        >
+          {visible || !destroyOnClose ? (
+            <div
+              ref={dialogRef}
+              v-show={visible}
+              key="dialog-element"
+              role="document"
+              style={contentStyleRef.value}
+              class={prefixCls}
+              onMousedown={onMousedown}
+              onMouseup={onMouseup}
+            >
+              <div tabindex={0} ref={sentinelStartRef} style={sentinelStyle} aria-hidden="true" />
+              {modalRender ? modalRender(content) : content}
+              <div tabindex={0} ref={sentinelEndRef} style={sentinelStyle} aria-hidden="true" />
+            </div>
+          ) : null}
+        </Transition>
+      );
+    };
+  },
+});
diff --git a/components/vc-dialog/Dialog.jsx b/components/vc-dialog/Dialog.jsx
deleted file mode 100644
index f29c9bba6f..0000000000
--- a/components/vc-dialog/Dialog.jsx
+++ /dev/null
@@ -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>
-    );
-  },
-});
diff --git a/components/vc-dialog/Dialog.tsx b/components/vc-dialog/Dialog.tsx
new file mode 100644
index 0000000000..0a70654039
--- /dev/null
+++ b/components/vc-dialog/Dialog.tsx
@@ -0,0 +1,199 @@
+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 {
+        // 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 (animatedVisible.value) {
+          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>
+      );
+    };
+  },
+});
diff --git a/components/vc-dialog/DialogWrap.jsx b/components/vc-dialog/DialogWrap.jsx
deleted file mode 100644
index 6dfe9d2fce..0000000000
--- a/components/vc-dialog/DialogWrap.jsx
+++ /dev/null
@@ -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;
diff --git a/components/vc-dialog/DialogWrap.tsx b/components/vc-dialog/DialogWrap.tsx
new file mode 100644
index 0000000000..426ded1a00
--- /dev/null
+++ b/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;
diff --git a/components/vc-dialog/IDialogPropTypes.js b/components/vc-dialog/IDialogPropTypes.ts
similarity index 86%
rename from components/vc-dialog/IDialogPropTypes.js
rename to components/vc-dialog/IDialogPropTypes.ts
index 300962972f..dec2f14302 100644
--- a/components/vc-dialog/IDialogPropTypes.js
+++ b/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 default IDialogPropTypes;
+export type IDialogChildProps = Partial<ExtractPropTypes<ReturnType<typeof dialogPropTypes>>>;
+export default dialogPropTypes;
diff --git a/components/vc-dialog/LazyRenderBox.jsx b/components/vc-dialog/LazyRenderBox.jsx
deleted file mode 100644
index 01ca6a466b..0000000000
--- a/components/vc-dialog/LazyRenderBox.jsx
+++ /dev/null
@@ -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>;
-  },
-};
diff --git a/components/vc-dialog/Mask.tsx b/components/vc-dialog/Mask.tsx
new file mode 100644
index 0000000000..810acf2a38
--- /dev/null
+++ b/components/vc-dialog/Mask.tsx
@@ -0,0 +1,23 @@
+import { defineComponent, Transition } from 'vue';
+import { 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>
+      );
+    };
+  },
+});
diff --git a/components/vc-dialog/assets/bootstrap.less b/components/vc-dialog/assets/bootstrap.less
deleted file mode 100644
index b47dbb51e6..0000000000
--- a/components/vc-dialog/assets/bootstrap.less
+++ /dev/null
@@ -1,3 +0,0 @@
-@prefixCls: rc-dialog;
-@import './bootstrap/Dialog.less';
-@import './index/Mask.less';
diff --git a/components/vc-dialog/assets/bootstrap/Dialog.less b/components/vc-dialog/assets/bootstrap/Dialog.less
deleted file mode 100644
index 458424ca7f..0000000000
--- a/components/vc-dialog/assets/bootstrap/Dialog.less
+++ /dev/null
@@ -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';
diff --git a/components/vc-dialog/assets/bootstrap/effect.less b/components/vc-dialog/assets/bootstrap/effect.less
deleted file mode 100644
index 3d0e55a0cd..0000000000
--- a/components/vc-dialog/assets/bootstrap/effect.less
+++ /dev/null
@@ -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%);
-    }
-  }
-}
diff --git a/components/vc-dialog/assets/bootstrap/variables.less b/components/vc-dialog/assets/bootstrap/variables.less
deleted file mode 100644
index 5bdf17af57..0000000000
--- a/components/vc-dialog/assets/bootstrap/variables.less
+++ /dev/null
@@ -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;
diff --git a/components/vc-dialog/assets/index.less b/components/vc-dialog/assets/index.less
deleted file mode 100644
index 4120963e57..0000000000
--- a/components/vc-dialog/assets/index.less
+++ /dev/null
@@ -1,4 +0,0 @@
-@prefixCls: rc-dialog;
-
-@import './index/Dialog.less';
-@import './index/Mask.less';
diff --git a/components/vc-dialog/assets/index/Dialog.less b/components/vc-dialog/assets/index/Dialog.less
deleted file mode 100644
index 049ceebe86..0000000000
--- a/components/vc-dialog/assets/index/Dialog.less
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/components/vc-dialog/assets/index/Mask.less b/components/vc-dialog/assets/index/Mask.less
deleted file mode 100644
index a6d9a981ce..0000000000
--- a/components/vc-dialog/assets/index/Mask.less
+++ /dev/null
@@ -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;
-    }
-  }
-}
diff --git a/components/vc-dialog/index.js b/components/vc-dialog/index.js
deleted file mode 100644
index fdd1af3846..0000000000
--- a/components/vc-dialog/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// based on vc-dialog 7.5.14
-import DialogWrap from './DialogWrap';
-export default DialogWrap;
diff --git a/components/vc-dialog/index.ts b/components/vc-dialog/index.ts
new file mode 100644
index 0000000000..3817c9a5ac
--- /dev/null
+++ b/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;
diff --git a/components/vc-dialog/util.ts b/components/vc-dialog/util.ts
new file mode 100644
index 0000000000..54b4a1d0ff
--- /dev/null
+++ b/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;
+}
diff --git a/components/vc-drawer/assets/index.less b/components/vc-drawer/assets/index.less
deleted file mode 100644
index 97acc42846..0000000000
--- a/components/vc-drawer/assets/index.less
+++ /dev/null
@@ -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);
-          }
-        }
-      }
-    }
-  }
-}
\ No newline at end of file