Chore(lib): add TS support for directive

Author: Godofbrowser

docs/index.md

@@ -125,7 +125,7 @@ export default {
 </template>
 <script setup>
     import {inject} from "vue";
-    const $dialog = inject('$dialog')
+    const $dialog = inject(Symbol.for('$dialog'))
     const openDialog = () => $dialog.alert('Hello world!')
 </script>
 ```
@@ -145,19 +145,6 @@ Typescript is supported out of the box using (SFC: be sure to add the `lang="ts"
 - Type augmentation for the options API `this.$dialog.alert('Hello!')`
 - Type augmentation for the directives API `v-confirm="'Hello!'"`
 
-```vue title="App.vue"
-<template>
-    <button @click="openDialog">Open dialog</button>
-</template>
-<script lang="ts" setup>
-    import {inject} from "vue";
-    import {injectionKey} from 'vuejs-dialog'
-    
-    const $dialog = inject(injectionKey)
-    const openDialog = () => $dialog.alert('Hello world!')
-</script>
-```
-
 
 ::: info
 You may want to look at the [module resolution option](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#--moduleresolution-bundler) (introduced in Typescript 5.0) if you are experiencing [issues](https://stackoverflow.com/questions/75870063/vscode-and-typescript-5-moduleresolution-bundler) with typescript especially if your config is set to "bundler"

src/plugin/directive.dialog.ts

@@ -1,11 +1,12 @@
+import {Directive} from "vue";
 import { noop, clickNode, cloneObj } from './utilities'
 import {CONFIRM_TYPES, DIRECTIVE_ATTRIBUTE_KEY} from './constants'
-import type PromiseDialog from './promise.dialog'
+import type { PromiseDialog } from './promise.dialog'
+import type {DialogResolverPayload} from "./interface";
 
 
 export class ConfirmDirective {
     shouldIgnoreClick = false
-    bindingOptions = {}
 
     constructor(private readonly dialog: PromiseDialog) {}
 
@@ -33,10 +34,10 @@ export class ConfirmDirective {
         if (binding?.value && binding.value.ok) {
             return dialog => binding.value.ok({ ...dialog, node: el })
         }
-        return dialog => {
+        return (dialog: DialogResolverPayload) => {
             // If we got here, it means the default action is to be executed
-            // We'll then stop the loader if it's enabled and close the dialog
-            dialog.loading && dialog.close()
+            // We'll then close the dialog even if it has loading enabled
+            dialog.close && dialog.close()
             this.shouldIgnoreClick = true
             clickNode(el)
             this.shouldIgnoreClick = false
@@ -67,7 +68,7 @@ export class ConfirmDirective {
             })
     }
 
-    public static createInstaller(dialog: PromiseDialog) {
+    public static createInstaller(dialog: PromiseDialog): Directive {
         const directive = new ConfirmDirective(dialog)
         return {
             mounted: (el, binding) => {

src/plugin/interface.ts

@@ -44,10 +44,11 @@ export interface DialogOptions {
 }
 
 export type DialogResolverPayload = {
-    data: string;
+    canceled: boolean;
+    data?: string;
     close?: () => void;
     node?: HTMLElement;
-} | { canceled: boolean; }
+}
 
 export interface DialogWindowOptions extends DialogOptions {
     message: MessageWithTitle;

src/plugin/promise.dialog.ts

@@ -14,11 +14,11 @@ import {ConfirmDirective} from "./directive.dialog";
 interface DialogPluginOptions extends Omit<DialogWindowOptions, 'id'>{}
 
 export const propertyKey = '$dialog'
-export const injectionKey: InjectionKey<PromiseDialog> = Symbol(propertyKey)
+export const injectionKey: InjectionKey<PromiseDialog> = Symbol.for(propertyKey)
 
 export class PromiseDialog {
     private dgApp: App;
-    private dgAppComponentInstance: ComponentInstance<DialogComponent>;
+    private dgAppComponentInstance: ComponentInstance<typeof DialogComponent>;
 
     /**
      * @internal
@@ -86,7 +86,7 @@ export class PromiseDialog {
         }
 
         this.dgApp = dialogApp
-        this.dgAppComponentInstance = dialogApp.mount(node) as ComponentInstance<DialogComponent>
+        this.dgAppComponentInstance = dialogApp.mount(node) as ComponentInstance<typeof DialogComponent>
         this.mounted = true
     }
 

src/plugin/vue-shim.d.ts

@@ -1,7 +1,12 @@
 import {PromiseDialog} from "./promise.dialog";
+import {ConfirmDirective} from './directive.dialog'
 
 declare module 'vue' {
     export interface ComponentCustomProperties {
         $dialog: typeof PromiseDialog;
     }
+
+    export interface GlobalDirectives {
+        confirm: ReturnType<typeof ConfirmDirective.createInstaller>;
+    }
 }