Chore: add more typescript support

Author: Godofbrowser

package-lock.json

@@ -37,6 +37,7 @@
     "sass": "^1.77.6",
     "typescript": "~5.4.0",
     "vite": "^5.1.6",
+    "vite-plugin-dts": "^3.9.1",
     "vite-plugin-vue-devtools": "^7.0.18",
     "vitest": "^1.4.0",
     "vue-tsc": "^2.0.6"

package.json

@@ -1,6 +1,6 @@
 <template>
   <button v-if="visible" :class="['dg-btn', 'dg-btn--ok', {'dg-btn--loading': loading}, {'dg-pull-right': !options.reverse}]"
-          @click.prevent="proceed()" ref="btn" :disabled="is_disabled">
+          @click.prevent="proceed()" ref="btn" :disabled="disabled">
         <span class="dg-btn-content">
             <slot></slot>
             <span v-if="soft_confirm">({{ clicks_remaining }})</span>
@@ -43,6 +43,14 @@ export default defineComponent({
       required: false,
       type: Boolean,
       'default': false
+    },
+    btnState: {
+      required: true,
+      type: Object,
+      'default': {
+        disabled: true,
+        visible: true,
+      }
     }
   },
   mounted(){
@@ -55,16 +63,16 @@ export default defineComponent({
     hard_confirm(){
       return (this.options.type === CONFIRM_TYPES.HARD)
     },
-    is_disabled(){
-      return (this.$parent.okBtnDisabled)
+    disabled(){
+      return this.btnState.disabled
     },
     clicks_remaining(){
       return Math.max((this.options.clicksCount - this.clicks_count), 0)
     }
   },
   methods: {
     proceed(){
-      if(!this.is_disabled && this.validateProceed()){
+      if(!this.disabled && this.validateProceed()){
         this.$emit('click')
       }
     },
@@ -73,7 +81,6 @@ export default defineComponent({
         case CONFIRM_TYPES.SOFT:
           this.clicks_count++
           return (this.clicks_count >= this.options.clicksCount)
-          break;
         case CONFIRM_TYPES.BASIC:
         default:
           return true;

src/plugin/components/OkButton.vue

@@ -3,7 +3,7 @@
 import { noop, clickNode, cloneObj } from './utilities'
 import { CONFIRM_TYPES } from './constants'
 
-const Directives = function (app) {
+const DirectiveDialog = function (app) {
     Object.defineProperties(this, {
         Vue: { get: () => app },
         confirmDefinition: {
@@ -12,21 +12,14 @@ const Directives = function (app) {
     })
 }
 
-Directives.prototype.getConfirmDirective = function (binding) {
+DirectiveDialog.prototype.getConfirmMessage = function (binding) {
     if (binding.value && binding.value.message) {
         return binding.value.message
     }
     return typeof binding.value === 'string' ? binding.value : null
 }
 
-Directives.prototype.getConfirmMessage = function (binding) {
-    if (binding.value && binding.value.message) {
-        return binding.value.message
-    }
-    return typeof binding.value === 'string' ? binding.value : null
-}
-
-Directives.prototype.getOptions = function (binding) {
+DirectiveDialog.prototype.getOptions = function (binding) {
     const options = typeof binding.value === 'object' ? cloneObj(binding.value) : {}
 
     delete options['ok']
@@ -39,7 +32,7 @@ Directives.prototype.getOptions = function (binding) {
     return options
 }
 
-Directives.prototype.getThenCallback = function (binding, el) {
+DirectiveDialog.prototype.getThenCallback = function (binding, el) {
     if (binding.value && binding.value.ok) {
         return dialog => binding.value.ok({ ...dialog, node: el })
     } else {
@@ -60,14 +53,14 @@ Directives.prototype.getThenCallback = function (binding, el) {
     }
 }
 
-Directives.prototype.getCatchCallback = function (binding) {
+DirectiveDialog.prototype.getCatchCallback = function (binding) {
     if (binding.value && binding.value.cancel) {
         return binding.value.cancel
     }
     return noop
 }
 
-Directives.prototype.clickHandler = function (event, el, binding) {
+DirectiveDialog.prototype.clickHandler = function (event, el, binding) {
     event.preventDefault()
     event.stopImmediatePropagation()
 
@@ -82,7 +75,7 @@ Directives.prototype.clickHandler = function (event, el, binding) {
         .catch(catchCallback)
 }
 
-Directives.prototype.defineConfirm = function () {
+DirectiveDialog.prototype.defineConfirm = function () {
     type BindFn = (el: unknown, binding: unknown) => void
     const DirectiveDefinition: {bind: BindFn, unbind: BindFn} = {}
 
@@ -101,4 +94,4 @@ Directives.prototype.defineConfirm = function () {
     return DirectiveDefinition
 }
 
-export default Directives
+export default DirectiveDialog

src/plugin/directives.ts renamed to src/plugin/directive.dialog.ts

@@ -1,99 +1,20 @@
 'use strict'
 
-import Promise from 'promise-polyfill'
-import DialogComponent from './components/DialogApp.vue'
-import { DIALOG_TYPES, DEFAULT_OPTIONS } from './constants'
-import Directives from './directives'
-import { mergeObjs } from './utilities'
-import {createApp} from "vue";
+import DirectiveDialog from './directive.dialog'
 
-import type {App, ComponentInstance} from "vue";
+import type {App} from "vue";
+import type {DialogWindowOptionsInterface} from "./interface";
+import {PromiseDialog} from "./promise.dialog";
 
-enum DialogType {
-    alert = DIALOG_TYPES.ALERT,
-    confirm = DIALOG_TYPES.CONFIRM,
-    prompt = DIALOG_TYPES.PROMPT,
-}
-
-interface DialogWindowOptions {
-    id: string;
-    message: string;
-    window: DialogType;
-    promiseResolver: () => void;
-    promiseRejecter: () => void;
-}
-
-interface DialogPluginOptions extends Omit<DialogWindowOptions, 'id'>{}
-
-const registeredViews = {}
-
-class DialogPluginV3 {
-    private dgApp: ComponentInstance<typeof DialogComponent>;
-
-    private mounted = false;
-    private registeredViews = {}
-
-    constructor(
-        private readonly app: App,
-        private readonly globalOptions: Partial<DialogPluginOptions>,
-    ) {
-        this.globalOptions = mergeObjs(DEFAULT_OPTIONS, globalOptions)
-    }
-
-    public open(type: DialogType, message: string = undefined, localOptions: Partial<DialogWindowOptions> = {}) {
-        this.mountIfNotMounted()
-        return new Promise((resolve, reject) => {
-            localOptions.id = 'dialog.' + Date.now()
-            localOptions.window = type
-            localOptions.message = message
-            localOptions.promiseResolver = resolve
-            localOptions.promiseRejecter = reject
-
-            this.dgApp.commit(mergeObjs(this.globalOptions, localOptions))
-        })
-    }
-
-    public alert(message?: string, options?: Partial<DialogWindowOptions>) {
-        return this.open(DialogType.alert, message, {
-            ...(options || {}),
-            ...(message ? {message} : {}),
-        })
-    }
-
-    public confirm(message?: string, options?: Partial<DialogWindowOptions>) {
-        return this.open(DialogType.confirm, message, {
-            ...(options || {}),
-            ...(message ? {message} : {}),
-        })
-    }
 
-    public prompt(message?: string, options?: Partial<DialogWindowOptions>) {
-        return this.open(DialogType.prompt, message, {
-            ...(options || {}),
-            ...(message ? {message} : {}),
-        })
-    }
-
-    private mountIfNotMounted(): void {
-        if (this.mounted) return
-
-        this.dgApp = (() => {
-            const dialogApp = createApp(DialogComponent)
-            const node = document.createElement('div')
-            document.querySelector('body').appendChild(node)
-            return dialogApp.mount(node) as ComponentInstance<DialogComponent>
-        })()
-
-        this.mounted = true
-    }
-}
+interface DialogPluginOptions extends Omit<DialogWindowOptionsInterface, 'id'>{}
 
-const Plugin = {
+const DialogPlugin = {
     install(app: App, options: DialogPluginOptions) {
-        const DirectivesObj = new Directives(app)
-        app.directive('confirm', DirectivesObj.defineConfirm())
+        const DirectivesObj = new DirectiveDialog(app)
+        app.directive('confirm', DirectivesObj.confirmDefinition)
 
-        const dialog = new DialogPluginV3(app, options)
+        const dialog = new PromiseDialog(app, options)
 
         Object.defineProperties(app.config.globalProperties, {
             $dialog: {
@@ -105,4 +26,4 @@ const Plugin = {
     },
 }
 
-export default Plugin
+export default DialogPlugin

src/plugin/index.ts

@@ -0,0 +1,28 @@
+
+export interface ButtonStateInterface {
+    loading: boolean;
+    disabled: boolean;
+    visible: boolean;
+    options: {[k: string]: any};
+    component: any;
+}
+
+
+export enum DialogTypeEnum {
+    alert = 'alert',
+    confirm = 'confirm',
+    prompt = 'prompt',
+}
+
+export interface DialogWindowOptionsInterface {
+    id: string;
+    message: string;
+    window: DialogTypeEnum;
+    promiseResolver: (payload?: {
+        data: string;
+        node?: HTMLElement;
+        setLoading: (value: boolean) => void;
+        close: (isLoading: boolean) => void;
+    }) => void;
+    promiseRejecter: () => void;
+}

src/plugin/interface.ts

@@ -0,0 +1,75 @@
+'use strict'
+
+import Promise from 'promise-polyfill'
+import DialogComponent from './components/DialogApp.vue'
+import { DEFAULT_OPTIONS } from './constants'
+import { mergeObjs } from './utilities'
+import {createApp} from "vue";
+
+import type {App, ComponentInstance} from "vue";
+import {DialogTypeEnum} from "./interface";
+import type {DialogWindowOptionsInterface} from "./interface";
+
+
+interface DialogPluginOptions extends Omit<DialogWindowOptionsInterface, 'id'>{}
+
+
+export class PromiseDialog {
+    private dgApp: ComponentInstance<typeof DialogComponent>;
+
+    private mounted = false;
+
+    constructor(
+        private readonly app: App,
+        private readonly globalOptions: Partial<DialogPluginOptions>,
+    ) {
+        this.globalOptions = mergeObjs(DEFAULT_OPTIONS, globalOptions)
+    }
+
+    public open(type: DialogTypeEnum, message: string = undefined, localOptions: Partial<DialogWindowOptionsInterface> = {}) {
+        this.mountIfNotMounted()
+        return new Promise((resolve, reject) => {
+            localOptions.id = 'dialog.' + Date.now()
+            localOptions.window = type
+            localOptions.message = message
+            localOptions.promiseResolver = resolve
+            localOptions.promiseRejecter = reject
+
+            this.dgApp.commit(mergeObjs(this.globalOptions, localOptions))
+        })
+    }
+
+    public alert(message?: string, options?: Partial<DialogWindowOptionsInterface>) {
+        return this.open(DialogTypeEnum.alert, message, {
+            ...(options || {}),
+            ...(message ? {message} : {}),
+        })
+    }
+
+    public confirm(message?: string, options?: Partial<DialogWindowOptionsInterface>) {
+        return this.open(DialogTypeEnum.confirm, message, {
+            ...(options || {}),
+            ...(message ? {message} : {}),
+        })
+    }
+
+    public prompt(message?: string, options?: Partial<DialogWindowOptionsInterface>) {
+        return this.open(DialogTypeEnum.prompt, message, {
+            ...(options || {}),
+            ...(message ? {message} : {}),
+        })
+    }
+
+    private mountIfNotMounted(): void {
+        if (this.mounted) return
+
+        this.dgApp = (() => {
+            const dialogApp = createApp(DialogComponent)
+            const node = document.createElement('div')
+            document.querySelector('body').appendChild(node)
+            return dialogApp.mount(node) as ComponentInstance<DialogComponent>
+        })()
+
+        this.mounted = true
+    }
+}

src/plugin/promise.dialog.ts

@@ -0,0 +1,9 @@
+import {createApp} from "vue";
+
+declare module '@vue/runtime-core' {
+    import {PromiseDialog} from "./promise.dialog";
+
+    interface ComponentCustomProperties {
+        $dialog: typeof PromiseDialog
+    }
+}