@htlkg/components 0.0.1

package/src/navigation/Tabs.demo.vue

@@ -0,0 +1,293 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Tabs } from '@htlkg/components/navigation';
+
+// Active tab state
+const activeTab = ref('profile');
+
+// Interactive controls
+const showBadges = ref(true);
+const tabCount = ref(4);
+
+// All available tabs
+const allTabs = [
+	{ id: 'profile', label: 'Profile', count: 0 },
+	{ id: 'settings', label: 'Settings', count: 3 },
+	{ id: 'notifications', label: 'Notifications', count: 12 },
+	{ id: 'security', label: 'Security', count: 0 },
+	{ id: 'billing', label: 'Billing', count: 1 },
+	{ id: 'team', label: 'Team', count: 5 }
+];
+
+// Tab configuration (computed based on controls)
+const tabs = computed(() => {
+	const selectedTabs = allTabs.slice(0, tabCount.value);
+	return showBadges.value 
+		? selectedTabs 
+		: selectedTabs.map(tab => ({ ...tab, count: undefined }));
+});
+
+// Sample data for each tab
+const profileData = {
+	name: 'John Doe',
+	email: 'john.doe@example.com',
+	role: 'Administrator',
+	department: 'Engineering',
+	joinDate: 'January 15, 2023'
+};
+
+const settingsData = [
+	{ id: 1, setting: 'Email Notifications', enabled: true },
+	{ id: 2, setting: 'Push Notifications', enabled: false },
+	{ id: 3, setting: 'SMS Alerts', enabled: true }
+];
+
+const notificationsData = [
+	{ id: 1, message: 'New user registered', time: '5 minutes ago', read: false },
+	{ id: 2, message: 'System update completed', time: '1 hour ago', read: false },
+	{ id: 3, message: 'Backup completed successfully', time: '2 hours ago', read: true },
+	{ id: 4, message: 'New comment on your post', time: '3 hours ago', read: false },
+	{ id: 5, message: 'Weekly report is ready', time: '1 day ago', read: true }
+];
+
+const securityData = {
+	lastLogin: 'December 9, 2024 at 10:30 AM',
+	twoFactorEnabled: true,
+	activeSessions: 2,
+	passwordLastChanged: 'November 1, 2024'
+};
+
+const handleTabChange = (tabId: string) => {
+	console.log('Tab changed to:', tabId);
+};
+</script>
+
+<template>
+	<div>
+		<!-- Interactive Controls Panel -->
+		<div class="mb-6 p-4 bg-purple-50 border border-purple-200 rounded-lg">
+			<h4 class="text-sm font-semibold text-purple-900 mb-3">🎮 Interactive Controls</h4>
+			
+			<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+				<!-- Tab Count Control -->
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-2">
+						Number of Tabs: {{ tabCount }}
+					</label>
+					<input
+						type="range"
+						v-model.number="tabCount"
+						min="2"
+						max="6"
+						class="w-full"
+					/>
+					<div class="flex justify-between text-xs text-gray-500 mt-1">
+						<span>2</span>
+						<span>6</span>
+					</div>
+				</div>
+
+				<!-- Badge Toggle -->
+				<div>
+					<label class="block text-sm font-medium text-gray-700 mb-2">
+						Display Options:
+					</label>
+					<button
+						@click="showBadges = !showBadges"
+						:class="[
+							'px-3 py-2 text-sm rounded-md transition-colors',
+							showBadges
+								? 'bg-purple-600 text-white'
+								: 'bg-white text-gray-700 border border-gray-300 hover:bg-gray-50'
+						]"
+					>
+						{{ showBadges ? '🔢 Badges ON' : '🔢 Badges OFF' }}
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<!-- Stats Display -->
+		<div class="mb-6 p-4 bg-blue-50 rounded border border-blue-200">
+			<div class="grid grid-cols-2 gap-4 text-sm">
+				<div>
+					<span class="font-medium text-gray-700">Active Tab:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ activeTab }}</span>
+				</div>
+				<div>
+					<span class="font-medium text-gray-700">Total Tabs:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ tabs.length }}</span>
+				</div>
+			</div>
+		</div>
+
+		<!-- Tabs Component -->
+		<Tabs v-model="activeTab" :tabs="tabs" @tab-change="handleTabChange">
+			<!-- Profile Tab -->
+			<template #profile>
+				<div class="p-6 bg-white rounded-lg border">
+					<h3 class="text-lg font-semibold text-gray-900 mb-4">Profile Information</h3>
+					<div class="space-y-3">
+						<div class="flex justify-between py-2 border-b">
+							<span class="text-gray-600">Name:</span>
+							<span class="font-medium text-gray-900">{{ profileData.name }}</span>
+						</div>
+						<div class="flex justify-between py-2 border-b">
+							<span class="text-gray-600">Email:</span>
+							<span class="font-medium text-gray-900">{{ profileData.email }}</span>
+						</div>
+						<div class="flex justify-between py-2 border-b">
+							<span class="text-gray-600">Role:</span>
+							<span class="font-medium text-gray-900">{{ profileData.role }}</span>
+						</div>
+						<div class="flex justify-between py-2 border-b">
+							<span class="text-gray-600">Department:</span>
+							<span class="font-medium text-gray-900">{{ profileData.department }}</span>
+						</div>
+						<div class="flex justify-between py-2">
+							<span class="text-gray-600">Join Date:</span>
+							<span class="font-medium text-gray-900">{{ profileData.joinDate }}</span>
+						</div>
+					</div>
+					<div class="mt-6">
+						<button
+							class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+						>
+							Edit Profile
+						</button>
+					</div>
+				</div>
+			</template>
+
+			<!-- Settings Tab -->
+			<template #settings>
+				<div class="p-6 bg-white rounded-lg border">
+					<h3 class="text-lg font-semibold text-gray-900 mb-4">Notification Settings</h3>
+					<div class="space-y-4">
+						<div
+							v-for="setting in settingsData"
+							:key="setting.id"
+							class="flex items-center justify-between p-4 bg-gray-50 rounded"
+						>
+							<span class="text-gray-900">{{ setting.setting }}</span>
+							<label class="relative inline-flex items-center cursor-pointer">
+								<input
+									type="checkbox"
+									:checked="setting.enabled"
+									class="sr-only peer"
+								/>
+								<div
+									class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+								></div>
+							</label>
+						</div>
+					</div>
+					<div class="mt-6">
+						<button
+							class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+						>
+							Save Settings
+						</button>
+					</div>
+				</div>
+			</template>
+
+			<!-- Notifications Tab -->
+			<template #notifications>
+				<div class="p-6 bg-white rounded-lg border">
+					<h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Notifications</h3>
+					<div class="space-y-2">
+						<div
+							v-for="notification in notificationsData"
+							:key="notification.id"
+							class="flex items-start justify-between p-4 rounded transition-colors"
+							:class="notification.read ? 'bg-gray-50' : 'bg-blue-50'"
+						>
+							<div class="flex-1">
+								<p
+									class="text-sm"
+									:class="notification.read ? 'text-gray-600' : 'text-gray-900 font-medium'"
+								>
+									{{ notification.message }}
+								</p>
+								<p class="text-xs text-gray-500 mt-1">{{ notification.time }}</p>
+							</div>
+							<span
+								v-if="!notification.read"
+								class="ml-4 w-2 h-2 bg-blue-600 rounded-full"
+							></span>
+						</div>
+					</div>
+					<div class="mt-6 flex gap-2">
+						<button
+							class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+						>
+							Mark All as Read
+						</button>
+						<button
+							class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
+						>
+							Clear All
+						</button>
+					</div>
+				</div>
+			</template>
+
+			<!-- Security Tab -->
+			<template #security>
+				<div class="p-6 bg-white rounded-lg border">
+					<h3 class="text-lg font-semibold text-gray-900 mb-4">Security Settings</h3>
+					<div class="space-y-4">
+						<div class="p-4 bg-gray-50 rounded">
+							<div class="flex justify-between items-center mb-2">
+								<span class="font-medium text-gray-900">Last Login</span>
+								<span class="text-sm text-gray-600">{{ securityData.lastLogin }}</span>
+							</div>
+						</div>
+						<div class="p-4 bg-gray-50 rounded">
+							<div class="flex justify-between items-center mb-2">
+								<span class="font-medium text-gray-900">Two-Factor Authentication</span>
+								<span
+									class="px-2 py-1 text-xs rounded"
+									:class="
+										securityData.twoFactorEnabled
+											? 'bg-green-100 text-green-800'
+											: 'bg-red-100 text-red-800'
+									"
+								>
+									{{ securityData.twoFactorEnabled ? 'Enabled' : 'Disabled' }}
+								</span>
+							</div>
+						</div>
+						<div class="p-4 bg-gray-50 rounded">
+							<div class="flex justify-between items-center mb-2">
+								<span class="font-medium text-gray-900">Active Sessions</span>
+								<span class="text-sm text-gray-600">{{ securityData.activeSessions }}</span>
+							</div>
+						</div>
+						<div class="p-4 bg-gray-50 rounded">
+							<div class="flex justify-between items-center mb-2">
+								<span class="font-medium text-gray-900">Password Last Changed</span>
+								<span class="text-sm text-gray-600">{{
+									securityData.passwordLastChanged
+								}}</span>
+							</div>
+						</div>
+					</div>
+					<div class="mt-6 flex gap-2">
+						<button
+							class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+						>
+							Change Password
+						</button>
+						<button
+							class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors"
+						>
+							View All Sessions
+						</button>
+					</div>
+				</div>
+			</template>
+		</Tabs>
+	</div>
+</template>

package/src/navigation/Tabs.md

@@ -0,0 +1,163 @@
+# Tabs Component
+
+A tabbed interface component for organizing content into separate views.
+
+## Features
+
+- **v-model support**: Two-way binding for active tab
+- **Badge counts**: Optional count badges on tabs
+- **Slot-based content**: Named slots for each tab
+- **Programmatic navigation**: Methods for tab control
+- **Keyboard navigation**: Arrow keys for tab switching
+
+## Import
+
+```typescript
+import { Tabs } from '@htlkg/components';
+// or
+import { Tabs } from '@htlkg/components/navigation';
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `tabs` | `Tab[]` | required | Tab definitions |
+| `modelValue` | `string` | `''` | Active tab ID (v-model) |
+
+### Tab Interface
+
+```typescript
+interface Tab {
+  id: string;
+  label: string;
+  count?: number;
+}
+```
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `string` | Active tab changed (v-model) |
+| `tab-change` | `string` | Tab changed |
+
+## Slots
+
+Named slots for each tab using the tab's `id` as the slot name. Each slot receives:
+- `active-tab`: The currently active tab ID
+
+## Exposed Methods
+
+| Method | Description |
+|--------|-------------|
+| `setActiveTab(tabId)` | Set active tab |
+| `getActiveTab()` | Get active tab ID |
+| `nextTab()` | Navigate to next tab |
+| `previousTab()` | Navigate to previous tab |
+
+## Usage Examples
+
+### Basic Tabs
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Tabs } from '@htlkg/components';
+
+const activeTab = ref('profile');
+
+const tabs = [
+  { id: 'profile', label: 'Profile' },
+  { id: 'settings', label: 'Settings' },
+  { id: 'notifications', label: 'Notifications' }
+];
+</script>
+
+<template>
+  <Tabs v-model="activeTab" :tabs="tabs">
+    <template #profile>
+      <div>Profile content here</div>
+    </template>
+    
+    <template #settings>
+      <div>Settings content here</div>
+    </template>
+    
+    <template #notifications>
+      <div>Notifications content here</div>
+    </template>
+  </Tabs>
+</template>
+```
+
+### Tabs with Counts
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Tabs } from '@htlkg/components';
+
+const activeTab = ref('all');
+
+const tabs = [
+  { id: 'all', label: 'All', count: 24 },
+  { id: 'active', label: 'Active', count: 18 },
+  { id: 'archived', label: 'Archived', count: 6 }
+];
+</script>
+
+<template>
+  <Tabs v-model="activeTab" :tabs="tabs">
+    <template #all>
+      <div>All items (24)</div>
+    </template>
+    
+    <template #active>
+      <div>Active items (18)</div>
+    </template>
+    
+    <template #archived>
+      <div>Archived items (6)</div>
+    </template>
+  </Tabs>
+</template>
+```
+
+### Programmatic Control
+
+```vue
+<script setup>
+import { ref } from 'vue';
+import { Tabs } from '@htlkg/components';
+
+const tabsRef = ref();
+const activeTab = ref('tab1');
+
+const tabs = [
+  { id: 'tab1', label: 'Tab 1' },
+  { id: 'tab2', label: 'Tab 2' },
+  { id: 'tab3', label: 'Tab 3' }
+];
+
+const next = () => tabsRef.value?.nextTab();
+const previous = () => tabsRef.value?.previousTab();
+</script>
+
+<template>
+  <Tabs ref="tabsRef" v-model="activeTab" :tabs="tabs">
+    <template #tab1>Content 1</template>
+    <template #tab2>Content 2</template>
+    <template #tab3>Content 3</template>
+  </Tabs>
+  
+  <div class="mt-4 space-x-2">
+    <button @click="previous">Previous</button>
+    <button @click="next">Next</button>
+  </div>
+</template>
+```
+
+## Demo
+
+See the [Tabs demo page](/components/tabs) for interactive examples.

package/src/navigation/Tabs.test.ts

@@ -0,0 +1,176 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import Tabs from './Tabs.vue';
+
+describe('Tabs Component', () => {
+  const mockTabs = [
+    { id: 'tab1', label: 'Tab 1', count: 5 },
+    { id: 'tab2', label: 'Tab 2', count: 10 },
+    { id: 'tab3', label: 'Tab 3' }
+  ];
+
+  it('renders with basic props', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs
+      }
+    });
+
+    expect(wrapper.exists()).toBe(true);
+    expect(wrapper.find('.tabs-wrapper').exists()).toBe(true);
+  });
+
+  it('supports v-model for activeTab', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1',
+        'onUpdate:activeTab': (value: string) => wrapper.setProps({ activeTab: value })
+      }
+    });
+
+    expect(wrapper.props('activeTab')).toBe('tab1');
+
+    // Change active tab
+    const component = wrapper.vm as any;
+    component.handleTabClick('tab2');
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
+    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab2']);
+  });
+
+  it('emits tab-change event when tab is clicked', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.handleTabClick('tab2');
+
+    expect(wrapper.emitted('tab-change')).toBeTruthy();
+    expect(wrapper.emitted('tab-change')?.[0]).toEqual(['tab2']);
+  });
+
+  it('defaults to first tab when no activeTab is provided', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs
+      }
+    });
+
+    const component = wrapper.vm as any;
+    expect(component.currentTab).toBe('tab1');
+  });
+
+  it('exposes setActiveTab method', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    expect(component.setActiveTab).toBeDefined();
+    expect(typeof component.setActiveTab).toBe('function');
+
+    component.setActiveTab('tab3');
+    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
+  });
+
+  it('exposes getActiveTab method', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab2'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    expect(component.getActiveTab).toBeDefined();
+    expect(typeof component.getActiveTab).toBe('function');
+    expect(component.getActiveTab()).toBe('tab2');
+  });
+
+  it('exposes nextTab method', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.nextTab();
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
+    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab2']);
+  });
+
+  it('exposes previousTab method', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab2'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.previousTab();
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('update:activeTab')).toBeTruthy();
+    expect(wrapper.emitted('update:activeTab')?.[0]).toEqual(['tab1']);
+  });
+
+  it('does not go beyond last tab with nextTab', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab3'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.nextTab();
+
+    await wrapper.vm.$nextTick();
+    // Should not emit since we're already at the last tab
+    expect(component.getActiveTab()).toBe('tab3');
+  });
+
+  it('does not go before first tab with previousTab', async () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1'
+      }
+    });
+
+    const component = wrapper.vm as any;
+    component.previousTab();
+
+    await wrapper.vm.$nextTick();
+    // Should not emit since we're already at the first tab
+    expect(component.getActiveTab()).toBe('tab1');
+  });
+
+  it('renders tab content slot', () => {
+    const wrapper = mount(Tabs, {
+      props: {
+        tabs: mockTabs,
+        activeTab: 'tab1'
+      },
+      slots: {
+        tab1: '<div class="tab1-content">Tab 1 Content</div>'
+      }
+    });
+
+    expect(wrapper.find('.tabs-content').exists()).toBe(true);
+  });
+});