feat(message): closable

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

@@ -0,0 +1,23 @@
+# Closable
+Set `closable` to make message closable by a click.
+```html
+<n-button @click="emitInfo">
+  Open a Message
+</n-button>
+```
+
+```js
+export default {
+  methods: {
+    emitInfo() {
+      this.$NMessage.success(
+        "I don't know why nobody told you how to unfold your love",
+        {
+          closable: true,
+          duration: 5000
+        }
+      )
+    }
+  }
+}
+```

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

@@ -5,6 +5,7 @@ Oracle from the top(always) of the browser.
 basic
 icon
 timing
+closable
 modify-content
 manually-close
 about-theme
@@ -26,6 +27,7 @@ about-theme
 |content|`string \|(() => VNode \| Array<VNode>)`|Can be a render function|
 |icon|`() => VNode`|Can be a render function|
 |theme|`'light' \| 'dark'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 
@@ -36,6 +38,7 @@ about-theme
 |content|`string \| (() => VNode \| Array<VNode>)`|Can be a render function|
 |icon|`string \| (() => VNode)`|Can be a render function|
 |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 

demo/documentation/components/message/zhCN/closable.md

@@ -0,0 +1,23 @@
+# 可关闭
+设定 `closable` 使 Message 可以通过点击关闭。
+```html
+<n-button @click="emitInfo">
+  打开信息
+</n-button>
+```
+
+```js
+export default {
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love",
+        {
+          closable: true,
+          duration: 5000
+        }
+      )
+    }
+  }
+}
+```

demo/documentation/components/message/zhCN/index.md

@@ -5,6 +5,7 @@
 basic
 icon
 timing
+closable
 modify-content
 manually-close
 about-theme
@@ -26,6 +27,7 @@ about-theme
 |content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
 |icon|`() => VNode`|可以是 render 函数|
 |theme|`'light' \| 'dark'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 
@@ -36,6 +38,7 @@ about-theme
 |content|`string \| (() => VNode \| Array<VNode>)`|可以是 render 函数|
 |icon|`string \| (() => VNode)`|可以是 render 函数|
 |type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`||
+|closable|`boolean`||
 |onHide|`function`||
 |onAfterHide|`function`||
 

src/Message/src/Message.vue

@@ -4,6 +4,7 @@ import mdCheckmarkCircle from '../../_icons/md-checkmark-circle'
 import mdAlert from '../../_icons/md-alert'
 import mdInformationCircle from '../../_icons/md-information-circle'
 import mdCloseCircle from '../../_icons/md-close-circle'
+import mdClose from '../../_icons/md-close'
 import NBaseLoading from '../../_base/Loading'
 import IconSwitchTransition from '../../_transition/IconSwitchTransition'
 import render from '../../_utils/vue/render'
@@ -25,11 +26,20 @@ export default {
       type: [String, Function],
       default: null
     },
+    closable: {
+      type: Boolean,
+      default: false
+    },
     theme: {
       type: String,
       default: null
     }
   },
+  methods: {
+    handleCloseClick () {
+      this.$emit('close')
+    }
+  },
   render (h) {
     let icon = null
     if (this.icon) {
@@ -63,6 +73,7 @@ export default {
     return h('div', {
       staticClass: 'n-message',
       class: {
+        'n-message--closable': this.closable,
         [`n-message--${this.type}-type`]: true,
         [`n-${this.theme}-theme`]: this.theme
       }
@@ -88,7 +99,20 @@ export default {
             render: this.content
           }
         })
-      ])
+      ]),
+      this.closable
+        ? h('div', {
+          staticClass: 'n-message__close'
+        }, [
+          h(NIcon, {
+            nativeOn: {
+              click: this.handleCloseClick
+            }
+          }, [
+            h(mdClose)
+          ])
+        ])
+        : null
     ])
   }
 }

src/Message/src/MessageEnvironment.vue

@@ -14,12 +14,14 @@ export default {
   },
   data () {
     return {
+      timerId: null,
       active: true,
       inheritedTheme: null,
       theme: null,
       content: null,
       type: null,
       icon: null,
+      closable: false,
       onHide: () => {},
       onAfterHide: () => {}
     }
@@ -31,14 +33,20 @@ export default {
   },
   mounted () {
     if (this.duration) {
-      window.setTimeout(this.hide, this.duration)
+      this.timerId = window.setTimeout(this.hide, this.duration)
     }
   },
   methods: {
     hide () {
       this.active = false
+      if (this.timerId) {
+        window.clearTimeout(this.timerId)
+      }
       this.onHide()
     },
+    handleClose () {
+      this.hide()
+    },
     deactivate () {
       this.hide()
     },
@@ -61,11 +69,15 @@ export default {
       [
         this.active
           ? h(NMessage, {
+            on: {
+              close: this.handleClose
+            },
             props: {
               theme: this.syntheticTheme,
               content: this.content,
               type: this.type,
-              icon: this.icon
+              icon: this.icon,
+              closable: this.closable
             }
           }) : null
       ]

src/Message/src/MessagePlugin.js

@@ -50,6 +50,7 @@ function updateMessage (instance, content, option) {
   instance.type = option.type
   instance.content = content
   instance.theme = option.theme
+  instance.closable = option.closable
   instance.inheritedTheme = option.inheritedTheme
 }
 

styles/Message.scss

@@ -11,6 +11,23 @@
         stroke: $--message-icon-color;
       }
     }
+    @if $type == 'loading' {
+      @include e(close) {
+        @include b(icon) {
+          cursor: pointer;
+          fill: map-get($--message-loading-close-color, 'default');
+          stroke: map-get($--message-loading-close-color, 'default');
+          &:hover {
+            fill: map-get($--message-loading-close-color, 'hover');
+            stroke: map-get($--message-loading-close-color, 'hover');
+          }
+          &:active {
+            fill: map-get($--message-loading-close-color, 'active');
+            stroke: map-get($--message-loading-close-color, 'active');
+          }
+        }
+      }
+    }
   }
 }
 
@@ -81,6 +98,31 @@
           font-size: 20px;
         }
       }
+      @include e(close) {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        font-size: 19px;
+        margin-left: 12px;
+      }
+    }
+    @include e(close) {
+      @include b(icon) {
+        cursor: pointer;
+        fill: map-get($--message-close-color, 'default');
+        stroke: map-get($--message-close-color, 'default');
+        &:hover {
+          fill: map-get($--message-close-color, 'hover');
+          stroke: map-get($--message-close-color, 'hover');
+        }
+        &:active {
+          fill: map-get($--message-close-color, 'active');
+          stroke: map-get($--message-close-color, 'active');
+        }
+      }
+    }
+    @include m(closable) {
+      padding-right: 24px;
     }
     @include message-type-mixin('info');
     @include message-type-mixin('success');

styles/themes/dark/components/Message.scss

@@ -7,6 +7,16 @@
     "loading": $--n-secondary-text-color
   ) !global;
   $--message-icon-color: rgba(255, 255, 255, .5) !global;
+  $--message-close-color: (
+    "default": rgba(255, 255, 255, .5),
+    "hover": rgba(255, 255, 255, .6),
+    "active": rgba(255, 255, 255, .4)
+  ) !global;
+  $--message-loading-close-color: (
+    "default": rgba(255, 255, 255, .5),
+    "hover": rgba(255, 255, 255, .6),
+    "active": rgba(255, 255, 255, .4)
+  ) !global;
   $--message-background-color: (
     "info": $--n-info-hs-color,
     "success": $--n-success-hs-color,

styles/themes/light/components/Message.scss

@@ -7,6 +7,16 @@
     "loading": $--n-secondary-text-color
   ) !global;
   $--message-icon-color: rgba(255, 255, 255, .45) !global;
+  $--message-close-color: (
+    "default": rgba(255, 255, 255, .5),
+    "hover": rgba(255, 255, 255, .6),
+    "active": rgba(255, 255, 255, .4)
+  ) !global;
+  $--message-loading-close-color: (
+    'default': $--n-close-color,
+    'hover': $--n-close-hover-color,
+    'active': $--n-close-color
+  ) !global;
   $--message-background-color: (
     "info": $--n-info-color,
     "success": $--n-success-color,