@htlkg/components 0.0.4 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@htlkg/components",
-  "version": "0.0.4",
+  "version": "0.0.11",
   "type": "module",
   "exports": {
     ".": {
@@ -41,17 +41,21 @@
     "dist"
   ],
   "dependencies": {
-    "@hotelinking/ui": "^16.49.16",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
-    "vue": "^3.5.22",
-    "@htlkg/core": "0.0.3",
-    "@htlkg/data": "0.0.3"
+    "@htlkg/data": "0.0.11",
+    "@htlkg/core": "0.0.10"
+  },
+  "peerDependencies": {
+    "@hotelinking/ui": "^16.0.0",
+    "vue": "^3.5.0"
   },
   "publishConfig": {
-    "access": "restricted"
+    "access": "public"
   },
   "devDependencies": {
+    "@hotelinking/ui": "^16.49.16",
+    "vue": "^3.5.22",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/test-utils": "^2.4.6",
     "typescript": "^5.9.2",

package/src/data/Table.test.ts

@@ -1,4 +1,4 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Table from './Table.vue';
@@ -8,55 +8,48 @@ import Table from './Table.vue';
  * Tests user interactions, real-world scenarios, and component integration
  */
 describe('Table integration tests', () => {
-  const mockColumns = [
-    { name: 'ID', value: 'id' },
-    { name: 'Name', value: 'name' },
-    { name: 'Email', value: 'email' },
-    { name: 'Status', value: 'status' }
+  const mockHeader = [
+    { name: 'id', label: 'ID', sortable: true },
+    { name: 'name', label: 'Name', sortable: true },
+    { name: 'email', label: 'Email', sortable: true },
+    { name: 'status', label: 'Status', sortable: true }
   ];
 
   const mockItems = [
-    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'active' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'inactive' },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com', status: 'active' },
-    { id: 4, name: 'Alice Williams', email: 'alice@example.com', status: 'pending' },
-    { id: 5, name: 'Charlie Brown', email: 'charlie@example.com', status: 'active' }
+    { id: 1, row: [1, 'John Doe', 'john@example.com', 'active'] },
+    { id: 2, row: [2, 'Jane Smith', 'jane@example.com', 'inactive'] },
+    { id: 3, row: [3, 'Bob Johnson', 'bob@example.com', 'active'] },
+    { id: 4, row: [4, 'Alice Williams', 'alice@example.com', 'pending'] },
+    { id: 5, row: [5, 'Charlie Brown', 'charlie@example.com', 'active'] }
   ];
 
   const globalStubs = {
-    uiTable: true,
-    uiPagination: true,
-    uiDropdown: true,
-    uiSmartFilterMultipleV2: true,
-    uiNoResults: true
+    uiTable: true
   };
 
   describe('User List Management', () => {
-    it('should display user list with pagination', async () => {
+    it('should accept items and header props', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           currentPage: 1,
           totalPages: 2,
           totalItems: 5,
-          itemsPerPage: 3,
-          showPagination: true
+          pageSize: 10
         },
         global: { stubs: globalStubs }
       });
 
-      const vm = wrapper.vm as any;
-      expect(vm.tableItems).toHaveLength(5);
-      expect(vm.showTable).toBe(true);
-      expect(vm.showPagination).toBe(true);
+      expect(wrapper.props('items')).toHaveLength(5);
+      expect(wrapper.props('header')).toHaveLength(4);
     });
 
-    it('should handle sorting by name', async () => {
+    it('should handle sorting events', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           orderedBy: '',
           orderDirection: 'asc'
         },
@@ -69,14 +62,14 @@ describe('Table integration tests', () => {
 
       expect(wrapper.emitted('update:orderedBy')?.[0]).toEqual(['name']);
       expect(wrapper.emitted('update:orderDirection')?.[0]).toEqual(['desc']);
-      expect(wrapper.emitted('order-changed')?.[0]).toEqual(['name', 'desc']);
+      expect(wrapper.emitted('order-by')?.[0]).toEqual([{ value: 'name', orderDirection: 'desc' }]);
     });
 
     it('should handle page navigation', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           currentPage: 1,
           totalPages: 3
         },
@@ -84,13 +77,13 @@ describe('Table integration tests', () => {
       });
 
       const vm = wrapper.vm as any;
-      
+
       // Navigate to page 2
       vm.handleChangePage(2);
       await nextTick();
 
       expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([2]);
-      expect(wrapper.emitted('page-changed')?.[0]).toEqual([2]);
+      expect(wrapper.emitted('change-page')?.[0]).toEqual([2]);
 
       // Navigate to page 3
       vm.handleChangePage(3);
@@ -103,20 +96,20 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           currentPage: 3,
-          itemsPerPage: 10
+          pageSize: 10
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleChangePageSize({ value: '25' });
+      vm.handleChangePageSize(25);
       await nextTick();
 
-      expect(wrapper.emitted('update:itemsPerPage')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('update:pageSize')?.[0]).toEqual([25]);
       expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
-      expect(wrapper.emitted('items-per-page-changed')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('change-page-size')?.[0]).toEqual([25]);
     });
   });
 
@@ -125,7 +118,7 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
@@ -137,22 +130,19 @@ describe('Table integration tests', () => {
       expect(vm.selectedItemIds.size).toBe(5);
       expect(wrapper.emitted('select-all-items')).toBeDefined();
       expect(wrapper.emitted('update:selected')).toBeDefined();
-      
-      const selectedItems = wrapper.emitted('update:selected')?.[0]?.[0] as any[];
-      expect(selectedItems).toHaveLength(5);
     });
 
     it('should deselect all items', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      
+
       // First select all
       vm.handleSelectAllItems();
       await nextTick();
@@ -163,16 +153,13 @@ describe('Table integration tests', () => {
 
       expect(vm.selectedItemIds.size).toBe(0);
       expect(wrapper.emitted('deselect-all-items')).toBeDefined();
-      
-      const selectedItems = wrapper.emitted('update:selected')?.slice(-1)[0]?.[0] as any[];
-      expect(selectedItems).toHaveLength(0);
     });
 
     it('should handle table action with selected items', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           actions: [
             { name: 'Delete', id: 'delete' },
             { name: 'Export', id: 'export' }
@@ -195,88 +182,57 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      
+
       // Select some items
       vm.selectedItemIds = new Set([1, 2, 3]);
-      
+
       // Clear selection
       vm.clearSelection();
       await nextTick();
 
       expect(vm.selectedItemIds.size).toBe(0);
-      expect(vm.resetSelected).toBe(true);
+      expect(wrapper.emitted('update:resetSelected')?.[0]).toEqual([true]);
     });
   });
 
   describe('Filtering and Search', () => {
     it('should handle smart filter application', async () => {
-      const availableCategories = [
-        {
-          name: 'name',
-          label: 'Name',
-          componentType: 'uiInput' as const,
-          defaultProps: {}
-        },
-        {
-          name: 'status',
-          label: 'Status',
-          componentType: 'uiSelect' as const,
-          defaultProps: {}
-        }
-      ];
-
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
-          availableCategories,
-          showFilters: true
+          header: mockHeader,
+          smartFilterCategories: [
+            {
+              id: 'name',
+              name: 'Name',
+              componentType: 'uiInput' as const,
+              defaultProps: {}
+            }
+          ]
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       const filters = { name: 'John', status: 'active' };
-      
+
       vm.handleSmartFiltersSent(filters);
       await nextTick();
 
-      expect(vm.hasUserSearched).toBe(true);
       expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
-      expect(wrapper.emitted('multiple-filters-applied')?.[0]).toEqual([filters]);
-    });
-
-    it('should show search no results after filtering', async () => {
-      const wrapper = mount(Table, {
-        props: {
-          items: [],
-          columns: mockColumns,
-          loading: false
-        },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      
-      // Simulate user search
-      vm.handleSmartFiltersSent({ name: 'NonExistent' });
-      await nextTick();
-
-      expect(vm.showSearchNoResults).toBe(true);
-      expect(vm.showInitialNoResults).toBe(false);
     });
 
     it('should clear filters', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
@@ -292,7 +248,7 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
@@ -310,91 +266,60 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      
+
       // Hide column 1
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
       await nextTick();
 
-      expect(vm.hiddenColumns).toContain(1);
+      expect(vm.internalHiddenColumns).toContain(1);
       expect(vm.getHiddenColumns()).toContain(1);
 
       // Show column 1 again
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: false });
       await nextTick();
 
-      expect(vm.hiddenColumns).not.toContain(1);
+      expect(vm.internalHiddenColumns).not.toContain(1);
     });
 
     it('should handle multiple hidden columns', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      
+
       // Hide multiple columns
       vm.handleColumnsVisibilityChanged({ index: 0, hidden: true });
       vm.handleColumnsVisibilityChanged({ index: 2, hidden: true });
       await nextTick();
 
-      expect(vm.hiddenColumns).toHaveLength(2);
-      expect(vm.hiddenColumns).toContain(0);
-      expect(vm.hiddenColumns).toContain(2);
+      expect(vm.internalHiddenColumns).toHaveLength(2);
+      expect(vm.internalHiddenColumns).toContain(0);
+      expect(vm.internalHiddenColumns).toContain(2);
     });
   });
 
   describe('Empty States', () => {
-    it('should show initial no results when no data', async () => {
-      const wrapper = mount(Table, {
-        props: {
-          items: [],
-          columns: mockColumns,
-          loading: false
-        },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showInitialNoResults).toBe(true);
-      expect(vm.showTable).toBe(false);
-    });
-
-    it('should show loading state', async () => {
-      const wrapper = mount(Table, {
-        props: {
-          items: [],
-          columns: mockColumns,
-          loading: true
-        },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showTable).toBe(true);
-      expect(vm.showInitialNoResults).toBe(false);
-    });
-
     it('should handle no results action', async () => {
       const wrapper = mount(Table, {
         props: {
           items: [],
-          columns: mockColumns,
+          header: mockHeader,
           loading: false,
           noResults: {
             title: 'No users found',
             message: 'Create your first user',
-            actions: [{ action: 'create', text: 'Create User' }],
-            select: { name: '', value: '' }
+            actions: [{ action: 'create', text: 'Create User' }]
           }
         },
         global: { stubs: globalStubs }
@@ -408,29 +333,12 @@ describe('Table integration tests', () => {
     });
   });
 
-  describe('Refresh and Actions', () => {
-    it('should handle refresh action', async () => {
-      const wrapper = mount(Table, {
-        props: {
-          items: mockItems,
-          columns: mockColumns,
-          showRefresh: true
-        },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      vm.handleDropdownAction({ value: 'refreshData' });
-      await nextTick();
-
-      expect(wrapper.emitted('refresh:data')).toBeDefined();
-    });
-
+  describe('Actions', () => {
     it('should handle table action button click', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           tableActionButtons: [
             { id: 'export', text: 'Export' },
             { id: 'import', text: 'Import' }
@@ -452,7 +360,7 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
@@ -468,42 +376,37 @@ describe('Table integration tests', () => {
   });
 
   describe('State Management', () => {
-    it('should reset selection when items change', async () => {
+    it('should initialize with provided hiddenColumns prop', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader,
+          hiddenColumns: [1, 2]
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.resetSelected = true;
-
-      // Change items
-      await wrapper.setProps({ items: mockItems.slice(0, 3) });
-      await nextTick();
-
-      expect(vm.resetSelected).toBe(false);
+      expect(vm.internalHiddenColumns).toEqual([1, 2]);
     });
 
     it('should maintain hidden columns across updates', async () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns
+          header: mockHeader
         },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
-      
+
       // Update items
       await wrapper.setProps({ items: mockItems.slice(0, 2) });
       await nextTick();
 
-      expect(vm.hiddenColumns).toContain(1);
+      expect(vm.internalHiddenColumns).toContain(1);
     });
   });
 
@@ -512,16 +415,14 @@ describe('Table integration tests', () => {
       const wrapper = mount(Table, {
         props: {
           items: mockItems,
-          columns: mockColumns,
+          header: mockHeader,
           currentPage: 1,
           totalPages: 2,
-          itemsPerPage: 3,
-          showPagination: true,
-          showFilters: true,
-          availableCategories: [
+          pageSize: 10,
+          smartFilterCategories: [
             {
-              name: 'status',
-              label: 'Status',
+              id: 'status',
+              name: 'Status',
               componentType: 'uiSelect' as const,
               defaultProps: {}
             }
@@ -540,7 +441,7 @@ describe('Table integration tests', () => {
       // 2. Sort by name
       vm.handleOrderBy({ value: 'name', orderDirection: 'asc' });
       await nextTick();
-      expect(wrapper.emitted('order-changed')).toBeDefined();
+      expect(wrapper.emitted('order-by')).toBeDefined();
 
       // 3. Select items
       vm.handleSelectAllItems();
@@ -555,8 +456,7 @@ describe('Table integration tests', () => {
       // 5. Change page
       vm.handleChangePage(2);
       await nextTick();
-      expect(wrapper.emitted('page-changed')).toBeDefined();
-      expect(vm.resetSelected).toBe(true);
+      expect(wrapper.emitted('change-page')).toBeDefined();
     });
   });
 });

package/src/data/Table.unit.test.ts

@@ -1,544 +1,353 @@
-import { describe, it, expect, beforeEach } from 'vitest';
+import { describe, it, expect, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Table from './Table.vue';
 
 /**
  * Unit tests for Table component
- * Tests individual functions and methods in isolation
+ * Tests the Table.vue wrapper component around uiTable
  */
 describe('Table unit tests', () => {
-  const mockColumns = [
-    { name: 'ID', value: 'id' },
-    { name: 'Name', value: 'name' },
-    { name: 'Email', value: 'email' }
+  const mockHeader = [
+    { name: 'id', label: 'ID', sortable: true },
+    { name: 'name', label: 'Name', sortable: true },
+    { name: 'email', label: 'Email', sortable: true }
   ];
 
   const mockItems = [
-    { id: 1, name: 'John Doe', email: 'john@example.com' },
-    { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
-    { id: 3, name: 'Bob Johnson', email: 'bob@example.com' }
+    { id: 1, row: [1, 'John Doe', 'john@example.com'] },
+    { id: 2, row: [2, 'Jane Smith', 'jane@example.com'] },
+    { id: 3, row: [3, 'Bob Johnson', 'bob@example.com'] }
   ];
 
   const globalStubs = {
-    uiTable: true,
-    uiPagination: true,
-    uiDropdown: true,
-    uiSmartFilterMultipleV2: true,
-    uiNoResults: true
+    uiTable: true
   };
 
-  describe('tableHeader computed', () => {
-    it('should convert columns to uiTable header format', () => {
+  describe('pageSizeOptions computed', () => {
+    it('should return page size options with correct active state', () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader, pageSize: 25 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      expect(vm.tableHeader).toHaveLength(3);
-      expect(vm.tableHeader[0]).toEqual({ name: 'ID', value: 'id', tooltip: undefined });
-      expect(vm.tableHeader[1]).toEqual({ name: 'Name', value: 'name', tooltip: undefined });
+      expect(vm.pageSizeOptions).toHaveLength(4);
+      expect(vm.pageSizeOptions[0].name).toBe('10');
+      expect(vm.pageSizeOptions[1].active).toBe(true); // 25 is active
     });
 
-    it('should include tooltips when provided', () => {
-      const columnsWithTooltips = [
-        { name: 'ID', value: 'id', tooltip: 'Unique identifier' },
-        { name: 'Name', value: 'name', tooltip: 'User full name' }
-      ];
-
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: columnsWithTooltips },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.tableHeader[0].tooltip).toBe('Unique identifier');
-      expect(vm.tableHeader[1].tooltip).toBe('User full name');
-    });
-  });
-
-  describe('tableItems computed', () => {
-    it('should convert items to uiTable format', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.tableItems).toHaveLength(3);
-      expect(vm.tableItems[0].id).toBe(1);
-      expect(vm.tableItems[0].row).toHaveLength(3);
-    });
-
-    it('should handle items without id by using index', () => {
-      const itemsWithoutId = [
-        { name: 'John', email: 'john@test.com' },
-        { name: 'Jane', email: 'jane@test.com' }
-      ];
-
-      const wrapper = mount(Table, {
-        props: { items: itemsWithoutId, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.tableItems[0].id).toBe(0);
-      expect(vm.tableItems[1].id).toBe(1);
-    });
-
-    it('should handle disabled items', () => {
-      const itemsWithDisabled = [
-        { id: 1, name: 'John', email: 'john@test.com', disabled: true },
-        { id: 2, name: 'Jane', email: 'jane@test.com', disabled: false }
-      ];
-
-      const wrapper = mount(Table, {
-        props: { items: itemsWithDisabled, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.tableItems[0].disabled).toBe(true);
-      expect(vm.tableItems[1].disabled).toBe(false);
-    });
-
-    it('should handle null and undefined values', () => {
-      const itemsWithNulls = [
-        { id: 1, name: null, email: undefined }
-      ];
-
-      const wrapper = mount(Table, {
-        props: { items: itemsWithNulls, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.tableItems[0].row[1]).toBe('');
-      expect(vm.tableItems[0].row[2]).toBe('');
-    });
-  });
-
-  describe('pageItemsOptions computed', () => {
-    it('should return page size options', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, itemsPerPage: 25 },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.pageItemsOptions).toHaveLength(4);
-      expect(vm.pageItemsOptions[0].name).toBe('10');
-      expect(vm.pageItemsOptions[1].active).toBe(true); // 25 is active
-    });
-
-    it('should mark correct option as active', () => {
+    it('should mark correct option as active for page size 50', () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, itemsPerPage: 50 },
+        props: { items: mockItems, header: mockHeader, pageSize: 50 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      const activeOption = vm.pageItemsOptions.find((opt: any) => opt.active);
+      const activeOption = vm.pageSizeOptions.find((opt: any) => opt.active);
       expect(activeOption.value).toBe('50');
     });
   });
 
-  describe('showInitialNoResults computed', () => {
-    it('should return true when no items and not loading', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showInitialNoResults).toBe(true);
-    });
-
-    it('should return false when loading', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: true },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showInitialNoResults).toBe(false);
-    });
-
-    it('should return false when items exist', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showInitialNoResults).toBe(false);
-    });
-
-    it('should return false when user has searched', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      vm.hasUserSearched = true;
-      expect(vm.showInitialNoResults).toBe(false);
-    });
-  });
-
-  describe('showSearchNoResults computed', () => {
-    it('should return true when no items after search', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      vm.hasUserSearched = true;
-      expect(vm.showSearchNoResults).toBe(true);
-    });
-
-    it('should return false when not searched', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showSearchNoResults).toBe(false);
-    });
-  });
-
-  describe('showTable computed', () => {
-    it('should return true when loading', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: true },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showTable).toBe(true);
-    });
-
-    it('should return true when items exist', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showTable).toBe(true);
-    });
-
-    it('should return false when no items and not loading', () => {
-      const wrapper = mount(Table, {
-        props: { items: [], columns: mockColumns, loading: false },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      expect(vm.showTable).toBe(false);
-    });
-  });
-
   describe('handleOrderBy()', () => {
-    it('should emit order events', () => {
+    it('should emit order events', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.handleOrderBy({ value: 'name', orderDirection: 'desc' });
+      await nextTick();
 
       expect(wrapper.emitted('update:orderedBy')).toBeDefined();
       expect(wrapper.emitted('update:orderedBy')?.[0]).toEqual(['name']);
       expect(wrapper.emitted('update:orderDirection')).toBeDefined();
       expect(wrapper.emitted('update:orderDirection')?.[0]).toEqual(['desc']);
-      expect(wrapper.emitted('order-changed')).toBeDefined();
-      expect(wrapper.emitted('order-changed')?.[0]).toEqual(['name', 'desc']);
-    });
-
-    it('should reset selected items', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      vm.resetSelected = false;
-      vm.handleOrderBy({ value: 'name', orderDirection: 'asc' });
-
-      expect(vm.resetSelected).toBe(true);
+      expect(wrapper.emitted('order-by')).toBeDefined();
+      expect(wrapper.emitted('order-by')?.[0]).toEqual([{ value: 'name', orderDirection: 'desc' }]);
     });
   });
 
   describe('handleChangePage()', () => {
-    it('should emit page change events', () => {
+    it('should emit page change events', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, currentPage: 1 },
+        props: { items: mockItems, header: mockHeader, currentPage: 1 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.handleChangePage(2);
+      await nextTick();
 
       expect(wrapper.emitted('update:currentPage')).toBeDefined();
       expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([2]);
-      expect(wrapper.emitted('page-changed')).toBeDefined();
-      expect(wrapper.emitted('page-changed')?.[0]).toEqual([2]);
+      expect(wrapper.emitted('change-page')).toBeDefined();
+      expect(wrapper.emitted('change-page')?.[0]).toEqual([2]);
     });
+  });
 
-    it('should reset selected items', () => {
+  describe('handleChangePageSize()', () => {
+    it('should emit page size change events', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader, pageSize: 10 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.resetSelected = false;
-      vm.handleChangePage(3);
+      vm.handleChangePageSize(25);
+      await nextTick();
 
-      expect(vm.resetSelected).toBe(true);
+      expect(wrapper.emitted('update:pageSize')).toBeDefined();
+      expect(wrapper.emitted('update:pageSize')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('change-page-size')).toBeDefined();
+      expect(wrapper.emitted('change-page-size')?.[0]).toEqual([25]);
     });
-  });
 
-  describe('handleChangePageSize()', () => {
-    it('should emit page size change events', () => {
+    it('should reset to page 1 when page size changes', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, itemsPerPage: 10 },
+        props: { items: mockItems, header: mockHeader, currentPage: 3 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleChangePageSize({ value: '25' });
+      vm.handleChangePageSize(50);
+      await nextTick();
 
-      expect(wrapper.emitted('update:itemsPerPage')).toBeDefined();
-      expect(wrapper.emitted('update:itemsPerPage')?.[0]).toEqual([25]);
-      expect(wrapper.emitted('items-per-page-changed')).toBeDefined();
-      expect(wrapper.emitted('items-per-page-changed')?.[0]).toEqual([25]);
+      expect(wrapper.emitted('update:currentPage')).toBeDefined();
+      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
     });
 
-    it('should reset to page 1', () => {
+    it('should handle string page size value', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns, currentPage: 3 },
+        props: { items: mockItems, header: mockHeader, pageSize: 10 },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleChangePageSize({ value: '50' });
+      vm.handleChangePageSize('25');
+      await nextTick();
 
-      expect(wrapper.emitted('update:currentPage')).toBeDefined();
-      expect(wrapper.emitted('update:currentPage')?.[0]).toEqual([1]);
+      expect(wrapper.emitted('update:pageSize')?.[0]).toEqual([25]);
     });
   });
 
   describe('handleColumnsVisibilityChanged()', () => {
-    it('should add column to hidden list', () => {
+    it('should add column to hidden list', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+      await nextTick();
 
-      expect(vm.hiddenColumns).toContain(1);
+      expect(vm.internalHiddenColumns).toContain(1);
+      expect(wrapper.emitted('columns-visibility-changed')).toBeDefined();
     });
 
-    it('should remove column from hidden list', () => {
+    it('should remove column from hidden list', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader, hiddenColumns: [1, 2] },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.hiddenColumns = [1, 2];
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: false });
+      await nextTick();
 
-      expect(vm.hiddenColumns).not.toContain(1);
-      expect(vm.hiddenColumns).toContain(2);
+      expect(vm.internalHiddenColumns).not.toContain(1);
+      expect(vm.internalHiddenColumns).toContain(2);
     });
 
-    it('should not duplicate hidden columns', () => {
+    it('should not duplicate hidden columns', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
       vm.handleColumnsVisibilityChanged({ index: 1, hidden: true });
+      await nextTick();
 
-      expect(vm.hiddenColumns.filter((i: number) => i === 1)).toHaveLength(1);
+      expect(vm.internalHiddenColumns.filter((i: number) => i === 1)).toHaveLength(1);
     });
   });
 
-  describe('clearSelection()', () => {
-    it('should clear selected items', () => {
+  describe('exposed methods', () => {
+    it('clearSelection should clear selectedItemIds and emit events', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
       vm.selectedItemIds = new Set([1, 2, 3]);
       vm.clearSelection();
+      await nextTick();
 
       expect(vm.selectedItemIds.size).toBe(0);
-      expect(vm.resetSelected).toBe(true);
-    });
-
-    it('should emit update:selected with empty array', () => {
-      const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
-        global: { stubs: globalStubs }
-      });
-
-      const vm = wrapper.vm as any;
-      vm.selectedItemIds = new Set([1, 2]);
-      vm.clearSelection();
-
-      expect(wrapper.emitted('update:selected')).toBeDefined();
-      const lastEmit = wrapper.emitted('update:selected')?.slice(-1)[0];
-      expect(lastEmit?.[0]).toEqual([]);
+      expect(wrapper.emitted('update:resetSelected')).toBeDefined();
     });
-  });
 
-  describe('getHiddenColumns()', () => {
-    it('should return hidden columns array', () => {
+    it('getHiddenColumns should return internal hidden columns', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader, hiddenColumns: [0, 2] },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.hiddenColumns = [0, 2];
-
       expect(vm.getHiddenColumns()).toEqual([0, 2]);
     });
 
-    it('should return empty array when no hidden columns', () => {
+    it('getSelectedItems should return selected item IDs as array', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      expect(vm.getHiddenColumns()).toEqual([]);
+      vm.selectedItemIds = new Set([1, 3]);
+
+      const selected = vm.getSelectedItems();
+      expect(selected).toContain(1);
+      expect(selected).toContain(3);
+      expect(selected).toHaveLength(2);
     });
   });
 
-  describe('getSelectedItems()', () => {
-    it('should return array of selected item IDs', () => {
+  describe('handleSmartFiltersSent()', () => {
+    it('should emit smart-filters-sent event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.selectedItemIds = new Set([1, 3]);
+      const filters = { name: 'John' };
+      vm.handleSmartFiltersSent(filters);
+      await nextTick();
 
-      const selected = vm.getSelectedItems();
-      expect(selected).toContain(1);
-      expect(selected).toContain(3);
-      expect(selected).toHaveLength(2);
+      expect(wrapper.emitted('smart-filters-sent')).toBeDefined();
+      expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
     });
+  });
 
-    it('should return empty array when nothing selected', () => {
+  describe('handleSelectAllItems()', () => {
+    it('should select all items and emit event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      expect(vm.getSelectedItems()).toEqual([]);
+      vm.handleSelectAllItems();
+      await nextTick();
+
+      expect(vm.selectedItemIds.size).toBe(3);
+      expect(vm.selectedItemIds.has(1)).toBe(true);
+      expect(vm.selectedItemIds.has(2)).toBe(true);
+      expect(vm.selectedItemIds.has(3)).toBe(true);
+      expect(wrapper.emitted('select-all-items')).toBeDefined();
     });
   });
 
-  describe('handleSmartFiltersSent()', () => {
-    it('should set hasUserSearched to true', () => {
+  describe('handleDeselectAllItems()', () => {
+    it('should deselect all items and emit event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleSmartFiltersSent({ name: 'John' });
+      vm.selectedItemIds = new Set([1, 2, 3]);
+      vm.handleDeselectAllItems();
+      await nextTick();
 
-      expect(vm.hasUserSearched).toBe(true);
+      expect(vm.selectedItemIds.size).toBe(0);
+      expect(wrapper.emitted('deselect-all-items')).toBeDefined();
     });
+  });
 
-    it('should emit filter events', () => {
+  describe('handleTableAction()', () => {
+    it('should update selectedItemIds and emit table-action event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      const filters = { name: 'John', email: 'test' };
-      vm.handleSmartFiltersSent(filters);
+      vm.handleTableAction({ action: 'delete', items: [1, 3] });
+      await nextTick();
 
-      expect(wrapper.emitted('smart-filters-sent')).toBeDefined();
-      expect(wrapper.emitted('smart-filters-sent')?.[0]).toEqual([filters]);
-      expect(wrapper.emitted('multiple-filters-applied')).toBeDefined();
-      expect(wrapper.emitted('multiple-filters-applied')?.[0]).toEqual([filters]);
+      expect(vm.selectedItemIds.size).toBe(2);
+      expect(wrapper.emitted('table-action')).toBeDefined();
+      expect(wrapper.emitted('table-action')?.[0]).toEqual([{ action: 'delete', items: [1, 3] }]);
     });
   });
 
-  describe('handleSelectAllItems()', () => {
-    it('should select all items', () => {
+  describe('handleSmartFiltersCleared()', () => {
+    it('should emit smart-filters-cleared event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleSelectAllItems();
+      vm.handleSmartFiltersCleared();
+      await nextTick();
 
-      expect(vm.selectedItemIds.size).toBe(3);
-      expect(vm.selectedItemIds.has(1)).toBe(true);
-      expect(vm.selectedItemIds.has(2)).toBe(true);
-      expect(vm.selectedItemIds.has(3)).toBe(true);
+      expect(wrapper.emitted('smart-filters-cleared')).toBeDefined();
     });
+  });
 
-    it('should emit select-all-items event', () => {
+  describe('handleSmartFilterDeleted()', () => {
+    it('should emit smart-filter-deleted event with index', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleSelectAllItems();
+      vm.handleSmartFilterDeleted(0);
+      await nextTick();
 
-      expect(wrapper.emitted('select-all-items')).toBeDefined();
+      expect(wrapper.emitted('smart-filter-deleted')).toBeDefined();
+      expect(wrapper.emitted('smart-filter-deleted')?.[0]).toEqual([0]);
     });
   });
 
-  describe('handleDeselectAllItems()', () => {
-    it('should deselect all items', () => {
+  describe('handleNoResultsAction()', () => {
+    it('should emit no-results-action event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: [], header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.selectedItemIds = new Set([1, 2, 3]);
-      vm.handleDeselectAllItems();
+      vm.handleNoResultsAction('create');
+      await nextTick();
 
-      expect(vm.selectedItemIds.size).toBe(0);
+      expect(wrapper.emitted('no-results-action')).toBeDefined();
+      expect(wrapper.emitted('no-results-action')?.[0]).toEqual(['create']);
     });
+  });
 
-    it('should emit deselect-all-items event', () => {
+  describe('handleModalAction()', () => {
+    it('should emit modal-action event', async () => {
       const wrapper = mount(Table, {
-        props: { items: mockItems, columns: mockColumns },
+        props: { items: mockItems, header: mockHeader },
         global: { stubs: globalStubs }
       });
 
       const vm = wrapper.vm as any;
-      vm.handleDeselectAllItems();
+      vm.handleModalAction({ modal: 'confirm-delete', action: 'confirm' });
+      await nextTick();
 
-      expect(wrapper.emitted('deselect-all-items')).toBeDefined();
+      expect(wrapper.emitted('modal-action')).toBeDefined();
+      expect(wrapper.emitted('modal-action')?.[0]).toEqual([{ modal: 'confirm-delete', action: 'confirm' }]);
     });
   });
 });