@htlkg/components 0.0.2 → 0.0.3

package/src/data/DataTable.vue

@@ -0,0 +1,553 @@
+<script setup lang="ts" generic="T extends Record<string, any>">
+/**
+ * DataTable Component
+ *
+ * A simplified table component that encapsulates useTable composable and Table component,
+ * providing a cleaner API with automatic event wiring and column transformations.
+ */
+
+import { computed, toRef, watch } from "vue";
+import Table from "./Table.vue";
+import { useTable, type SmartFilter } from "../composables/useTable";
+
+/**
+ * Column definition for DataTable
+ */
+export interface DataTableColumn<TItem = any> {
+	/** Property key to access from item */
+	key: string;
+	/** Column header label */
+	label: string;
+	/** Whether column is sortable (default: true) */
+	sortable?: boolean;
+	/** Column width */
+	width?: string;
+	/** Custom render function - returns value for table cell */
+	render?: (item: TItem, index: number) => any;
+	/** Cell type hint for default formatting */
+	type?: "text" | "tag" | "badge" | "date" | "number" | "actions";
+}
+
+/**
+ * Filter definition for DataTable
+ */
+export interface DataTableFilter {
+	/** Filter key (matches column key) */
+	key: string;
+	/** Filter label */
+	label: string;
+	/** Filter input type */
+	type: "text" | "select" | "number" | "date" | "dateRange";
+	/** Options for select type */
+	options?: Array<{ label: string; value: any }>;
+	/** Placeholder text */
+	placeholder?: string;
+}
+
+/**
+ * Bulk action definition
+ */
+export interface BulkAction {
+	/** Action identifier */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Icon name */
+	icon?: string;
+	/** Visual variant */
+	variant?: "default" | "danger" | "warning";
+	/** Require confirmation */
+	confirm?: boolean;
+}
+
+/**
+ * Row action definition
+ */
+export interface RowAction {
+	/** Action identifier */
+	id: string;
+	/** Display label */
+	label: string;
+	/** Icon name */
+	icon?: string;
+}
+
+/**
+ * No results configuration
+ */
+export interface NoResultsConfig {
+	/** Title text */
+	title: string;
+	/** Message text */
+	message: string;
+	/** Action buttons */
+	actions?: Array<{ action: string; text: string }>;
+}
+
+interface Props {
+	/** Data items to display */
+	items: T[];
+	/** Column definitions */
+	columns: DataTableColumn<T>[];
+	/** Filter definitions */
+	filters?: DataTableFilter[];
+	/** Initial filter values (from URL params) */
+	initialFilters?: Record<string, any>;
+	/** Loading state */
+	loading?: boolean;
+	/** Items per page (default: 10) */
+	pageSize?: number;
+	/** Current page (for syncUrl mode) */
+	currentPage?: number;
+	/** Total pages (for syncUrl mode) */
+	totalPages?: number;
+	/** Total items count (for syncUrl mode) */
+	totalItems?: number;
+	/** Property key for item ID (default: 'id') */
+	idKey?: keyof T;
+	/** Row actions (shown in actions column) */
+	actions?: RowAction[] | string[];
+	/** Enable row selection */
+	selectable?: boolean;
+	/** Bulk actions (shown when items selected) */
+	bulkActions?: BulkAction[];
+	/** No results configuration */
+	noResults?: NoResultsConfig;
+	/** Default sort key */
+	defaultSortKey?: string;
+	/** Default sort order */
+	defaultSortOrder?: "asc" | "desc";
+	/** Sync table state with URL (for SSR pages) */
+	syncUrl?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	loading: false,
+	pageSize: 10,
+	currentPage: 1,
+	totalPages: 1,
+	totalItems: 0,
+	idKey: "id" as keyof T,
+	selectable: false,
+	defaultSortOrder: "asc",
+	syncUrl: false,
+});
+
+const emit = defineEmits<{
+	/** Row action clicked */
+	action: [action: string, item: T];
+	/** Bulk action clicked */
+	bulkAction: [action: string, items: T[]];
+	/** Selection changed */
+	selection: [items: T[]];
+	/** Row clicked */
+	rowClick: [item: T];
+	/** Custom cell emit (e.g., link clicks with emits config) */
+	customEmit: [data: any];
+	/** Page changed (for URL sync) */
+	pageChange: [page: number];
+	/** Sort changed (for URL sync) */
+	sortChange: [key: string, order: "asc" | "desc"];
+	/** Filters changed (for URL sync) */
+	filterChange: [filters: Record<string, any>];
+}>();
+
+/**
+ * Update URL with new params (for syncUrl mode)
+ */
+function updateUrl(params: Record<string, string | undefined>) {
+	if (typeof window === "undefined") return;
+	
+	const url = new URL(window.location.href);
+	Object.entries(params).forEach(([key, value]) => {
+		if (value !== undefined && value !== "") {
+			url.searchParams.set(key, value);
+		} else {
+			url.searchParams.delete(key);
+		}
+	});
+	// Navigate to trigger server-side data fetch
+	window.location.href = url.toString();
+}
+
+/**
+ * Handle page change with optional URL sync
+ */
+function handlePageChange(page: number) {
+	if (props.syncUrl) {
+		emit("pageChange", page);
+		updateUrl({ page: String(page) });
+	} else {
+		table.handlePageChange(page);
+	}
+}
+
+/**
+ * Handle page size change with optional URL sync
+ */
+function handlePageSizeChange(size: number | string) {
+	if (props.syncUrl) {
+		updateUrl({ pageSize: String(size), page: "1" });
+	} else {
+		table.handlePageSizeChange(size);
+	}
+}
+
+/**
+ * Handle sort change with optional URL sync
+ */
+function handleOrderBy(event: { value: string; orderDirection: "asc" | "desc" }) {
+	if (props.syncUrl) {
+		emit("sortChange", event.value, event.orderDirection);
+		updateUrl({ sortKey: event.value, sortOrder: event.orderDirection, page: "1" });
+	} else {
+		table.handleOrderBy(event);
+	}
+}
+
+/**
+ * Extract actual value from filter value (handles uiSelect objects with { id, name })
+ */
+function extractFilterValue(value: any): string | undefined {
+	if (value === undefined || value === null || value === "") {
+		return undefined;
+	}
+	// If value is an object with 'id' property (uiSelect format), extract the id
+	if (typeof value === "object" && value !== null && "id" in value) {
+		return String(value.id);
+	}
+	return String(value);
+}
+
+/**
+ * Handle filters applied with optional URL sync
+ */
+function handleFiltersApplied(filters: any) {
+	if (props.syncUrl) {
+		// Convert filter data to URL params
+		const filterParams: Record<string, string | undefined> = { page: "1" };
+
+		// Handle uiTable format: { logicOperator: 'and', filters: [...] }
+		if (filters && typeof filters === "object" && "filters" in filters && Array.isArray(filters.filters)) {
+			filters.filters.forEach((f: { name: string; value: any }) => {
+				const extractedValue = extractFilterValue(f.value);
+				if (extractedValue !== undefined) {
+					filterParams[f.name] = extractedValue;
+				}
+			});
+		}
+		// Handle SmartFilter array format: [{ category, operator, value }, ...]
+		else if (Array.isArray(filters)) {
+			filters.forEach((f: { category?: string; name?: string; value: any }) => {
+				const key = f.category || f.name;
+				const extractedValue = extractFilterValue(f.value);
+				if (key && extractedValue !== undefined) {
+					filterParams[key] = extractedValue;
+				}
+			});
+		}
+		// Handle simple object format: { email: 'john', status: 'active' }
+		else if (filters && typeof filters === "object") {
+			Object.entries(filters).forEach(([key, value]) => {
+				// Skip non-filter keys
+				if (key === "logicOperator" || key === "filters") return;
+				const extractedValue = extractFilterValue(value);
+				if (extractedValue !== undefined) {
+					filterParams[key] = extractedValue;
+				}
+			});
+		}
+
+		emit("filterChange", filterParams);
+		updateUrl(filterParams);
+	} else {
+		table.handleSmartFiltersApplied(filters);
+	}
+}
+
+/**
+ * Handle filters cleared with optional URL sync
+ */
+function handleFiltersCleared() {
+	if (props.syncUrl) {
+		// Clear all filter params from URL
+		if (typeof window === "undefined") return;
+		const url = new URL(window.location.href);
+		// Keep only non-filter params
+		const keysToRemove: string[] = [];
+		url.searchParams.forEach((_, key) => {
+			if (!["page", "pageSize", "sortKey", "sortOrder"].includes(key)) {
+				keysToRemove.push(key);
+			}
+		});
+		keysToRemove.forEach((key) => url.searchParams.delete(key));
+		url.searchParams.set("page", "1");
+		window.location.href = url.toString();
+	} else {
+		table.handleSmartFiltersCleared();
+	}
+}
+
+/**
+ * Handle single filter deleted with optional URL sync
+ */
+function handleFilterDeleted(index: number) {
+	if (props.syncUrl) {
+		// For URL sync, we need to rebuild filters without the deleted one
+		// This is handled by the UI component, just trigger a page reload
+		handleFiltersCleared();
+	} else {
+		table.handleSmartFilterDeleted(index);
+	}
+}
+
+// Initialize useTable with reactive items
+const table = useTable<T>({
+	items: toRef(() => props.items),
+	pageSize: props.pageSize,
+	sortKey: props.defaultSortKey ?? "",
+	sortOrder: props.defaultSortOrder,
+	idKey: props.idKey as string,
+});
+
+// Transform columns to table header format
+const tableHeader = computed(() =>
+	props.columns.map((col) => ({
+		name: col.key,
+		label: col.label,
+		sortable: col.sortable !== false,
+		width: col.width,
+	}))
+);
+
+// Transform items to table row format
+// When syncUrl is true, data is already paginated server-side, use props.items directly
+const tableItems = computed(() => {
+	const itemsToRender = props.syncUrl ? props.items : table.paginatedItems.value;
+	return itemsToRender.map((item, itemIndex) => ({
+		id: item[props.idKey as keyof T],
+		row: props.columns.map((col) => {
+			// Use custom render if provided
+			if (col.render) {
+				return col.render(item, itemIndex);
+			}
+
+			// Get raw value
+			const value = item[col.key as keyof T];
+
+			// Apply type-based formatting
+			return formatCellValue(value, col.type);
+		}),
+		// Store original item for action handlers
+		_originalData: item,
+	}));
+});
+
+// Transform filters to smart filter categories
+const filterCategories = computed(() =>
+	props.filters?.map((f) => ({
+		id: f.key,
+		name: f.label,
+		componentType: mapFilterType(f.type),
+		defaultProps: buildFilterProps(f),
+	})) ?? []
+);
+
+// Convert initial filters (from URL params) to Table's filter format
+const initialTableFilters = computed(() => {
+	if (!props.initialFilters || !props.filters) return undefined;
+
+	const filterEntries = Object.entries(props.initialFilters).filter(
+		([, value]) => value !== undefined && value !== null && value !== ""
+	);
+
+	if (filterEntries.length === 0) return undefined;
+
+	return {
+		logicOperator: "and",
+		filters: filterEntries.map(([key, value]) => {
+			const filterDef = props.filters?.find((f) => f.key === key);
+			return {
+				name: key,
+				label: filterDef?.label ?? key,
+				type: filterDef ? mapFilterType(filterDef.type) : "uiInput",
+				value: String(value),
+			};
+		}),
+	};
+});
+
+// Build row actions for table
+const rowActions = computed(() => {
+	if (!props.actions || props.actions.length === 0) return undefined;
+
+	return props.actions.map((action) => {
+		if (typeof action === "string") {
+			return { name: action, id: action };
+		}
+		return { name: action.label, id: action.id };
+	});
+});
+
+// Build bulk action buttons
+const bulkActionButtons = computed(() => {
+	if (!props.bulkActions || !props.selectable) return undefined;
+
+	return props.bulkActions.map((action) => ({
+		text: action.label,
+		id: action.id,
+		color: action.variant === "danger" ? "red" : action.variant === "warning" ? "yellow" : "blue",
+		icon: action.icon,
+	}));
+});
+
+// Select all modal config
+const selectAllModal = computed(() => {
+	if (!props.selectable) return undefined;
+	return {
+		title: "Select All Items",
+		message: `Select all ${table.totalItems.value} items?`,
+		cancelText: "Select page only",
+		confirmText: "Select all",
+	};
+});
+
+/**
+ * Format cell value based on type
+ */
+function formatCellValue(value: any, type?: string): any {
+	if (value === null || value === undefined) return "";
+
+	switch (type) {
+		case "date":
+			if (value instanceof Date) {
+				return value.toLocaleDateString();
+			}
+			if (typeof value === "string") {
+				return new Date(value).toLocaleDateString();
+			}
+			return value;
+
+		case "number":
+			return typeof value === "number" ? value.toLocaleString() : value;
+
+		case "badge":
+			return { content: value, type: "badge" };
+
+		case "tag":
+			return { content: value, type: "tag" };
+
+		default:
+			return value;
+	}
+}
+
+/**
+ * Map filter type to component type
+ */
+function mapFilterType(type: string): "uiInput" | "uiSelect" {
+	switch (type) {
+		case "select":
+			return "uiSelect";
+		default:
+			return "uiInput";
+	}
+}
+
+/**
+ * Build filter component props
+ */
+function buildFilterProps(filter: DataTableFilter): Record<string, any> {
+	const defaultProps: Record<string, any> = {};
+
+	if (filter.placeholder) {
+		defaultProps.placeholder = filter.placeholder;
+	}
+
+	if (filter.type === "select" && filter.options) {
+		// uiSelect smart filter uses 'name' as the filter value and 'label' for display
+		// Format: { id: unique, name: actualValue, label: displayText }
+		defaultProps.items = filter.options.map((opt, index) => ({
+			id: String(index),
+			name: String(opt.value),  // This is what gets used as filter value
+			label: opt.label,         // This is what gets displayed
+		}));
+	}
+
+	if (filter.type === "number") {
+		defaultProps.type = "number";
+	}
+
+	return defaultProps;
+}
+
+/**
+ * Handle table action (row action)
+ */
+function handleTableAction(data: { action: string; items: Array<string | number> }) {
+	// Find the item that was acted upon
+	const itemId = data.items[0];
+	const tableItem = tableItems.value.find((ti) => ti.id === itemId);
+	if (tableItem && tableItem._originalData) {
+		emit("action", data.action, tableItem._originalData);
+	}
+}
+
+/**
+ * Handle bulk action button click
+ */
+function handleBulkActionClick(data: { id: string; text: string }) {
+	emit("bulkAction", data.id, table.selectedItems.value);
+}
+
+/**
+ * Handle custom cell emit (e.g., link clicks with emits config)
+ */
+function handleCustomEmit(data: any) {
+	emit("customEmit", data);
+}
+
+/**
+ * Watch for selection changes
+ */
+watch(
+	() => table.selectedItems.value,
+	(items) => {
+		emit("selection", items);
+	},
+	{ deep: true }
+);
+</script>
+
+<template>
+	<Table
+		:header="tableHeader"
+		:items="tableItems"
+		:loading="loading"
+		:current-page="syncUrl ? currentPage : table.currentPage.value"
+		:total-pages="syncUrl ? totalPages : table.totalPages.value"
+		:total-items="syncUrl ? totalItems : table.totalItems.value"
+		:page-size="syncUrl ? pageSize : table.pageSize.value"
+		:ordered-by="defaultSortKey ?? table.sortKey.value"
+		:order-direction="defaultSortOrder ?? table.sortOrder.value"
+		:smart-filter-categories="filterCategories"
+		:filters="initialTableFilters"
+		:hidden-columns="table.hiddenColumns.value"
+		:reset-selected="table.resetSelected.value"
+		:actions="rowActions"
+		:select-all-items-modal="selectAllModal"
+		:table-action-buttons="bulkActionButtons"
+		:no-results="noResults"
+		@change-page="handlePageChange"
+		@change-page-size="handlePageSizeChange"
+		@order-by="handleOrderBy"
+		@smart-filters-sent="handleFiltersApplied"
+		@smart-filters-cleared="handleFiltersCleared"
+		@smart-filter-deleted="handleFilterDeleted"
+		@columns-visibility-changed="table.handleColumnsVisibilityChanged"
+		@modal-action="table.handleModalAction"
+		@table-action="handleTableAction"
+		@table-action-button-clicked="handleBulkActionClick"
+		@custom-emit="handleCustomEmit"
+	/>
+</template>