import { defineComponent , h , ref , RendererElement , Transition , watch , withDirectives } from 'vue' ; import { CBackdrop } from '../backdrop' ; import { vVisible } from '../../directives/v-c-visible' ; const COffcanvas = defineComponent ( { name : 'COffcanvas' , props : { /**
         * Apply a backdrop on body while offcanvas is open.
         */ backdrop : { type : Boolean , default : true , require : false , } , /**
         * Closes the offcanvas when escape key is pressed.
         */ keyboard : { type : Boolean , default : true , require : false , } , values placement : { type : String , default : undefined , require : true , validator : ( value ) => { return [ 'start' , 'end' , 'top' , 'bottom' ] . includes ( value ) ; } , } , /**
         * Allow body scrolling while offcanvas is open
         */ scroll : { type : Boolean , default : false , required : false , } , /**
         * Toggle the visibility of offcanvas component.
         */ visible : { type : Boolean , require : false , } , } , emits : [ 'hide' , 'show' , ] , setup ( props , { slots , emit } ) { const offcanvasRef = ref ( ) ; const visible = ref ( props . visible ) ; watch ( ( ) => props . visible , ( ) => { visible . value = props . visible ; } ) ; watch ( visible , ( ) => { if ( visible . value ) { if ( ! props . scroll ) { document . body . style . overflow = 'hidden' ; document . body . style . paddingRight = '0px' ; } return ; } if ( ! props . scroll ) { document . body . style . removeProperty ( 'overflow' ) ; document . body . style . removeProperty ( 'padding-right' ) ; } } ) ; const handleEnter = ( el , done ) => { emit ( 'show' ) ; el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; setTimeout ( ( ) => { el . style . visibility = 'visible' ; el . classList . add ( 'show' ) ; } , 1 ) ; } ; const handleAfterEnter = ( ) => { window . addEventListener ( 'mousedown' , handleMouseDown ) ; window . addEventListener ( 'keyup' , handleKeyUp ) ; } ; const handleLeave = ( el , done ) => { el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; window . removeEventListener ( 'mousedown' , handleMouseDown ) ; window . removeEventListener ( 'keyup' , handleKeyUp ) ; el . classList . remove ( 'show' ) ; } ; const handleAfterLeave = ( el ) => { el . style . visibility = 'hidden' ; } ; const handleDismiss = ( ) => { visible . value = false ; emit ( 'hide' ) ; } ; const handleKeyUp = ( event ) => { if ( offcanvasRef . value && ! offcanvasRef . value . contains ( event . target as HTMLElement ) ) { if ( event . key === 'Escape' && props . keyboard && props . backdrop ) { return handleDismiss ( ) ; } } } ; const handleMouseDown = ( event ) => { window . addEventListener ( 'mouseup' , ( ) => handleMouseUp ( event ) , { once : true } ) ; } ; const handleMouseUp = ( event ) => { if ( offcanvasRef . value && ! offcanvasRef . value . contains ( event . target as HTMLElement ) ) { props . backdrop && handleDismiss ( ) ; } } ; return ( ) => [ h ( Transition , { css : false , onEnter : ( el , done ) => handleEnter ( el , done ) , onAfterEnter : ( ) => handleAfterEnter ( ) , onLeave : ( el , done ) => handleLeave ( el , done ) , onAfterLeave : ( el ) => handleAfterLeave ( el ) , } , ( ) => withDirectives ( h ( 'div' , { class : [ 'offcanvas' , { [ `offcanvas-${ props . placement }` ] : props . placement , } , ] , ref : offcanvasRef , role : 'dialog' , } , slots . default && slots . default ( ) ) , [ [ vVisible , props . visible ] ] ) ) , props . backdrop && h ( CBackdrop , { class : 'offcanvas-backdrop' , visible : visible . value , } ) , ] ; } , } ) ; export { COffcanvas } ;