refactor(message): code clean

demo/documentation/components/message/enUS/icon.md

@@ -1,5 +1,4 @@
 # Icon
-# Basic
 ```html
 <n-button @click="emitMessage">
   Hourglass Icon
@@ -15,7 +14,7 @@ export default {
   methods: {
     emitMessage() {
       this.$NMessage.warning("I never needed anybody's help in any way", {
-        icon: mdHourglass
+        icon: h => h(mdHourglass)
       })
     }
   }

packages/common/Message/src/Message.vue

@@ -27,7 +27,8 @@ export default {
   render (h) {
     let icon = null
     if (this.icon) {
-      icon = h(this.icon)
+      if (typeof this.icon === 'function') icon = this.icon(h)
+      else icon = h(this.icon)
     } else if (this.type === 'success') {
       icon = h(mdCheckmarkCircle)
     } else if (this.type === 'error') {
@@ -37,10 +38,12 @@ export default {
     } else if (this.type === 'warning') {
       icon = h(mdAlert)
     }
+    const theme = this.option.theme
     return h('div', {
       staticClass: 'n-message',
       class: {
-        [`n-message--${this.type}`]: true
+        [`n-message--${this.type}`]: true,
+        [`n-${theme}-theme`]: theme
       }
     }, [
       h('div', {

packages/common/Message/src/main.js

@@ -1,13 +1,5 @@
 import Message from './Message'
 
-function setTheme (messageContainer) {
-  const themeClasses = Array.from(messageContainer.classList).filter(c =>
-    c.endsWith('-theme')
-  )
-  themeClasses.forEach(c => messageContainer.classList.remove(c))
-  if (this.theme) messageContainer.classList.add(`n-${this.theme}-theme`)
-}
-
 function attachMessageContainer () {
   let messageContainer = document.querySelector('.n-message-container')
   if (!messageContainer) {
@@ -16,11 +8,10 @@ function attachMessageContainer () {
     messageContainer.style = `z-index: ${this.options.zIndex}; top: ${this.options.top}px;`
     document.body.appendChild(messageContainer)
   }
-  setTheme.call(this, messageContainer)
   return messageContainer
 }
 
-function registerMessageEl (container, el, option) {
+function mountMessage (container, el, option) {
   el.classList.add('n-message--enter')
   container.appendChild(el)
   el.getBoundingClientRect()
@@ -67,15 +58,15 @@ const NMessage = {
     zIndex: 6000,
     top: 20
   },
+  theme: null,
   attachMessageContainer,
   notice (content, option) {
-    // console.log('test', this)
     const messageContainer = this.attachMessageContainer()
     const messageCell = new this.Vue({
       ...Message,
-      propsData: { option, content }
+      propsData: { option: { theme: this.theme, ...option }, content }
     }).$mount()
-    registerMessageEl(messageContainer, messageCell.$el, mixinOption(option))
+    mountMessage(messageContainer, messageCell.$el, mixinOption(option))
   },
   info (content, option) {
     option = mixinOption(option)

packages/nimbus/Scaffold/index.js

@@ -1,7 +0,0 @@
-import Scaffold from './src/main.vue'
-
-Scaffold.install = function (Vue) {
-  Vue.component(Scaffold.name, Scaffold)
-}
-
-export default Scaffold

packages/nimbus/Scaffold/src/main.vue

@@ -1,13 +0,0 @@
-<template>
-  <div>example</div>
-</template>
-
-<script>
-export default {
-  name: 'NNimbusScaffold'
-}
-</script>
-
-<style lang="scss" scoped>
-
-</style>

packages/utils/installThemeableProperty.js

@@ -1,28 +1,27 @@
-function getTheme (component) {
+function getTheme (componentInstance, property) {
-  let cursor = component
+  let cursor = componentInstance
   while (cursor.$parent) {
     const name = cursor.$options.name
     if (cursor.synthesizedTheme) {
       return cursor.synthesizedTheme
     }
     if (name === 'NConfigProvider') {
-      return cursor.theme || null
+      return cursor.synthesizedTheme || null
     }
     cursor = cursor.$parent
   }
   return null
 }
 
-function install (Vue, Component, name) {
+function install (Vue, property, name) {
   const prototypeProxy = new Proxy(
     function () {
-      return Component
+      return property
     },
     {
       apply (target, thisArg, argumentsList) {
         if (thisArg instanceof Vue) {
-          Component.theme = getTheme(thisArg)
+          property.theme = getTheme(thisArg, property)
-          // console.log('theme', getTheme(thisArg))
         }
         return target.bind(thisArg)(...argumentsList)
       }

styles/Message.scss

@@ -12,71 +12,72 @@
   }
 }
 
-@include themes-mixin {
+@include b(message-container) {
-  @include b(message-container) {
+  @include once {
-    @include once {
+    position: fixed;
-      position: fixed;
+    left: 0;
-      left: 0;
+    right: 0;
-      right: 0;
+    height: 0;
-      height: 0;
+    overflow: visible;
-      overflow: visible;
+    display: flex;
-      display: flex;
+    flex-direction: column;
-      flex-direction: column;
+    align-items: center;
-      align-items: center;
+  }
-    }
+}
-    @include b(message) {
+
-      @include once {
+@include themes-mixin {
-        display: flex;
+  @include b(message) {
-        transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier,  max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
+    @include once {
-        max-height: 40px;
+      display: flex;
-        opacity: 1;
+      transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier,  max-height .3s $default-cubic-bezier, margin-bottom .3s $default-cubic-bezier;
-        margin-bottom: 12px;
+      max-height: 40px;
-        padding: 0 40px;
+      opacity: 1;
-        height: 40px;
+      margin-bottom: 12px;
-        border-radius: 20px;
+      padding: 0 40px;
-        flex-shrink: 0;
+      height: 40px;
-        font-weight: 700;
+      border-radius: 20px;
-        overflow: hidden;
+      flex-shrink: 0;
-      }
+      font-weight: 700;
-      color: $--message-text-color;
+      overflow: hidden;
-      @include once {
+    }
-        @include e(content) {
+    color: $--message-text-color;
-          display: inline-block;
+    @include once {
-          height: 40px;
+      @include e(content) {
-          line-height: 40px;
+        display: inline-block;
-          font-size: 15px;
+        height: 40px;
-        }
+        line-height: 40px;
-        @include e(icon) {
+        font-size: 15px;
-          margin-right: 10px;
+      }
-          display: inline-flex;
+      @include e(icon) {
-          height: 40px;
+        margin-right: 10px;
-          line-height: 40px;
+        display: inline-flex;
-          align-items: center;
+        height: 40px;
-          i::before {
+        line-height: 40px;
-            font-size: 20px;
+        align-items: center;
-          }
+        i::before {
-        }
+          font-size: 20px;
-      }
+        }
-      @include once {
+      }
-        @include m(enter) {
+    }
-          opacity: 0;
+    @include once {
-          transform: translateY(-12px) scale(.5);
+      @include m(enter) {
-          transform-origin: top center;
+        opacity: 0;
-          max-height: 0px;
+        transform: translateY(-12px) scale(.5);
-          margin-bottom: 0;
+        transform-origin: top center;
-        }
+        max-height: 0px;
-        @include m(leave) {
+        margin-bottom: 0;
-          opacity: 0;
+      }
-          transform-origin: top center;
+      @include m(leave) {
-          transform: translateY(-12px) scale(.5);
+        opacity: 0;
-          max-height: 0px;
+        transform-origin: top center;
-          margin-bottom: 0;
+        transform: translateY(-12px) scale(.5);
-        }
+        max-height: 0px;
-      }
+        margin-bottom: 0;
-      @include message-type-mixin('info');
+      }
-      @include message-type-mixin('success');
+    }
-      @include message-type-mixin('error');
+    @include message-type-mixin('info');
-      @include message-type-mixin('warning');
+    @include message-type-mixin('success');
-    }
+    @include message-type-mixin('error');
+    @include message-type-mixin('warning');
   }
 }