From 0e63a8c0401e0aeb854d0273650474901b6b1c6d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 7 Dec 2023 14:25:14 +0600
Subject: [PATCH 1/3] collapse

---
 src/components/DxhCollapse.vue               | 114 +++++++++++++++++++
 src/components/__tests__/DxhCollapse.spec.ts |  77 +++++++++++++
 src/index.ts                                 |   3 +-
 vite.config.ts                               |  19 ++--
 4 files changed, 201 insertions(+), 12 deletions(-)
 create mode 100644 src/components/DxhCollapse.vue
 create mode 100644 src/components/__tests__/DxhCollapse.spec.ts

diff --git a/src/components/DxhCollapse.vue b/src/components/DxhCollapse.vue
new file mode 100644
index 0000000..ebd2261
--- /dev/null
+++ b/src/components/DxhCollapse.vue
@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <div v-for="item in items" :key="item.id">
+      <div
+        @click="collapsible === 'header' ? handleItemClick(item.id) : ''"
+        class="bg-gray-200 p-3 flex items-center font-semibold"
+        :class="[
+          { 'space-x-3 flex-row': expandIconPosition === 'left' },
+          { 'justify-between flex-row-reverse': expandIconPosition === 'right' },
+          { 'cursor-pointer': collapsible === 'header' },
+          { 'pointer-events-none opacity-50': collapsible === 'disabled' }
+        ]"
+        :data-test="`collapse-item-header-${item.id}`"
+      >
+        <div
+          @click="collapsible === 'icon' ? handleItemClick(item.id) : ''"
+          :class="{ 'cursor-pointer': collapsible === 'icon' }"
+        >
+          <span v-if="isItemActive(item.id)">
+            <slot name="collapse-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="14"
+                width="14"
+                viewBox="0 0 448 512"
+                :data-test="`collapse-item-collapse-icon-${item.id}`"
+              >
+                <path
+                  d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
+                />
+              </svg>
+            </slot>
+          </span>
+          <span v-else>
+            <slot name="expand-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="14"
+                width="14"
+                viewBox="0 0 448 512"
+                :data-test="`collapse-item-expand-icon-${item.id}`"
+              >
+                <path
+                  d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"
+                />
+              </svg>
+            </slot>
+          </span>
+        </div>
+        <p :data-test="`collapse-item-header-text-${item.id}`">{{ item.header }}</p>
+      </div>
+      <div v-if="isItemActive(item.id)" class="p-3" :data-test="`collapse-item-content-${item.id}`">
+        {{ item.content }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+interface CollapseItem {
+  id: number
+  header: string
+  content: string
+}
+
+interface props {
+  items: CollapseItem[]
+  accordion?: boolean
+  defaultActiveKey: number
+  collapsible?: string | string[]
+  expandIconPosition?: string
+}
+
+const { items, accordion, defaultActiveKey, collapsible, expandIconPosition } = withDefaults(
+  defineProps<props>(),
+  {
+    accordion: false
+  }
+)
+const emit = defineEmits(['change'])
+
+const activeItems = ref<any>(accordion ? defaultActiveKey : [defaultActiveKey])
+
+const handleItemClick = (id: number) => {
+  if (accordion) {
+    activeItems.value = activeItems.value === id ? null : id
+  } else {
+    if (activeItems.value.includes(id)) {
+      activeItems.value = activeItems.value.filter((item: number) => item !== id)
+    } else {
+      activeItems.value = [...activeItems.value, id]
+    }
+  }
+  emit('change', activeItems.value)
+}
+
+const isItemActive = (id: number) => {
+  if (accordion) {
+    return activeItems.value === id
+  } else {
+    return activeItems.value.includes(id)
+  }
+}
+
+onMounted(() => {
+  if (accordion) {
+    activeItems.value = defaultActiveKey
+  } else {
+    activeItems.value = [defaultActiveKey]
+  }
+})
+</script>
diff --git a/src/components/__tests__/DxhCollapse.spec.ts b/src/components/__tests__/DxhCollapse.spec.ts
new file mode 100644
index 0000000..bcfec76
--- /dev/null
+++ b/src/components/__tests__/DxhCollapse.spec.ts
@@ -0,0 +1,77 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhCollapse from '@/components/DxhCollapse.vue'
+
+describe('DxhCollapse.vue', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DxhCollapse, {
+      props: {
+        items: [
+          { id: 1, header: 'Header 1', content: 'Content 1' },
+          { id: 2, header: 'Header 2', content: 'Content 2' }
+        ],
+        defaultActiveKey: 1,
+        collapsible: 'header',
+        expandIconPosition: 'left'
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders with correct initial state', () => {
+    const header1 = wrapper.find('[data-test="collapse-item-header-1"]')
+    const header2 = wrapper.find('[data-test="collapse-item-header-2"]')
+    const content1 = wrapper.find('[data-test="collapse-item-content-1"]')
+    const content2 = wrapper.find('[data-test="collapse-item-content-2"]')
+
+    expect(header1.classes()).toContain('bg-gray-200')
+    expect(content1.exists()).toBe(true)
+
+    expect(content2.exists()).toBe(false)
+  })
+
+  it('toggles active item on header click', async () => {
+    const header2 = wrapper.find('[data-test="collapse-item-header-2"]')
+    const content2 = wrapper.find('[data-test="collapse-item-content-2"]')
+
+    await header2.trigger('click')
+
+    expect(header2.classes()).toContain('bg-gray-200')
+    expect(content2.exists()).toBe(false)
+
+    const header1 = wrapper.find('[data-test="collapse-item-header-1"]')
+    const content1 = wrapper.find('[data-test="collapse-item-content-1"]')
+    expect(header1.classes()).toContain('bg-gray-200')
+    expect(content1.exists()).toBe(true)
+  })
+
+  it('emits change event on item click', async () => {
+    const header2 = wrapper.find('[data-test="collapse-item-header-2"]')
+
+    await header2.trigger('click')
+
+    expect(wrapper.emitted().change).toBeTruthy()
+    expect(wrapper.emitted().change[0][0]).toEqual([1, 2])
+  })
+
+  it('handles click on expand icon', async () => {
+    const expandIcon2 = wrapper.find('[data-test="collapse-item-expand-icon-2"]')
+    const content2 = wrapper.find('[data-test="collapse-item-content-2"]')
+
+    await expandIcon2.trigger('click')
+
+    const header2 = wrapper.find('[data-test="collapse-item-header-2"]')
+    expect(header2.classes()).toContain('bg-gray-200')
+    expect(content2.exists()).toBe(false)
+
+    const header1 = wrapper.find('[data-test="collapse-item-header-1"]')
+    const content1 = wrapper.find('[data-test="collapse-item-content-1"]')
+    expect(header1.classes()).toContain('bg-gray-200')
+    expect(content1.exists()).toBe(true)
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..0babaa6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import DButton from "./components/DButton.vue"
 import DInput from "./components/DInput.vue"
+import DxhCollapse from './components/DxhCollapse.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhCollapse }
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index c393055..9d7f62d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,10 +7,7 @@ import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    dts()
-  ],
+  plugins: [vue(), dts()],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
@@ -18,11 +15,11 @@ export default defineConfig({
   },
   build: {
     lib: {
-      // Could also be a dictionary or array of multiple entry points
+      // Could also be a dictionary or array of accordion entry points
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'DEVxHUB',
       // the proper extensions will be added
-      fileName: 'devxhub-vue-tailwind',
+      fileName: 'devxhub-vue-tailwind'
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -32,9 +29,9 @@ export default defineConfig({
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          vue: 'Vue',
-        },
-      },
-    },
-  },
+          vue: 'Vue'
+        }
+      }
+    }
+  }
 })

From ad7d8ed6493e114316399776be457c83fdae068d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 7 Dec 2023 14:31:26 +0600
Subject: [PATCH 2/3] collapse

---
 vite.config.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 9d7f62d..c393055 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,7 +7,10 @@ import dts from 'vite-plugin-dts'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), dts()],
+  plugins: [
+    vue(),
+    dts()
+  ],
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))
@@ -15,11 +18,11 @@ export default defineConfig({
   },
   build: {
     lib: {
-      // Could also be a dictionary or array of accordion entry points
+      // Could also be a dictionary or array of multiple entry points
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'DEVxHUB',
       // the proper extensions will be added
-      fileName: 'devxhub-vue-tailwind'
+      fileName: 'devxhub-vue-tailwind',
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled
@@ -29,9 +32,9 @@ export default defineConfig({
         // Provide global variables to use in the UMD build
         // for externalized deps
         globals: {
-          vue: 'Vue'
-        }
-      }
-    }
-  }
+          vue: 'Vue',
+        },
+      },
+    },
+  },
 })

From eb202ae5576d676aaf93555e9c717038d227a463 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 12:45:27 +0600
Subject: [PATCH 3/3] collapse

---
 src/components/DxhCollapse.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DxhCollapse.vue b/src/components/DxhCollapse.vue
index ebd2261..31f73ca 100644
--- a/src/components/DxhCollapse.vue
+++ b/src/components/DxhCollapse.vue
@@ -17,7 +17,7 @@
           :class="{ 'cursor-pointer': collapsible === 'icon' }"
         >
           <span v-if="isItemActive(item.id)">
-            <slot name="collapse-icon">
+            <slot name="collapse">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 height="14"
@@ -32,7 +32,7 @@
             </slot>
           </span>
           <span v-else>
-            <slot name="expand-icon">
+            <slot name="expand">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 height="14"