From 3b39b5a2d427a45fdb4d99f04c2a68607fad683f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Mon, 29 Nov 2021 14:31:35 +0100
Subject: [PATCH] feat: add horizontal collapse

---
 src/views/base/Collapses.vue | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index 8a884d1c..241e7b46 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -32,6 +32,39 @@
           </DocsExample>
         </CCardBody>
       </CCard>
+      <CCard class="mb-4">
+        <CCardHeader>
+          <strong>Vue Collapse</strong> <small> Horizontal</small>
+        </CCardHeader>
+        <CCardBody>
+          <p class="text-medium-emphasis small">
+            The collapse plugin also supports horizontal collapsing. Add the
+            <code>horizontal</code> property to transition the
+            <code>width</code> instead of <code>height</code> and set a
+            <code>width</code> on the immediate child element.
+          </p>
+          <DocsExample href="components/collapse.html#horizontal">
+            <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>
+          </DocsExample>
+        </CCardBody>
+      </CCard>
       <CCard class="mb-4">
         <CCardHeader>
           <strong>Vue Collapse</strong> <small> multi target</small>
@@ -100,10 +133,12 @@ export default {
     const visible = ref(false)
     const visibleA = ref(false)
     const visibleB = ref(false)
+    const visibleHorizontal = ref(false)
     return {
       visible,
       visibleA,
       visibleB,
+      visibleHorizontal,
     }
   },
 }