From 4e0e80992cc4fa0f6317b94d963f06202704c349 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 27 Sep 2020 13:53:16 +0800 Subject: [PATCH] refactor(dialog): support vue3 --- .eslintrc.js | 3 +- demo/Entry.vue | 22 ++--- demo/Header.vue | 4 +- .../components/confirm/zhCN/async.demo.md | 33 -------- .../{confirm => dialog}/enUS/async.demo.md | 0 .../{confirm => dialog}/enUS/basic.demo.md | 0 .../enUS/index.demo-entry.md | 0 .../enUS/use-component.demo.md | 0 .../{confirm => dialog}/index.entry | 0 .../components/dialog/zhCN/async.demo.md | 44 ++++++++++ .../{confirm => dialog}/zhCN/basic.demo.md | 22 +++-- .../zhCN/index.demo-entry.md | 26 +++--- .../zhCN/use-component.demo.md | 11 ++- .../components/modal/enUS/index.demo-entry.md | 12 +-- .../components/modal/zhCN/index.demo-entry.md | 15 ++-- .../popconfirm/zhCN/index.demo-entry.md | 6 +- demo/menu-options.js | 10 +-- demo/routes/routes.js | 4 +- src/confirm/index.js | 14 ---- src/confirm/src/ConfirmPlugin.js | 83 ------------------- src/dialog/index.js | 12 +++ .../src/Confirm.vue => dialog/src/Dialog.vue} | 76 ++++++++++------- .../src/DialogEnvironment.vue} | 79 +++++++++--------- src/dialog/src/DialogProvider.js | 76 +++++++++++++++++ src/{confirm => dialog}/src/styles/index.js | 0 .../src/styles/themed-base.cssr.js | 0 src/{confirm => dialog}/styles/dark.js | 2 +- src/{confirm => dialog}/styles/light.js | 2 +- src/index.js | 12 +-- src/message/src/MessageEnvironment.js | 24 +++--- src/message/src/MessageProvider.js | 3 +- src/modal/src/BodyWrapper.vue | 13 ++- src/modal/src/Modal.js | 77 +++++++++++------ src/popconfirm/src/Popconfirm.js | 34 +++----- vue3.md | 9 +- 35 files changed, 384 insertions(+), 344 deletions(-) delete mode 100644 demo/documentation/components/confirm/zhCN/async.demo.md rename demo/documentation/components/{confirm => dialog}/enUS/async.demo.md (100%) rename demo/documentation/components/{confirm => dialog}/enUS/basic.demo.md (100%) rename demo/documentation/components/{confirm => dialog}/enUS/index.demo-entry.md (100%) rename demo/documentation/components/{confirm => dialog}/enUS/use-component.demo.md (100%) rename demo/documentation/components/{confirm => dialog}/index.entry (100%) create mode 100644 demo/documentation/components/dialog/zhCN/async.demo.md rename demo/documentation/components/{confirm => dialog}/zhCN/basic.demo.md (67%) rename demo/documentation/components/{confirm => dialog}/zhCN/index.demo-entry.md (86%) rename demo/documentation/components/{confirm => dialog}/zhCN/use-component.demo.md (66%) delete mode 100644 src/confirm/index.js delete mode 100644 src/confirm/src/ConfirmPlugin.js create mode 100644 src/dialog/index.js rename src/{confirm/src/Confirm.vue => dialog/src/Dialog.vue} (71%) rename src/{confirm/src/ConfirmEnvironment.vue => dialog/src/DialogEnvironment.vue} (55%) create mode 100644 src/dialog/src/DialogProvider.js rename src/{confirm => dialog}/src/styles/index.js (100%) rename src/{confirm => dialog}/src/styles/themed-base.cssr.js (100%) rename src/{confirm => dialog}/styles/dark.js (97%) rename src/{confirm => dialog}/styles/light.js (97%) diff --git a/.eslintrc.js b/.eslintrc.js index 99a6b42ad..3656bf639 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,7 +15,8 @@ module.exports = { } ], 'vue/no-template-key': 0, - 'vue/valid-template-root': 0 + 'vue/valid-template-root': 0, + 'vue/valid-v-model': 0 }, overrides: [ { diff --git a/demo/Entry.vue b/demo/Entry.vue index 665ed6853..fd93743f5 100644 --- a/demo/Entry.vue +++ b/demo/Entry.vue @@ -7,17 +7,19 @@ > - - - - + + + + + + - + diff --git a/demo/Header.vue b/demo/Header.vue index fda170218..c6ea3b755 100644 --- a/demo/Header.vue +++ b/demo/Header.vue @@ -75,7 +75,7 @@ {{ modeOptions[mode].label }} @@ -165,7 +165,7 @@ export default { }, zIndex () { const path = this.$route.path - return (path.endsWith('n-modal') || path.endsWith('n-drawer') || path.endsWith('n-confirm')) ? null : 3000 + return (path.endsWith('n-modal') || path.endsWith('n-drawer') || path.endsWith('n-dialog')) ? null : 3000 }, theme () { return 'light' diff --git a/demo/documentation/components/confirm/zhCN/async.demo.md b/demo/documentation/components/confirm/zhCN/async.demo.md deleted file mode 100644 index 906314950..000000000 --- a/demo/documentation/components/confirm/zhCN/async.demo.md +++ /dev/null @@ -1,33 +0,0 @@ -# 异步 -确认可以异步。 -```html - - 成功 - -``` - -```css -.n-button { - margin: 0 12px 8px 0; -} -``` - -```js -export default { - methods: { - handleClick(e) { - const confirmInstance = this.$NConfirm.success({ - title: '异步', - content: - '点击，倒计时 3 秒', - positiveText: '确认', - onPositiveClick: () => { - confirmInstance.loading = true - this.$NMessage.success('倒计时 3 秒') - return new Promise(resolve => window.setTimeout(() => resolve(true), 3000)) - } - }) - } - } -} -``` diff --git a/demo/documentation/components/confirm/enUS/async.demo.md b/demo/documentation/components/dialog/enUS/async.demo.md similarity index 100% rename from demo/documentation/components/confirm/enUS/async.demo.md rename to demo/documentation/components/dialog/enUS/async.demo.md diff --git a/demo/documentation/components/confirm/enUS/basic.demo.md b/demo/documentation/components/dialog/enUS/basic.demo.md similarity index 100% rename from demo/documentation/components/confirm/enUS/basic.demo.md rename to demo/documentation/components/dialog/enUS/basic.demo.md diff --git a/demo/documentation/components/confirm/enUS/index.demo-entry.md b/demo/documentation/components/dialog/enUS/index.demo-entry.md similarity index 100% rename from demo/documentation/components/confirm/enUS/index.demo-entry.md rename to demo/documentation/components/dialog/enUS/index.demo-entry.md diff --git a/demo/documentation/components/confirm/enUS/use-component.demo.md b/demo/documentation/components/dialog/enUS/use-component.demo.md similarity index 100% rename from demo/documentation/components/confirm/enUS/use-component.demo.md rename to demo/documentation/components/dialog/enUS/use-component.demo.md diff --git a/demo/documentation/components/confirm/index.entry b/demo/documentation/components/dialog/index.entry similarity index 100% rename from demo/documentation/components/confirm/index.entry rename to demo/documentation/components/dialog/index.entry diff --git a/demo/documentation/components/dialog/zhCN/async.demo.md b/demo/documentation/components/dialog/zhCN/async.demo.md new file mode 100644 index 000000000..0fa7f7877 --- /dev/null +++ b/demo/documentation/components/dialog/zhCN/async.demo.md @@ -0,0 +1,44 @@ +# 异步 +对话框可以异步。 +```html + + 成功 + +``` + +```css +.n-button { + margin: 0 12px 8px 0; +} +``` + +```js +const sleep = () => new Promise(resolve => setTimeout(resolve, 1000)) +const countDown = second => `倒计时 ${second} 秒` + +export default { + inject: [ + 'dialog' + ], + methods: { + handleClick(e) { + const dialog = this.dialog.success({ + title: '异步', + content: + '点击，倒计时 3 秒', + positiveText: '确认', + onPositiveClick: () => { + dialog.loading = true + return new Promise(resolve => { + sleep() + .then(() => { dialog.content = countDown(2); return sleep() }) + .then(() => { dialog.content = countDown(1); return sleep() }) + .then(() => { dialog.content = countDown(0) }) + .then(resolve) + }) + } + }) + } + } +} +``` diff --git a/demo/documentation/components/confirm/zhCN/basic.demo.md b/demo/documentation/components/dialog/zhCN/basic.demo.md similarity index 67% rename from demo/documentation/components/confirm/zhCN/basic.demo.md rename to demo/documentation/components/dialog/zhCN/basic.demo.md index 7ec814d87..cbe564739 100644 --- a/demo/documentation/components/confirm/zhCN/basic.demo.md +++ b/demo/documentation/components/dialog/zhCN/basic.demo.md @@ -1,5 +1,5 @@ # 基础用法 -使用 `$NConfirm` 来创建一个确认弹框。 +注入 `dialog` 来创建一个弹框。 ```html 警告 @@ -18,39 +18,43 @@ ``` ```js export default { + inject: [ + 'dialog', + 'message' + ], methods: { handleConfirm (e) { - const confirmInstance = this.$NConfirm.warning({ + this.dialog.warning({ title: '警告', content: '你确定？', positiveText: '确定', negativeText: '不确定', onPositiveClick: () => { - this.$NMessage.success('确定') + this.message.success('确定') }, onNegativeClick: () => { - this.$NMessage.error('不确定') + this.message.error('不确定') } }) }, handleSuccess (e) { - const confirmInstance = this.$NConfirm.success({ + this.dialog.success({ title: '成功', content: '厉害', positiveText: '哇', onPositiveClick: () => { - this.$NMessage.success('耶！') + this.message.success('耶！') } }) }, - handleError(e) { - const confirmInstance = this.$NConfirm.error({ + handleError (e) { + this.dialog.error({ title: '错误', content: '错了', positiveText: '啊', onPositiveClick: () => { - this.$NMessage.success('我就知道') + this.message.success('我就知道') } }) } diff --git a/demo/documentation/components/confirm/zhCN/index.demo-entry.md b/demo/documentation/components/dialog/zhCN/index.demo-entry.md similarity index 86% rename from demo/documentation/components/confirm/zhCN/index.demo-entry.md rename to demo/documentation/components/dialog/zhCN/index.demo-entry.md index 298396ae5..e70715842 100644 --- a/demo/documentation/components/confirm/zhCN/index.demo-entry.md +++ b/demo/documentation/components/dialog/zhCN/index.demo-entry.md @@ -1,4 +1,4 @@ -# 确认 Confirm +# 对话框 Dialog 执行之前，请确认。 ## 演示 @@ -7,16 +7,17 @@ basic async use-component ``` + ## API -### $NConfirm API +### Dialog Injection API |名称|类型|说明| |-|-|-| -|warning|`(options: ConfirmOption) => ConfirmEnvironment`|| -|success|`(options: ConfirmOption) => ConfirmEnvironment`|| -|error|`(options: ConfirmOption) => ConfirmEnvironment`|| +|warning|`(options: DialogOption) => DialogReactive`|| +|success|`(options: DialogOption) => DialogReactive`|| +|error|`(options: DialogOption) => DialogReactive`|| |destroyAll|`() => void`|| -### ConfirmOption API +### DialogOption API |名称|类型|默认值|说明| |-|-|-|-| |theme|`'light' \| 'dark' \| null \| string`|`null`|| @@ -34,8 +35,8 @@ use-component |onNegativeClick|`() => boolean \| Promise \| any`|`() => true`|默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为| |onClose|`() => boolean \| Promise \| any`|`() => true`|默认行为是关闭确认框。返回 `false` 或者 resolve `false` 或者 Promise 被 reject 会避免默认行为| -### ConfirmEnvironment API -#### ConfirmEnvironment Properties +### DialogReactive API +#### DialogReactive Properties 下列属性都可以被动态修改。 |名称|类型|说明| @@ -55,13 +56,13 @@ use-component |onNegativeClick|`() => boolean \| Promise \| any`|| |onClose|`() => boolean \| Promise \| any`|| -#### ConfirmEnvironment Methods +#### DialogReactive Methods |名称|类型|说明| |-|-|-| -|hide|`()`|关闭 Confirm| +|destroy|`()`|关闭 Dialog| ## Props -### Confirm Props +### Dialog Props |名称|类型|默认值|说明| |-|-|-|-| |type|`'error \| 'success' \| 'warning'`|`'warning'`|| @@ -74,6 +75,9 @@ use-component |show-icon|`boolean`|`true`|| |loading|`boolean`|`false`|| |bordered|`boolean`|`false`|| +|on-positive-click|`() => any`|| +|on-negative-click|`() => any`|| +|on-close|`() => any`|| ## Events ### Confirm Events diff --git a/demo/documentation/components/confirm/zhCN/use-component.demo.md b/demo/documentation/components/dialog/zhCN/use-component.demo.md similarity index 66% rename from demo/documentation/components/confirm/zhCN/use-component.demo.md rename to demo/documentation/components/dialog/zhCN/use-component.demo.md index 8fd410d5f..758f788c4 100644 --- a/demo/documentation/components/confirm/zhCN/use-component.demo.md +++ b/demo/documentation/components/dialog/zhCN/use-component.demo.md @@ -1,7 +1,7 @@ # 使用组件 -有的时候你可能想把它用作一个组件 +有的时候你可能想把它用作一个组件。 ```html - any`||模态框更新是否展示状态的回调| ### Modal（Card 预设） 参考 [Card props](n-card#Props) -### Modal（Confirm 预设） -参考 [Confirm props](n-confirm#Props) +### Modal（Dialog 预设） +参考 [Dialog props](n-dialog#Props) ## Slots ### Modal（无预设） @@ -41,10 +41,5 @@ drawer-debug ### Modal（Card 预设） 参考 [Card slots](n-card#Slots) -### Modal（Confirm 预设） -参考 [Confirm slots](n-confirm#Slots) - -### Modal（Card 预设） -参考 [Card events](n-card#Events) -### Modal（Confirm 预设） -参考 [Confirm events](n-confirm#Events) +### Modal（Dialog 预设） +参考 [Dialog slots](n-dialog#Slots) \ No newline at end of file diff --git a/demo/documentation/components/popconfirm/zhCN/index.demo-entry.md b/demo/documentation/components/popconfirm/zhCN/index.demo-entry.md index d96b4698e..aaa80a6c2 100644 --- a/demo/documentation/components/popconfirm/zhCN/index.demo-entry.md +++ b/demo/documentation/components/popconfirm/zhCN/index.demo-entry.md @@ -12,13 +12,11 @@ no-icon ## Props |名称|类型|默认值|说明| |-|-|-|-| -|leave-on-negative-click|`boolean`|`true`|| -|leave-on-positive-click|`boolean`|`true`|| |negative-text|`string`|`'取消'`|| |positive-text|`string`|`'确认'`|| |show-icon|`boolean`|`true`|| -|on-positive-click|`() => any`|`undefined`|| -|on-negative-click|`() => any`|`undefined`|| +|on-positive-click|`() => boolean \| Promise \| any`|`() => true`|| +|on-negative-click|`() => boolean \| Promise \| any`|`() => true`|| 更多 props 请参考 [Popover](n-popover#Props). diff --git a/demo/menu-options.js b/demo/menu-options.js index 55fdcf63d..ce0bbab81 100644 --- a/demo/menu-options.js +++ b/demo/menu-options.js @@ -434,10 +434,10 @@ export default function (instance) { path: `/${lang}/${theme}/doc` + '/n-badge' }, { - name: 'Confirm', + name: 'Dialog', title: '确认', - titleExtra: 'Confirm', - path: `/${lang}/${theme}/doc` + '/n-confirm' + titleExtra: 'Dialog', + path: `/${lang}/${theme}/doc` + '/n-dialog' }, { name: 'Drawer', @@ -783,8 +783,8 @@ export default function (instance) { path: `/${lang}/${theme}/doc` + '/n-badge' }, { - name: 'Confirm', - path: `/${lang}/${theme}/doc` + '/n-confirm' + name: 'Dialog', + path: `/${lang}/${theme}/doc` + '/n-dialog' }, { name: 'Drawer', diff --git a/demo/routes/routes.js b/demo/routes/routes.js index 1f0f74523..674e5114b 100644 --- a/demo/routes/routes.js +++ b/demo/routes/routes.js @@ -29,7 +29,7 @@ import radio from '../documentation/components/radio' import form from '../documentation/components/form' import tabs from '../documentation/components/tabs' import timePicker from '../documentation/components/time-picker' -import confirm from '../documentation/components/confirm' +import dialog from '../documentation/components/dialog' import backTop from '../documentation/components/back-top' import dropdown from '../documentation/components/dropdown' import badge from '../documentation/components/badge' @@ -112,7 +112,7 @@ export const childRoutes = withPrefix('/:lang/:theme/doc', [ { path: '/n-form', component: form }, { path: '/n-tabs', component: tabs }, { path: '/n-time-picker', component: timePicker }, - { path: '/n-confirm', component: confirm }, + { path: '/n-dialog', component: dialog }, { path: '/n-badge', component: badge }, { path: '/n-steps', component: steps }, { path: '/n-collapse', component: collapse }, diff --git a/src/confirm/index.js b/src/confirm/index.js deleted file mode 100644 index 078bcbefe..000000000 --- a/src/confirm/index.js +++ /dev/null @@ -1,14 +0,0 @@ -import ConfirmPlugin from './src/ConfirmPlugin.js' -import Confirm from './src/Confirm' -import { install } from '../_utils/naive/installThemeAwarableProperty' - -ConfirmPlugin.install = function (app, naive) { - ConfirmPlugin.Vue = app - install(app, ConfirmPlugin, '$NConfirm') - app.component(naive.componentPrefix + Confirm.name, Confirm) - /** deprecated names */ - app.component('NNimbusConfirmCard', Confirm) - install(app, ConfirmPlugin, '$NModal') -} - -export default ConfirmPlugin diff --git a/src/confirm/src/ConfirmPlugin.js b/src/confirm/src/ConfirmPlugin.js deleted file mode 100644 index 47078f46e..000000000 --- a/src/confirm/src/ConfirmPlugin.js +++ /dev/null @@ -1,83 +0,0 @@ -import ConfirmEnvironment from './ConfirmEnvironment.vue' - -function updateConfirm (data, instance) { - for (const key of Object.keys(data)) { - if (key in instance.$data) { - instance.$data[key] = data[key] - } - } -} - -export default { - name: 'NConfirm', - theme: null, - inheritedTheme: null, - instances: new Set(), - handleThemeChange (theme) { - this.inheritedTheme = theme - const syntheticTheme = this.theme || this.inheritedTheme - for (const instance of this.instances) { - instance.inheritedTheme = syntheticTheme - } - }, - createInstance () { - const instance = new this.Vue(ConfirmEnvironment) - instance.$mount() - this.instances.add(instance) - instance.instances = this.instances - return instance - }, - confirm (options) { - this.open.bind(this)(options) - }, - open (options) { - this.warning(options) - }, - warning (options) { - const instance = this.createInstance() - const syntheticTheme = this.theme || this.inheritedTheme - updateConfirm( - { - type: 'warning', - active: true, - ...options, - inheritedTheme: syntheticTheme - }, - instance - ) - return instance - }, - error (options) { - const instance = this.createInstance() - const syntheticTheme = this.theme || this.inheritedTheme - updateConfirm( - { - type: 'error', - active: true, - ...options, - inheritedTheme: syntheticTheme - }, - instance - ) - return instance - }, - success (options) { - const instance = this.createInstance() - const syntheticTheme = this.theme || this.inheritedTheme - updateConfirm( - { - type: 'success', - active: true, - ...options, - inheritedTheme: syntheticTheme - }, - instance - ) - return instance - }, - destroyAll () { - this.instances.forEach(instance => { - instance.active = false - }) - } -} diff --git a/src/dialog/index.js b/src/dialog/index.js new file mode 100644 index 000000000..f6b1cb236 --- /dev/null +++ b/src/dialog/index.js @@ -0,0 +1,12 @@ +import Dialog from './src/Dialog' +import DialogProvider from './src/DialogProvider' + +DialogProvider.install = function (app, naive) { + app.component(naive.componentPrefix + DialogProvider.name, DialogProvider) + app.component(naive.componentPrefix + Dialog.name, Dialog) + // deprecated + app.component('NNimbusConfirmCard', Dialog) + app.component(naive.componentPrefix + 'Confirm', Dialog) +} + +export default DialogProvider diff --git a/src/confirm/src/Confirm.vue b/src/dialog/src/Dialog.vue similarity index 71% rename from src/confirm/src/Confirm.vue rename to src/dialog/src/Dialog.vue index f103fd25c..f01741871 100644 --- a/src/confirm/src/Confirm.vue +++ b/src/dialog/src/Dialog.vue @@ -29,12 +29,11 @@ - +
@@ -67,36 +66,40 @@
+