feat: create Vue Pluign for package

- add plugin methods to open dialogs programmatically (without template)
- add plugin methods injection
- add GDialogRoot to display programmatically added dialogs

Author: MichaelGitArt

types/index.d.ts renamed to @types/index.d.ts

@@ -3,4 +3,4 @@
 const shell = require('shelljs')
 
 shell.exec('vue-tsc --noEmit && vite build')
-shell.exec('cp ./types/* ./dist')
+shell.exec('cp ./@types/* ./dist')

scripts/build.js

@@ -0,0 +1,41 @@
+<template>
+  <Component
+    :is="modal.component"
+    v-for="(modal, index) in dialogs"
+    :key="modal.id"
+    v-bind="modal.props"
+    @update:modelValue="onClose(index)"
+  />
+</template>
+
+<script lang="ts">
+import { inject } from 'vue'
+
+import { DialogMethodsKey, DialogDialogListKey } from '../index'
+
+export default {
+  name: 'GDialogRoot',
+
+  setup() {
+    const dialogs = inject(DialogDialogListKey, [])
+    const $dialog = inject(DialogMethodsKey, null)
+
+    if(!$dialog) {
+      console.error('The plugin is not initialized')
+    }
+
+    function onClose(index: number) {
+      if(!$dialog) {
+        throw new Error('good')
+      }
+
+      $dialog.remove(index)
+    }
+
+    return {
+      dialogs,
+      onClose,
+    }
+  },
+}
+</script>

src/components/GDialogRoot.vue

@@ -9,10 +9,17 @@ type UseLazyActivationFunc = (baseState: Ref<boolean>) => {
 }
 
 export const useLazyActivation: UseLazyActivationFunc = (baseState) => {
-  const activatedOnce = ref(baseState.value)
-  const active = ref(baseState.value)
+  const activatedOnce = ref(false)
+  const active = ref(false)
   const deactivating = ref(false)
 
+  if(baseState.value) {
+    activatedOnce.value = true
+    nextTick(() => {
+      active.value = true
+    })
+  }
+
   watch(
     () => baseState.value,
     value => {

src/composable/lazyActivation.ts

@@ -1 +1,9 @@
+// standalone component
 export { default as GDialog } from './components/GDialog.vue'
+
+// using 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'

src/index.ts

@@ -0,0 +1,38 @@
+import {
+  reactive, InjectionKey, shallowRef, Plugin,
+} from 'vue'
+
+import { DialogMethods, IDialogItem } from './types/Plugin'
+
+export const DialogMethodsKey: InjectionKey<DialogMethods> = Symbol('DialogMethod')
+export const DialogDialogListKey: InjectionKey<IDialogItem[]> = Symbol('DialogList')
+
+const dialogs = reactive<IDialogItem[]>([])
+
+export const plugin: Plugin = {
+  install: (app) => {
+    app.provide(DialogMethodsKey, {
+      add: ({ 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)
+      },
+    })
+
+    app.provide(DialogDialogListKey, dialogs)
+  },
+}

src/plugin.ts

@@ -0,0 +1,25 @@
+import {
+  Component, ShallowUnwrapRef,
+} from 'vue'
+
+export interface IDialogItem {
+  component: ShallowUnwrapRef<Component>
+  id: number
+  props: {
+    modelValue: boolean
+  }
+}
+
+type DialogAddMethod = <T>(params: {
+  component: Component
+  props?: Omit<T, 'modelValue'> | undefined
+}) => void
+
+type DialogRemoveMethod = (
+  index: number
+) => void
+
+export interface DialogMethods {
+  add: DialogAddMethod
+  remove: DialogRemoveMethod
+}