Chore(lib): update directive typing

Author: Godofbrowser

src/plugin/directive.dialog.ts

@@ -1,16 +1,18 @@
-import {Directive} from "vue";
+import type {Directive, DirectiveBinding} from "vue";
 import { noop, clickNode, cloneObj } from './utilities'
 import {CONFIRM_TYPES, DIRECTIVE_ATTRIBUTE_KEY} from './constants'
 import type { PromiseDialog } from './promise.dialog'
-import type {DialogResolverPayload} from "./interface";
+import type {DialogOptions, DialogResolverPayload} from "./interface";
 
 
+type Binding = DirectiveBinding<DialogOptions | string>
+
 export class ConfirmDirective {
     shouldIgnoreClick = false
 
     constructor(private readonly dialog: PromiseDialog) {}
 
-    private getConfirmMessage(binding: unknown) {
+    private getConfirmMessage(binding: Binding) {
         if (binding.value && binding.value.message) {
             return binding.value.message
         }
@@ -30,9 +32,12 @@ export class ConfirmDirective {
         return options
     }
 
-    private getThenCallback(binding, el): (dialog: unknown) => void {
+    private getProceedCallback(binding: Binding, el: HTMLElement): (dialog: unknown) => void {
         if (binding?.value && binding.value.ok) {
-            return dialog => binding.value.ok({ ...dialog, node: el })
+            return (dialog: DialogResolverPayload) => {
+                const okPayload: DialogResolverPayload = { ...dialog, node: el }
+                binding.value.ok(okPayload)
+            }
         }
         return (dialog: DialogResolverPayload) => {
             // If we got here, it means the default action is to be executed
@@ -44,40 +49,40 @@ export class ConfirmDirective {
         }
     }
 
-    private getCatchCallback(binding?: unknown) {
+    private getCancelCallback(binding?: Binding) {
         if (binding?.value && binding.value.cancel) {
             return binding.value.cancel
         }
         return noop
     }
 
-    private clickHandler(event, el, binding) {
+    private clickHandler(event, el, binding: Binding) {
         if (this.shouldIgnoreClick) return
         event.preventDefault()
         event.stopImmediatePropagation()
 
         const options = this.getOptions(binding)
         const confirmMessage = this.getConfirmMessage(binding)
-        const thenCallback = this.getThenCallback(binding, el)
-        const catchCallback = this.getCatchCallback(binding)
+        const proceedCallback = this.getProceedCallback(binding, el)
+        const cancelCallback = this.getCancelCallback(binding)
 
         this.dialog.confirm(confirmMessage, options)
             .then((payload) => {
-                if (payload.canceled) return catchCallback.call(catchCallback, payload)
-                ;thenCallback.call(thenCallback, payload)
+                if (payload.canceled) return cancelCallback.call(cancelCallback, payload)
+                ;proceedCallback.call(proceedCallback, payload)
             })
     }
 
     public static createInstaller(dialog: PromiseDialog): Directive {
         const directive = new ConfirmDirective(dialog)
         return {
-            mounted: (el, binding) => {
+            mounted: (el, binding: Binding) => {
                 el[DIRECTIVE_ATTRIBUTE_KEY] = el[DIRECTIVE_ATTRIBUTE_KEY] || {}
                 el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler = event => directive.clickHandler(event, el, binding)
 
                 el.addEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
             },
-            updated: (el, binding) => {
+            updated: (el, binding: Binding) => {
                 el.removeEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)
                 el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler = event => directive.clickHandler(event, el, binding)
                 el.addEventListener('click', el[DIRECTIVE_ATTRIBUTE_KEY].clickHandler, true)

src/plugin/index.ts

@@ -1 +1,2 @@
-export * from './promise.dialog'
+export * from './promise.dialog.ts'
+export * from './directive.dialog.ts'