@htlkg/components 0.0.1

package/src/data/Table.demo.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import { Table } from '@htlkg/components/data';
+
+// Sample data
+const allItems = ref([
+	{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active', department: 'Engineering' },
+	{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active', department: 'Marketing' },
+	{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive', department: 'Sales' },
+	{ id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Manager', status: 'Active', department: 'Engineering' },
+	{ id: 5, name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'Active', department: 'Support' },
+	{ id: 6, name: 'Diana Prince', email: 'diana@example.com', role: 'Admin', status: 'Active', department: 'Engineering' },
+	{ id: 7, name: 'Eve Davis', email: 'eve@example.com', role: 'User', status: 'Inactive', department: 'Marketing' },
+	{ id: 8, name: 'Frank Miller', email: 'frank@example.com', role: 'Manager', status: 'Active', department: 'Sales' },
+	{ id: 9, name: 'Grace Lee', email: 'grace@example.com', role: 'User', status: 'Active', department: 'Engineering' },
+	{ id: 10, name: 'Henry Wilson', email: 'henry@example.com', role: 'Manager', status: 'Active', department: 'Support' },
+	{ id: 11, name: 'Iris Chen', email: 'iris@example.com', role: 'User', status: 'Inactive', department: 'Marketing' },
+	{ id: 12, name: 'Jack Taylor', email: 'jack@example.com', role: 'Admin', status: 'Active', department: 'Engineering' },
+	{ id: 13, name: 'Karen White', email: 'karen@example.com', role: 'User', status: 'Active', department: 'Sales' },
+	{ id: 14, name: 'Leo Martinez', email: 'leo@example.com', role: 'Manager', status: 'Active', department: 'Support' },
+	{ 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' }
+];
+
+// State
+const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const orderedBy = ref('name');
+const orderDirection = ref<'asc' | 'desc'>('asc');
+const selected = ref([]);
+const appliedFilters = ref<any>(null);
+
+// Actions for selection
+const actions = [
+	{ name: 'Delete Selected', id: 'delete' },
+	{ name: 'Export Selected', id: 'export' },
+	{ name: 'Change Status', id: 'changeStatus' }
+];
+
+// Modal for select all confirmation
+const selectAllItemsModal = {
+	title: 'Select All Items?',
+	content: 'Do you want to select all items (15 total), or just the items on this page?',
+	modalName: 'selectAllItemsModal',
+	open: false,
+	actions: [
+		{ name: 'This page only', value: 'close' },
+		{ name: 'All items', value: 'selectAll' }
+	]
+};
+
+// Smart filter categories
+const availableCategories = [
+	{
+		name: 'name',
+		label: 'Name',
+		componentType: 'uiInput' as const,
+		defaultProps: {
+			name: 'name',
+			label: 'Name',
+			placeholder: 'Search by name...',
+			value: ''
+		}
+	},
+	{
+		name: 'role',
+		label: 'Role',
+		componentType: 'uiSelect' as const,
+		defaultProps: {
+			name: 'role',
+			label: 'Role',
+			items: [
+				{ id: '0', name: 'Select a role...', label: 'Select a role...' },
+				{ id: 'admin', name: 'Admin', label: 'Admin' },
+				{ id: 'manager', name: 'Manager', label: 'Manager' },
+				{ id: 'user', name: 'User', label: 'User' }
+			],
+			select: { id: '0', name: 'Select a role...', label: 'Select a role...' }
+		}
+	},
+	{
+		name: 'department',
+		label: 'Department',
+		componentType: 'uiSelect' as const,
+		defaultProps: {
+			name: 'department',
+			label: 'Department',
+			items: [
+				{ id: '0', name: 'Select a department...', label: 'Select a department...' },
+				{ id: 'engineering', name: 'Engineering', label: 'Engineering' },
+				{ id: 'marketing', name: 'Marketing', label: 'Marketing' },
+				{ id: 'sales', name: 'Sales', label: 'Sales' },
+				{ id: 'support', name: 'Support', label: 'Support' }
+			],
+			select: { id: '0', name: 'Select a department...', label: 'Select a department...' }
+		}
+	},
+	{
+		name: 'status',
+		label: 'Status',
+		componentType: 'uiSelect' as const,
+		defaultProps: {
+			name: 'status',
+			label: 'Status',
+			items: [
+				{ id: '0', name: 'Select a status...', label: 'Select a status...' },
+				{ id: 'active', name: 'Active', label: 'Active' },
+				{ id: 'inactive', name: 'Inactive', label: 'Inactive' }
+			],
+			select: { id: '0', name: 'Select a status...', label: 'Select a status...' }
+		}
+	}
+];
+
+// Computed: Filtered items
+const filteredItems = computed(() => {
+	let items = [...allItems.value];
+	
+	// Apply filters
+	if (appliedFilters.value?.filters) {
+		items = items.filter(item => {
+			const filterResults = appliedFilters.value.filters.map((filter: any) => {
+				const value = String((item as any)[filter.name] || '').toLowerCase();
+				const filterValue = String(filter.value || '').toLowerCase();
+				
+				if (!filterValue) return true;
+				
+				if (filter.type === 'uiInput') {
+					return value.includes(filterValue);
+				} else if (filter.type === 'uiSelect') {
+					return value === filterValue;
+				}
+				return true;
+			});
+			
+			// Apply logic operator
+			if (appliedFilters.value.logicOperator === 'and') {
+				return filterResults.every((r: boolean) => r);
+			} else {
+				return filterResults.some((r: boolean) => r);
+			}
+		});
+	}
+	
+	// Apply sorting
+	if (orderedBy.value) {
+		items.sort((a, b) => {
+			const aVal = String((a as any)[orderedBy.value] || '');
+			const bVal = String((b as any)[orderedBy.value] || '');
+			const comparison = aVal.localeCompare(bVal);
+			return orderDirection.value === 'asc' ? comparison : -comparison;
+		});
+	}
+	
+	return items;
+});
+
+// Computed: Paginated items
+const paginatedItems = computed(() => {
+	const start = (currentPage.value - 1) * itemsPerPage.value;
+	const end = start + itemsPerPage.value;
+	return filteredItems.value.slice(start, end);
+});
+
+// Computed: Total pages
+const totalPages = computed(() => 
+	Math.ceil(filteredItems.value.length / itemsPerPage.value)
+);
+
+// Event handlers
+const handleTableAction = (data: { action: string; items: Array<string | number> }) => {
+	console.log('Table action:', data.action, 'Items:', data.items);
+	
+	switch (data.action) {
+		case 'delete':
+			alert(`Delete ${data.items.length} items`);
+			break;
+		case 'export':
+			alert(`Export ${data.items.length} items`);
+			break;
+		case 'changeStatus':
+			alert(`Change status for ${data.items.length} items`);
+			break;
+	}
+};
+
+const handleRefresh = () => {
+	loading.value = true;
+	console.log('Refreshing data...');
+	setTimeout(() => {
+		loading.value = false;
+		console.log('Data refreshed!');
+	}, 1000);
+};
+
+const handleFiltersApplied = (filters: any) => {
+	console.log('Filters applied:', filters);
+	appliedFilters.value = filters;
+	currentPage.value = 1; // Reset to first page
+};
+
+const handleOrderChanged = (field: string, direction: 'asc' | 'desc') => {
+	console.log('Order changed:', field, direction);
+	orderedBy.value = field;
+	orderDirection.value = direction;
+};
+
+const handlePageChanged = (page: number) => {
+	console.log('Page changed:', page);
+	currentPage.value = page;
+};
+
+const handleItemsPerPageChanged = (size: number) => {
+	console.log('Items per page changed:', size);
+	itemsPerPage.value = size;
+	currentPage.value = 1;
+};
+</script>
+
+<template>
+	<div>
+		<!-- Stats Display -->
+		<div class="mb-6 p-4 bg-blue-50 rounded border border-blue-200">
+			<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+				<div>
+					<span class="font-medium text-gray-700">Total Items:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ allItems.length }}</span>
+				</div>
+				<div>
+					<span class="font-medium text-gray-700">Filtered:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ filteredItems.length }}</span>
+				</div>
+				<div>
+					<span class="font-medium text-gray-700">Current Page:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ currentPage }} / {{ totalPages }}</span>
+				</div>
+				<div>
+					<span class="font-medium text-gray-700">Selected:</span>
+					<span class="ml-2 text-blue-600 font-semibold">{{ selected.length }}</span>
+				</div>
+			</div>
+			<div v-if="selected.length > 0" class="mt-3 pt-3 border-t border-blue-200 text-sm text-gray-600">
+				<span class="font-medium">Selected Items:</span>
+				<span class="ml-2">{{ selected.map((s: any) => s.name).join(', ') }}</span>
+			</div>
+			<div v-if="appliedFilters" class="mt-3 pt-3 border-t border-blue-200 text-sm text-gray-600">
+				<span class="font-medium">Active Filters:</span>
+				<span class="ml-2">{{ appliedFilters.filters.length }} filter(s) applied</span>
+			</div>
+		</div>
+
+		<!-- Table Component -->
+		<Table
+			:items="paginatedItems"
+			:columns="columns"
+			:loading="loading"
+			:actions="actions"
+			:select-all-items-modal="selectAllItemsModal"
+			:available-categories="availableCategories"
+			:current-page="currentPage"
+			:total-pages="totalPages"
+			:total-items="filteredItems.length"
+			:items-per-page="itemsPerPage"
+			:ordered-by="orderedBy"
+			:order-direction="orderDirection"
+			:show-refresh="true"
+			:show-filters="true"
+			:show-pagination="true"
+			v-model:selected="selected"
+			@table-action="handleTableAction"
+			@refresh:data="handleRefresh"
+			@multiple-filters-applied="handleFiltersApplied"
+			@order-changed="handleOrderChanged"
+			@page-changed="handlePageChanged"
+			@items-per-page-changed="handleItemsPerPageChanged"
+		>
+			<template #actions>
+				<button
+					class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+					@click="() => console.log('Custom action button clicked!')"
+				>
+					Custom Action
+				</button>
+			</template>
+		</Table>
+	</div>
+</template>