feat(CCollapse): add horizontal variant

Author: mrholek

packages/coreui-vue/src/components/collapse/CCollapse.ts

@@ -1,8 +1,16 @@
-import { defineComponent, h, Transition, withDirectives, vShow, RendererElement } from 'vue'
+import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue'
+import { vVisible } from '../../directives/v-c-visible'
 
 const CCollapse = defineComponent({
   name: 'CCollapse',
   props: {
+    /**
+     * Set horizontal collapsing to transition the width instead of height.
+     */
+    horizontal: {
+      type: Boolean,
+      required: false,
+    },
     /**
      * Toggle the visibility of component.
      */
@@ -22,46 +30,68 @@ const CCollapse = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const handleBeforeEnter = (el: RendererElement) => {
-      el.classList.remove('collapse')
-      el.classList.add('collapsing')
+    const collapsing = ref(false)
+    const show = ref(props.visible)
+
+    const handleBeforeEnter = () => {
+      collapsing.value = true
     }
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       el.addEventListener('transitionend', () => {
-        el.classList.add('collapse', 'show')
         done()
       })
-      el.style.height = `${el.scrollHeight}px`
+      setTimeout(() => {
+        if (props.horizontal) {
+          el.style.width = `${el.scrollWidth}px`
+          return
+        }
+        el.style.height = `${el.scrollHeight}px`
+      }, 1)
     }
+
     const handleAfterEnter = (el: RendererElement) => {
-      el.classList.remove('collapsing')
-      el.style.removeProperty('height')
+      show.value = true
+      collapsing.value = false
+      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
     }
+
     const handleBeforeLeave = (el: RendererElement) => {
-      el.classList.add('show')
+      collapsing.value = true
+      show.value = false
+      if (props.horizontal) {
+        el.style.width = `${el.scrollWidth}px`
+        return
+      }
       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', () => {
         done()
       })
-      el.style.height = '0px'
+      setTimeout(() => {
+        if (props.horizontal) {
+          el.style.width = '0px'
+          return
+        }
+        el.style.height = '0px'
+      }, 1)
     }
+
     const handleAfterLeave = (el: RendererElement) => {
-      el.classList.remove('collapsing')
-      el.classList.add('collapse')
+      collapsing.value = false
+      props.horizontal ? el.style.removeProperty('width') : el.style.removeProperty('height')
     }
 
     return () =>
       h(
         Transition,
         {
-          name: 'fade',
-          onBeforeEnter: (el) => handleBeforeEnter(el),
+          css: false,
+          onBeforeEnter: () => handleBeforeEnter(),
           onEnter: (el, done) => handleEnter(el, done),
           onAfterEnter: (el) => handleAfterEnter(el),
           onBeforeLeave: (el) => handleBeforeLeave(el),
@@ -74,15 +104,13 @@ const CCollapse = defineComponent({
               'div',
               {
                 class: [
-                  'collapse',
-                  {
-                    show: props.visible,
-                  },
+                  collapsing.value ? 'collapsing' : 'collapse',
+                  { 'collapse-horizontal': props.horizontal, show: show.value },
                 ],
               },
               slots.default && slots.default(),
             ),
-            [[vShow, props.visible]],
+            [[vVisible, props.visible]],
           ),
       )
   },

packages/coreui-vue/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`Loads and display CCollapse component renders correctly 1`] = `
 "<transition-stub>
-  <div class=\\"collapse\\" style=\\"display: none;\\">Default slot</div>
+  <div class=\\"collapse\\">Default slot</div>
 </transition-stub>"
 `;
 

packages/docs/api/collapse/CCollapse.api.md

@@ -8,9 +8,10 @@ import CCollapse from '@coreui/vue/src/components/collapse/CCollapse'
 
 #### Props
 
-| Prop name   | Description                         | Type    | Values | Default |
-| ----------- | ----------------------------------- | ------- | ------ | ------- |
-| **visible** | Toggle the visibility of component. | boolean | -      |         |
+| Prop name      | Description                                                          | Type    | Values | Default |
+| -------------- | -------------------------------------------------------------------- | ------- | ------ | ------- |
+| **horizontal** | Set horizontal collapsing to transition the width instead of height. | boolean | -      |         |
+| **visible**    | Toggle the visibility of component.                                  | boolean | -      |         |
 
 #### Events
 

packages/docs/components/collapse.md

@@ -52,6 +52,46 @@ You can use a link or a button component.
 </script> 
 ```
 
+## Horizontal
+
+The collapse plugin also supports horizontal collapsing. Add the `horizontal` property to transition the `width` instead of `height` and set a `width` on the immediate child element.
+
+:::demo
+<CButton class="mb-3" color="primary" aria-expanded={visible} aria-controls="collapseWidthExample" @click="visibleHorizontal = !visibleHorizontal">Button</CButton>
+<div style="min-height: 120px">
+  <CCollapse horizontal :visible="visibleHorizontal">
+    <CCard style="width: 300px">
+      <CCardBody>
+        This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+      </CCardBody>
+    </CCard>
+  </CCollapse>
+</div>
+:::
+```vue
+<template>
+  <CButton class="mb-3" color="primary" aria-expanded={visible} aria-controls="collapseWidthExample" @click="visibleHorizontal = !visibleHorizontal">Button</CButton>
+  <div style="min-height: 120px">
+    <CCollapse horizontal :visible="visibleHorizontal">
+      <CCard style="width: 300px">
+        <CCardBody>
+          This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
+        </CCardBody>
+      </CCard>
+    </CCollapse>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return { 
+        visibleHorizontal: false,
+      }
+    }
+  }
+</script>
+```
+
 ## Multiple targets
 
 A `<CButton>` can show and hide multiple elements.
@@ -144,6 +184,7 @@ A `<CButton>` can show and hide multiple elements.
     data() {
       return { 
         visible: false,
+        visibleHorizontal: false,
         visibleA: false,
         visibleB: false,
       }