refactor: drawer

Author: tangjinzhou

components/_util/transition.tsx

@@ -27,7 +27,7 @@ export const getTransitionProps = (transitionName: string, opt: TransitionProps
         // appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
         // appearActiveClass: `antdv-base-transtion`,
         // appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
-        enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
+        enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare ${transitionName}-enter-start`,
         enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
         enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
         leaveFromClass: ` ${transitionName}-leave`,

components/drawer/demo/basic.vue

@@ -19,12 +19,14 @@ Basic drawer.
 <template>
   <a-button type="primary" @click="showDrawer">Open</a-button>
   <a-drawer
-    v-model:visible="visible"
+    v-model:open="open"
     class="custom-class"
+    root-class-name="root-class-name"
+    :root-style="{ color: 'blue' }"
     style="color: red"
     title="Basic Drawer"
     placement="right"
-    @after-visible-change="afterVisibleChange"
+    @after-open-change="afterOpenChange"
   >
     <p>Some contents...</p>
     <p>Some contents...</p>
@@ -35,19 +37,19 @@ Basic drawer.
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
 
-    const afterVisibleChange = (bool: boolean) => {
-      console.log('visible', bool);
+    const afterOpenChange = (bool: boolean) => {
+      console.log('open', bool);
     };
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
 
     return {
-      visible,
-      afterVisibleChange,
+      open,
+      afterOpenChange,
       showDrawer,
     };
   },

components/drawer/demo/extra.vue

@@ -24,13 +24,7 @@ Extra actions should be placed at corner of drawer in Ant Design, you can using
     <a-radio value="left">left</a-radio>
   </a-radio-group>
   <a-button type="primary" @click="showDrawer">Open</a-button>
-  <a-drawer
-    :width="500"
-    title="Basic Drawer"
-    :placement="placement"
-    :visible="visible"
-    @close="onClose"
-  >
+  <a-drawer :width="500" title="Basic Drawer" :placement="placement" :open="open" @close="onClose">
     <template #extra>
       <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
       <a-button type="primary" @click="onClose">Submit</a-button>
@@ -46,18 +40,18 @@ import type { DrawerProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
     const placement = ref<DrawerProps['placement']>('left');
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
 
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     return {
       placement,
-      visible,
+      open,
       showDrawer,
       onClose,
     };

components/drawer/demo/form-in-drawer.vue

@@ -24,7 +24,7 @@ Use form in drawer with submit button.
   <a-drawer
     title="Create a new account"
     :width="720"
-    :visible="visible"
+    :open="open"
     :body-style="{ paddingBottom: '80px' }"
     :footer-style="{ textAlign: 'right' }"
     @close="onClose"
@@ -134,19 +134,19 @@ export default defineComponent({
       description: [{ required: true, message: 'Please enter url description' }],
     };
 
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
 
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     return {
       form,
       rules,
-      visible,
+      open,
       showDrawer,
       onClose,
     };

components/drawer/demo/multi-level-drawer.vue

@@ -19,20 +19,15 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
 <template>
   <a-button type="primary" @click="showDrawer">Open</a-button>
   <a-drawer
-    v-model:visible="visible"
+    v-model:open="open"
     title="Multi-level drawer"
     width="520"
     :closable="false"
     :footer-style="{ textAlign: 'right' }"
     @close="onClose"
   >
     <a-button type="primary" @click="showChildrenDrawer">Two-level drawer</a-button>
-    <a-drawer
-      v-model:visible="childrenDrawer"
-      title="Two-level Drawer"
-      width="320"
-      :closable="false"
-    >
+    <a-drawer v-model:open="childrenDrawer" title="Two-level Drawer" width="320" :closable="false">
       <a-button type="primary" @click="showChildrenDrawer">This is two-level drawer</a-button>
     </a-drawer>
 
@@ -47,21 +42,21 @@ import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
   setup() {
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
 
     const childrenDrawer = ref<boolean>(false);
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     const showChildrenDrawer = () => {
       childrenDrawer.value = true;
     };
     return {
-      visible,
+      open,
       childrenDrawer,
       showDrawer,
       onClose,

components/drawer/demo/placement.vue

@@ -28,7 +28,7 @@ The Drawer can appear from any edge of the screen.
     title="Basic Drawer"
     :placement="placement"
     :closable="false"
-    :visible="visible"
+    :open="open"
     @close="onClose"
   >
     <p>Some contents...</p>
@@ -42,18 +42,18 @@ import type { DrawerProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
     const placement = ref<DrawerProps['placement']>('left');
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
 
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     return {
       placement,
-      visible,
+      open,
       showDrawer,
       onClose,
     };

components/drawer/demo/render-in-current.vue

@@ -38,7 +38,7 @@ Render in current dom. custom container, check `getContainer`.
       title="Basic Drawer"
       placement="right"
       :closable="false"
-      :visible="visible"
+      :open="open"
       :get-container="false"
       :style="{ position: 'absolute' }"
       @close="onClose"
@@ -51,23 +51,23 @@ Render in current dom. custom container, check `getContainer`.
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const visible = ref(false);
+    const open = ref(false);
 
-    const afterVisibleChange = (bool: boolean) => {
-      console.log('visible', bool);
+    const afterOpenChange = (bool: boolean) => {
+      console.log('open', bool);
     };
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
 
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
 
     return {
-      visible,
-      afterVisibleChange,
+      open,
+      afterOpenChange,
       showDrawer,
       onClose,
     };

components/drawer/demo/size.vue

@@ -21,7 +21,7 @@ The default width (or height) of Drawer is `378px`, and there is a presetted lar
     Open Default Size (378px)
   </a-button>
   <a-button type="primary" @click="showDrawer('large')">Open Large Size (736px)</a-button>
-  <a-drawer title="Basic Drawer" :size="size" :visible="visible" @close="onClose">
+  <a-drawer title="Basic Drawer" :size="size" :open="open" @close="onClose">
     <template #extra>
       <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
       <a-button type="primary" @click="onClose">Submit</a-button>
@@ -36,19 +36,19 @@ import { defineComponent, ref } from 'vue';
 import type { DrawerProps } from 'ant-design-vue';
 export default defineComponent({
   setup() {
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
     const size = ref<DrawerProps['size']>('default');
 
     const showDrawer = (val: DrawerProps['size']) => {
       size.value = val;
-      visible.value = true;
+      open.value = true;
     };
 
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     return {
-      visible,
+      open,
       size,
       showDrawer,
       onClose,

components/drawer/demo/user-profile.vue

@@ -42,7 +42,7 @@ Use Drawer to quickly preview details of an object, such as those in a list.
       </a-list-item>
     </template>
   </a-list>
-  <a-drawer width="640" placement="right" :closable="false" :visible="visible" @close="onClose">
+  <a-drawer width="640" placement="right" :closable="false" :open="open" @close="onClose">
     <p :style="[pStyle, pStyle2]">User Profile</p>
     <p :style="pStyle">Personal</p>
     <a-row>
@@ -136,7 +136,7 @@ export default defineComponent({
     descriptionItem,
   },
   setup() {
-    const visible = ref<boolean>(false);
+    const open = ref<boolean>(false);
     const pStyle = {
       fontSize: '16px',
       color: 'rgba(0,0,0,0.85)',
@@ -149,13 +149,13 @@ export default defineComponent({
     };
 
     const showDrawer = () => {
-      visible.value = true;
+      open.value = true;
     };
     const onClose = () => {
-      visible.value = false;
+      open.value = false;
     };
     return {
-      visible,
+      open,
       pStyle,
       pStyle2,
       showDrawer,

components/drawer/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Feedback
 title: Drawer
-cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v3TvSq2E0HAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 A panel which slides in from the edge of the screen.
@@ -17,16 +17,17 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 
 ## API
 
+**🚨 Note:** v4 use `rootClassName` & `rootStyle` to config wrapper style instead of `class` & `style` in v4 to align the API with Modal.
+
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autofocus | Whether Drawer should get focused after open | boolean | true | 3.0.0 |
 | bodyStyle | Style of the drawer content part | CSSProperties | - |  |
-| class | The class name of the container of the Drawer dialog | string | - |  |
+| class | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
 | closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true |  |
 | closeIcon | Custom close icon | VNode \| slot | `<CloseOutlined />` | 3.0.0 |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | 3.0.0 |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
-| drawerStyle | Style of the popup layer element | CSSProperties | - |  |
 | extra | Extra actions area at corner | VNode \| slot | - | 3.0.0 |
 | footer | The footer for Drawer | VNode \| slot | - | 3.0.0 |
 | footerStyle | Style of the drawer footer part | CSSProperties | - | 3.0.0 |
@@ -40,16 +41,19 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | maskStyle | Style for Drawer's mask element | CSSProperties | {} |  |
 | placement | The placement of the Drawer | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |  |
 | push | Nested drawers push behavior | boolean \| {distance: string \| number} | { distance: 180 } | 3.0.0 |
+| rootClassName | The class name of the container of the Drawer dialog | string | - | 4.0 |
+| rootStyle | Style of wrapper element which **contains mask** compare to `style` | CSSProperties | - | 4.0 |
+| style | Style of Drawer panel. Use `bodyStyle` if want to config body only | CSSProperties | - |  |
 | size | presetted size of drawer, default `378px` and large `736px` | `default` \| `large` | `default` | 3.0.0 |
 | style | Style of wrapper element which contains mask compare to drawerStyle | CSSProperties | - |  |
 | title | The title for Drawer | string \| slot | - |  |
-| visible(v-model) | Whether the Drawer dialog is visible or not | boolean | - |  |
+| open(v-model) | Whether the Drawer dialog is visible or not | boolean | - | 4.0 |
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | Number | 1000 |  |
 
 ## Events
 
 | Name | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |  |
+| afterOpenChange | Callback after the animation ends when switching drawers. | function(open) | - | 4.0 |
 | close | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |  |