Tabs

src/App.vue

@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
+</template>

src/components/DxhTabs.vue

@@ -0,0 +1,56 @@
+<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 emit = defineEmits(['tabClick'])
+
+const activeTab = ref(Number(props.defaultActive) || 1)
+
+const handleTabClick = (id: number) => {
+  activeTab.value = id
+  emit('tabClick', id)
+}
+
+const findActiveTabContent = () => {
+  return props.items.find((item) => item.id === activeTab.value) || { content: '' }
+}
+</script>

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')
+  })
+})

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}
+export default { DButton, DInput, DxhTabs }