@htlkg/components 0.0.1 → 0.0.2

package/src/composables/useTable.ts

@@ -1,44 +1,169 @@
-import { ref, computed, type Ref, type ComputedRef } from 'vue';
+import { ref, computed, unref, type Ref, type ComputedRef, type MaybeRef } from 'vue';
+
+export interface SmartFilter {
+  category: string;
+  operator: string;
+  value: any;
+}
 
 export interface UseTableOptions<T> {
-  items: T[];
+  items: MaybeRef<T[]>; // Accept both arrays and refs/computed
   pageSize?: number;
   sortKey?: string;
   sortOrder?: 'asc' | 'desc';
+  idKey?: string; // Key to use for item identification (default: 'id')
 }
 
 export interface UseTableReturn<T> {
+  // Pagination
   currentPage: Ref<number>;
   pageSize: Ref<number>;
+  totalPages: ComputedRef<number>;
+  totalItems: ComputedRef<number>;
+  paginatedItems: ComputedRef<T[]>;
+  
+  // Sorting
   sortKey: Ref<string>;
   sortOrder: Ref<'asc' | 'desc'>;
-  selectedItems: Ref<T[]>;
-  paginatedItems: ComputedRef<T[]>;
-  totalPages: ComputedRef<number>;
   sortedItems: ComputedRef<T[]>;
+  
+  // Selection
+  selectedItems: Ref<T[]>;
+  selectedItemIds: Ref<Set<string | number>>;
+  allSelected: ComputedRef<boolean>;
+  someSelected: ComputedRef<boolean>;
+  
+  // Filtering
+  activeFilters: Ref<SmartFilter[]>;
+  filteredItems: ComputedRef<T[]>;
+  
+  // Column visibility
+  hiddenColumns: Ref<number[]>;
+  
+  // Reset state
+  resetSelected: Ref<boolean>;
+  
+  // Methods - Pagination
   setPage: (page: number) => void;
   setPageSize: (size: number) => void;
+  
+  // Methods - Sorting
   setSorting: (key: string, order?: 'asc' | 'desc') => void;
+  handleOrderBy: (event: { value: string; orderDirection: 'asc' | 'desc' }) => void;
+  
+  // Methods - Selection
   selectItem: (item: T) => void;
   deselectItem: (item: T) => void;
   selectAll: () => void;
+  selectAllOnPage: () => void;
   clearSelection: () => void;
   isSelected: (item: T) => boolean;
+  
+  // Methods - Filtering
+  applyFilters: (filters: SmartFilter[]) => void;
+  clearFilters: () => void;
+  removeFilter: (index: number) => void;
+  
+  // Methods - Column visibility
+  toggleColumn: (index: number) => void;
+  showColumn: (index: number) => void;
+  hideColumn: (index: number) => void;
+  
+  // Event handlers for uiTable
+  handlePageChange: (page: number) => void;
+  handlePageSizeChange: (size: number | string) => void;
+  handleSmartFiltersApplied: (filters: SmartFilter[]) => void;
+  handleSmartFiltersCleared: () => void;
+  handleSmartFilterDeleted: (index: number) => void;
+  handleColumnsVisibilityChanged: (event: { index: number; hidden: boolean }) => void;
+  handleModalAction: (event: { modal: string; action: string }) => void;
 }
 
 export function useTable<T extends Record<string, any>>(
   options: UseTableOptions<T>
 ): UseTableReturn<T> {
+  const idKey = options.idKey ?? 'id';
+  
+  // Create a reactive reference to items with safety check
+  const items = computed(() => {
+    try {
+      const unwrapped = unref(options.items);
+      // Ensure we always return an array
+      if (!unwrapped) return [];
+      if (!Array.isArray(unwrapped)) {
+        console.warn('useTable: items is not an array', unwrapped);
+        return [];
+      }
+      return unwrapped;
+    } catch (error) {
+      console.error('useTable: Error unwrapping items', error);
+      return [];
+    }
+  });
+  
+  // State - Pagination
   const currentPage = ref(1);
   const pageSize = ref(options.pageSize ?? 10);
+  
+  // State - Sorting
   const sortKey = ref(options.sortKey ?? '');
   const sortOrder = ref<'asc' | 'desc'>(options.sortOrder ?? 'asc');
-  const selectedItems = ref<T[]>([]);
+  
+  // State - Selection
+  const selectedItems = ref<T[]>([]) as Ref<T[]>;
+  const selectedItemIds = ref<Set<string | number>>(new Set());
+  const resetSelected = ref(false);
+  
+  // State - Filtering
+  const activeFilters = ref<SmartFilter[]>([]);
+  
+  // State - Column visibility
+  const hiddenColumns = ref<number[]>([]);
+
+  // Computed - Filtering
+  const filteredItems = computed(() => {
+    if (activeFilters.value.length === 0) return items.value;
+
+    return items.value.filter(item => {
+      // All filters must pass (AND logic by default)
+      return activeFilters.value.every(filter => {
+        const { category, operator, value } = filter;
+        
+        if (value === undefined || value === null || value === '') return true;
+        
+        const itemValue = item[category];
+        
+        // Handle different operators
+        switch (operator) {
+          case 'contains':
+            return String(itemValue).toLowerCase().includes(String(value).toLowerCase());
+          case 'is':
+          case '=':
+            return itemValue === value;
+          case '>':
+          case 'greater':
+            return Number(itemValue) > Number(value);
+          case '<':
+          case 'less':
+            return Number(itemValue) < Number(value);
+          case '>=':
+          case 'greaterOrEqual':
+            return Number(itemValue) >= Number(value);
+          case '<=':
+          case 'lessOrEqual':
+            return Number(itemValue) <= Number(value);
+          default:
+            return String(itemValue).toLowerCase().includes(String(value).toLowerCase());
+        }
+      });
+    });
+  });
 
+  // Computed - Sorting
   const sortedItems = computed(() => {
-    if (!sortKey.value) return options.items;
+    if (!sortKey.value) return filteredItems.value;
 
-    return [...options.items].sort((a, b) => {
+    return [...filteredItems.value].sort((a, b) => {
       const aVal = a[sortKey.value];
       const bVal = b[sortKey.value];
       const order = sortOrder.value === 'asc' ? 1 : -1;
@@ -47,10 +172,16 @@ export function useTable<T extends Record<string, any>>(
       if (aVal == null) return 1;
       if (bVal == null) return -1;
 
+      // Handle different types
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        return aVal.localeCompare(bVal) * order;
+      }
+
       return aVal > bVal ? order : -order;
     });
   });
 
+  // Computed - Pagination
   const paginatedItems = computed(() => {
     const start = (currentPage.value - 1) * pageSize.value;
     const end = start + pageSize.value;
@@ -58,9 +189,22 @@ export function useTable<T extends Record<string, any>>(
   });
 
   const totalPages = computed(() =>
-    Math.ceil(options.items.length / pageSize.value)
+    Math.ceil(sortedItems.value.length / pageSize.value)
   );
 
+  const totalItems = computed(() => sortedItems.value.length);
+
+  // Computed - Selection
+  const allSelected = computed(() => {
+    if (items.value.length === 0) return false;
+    return selectedItemIds.value.size === items.value.length;
+  });
+
+  const someSelected = computed(() => {
+    return selectedItemIds.value.size > 0 && !allSelected.value;
+  });
+
+  // Methods - Pagination
   function setPage(page: number) {
     if (page >= 1 && page <= totalPages.value) {
       currentPage.value = page;
@@ -72,6 +216,16 @@ export function useTable<T extends Record<string, any>>(
     currentPage.value = 1; // Reset to first page
   }
 
+  function handlePageChange(page: number) {
+    setPage(page);
+  }
+
+  function handlePageSizeChange(size: number | string) {
+    const numSize = typeof size === 'string' ? parseInt(size) : size;
+    setPageSize(numSize);
+  }
+
+  // Methods - Sorting
   function setSorting(key: string, order: 'asc' | 'desc' = 'asc') {
     if (sortKey.value === key) {
       // Toggle order if same key
@@ -82,53 +236,200 @@ export function useTable<T extends Record<string, any>>(
     }
   }
 
+  function handleOrderBy(event: { value: string; orderDirection: 'asc' | 'desc' }) {
+    sortKey.value = event.value;
+    sortOrder.value = event.orderDirection;
+  }
+
+  // Methods - Selection
+  function getItemId(item: T): string | number {
+    return item[idKey];
+  }
+
   function selectItem(item: T) {
-    if (!isSelected(item)) {
-      selectedItems.value.push(item);
+    const id = getItemId(item);
+    if (!selectedItemIds.value.has(id)) {
+      selectedItemIds.value.add(id);
+      (selectedItems.value as T[]).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);
+    const id = getItemId(item);
+    if (selectedItemIds.value.has(id)) {
+      selectedItemIds.value.delete(id);
+      const index = (selectedItems.value as T[]).findIndex(i => getItemId(i) === id);
+      if (index !== -1) {
+        (selectedItems.value as T[]).splice(index, 1);
+      }
     }
   }
 
   function selectAll() {
-    selectedItems.value = [...options.items];
+    selectedItemIds.value.clear();
+    (selectedItems.value as T[]).length = 0;
+    
+    items.value.forEach(item => {
+      const id = getItemId(item);
+      selectedItemIds.value.add(id);
+      (selectedItems.value as T[]).push(item);
+    });
+  }
+
+  function selectAllOnPage() {
+    paginatedItems.value.forEach(item => {
+      selectItem(item);
+    });
   }
 
   function clearSelection() {
-    selectedItems.value = [];
+    selectedItemIds.value.clear();
+    (selectedItems.value as T[]).length = 0;
+    resetSelected.value = true;
+    setTimeout(() => {
+      resetSelected.value = false;
+    }, 100);
   }
 
   function isSelected(item: T): boolean {
-    // Use deep comparison for objects
-    return selectedItems.value.some(i => 
-      JSON.stringify(i) === JSON.stringify(item)
-    );
+    const id = getItemId(item);
+    return selectedItemIds.value.has(id);
+  }
+
+  // Methods - Filtering
+  function applyFilters(filters: SmartFilter[]) {
+    activeFilters.value = filters;
+    currentPage.value = 1; // Reset to first page when filters change
+  }
+
+  function clearFilters() {
+    activeFilters.value = [];
+    currentPage.value = 1;
+  }
+
+  function removeFilter(index: number) {
+    if (index >= 0 && index < activeFilters.value.length) {
+      activeFilters.value.splice(index, 1);
+      currentPage.value = 1;
+    }
+  }
+
+  function handleSmartFiltersApplied(filters: SmartFilter[]) {
+    applyFilters(filters);
+  }
+
+  function handleSmartFiltersCleared() {
+    clearFilters();
+  }
+
+  function handleSmartFilterDeleted(index: number) {
+    removeFilter(index);
+  }
+
+  // Methods - Column visibility
+  function toggleColumn(index: number) {
+    const hiddenIndex = hiddenColumns.value.indexOf(index);
+    if (hiddenIndex > -1) {
+      hiddenColumns.value.splice(hiddenIndex, 1);
+    } else {
+      hiddenColumns.value.push(index);
+    }
+  }
+
+  function showColumn(index: number) {
+    const hiddenIndex = hiddenColumns.value.indexOf(index);
+    if (hiddenIndex > -1) {
+      hiddenColumns.value.splice(hiddenIndex, 1);
+    }
+  }
+
+  function hideColumn(index: number) {
+    if (!hiddenColumns.value.includes(index)) {
+      hiddenColumns.value.push(index);
+    }
+  }
+
+  function handleColumnsVisibilityChanged(event: { index: number; hidden: boolean }) {
+    if (event.hidden) {
+      hideColumn(event.index);
+    } else {
+      showColumn(event.index);
+    }
+  }
+
+  // Methods - Modal actions
+  function handleModalAction(event: { modal: string; action: string }) {
+    if (event.modal === 'selectAllItemsModal' || event.modal.includes('selectAll')) {
+      if (event.action === 'selectAll') {
+        selectAll();
+      } else if (event.action === 'close') {
+        selectAllOnPage();
+      }
+    }
   }
 
   return {
+    // Pagination
     currentPage,
     pageSize,
+    totalPages,
+    totalItems,
+    paginatedItems,
+    
+    // Sorting
     sortKey,
     sortOrder,
-    selectedItems,
-    paginatedItems,
-    totalPages,
     sortedItems,
+    
+    // Selection
+    selectedItems,
+    selectedItemIds,
+    allSelected,
+    someSelected,
+    
+    // Filtering
+    activeFilters,
+    filteredItems,
+    
+    // Column visibility
+    hiddenColumns,
+    
+    // Reset state
+    resetSelected,
+    
+    // Methods - Pagination
     setPage,
     setPageSize,
+    handlePageChange,
+    handlePageSizeChange,
+    
+    // Methods - Sorting
     setSorting,
+    handleOrderBy,
+    
+    // Methods - Selection
     selectItem,
     deselectItem,
     selectAll,
+    selectAllOnPage,
     clearSelection,
-    isSelected
+    isSelected,
+    
+    // Methods - Filtering
+    applyFilters,
+    clearFilters,
+    removeFilter,
+    handleSmartFiltersApplied,
+    handleSmartFiltersCleared,
+    handleSmartFilterDeleted,
+    
+    // Methods - Column visibility
+    toggleColumn,
+    showColumn,
+    hideColumn,
+    handleColumnsVisibilityChanged,
+    
+    // Methods - Modal actions
+    handleModalAction,
   };
 }

package/src/data/Table.demo.vue

@@ -21,13 +21,13 @@ const allItems = ref([
 	{ id: 15, name: 'Maria Garcia', email: 'maria@example.com', role: 'User', status: 'Inactive', department: 'Marketing' },
 ]);
 
-// Table columns
-const columns = [
-	{ name: 'Name', value: 'name' },
-	{ name: 'Email', value: 'email' },
-	{ name: 'Role', value: 'role' },
-	{ name: 'Status', value: 'status' },
-	{ name: 'Department', value: 'department' }
+// Table header
+const header = [
+	{ name: 'Name', value: 'name', tooltip: 'User full name' },
+	{ name: 'Email', value: 'email', tooltip: 'User email address' },
+	{ name: 'Role', value: 'role', tooltip: 'User role in the system' },
+	{ name: 'Status', value: 'status', tooltip: 'Account status' },
+	{ name: 'Department', value: 'department', tooltip: 'User department' }
 ];
 
 // State
@@ -164,11 +164,27 @@ const filteredItems = computed(() => {
 	return items;
 });
 
-// Computed: Paginated items
+// Computed: Paginated items formatted for uiTable
 const paginatedItems = computed(() => {
 	const start = (currentPage.value - 1) * itemsPerPage.value;
 	const end = start + itemsPerPage.value;
-	return filteredItems.value.slice(start, end);
+	const items = filteredItems.value.slice(start, end);
+	
+	// Format items for uiTable
+	return items.map(item => ({
+		id: item.id,
+		row: [
+			item.name,
+			item.email,
+			item.role,
+			{ 
+				content: item.status, 
+				color: item.status === 'Active' ? 'green' as const : 'gray' as const, 
+				type: 'tag' as const
+			},
+			item.department
+		]
+	}));
 });
 
 // Computed: Total pages
@@ -261,7 +277,7 @@ const handleItemsPerPageChanged = (size: number) => {
 		<!-- Table Component -->
 		<Table
 			:items="paginatedItems"
-			:columns="columns"
+			:header="header"
 			:loading="loading"
 			:actions="actions"
 			:select-all-items-modal="selectAllItemsModal"

package/src/data/Table.vue

@@ -8,16 +8,10 @@ import {
   uiTable
 } from '@hotelinking/ui';
 
-export interface Column {
-  name: string;
-  value: string;
-  tooltip?: string;
-}
-
 interface Props {
   // Data
-  items: any[];
-  columns: Column[];
+  items: TableItemType[];
+  header: UiTableInterface['header'];
   
   // State
   loading?: boolean;
@@ -129,32 +123,6 @@ const emit = defineEmits<{
 const internalHiddenColumns = ref<number[]>(props.hiddenColumns || []);
 const selectedItemIds = ref<Set<string | number>>(new Set());
 
-// Convert columns to uiTable header format
-const tableHeader = computed<UiTableInterface['header']>(() => 
-  props.columns.map(col => ({
-    name: col.name,
-    value: col.value,
-    tooltip: col.tooltip
-  }))
-);
-
-// Convert items to uiTable format
-const tableItems = computed<TableItemType[]>(() =>
-  props.items.map((item, index) => ({
-    id: item.id || index,
-    disabled: item.disabled || false,
-    row: props.columns.map(col => {
-      const key = col.value || col.name.toLowerCase();
-      const value = item[key];
-      // Return the value as-is if it's already formatted for uiTable
-      if (typeof value === 'object' && value !== null && 'type' in value) {
-        return value;
-      }
-      return String(value ?? '');
-    })
-  }))
-);
-
 // Page size options for uiTable
 const pageSizeOptions = computed(() => [
   { name: '10', value: '10', active: props.pageSize === 10 },
@@ -186,7 +154,12 @@ function handleTableAction(data: { action: string; items: Array<string | number>
   selectedItemIds.value = new Set(data.items);
   updateSelectedItems();
   emit('table-action', data);
-  resetSelectedItems();
+}
+
+function resetSelectedItems() {
+  selectedItemIds.value.clear();
+  updateSelectedItems();
+  emit('update:resetSelected', true);
 }
 
 function handleTableActionSelected(item: any) {
@@ -256,7 +229,7 @@ function handleSelectedItemsDeleted() {
 }
 
 function updateSelectedItems() {
-  const selected = props.items.filter(item => selectedItemIds.value.has(item.id));
+  const selected = props.items.filter(item => item.id && selectedItemIds.value.has(item.id));
   emit('update:selected', selected);
 }
 
@@ -268,15 +241,16 @@ defineExpose({
     updateSelectedItems();
   },
   getHiddenColumns: () => internalHiddenColumns.value,
-  getSelectedItems: () => Array.from(selectedItemIds.value)
+  getSelectedItems: () => Array.from(selectedItemIds.value),
+  getSelectedItemsData: () => props.items.filter(item => item.id && selectedItemIds.value.has(item.id))
 });
 </script>
 
 <template>
   <uiTable
     :loading="loading"
-    :header="tableHeader"
-    :items="tableItems"
+    :header="header"
+    :items="items"
     :ordered-by="orderedBy"
     :order-direction="orderDirection"
     :actions="(actions as any)"