import { defineComponent , h , ref , RendererElement , Transition , vShow , withDirectives } from 'vue' ; const CTabPane = defineComponent ( { name : 'CTabPane' , props : { /**
         * Toggle the visibility of component.
         */ visible : { type : Boolean , default : false , required : false , } , } , emits : [ 'hide' , 'show' , ] , setup ( props , { slots , emit } ) { const tabPaneRef = ref ( ) ; const firstRender = ref ( true ) ; const handleEnter = ( el , done ) => { firstRender . value = false ; emit ( 'show' ) ; setTimeout ( ( ) => { el . classList . add ( 'show' ) ; } , 1 ) ; el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; } ; const handleLeave = ( el , done ) => { firstRender . value = false ; emit ( 'hide' ) ; el . classList . remove ( 'show' ) ; el . addEventListener ( 'transitionend' , ( ) => { done ( ) ; } ) ; } ; return ( ) => h ( Transition , { onEnter : ( el , done ) => handleEnter ( el , done ) , onLeave : ( el , done ) => handleLeave ( el , done ) , } , ( ) => withDirectives ( h ( 'div' , { class : [ 'tab-pane' , 'fade' , { active : props . visible , show : firstRender . value && props . visible , } , ] , ref : tabPaneRef , } , slots . default && slots . default ( ) ) , [ [ vShow , props . visible ] ] ) ) ; } , } ) ; export { CTabPane } ;