Skip to content

Commit f036120

Browse files
Merge pull request #21 from ThomasLeconte/feat/improvements
Feat/improvements
2 parents a411028 + 259477a commit f036120

File tree

12 files changed

+62
-88
lines changed

12 files changed

+62
-88
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,9 @@ import vuetifyInstance from './plugins/vuetify' //Or wherever you have your vuet
2525
import {Vuetify3Dialog} from 'vuetify3-dialog'
2626

2727
const app = createApp(App)
28+
app.use(vuetifyInstance); //You must use Vuetify before Vuetify3Dialog
29+
...
2830
app.use(Vuetify3Dialog, {
29-
vuetify: vuetifyInstance, //You must pass your vuetify instance as an option
3031
defaults: {
3132
//You can pass default options for dialogs, dialog's card, snackbars or bottom-sheets here
3233
}

cypress/test-server/package-lock.json

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

cypress/test-server/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"roboto-fontface": "*",
1414
"vue": "^3.2.0",
1515
"vue-router": "^4.0.0",
16-
"vuetify": "^3.5.17",
16+
"vuetify": "^3.6.8",
1717
"vuetify3-dialog": "file:../..",
1818
"webfontloader": "^1.0.0"
1919
},

cypress/test-server/src/plugins/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@ export function registerPlugins (app: App) {
1818
app
1919
.use(vuetify)
2020
.use(router)
21-
.use(Vuetify3Dialog, { vuetify, defaults: { notify: {location: 'top left'} } })
21+
.use(Vuetify3Dialog)
22+
// .use(Vuetify3Dialog, { defaults: { notify: {location: 'top left'} } })
2223
}

package-lock.json

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/BottomSheet.ts

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import Notifier from 'Notifier';
21
import PluginContext from 'PluginContext';
32
import { CreateBottomSheetOptions } from 'types';
4-
import { createApp } from 'vue';
3+
import { h, render } from 'vue';
54
import { VListItem } from 'vuetify/lib/components/VList/index.mjs';
65
import BottomSheet from './components/BottomSheet.vue';
76

8-
export default class BottomSheets extends Notifier {
9-
initContext(): void {
10-
this._app.config.globalProperties.$bottomSheet = {
7+
export default class BottomSheets {
8+
public static initContext(): void {
9+
PluginContext.getApp().config.globalProperties.$bottomSheet = {
1110
create: createBottomSheet,
1211
createList: createBottomSheetList,
1312
};
@@ -39,26 +38,21 @@ export function createBottomSheet(options: CreateBottomSheetOptions) {
3938

4039
const div = document.createElement('div');
4140
return new Promise((resolve, reject) => {
42-
const _app = createApp(BottomSheet, {
41+
const props = {
4342
bottomSheetOptions:
44-
options?.bottomSheetOptions || PluginContext.getPluginOptions().defaults?.bottomSheet || undefined,
43+
options?.bottomSheetOptions || PluginContext.getPluginOptions()?.defaults?.bottomSheet || undefined,
4544
dialogOptions: options?.dialogOptions,
4645
items: options?.items,
4746
title: options?.title,
4847
text: options?.text,
4948
onCloseBottomSheet: (value: string | boolean) => {
5049
resolve(value);
51-
setTimeout(() => {
52-
_app.unmount();
53-
document.body.removeChild(div);
54-
}, 500);
5550
},
56-
});
51+
};
5752

58-
_app.use(PluginContext.getVuetify());
59-
60-
document.body.appendChild(div);
61-
_app.mount(div);
53+
const vNode = h(BottomSheet, props);
54+
vNode.appContext = PluginContext.getApp()._context;
55+
render(vNode, div);
6256
});
6357
} catch (err: any) {
6458
console.error(`[Vuetify3Dialog] ${err.message} [${err.stack}]`);

src/Dialog.ts

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import Notifier from 'Notifier';
21
import PluginContext from 'PluginContext';
32
import { BasicDialogOptions, ConfirmDialogOptions, CreateDialogOptions } from 'types';
4-
import { createApp } from 'vue';
3+
import { h, render } from 'vue';
54
import Dialog from './components/Dialog.vue';
65

7-
export default class Dialogs extends Notifier {
8-
initContext(): void {
9-
this._app.config.globalProperties.$dialog = {
6+
export default class Dialogs {
7+
public static initContext(): void {
8+
PluginContext.getApp().config.globalProperties.$dialog = {
109
create: createDialog,
1110
confirm: confirmDialog,
1211
warn: warnDialog,
@@ -34,31 +33,26 @@ export function createDialog(options: CreateDialogOptions) {
3433
}
3534

3635
return new Promise((resolve, reject) => {
37-
const _app = createApp(Dialog, {
36+
const props = {
3837
title: options.title,
3938
text: options.text,
4039
buttons: options.buttons,
4140
icon: options.icon,
4241
level: options.level,
4342
customComponent: options.customComponent,
4443
dialogOptions: options.dialogOptions ||
45-
PluginContext.getPluginOptions().defaults?.dialog?.component || {
44+
PluginContext.getPluginOptions()?.defaults?.dialog?.component || {
4645
width: '400px',
4746
},
48-
cardOptions: options.cardOptions || PluginContext.getPluginOptions().defaults?.dialog?.card || undefined,
47+
cardOptions: options.cardOptions || PluginContext.getPluginOptions()?.defaults?.dialog?.card || undefined,
4948
onCloseDialog: (value: string | boolean) => {
5049
resolve(value);
51-
setTimeout(() => {
52-
_app.unmount();
53-
document.body.removeChild(div);
54-
}, 500);
5550
},
56-
});
51+
};
5752

58-
_app.use(PluginContext.getVuetify());
59-
60-
document.body.appendChild(div);
61-
_app.mount(div);
53+
const vNode = h(Dialog, props);
54+
vNode.appContext = PluginContext.getApp()._context;
55+
render(vNode, div);
6256
});
6357
} catch (err: any) {
6458
console.error(`[Vuetify3Dialog] ${err.message} [${err.stack}]`);

src/Notifier.ts

Lines changed: 0 additions & 11 deletions
This file was deleted.

src/PluginContext.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,24 @@ import { App } from 'vue';
33

44
export default class PluginContext {
55
private static pluginOptions: PluginOptions;
6+
private static app: App;
67

7-
constructor(app: App, _pluginOptions: PluginOptions) {
8+
constructor(app: App, _pluginOptions?: PluginOptions) {
89
if (!app) throw new Error('Error during initialization : app is required');
9-
if (!_pluginOptions) throw new Error('Error during initialization : plugin options is required');
10-
if (!_pluginOptions.vuetify)
11-
throw new Error(
12-
'Error during initialization : vuetify is required. Please declare it with Vue.use(Dialogs, { vuetify })',
13-
);
10+
PluginContext.app = app;
1411

15-
PluginContext.pluginOptions = _pluginOptions;
12+
const vuetify = app._context.mixins.find((mixin) => mixin.computed && mixin.computed.$vuetify);
13+
if (!vuetify)
14+
throw new Error('Error during initialization : vuetify is required. Please declare it with Vue.use(Vuetify)');
15+
16+
if (_pluginOptions) PluginContext.pluginOptions = _pluginOptions;
1617
}
1718

1819
static getPluginOptions(): PluginOptions {
1920
return PluginContext.pluginOptions;
2021
}
2122

22-
static getVuetify(): PluginOptions['vuetify'] {
23-
return PluginContext.pluginOptions.vuetify;
23+
static getApp(): App {
24+
return PluginContext.app;
2425
}
2526
}

src/Snackbar.ts

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import Notifier from 'Notifier';
21
import PluginContext from 'PluginContext';
32
import { CreateNotifyOptions } from 'types';
4-
import { createApp } from 'vue';
3+
import { h, render } from 'vue';
54
import { VSnackbar } from 'vuetify/lib/components/VSnackbar/index.mjs';
65
import Snackbar from './components/Snackbar.vue';
76

8-
export default class SnackBar extends Notifier {
9-
initContext(): void {
10-
this._app.config.globalProperties.$notify = {
7+
export default class SnackBar {
8+
public static initContext(): void {
9+
PluginContext.getApp().config.globalProperties.$notify = {
1110
create: createNotification,
1211
warn: notifyWarning,
1312
error: notifyError,
@@ -18,15 +17,15 @@ export default class SnackBar extends Notifier {
1817
}
1918

2019
export function notifyWarning(text: string, notifyOptions?: VSnackbar['$props']) {
21-
return createNotification({ text, level: 'warning', ...notifyOptions });
20+
return createNotification({ text, level: 'warning', notifyOptions });
2221
}
2322

2423
export function notifyError(text: string, notifyOptions?: VSnackbar['$props']) {
2524
return createNotification({ text, level: 'error', notifyOptions });
2625
}
2726

2827
export function notifyInfo(text: string, notifyOptions?: VSnackbar['$props']) {
29-
return createNotification({ text, level: 'info', ...notifyOptions });
28+
return createNotification({ text, level: 'info', notifyOptions });
3029
}
3130

3231
export function notifySuccess(text: string, notifyOptions?: VSnackbar['$props']) {
@@ -38,32 +37,27 @@ export function createNotification(options: CreateNotifyOptions) {
3837
const potentialLocation =
3938
options.location ||
4039
options.notifyOptions?.location ||
41-
PluginContext.getPluginOptions().defaults?.notify?.location ||
40+
PluginContext.getPluginOptions()?.defaults?.notify?.location ||
4241
'top right';
4342
let location = potentialLocation.split(' ')[0] || 'top';
4443
let div = document.createElement('div');
4544

4645
if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
4746

4847
return new Promise((resolve, reject) => {
49-
const _app = createApp(Snackbar, {
48+
const props = {
5049
text: options.text,
5150
level: options.level,
5251
location: potentialLocation,
53-
notifyOptions: options.notifyOptions || PluginContext.getPluginOptions().defaults?.notify || undefined,
52+
notifyOptions: options.notifyOptions || PluginContext.getPluginOptions()?.defaults?.notify || undefined,
5453
onCloseSnackbar: () => {
5554
resolve(true);
56-
setTimeout(() => {
57-
_app.unmount();
58-
document.body.removeChild(div);
59-
}, 500);
6055
},
61-
});
56+
};
6257

63-
_app.use(PluginContext.getVuetify());
64-
65-
document.body.appendChild(div);
66-
_app.mount(div);
58+
const vNode = h(Snackbar, props);
59+
vNode.appContext = PluginContext.getApp()._context;
60+
render(vNode, div);
6761

6862
const vuetifyDivOverlay = document.querySelector('.v-overlay-container');
6963

0 commit comments

Comments
 (0)