From e8363f9b647dd5d546ae12e4c8ad1edb2d72d0df Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Thu, 22 Oct 2020 19:14:56 +0800 Subject: [PATCH] docs(notification): vue3 --- .../notification/enUS/basic.demo.md | 55 +++++---- .../notification/enUS/change-content.demo.md | 52 ++++---- .../notification/enUS/closable.demo.md | 27 ++--- .../notification/enUS/duration.demo.md | 23 ++-- .../notification/enUS/index.demo-entry.md | 111 +++++++++++------- .../notification/enUS/scrollable.demo.md | 24 ++-- .../components/notification/enUS/type.demo.md | 5 +- .../notification/zhCN/closable.demo.md | 5 - .../notification/zhCN/duration.demo.md | 5 - .../notification/zhCN/index.demo-entry.md | 69 +++++++---- .../notification/zhCN/scrollable.demo.md | 5 - src/notification/src/Notification.vue | 14 +-- 12 files changed, 216 insertions(+), 179 deletions(-) diff --git a/demo/documentation/components/notification/enUS/basic.demo.md b/demo/documentation/components/notification/enUS/basic.demo.md index 5bb61e5cf..31c458c3d 100644 --- a/demo/documentation/components/notification/enUS/basic.demo.md +++ b/demo/documentation/components/notification/enUS/basic.demo.md @@ -1,17 +1,20 @@ # Basic ```html - + Wouldn't it be Nice - + Satisfaction ``` ```js +import { h, resolveComponent } from 'vue' + export default { + inject: ['notification', 'message'], methods: { - notify1 () { - this.$NNotification.open({ + handleClick1 () { + this.notification.create({ title: `Wouldn't it be Nice`, description: 'From the Beach Boys', content: `Wouldn't it be nice if we were older @@ -25,47 +28,43 @@ In the morning when the day is new And after having spent the day together Hold each other close the whole night through`, meta: '2019-5-27 15:11', - avatar: h => - h('n-avatar', { - props: { - size: 'small', - round: true, - src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' - } + avatar: () => + h(resolveComponent('n-avatar'), { + size: 'small', + round: true, + src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' }), - onAfterHide: () => { - this.$NMessage.success(`Wouldn't it be Nice`) + onAfterLeave: () => { + this.message.success(`Wouldn't it be Nice`) }, }) }, - notify2 () { + handleClick2 () { let markAsRead = false - const notification = this.$NNotification.open({ + const notification = this.notification.create({ title: 'Satisfaction', content: `I cant get no satisfaction I cant get no satisfaction Cause I try and I try and I try and I try I cant get no, I cant get no`, meta: '2019-5-27 15:11', - action: h => h( - 'n-button', + action: () => h( + resolveComponent('n-button'), { - props: { - text: true, - type: 'primary' - }, - on: { - click: () => { - markAsRead = true - notification.hide() - } + text: true, + type: 'primary', + onClick: () => { + markAsRead = true + notification.destroy() } }, - ['Mark as Read'] + { + default: () => 'Mark as Read' + } ), onClose: () => { if (!markAsRead) { - this.$NMessage.warning('Please mark as read') + this.message.warning('Please mark as read') return false } } diff --git a/demo/documentation/components/notification/enUS/change-content.demo.md b/demo/documentation/components/notification/enUS/change-content.demo.md index 667d15a3b..579e7a13c 100644 --- a/demo/documentation/components/notification/enUS/change-content.demo.md +++ b/demo/documentation/components/notification/enUS/change-content.demo.md @@ -1,23 +1,28 @@ # Change Content Dynamically You can change any parts of notifications existed. ```html - - Open it - - - Change it - + + + Open it + + + Change it + + ``` ```js +import { h, resolveComponent } from 'vue' + export default { + inject: ['notification'], data () { return { - notification: null + n: null } }, methods: { open () { - this.notification = this.$NNotification.open({ + this.n = this.notification.create({ title: `Wouldn't it be Nice`, description: 'From the Beach Boys', content: `Wouldn't it be nice if we were older @@ -31,36 +36,25 @@ In the morning when the day is new And after having spent the day together Hold each other close the whole night through`, meta: '2019-5-27 15:11', - avatar: h => - h('n-avatar', { - props: { - size: 'small', - round: true, - src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' - } + avatar: () => + h(resolveComponent('n-avatar'), { + size: 'small', + round: true, + src:'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' }), onClose: () => { - this.notification = null + this.n = null } }) }, change () { - if (this.notification) { - this.notification.content = h => h('img', { - attrs: { - src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg' - }, - style: { - width: '100%' - } + if (this.n) { + this.n.content = () => h('img', { + src: 'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg', + style: 'width: 100%;' }) } } } } -``` -```css -.n-button { - margin: 0 12px 8px 0; -} ``` \ No newline at end of file diff --git a/demo/documentation/components/notification/enUS/closable.demo.md b/demo/documentation/components/notification/enUS/closable.demo.md index 4d5ea4faf..a7a94db2f 100644 --- a/demo/documentation/components/notification/enUS/closable.demo.md +++ b/demo/documentation/components/notification/enUS/closable.demo.md @@ -1,28 +1,30 @@ # Unclosable You can make it unclosable. ```html - + Unclosable ``` ```js export default { + inject: ['notification'], methods: { - notify (type) { - this.$NNotification.open({ - title: `Close Me if You Can`, + handleClick () { + const notification = this.notification + notification.create({ + title: 'Close Me if You Can', duration: 2000, closable: false, - onAfterHide: () => { - this.$NNotification.open({ - title: `Ha Ha Ha Ha!`, + onAfterLeave: () => { + notification.create({ + title: 'Ha Ha Ha Ha!', duration: 2000, closable: false, - onAfterHide: () => { - this.$NNotification.open({ + onAfterLeave: () => { + notification.create({ title: `No, You Can't`, duration: 2000, - closable: false, + closable: false }) } }) @@ -32,8 +34,3 @@ export default { } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/demo/documentation/components/notification/enUS/duration.demo.md b/demo/documentation/components/notification/enUS/duration.demo.md index 42ea490e1..493179252 100644 --- a/demo/documentation/components/notification/enUS/duration.demo.md +++ b/demo/documentation/components/notification/enUS/duration.demo.md @@ -1,21 +1,23 @@ # Duration Auto close. ```html - + Duration: 10000 ``` + ```js export default { + inject: ['notification'], methods: { - notify (type) { + handleClick () { let count = 10 - const notification = this.$NNotification.open({ - title: `What is Pingshan Road + rain ?`, + const notification = this.notification.create({ + title: 'What is Pingshan Road + rain ?', content: `You have ${count} seconds to answer the question.`, duration: 10000, closable: false, - onAfterShow: () => { + onAfterEnter: () => { const minusCount = () => { count-- notification.content = `You have ${count} seconds to answer the question.` @@ -25,9 +27,9 @@ export default { } window.setTimeout(minusCount, 1000) }, - onAfterHide: () => { - this.$NNotification.open({ - title: `The Answer is Pingshan River!`, + onAfterLeave: () => { + this.notification.create({ + title: 'The Answer is Pingshan River!', content: 'Oops, that is not even an anti-humor.', duration: 10000 }) @@ -37,8 +39,3 @@ export default { } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/demo/documentation/components/notification/enUS/index.demo-entry.md b/demo/documentation/components/notification/enUS/index.demo-entry.md index 9b3b1ca32..784844964 100644 --- a/demo/documentation/components/notification/enUS/index.demo-entry.md +++ b/demo/documentation/components/notification/enUS/index.demo-entry.md @@ -1,7 +1,36 @@ # Notification If something is to be telled to somebody. -UI has designed it long long ago. However, you know, notification component is always with low piority so I can make a lot of useless animations on it. +Notification component is always with low piority so I can make a lot of useless animations on it. + + + + If you want use notification, you need to wrap the component where you call related methods inside n-nofitication-provider and inject nofitication. + +For example: + +```html + + + + +``` + +```js +// content +export default { + inject: ['nofitication'], + methods: { + notify () { + this.nofitication.create( + // ... + ) + } + } +} +``` + + ## Demos ```demo basic @@ -11,58 +40,60 @@ scrollable closable duration ``` -## API -### $NNotification Methods -|Name|Type|Description| -|-|-|-| -|theme|`'light' \| 'dark'`||| -|open|`(option: NotificationOption, type: string = 'default') => NotificationEnvironment`|`type` can be `'default'`, `'warning'`, `'info'`, `'success'` and `'error'`| -|success|`(option: NofiticationOption) => NotificationEnvironment`|| -|info|`(option: NofiticationOption) => NotificationEnvironment`|| -|warning|`(option: NofiticationOption) => NotificationEnvironment`|| -|error|`(option: NofiticationOption) => NotificationEnvironment`|| -### $Notification Properties +## API +### NotificationProvider Props |Name|Type|Default|Description| |-|-|-|-| -|scrollable|`boolean`|`false`|| +|scrollable|`boolean`|`true`|| +|to|`string \| HTMLElement`|`'body'`|| + +### `notification` Injection Methods +|Name|Type|Description| +|-|-|-| +|create|`(option: NotificationOption) => NotificationReactive`|| +|error|`(option: NotificationOption) => NotificationReactive`|| +|info|`(option: NotificationOption) => NotificationReactive`|| +|success|`(option: NotificationOption) => NotificationReactive`|| +|warning|`(option: NotificationOption) => NotificationReactive`|| ### NotificationOption Properties |Name|Type|Default|Description| |-|-|-|-| -|theme|`'light' \| 'dark'`|`null`|If set it will be used as the theme of notification. (It works nearly the same as $NMessage's theme, and in most cases you don't need to set the property.)| -|avatar|`() => VNode \| Array`|`null`|Can be a render function| -|title|`string \| (() => VNode \| Array)`|`null`|Can be a render function| -|description|`string \| (() => VNode \| Array)`|`null`|Can be a render function| -|content|`string \| (() => VNode \| Array)`|`null`|Can be a render function| -|meta|`string \| (() => VNode \| Array)`|`null`|Can be a render function| -|action|`string \| (() => VNode \| Array)`|`null`|Can be a render function| +|action|`string \| (() => VNode \| Array)`|`undefined`|Can be a render function.| +|avatar|`() => VNode \| Array`|`undefined`|Can be a render function.| |closable|`boolean`|`true`|| -|onClose|`() => boolean \| Promise \| any`|`() => {}`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.| -|onAfterHide|`Function`|`null`|| -|onAfterShow|`Function`|`null`|| -|duration|`number`|`null`|If not set, it won't automatically close. Unit is millisecond.| +|content|`string \| (() => VNode \| Array)`|`undefined`|Can be a render function.| +|description|`string \| (() => VNode \| Array)`|`undefined`|Can be a render function.| +|duration|`number`|`undefined`|If not set, it won't automatically close. Unit is millisecond.| +|meta|`string \| (() => VNode \| Array)`|`undefined`|Can be a render function.| +|theme|`'light' \| 'dark' \| null \| string`|`null`|| +|title|`string \| (() => VNode \| Array)`|`undefined`|Can be a render function.| +|onAfterEnter|`Function`|`undefined`|| +|onAfterLeave|`Function`|`undefined`|| +|onClose|`() => boolean \| Promise`|`undefined`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.| +|onLeave|`Function`||| -### NotificationEnvironment API -#### NotificationEnvironment Properties -Properties of NofiticationEnvironment Instance can be dynamically set. +### NotificationReactive API +#### NotificationReactive Properties +Properties of NotificationReactive can be dynamically changed. |Name|Type|Description| |-|-|-| -|theme|`'light' \| 'dark'`|If set it will be used as the theme of notification. (It works nearly the same as $NMessage's theme, and in most cases you don't need to set the property.)| -|avatar|`() => VNode \| Array`|Can be a render function| -|title|`string \| (() => VNode \| Array)`|Can be a render function| -|description|`string \| (() => VNode \| Array)`|Can be a render function| -|content|`string \| (() => VNode \| Array)`|Can be a render function| -|meta|`string \| (() => VNode \| Array)`|Can be a render function| -|action|`string \| (() => VNode \| Array)`|Can be a render function| +|action|`string \| (() => VNode \| Array)`|Can be a render function.| +|avatar|`() => VNode \| Array`|Can be a render function.| |closable|`boolean`|| -|onClose|`(next: function) => any`|Callback when close button is clicked. Only if next is called notification will close| -|onHide|`Function`|| -|onAfterHide|`Function`|| -|onAfterShow|`Function`|| +|content|`string \| (() => VNode \| Array)`|Can be a render function.| +|description|`string \| (() => VNode \| Array)`|Can be a render function.| +|meta|`string \| (() => VNode \| Array)`|Can be a render function.| +|theme|`'light' \| 'dark' \| null \| string`|| +|title|`string \| (() => VNode \| Array)`|Can be a render function.| +|onAfterEnter|`Function`|| +|onAfterLeave|`Function`|| +|onClose|`() => boolean \| Promise`|The callback of notification closing. Returning `false`, promise resolve `false` or promise reject will cancel this closing.| +|onLeave|`Function`|| -#### NotificationEnvironment Methods +#### NotificationReactive Methods |Name|Type|Description| |-|-|-| -|hide|`()`|| \ No newline at end of file +|destroy|`()`|Destroy the notification| diff --git a/demo/documentation/components/notification/enUS/scrollable.demo.md b/demo/documentation/components/notification/enUS/scrollable.demo.md index 5ac9edb28..717dbcb6f 100644 --- a/demo/documentation/components/notification/enUS/scrollable.demo.md +++ b/demo/documentation/components/notification/enUS/scrollable.demo.md @@ -1,22 +1,28 @@ # Scrollable -If there are too many notifications, you can make them scrollable by setting `$NNotification.scrollable = true`. However, in that case they will overlay a bit more area than them look, which will block some mouse events near notifications. If you don't want the feature, simply not set it. +If there are too many notifications, notifications container can be scrollable. However, in that case they will overlay a bit more area than them look, which will block some mouse events near notifications. If you don't want the feature, you can set `` to make it unscrollable. Change the property will cause all existing notifications to be cleaned, so please make sure you change this property at proper time. ```html -Scrollable(Open some notifications after click) -Unscrollable +See how it scrolls ``` ```js export default { + inject: ['notification'], methods: { handleClick (scrollable) { - this.$NNotification.scrollable = scrollable + Array.apply(null, { length: 5 }).forEach( + notification => this.notification.create({ + title: 'Many Notifications', + content: `Try to scroll +Try to scroll +Try to scroll +Try to scroll +Try to scroll +Try to scroll +Try to scroll` + }) + ) } } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/demo/documentation/components/notification/enUS/type.demo.md b/demo/documentation/components/notification/enUS/type.demo.md index 65036a726..ca90fedfa 100644 --- a/demo/documentation/components/notification/enUS/type.demo.md +++ b/demo/documentation/components/notification/enUS/type.demo.md @@ -15,9 +15,10 @@ ``` ```js export default { + inject: ['notification'], methods: { notify (type) { - this.$NNotification[type]({ + this.notification[type]({ content: `What to say?`, meta: 'I don\'t know' }) @@ -29,4 +30,4 @@ export default { .n-button { margin: 0 12px 8px 0; } -``` \ No newline at end of file +``` diff --git a/demo/documentation/components/notification/zhCN/closable.demo.md b/demo/documentation/components/notification/zhCN/closable.demo.md index b3e4b1fa8..8e70643fa 100644 --- a/demo/documentation/components/notification/zhCN/closable.demo.md +++ b/demo/documentation/components/notification/zhCN/closable.demo.md @@ -34,8 +34,3 @@ export default { } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/demo/documentation/components/notification/zhCN/duration.demo.md b/demo/documentation/components/notification/zhCN/duration.demo.md index 8a1b637bc..4991cae4c 100644 --- a/demo/documentation/components/notification/zhCN/duration.demo.md +++ b/demo/documentation/components/notification/zhCN/duration.demo.md @@ -38,8 +38,3 @@ export default { } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/demo/documentation/components/notification/zhCN/index.demo-entry.md b/demo/documentation/components/notification/zhCN/index.demo-entry.md index c25217203..1ffb5cca8 100644 --- a/demo/documentation/components/notification/zhCN/index.demo-entry.md +++ b/demo/documentation/components/notification/zhCN/index.demo-entry.md @@ -1,7 +1,36 @@ # 通知 Notification 通知某人。 -UI 同志很早就设计完了。但是，你也知道，像是通知组件这种东西优先级不那么高，所以我可以弄一堆没什么用的动画上去。 +像是通知组件这种东西优先级不那么高，所以我可以弄一堆没什么用的动画上去。 + + + + 如果你想使用通知，你需要把调用其方法的组件放在 n-nofitication-provider 内部并且注入 nofitication。 + +例如： + +```html + + + + +``` + +```js +// content +export default { + inject: ['nofitication'], + methods: { + nofity () { + this.nofitication.create( + // ... + ) + } + } +} +``` + + ## 演示 ```demo basic @@ -18,37 +47,35 @@ duration |scrollable|`boolean`|`true`|| |to|`string \| HTMLElement`|`'body'`|| -### NotificationProvider Injection API -#### NotificationProvider Injection Methods +### `notification` Injection Methods |名称|类型|说明| |-|-|-| |create|`(option: NotificationOption) => NotificationReactive`|| -|success|`(option: NotificationOption) => NotificationReactive`|| -|info|`(option: NotificationOption) => NotificationReactive`|| -|warning|`(option: NotificationOption) => NotificationReactive`|| |error|`(option: NotificationOption) => NotificationReactive`|| +|info|`(option: NotificationOption) => NotificationReactive`|| +|success|`(option: NotificationOption) => NotificationReactive`|| +|warning|`(option: NotificationOption) => NotificationReactive`|| -### NotificationOption API -#### NotificationOption Properties +### NotificationOption Properties |名称|类型|默认值|说明| |-|-|-|-| -|action|`string \| (() => VNode \| Array)`|`null`|可以是 render 函数| -|avatar|`() => VNode \| Array`|`null`|可以是 render 函数| +|action|`string \| (() => VNode \| Array)`|`undefined`|可以是 render 函数| +|avatar|`() => VNode \| Array`|`undefined`|可以是 render 函数| |closable|`boolean`|`true`|| -|content|`string \| (() => VNode \| Array)`|`null`|可以是 render 函数| -|description|`string \| (() => VNode \| Array)`|`null`|可以是 render 函数| -|duration|`number`|`null`|如果没有设定则不会自动关闭，单位毫秒| -|meta|`string \| (() => VNode \| Array)`|`null`|可以是 render 函数| +|content|`string \| (() => VNode \| Array)`|`undefined`|可以是 render 函数| +|description|`string \| (() => VNode \| Array)`|`undefined`|可以是 render 函数| +|duration|`number`|`undefined`|如果没有设定则不会自动关闭，单位毫秒| +|meta|`string \| (() => VNode \| Array)`|`undefined`|可以是 render 函数| |theme|`'light' \| 'dark' \| null \| string`|`null`|| -|title|`string \| (() => VNode \| Array)`|`null`|可以是 render 函数| -|onAfterEnter|`Function`|`null`|| -|onAfterLeave|`Function`|`null`|| -|onClose|`() => boolean \| Promise`|`() => {}`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭| -|onLeave|`Function`|| +|title|`string \| (() => VNode \| Array)`|`undefined`|可以是 render 函数| +|onAfterEnter|`Function`|`undefined`|| +|onAfterLeave|`Function`|`undefined`|| +|onClose|`() => boolean \| Promise`|`undefined`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭| +|onLeave|`Function`|`undefined`|| ### NotificationReactive API #### NotificationReactive Properties -NofiticationEnvironment 实例的属性可以被动态改变。 +NotificationReactive 实例的属性可以被动态改变。 |名称|类型|说明| |-|-|-| @@ -62,7 +89,7 @@ NofiticationEnvironment 实例的属性可以被动态改变。 |title|`string \| (() => VNode \| Array)`|可以是 render 函数| |onAfterEnter|`Function`|| |onAfterLeave|`Function`|| -|onClose|`() => boolean \| Promise`|`() => {}`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭| +|onClose|`() => boolean \| Promise`|关闭通知的回调。返回 `false`、Promise resolve `false` 或者 reject 会取消这次关闭| |onLeave|`Function`|| #### NotificationReactive Methods diff --git a/demo/documentation/components/notification/zhCN/scrollable.demo.md b/demo/documentation/components/notification/zhCN/scrollable.demo.md index 213e7a746..1e02d41ed 100644 --- a/demo/documentation/components/notification/zhCN/scrollable.demo.md +++ b/demo/documentation/components/notification/zhCN/scrollable.demo.md @@ -26,8 +26,3 @@ export default { } } ``` -```css -.n-button { - margin: 0 12px 8px 0; -} -``` \ No newline at end of file diff --git a/src/notification/src/Notification.vue b/src/notification/src/Notification.vue index fa5824b08..e2e33c194 100644 --- a/src/notification/src/Notification.vue +++ b/src/notification/src/Notification.vue @@ -97,31 +97,31 @@ export default { }, avatar: { type: Function, - default: null + default: undefined }, title: { type: [String, Function], - default: null + default: undefined }, description: { type: [String, Function], - default: null + default: undefined }, content: { type: [String, Function], - default: null + default: undefined }, meta: { type: [String, Function], - default: null + default: undefined }, action: { type: Function, - default: null + default: undefined }, onClose: { type: Function, - default: () => {} + required: true } }, computed: {