refactor(message): new theme

src/message/src/Message.js

@@ -1,4 +1,4 @@
-import { h } from 'vue'
+import { computed, h } from 'vue'
 import { NIcon } from '../../icon'
 import {
   InfoIcon,
@@ -8,31 +8,80 @@ import {
   CloseIcon
 } from '../../_base/icons'
 import { NIconSwitchTransition, NBaseLoading } from '../../_base'
-import { render } from '../../_utils'
-import { configurable, themeable, withCssr } from '../../_mixins'
-import styles from './styles'
+import { render, createKey } from '../../_utils'
+import { useTheme } from '../../_mixins'
+import { messageLight } from '../styles'
 import props from './message-props'
+import style from './styles/index.cssr.js'
 
 export default {
   name: 'Message',
-  mixins: [configurable, themeable, withCssr(styles)],
   props,
-  methods: {
-    handleClose () {
-      this.onClose()
+  setup (props) {
+    const themeRef = useTheme('Message', 'Message', style, messageLight, props)
+    return {
+      handleClose () {
+        props.onClose()
+      },
+      cssVars: computed(() => {
+        const { type } = props
+        const {
+          common: { cubicBezierEaseInOut },
+          self: {
+            height,
+            padding,
+            paddingClosable,
+            maxWidth,
+            iconMargin,
+            closeMargin,
+            closeSize,
+            iconSize,
+            fontSize,
+            loadingColor,
+            [createKey('textColor', type)]: textColor,
+            [createKey('boxShadow', type)]: boxShadow,
+            [createKey('color', type)]: color,
+            [createKey('iconColor', type)]: iconColor,
+            [createKey('closeColor', type)]: closeColor,
+            [createKey('closeColorPressed', type)]: closeColorPressed,
+            [createKey('closeColorHover', type)]: closeColorHover
+          }
+        } = themeRef.value
+        return {
+          '--bezier': cubicBezierEaseInOut,
+          '--padding': padding,
+          '--height': height,
+          '--max-width': maxWidth,
+          '--font-size': fontSize,
+          '--icon-margin': iconMargin,
+          '--icon-size': iconSize,
+          '--close-size': closeSize,
+          '--close-margin': closeMargin,
+          '--padding-closable': paddingClosable,
+          '--text-color': textColor,
+          '--color': color,
+          '--box-shadow': boxShadow,
+          '--icon-color': iconColor,
+          '--close-color': closeColor,
+          '--close-color-pressed': closeColorPressed,
+          '--close-color-hover': closeColorHover,
+          '--loading-color': loadingColor
+        }
+      })
     }
   },
   render () {
-    const { icon, type, mergedTheme, closable, content, handleClose } = this
+    const { icon, type, closable, content, handleClose, cssVars } = this
     return h(
       'div',
       {
-        class: {
-          'n-message': true,
-          'n-message--closable': closable,
-          [`n-message--${type}-type`]: true,
-          [`n-${mergedTheme}-theme`]: mergedTheme
-        }
+        style: cssVars,
+        class: [
+          'n-message',
+          {
+            'n-message--closable': closable
+          }
+        ]
       },
       [
         h(
@@ -44,7 +93,7 @@ export default {
             h(NIcon, null, {
               default: () => [
                 h(NIconSwitchTransition, null, {
-                  default: () => [createIconVNode(icon, type, mergedTheme)]
+                  default: () => [createIconVNode(icon, type)]
                 })
               ]
             })
@@ -85,7 +134,7 @@ export default {
   }
 }
 
-function createIconVNode (icon, type, theme) {
+function createIconVNode (icon, type) {
   if (typeof icon === 'function') {
     return icon()
   } else {
@@ -108,7 +157,6 @@ function createIconVNode (icon, type, theme) {
         })
       case 'loading':
         return h(NBaseLoading, {
-          theme,
           strokeWidth: 24,
           key: 'loading'
         })

src/message/src/styles/index.cssr.js

@@ -0,0 +1,132 @@
+import { c, cB, cE, cM } from '../../../_utils/cssr'
+import iconSwitchTransition from '../../../_styles/transitions/icon-switch'
+
+// vars:
+// --bezier
+// --padding
+// --height
+// --max-width
+// --font-size
+// --icon-margin
+// --icon-size
+// --close-size
+// --close-margin
+// --text-color
+// --color
+// --box-shadow
+// --icon-color
+// --close-color
+// --close-color-pressed
+// --close-color-hover
+// --loading-color
+export default c([
+  cB('message', `
+    display: flex;
+    align-items: center;
+    transition:
+      color .3s var(--bezier),
+      box-shadow .3s var(--bezier),
+      background-color .3s var(--bezier),
+      opacity .3s var(--bezier),
+      transform .3s var(--bezier),
+      max-height .3s var(--bezier),
+      margin-bottom .3s var(--bezier);
+    opacity: 1;
+    margin-bottom: 12px;
+    padding: var(--padding);
+    height: var(--height);
+    max-height: var(--height);
+    border-radius: 20px;
+    flex-shrink: 0;
+    font-weight: 400;
+    overflow: hidden;
+    max-width: var(--max-width);
+    color: var(--text-color);
+    background-color: var(--color);
+    box-shadow: var(--box-shadow);
+  `, [
+    cE('content', `
+      display: inline-block;
+      height: var(--height);
+      line-height: var(--height);
+      font-size: var(--font-size);
+    `),
+    cE('icon', `
+      margin-right: var(--icon-margin);
+      display: inline-flex;
+      height: var(--height);
+      line-height: var(--height);
+      align-items: center;
+    `, [
+      cB('icon', `
+        font-size: var(--icon-size);
+      `, [
+        cB('base-loading', {
+          color: 'var(--loading-color)'
+        }, [
+          iconSwitchTransition()
+        ]),
+        c('svg', [
+          iconSwitchTransition()
+        ])
+      ])
+    ]),
+    cE('close', `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--close-size);
+      width: var(--close-size);
+      border-radius: 100px;
+      font-size: var(--close-size);
+      margin: var(--close-margin);
+    `, [
+      cB('icon', {
+        transition: 'color .3s var(--bezier)'
+      })
+    ]),
+    cM('closable', {
+      padding: 'var(--padding-closable)'
+    }),
+    cE('icon', [
+      cB('icon', {
+        color: 'var(--icon-color)'
+      })
+    ]),
+    cE('close', [
+      cB('icon', `
+        cursor: pointer;
+        color: var(--close-color);
+      `, [
+        c('&:hover', {
+          color: 'var(--close-color-hover)'
+        }),
+        c('&:active', {
+          color: 'var(--close-color-pressed)'
+        })
+      ])
+    ])
+  ]),
+  cB('message-container', `
+    z-index: 6000;
+    position: fixed;
+    top: 12px;
+    left: 0;
+    right: 0;
+    height: 0;
+    overflow: visible;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  `),
+  // TODO: refactor transition style
+  cB('message', [
+    c('&.message-transition-enter-from, &.message-transition-leave-to', `
+      opacity: 0;
+      transform: translateY(-12px) scale(.5);
+      transform-origin: top center;
+      max-height: 0;
+      margin-bottom: 0;
+    `)
+  ])
+])

src/message/src/styles/index.js

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

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

@@ -1,156 +0,0 @@
-import { cTB, c, cB, cE, cM, createKey } from '../../../_utils/cssr'
-import iconSwitchTransition from '../../../_styles/transitions/icon-switch'
-
-function typeStyle (
-  type,
-  palette
-) {
-  return cM(`${type}-type`, {
-    raw: `
-      color: ${palette[createKey('textColor', type)]};
-      background-color: ${palette[createKey('color', type)]};
-      box-shadow: ${palette[createKey('boxShadow', type)]};
-    `
-  }, [
-    cE('icon', [
-      cB('icon', {
-        color: palette[createKey('iconColor', type)]
-      })
-    ]),
-    cE('close', [
-      cB('icon', {
-        raw: `
-          cursor: pointer;
-          color: ${palette[createKey('closeColor', type)]};
-        `
-      }, [
-        c('&:hover', {
-          color: palette[createKey('closeColorHover', type)]
-        }),
-        c('&:active', {
-          color: palette[createKey('closeColorPressed', type)]
-        })
-      ])
-    ])
-  ])
-}
-
-export default c([
-  ({ props }) => {
-    const {
-      height,
-      padding,
-      paddingClosable,
-      maxWidth,
-      iconMargin,
-      closeMargin,
-      closeSize,
-      iconSize
-    } = props.$local
-    const {
-      cubicBezierEaseInOut
-    } = props.$global
-    return cTB('message', {
-      raw: `
-        display: flex;
-        align-items: center;
-        transition:
-          color .3s ${cubicBezierEaseInOut},
-          box-shadow .3s ${cubicBezierEaseInOut},
-          background-color .3s ${cubicBezierEaseInOut},
-          opacity .3s ${cubicBezierEaseInOut},
-          transform .3s ${cubicBezierEaseInOut},
-          max-height .3s ${cubicBezierEaseInOut},
-          margin-bottom .3s ${cubicBezierEaseInOut};
-        opacity: 1;
-        margin-bottom: 12px;
-        padding: ${padding};
-        height: ${height};
-        max-height: ${height};
-        border-radius: 20px;
-        flex-shrink: 0;
-        font-weight: 400;
-        overflow: hidden;
-        max-width: ${maxWidth};
-      `
-    }, [
-      cE('content', {
-        raw: `
-          display: inline-block;
-          height: ${height};
-          line-height: ${height};
-          font-size: 15px;
-        `
-      }),
-      cE('icon', {
-        raw: `
-          margin-right: ${iconMargin};
-          display: inline-flex;
-          height: ${height};
-          line-height: ${height};
-          align-items: center;
-        `
-      }, [
-        cB('icon', {
-          raw: `
-            font-size: ${iconSize};
-          `
-        }, [
-          cB('base-loading', [
-            iconSwitchTransition()
-          ]),
-          c('svg', [
-            iconSwitchTransition()
-          ])
-        ])
-      ]),
-      cE('close', {
-        raw: `
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: ${closeSize};
-          width: ${closeSize};
-          border-radius: 100px;
-          font-size: ${closeSize};
-          margin: ${closeMargin};
-        `
-      }, [
-        cB('icon', {
-          transition: `color .3s ${cubicBezierEaseInOut}`
-        })
-      ]),
-      cM('closable', {
-        padding: paddingClosable
-      }),
-      ['info', 'success', 'error', 'warning', 'loading']
-        .map(type => typeStyle(type, props.$local))
-    ])
-  },
-  cB('message-container', {
-    raw: `
-      z-index: 6000;
-      position: fixed;
-      top: 12px;
-      left: 0;
-      right: 0;
-      height: 0;
-      overflow: visible;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    `
-  }),
-  // TODO: refactor transition style
-  cB('message', [
-    c('&.message-transition-enter-from, &.message-transition-leave-to', {
-      raw: `
-        opacity: 0;
-        transform: translateY(-12px) scale(.5);
-        transform-origin: top center;
-        max-height: 0;
-        margin-bottom: 0;
-      `
-    })
-  ])
-])

src/message/styles/_common.js

@@ -7,5 +7,6 @@ export default {
   iconMargin: '10px',
   closeMargin: '0 0 0 12px',
   closeSize: '16px',
-  iconSize: '20px'
+  iconSize: '20px',
+  fontSize: '14px'
 }

src/message/styles/dark.js

@@ -1,14 +1,15 @@
-import create from '../../_styles/utils/create-component-base'
 import { changeColor } from 'seemly'
 import commonVariables from './_common'
-import { baseDark } from '../../_styles/base'
 import { iconDark } from '../../icon/styles'
+import { commonDark } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Message',
-  theme: 'dark',
-  peer: [baseDark, iconDark],
-  getLocalVars (vars) {
+  common: commonDark,
+  peers: {
+    Icon: iconDark
+  },
+  self (vars) {
     const {
       textColorBase,
       textColor2Overlay,
@@ -17,7 +18,8 @@ export default create({
       errorColorSuppl,
       warningColorSuppl,
       popoverColor,
-      boxShadow2
+      boxShadow2,
+      primaryColor
     } = vars
     return {
       ...commonVariables,
@@ -63,7 +65,8 @@ export default create({
       closeColorPressedWarning: 'rgba(255, 255, 255, .4)',
       closeColorLoading: 'rgba(255, 255, 255, .5)',
       closeColorHoverLoading: 'rgba(255, 255, 255, .6)',
-      closeColorPressedLoading: 'rgba(255, 255, 255, .4)'
+      closeColorPressedLoading: 'rgba(255, 255, 255, .4)',
+      loadingColor: primaryColor
     }
   }
-})
+}

src/message/styles/light.js

@@ -1,13 +1,14 @@
-import create from '../../_styles/utils/create-component-base'
 import commonVariables from './_common'
-import { baseDark } from '../../_styles/base'
-import { iconDark } from '../../icon/styles'
+import { iconLight } from '../../icon/styles'
+import { commonLight } from '../../_styles/new-common'
 
-export default create({
+export default {
   name: 'Message',
-  theme: 'light',
-  peer: [baseDark, iconDark],
-  getLocalVars (vars) {
+  common: commonLight,
+  peers: {
+    Icon: iconLight
+  },
+  self (vars) {
     const {
       textColor2,
       baseColor,
@@ -18,7 +19,8 @@ export default create({
       errorColor,
       warningColor,
       popoverColor,
-      boxShadow2
+      boxShadow2,
+      primaryColor
     } = vars
     const coloredBoxShadow = '0px 2px 18px 0px rgba(0, 0, 0, 0.27)'
     return {
@@ -57,7 +59,8 @@ export default create({
       closeColorPressedWarning: 'rgba(255, 255, 255, .4)',
       closeColorLoading: closeColor,
       closeColorHoverLoading: closeColorHover,
-      closeColorPressedLoading: closeColor
+      closeColorPressedLoading: closeColor,
+      loadingColor: primaryColor
     }
   }
-})
+}

src/styles.js

@@ -53,7 +53,7 @@ export { baseDark, baseLight } from './_styles/base'
 // export { loadingBarDark, loadingBarLight } from './loading-bar/styles'
 // export { logDark, logLight } from './log/styles'
 // export { menuDark, menuLight } from './menu/styles'
-export { messageDark, messageLight } from './message/styles'
+// export { messageDark, messageLight } from './message/styles'
 export { modalDark, modalLight } from './modal/styles'
 export { notificationDark, notificationLight } from './notification/styles'
 export { paginationDark, paginationLight } from './pagination/styles'

src/styles.new.js

@@ -35,6 +35,7 @@ import { listDark } from './list/styles'
 import { loadingBarDark } from './loading-bar/styles'
 import { logDark } from './log/styles'
 import { menuDark } from './menu/styles'
+import { messageDark } from './message/styles'
 
 export const darkTheme = {
   common: commonDark,
@@ -73,5 +74,6 @@ export const darkTheme = {
   List: listDark,
   LoadingBar: loadingBarDark,
   Log: logDark,
-  Menu: menuDark
+  Menu: menuDark,
+  Message: messageDark
 }

vue3.md

@@ -379,6 +379,7 @@
   - [ ] input + form-item style
   - [ ] loadingbar theme
   - [ ] dropdown group + menu use dropdown
+  - [ ] 多行 message
 
 ## Info