refactor(modal): new theme

src/modal/src/BodyWrapper.vue

@@ -17,14 +17,11 @@
           ref="bodyRef"
           v-clickoutside="handleClickOutside"
           class="n-modal"
-          :class="{
-            [`n-${theme}-theme`]: theme
-          }"
         >
           <n-dialog
             v-if="preset === 'confirm' || preset === 'dialog'"
             v-bind="$attrs"
-            :theme="theme"
+            :theme="'light'"
             :title="title"
             :closable="closable"
             :positive-text="positiveText"
@@ -48,7 +45,7 @@
           <n-card
             v-else-if="preset === 'card'"
             v-bind="$attrs"
-            :theme="theme"
+            :theme="'light'"
             :title="title"
             :closable="closable"
             :size="size"
@@ -83,7 +80,6 @@ import { clickoutside } from 'vdirs'
 import { NScrollbar } from '../../scrollbar'
 import { NDialog } from '../../dialog'
 import { NCard } from '../../card'
-import { themeable } from '../../_mixins'
 import presetProps from './presetProps'
 
 export default {
@@ -96,7 +92,6 @@ export default {
     NDialog,
     NCard
   },
-  mixins: [themeable],
   provide () {
     return {
       NModalBody: this,

src/modal/src/Modal.js

@@ -1,12 +1,13 @@
-import { h, withDirectives, Transition, ref, computed } from 'vue'
+import { h, withDirectives, Transition, ref, computed, mergeProps } from 'vue'
 import { zindexable } from 'vdirs'
 import { useIsMounted, useClicked, useClickPosition } from 'vooks'
 import { VLazyTeleport } from 'vueuc'
-import { configurable, themeable, withCssr } from '../../_mixins'
+import { useConfig, useTheme } from '../../_mixins'
 import presetProps from './presetProps'
 import { warn, omit } from '../../_utils'
 import NModalBodyWrapper from './BodyWrapper.vue'
-import styles from './styles'
+import style from './styles/index.cssr.js'
+import { modalLight } from '../styles'
 
 export default {
   name: 'Modal',
@@ -16,7 +17,6 @@ export default {
       NDrawer: null
     }
   },
-  mixins: [configurable, themeable, withCssr(styles)],
   inheritAttrs: false,
   props: {
     show: {
@@ -126,9 +126,11 @@ export default {
     }
   },
   setup (props) {
+    const themeRef = useTheme('Modal', 'Modal', style, modalLight, props)
     const clickedRef = useClicked(64)
     const clickedPositionRef = useClickPosition()
     return {
+      ...useConfig(props),
       isMounted: useIsMounted(),
       containerRef: ref(null),
       mousePosition: computed(() => {
@@ -140,6 +142,18 @@ export default {
           return clickedPositionRef.value
         }
         return null
+      }),
+      cssVars: computed(() => {
+        const {
+          common: { cubicBezierEaseOut },
+          self: { boxShadow, color, textColor }
+        } = themeRef.value
+        return {
+          '--bezier-ease-out': cubicBezierEaseOut,
+          '--box-shadow': boxShadow,
+          '--color': color,
+          '--text-color': textColor
+        }
       })
     }
   },
@@ -170,7 +184,8 @@ export default {
                   {
                     [this.namespace]: this.namespace
                   }
-                ]
+                ],
+                style: this.cssVars
               },
               [
                 h(
@@ -193,15 +208,10 @@ export default {
                 ),
                 h(
                   NModalBodyWrapper,
-                  {
-                    ...this.$attrs,
-                    style: {
-                      ...this.$attrs.style,
-                      ...this.overlayStyle
-                    },
+                  mergeProps(this.$attrs, {
+                    style: this.overlayStyle,
                     ref: 'bodyWrapper',
                     ...omit(this.$props, ['maskClosable', 'to']),
-                    theme: this.mergedTheme,
                     show: this.show,
                     onClose: () => {
                       const { onClose = () => {} } = this
@@ -244,10 +254,8 @@ export default {
                         }
                       }
                     }
-                  },
-                  {
-                    ...this.$slots
-                  }
+                  }),
+                  this.$slots
                 )
               ]
             ),

src/modal/src/styles/index.cssr.js

@@ -0,0 +1,65 @@
+import { cB, c } from '../../../_utils/cssr'
+import fadeInTransition from '../../../_styles/transitions/fade-in'
+import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
+
+// vars:
+// --bezier-ease-out
+// --box-shadow
+// --color
+// --text-color
+export default c([
+  cB('modal-container', `
+    position: fixed;
+    left: 0;
+    top: 0;
+    height: 0;
+    width: 0;
+    display: flex;
+  `),
+  cB('modal-mask', `
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .4);
+  `, [
+    fadeInTransition({
+      enterDuration: '.25s',
+      leaveDuration: '.25s',
+      enterCubicBezier: 'var(--bezier-ease-out)',
+      leaveCubicBezier: 'var(--bezier-ease-out)'
+    })
+  ]),
+  cB('modal-body-wrapper', `
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow: visible;
+  `, [
+    cB('modal-scroll-content', `
+      min-height: 100%;
+      display: flex;
+    `)
+  ]),
+  cB('modal', `
+    color: var(--text-color);
+    margin: auto;
+    position: relative;
+    box-shadow: var(--box-shadow);
+  `, [
+    fadeInScaleUpTransition({
+      duration: '.25s',
+      enterScale: '.5'
+    }),
+    cB('card', `
+      background-color: var(--color);
+    `),
+    cB('confirm', `
+      width: 446px;
+      max-width: calc(100vw - 32px);
+    `)
+  ])
+])

src/modal/src/styles/index.js

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

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

@@ -1,84 +0,0 @@
-import { cTB, c, cB } from '../../../_utils/cssr'
-import fadeInTransition from '../../../_styles/transitions/fade-in'
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up'
-
-export default c([
-  ({ props }) => {
-    const {
-      cubicBezierEaseOut
-    } = props.$global
-    const {
-      color,
-      boxShadow
-    } = props.$local
-    return [
-      cB('modal-container', {
-        raw: `
-          position: fixed;
-          left: 0;
-          top: 0;
-          height: 0;
-          width: 0;
-          display: flex;
-        `
-      }),
-      cB('modal-mask', {
-        raw: `
-          position: fixed;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          background-color: rgba(0, 0, 0, .4);
-        `
-      }, [
-        fadeInTransition({
-          enterDuration: '.25s',
-          leaveDuration: '.25s',
-          enterCubicBezier: cubicBezierEaseOut,
-          leaveCubicBezier: cubicBezierEaseOut
-        })
-      ]),
-      cB('modal-body-wrapper', {
-        raw: `
-          position: fixed;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          overflow: visible;
-        `
-      }, [
-        cB('modal-scroll-content', {
-          raw: `
-            min-height: 100%;
-            display: flex;
-          `
-        })
-      ]),
-      cTB('modal', {
-        raw: `
-          margin: auto;
-          position: relative;
-          box-shadow: ${boxShadow}
-        `
-      }, [
-        fadeInScaleUpTransition({
-          duration: '.25s',
-          enterScale: '.5'
-        }),
-        cB('card', {
-          raw: `
-            background-color: ${color};
-          `
-        }),
-        cB('confirm', {
-          raw: `
-            width: 446px;
-            max-width: calc(100vw - 32px);
-          `
-        })
-      ])
-    ]
-  }
-])

src/modal/styles/dark.js

@@ -1,14 +1,17 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseDark } from '../../_styles/base'
 import { scrollbarDark } from '../../scrollbar/styles'
 import { dialogDark } from '../../dialog/styles'
 import { cardDark } from '../../card/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Modal',
-  theme: 'dark',
-  peer: [baseDark, scrollbarDark, dialogDark, cardDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Scrollbar: scrollbarDark,
+    Dialog: dialogDark,
+    Card: cardDark
+  },
+  self (vars) {
     const { modalColor, textColor2Overlay, boxShadow3 } = vars
     return {
       color: modalColor,
@@ -16,4 +19,4 @@ export default create({
       boxShadow: boxShadow3
     }
   }
-})
+}

src/modal/styles/light.js

@@ -1,14 +1,17 @@
-import create from '../../_styles/utils/create-component-base'
-import { baseLight } from '../../_styles/base'
 import { scrollbarLight } from '../../scrollbar/styles'
 import { dialogLight } from '../../dialog/styles'
 import { cardLight } from '../../card/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Modal',
-  theme: 'light',
-  peer: [baseLight, scrollbarLight, dialogLight, cardLight],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Scrollbar: scrollbarLight,
+    Dialog: dialogLight,
+    Card: cardLight
+  },
+  self (vars) {
     const { modalColor, textColor2, boxShadow3 } = vars
     return {
       color: modalColor,
@@ -16,4 +19,4 @@ export default create({
       boxShadow: boxShadow3
     }
   }
-})
+}

src/styles.js

@@ -54,7 +54,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { logDark, logLight } from './log/styles'
 // export { menuDark, menuLight } from './menu/styles'
 // export { messageDark, messageLight } from './message/styles'
-export { modalDark, modalLight } from './modal/styles'
+// export { modalDark, modalLight } from './modal/styles'
 export { notificationDark, notificationLight } from './notification/styles'
 export { paginationDark, paginationLight } from './pagination/styles'
 export { popconfirmDark, popconfirmLight } from './popconfirm/styles'

src/styles.new.js

@@ -36,6 +36,7 @@ import { loadingBarDark } from './loading-bar/styles'
 import { logDark } from './log/styles'
 import { menuDark } from './menu/styles'
 import { messageDark } from './message/styles'
+import { modalDark } from './modal/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -75,5 +76,6 @@ export const darkTheme = {
   LoadingBar: loadingBarDark,
   Log: logDark,
   Menu: menuDark,
-  Message: messageDark
+  Message: messageDark,
+  Modal: modalDark
 }