refactor(drawer): new theme

src/drawer/src/Drawer.vue

@@ -6,20 +6,20 @@
       :class="{
         [namespace]: namespace
       }"
+      :style="cssVars"
     >
       <transition name="n-fade-in-transition" :appear="isMounted">
         <div v-if="show" class="n-drawer-mask" @click="handleMaskClick" />
       </transition>
       <n-drawer-body-wrapper
         v-bind="$attrs"
-        :class="[$attrs.class, drawerClass]"
-        :style="[mergedBodyStyle, $attrs.style]"
+        :class="drawerClass"
+        :style="mergedBodyStyle"
         :placement="placement"
         :scrollbar-props="scrollbarProps"
         :show="show"
         :display-directive="displayDirective"
         :native-scrollbar="nativeScrollbar"
-        :theme="mergedTheme"
       >
         <slot />
       </n-drawer-body-wrapper>
@@ -28,15 +28,17 @@
 </template>
 
 <script>
+import { defineComponent, computed } from 'vue'
 import { VLazyTeleport } from 'vueuc'
 import { zindexable } from 'vdirs'
 import { useIsMounted } from 'vooks'
-import { configurable, themeable, withCssr } from '../../_mixins'
+import { useTheme, useConfig } from '../../_mixins'
 import { warn, formatLength } from '../../_utils'
+import { drawerLight } from '../styles'
 import NDrawerBodyWrapper from './DrawerBodyWrapper.vue'
-import styles from './styles/index'
+import style from './styles/index.cssr.js'
 
-export default {
+export default defineComponent({
   name: 'Drawer',
   components: {
     VLazyTeleport,
@@ -45,7 +47,6 @@ export default {
   directives: {
     zindexable
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   provide () {
     return {
       NDrawer: this,
@@ -149,7 +150,28 @@ export default {
     }
   },
   setup (props) {
+    const themeRef = useTheme('Drawer', 'Drawer', style, drawerLight, props)
     return {
+      ...useConfig(props),
+      cssVars: computed(() => {
+        const {
+          common: {
+            cubicBezierEaseInOut,
+            cubicBezierEaseIn,
+            cubicBezierEaseOut
+          },
+          self: { color, textColor, boxShadow, lineHeight }
+        } = themeRef.value
+        return {
+          '--line-height': lineHeight,
+          '--color': color,
+          '--text-color': textColor,
+          '--box-shadow': boxShadow,
+          '--bezier': cubicBezierEaseInOut,
+          '--bezier-out': cubicBezierEaseOut,
+          '--bezier-in': cubicBezierEaseIn
+        }
+      }),
       isMounted: useIsMounted()
     }
   },
@@ -186,5 +208,5 @@ export default {
       }
     }
   }
-}
+})
 </script>

src/drawer/src/DrawerBodyWrapper.vue

@@ -18,8 +18,7 @@
           $attrs.class,
           `n-drawer--${placement}-placement`,
           {
-            [`n-drawer--native-scrollbar`]: nativeScrollbar,
-            [`n-${theme}-theme`]: theme
+            [`n-drawer--native-scrollbar`]: nativeScrollbar
           }
         ]"
       >
@@ -30,6 +29,7 @@
           v-else
           v-bind="scrollbarProps"
           content-class="n-drawer-scroll-content"
+          :theme="'light'"
         >
           <slot />
         </n-scrollbar>
@@ -39,10 +39,10 @@
 </template>
 
 <script>
-import { ref, computed, watchEffect } from 'vue'
+import { defineComponent, ref, computed, watchEffect } from 'vue'
 import { NScrollbar } from '../../scrollbar'
 
-export default {
+export default defineComponent({
   name: 'NDrawerContent',
   components: {
     NScrollbar
@@ -60,10 +60,6 @@ export default {
   },
   inheritAttrs: false,
   props: {
-    theme: {
-      type: String,
-      default: undefined
-    },
     show: {
       type: Boolean,
       default: undefined
@@ -108,5 +104,5 @@ export default {
       this.displayed = false
     }
   }
-}
+})
 </script>

src/drawer/src/styles/index.cssr.js

@@ -0,0 +1,90 @@
+import { c, 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'
+import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom'
+import fadeInTransition from '../../../_styles/transitions/fade-in'
+
+// vars:
+// --line-height
+// --color
+// --text-color
+// --box-shadow
+// --bezier
+// --bezier-out
+// --bezier-in
+export default c([
+  cB('drawer', `
+    line-height: var(--line-height);
+    overflow: auto;
+    position: absolute;
+    pointer-events: all;
+    box-shadow: var(--box-shadow);
+    transition:
+      background-color .3s var(--bezier),
+      color .3s var(--bezier);
+    background-color: var(--color);
+    color: var(--text-color);
+  `,
+  [
+    slideInFromRightTransition(),
+    slideInFromLeftTransition(),
+    slideInFromTopTransition(),
+    slideInFromBottomTransition(),
+    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', `
+      top: 0;
+      bottom: 0;
+      right: 0;
+    `),
+    cM('left-placement', `
+      top: 0;
+      bottom: 0;
+      left: 0;
+    `),
+    cM('top-placement', `
+      top: 0;
+      left: 0;
+      right: 0;
+    `),
+    cM('bottom-placement', `
+      left: 0;
+      bottom: 0;
+      right: 0;
+    `)
+  ]),
+  cB('drawer-mask', `
+    background-color: rgba(0, 0, 0, .3);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: all;
+  `, [
+    fadeInTransition({
+      enterDuration: '0.3s',
+      leaveDuration: '0.3s',
+      enterCubicBezier: 'var(--bezier-in)',
+      leaveCubicBezier: 'var(--bezier-out)'
+    })
+  ]),
+  cB('drawer-container', `
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    pointer-events: none;
+    overflow: hidden;
+  `)
+])

src/drawer/src/styles/index.js

@@ -1,9 +0,0 @@
-import baseStyle from './themed-base.cssr.js'
-
-export default [
-  {
-    key: 'mergedTheme',
-    watch: ['mergedTheme'],
-    CNode: baseStyle
-  }
-]

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

@@ -1,109 +0,0 @@
-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'
-import slideInFromBottomTransition from '../../../_styles/transitions/slide-in-from-bottom'
-import fadeInTransition from '../../../_styles/transitions/fade-in'
-
-export default c([
-  ({ props }) => {
-    const {
-      color: backgroundColor,
-      textColor,
-      boxShadow
-    } = props.$local
-    const {
-      cubicBezierEaseInOut,
-      cubicBezierEaseIn,
-      cubicBezierEaseOut
-    } = props.$global
-    return [
-      cTB('drawer', {
-        raw: `
-          overflow: auto;
-          position: absolute;
-          pointer-events: all;
-          box-shadow: ${boxShadow};
-          transition:
-            background-color .3s ${cubicBezierEaseInOut},
-            color .3s ${cubicBezierEaseInOut};
-        `,
-        backgroundColor,
-        color: textColor
-      },
-      [
-        slideInFromRightTransition(),
-        slideInFromLeftTransition(),
-        slideInFromTopTransition(),
-        slideInFromBottomTransition(),
-        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;
-            bottom: 0;
-            right: 0;
-          `
-        }),
-        cM('left-placement', {
-          raw: `
-            top: 0;
-            bottom: 0;
-            left: 0;
-          `
-        }),
-        cM('top-placement', {
-          raw: `
-            top: 0;
-            left: 0;
-            right: 0;
-          `
-        }),
-        cM('bottom-placement', {
-          raw: `
-            left: 0;
-            bottom: 0;
-            right: 0;
-          `
-        })
-      ]),
-      cB('drawer-mask', {
-        raw: `
-          background-color: rgba(0, 0, 0, .3);
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          pointer-events: all;
-        `
-      }, [
-        fadeInTransition({
-          enterDuration: '0.3s',
-          leaveDuration: '0.3s',
-          enterCubicBezier: cubicBezierEaseIn,
-          leaveCubicBezier: cubicBezierEaseOut
-        })
-      ]),
-      cB('drawer-container', {
-        raw: `
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          pointer-events: none;
-          overflow: hidden;
-        `
-      })
-    ]
-  }
-])

src/drawer/styles/dark.js

@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
+import { commonDark } from '../../_styles/new-common'
+import { scrollbarDark } from '../../scrollbar/styles'
 
-export default create({
-  theme: 'dark',
+export default {
   name: 'Drawer',
-  peer: [baseDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Scrollbar: scrollbarDark
+  },
+  self (vars) {
+    const { modalColor, textColor2Overlay, boxShadow3 } = vars
     return {
-      color: vars.modalColor,
-      textColor: vars.textColor2Overlay,
-      boxShadow: vars.boxShadow3
+      color: modalColor,
+      textColor: textColor2Overlay,
+      boxShadow: boxShadow3
     }
   }
-})
+}

src/drawer/styles/light.js

@@ -1,15 +1,18 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
+import { commonLight } from '../../_styles/new-common'
+import { scrollbarLight } from '../../scrollbar/styles'
 
-export default create({
-  theme: 'light',
+export default {
   name: 'Drawer',
-  peer: [baseLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Scrollbar: scrollbarLight
+  },
+  self (vars) {
+    const { modalColor, textColor2Overlay, boxShadow3 } = vars
     return {
-      color: vars.modalColor,
-      textColor: vars.textColor2Overlay,
-      boxShadow: vars.boxShadow3
+      color: modalColor,
+      textColor: textColor2Overlay,
+      boxShadow: boxShadow3
     }
   }
-})
+}

src/styles.js

@@ -36,7 +36,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { descriptionsDark, descriptionsLight } from './descriptions/styles'
 // export { dialogDark, dialogLight } from './dialog/styles'
 // export { dividerDark, dividerLight } from './divider/styles'
-export { drawerDark, drawerLight } from './drawer/styles'
+// export { drawerDark, drawerLight } from './drawer/styles'
 export { dropdownDark, dropdownLight } from './dropdown/styles'
 export { dynamicInputDark, dynamicInputLight } from './dynamic-input/styles'
 export { dynamicTagsDark, dynamicTagsLight } from './dynamic-tags/styles'

src/styles.new.js

@@ -18,6 +18,7 @@ import { datePickerDark } from './date-picker/styles'
 import { descriptionsDark } from './descriptions/styles'
 import { dialogDark } from './dialog/styles'
 import { dividerDark } from './divider/styles'
+import { drawerDark } from './drawer/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -39,5 +40,6 @@ export const darkTheme = {
   DatePicker: datePickerDark,
   Descriptions: descriptionsDark,
   Dialog: dialogDark,
-  Divider: dividerDark
+  Divider: dividerDark,
+  Drawer: drawerDark
 }