@htlkg/components 0.0.1

package/src/composables/useTable.ts

@@ -0,0 +1,134 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
+
+export interface UseTableOptions<T> {
+  items: T[];
+  pageSize?: number;
+  sortKey?: string;
+  sortOrder?: 'asc' | 'desc';
+}
+
+export interface UseTableReturn<T> {
+  currentPage: Ref<number>;
+  pageSize: Ref<number>;
+  sortKey: Ref<string>;
+  sortOrder: Ref<'asc' | 'desc'>;
+  selectedItems: Ref<T[]>;
+  paginatedItems: ComputedRef<T[]>;
+  totalPages: ComputedRef<number>;
+  sortedItems: ComputedRef<T[]>;
+  setPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  setSorting: (key: string, order?: 'asc' | 'desc') => void;
+  selectItem: (item: T) => void;
+  deselectItem: (item: T) => void;
+  selectAll: () => void;
+  clearSelection: () => void;
+  isSelected: (item: T) => boolean;
+}
+
+export function useTable<T extends Record<string, any>>(
+  options: UseTableOptions<T>
+): UseTableReturn<T> {
+  const currentPage = ref(1);
+  const pageSize = ref(options.pageSize ?? 10);
+  const sortKey = ref(options.sortKey ?? '');
+  const sortOrder = ref<'asc' | 'desc'>(options.sortOrder ?? 'asc');
+  const selectedItems = ref<T[]>([]);
+
+  const sortedItems = computed(() => {
+    if (!sortKey.value) return options.items;
+
+    return [...options.items].sort((a, b) => {
+      const aVal = a[sortKey.value];
+      const bVal = b[sortKey.value];
+      const order = sortOrder.value === 'asc' ? 1 : -1;
+
+      if (aVal === bVal) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+
+      return aVal > bVal ? order : -order;
+    });
+  });
+
+  const paginatedItems = computed(() => {
+    const start = (currentPage.value - 1) * pageSize.value;
+    const end = start + pageSize.value;
+    return sortedItems.value.slice(start, end);
+  });
+
+  const totalPages = computed(() =>
+    Math.ceil(options.items.length / pageSize.value)
+  );
+
+  function setPage(page: number) {
+    if (page >= 1 && page <= totalPages.value) {
+      currentPage.value = page;
+    }
+  }
+
+  function setPageSize(size: number) {
+    pageSize.value = size;
+    currentPage.value = 1; // Reset to first page
+  }
+
+  function setSorting(key: string, order: 'asc' | 'desc' = 'asc') {
+    if (sortKey.value === key) {
+      // Toggle order if same key
+      sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortKey.value = key;
+      sortOrder.value = order;
+    }
+  }
+
+  function selectItem(item: T) {
+    if (!isSelected(item)) {
+      selectedItems.value.push(item);
+    }
+  }
+
+  function deselectItem(item: T) {
+    // Use deep comparison for objects
+    const index = selectedItems.value.findIndex(i => 
+      JSON.stringify(i) === JSON.stringify(item)
+    );
+    if (index !== -1) {
+      selectedItems.value.splice(index, 1);
+    }
+  }
+
+  function selectAll() {
+    selectedItems.value = [...options.items];
+  }
+
+  function clearSelection() {
+    selectedItems.value = [];
+  }
+
+  function isSelected(item: T): boolean {
+    // Use deep comparison for objects
+    return selectedItems.value.some(i => 
+      JSON.stringify(i) === JSON.stringify(item)
+    );
+  }
+
+  return {
+    currentPage,
+    pageSize,
+    sortKey,
+    sortOrder,
+    selectedItems,
+    paginatedItems,
+    totalPages,
+    sortedItems,
+    setPage,
+    setPageSize,
+    setSorting,
+    selectItem,
+    deselectItem,
+    selectAll,
+    clearSelection,
+    isSelected
+  };
+}

package/src/composables/useTabs.property.test.ts

@@ -0,0 +1,247 @@
+import { describe, it, expect } from 'vitest';
+import * as fc from 'fast-check';
+import { useTabs, type Tab } from './useTabs';
+
+/**
+ * Feature: htlkg-modular-architecture, Property 9: Components support v-model
+ * Validates: Requirements 12.3
+ */
+describe('useTabs property tests', () => {
+  it('should manage active tab state reactively', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.string({ minLength: 1 }),
+            label: fc.string(),
+            disabled: fc.boolean()
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (tabs) => {
+          // Ensure unique IDs
+          const uniqueTabs = tabs.map((tab, index) => ({
+            ...tab,
+            id: `tab-${index}`
+          }));
+
+          const { activeTab, setActiveTab, isTabActive } = useTabs({
+            tabs: uniqueTabs
+          });
+
+          // Property: Initial active tab should be the first tab
+          expect(activeTab.value).toBe(uniqueTabs[0].id);
+          expect(isTabActive(uniqueTabs[0].id)).toBe(true);
+
+          // Property: Setting active tab should update state
+          if (uniqueTabs.length > 1) {
+            const targetTab = uniqueTabs[1];
+            if (!targetTab.disabled) {
+              setActiveTab(targetTab.id);
+              expect(activeTab.value).toBe(targetTab.id);
+              expect(isTabActive(targetTab.id)).toBe(true);
+            }
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should navigate between tabs correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 2, max: 10 }),
+        (tabCount) => {
+          const tabs: Tab[] = Array.from({ length: tabCount }, (_, i) => ({
+            id: `tab-${i}`,
+            label: `Tab ${i}`,
+            disabled: false
+          }));
+
+          const { activeTab, nextTab, previousTab, isFirstTab, isLastTab } = useTabs({
+            tabs
+          });
+
+          // Property: Initially on first tab
+          expect(activeTab.value).toBe(tabs[0].id);
+          expect(isFirstTab.value).toBe(true);
+          expect(isLastTab.value).toBe(false);
+
+          // Property: nextTab should move to next tab
+          nextTab();
+          expect(activeTab.value).toBe(tabs[1].id);
+          expect(isFirstTab.value).toBe(false);
+
+          // Property: previousTab should move back
+          previousTab();
+          expect(activeTab.value).toBe(tabs[0].id);
+          expect(isFirstTab.value).toBe(true);
+
+          // Property: Navigate to last tab
+          for (let i = 0; i < tabCount - 1; i++) {
+            nextTab();
+          }
+          expect(activeTab.value).toBe(tabs[tabCount - 1].id);
+          expect(isLastTab.value).toBe(true);
+
+          // Property: nextTab on last tab should not change state
+          const lastTabId = activeTab.value;
+          nextTab();
+          expect(activeTab.value).toBe(lastTabId);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle disabled tabs correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 3, max: 10 }),
+        fc.integer({ min: 1, max: 8 }),
+        (tabCount, disabledIndex) => {
+          const validDisabledIndex = Math.min(disabledIndex, tabCount - 1);
+          
+          const tabs: Tab[] = Array.from({ length: tabCount }, (_, i) => ({
+            id: `tab-${i}`,
+            label: `Tab ${i}`,
+            disabled: i === validDisabledIndex
+          }));
+
+          const { setActiveTab, activeTab, isTabDisabled } = useTabs({
+            tabs
+          });
+
+          // Property: Disabled tab should be marked as disabled
+          expect(isTabDisabled(tabs[validDisabledIndex].id)).toBe(true);
+
+          // Property: Setting active tab to disabled tab should not change state
+          const initialTab = activeTab.value;
+          setActiveTab(tabs[validDisabledIndex].id);
+          expect(activeTab.value).toBe(initialTab);
+
+          // Property: Setting active tab to enabled tab should work
+          const enabledTabIndex = validDisabledIndex === 0 ? 1 : 0;
+          setActiveTab(tabs[enabledTabIndex].id);
+          expect(activeTab.value).toBe(tabs[enabledTabIndex].id);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should maintain tab index consistency', () => {
+    fc.assert(
+      fc.property(
+        fc.array(
+          fc.record({
+            id: fc.string({ minLength: 1 }),
+            label: fc.string(),
+            disabled: fc.boolean()
+          }),
+          { minLength: 1, maxLength: 10 }
+        ),
+        (tabs) => {
+          // Ensure unique IDs
+          const uniqueTabs = tabs.map((tab, index) => ({
+            ...tab,
+            id: `tab-${index}`
+          }));
+
+          const { activeTab, currentTabIndex, setActiveTab } = useTabs({
+            tabs: uniqueTabs
+          });
+
+          // Property: Current tab index should match active tab position
+          const expectedIndex = uniqueTabs.findIndex(t => t.id === activeTab.value);
+          expect(currentTabIndex.value).toBe(expectedIndex);
+
+          // Property: After setting active tab, index should update
+          if (uniqueTabs.length > 1) {
+            const targetIndex = uniqueTabs.length > 2 ? 2 : 1;
+            const targetTab = uniqueTabs[targetIndex];
+            if (!targetTab.disabled) {
+              setActiveTab(targetTab.id);
+              expect(currentTabIndex.value).toBe(targetIndex);
+            }
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should support v-model pattern with reactive updates', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 2, max: 10 }),
+        fc.integer({ min: 0, max: 9 }),
+        (tabCount, targetIndex) => {
+          const tabs: Tab[] = Array.from({ length: tabCount }, (_, i) => ({
+            id: `tab-${i}`,
+            label: `Tab ${i}`,
+            disabled: false
+          }));
+
+          const validTargetIndex = Math.min(targetIndex, tabCount - 1);
+
+          const { activeTab, setActiveTab, isTabActive } = useTabs({
+            tabs
+          });
+
+          // Property: Directly setting activeTab.value should update state (v-model pattern)
+          activeTab.value = tabs[validTargetIndex].id;
+          expect(activeTab.value).toBe(tabs[validTargetIndex].id);
+          expect(isTabActive(tabs[validTargetIndex].id)).toBe(true);
+
+          // Property: Methods should still work after direct state change
+          if (validTargetIndex > 0) {
+            setActiveTab(tabs[0].id);
+            expect(activeTab.value).toBe(tabs[0].id);
+          }
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+
+  it('should handle onChange callback correctly', () => {
+    fc.assert(
+      fc.property(
+        fc.integer({ min: 3, max: 10 }),
+        (tabCount) => {
+          const tabs: Tab[] = Array.from({ length: tabCount }, (_, i) => ({
+            id: `tab-${i}`,
+            label: `Tab ${i}`,
+            disabled: false
+          }));
+
+          let changeCallCount = 0;
+          let lastChangedTab = '';
+
+          const { setActiveTab, nextTab } = useTabs({
+            tabs,
+            onChange: (tabId) => {
+              changeCallCount++;
+              lastChangedTab = tabId;
+            }
+          });
+
+          const initialCallCount = changeCallCount;
+
+          // Property: setActiveTab should trigger onChange
+          setActiveTab(tabs[1].id);
+          expect(changeCallCount).toBe(initialCallCount + 1);
+          expect(lastChangedTab).toBe(tabs[1].id);
+
+          // Property: nextTab should trigger onChange (we're at tab 1, so can move to tab 2)
+          nextTab();
+          expect(changeCallCount).toBe(initialCallCount + 2);
+          expect(lastChangedTab).toBe(tabs[2].id);
+        }
+      ),
+      { numRuns: 100 }
+    );
+  });
+});

package/src/composables/useTabs.ts

@@ -0,0 +1,101 @@
+import { ref, computed, type Ref, type ComputedRef } from 'vue';
+
+export interface Tab {
+  id: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface UseTabsOptions {
+  tabs: Tab[];
+  initialTab?: string;
+  onChange?: (tabId: string) => void;
+}
+
+export interface UseTabsReturn {
+  activeTab: Ref<string>;
+  tabs: Ref<Tab[]>;
+  currentTabIndex: ComputedRef<number>;
+  isFirstTab: ComputedRef<boolean>;
+  isLastTab: ComputedRef<boolean>;
+  setActiveTab: (tabId: string) => void;
+  nextTab: () => void;
+  previousTab: () => void;
+  isTabActive: (tabId: string) => boolean;
+  isTabDisabled: (tabId: string) => boolean;
+}
+
+export function useTabs(options: UseTabsOptions): UseTabsReturn {
+  const tabs = ref(options.tabs);
+  const activeTab = ref(
+    options.initialTab || (tabs.value.length > 0 ? tabs.value[0].id : '')
+  );
+
+  const currentTabIndex = computed(() =>
+    tabs.value.findIndex(tab => tab.id === activeTab.value)
+  );
+
+  const isFirstTab = computed(() => currentTabIndex.value === 0);
+
+  const isLastTab = computed(() =>
+    currentTabIndex.value === tabs.value.length - 1
+  );
+
+  function setActiveTab(tabId: string) {
+    const tab = tabs.value.find(t => t.id === tabId);
+    if (tab && !tab.disabled) {
+      activeTab.value = tabId;
+      options.onChange?.(tabId);
+    }
+  }
+
+  function nextTab() {
+    if (!isLastTab.value) {
+      const nextIndex = currentTabIndex.value + 1;
+      const nextTab = tabs.value[nextIndex];
+      if (nextTab && !nextTab.disabled) {
+        setActiveTab(nextTab.id);
+      } else if (nextIndex < tabs.value.length - 1) {
+        // Skip disabled tab and try next
+        activeTab.value = nextTab.id;
+        nextTab();
+      }
+    }
+  }
+
+  function previousTab() {
+    if (!isFirstTab.value) {
+      const prevIndex = currentTabIndex.value - 1;
+      const prevTab = tabs.value[prevIndex];
+      if (prevTab && !prevTab.disabled) {
+        setActiveTab(prevTab.id);
+      } else if (prevIndex > 0) {
+        // Skip disabled tab and try previous
+        activeTab.value = prevTab.id;
+        previousTab();
+      }
+    }
+  }
+
+  function isTabActive(tabId: string): boolean {
+    return activeTab.value === tabId;
+  }
+
+  function isTabDisabled(tabId: string): boolean {
+    const tab = tabs.value.find(t => t.id === tabId);
+    return tab?.disabled ?? false;
+  }
+
+  return {
+    activeTab,
+    tabs,
+    currentTabIndex,
+    isFirstTab,
+    isLastTab,
+    setActiveTab,
+    nextTab,
+    previousTab,
+    isTabActive,
+    isTabDisabled
+  };
+}