Merge pull request #21 from ThomasLeconte/feat/improvements

ThomasLeconte · web-flow · commit f0361201a9d7 · 2024-06-04T19:36:27.000+02:00
Feat/improvements
diff --git a/README.md b/README.md
@@ -25,8 +25,9 @@ import vuetifyInstance from './plugins/vuetify' //Or wherever you have your vuet
 import {Vuetify3Dialog} from 'vuetify3-dialog'
 
 const app = createApp(App)
+app.use(vuetifyInstance); //You must use Vuetify before Vuetify3Dialog
+        ...
 app.use(Vuetify3Dialog, {
-  vuetify: vuetifyInstance, //You must pass your vuetify instance as an option
   defaults: {
     //You can pass default options for dialogs, dialog's card, snackbars or bottom-sheets here
   }
diff --git a/cypress/test-server/package-lock.json b/cypress/test-server/package-lock.json
diff --git a/cypress/test-server/package.json b/cypress/test-server/package.json
@@ -13,7 +13,7 @@
     "roboto-fontface": "*",
     "vue": "^3.2.0",
     "vue-router": "^4.0.0",
-    "vuetify": "^3.5.17",
+    "vuetify": "^3.6.8",
     "vuetify3-dialog": "file:../..",
     "webfontloader": "^1.0.0"
   },
diff --git a/cypress/test-server/src/plugins/index.ts b/cypress/test-server/src/plugins/index.ts
@@ -18,5 +18,6 @@ export function registerPlugins (app: App) {
   app
     .use(vuetify)
     .use(router)
-    .use(Vuetify3Dialog, { vuetify, defaults: { notify: {location: 'top left'} } })
+    .use(Vuetify3Dialog)
+    // .use(Vuetify3Dialog, { defaults: { notify: {location: 'top left'} } })
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/BottomSheet.ts b/src/BottomSheet.ts
@@ -1,13 +1,12 @@
-import Notifier from 'Notifier';
 import PluginContext from 'PluginContext';
 import { CreateBottomSheetOptions } from 'types';
-import { createApp } from 'vue';
+import { h, render } from 'vue';
 import { VListItem } from 'vuetify/lib/components/VList/index.mjs';
 import BottomSheet from './components/BottomSheet.vue';
 
-export default class BottomSheets extends Notifier {
-  initContext(): void {
-    this._app.config.globalProperties.$bottomSheet = {
+export default class BottomSheets {
+  public static initContext(): void {
+    PluginContext.getApp().config.globalProperties.$bottomSheet = {
       create: createBottomSheet,
       createList: createBottomSheetList,
     };
@@ -39,26 +38,21 @@ export function createBottomSheet(options: CreateBottomSheetOptions) {
 
     const div = document.createElement('div');
     return new Promise((resolve, reject) => {
-      const _app = createApp(BottomSheet, {
+      const props = {
         bottomSheetOptions:
-          options?.bottomSheetOptions || PluginContext.getPluginOptions().defaults?.bottomSheet || undefined,
+          options?.bottomSheetOptions || PluginContext.getPluginOptions()?.defaults?.bottomSheet || undefined,
         dialogOptions: options?.dialogOptions,
         items: options?.items,
         title: options?.title,
         text: options?.text,
         onCloseBottomSheet: (value: string | boolean) => {
           resolve(value);
-          setTimeout(() => {
-            _app.unmount();
-            document.body.removeChild(div);
-          }, 500);
         },
-      });
+      };
 
-      _app.use(PluginContext.getVuetify());
-
-      document.body.appendChild(div);
-      _app.mount(div);
+      const vNode = h(BottomSheet, props);
+      vNode.appContext = PluginContext.getApp()._context;
+      render(vNode, div);
     });
   } catch (err: any) {
     console.error(`[Vuetify3Dialog] ${err.message} [${err.stack}]`);
diff --git a/src/Dialog.ts b/src/Dialog.ts
@@ -1,12 +1,11 @@
-import Notifier from 'Notifier';
 import PluginContext from 'PluginContext';
 import { BasicDialogOptions, ConfirmDialogOptions, CreateDialogOptions } from 'types';
-import { createApp } from 'vue';
+import { h, render } from 'vue';
 import Dialog from './components/Dialog.vue';
 
-export default class Dialogs extends Notifier {
-  initContext(): void {
-    this._app.config.globalProperties.$dialog = {
+export default class Dialogs {
+  public static initContext(): void {
+    PluginContext.getApp().config.globalProperties.$dialog = {
       create: createDialog,
       confirm: confirmDialog,
       warn: warnDialog,
@@ -34,31 +33,26 @@ export function createDialog(options: CreateDialogOptions) {
     }
 
     return new Promise((resolve, reject) => {
-      const _app = createApp(Dialog, {
+      const props = {
         title: options.title,
         text: options.text,
         buttons: options.buttons,
         icon: options.icon,
         level: options.level,
         customComponent: options.customComponent,
         dialogOptions: options.dialogOptions ||
-          PluginContext.getPluginOptions().defaults?.dialog?.component || {
+          PluginContext.getPluginOptions()?.defaults?.dialog?.component || {
             width: '400px',
           },
-        cardOptions: options.cardOptions || PluginContext.getPluginOptions().defaults?.dialog?.card || undefined,
+        cardOptions: options.cardOptions || PluginContext.getPluginOptions()?.defaults?.dialog?.card || undefined,
         onCloseDialog: (value: string | boolean) => {
           resolve(value);
-          setTimeout(() => {
-            _app.unmount();
-            document.body.removeChild(div);
-          }, 500);
         },
-      });
+      };
 
-      _app.use(PluginContext.getVuetify());
-
-      document.body.appendChild(div);
-      _app.mount(div);
+      const vNode = h(Dialog, props);
+      vNode.appContext = PluginContext.getApp()._context;
+      render(vNode, div);
     });
   } catch (err: any) {
     console.error(`[Vuetify3Dialog] ${err.message} [${err.stack}]`);
diff --git a/src/Notifier.ts b/src/Notifier.ts
diff --git a/src/PluginContext.ts b/src/PluginContext.ts
@@ -3,23 +3,24 @@ import { App } from 'vue';
 
 export default class PluginContext {
   private static pluginOptions: PluginOptions;
+  private static app: App;
 
-  constructor(app: App, _pluginOptions: PluginOptions) {
+  constructor(app: App, _pluginOptions?: PluginOptions) {
     if (!app) throw new Error('Error during initialization : app is required');
-    if (!_pluginOptions) throw new Error('Error during initialization : plugin options is required');
-    if (!_pluginOptions.vuetify)
-      throw new Error(
-        'Error during initialization : vuetify is required. Please declare it with Vue.use(Dialogs, { vuetify })',
-      );
+    PluginContext.app = app;
 
-    PluginContext.pluginOptions = _pluginOptions;
+    const vuetify = app._context.mixins.find((mixin) => mixin.computed && mixin.computed.$vuetify);
+    if (!vuetify)
+      throw new Error('Error during initialization : vuetify is required. Please declare it with Vue.use(Vuetify)');
+
+    if (_pluginOptions) PluginContext.pluginOptions = _pluginOptions;
   }
 
   static getPluginOptions(): PluginOptions {
     return PluginContext.pluginOptions;
   }
 
-  static getVuetify(): PluginOptions['vuetify'] {
-    return PluginContext.pluginOptions.vuetify;
+  static getApp(): App {
+    return PluginContext.app;
   }
 }
diff --git a/src/Snackbar.ts b/src/Snackbar.ts
@@ -1,13 +1,12 @@
-import Notifier from 'Notifier';
 import PluginContext from 'PluginContext';
 import { CreateNotifyOptions } from 'types';
-import { createApp } from 'vue';
+import { h, render } from 'vue';
 import { VSnackbar } from 'vuetify/lib/components/VSnackbar/index.mjs';
 import Snackbar from './components/Snackbar.vue';
 
-export default class SnackBar extends Notifier {
-  initContext(): void {
-    this._app.config.globalProperties.$notify = {
+export default class SnackBar {
+  public static initContext(): void {
+    PluginContext.getApp().config.globalProperties.$notify = {
       create: createNotification,
       warn: notifyWarning,
       error: notifyError,
@@ -18,15 +17,15 @@ export default class SnackBar extends Notifier {
 }
 
 export function notifyWarning(text: string, notifyOptions?: VSnackbar['$props']) {
-  return createNotification({ text, level: 'warning', ...notifyOptions });
+  return createNotification({ text, level: 'warning', notifyOptions });
 }
 
 export function notifyError(text: string, notifyOptions?: VSnackbar['$props']) {
   return createNotification({ text, level: 'error', notifyOptions });
 }
 
 export function notifyInfo(text: string, notifyOptions?: VSnackbar['$props']) {
-  return createNotification({ text, level: 'info', ...notifyOptions });
+  return createNotification({ text, level: 'info', notifyOptions });
 }
 
 export function notifySuccess(text: string, notifyOptions?: VSnackbar['$props']) {
@@ -38,32 +37,27 @@ export function createNotification(options: CreateNotifyOptions) {
     const potentialLocation =
       options.location ||
       options.notifyOptions?.location ||
-      PluginContext.getPluginOptions().defaults?.notify?.location ||
+      PluginContext.getPluginOptions()?.defaults?.notify?.location ||
       'top right';
     let location = potentialLocation.split(' ')[0] || 'top';
     let div = document.createElement('div');
 
     if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
 
     return new Promise((resolve, reject) => {
-      const _app = createApp(Snackbar, {
+      const props = {
         text: options.text,
         level: options.level,
         location: potentialLocation,
-        notifyOptions: options.notifyOptions || PluginContext.getPluginOptions().defaults?.notify || undefined,
+        notifyOptions: options.notifyOptions || PluginContext.getPluginOptions()?.defaults?.notify || undefined,
         onCloseSnackbar: () => {
           resolve(true);
-          setTimeout(() => {
-            _app.unmount();
-            document.body.removeChild(div);
-          }, 500);
         },
-      });
+      };
 
-      _app.use(PluginContext.getVuetify());
-
-      document.body.appendChild(div);
-      _app.mount(div);
+      const vNode = h(Snackbar, props);
+      vNode.appContext = PluginContext.getApp()._context;
+      render(vNode, div);
 
       const vuetifyDivOverlay = document.querySelector('.v-overlay-container');
 
diff --git a/src/install.ts b/src/install.ts
@@ -9,9 +9,9 @@ export const Vuetify3Dialog: Plugin = {
   install(app: App, options: PluginOptions) {
     try {
       new PluginContext(app, options);
-      new Dialogs(app).initContext();
-      new SnackBar(app).initContext();
-      new BottomSheets(app).initContext();
+      Dialogs.initContext();
+      SnackBar.initContext();
+      BottomSheets.initContext();
     } catch (err: any) {
       console.error(`[Vuetify3Dialog] ${err.message} [${err.stack}]`);
     }
diff --git a/src/types.ts b/src/types.ts
@@ -7,7 +7,6 @@ import { VListItem } from 'vuetify/lib/components/VList/index.mjs';
 import { VSnackbar } from 'vuetify/lib/components/VSnackbar/index.mjs';
 
 export type PluginOptions = {
-  vuetify: Plugin;
   defaults?: {
     dialog?: {
       component?: VDialog['$props'];
@@ -16,6 +15,7 @@ export type PluginOptions = {
     notify?: VSnackbar['$props'];
     bottomSheet?: VBottomSheet['$props'];
   };
+  vuetify?: Plugin;
 };
 
 export type Level = 'warning' | 'error' | 'info' | 'success';

Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,6 @@ export function registerPlugins (app: App) {`
`18`	`18`	`app`
`19`	`19`	`.use(vuetify)`
`20`	`20`	`.use(router)`
`21`		`- .use(Vuetify3Dialog, { vuetify, defaults: { notify: {location: 'top left'} } })`
	`21`	`+ .use(Vuetify3Dialog)`
	`22`	`+ // .use(Vuetify3Dialog, { defaults: { notify: {location: 'top left'} } })`
`22`	`23`	`}`