refactor(drawer): remove body-wrapper prop & simplify dom

demo/documentation/components/drawer/enUS/index.demo-entry.md

@@ -13,9 +13,8 @@ target
 |-|-|-|-|
 |body-class|`string`|`undefined`||
 |body-style|`Object`|`undefined`||
-|body-wrapper-class|`string`|`undefined`||
-|body-wrapper-style|`Object`|`undefined`||
 |height|`number \| string`|`251`|Works when placement is `top` and `bottom`.|
+|native-scrollbar|`boolean`|`true`||
 |mask-closable|`boolean`|`true`|Whether to emit `hide` event when click mask.|
 |placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
 |show|`boolean`|`false`||

demo/documentation/components/drawer/zhCN/index.demo-entry.md

@@ -17,10 +17,9 @@ dark-4-debug
 |-|-|-|-|
 |body-class|`string`|`undefined`||
 |body-style|`Object`|`undefined`||
-|body-wrapper-class|`string`|`undefined`||
-|body-wrapper-style|`Object`|`undefined`||
 |height|`number \| string`|`251`|在位置是 `top` 和 `bottom` 时生效|
 |mask-closable|`boolean`|`true`|点击遮罩时是否发出 `update:show` 事件|
+|native-scrollbar|`boolean`|`true`||
 |placement|`'top' \| 'right' \| 'bottom' \| 'left'`|`'right'`||
 |show|`boolean`|`false`||
 |themed-style|`{ [themeName: string]: Object }`|`undefined`||

src/drawer/src/Drawer.vue

@@ -22,12 +22,12 @@
       </transition>
       <n-drawer-body-wrapper
         :placement="placement"
-        :body-wrapper-class="bodyWrapperClass"
-        :body-wrapper-style="mergedBodyWrapperStyle"
         :body-style="compitableBodyStyle"
         :body-class="compitableBodyClass"
+        :scrollbar-props="scrollbarProps"
         :show="show"
         :display-directive="displayDirective"
+        :native-scrollbar="nativeScrollbar"
         :theme="mergedTheme"
       >
         <slot />
@@ -100,14 +100,6 @@ export default {
       type: Object,
       default: undefined
     },
-    bodyWrapperClass: {
-      type: String,
-      default: undefined
-    },
-    bodyWrapperStyle: {
-      type: Object,
-      default: undefined
-    },
     to: {
       type: [String, Object],
       default: undefined
@@ -118,6 +110,14 @@ export default {
       },
       default: 'if'
     },
+    nativeScrollbar: {
+      type: Boolean,
+      default: true
+    },
+    scrollbarProps: {
+      type: Object,
+      default: undefined
+    },
     // eslint-disable-next-line vue/prop-name-casing
     'onUpdate:show': {
       type: Function,

src/drawer/src/DrawerBodyWrapper.vue

@@ -11,27 +11,29 @@
     >
       <div
         v-show="show"
+        ref="bodyRef"
         class="n-drawer"
         :class="[
+          bodyClass,
           `n-drawer--${placement}-placement`,
           {
+            [`n-drawer--native-scrollbar`]: nativeScrollbar,
             [`n-${theme}-theme`]: theme,
-            [bodyWrapperClass]: bodyWrapperClass
           }
         ]"
-        :style="bodyWrapperStyle"
+        :style="bodyStyle"
       >
-        <n-scrollbar>
-          <div
-            ref="bodyRef"
-            class="n-drawer-body"
-            :class="{
-              [bodyClass]: bodyClass
-            }"
-            :style="bodyStyle"
-          >
-            <slot />
-          </div>
+        <template
+          v-if="nativeScrollbar"
+        >
+          <slot />
+        </template>
+        <n-scrollbar
+          v-else
+          v-bind="scrollbarProps"
+          content-class="n-drawer-scroll-content"
+        >
+          <slot />
         </n-scrollbar>
       </div>
     </transition>
@@ -63,14 +65,6 @@ export default {
       type: String,
       default: undefined
     },
-    bodyWrapperClass: {
-      type: String,
-      default: undefined
-    },
-    bodyWrapperStyle: {
-      type: Object,
-      default: undefined
-    },
     bodyStyle: {
       type: Object,
       default: undefined
@@ -90,6 +84,14 @@ export default {
     placement: {
       type: String,
       required: true
+    },
+    nativeScrollbar: {
+      type: Boolean,
+      required: true
+    },
+    scrollbarProps: {
+      type: Object,
+      default: undefined
     }
   },
   setup (props) {
@@ -99,7 +101,7 @@ export default {
     })
     return {
       displayed: displayedRef,
-      bodyRef: ref(null),
+      bodyRef: ref(null), // used for detached content
       transitionName: computed(() => {
         return ({
           right: 'n-slide-in-from-right-transition',

src/drawer/src/styles/themed-base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cTB, cB, cM } from '../../../_utils/cssr'
+import { c, cTB, cB, cM, cNotM } from '../../../_utils/cssr'
 import slideInFromRightTransition from '../../../_styles/transitions/slide-in-from-right'
 import slideInFromLeftTransition from '../../../_styles/transitions/slide-in-from-left'
 import slideInFromTopTransition from '../../../_styles/transitions/slide-in-from-top'
@@ -19,6 +19,7 @@ export default c([
     return [
       cTB('drawer', {
         raw: `
+          overflow: auto;
           position: absolute;
           pointer-events: all;
           transition:
@@ -33,10 +34,16 @@ export default c([
         slideInFromLeftTransition(),
         slideInFromTopTransition(),
         slideInFromBottomTransition(),
-        cB('drawer-body', {
+        cM('native-scrollbar', {
           boxSizing: 'border-box',
           padding: '16px 24px'
         }),
+        cNotM('native-scrollbar', [
+          cB('drawer-scroll-content', {
+            boxSizing: 'border-box',
+            padding: '16px 24px'
+          })
+        ]),
         cM('right-placement', {
           raw: `
             top: 0;

src/scrollbar/src/ScrollBar.vue

@@ -29,7 +29,10 @@
                 width: xScrollable ? 'fit-content' : null,
               }
             ]"
-            class="n-scrollbar-content"
+            :class="[
+              'n-scrollbar-content',
+              contentClass
+            ]"
           >
             <slot />
           </div>
@@ -147,6 +150,10 @@ export default {
       type: Object,
       default: undefined
     },
+    contentClass: {
+      type: String,
+      default: undefined
+    },
     contentStyle: {
       type: Object,
       default: undefined