@htlkg/components 0.0.4 → 0.0.9

package/package.json

@@ -1,70 +1,71 @@
 {
-  "name": "@htlkg/components",
-  "version": "0.0.4",
-  "type": "module",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "types": "./src/index.ts"
-    },
-    "./data": {
-      "import": "./dist/data/index.js",
-      "types": "./src/data/index.ts"
-    },
-    "./forms": {
-      "import": "./dist/forms/index.js",
-      "types": "./src/forms/index.ts"
-    },
-    "./navigation": {
-      "import": "./dist/navigation/index.js",
-      "types": "./src/navigation/index.ts"
-    },
-    "./overlays": {
-      "import": "./dist/overlays/index.js",
-      "types": "./src/overlays/index.ts"
-    },
-    "./domain": {
-      "import": "./dist/domain/index.js",
-      "types": "./src/domain/index.ts"
-    },
-    "./composables": {
-      "import": "./dist/composables/index.js",
-      "types": "./src/composables/index.ts"
-    },
-    "./stores": {
-      "import": "./dist/stores/index.js",
-      "types": "./src/stores/index.ts"
-    }
-  },
-  "files": [
-    "src",
-    "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"
-  },
-  "publishConfig": {
-    "access": "restricted"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vue/test-utils": "^2.4.6",
-    "typescript": "^5.9.2",
-    "vite": "^6.3.5",
-    "vitest": "^3.2.4"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "version:patch": "pnpm version patch --no-git-tag-version",
-    "version:minor": "pnpm version minor --no-git-tag-version",
-    "version:major": "pnpm version major --no-git-tag-version"
-  }
-}
+	"name": "@htlkg/components",
+	"version": "0.0.9",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./src/index.ts"
+		},
+		"./data": {
+			"import": "./dist/data/index.js",
+			"types": "./src/data/index.ts"
+		},
+		"./forms": {
+			"import": "./dist/forms/index.js",
+			"types": "./src/forms/index.ts"
+		},
+		"./navigation": {
+			"import": "./dist/navigation/index.js",
+			"types": "./src/navigation/index.ts"
+		},
+		"./overlays": {
+			"import": "./dist/overlays/index.js",
+			"types": "./src/overlays/index.ts"
+		},
+		"./domain": {
+			"import": "./dist/domain/index.js",
+			"types": "./src/domain/index.ts"
+		},
+		"./composables": {
+			"import": "./dist/composables/index.js",
+			"types": "./src/composables/index.ts"
+		},
+		"./stores": {
+			"import": "./dist/stores/index.js",
+			"types": "./src/stores/index.ts"
+		}
+	},
+	"files": [
+		"src",
+		"dist"
+	],
+	"scripts": {
+		"build": "vite build",
+		"dev": "vite build --watch",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"prepublishOnly": "pnpm build",
+		"version:patch": "pnpm version patch --no-git-tag-version",
+		"version:minor": "pnpm version minor --no-git-tag-version",
+		"version:major": "pnpm version major --no-git-tag-version"
+	},
+	"dependencies": {
+		"@hotelinking/ui": "^16.49.16",
+		"@htlkg/core": "^0.0.9",
+		"@htlkg/data": "^0.0.9",
+		"ajv": "^8.17.1",
+		"ajv-formats": "^3.0.1",
+		"vue": "^3.5.22"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^5.2.4",
+		"@vue/test-utils": "^2.4.6",
+		"typescript": "^5.9.2",
+		"vite": "^6.3.5",
+		"vitest": "^3.2.4"
+	}
+}

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();
     });
   });
 });