From b832e64aebc40afd6d3dd0c6fb7165aae9376a99 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Sun, 10 Dec 2023 18:24:15 +0600
Subject: [PATCH 1/3] tabs

---
 src/App.vue                             | 18 +++++++--
 src/components/DxhTabs.vue              | 49 +++++++++++++++++++++++++
 src/components/__tests__/DxhTab.spec.ts | 46 +++++++++++++++++++++++
 src/index.ts                            |  7 ++--
 4 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 src/components/DxhTabs.vue
 create mode 100644 src/components/__tests__/DxhTab.spec.ts

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..ccf1548 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,17 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div id="app">
+    <TabComponent direction="horizontal" defaultActive="3" :items="tabsData" />
+  </div>
 </template>
+
+<script setup lang="ts">
+import TabComponent from './components/DxhTabs.vue'
+
+const tabsData = [
+  { id: 1, label: 'Tab 1', content: 'Content for Tab 1' },
+  { id: 2, label: 'Tab 2', content: 'Content for Tab 2' },
+  { id: 3, label: 'Tab 3', content: 'Content for Tab 3' },
+  { id: 4, label: 'Tab 4', content: 'Content for Tab 4' },
+  { id: 5, label: 'Tab 5', content: 'Content for Tab 5' }
+]
+</script>
diff --git a/src/components/DxhTabs.vue b/src/components/DxhTabs.vue
new file mode 100644
index 0000000..53e1c96
--- /dev/null
+++ b/src/components/DxhTabs.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="flex gap-x-2" :class="direction === 'horizontal' ? 'flex-col' : 'flex-row'" data-test="dxh-tabs">
+    <div
+      class="flex"
+      :class="direction === 'horizontal' ? 'flex-row border-b' : 'flex-col border-r min-h-full'"
+    >
+      <div
+        v-for="item in items"
+        :key="item.id"
+        @click="handleTabClick(item.id)"
+        class="py-2 px-3 cursor-pointer transition-all duration-300 hover:bg-gray-200"
+        :class="[
+          direction === 'horizontal' ? ' border-b' : 'border-r ',
+          { 'border-black': activeTab === item.id }
+        ]"
+        :data-test="`tab-${item.id}`"
+      >
+        {{ item.label }}
+      </div>
+    </div>
+    <div class="p-3" :data-test="`tab-content`">{{ findActiveTabContent().content }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface item {
+  id: number
+  label: string
+  content: string
+}
+
+const props = defineProps<{
+  direction: 'horizontal' | 'vertical'
+  items: item[]
+  defaultActive: number | string
+}>()
+
+const activeTab = ref(Number(props.defaultActive) || 1)
+
+const handleTabClick = (id: number) => {
+  activeTab.value = id
+}
+
+const findActiveTabContent = () => {
+  return props.items.find((item) => item.id === activeTab.value) || { content: '' }
+}
+</script>
diff --git a/src/components/__tests__/DxhTab.spec.ts b/src/components/__tests__/DxhTab.spec.ts
new file mode 100644
index 0000000..421faa9
--- /dev/null
+++ b/src/components/__tests__/DxhTab.spec.ts
@@ -0,0 +1,46 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhTabs from '@/components/DxhTabs.vue'
+
+describe('DxhTabs.vue', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DxhTabs, {
+      props: {
+        direction: 'horizontal',
+        items: [
+          { id: 1, label: 'Tab 1', content: 'Content 1' },
+          { id: 2, label: 'Tab 2', content: 'Content 2' }
+        ],
+        defaultActive: 1
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders with correct initial state', () => {
+    const tab1 = wrapper.find('[data-test="tab-1"]')
+    const tab2 = wrapper.find('[data-test="tab-2"]')
+    const content = wrapper.find('[data-test="tab-content"]')
+
+    expect(tab1.classes()).toContain('border-black')
+    expect(tab2.classes()).not.toContain('border-black')
+    expect(content.text()).toBe('Content 1')
+  })
+
+  it('changes active tab on click', async () => {
+    const tab1 = wrapper.find('[data-test="tab-1"]')
+    const tab2 = wrapper.find('[data-test="tab-2"]')
+    const content = wrapper.find('[data-test="tab-content"]')
+
+    await tab2.trigger('click')
+
+    expect(tab1.classes()).not.toContain('border-black')
+    expect(tab2.classes()).toContain('border-black')
+    expect(content.text()).toBe('Content 2')
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..887aa11 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 DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DxhTabs from './components/DxhTabs.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhTabs }

From e3f5322ddf842626752879de587a6877fb71dbc1 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Sun, 10 Dec 2023 18:26:05 +0600
Subject: [PATCH 2/3] tabs

---
 src/App.vue | 20 ++++----------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ccf1548..46362c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,17 +1,5 @@
 <template>
-  <div id="app">
-    <TabComponent direction="horizontal" defaultActive="3" :items="tabsData" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import TabComponent from './components/DxhTabs.vue'
-
-const tabsData = [
-  { id: 1, label: 'Tab 1', content: 'Content for Tab 1' },
-  { id: 2, label: 'Tab 2', content: 'Content for Tab 2' },
-  { id: 3, label: 'Tab 3', content: 'Content for Tab 3' },
-  { id: 4, label: 'Tab 4', content: 'Content for Tab 4' },
-  { id: 5, label: 'Tab 5', content: 'Content for Tab 5' }
-]
-</script>
+  <main>
+    Vue-Tailwind
+  </main>
+</template>
\ No newline at end of file

From 09941068de751186e065810b6d902c4e1ad75884 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Sun, 10 Dec 2023 19:07:20 +0600
Subject: [PATCH 3/3] tabs

---
 src/components/DxhTabs.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/DxhTabs.vue b/src/components/DxhTabs.vue
index 53e1c96..766a526 100644
--- a/src/components/DxhTabs.vue
+++ b/src/components/DxhTabs.vue
@@ -1,5 +1,9 @@
 <template>
-  <div class="flex gap-x-2" :class="direction === 'horizontal' ? 'flex-col' : 'flex-row'" data-test="dxh-tabs">
+  <div
+    class="flex gap-x-2"
+    :class="direction === 'horizontal' ? 'flex-col' : 'flex-row'"
+    data-test="dxh-tabs"
+  >
     <div
       class="flex"
       :class="direction === 'horizontal' ? 'flex-row border-b' : 'flex-col border-r min-h-full'"
@@ -37,10 +41,13 @@ const props = defineProps<{
   defaultActive: number | string
 }>()
 
+const emit = defineEmits(['tabClick'])
+
 const activeTab = ref(Number(props.defaultActive) || 1)
 
 const handleTabClick = (id: number) => {
   activeTab.value = id
+  emit('tabClick', id)
 }
 
 const findActiveTabContent = () => {