doc(message)

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

@@ -10,17 +10,18 @@ manually-close
 about-theme
 ```
 ## API
-### $NMessage API
-|Property|Type|Description|
+### $NMessage Methods
+|Name|Type|Description|
 |-|-|-|
-|info|`(option: MessageOption) : MessageEnvironment`||
-|success|`(option: MessageOption) : MessageEnvironment`||
-|warning|`(option: MessageOption) : MessageEnvironment`||
-|error|`(option: MessageOption) : MessageEnvironment`||
-|loading|`(option: MessageOption) : MessageEnvironment`||
+|-|-|-|
+|info|`(message: string, option?: MessageOption) : MessageEnvironment`||
+|success|`(message: string, option?: MessageOption) : MessageEnvironment`||
+|warning|`(message: string, option?: MessageOption) : MessageEnvironment`||
+|error|`(message: string, option?: MessageOption) : MessageEnvironment`||
+|loading|`(message: string, option?: MessageOption) : MessageEnvironment`||
 
-### MessageOption API
-|Property|Type|Description|
+### MessageOption Type
+|Name|Type|Description|
 |-|-|-|
 |content|`string \| function`|Can be a render function|
 |icon|`string \| function`|Can be a render function|
@@ -29,7 +30,7 @@ about-theme
 
 ### MessageEnvironment API
 #### MessageEnvironment Properties
-|Property|Type|Description|
+|Name|Type|Description|
 |-|-|-|
 |content|`string \| function`|Can be a render function|
 |icon|`string \| function`|Can be a render function|
@@ -38,6 +39,6 @@ about-theme
 |onAfterHide|`function`||
 
 #### MessageEnvironment Methods
-|Method|Type|Description|
+|Name|Type|Description|
 |-|-|-|
 |hide|`()`||

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

@@ -0,0 +1,23 @@
+# 关于主题的注意事项
+无论你在什么位置调用 `this.$NMessage` 来生成一个信息，如果你不明确指明主题，被创建信息的主题会遵从这个组件最靠外层的一个祖先 Config Provider 的主题。如果调用信息的主题和当前组件主题一致的话可能会造成混乱。
+```html
+<n-button @click="emitInfo">
+  你可以在 Message 还在的时候切换主题
+</n-button>
+```
+
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love",
+        { duration: 5000 }
+      )
+    }
+  }
+}
+```

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

@@ -0,0 +1,53 @@
+# 基础用法
+```html
+<n-button @click="emitInfo">
+  信息
+</n-button>
+<n-button @click="emitError">
+  错误
+</n-button>
+<n-button @click="emitWarning">
+  警告
+</n-button>
+<n-button @click="emitSuccess">
+  成功
+</n-button>
+<n-button @click="emitLoading">
+  加载中
+</n-button>
+```
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love"
+      )
+    },
+    emitError() {
+      this.$NMessage.error("Once upon a time you dressed so fine")
+    },
+    emitWarning() {
+      this.$NMessage.warning("How many roads must a man walk down")
+    },
+    emitSuccess() {
+      this.$NMessage.success(
+        "'Cause you walked hand in hand With another man in my place"
+      )
+    },
+    emitLoading() {
+      this.$NMessage.loading(
+        "If I were you, I will realize that I love you more than any other guy"
+      )
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

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

@@ -0,0 +1,27 @@
+# 图标
+```html
+<n-button @click="emitMessage">
+  漏斗图标
+</n-button>
+```
+```js
+import mdHourglass from 'naive-ui/lib/icons/md-hourglass'
+
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitMessage() {
+      this.$NMessage.warning("I never needed anybody's help in any way", {
+        icon: h => h(mdHourglass)
+      })
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0
+}
+```

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

@@ -1 +1,44 @@
-# Message
+# 信息 Message
+从浏览器（一般是）顶部降下来的神谕。
+## 演示
+```demo
+basic
+icon
+timing
+modify-content
+manually-close
+about-theme
+```
+
+## API
+### $NMessage Methods
+|名称|类型|介绍|
+|-|-|-|
+|info|`(content: string, option?: MessageOption) : MessageEnvironment`||
+|success|`(content: string, option?: MessageOption) : MessageEnvironment`||
+|warning|`(content: string, option?: MessageOption) : MessageEnvironment`||
+|error|`(content: string, option?: MessageOption) : MessageEnvironment`||
+|loading|`(content: string, option?: MessageOption) : MessageEnvironment`||
+
+### MessageOption Type
+|名称|类型|介绍|
+|-|-|-|
+|content|`string \| function`|Can be a render function|
+|icon|`string \| function`|Can be a render function|
+|onHide|`function`||
+|onAfterHide|`function`||
+
+### MessageEnvironment API
+#### MessageEnvironment Properties
+|名称|类型|介绍|
+|-|-|-|
+|content|`string \| function`|Can be a render function|
+|icon|`string \| function`|Can be a render function|
+|type|`'info' \| 'success' \| 'warning' \| 'error' \| 'loading'`||
+|onHide|`function`||
+|onAfterHide|`function`||
+
+#### MessageEnvironment Methods
+|名称|类型|介绍|
+|-|-|-|
+|hide|`()`||

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

@@ -0,0 +1,41 @@
+# 手动关闭
+```html
+<n-button @click="openMessage">
+  打开
+</n-button>
+<n-button @click="closeMessage">
+  关闭
+</n-button>
+```
+```js
+export default {
+  data() {
+    return {
+      message: null
+    }
+  },
+  beforeDestroy () {
+    this.closeMessage()
+  },
+  methods: {
+    openMessage () {
+      if (!this.message) {
+        this.message = this.$NMessage.info('3 * 3 * 4 * 4 * ?', {
+          duration: 0
+        })
+      }
+    },
+    closeMessage () {
+      if (this.message) {
+        this.message.hide()
+        this.message = null
+      }
+    }
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0
+}
+```

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

@@ -0,0 +1,49 @@
+# 修改创建的信息
+```html
+<n-button @click="createMessage">
+  先开个信息
+</n-button>
+<n-button @click="changeType">改变类型</n-button>
+<n-button @click="plus">加一</n-button>
+```
+```js
+export default {
+  data() {
+    return {
+      count: 0,
+      typeIndex: 0,
+      types: ['success', 'info', 'warning', 'error', 'loading'],
+      message: null
+    }
+  },
+  computed: {
+    type () {
+      return this.types[this.typeIndex]
+    }
+  },
+  methods: {
+    plus () {
+      if (this.message) {
+        this.count++
+        this.message.content = '' + this.count
+      }
+    },
+    changeType () {
+      if (this.message) {
+        this.typeIndex = (this.typeIndex + 1) % this.types.length
+        this.message.type = this.type
+      }
+    },
+    createMessage() {
+      this.message = this.$NMessage[this.type](
+        '' + this.count, { duration: 10000 }
+      )
+    },
+  }
+}
+```
+```css
+.n-button {
+  margin: 0 12px 8px 0;
+}
+```

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

@@ -0,0 +1,23 @@
+# 时间
+设定 Message 的持续时间。
+```html
+<n-button @click="emitInfo">
+  持续 5 秒
+</n-button>
+```
+
+```js
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    emitInfo() {
+      this.$NMessage.info(
+        "I don't know why nobody told you how to unfold your love",
+        { duration: 5000 }
+      )
+    }
+  }
+}
+```

packages/common/Message/src/Message.vue

@@ -6,6 +6,7 @@ import mdInformationCircle from '../../../icons/md-information-circle'
 import mdCloseCircle from '../../../icons/md-close-circle'
 import NBaseLoading from '../../../base/Loading'
 import IconSwitchTransition from '../../../transition/IconSwitchTransition'
+import render from '../../../utils/render'
 
 export default {
   props: {
@@ -18,8 +19,8 @@ export default {
       default: 'default'
     },
     content: {
-      type: String,
-      default: ''
+      type: [String, Function],
+      default: null
     },
     theme: {
       type: String,
@@ -51,7 +52,7 @@ export default {
       icon = h(NBaseLoading, {
         props: {
           theme: this.theme,
-          strokeWidth: 6
+          strokeWidth: 24
         },
         key: 'loading'
       })
@@ -78,7 +79,13 @@ export default {
       ]),
       h('div', {
         staticClass: 'n-message__content'
-      }, this.content)
+      }, [
+        h(render, {
+          props: {
+            render: this.content
+          }
+        })
+      ])
     ])
   }
 }

think.md

@@ -123,6 +123,7 @@ Chrome lightbar offset @table fitler
 cascader
 form required css
 anchor 还是有点问题 bound 不够的时候切换
+modal transform scale
 
 // pref hollowout, cache next bg color
 // issue fix, add delay prop