refactor: update event names, add new events

Author: mrholek

src/components/collapse/CCollapse.ts

@@ -11,12 +11,23 @@ const CCollapse = defineComponent({
       required: false,
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
     const handleBeforeEnter = (el: RendererElement) => {
       el.classList.remove('collapse')
       el.classList.add('collapsing')
     }
     const handleEnter = (el: RendererElement, done: () => void) => {
+      emit('show')
       el.addEventListener('transitionend', () => {
         el.classList.add('collapse', 'show')
         done()
@@ -33,6 +44,7 @@ const CCollapse = defineComponent({
       el.style.height = `${el.scrollHeight}px`
     }
     const handleLeave = (el: RendererElement, done: () => void) => {
+      emit('hide')
       el.classList.remove('collapse', 'show')
       el.classList.add('collapsing')
       el.addEventListener('transitionend', () => {

src/components/dropdown/CDropdown.ts

@@ -124,7 +124,17 @@ const CDropdown = defineComponent({
       required: false,
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
     const dropdownRef = ref()
     const dropdownMenuRef = ref()
     const placement = ref(props.placement)
@@ -179,10 +189,6 @@ const CDropdown = defineComponent({
       popper.value = undefined
     }
 
-    // const togglePopper = () => {
-    //   visible.value ? initPopper() : destroyPopper()
-    // }
-
     const toggleMenu = function () {
       if (props.disabled === false) {
         if (visible.value === true) {
@@ -221,7 +227,10 @@ const CDropdown = defineComponent({
       window.removeEventListener('keyup', handleKeyup)
     })
 
-    watch(visible, () => props.popper && (visible.value ? initPopper() : destroyPopper()))
+    watch(visible, () => {
+      props.popper && (visible.value ? initPopper() : destroyPopper())
+      visible.value ? emit('show') : emit('hide')
+    })
 
     return () =>
       props.variant === 'input-group'

src/components/modal/CModal.ts

@@ -106,9 +106,17 @@ const CModal = defineComponent({
   },
   emits: [
     /**
-     * Event called before the dissmiss animation has started.
+     * Callback fired when the component requests to be closed.
      */
-    'dismiss',
+    'close',
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    'close-prevented',
+    /**
+     * Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
+     */
+    'show',
   ],
   setup(props, { slots, attrs, emit }) {
     const modalRef = ref()
@@ -131,6 +139,7 @@ const CModal = defineComponent({
       setTimeout(() => {
         el.classList.add('show')
       }, 1)
+      emit('show')
     }
     const handleAfterEnter = () => {
       window.addEventListener('click', handleClickOutside)
@@ -150,7 +159,7 @@ const CModal = defineComponent({
     }
 
     const handleDismiss = () => {
-      emit('dismiss')
+      emit('close')
       visible.value = false
     }
 
@@ -161,6 +170,7 @@ const CModal = defineComponent({
         }
         if (props.backdrop === 'static') {
           modalRef.value.classList.add('modal-static')
+          emit('close-prevented')
           setTimeout(() => {
             modalRef.value.classList.remove('modal-static')
           }, 300)

src/components/offcanvas/COffcanvas.ts

@@ -51,9 +51,13 @@ const COffcanvas = defineComponent({
   },
   emits: [
     /**
-     * Event called before the dissmiss animation has started.
+     * Callback fired when the component requests to be hidden.
      */
-    'dismiss',
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
   ],
   setup(props, { slots, emit }) {
     const offcanvasRef = ref()
@@ -82,6 +86,7 @@ const COffcanvas = defineComponent({
     })
 
     const handleEnter = (el: RendererElement, done: () => void) => {
+      emit('show')
       el.addEventListener('transitionend', () => {
         done()
       })
@@ -108,19 +113,19 @@ const COffcanvas = defineComponent({
 
     const handleDismiss = () => {
       visible.value = false
-      emit('dismiss')
+      emit('hide')
     }
 
     const handleKeyUp = (event: KeyboardEvent) => {
       if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
-        if (event.key === 'Escape' && props.keyboard) {
+        if (event.key === 'Escape' && props.keyboard && props.backdrop) {
           return handleDismiss()
         }
       }
     }
     const handleClickOutside = (event: Event) => {
       if (offcanvasRef.value && !offcanvasRef.value.contains(event.target as HTMLElement)) {
-        handleDismiss()
+        props.backdrop && handleDismiss()
       }
     }
 

src/components/sidebar/CSidebar.ts

@@ -61,6 +61,14 @@ const CSidebar = defineComponent({
     visible: Boolean,
   },
   emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
     /**
      * Event emitted after visibility of component changed.
      */
@@ -74,6 +82,7 @@ const CSidebar = defineComponent({
 
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
+      inViewport.value ? emit('show') : emit('hide')
     })
 
     watch(

src/components/tabs/CTabPane.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, toRefs } from 'vue'
+import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue'
 
 const CTabPane = defineComponent({
   name: 'CTabPane',
@@ -12,22 +12,66 @@ const CTabPane = defineComponent({
       required: false,
     },
   },
-  setup(props, { slots }) {
-    const { visible } = toRefs(props)
+  emits: [
+    /**
+     * Callback fired when the component requests to be hidden.
+     */
+    'hide',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
+  ],
+  setup(props, { slots, emit }) {
+    const tabPaneRef = ref()
+    const firstRender = ref(true)
+
+    const handleEnter = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('show')
+      setTimeout(() => {
+        el.classList.add('show')
+      }, 1)
+      el.addEventListener('transitionend', () => {
+        done()
+      })
+    }
+
+    const handleLeave = (el: RendererElement, done: () => void) => {
+      firstRender.value = false
+      emit('hide')
+      el.classList.remove('show')
+      el.addEventListener('transitionend', () => {
+        done()
+      })
+    }
 
     return () =>
       h(
-        'div',
+        Transition,
         {
-          class: [
-            'tab-pane',
-            'fade',
-            {
-              'show active': visible.value,
-            },
-          ],
+          onEnter: (el, done) => handleEnter(el, done),
+          onLeave: (el, done) => handleLeave(el, done),
         },
-        slots.default && slots.default(),
+        () =>
+          withDirectives(
+            h(
+              'div',
+              {
+                class: [
+                  'tab-pane',
+                  'fade',
+                  {
+                    active: props.visible,
+                    show: firstRender.value && props.visible,
+                  },
+                ],
+                ref: tabPaneRef,
+              },
+              slots.default && slots.default(),
+            ),
+            [[vShow, props.visible]],
+          ),
       )
   },
 })

src/components/toast/CToast.ts

@@ -59,9 +59,13 @@ const CToast = defineComponent({
   },
   emits: [
     /**
-     * Event called before the dissmiss animation has started.
+     * Callback fired when the component requests to be closed.
      */
-    'dismiss',
+    'close',
+    /**
+     * Callback fired when the component requests to be shown.
+     */
+    'show',
   ],
   setup(props, { slots, emit }) {
     const visible = ref(props.visible)
@@ -79,6 +83,11 @@ const CToast = defineComponent({
       setTimeout(() => {
         el.classList.add('show')
       }, 1)
+      if (props.key) {
+        emit('show', props.key)
+      } else {
+        emit('show')
+      }
     }
     const handleBeforeLeave = (el: RendererElement) => {
       el.classList.remove('show')
@@ -92,9 +101,9 @@ const CToast = defineComponent({
     const handleAfterLeave = (el: RendererElement) => {
       el.classList.add('hide')
       if (props.key) {
-        emit('dismiss', props.key)
+        emit('close', props.key)
       } else {
-        emit('dismiss')
+        emit('close')
       }
     }