import Vue from 'vue' ; import get from 'lodash.get' ; import { DialogType } from '../types/Dialog' ; import CssClasses from '../types/CssClasses' ; import TDialog from '../components/TDialog' ; import { CustomProp } from '../types/ComponentSettings' ; export type DialogOptions = { titleTag ? : string ; title ? : string ; icon ? : string ; textTag ? : string ; text ? : string ; clickToClose ? : boolean ; escToClose ? : boolean ; cancelButtonText ? : string ; cancelButtonAriaLabel ? : string ; okButtonText ? : string ; okButtonAriaLabel ? : string ; showCloseButton ? : boolean ; disableBodyScroll ? : boolean ; focusOnOpen ? : boolean ; target ? : string ; fixedClasses ? : CssClasses ; classes ? : CssClasses ; variant ? : string ; inputAttributes ? : { [ key ] : string ; } ; } ; export type DialogProps = { titleTag : string ; title ? : string ; icon ? : string ; textTag : string ; text ? : string ; clickToClose : boolean ; escToClose : boolean ; cancelButtonText : string ; cancelButtonAriaLabel ? : string ; okButtonText : string ; okButtonAriaLabel ? : string ; showCloseButton : boolean ; disableBodyScroll : boolean ; focusOnOpen : boolean ; fixedClasses ? : CssClasses ; classes ? : CssClasses ; variant ? : string ; inputAttributes ? : { [ key ] : string ; } ; type : DialogType ; } ; const parseDialogOptions = ( type , settings ? , titleOrDialogOptions ? , text ? , icon ? ) => { type DialogComponent = typeof TDialog & { options : { props : { [ key in keyof DialogProps ] : { default : { default : string | boolean | undefined | null | CssClasses ; } ; } ; } ; } ; } ; const { props } = ( TDialog as DialogComponent ) . options ; const propsData = { type , ... settings , } ; let target = 'body' ; if ( titleOrDialogOptions ) { if ( typeof titleOrDialogOptions === 'object' ) { Object . keys ( props ) . forEach ( ( propName ) => { if ( propName in titleOrDialogOptions ) { const defaultValue = get ( props , `${ propName }.default` ) ; propsData [ propName as keyof DialogProps ] = get ( titleOrDialogOptions , propName , defaultValue ) ; } } ) ; if ( titleOrDialogOptions . target ) { target = titleOrDialogOptions . target ; } } else if ( typeof titleOrDialogOptions === 'string' ) { propsData . title = titleOrDialogOptions ; if ( typeof text !== 'undefined' ) { propsData . text = text ; } if ( typeof icon !== 'undefined' ) { propsData . icon = icon ; } } } return { propsData , target , } ; } ; const buildDialog = ( target , propsData ) => { const domTarget = document . querySelector ( target ) ; if ( ! domTarget ) { throw new Error ( 'Target not found!' ) ; } const instance = new TDialog ( { propsData , } ) ; instance . $mount ( ) ; domTarget . appendChild ( instance . $el ) ; instance . show ( ) ; return new Promise ( ( resolve , reject ) => { instance . resolve = resolve ; instance . reject = reject ; } ) ; } ; const configureDialogGlobals = ( vueInstance , settings ? ) : void => { if ( ! Vue . prototype . $dialog ) { vueInstance . prototype . $dialog = new Vue ( { methods : { alert ( titleOrDialogOptions ? , text ? , icon ? ) { const { propsData , target } = parseDialogOptions ( DialogType . Alert , settings , titleOrDialogOptions , text , icon ) ; return buildDialog ( target , propsData ) ; } , confirm ( titleOrDialogOptions ? , text ? , icon ? ) { const { propsData , target } = parseDialogOptions ( DialogType . Confirm , settings , titleOrDialogOptions , text , icon ) ; return buildDialog ( target , propsData ) ; } , prompt ( titleOrDialogOptions ? , text ? , icon ? ) { const { propsData , target } = parseDialogOptions ( DialogType . Prompt , settings , titleOrDialogOptions , text , icon ) ; return buildDialog ( target , propsData ) ; } , show ( name , params = undefined ) { return new Promise ( ( resolve , reject ) => { this . $emit ( `show-${ name }` , resolve , reject , params ) ; } ) ; } , hide ( name ) { this . $emit ( `hide-${ name }` ) ; } , } , } ) ; } if ( ! vueInstance . prototype . $alert ) { vueInstance . prototype . $alert = vueInstance . prototype . $dialog . alert ; vueInstance . prototype . $confirm = vueInstance . prototype . $dialog . confirm ; vueInstance . prototype . $prompt = vueInstance . prototype . $dialog . prompt ; } } ; export default configureDialogGlobals ;