feat: change plugin api

- combine the properties of the plugin into one $dialog
- make $dialog accessible from option api

Author: MichaelGitArt

Diff for: src/components/GDialogRoot.vue

@@ -11,25 +11,23 @@
 <script lang="ts">
 import { inject } from 'vue'
 
-import { DialogMethodsKey, DialogDialogListKey } from '../index'
+import { dialogInjectionKey } from '../index'
 
 export default {
   name: 'GDialogRoot',
 
   setup() {
-    const dialogs = inject(DialogDialogListKey, [])
-    const $dialog = inject(DialogMethodsKey, null)
+    const {
+      dialogs,
+      removeDialog,
+    } = inject(dialogInjectionKey)!
 
-    if(!$dialog) {
-      console.error('The plugin is not initialized')
+    if(!dialogs) {
+      console.error('The giart-vue-dialog plugin is not initialized')
     }
 
     function onClose(index: number) {
-      if(!$dialog) {
-        throw new Error('good')
-      }
-
-      $dialog.remove(index)
+      removeDialog(index)
     }
 
     return {

Diff for: src/index.ts

@@ -4,8 +4,10 @@ import './scss/main.scss'
 export { default as GDialog } from './components/GDialog.vue'
 
 // using plugin
+export * from './types/Plugin'
+
 export { default as GDialogRoot } from './components/GDialogRoot.vue'
 
-export { DialogDialogListKey as DialogDialogListKey } from './plugin'
-export { DialogMethodsKey as DialogMethodsKey } from './plugin'
-export { plugin as plugin } from './plugin'
+export {
+  plugin, dialogInjectionKey,
+} from './plugin'

Diff for: src/plugin.ts

@@ -1,38 +1,41 @@
 import {
-  reactive, InjectionKey, shallowRef, Plugin,
+  reactive, shallowRef, Plugin,
 } from 'vue'
 
-import { DialogMethods, IDialogItem } from './types/Plugin'
-
-export const DialogMethodsKey: InjectionKey<DialogMethods> = Symbol('DialogMethod')
-export const DialogDialogListKey: InjectionKey<IDialogItem[]> = Symbol('DialogList')
+import {
+  IDialog, IDialogItem, DialogInjectionKey,
+} from './types/Plugin'
 
 const dialogs = reactive<IDialogItem[]>([])
+const $dialog: IDialog = {
+  dialogs,
 
-export const plugin: Plugin = {
-  install: (app) => {
-    app.provide(DialogMethodsKey, {
-      add: ({ component, props }) => {
-        dialogs.push({
-          component: shallowRef(component),
-          id: Date.now() + Math.random(),
+  addDialog: ({ component, props }) => {
+    dialogs.push({
+      component: shallowRef(component),
+      id: Date.now() + Math.random(),
 
-          props: {
-            modelValue: true,
-            ...props,
-          },
-        })
-      },
-
-      remove: (index) => {
-        const dialog = dialogs[index]
-        dialog.props.modelValue = false
-        setTimeout(() => {
-          dialogs.splice(index, 1)
-        }, 150)
+      props: {
+        modelValue: true,
+        ...props,
       },
     })
+  },
 
-    app.provide(DialogDialogListKey, dialogs)
+  removeDialog: (index) => {
+    const dialog = dialogs[index]
+    dialog.props.modelValue = false
+    setTimeout(() => {
+      dialogs.splice(index, 1)
+    }, 150)
+  },
+}
+
+export const dialogInjectionKey: DialogInjectionKey = Symbol('GDialog')
+
+export const plugin: Plugin = {
+  install: (app) => {
+    app.provide(dialogInjectionKey, $dialog)
+    app.config.globalProperties.$dialog = $dialog
   },
 }

Diff for: src/types/Plugin.ts

@@ -1,5 +1,5 @@
 import {
-  Component, ShallowUnwrapRef,
+  Component, ShallowUnwrapRef, InjectionKey,
 } from 'vue'
 
 export interface IDialogItem {
@@ -19,7 +19,13 @@ type DialogRemoveMethod = (
   index: number
 ) => void
 
-export interface DialogMethods {
-  add: DialogAddMethod
-  remove: DialogRemoveMethod
+interface IDialogMethods {
+  addDialog: DialogAddMethod
+  removeDialog: DialogRemoveMethod
 }
+
+export interface IDialog extends IDialogMethods {
+  dialogs: IDialogItem[]
+}
+
+export type DialogInjectionKey = InjectionKey<IDialog>