import { defineComponent , h , provide , ref , RendererElement , Transition , watch } from 'vue' ; import { CBackdrop } from './../backdrop/CBackdrop' ; const CModal = defineComponent ( { name : 'CModal' , props : { values alignment : { default : 'top' , required : false , validator : ( value ) => { return [ 'top' , 'center' ] . includes ( value ) ; } , } , values backdrop : { type : [ Boolean , String ] , default : true , require : false , } , /**
         * A string of all className you want applied to the modal content component.
         */ contentClassName : { type : String , default : undefined , required : false , } , values fullscreen : { type : [ Boolean , String ] , default : undefined , required : false , validator : ( value ) => { if ( typeof value == 'string' ) { return [ 'sm' , 'md' , 'lg' , 'xl' , 'xxl' ] . includes ( value ) ; } if ( typeof value == 'boolean' ) { return true ; } return false ; } , } , /**
         * Closes the modal when escape key is pressed.
         */ keyboard : { type : Boolean , default : true , required : false , } , /**
         * Create a scrollable modal that allows scrolling the modal body.
         */ scrollable : { type : Boolean , required : false , } , values size : { type : String , default : undefined , required : false , validator : ( value ) => { return [ 'sm' , 'lg' , 'xl' ] . includes ( value ) ; } , } , /**
         * Remove animation to create modal that simply appear rather than fade in to view.
         */ transition : { type : Boolean , default : true , required : false , } , /**
         * Toggle the visibility of alert component.
         */ visible : Boolean , } , emits : [ 'close' , 'close-prevented' , 'show' , ] , setup ( props , { slots , attrs , emit } ) { const modalRef = ref ( ) ; const modalContentRef = ref ( ) ; const visible = ref ( props . visible ) ; watch ( ( ) => props . visible , ( ) => { visible . value = props . visible ; } ) ; const handleEnter = ( el , done ) => { el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; document . body . classList . add ( 'modal-open' ) ; el . style . display = 'block' ; setTimeout ( ( ) => { el . classList . add ( 'show' ) ; } , 1 ) ; emit ( 'show' ) ; } ; const handleAfterEnter = ( ) => { window . addEventListener ( 'mousedown' , handleMouseDown ) ; window . addEventListener ( 'keyup' , handleKeyUp ) ; } ; const handleLeave = ( el , done ) => { el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; document . body . classList . remove ( 'modal-open' ) ; el . classList . remove ( 'show' ) ; } ; const handleAfterLeave = ( el ) => { window . removeEventListener ( 'mousedown' , handleMouseDown ) ; window . removeEventListener ( 'keyup' , handleKeyUp ) ; el . style . display = 'none' ; } ; const handleDismiss = ( ) => { emit ( 'close' ) ; visible . value = false ; } ; const handleKeyUp = ( event ) => { if ( modalContentRef . value && ! modalContentRef . value . contains ( event . target as HTMLElement ) ) { if ( props . backdrop !== 'static' && event . key === 'Escape' && props . keyboard ) { handleDismiss ( ) ; } if ( props . backdrop === 'static' ) { modalRef . value . classList . add ( 'modal-static' ) ; emit ( 'close-prevented' ) ; setTimeout ( ( ) => { modalRef . value . classList . remove ( 'modal-static' ) ; } , 300 ) ; } } } ; const handleMouseDown = ( event ) => { window . addEventListener ( 'mouseup' , ( ) => handleMouseUp ( event ) , { once : true } ) ; } ; const handleMouseUp = ( event ) => { if ( modalContentRef . value && ! modalContentRef . value . contains ( event . target as HTMLElement ) ) { if ( props . backdrop !== 'static' ) { handleDismiss ( ) ; } if ( props . backdrop === 'static' ) { modalRef . value . classList . add ( 'modal-static' ) ; setTimeout ( ( ) => { modalRef . value . classList . remove ( 'modal-static' ) ; } , 300 ) ; } } } ; provide ( 'handleDismiss' , handleDismiss ) ; return ( ) => [ h ( Transition , { onEnter : ( el , done ) => handleEnter ( el , done ) , onAfterEnter : ( ) => handleAfterEnter ( ) , onLeave : ( el , done ) => handleLeave ( el , done ) , onAfterLeave : ( el ) => handleAfterLeave ( el ) , } , ( ) => visible . value && h ( 'div' , { class : [ 'modal' , { [ 'fade' ] : props . transition , } , attrs . class , ] , ref : modalRef , } , h ( 'div' , { class : [ 'modal-dialog' , { 'modal-dialog-centered' : props . alignment === 'center' , [ `modal-fullscreen-${ props . fullscreen }-down` ] : props . fullscreen && typeof props . fullscreen === 'string' , 'modal-fullscreen' : props . fullscreen && typeof props . fullscreen === 'boolean' , [ 'modal-dialog-scrollable' ] : props . scrollable , [ `modal-${ props . size }` ] : props . size , } , ] , role : 'dialog' , } , h ( 'div' , { class : [ 'modal-content' , props . contentClassName ] , ref : modalContentRef } , slots . default && slots . default ( ) ) ) ) ) , props . backdrop && h ( CBackdrop , { class : 'modal-backdrop' , visible : visible . value , } ) , ] ; } , } ) ; export { CModal } ;