├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── .vscode
└── launch.json
├── LICENSE.md
├── README.md
├── babel.config.js
├── build
├── copy.sh
├── release.sh
└── rollup.config.js
├── nuxt
├── index.js
└── plugin.template.js
├── package.json
├── src
├── components
│ ├── Alert.vue
│ ├── Confirm.vue
│ ├── DialogAction.vue
│ ├── DialogActions.vue
│ ├── DialogCard.vue
│ ├── DialogLayout.vue
│ ├── Loading.vue
│ ├── Prompt.vue
│ ├── SnackbarLayout.vue
│ └── Toast.vue
├── index.js
└── mixins
│ ├── colorable.js
│ └── iconable.js
├── test
├── __snapshots__
│ ├── confirm.spec.js.snap
│ ├── message.spec.js.snap
│ ├── notification.spec.js.snap
│ ├── package.spec.js.snap
│ └── prompt.spec.js.snap
├── confirm.spec.js
├── message.spec.js
├── notification.spec.js
├── package.spec.js
├── prompt.spec.js
└── utils.js
├── types
└── index.d.ts
└── webpack.config.js
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | browser: true,
5 | node: true,
6 | 'jest/globals': true
7 | },
8 | parserOptions: {
9 | parser: 'babel-eslint'
10 | },
11 | extends: [
12 | 'plugin:vue/strongly-recommended',
13 | 'standard'
14 | ],
15 | plugins: [
16 | 'vue',
17 | 'jest'
18 | ],
19 | rules: {
20 | 'no-debugger': 'warn',
21 | 'no-console': ['warn', { allow: ['warn', 'error'] }],
22 | 'vue/require-default-prop': 'off',
23 | },
24 | globals: {}
25 | }
26 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
3 | dist
4 | docs/.vuepress/dist
5 | build/related
6 | *.tgz
7 | package-lock.json
8 | .trash
9 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | test
2 | .vscode
3 | coverage
4 | .travis.yml
5 | *.tgz
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - node
4 | sudo: false
5 | install:
6 | - npm install
7 | after_script:
8 | - npm run coverage
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
3 | // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
4 | // Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
5 | "version": "0.2.0",
6 | "configurations": [
7 | {
8 | "type": "node",
9 | "request": "launch",
10 | "name": "Запустить программу",
11 | "program": "${workspaceFolder}/dist/v-dialogs.cjs.js"
12 | },
13 | {
14 | "type": "node",
15 | "request": "launch",
16 | "name": "Jest All",
17 | "program": "${workspaceFolder}/node_modules/.bin/jest",
18 | "args": ["--runInBand", "--env=jsdom"],
19 | "console": "integratedTerminal",
20 | "internalConsoleOptions": "neverOpen",
21 | "windows": {
22 | "program": "${workspaceFolder}/node_modules/jest/bin/jest",
23 | }
24 | },
25 | {
26 | "type": "node",
27 | "request": "launch",
28 | "name": "Jest Current File",
29 | "program": "${workspaceFolder}/node_modules/.bin/jest",
30 | "args": ["${relativeFile}", "--env=jsdom"],
31 | "console": "integratedTerminal",
32 | "internalConsoleOptions": "neverOpen",
33 | "windows": {
34 | "program": "${workspaceFolder}/node_modules/jest/bin/jest",
35 | }
36 | }
37 | ]
38 | }
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018-2019 Yaroslav Savaryn
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # vuetify-dialog
2 |
3 | ### This module will help you work with `vuetify` dialogs without annoying templates
4 |
5 | Implementation of [vuedl](https://github.com/yariksav/vuedl) dialog helper with Vuetify.js framework
6 |
7 | This module will help you to work with modal dialogs in your project
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | [](https://app.fossa.io/projects/git%2Bgithub.com%2Fyariksav%2Fvuetify-dialog?ref=badge_large)
28 |
29 | ## Vuedl module documentation
30 |
31 | This module uses vuedl to automatically work with dialogs and DOM
32 | [See docs here](https://github.com/yariksav/vuedl#readme)
33 |
34 | ## Setup
35 |
36 | Install the package from npm
37 |
38 | > IMPORTANT: After version 0.4.0 css and js were split and therefore you have to import css manually
39 |
40 | ## Vuetify 2
41 |
42 | For Vuetify 2 please use the latest version of vuetify-dialog@2.X.X
43 |
44 | ### Demo with Vuetify 2
45 | [Demo in CodeSandbox](https://iwdcf.csb.app/),
46 | [Demo source](https://codesandbox.io/s/vuetify-2-dialog-example-iwdcf)
47 |
48 | ```npm
49 | npm install vuetify-dialog
50 | ```
51 |
52 | ```javascript
53 | // need instance of vuetify, for example
54 | import vuetify from '@/plugins/vuetify'
55 |
56 | import VuetifyDialog from 'vuetify-dialog'
57 | import 'vuetify-dialog/dist/vuetify-dialog.css'
58 |
59 | Vue.use(VuetifyDialog, {
60 | context: {
61 | vuetify
62 | }
63 | })
64 | ```
65 |
66 | ## Vuetify 1
67 |
68 | For Vuetify 1 you need to use vuetify-dialog@0.4.0-beta.2
69 |
70 | ### Demo with Vuetify 1
71 | [Demo with Vuetify 1 CodeSandbox](https://ppx57r3nnj.codesandbox.io/),
72 | [Demo source](https://codesandbox.io/s/ppx57r3nnj)
73 |
74 | ```npm
75 | npm install vuetify-dialog@0.4.0-beta.2
76 | ```
77 |
78 | ```javascript
79 | import VuetifyDialog from 'vuetify-dialog'
80 | import 'vuetify-dialog/dist/vuetify-dialog.css'
81 | Vue.use(VuetifyDialog)
82 | ```
83 |
84 |
85 | or use with extra configuration
86 | ```javascript
87 | import VuetifyDialog from 'vuetify-dialog'
88 | import 'vuetify-dialog/dist/vuetify-dialog.css'
89 | Vue.use(VuetifyDialog, {
90 | context,
91 | property,
92 | confirm: {
93 | actions: {
94 | false: 'No',
95 | true: {
96 | text: 'Yes',
97 | color: 'primary'
98 | }
99 | },
100 | icon: false, // to disable icon just put false
101 | width: 500
102 | },
103 | warning: {},
104 | error: {},
105 | prompt: {}
106 | })
107 | ```
108 |
109 | + `context` - the context of your application, such as store, axios, router etc.
110 | + `property` - the property, which will integrate to Vue. Default is `$dialog`
111 | + `confirm` - confirm dialog params
112 | + `warning` - warning dialog params
113 | + `error` - error dialog params
114 | + `prompt` - prompt dialog params
115 | Where:
116 | + `actions` - dialog buttons config
117 | + `icon` - dialog icon in String, example 'warning'. Note, if you want to hide icon, just set parameter to false
118 | + `width` - dialog max width
119 |
120 | ## ♻️ Usage with Nuxt.js
121 |
122 | Add `vuetify-dialog/nuxt` to modules section of `nuxt.config.js`
123 |
124 | Module automatically add to dialog nuxt context data, such as router, route, i18n, $axios, etc
125 |
126 | ```js
127 | {
128 | modules: [
129 | // Simple usage
130 | 'vuetify-dialog/nuxt'
131 |
132 | // Optionally passing options in module configuration
133 | ['vuetify-dialog/nuxt', { property: '$dialog' }]
134 | ],
135 |
136 | // Optionally passing options in module top level configuration
137 | vuetifyDialog: {
138 | property: '$dialog'
139 | confirm: {}
140 | // ...
141 | }
142 | }
143 | ```
144 |
145 | ### If you using Typescript + Nuxt.js
146 | Add `vuetify-dialog/types` to the `compilerOptions.types` section of your project's `tsconfig.json` file:
147 | ```json
148 | {
149 | "compilerOptions": {
150 | "types": [
151 | "vuetify-dialog/types"
152 | ]
153 | }
154 | }
155 | ```
156 |
157 |
158 | ### Simple confirm dialog
159 | ```js
160 | const res = await this.$dialog.confirm({
161 | text: 'Do you really want to exit?',
162 | title: 'Warning'
163 | })
164 | ```
165 |
166 | ### Info dialog
167 | ```js
168 | const res = await this.$dialog.info({
169 | text: 'File copied successfully',
170 | title: 'Info'
171 | })
172 | ```
173 |
174 | ### Warning dialog
175 | ```js
176 | const res = await this.$dialog.warning({
177 | text: 'Do you really want to exit?',
178 | title: 'Warning'
179 | })
180 | ```
181 |
182 | ### Error dialog
183 | ```js
184 | this.$dialog.error({
185 | text: 'Cannot delete this item',
186 | title: 'Error'
187 | })
188 | ```
189 |
190 | ### Prompt dialog
191 | ```js
192 | let res = await this.$dialog.prompt({
193 | text: 'Your name',
194 | title: 'Please input your name',
195 | })
196 | ```
197 |
198 | ### Prompt dialog with password
199 | ```js
200 | let res = await this.$dialog.prompt({
201 | title: 'Password balidation',
202 | text: 'Enter your password',
203 | rules: [(v) => v.length >= 6 || 'Password must be at least 6 characters long'], // vuetify's v-text-field rules prop
204 | textField: {
205 | // Any addtional props/attrs that will be binded to v-text-field component
206 | type: 'password',
207 | }
208 | })
209 | ```
210 |
211 |
212 |
213 | ### Programmatically close dialog
214 |
215 | If property `waitForResult` set to false, then functions will return dialog instance
216 |
217 | Actually waitForResult = true make two steps
218 | 1) dialogInstance = $dialog.show(component) // Show dialog
219 | 2) return dialogInstance.wait() // Return promise
220 |
221 | Therefore to perform programmatically close dialog you have to set waitForResult to false and work with dialogInstance directly
222 |
223 | ```js
224 | const dialogInstance = await this.$dialog.warning({
225 | title: this.title,
226 | text: this.text,
227 | waitForResult: false
228 | });
229 | setTimeout(() => {
230 | dialogInstance.close()
231 | } , 3000)
232 |
233 | // then you can wait for user reaction
234 | const userChoice = await dialogInstance.wait()
235 | // after idle 3000 sec - userChoice will be undefined
236 | this.$dialog.notify.info(userChoice)
237 | ```
238 |
239 | ### Notifications
240 | The notification component is used to convey important information to the user.
241 | Notification support positioning, removal delay and callbacks. It comes in 4 variations, **success**, **info**, **warning** and **error**. These have default icons assigned which can be changed and represent different actions
242 |
243 |
244 |
245 | Notification uses [v-alert](https://vuetifyjs.com/en/components/alerts) component
246 |
247 | Props:
248 | * **text** - _the text fo your message_
249 | - type: String
250 | * options:
251 | - type: Object
252 | - properties:
253 | - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_
254 | - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
255 | - actions
256 | ```js
257 | this.$dialog.notify.info('Test notification', {
258 | position: 'top-right',
259 | timeout: 5000
260 | })
261 | ```
262 |
263 | ### Toasts
264 | The toast component is used to display a quick message to a user. Toasts support positioning, removal delay and callbacks. It comes in 4 variations, **success**, **info**, **warning** and **error**. These have default icons assigned which can be changed and represent different actions
265 |
266 | Toast uses [v-snackbar](https://vuetifyjs.com/en/components/snackbars) component
267 |
268 | Props:
269 | * **text** - _the text fo your message_
270 | - type: String
271 | * options:
272 | - type: Object
273 | - properties:
274 | - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_
275 | - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
276 | - actions: - see below
277 | ``` javascript
278 | this.$dialog.message.info('Test', {
279 | position: 'top-left'
280 | })
281 | ```
282 | ### Actions
283 | To all dialogs you can put your own buttons
284 | Props:
285 | * **key** - _the text fo your message_
286 | - type: String
287 | * options:
288 | - type: Object
289 | - properties:
290 | - position: one of _top-left_, _top-right_, _bottom-left_, _bootom-right_
291 | - timeout: timer to hide message. Default 5000. If set to 0 - message will not closes automatically
292 | - actions: - see below
293 | ```js
294 | {
295 | ...
296 | actions: {
297 | false: 'No',
298 | true: 'Yes'
299 | }
300 | }
301 | // result will be true, false, or undefined
302 | {
303 | ...
304 | actions: ['No', 'Yes']
305 | }
306 | // result will be 'No', 'Yes', or undefined
307 |
308 | ```
309 | You can also send full button options
310 | ```js
311 | {
312 | actions: [{
313 | text: 'Yes', color: 'blue', key: true
314 | }]
315 | }
316 | ```
317 |
318 |
319 | [npm-image]: https://img.shields.io/npm/v/vuetify-dialog.svg?style=flat-square
320 | [npm-url]: https://npmjs.org/package/vuetify-dialog
321 |
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | ['@babel/preset-env', { modules: false }]
4 | ],
5 | plugins: [
6 | '@babel/plugin-transform-runtime'
7 | ],
8 | env: {
9 | test: {
10 | presets: [
11 | ['@babel/preset-env', {
12 | targets: {
13 | node: 'current'
14 | }
15 | }]
16 | ]
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/build/copy.sh:
--------------------------------------------------------------------------------
1 | shopt -s extglob # to enable extglob
2 | PROJECT_NAME=$(node -p "require('./package.json').name")
3 | pid=$(cat ./build/related)
4 | PROJECTS=($(echo $pid | tr " " "\n"))
5 | for project in "${PROJECTS[@]}"
6 | do
7 | # echo $project
8 | if [[ $project == '#'* ]]; then
9 | # echo "skiped $project"
10 | continue
11 | fi
12 | COPY_PATH=$project/node_modules/$PROJECT_NAME/
13 | if [[ ! -e $COPY_PATH ]]; then
14 | mkdir $COPY_PATH
15 | fi
16 | echo $COPY_PATH
17 | rsync -av -progress --exclude={node_modules,build,coverage,test} ./* $COPY_PATH
18 | done
19 |
--------------------------------------------------------------------------------
/build/release.sh:
--------------------------------------------------------------------------------
1 | set -e
2 | echo "Enter release version: "
3 | read VERSION
4 |
5 | read -p "Releasing $VERSION - are you sure? (y/n)" -n 1 -r
6 | echo # (optional) move to a new line
7 | if [[ $REPLY =~ ^[Yy]$ ]]
8 | then
9 | echo "Releasing $VERSION ..."
10 | npm test
11 | VERSION=$VERSION npm run build
12 |
13 | # commit
14 | git add -A
15 | git commit -m "[build] $VERSION"
16 | npm version $VERSION --message "[release] $VERSION"
17 |
18 | # publish
19 | git push origin refs/tags/v$VERSION
20 | git push
21 | npm publish
22 | fi
--------------------------------------------------------------------------------
/build/rollup.config.js:
--------------------------------------------------------------------------------
1 | import vue from 'rollup-plugin-vue' // Обработка однофайловых компонентов .vue
2 | import buble from 'rollup-plugin-buble' // Транспиляция/Полифилизация для умеренной поддержки браузеров
3 | import commonjs from 'rollup-plugin-commonjs'
4 | import resolve from 'rollup-plugin-node-resolve'
5 | import css from 'rollup-plugin-css-porter'
6 | import minimist from 'minimist'
7 |
8 | import { terser } from 'rollup-plugin-terser'
9 |
10 | const argv = minimist(process.argv.slice(2))
11 |
12 | const config = {
13 | input: 'src/index.js', // Путь до относительного package.json
14 | output: {
15 | name: 'VuetifyDialog',
16 | exports: 'named',
17 | globals: {
18 | vue: 'Vue',
19 | vuedl: 'Vuedl',
20 | 'vuetify/lib': 'Vuetify'
21 | }
22 | },
23 | external: [ 'vue', 'vuedl', 'vuetify/lib' ],
24 | plugins: [
25 | vue({
26 | css: false, // Динамически внедряем CSS в тег
103 |
--------------------------------------------------------------------------------
/src/components/DialogLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
16 |
17 |
22 | ×
23 |
24 |
28 |
29 |
30 |
31 |
32 |
69 |
95 |
--------------------------------------------------------------------------------
/src/components/Loading.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 | {{ text }}
8 |
13 |
14 |
15 |
16 |
17 |
41 |
--------------------------------------------------------------------------------
/src/components/Prompt.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
18 |
19 |
20 |
21 |
22 |
75 |
--------------------------------------------------------------------------------
/src/components/SnackbarLayout.vue:
--------------------------------------------------------------------------------
1 |
2 |
21 |
25 |
29 |
30 |
31 |
32 |
77 |
--------------------------------------------------------------------------------
/src/components/Toast.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Vuedl from 'vuedl/src/index'
2 | import DialogLayout from './components/DialogLayout.vue'
3 | import Confirm from './components/Confirm.vue'
4 | import Toast from './components/Toast.vue'
5 | import Alert from './components/Alert.vue'
6 | import SnackbarLayout from './components/SnackbarLayout.vue'
7 | import Prompt from './components/Prompt.vue'
8 | import Loading from './components/Loading.vue'
9 | import DialogActions from './components/DialogActions.vue'
10 | import DialogCard from './components/DialogCard.vue'
11 | import NotificationLayout from 'vuedl/src/components/NotificationLayout.vue'
12 |
13 | function install (Vue, options = {}) {
14 | if (install.installed) return
15 | install.installed = true
16 | if (!options.container) {
17 | options.container = '[data-app=true]'
18 | }
19 | const property = options.property || '$dialog'
20 | const actionsFn = options.actions || (() => {
21 | return {
22 | false: 'Cancel',
23 | true: {
24 | text: 'OK',
25 | color: 'primary'
26 | }
27 | }
28 | })
29 | const actionOptions = options.actionOptions || {
30 | flat: true
31 | }
32 |
33 | Vue.use(Vuedl, options)
34 | const manager = Vue.prototype[property]
35 | manager.layout('default', DialogLayout)
36 | manager.layout('snackbar', SnackbarLayout)
37 | manager.layout('notification', NotificationLayout)
38 | Vue.component('DialogActions', DialogActions)
39 | Vue.component('DialogCard', DialogCard)
40 | manager.component('confirm', Confirm, {
41 | waitForResult: true,
42 | actions: actionsFn,
43 | actionOptions: actionOptions,
44 | ...options.confirm
45 | })
46 |
47 | manager.component('warning', Confirm, {
48 | type: 'warning',
49 | waitForResult: true,
50 | actions: actionsFn,
51 | actionOptions: actionOptions,
52 | ...options.warning
53 | })
54 |
55 | manager.component('error', Confirm, {
56 | type: 'error',
57 | waitForResult: true,
58 | actions: ['Close'],
59 | actionOptions: actionOptions,
60 | ...options.error
61 | })
62 |
63 | manager.component('info', Confirm, {
64 | type: 'info',
65 | waitForResult: true,
66 | actions: ['Ok'],
67 | actionOptions: actionOptions,
68 | ...options.info
69 | })
70 |
71 | manager.component('toast', Toast, {
72 | waitForResult: true,
73 | actionOptions: actionOptions,
74 | ...options.toast
75 | })
76 |
77 | manager.component('loading', Loading, {
78 | waitForResult: false,
79 | ...options.loading
80 | })
81 |
82 | manager.withLoading = function (options, callback) {
83 | return manager.loading(options).then(dlg => {
84 | callback()
85 | .then(res => {
86 | dlg.close()
87 | return res
88 | })
89 | .catch(e => {
90 | dlg.close()
91 | throw e
92 | })
93 | })
94 | }
95 |
96 | manager.message = {
97 | info: (message, options) => manager.toast({ text: message, color: 'info', ...options }),
98 | error: (message, options) => manager.toast({ text: message, color: 'error', ...options }),
99 | success: (message, options) => manager.toast({ text: message, color: 'success', ...options }),
100 | warning: (message, options) => manager.toast({ text: message, color: 'warning', ...options })
101 | }
102 |
103 | manager.component('notification', Alert, {
104 | waitForResult: true,
105 | ...options.notification
106 | })
107 |
108 | manager.notify = {
109 | info: (message, options) => manager.notification({ text: message, color: 'info', ...options }),
110 | error: (message, options) => manager.notification({ text: message, color: 'error', ...options }),
111 | success: (message, options) => manager.notification({ text: message, color: 'success', ...options }),
112 | warning: (message, options) => manager.notification({ text: message, color: 'warning', ...options })
113 | }
114 |
115 | manager.component('prompt', Prompt, {
116 | waitForResult: true,
117 | actions: actionsFn,
118 | ...options.prompt
119 | })
120 | }
121 |
122 | const Plugin = {
123 | install
124 | }
125 |
126 | /* istanbul ignore next */
127 | if (typeof window !== 'undefined' && window.Vue) {
128 | window.Vue.use(Plugin)
129 | }
130 |
131 | export default Plugin
132 |
--------------------------------------------------------------------------------
/src/mixins/colorable.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | type: String,
4 | color: String
5 | },
6 | computed: {
7 | getColor () {
8 | return this.color || this.type
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/src/mixins/iconable.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | icon: {
4 | type: [String, Boolean],
5 | default: undefined
6 | },
7 | type: String
8 | },
9 | computed: {
10 | getIcon () {
11 | if (this.icon === false) {
12 | return
13 | }
14 | return this.icon || (this.$vuetify && this.$vuetify.icons && this.$vuetify.icons.values[this.type]) || this.type
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/test/__snapshots__/confirm.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`manager Check confirm 1`] = `
4 |
7 |
10 |
11 |
12 |
15 | test
16 |
17 |
18 |
21 |
24 |
25 |
40 |
55 |
56 |
57 |
58 | `;
59 |
60 | exports[`manager Check confirm with action icons 1`] = `
61 |
64 |
67 |
68 |
69 |
72 | test
73 |
74 |
75 |
78 |
81 |
82 |
105 |
126 |
127 |
128 |
129 | `;
130 |
131 | exports[`manager Check confirm with btns true|false 1`] = `
132 |
135 |
138 |
139 |
140 |
143 | test
144 |
145 |
146 |
149 |
152 |
153 |
168 |
183 |
184 |
185 |
186 | `;
187 |
188 | exports[`manager Check confirm with handler functions 1`] = `
189 |
192 |
195 |
196 |
197 |
200 | test
201 |
202 |
203 |
206 |
209 |
210 |
225 |
240 |
241 |
242 |
243 | `;
244 |
245 | exports[`manager Returnable 1`] = `
246 |
251 | `;
252 |
253 | exports[`manager Test confirm without icon 1`] = `
254 |
257 |
260 |
279 |
280 |
283 | Test confirmation withot icon
284 |
285 |
286 |
287 |
288 |
289 | `;
290 |
291 | exports[`manager Test default confirm 1`] = `
292 |
295 |
298 |
317 |
318 |
321 | Test confirmation
322 |
323 |
324 |
325 |
326 |
327 | `;
328 |
--------------------------------------------------------------------------------
/test/__snapshots__/message.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`manager Test error notification with top-left position 1`] = `
4 |
8 |
12 |
17 |
18 | Test message
19 |
20 |
21 |
22 |
25 |
26 |
27 |
28 |
29 | `;
30 |
31 | exports[`manager Test info notification 1`] = `
32 |
36 |
40 |
45 |
46 | Test message
47 |
48 |
49 |
50 |
53 |
54 |
55 |
56 |
57 | `;
58 |
59 | exports[`manager Test success notification 1`] = `
60 |
64 |
68 |
73 |
74 | Test message
75 |
76 |
77 |
78 |
81 |
82 |
83 |
84 |
85 | `;
86 |
87 | exports[`manager Test warning notification with bottom-right position 1`] = `
88 |
92 |
96 |
101 |
102 | Test message
103 |
104 |
105 |
106 |
109 |
110 |
111 |
112 |
113 | `;
114 |
--------------------------------------------------------------------------------
/test/__snapshots__/notification.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`manager Test error notification with top-left position 1`] = `
4 |
9 |
14 |
17 |
21 |
24 |
27 |
30 |
31 | Test notification
32 |
33 |
34 |
35 |
36 |
37 |
38 |
52 |
53 |
54 |
55 |
56 |
57 | `;
58 |
59 | exports[`manager Test info notification 1`] = `
60 |
65 |
70 |
73 |
77 |
80 |
83 |
86 |
87 | Test notification
88 |
89 |
90 |
91 |
92 |
93 |
94 |
108 |
109 |
110 |
111 |
112 |
113 | `;
114 |
115 | exports[`manager Test notification component 1`] = `
116 |
121 |
126 |
129 |
133 |
136 |
139 |
142 |
143 | Test notification
144 |
145 |
146 |
147 |
148 |
149 |
150 |
164 |
165 |
166 |
167 |
168 |
169 | `;
170 |
171 | exports[`manager Test success notification 1`] = `
172 |
177 |
182 |
185 |
189 |
192 |
195 |
198 |
199 | Test notification
200 |
201 |
202 |
203 |
204 |
205 |
206 |
220 |
221 |
222 |
223 |
224 |
225 | `;
226 |
227 | exports[`manager Test warning notification with bottom-right position 1`] = `
228 |
233 |
238 |
241 |
245 |
248 |
251 |
254 |
255 | Test notification
256 |
257 |
258 |
259 |
260 |
261 |
262 |
276 |
277 |
278 |
279 |
280 |
281 | `;
282 |
--------------------------------------------------------------------------------
/test/__snapshots__/package.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`manager Test confirmation with generic options 1`] = `
4 |
8 | `;
9 |
10 | exports[`manager Test confirmation with generic options 2`] = `
11 |
12 |
15 |
24 |
29 |
33 |
36 |
39 |
40 | ×
41 |
42 |
43 |
44 |
47 |
66 |
67 |
70 | Test confirmation with generic options
71 |
72 |
73 |
76 |
79 |
80 |
95 |
110 |
125 |
126 |
127 |
128 |
129 |
130 |
134 |
135 |
136 | `;
137 |
--------------------------------------------------------------------------------
/test/__snapshots__/prompt.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`manager Prompt confirm 1`] = `
4 |
8 | `;
9 |
10 | exports[`manager Prompt confirm 2`] = `
11 |
12 |
15 |
24 |
33 |
38 |
42 |
45 |
48 |
49 | ×
50 |
51 |
52 |
53 |
54 |
57 |
58 |
59 |
101 |
102 |
105 |
108 |
109 |
124 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
151 |
155 |
158 |
161 |
162 | ×
163 |
164 |
165 |
166 |
167 |
170 |
171 |
172 |
214 |
215 |
218 |
221 |
222 |
237 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
264 |
268 |
269 | `;
270 |
271 | exports[`manager Test default prompt 1`] = `
272 |
276 | `;
277 |
278 | exports[`manager Test default prompt 2`] = `
279 |
280 |
283 |
292 |
297 |
301 |
304 |
307 |
308 | ×
309 |
310 |
311 |
312 |
313 |
316 |
317 |
318 |
360 |
361 |
364 |
367 |
368 |
383 |
398 |
399 |
400 |
401 |
402 |
403 |
404 |
405 |
406 |
410 |
411 | `;
412 |
--------------------------------------------------------------------------------
/test/confirm.spec.js:
--------------------------------------------------------------------------------
1 | import Dialog from 'vuedl/src/dialog'
2 | import DialogManager from 'vuedl/src/manager'
3 | import Confirm from '../src/components/Confirm'
4 | import Returnable from 'vuedl/src/mixins/returnable'
5 | import Vue from 'vue'
6 | import Vuetify from 'vuetify/lib'
7 | Vue.use(Vuetify)
8 | const vuetify = new Vuetify({})
9 |
10 | describe('manager', () => {
11 | let manager
12 | test('Create manager instance', () => {
13 | manager = new DialogManager({ context: { store: {}, vuetify } })
14 | manager.component('confirm', Confirm)
15 | })
16 |
17 | test('Test default confirm', async () => {
18 | const res = await manager.confirm({
19 | text: 'Test confirmation',
20 | title: 'Title'
21 | })
22 | expect(res.vm.$el).toMatchSnapshot()
23 | await res.close()
24 | await Vue.nextTick()
25 | expect(document.body.innerHTML).toBe('')
26 | })
27 |
28 | test('Test confirm without icon', async () => {
29 | const res = await manager.confirm({
30 | icon: false,
31 | text: 'Test confirmation withot icon',
32 | title: 'Title'
33 | })
34 | expect(res.vm.$el).toMatchSnapshot()
35 | await res.close()
36 | await Vue.nextTick()
37 | expect(document.body.innerHTML).toBe('')
38 | })
39 |
40 | test('Returnable', async () => {
41 | const dlg = new Dialog({
42 | mixins: [Returnable],
43 | template: ''
44 | })
45 | await dlg.show()
46 | expect(typeof dlg.vmd.return).toBe('function')
47 | expect(dlg.element).toMatchSnapshot()
48 | setTimeout(() => {
49 | dlg.vmd.return(123)
50 | }, 5)
51 | const res = await dlg.wait()
52 | expect(res).toBe(123)
53 | await Vue.nextTick()
54 | expect(document.body.innerHTML).toBe('')
55 | })
56 |
57 | test('Check confirm', async () => {
58 | const dlg = await manager.confirm({
59 | text: 'test',
60 | type: 'warning',
61 | actions: ['ok', 'cancel']
62 | })
63 | expect(dlg.vm.$el).toMatchSnapshot()
64 | setTimeout(() => {
65 | dlg.element.querySelector('[action-key=ok]').click()
66 | }, 0)
67 | const res = await dlg.wait()
68 | expect(res).toBe('ok')
69 | await Vue.nextTick()
70 | expect(document.body.innerHTML).toBe('')
71 | })
72 |
73 | test('Check confirm with action icons', async () => {
74 | const dlg = await manager.confirm({
75 | text: 'test',
76 | icon: 'warning',
77 | actions: {
78 | false: {
79 | icon: {
80 | text: 'cancel'
81 | },
82 | color: 'info',
83 | rounded: true,
84 | text: 'No'
85 | },
86 | true: {
87 | text: 'Yes',
88 | icon: {
89 | text: 'success',
90 | right: true
91 | }
92 | }
93 | }
94 | })
95 | expect(dlg.vm.$el).toMatchSnapshot()
96 | await dlg.close()
97 | await Vue.nextTick()
98 | expect(document.body.innerHTML).toBe('')
99 | })
100 |
101 | test('Check confirm with btns true|false', async () => {
102 | const dlg = await manager.confirm({
103 | text: 'test',
104 | actions: { true: 'Yes', false: 'No' }
105 | })
106 | expect(dlg.element).toMatchSnapshot()
107 | expect(dlg.element.querySelector('[action-key=true]')).toBeTruthy()
108 | expect(dlg.element.querySelector('[action-key=false]')).toBeTruthy()
109 | setTimeout(() => {
110 | dlg.element.querySelector('[action-key=true]').click()
111 | }, 0)
112 | const res = await dlg.wait()
113 | expect(res).toBe(true)
114 | await Vue.nextTick()
115 | expect(document.body.innerHTML).toBe('')
116 | })
117 |
118 | test('Check confirm with handler functions', async () => {
119 | const dlg = await manager.confirm({
120 | text: 'test',
121 | actions: {
122 | false: 'No',
123 | true: {
124 | text: 'Yes',
125 | class: 'action-true',
126 | handler: () => {
127 | return new Promise((resolve) => {
128 | setTimeout(() => resolve({ msg: 'foo' }), 5)
129 | })
130 | }
131 | }
132 | }
133 | })
134 | expect(dlg.element).toMatchSnapshot()
135 | setTimeout(() => {
136 | dlg.element.querySelector('[action-key=true]').click()
137 | Vue.nextTick(() => {
138 | expect(dlg.element.querySelector('[action-key=true]').hasAttribute('disabled')).toBe(true)
139 | })
140 | }, 0)
141 | const res = await dlg.wait()
142 | expect(res).toEqual({ msg: 'foo' })
143 | await Vue.nextTick()
144 | expect(document.body.innerHTML).toBe('')
145 | })
146 | })
147 |
--------------------------------------------------------------------------------
/test/message.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | import { sleep } from './utils'
4 | import VuetifyDialogPlugin from '../src'
5 | Vue.use(Vuetify)
6 | const vuetify = new Vuetify({})
7 |
8 | describe('manager', () => {
9 | let manager
10 |
11 | beforeAll(() => {
12 | Vue.use(VuetifyDialogPlugin, { context: { vuetify } })
13 | manager = Vue.prototype.$dialog
14 | })
15 |
16 | it('Should not raise exception when use vuetify-dialog several times', () => {
17 | Vue.use(VuetifyDialogPlugin)
18 | VuetifyDialogPlugin.install(Vue, {})
19 | })
20 |
21 | test('Test success notification', async () => {
22 | const dlg = await manager.message.success('Test message', {
23 | timeout: 100,
24 | waitForResult: false
25 | })
26 | await sleep(50)
27 | expect(dlg.vm.$el).toMatchSnapshot()
28 | await sleep(600)
29 | await Vue.nextTick()
30 | expect(document.body.innerHTML).toBe('')
31 | })
32 |
33 | test('Test info notification', async () => {
34 | const dlg = await manager.message.info('Test message', {
35 | timeout: 100,
36 | waitForResult: false
37 | })
38 | await sleep(50)
39 | expect(dlg.vm.$el).toMatchSnapshot()
40 | await sleep(600)
41 | await Vue.nextTick()
42 | expect(document.body.innerHTML).toBe('')
43 | })
44 |
45 | test('Test error notification with top-left position', async () => {
46 | const dlg = await manager.message.error('Test message', {
47 | timeout: 100,
48 | position: 'top-left',
49 | waitForResult: false
50 | })
51 | await sleep(50)
52 | expect(dlg.vm.$el).toMatchSnapshot()
53 | await sleep(600)
54 | await Vue.nextTick()
55 | expect(document.body.innerHTML).toBe('')
56 | })
57 |
58 | test('Test warning notification with bottom-right position', async () => {
59 | const dlg = await manager.message.warning('Test message', {
60 | timeout: 100,
61 | position: 'bottom-right',
62 | waitForResult: false
63 | })
64 | await sleep(50)
65 | expect(dlg.vm.$el).toMatchSnapshot()
66 | await sleep(600)
67 | await Vue.nextTick()
68 | expect(document.body.innerHTML).toBe('')
69 | })
70 | })
71 |
--------------------------------------------------------------------------------
/test/notification.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | import { sleep } from './utils'
4 | import VuetifyDialogPlugin from '../src'
5 | Vue.use(Vuetify)
6 | const vuetify = new Vuetify({})
7 |
8 | describe('manager', () => {
9 | let manager
10 |
11 | beforeAll(() => {
12 | Vue.use(VuetifyDialogPlugin, { context: { vuetify } })
13 | manager = Vue.prototype.$dialog
14 | })
15 |
16 | test('Test notification component', async () => {
17 | const dlg = await manager.notification({
18 | text: 'Test notification',
19 | timeout: 100,
20 | waitForResult: false
21 | })
22 | await sleep(1)
23 | expect(dlg.vm.$el).toMatchSnapshot()
24 | await sleep(200)
25 | await Vue.nextTick()
26 | expect(document.body.innerHTML).toBe('')
27 | })
28 |
29 | test('Test success notification', async () => {
30 | const dlg = await manager.notify.success('Test notification', {
31 | timeout: 100,
32 | waitForResult: false
33 | })
34 | await sleep(1)
35 | expect(dlg.vm.$el).toMatchSnapshot()
36 | await sleep(200)
37 | await Vue.nextTick()
38 | expect(document.body.innerHTML).toBe('')
39 | })
40 |
41 | test('Test info notification', async () => {
42 | const dlg = await manager.notify.info('Test notification', {
43 | timeout: 1,
44 | waitForResult: false
45 | })
46 | await sleep(1)
47 | expect(dlg.vm.$el).toMatchSnapshot()
48 | await sleep(200)
49 | await Vue.nextTick()
50 | expect(document.body.innerHTML).toBe('')
51 | })
52 |
53 | test('Test error notification with top-left position', async () => {
54 | const dlg = await manager.notify.error('Test notification', {
55 | timeout: 100,
56 | position: 'top-left',
57 | waitForResult: false
58 | })
59 | await sleep(1)
60 | expect(dlg.vm.$el).toMatchSnapshot()
61 | await sleep(500)
62 | await Vue.nextTick()
63 | expect(document.body.innerHTML).toBe('')
64 | })
65 |
66 | test('Test warning notification with bottom-right position', async () => {
67 | const dlg = await manager.notify.warning('Test notification', {
68 | timeout: 100,
69 | position: 'bottom-right',
70 | waitForResult: false
71 | })
72 | await sleep(50)
73 | expect(dlg.vm.$el).toMatchSnapshot()
74 | await sleep(1000)
75 | await Vue.nextTick()
76 | expect(document.body.innerHTML).toBe('')
77 | })
78 | })
79 |
--------------------------------------------------------------------------------
/test/package.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | import VuetifyDialogPlugin from '../src'
4 | import { sleep, addElemWithDataAppToBody, disableTransitions } from './utils'
5 | Vue.use(Vuetify)
6 | const vuetify = new Vuetify({})
7 |
8 | describe('manager', () => {
9 | disableTransitions()
10 | addElemWithDataAppToBody()
11 | Vue.use(VuetifyDialogPlugin, {
12 | confirm: {
13 | actions: ['Foo', 'Bar', 'Baz'],
14 | icon: false
15 | },
16 | context: {
17 | vuetify
18 | }
19 | })
20 | const manager = Vue.prototype.$dialog
21 |
22 | test('Test confirmation with generic options', async () => {
23 | const dialog = await manager.confirm({
24 | waitForResult: false,
25 | text: 'Test confirmation with generic options',
26 | title: 'Title'
27 | })
28 | await sleep(100)
29 | expect(dialog.element).toMatchSnapshot()
30 | await dialog.close()
31 | await Vue.nextTick()
32 | await sleep(5)
33 | expect(document.body).toMatchSnapshot()
34 | })
35 | })
36 |
--------------------------------------------------------------------------------
/test/prompt.spec.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuetify from 'vuetify/lib'
3 | import DialogManager from 'vuedl/src/manager'
4 | import Prompt from '../src/components/Prompt'
5 | import DialogLayout from '../src/components/DialogLayout'
6 | import { sleep, addElemWithDataAppToBody, disableTransitions } from './utils'
7 | Vue.use(Vuetify)
8 | const vuetify = new Vuetify({})
9 |
10 | describe('manager', () => {
11 | disableTransitions()
12 | addElemWithDataAppToBody()
13 |
14 | const manager = new DialogManager({ context: { vuetify, store: {} } })
15 | manager.layout('default', DialogLayout)
16 | manager.component('prompt', Prompt, {
17 | actions: {
18 | false: 'Cancel',
19 | true: 'OK'
20 | }
21 | })
22 |
23 | test('Test default prompt', async () => {
24 | const dialog = await manager.prompt({
25 | text: 'Test prompt',
26 | tytle: 'Title'
27 | })
28 | await sleep(100)
29 | expect(dialog.element).toMatchSnapshot()
30 | dialog.close()
31 | await sleep(100)
32 | expect(document.body).toMatchSnapshot()
33 | })
34 |
35 | test('Prompt confirm', async () => {
36 | const dlg = await manager.prompt({
37 | text: 'Test prompt',
38 | tytle: 'Title',
39 | value: 'test'
40 | })
41 | await sleep(100)
42 | expect(dlg.vm.$el).toMatchSnapshot()
43 | setTimeout(() => {
44 | dlg.vmd.$refs.card.trigger(true)
45 | }, 5)
46 | const res = await dlg.wait()
47 | expect(res).toBe('test')
48 | await sleep(100)
49 | expect(document.body).toMatchSnapshot()
50 | })
51 | })
52 |
--------------------------------------------------------------------------------
/test/utils.js:
--------------------------------------------------------------------------------
1 | import { createWrapper } from '@vue/test-utils'
2 |
3 | export function sleep (ms) {
4 | return new Promise(resolve => {
5 | setTimeout(resolve, ms)
6 | })
7 | }
8 |
9 | export function wrap (vm) {
10 | return createWrapper({ componentInstance: vm }, {
11 | attachedToDocument: true
12 | })
13 | }
14 |
15 | export function disableTransitions () {
16 | const css = `
17 | * {
18 | animation: none !important;
19 | transition: none !important;
20 | transition-timing-function: none !important;
21 | }`
22 | const head = document.head || document.getElementsByTagName('head')[0]
23 | const style = document.createElement('style')
24 | head.appendChild(style)
25 | style.type = 'text/css'
26 | if (style.styleSheet) {
27 | // This is required for IE8 and below.
28 | style.styleSheet.cssText = css
29 | } else {
30 | style.appendChild(document.createTextNode(css))
31 | }
32 | }
33 |
34 | export function addElemWithDataAppToBody () {
35 | const app = document.createElement('div')
36 | app.setAttribute('data-app', true)
37 | document.body.append(app)
38 | }
39 |
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import Vue, { VueConstructor, PluginFunction } from 'vue'
2 |
3 | export interface VuetifyDialogUseOptions {
4 | context?: object,
5 | property?: string
6 | }
7 |
8 | declare const VuetifyDialogPlugin: VuetifyDialogPlugin
9 | export default VuetifyDialogPlugin
10 |
11 | export interface VuetifyDialogPlugin {
12 | install: PluginFunction
13 | }
14 |
15 | export interface DialogAction {
16 | text: string
17 | key?: string | boolean
18 | component?: string
19 | flat? : boolean
20 | outlined? : boolean
21 | icon? : string
22 | color? : string
23 | rounded? : boolean
24 | disabled?: boolean
25 | handler? (action: any): void | any | Promise
26 | }
27 |
28 | export type DialogActions = Record
29 |
30 | interface DialogActionable {
31 | actions?: Array | Array | DialogActions | Record
32 | handler? (action: any): void | any
33 | }
34 |
35 | export interface DialogObject {
36 | show (): Promise | DialogObject | undefined
37 | wait (): Promise
38 | remove (): void
39 | close (): void
40 | showed: boolean
41 | element: Vue['$el']
42 | hasAsyncPreload: boolean
43 | vm: VueConstructor
44 | vmd: Vue.Component
45 | }
46 |
47 | export interface DialogMessageOptions extends DialogActionable {
48 | color?: string
49 | position?: string
50 | timeout?: number
51 | type?: string
52 | outlined?: boolean
53 | prominent?: boolean
54 | dismissible?: boolean
55 | flat?: boolean
56 | centered?: boolean
57 | border?: string
58 | tile?: boolean
59 | dense?: boolean
60 | }
61 |
62 | export interface DialogNotifyOptions extends DialogActionable {
63 | dismissible?: boolean
64 | position?: string
65 | showClose?: boolean
66 | timeout?: number
67 | type?: string
68 | verticalOffset?: number
69 | width?: number
70 | zIndex?: number
71 | flat?: boolean
72 | icon?: string
73 | rounded?: boolean
74 | outlined?: boolean
75 | shaped?: boolean
76 | }
77 |
78 | export interface DialogConfirmOptions extends DialogActionable {
79 | icon?: string | boolean
80 | persistent?: boolean
81 | showClose?: boolean
82 | scrollable?: Boolean
83 | text?: string
84 | title?: string
85 | type?: string
86 | waitForResult?: boolean
87 | width?: number
88 | value?: any
89 | }
90 |
91 | interface DialogOptionsWait {
92 | waitForResult: true
93 | [P: string]: any
94 | }
95 | interface DialogOptionsNoWait {
96 | waitForResult?: false
97 | [P: string]: any
98 | }
99 |
100 | /** This is manager from vuedl/src/manager */
101 | export interface VuetifyDialog {
102 | component (name: string, options: object | VueConstructor): void
103 | create(component: object | VueConstructor): DialogObject
104 | show(component: object | VueConstructor, params?: DialogOptionsWait): Promise
105 | show(component: object | VueConstructor, params?: DialogOptionsNoWait): Promise>
106 | showAndWait(component: object | VueConstructor, props?: Record): Promise
107 | // implemented dialogs
108 | confirm (options: DialogConfirmOptions): Promise
109 | prompt (options: DialogConfirmOptions): Promise
110 | warning (options: DialogConfirmOptions): Promise
111 | error (options: DialogConfirmOptions): Promise
112 | info (options: DialogConfirmOptions): Promise
113 | notify: {
114 | error (text: string, options?: DialogNotifyOptions): Promise
115 | warning (text: string, options?: DialogNotifyOptions): Promise
116 | info (text: string, options?: DialogNotifyOptions): Promise
117 | success (text: string, options?: DialogNotifyOptions): Promise
118 | }
119 | message: {
120 | error (text: string, options?: DialogMessageOptions): Promise
121 | warning (text: string, options?: DialogMessageOptions): Promise
122 | info (text: string, options?: DialogMessageOptions): Promise
123 | success (text: string, options?: DialogMessageOptions): Promise
124 | }
125 |
126 | on(evt: string, callback: (...args: any[]) => any): void
127 | off(evt: string, callback: (...args: any[]) => any): void
128 | once(evt: string, callback: (...args: any[]) => any): void
129 | context: Record
130 | }
131 |
132 | declare module 'vue/types/vue' {
133 | interface Vue {
134 | $dialog: VuetifyDialog
135 | }
136 | }
137 |
138 | declare module '@nuxt/types' {
139 | // interface Configuration {
140 | // dialog?: VuetifyDialog;
141 | // }
142 | interface Context {
143 | $dialog: VuetifyDialog;
144 | }
145 |
146 | interface NuxtAppOptions {
147 | $dialog: VuetifyDialog
148 | }
149 | }
150 | // declare module 'vue/types/options' {
151 | // interface ComponentOptions {
152 | // asyncData? (context: object): Promise
153 | // }
154 | // }
155 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 |
3 | module.exports = {
4 | entry: './src/index.js',
5 | output: {
6 | path: path.resolve(__dirname, 'dist'),
7 | filename: 'bundle.js'
8 | }
9 | }
10 |
--------------------------------------------------------------------------------