@htlkg/components 0.0.2 → 0.0.3

package/src/data/Table/Table.vue

@@ -0,0 +1,295 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import {
+  type TableItemType,
+  type UiDropdownItemType,
+  type UiModalInterface,
+  type UiTableInterface,
+  uiTable
+} from '@hotelinking/ui';
+
+interface Props {
+  // Data
+  items: TableItemType[];
+  header: UiTableInterface['header'];
+  
+  // State
+  loading?: boolean;
+  currentPage?: number;
+  totalPages?: number;
+  totalItems?: number;
+  pageSize?: number;
+  orderedBy?: string;
+  orderDirection?: 'asc' | 'desc';
+  
+  // Selection
+  actions?: Array<{ name: string; id: string }>;
+  selectAllItemsModal?: UiModalInterface;
+  resetSelected?: boolean;
+  
+  // Filters (now integrated in uiTable)
+  smartFilterCategories?: Array<{
+    id: string;
+    name: string;
+    componentType: 'uiInput' | 'uiSelect';
+    defaultProps: any;
+  }>;
+  filterLiterals?: {
+    filters: string;
+    contains: string;
+    is: string;
+    and: string;
+    or: string;
+    deleteAll: string;
+    filter: string;
+  };
+  filters?: {
+    logicOperator: string;
+    filters: Array<{
+      name: string;
+      label: string;
+      type: 'uiInput' | 'uiSelect';
+      value: string | undefined;
+    }>;
+  };
+  
+  // Additional features
+  tableActionsDropdown?: { items: UiDropdownItemType[]; loading?: boolean };
+  tableActionButtons?: Array<{
+    text: string;
+    id: string;
+    color?: string;
+    size?: string;
+    disabled?: boolean;
+    icon?: any;
+    loading?: boolean;
+  }>;
+  noResults?: {
+    title: string;
+    message: string;
+    actions?: Array<{ action: string; text: string }>;
+    items?: UiDropdownItemType[];
+    select?: UiDropdownItemType;
+  };
+  hiddenColumns?: number[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  loading: false,
+  currentPage: 1,
+  totalPages: 1,
+  totalItems: 0,
+  pageSize: 10,
+  orderedBy: '',
+  orderDirection: 'asc',
+  resetSelected: false,
+  filterLiterals: () => ({
+    filters: 'Smart Filters',
+    contains: 'contains',
+    is: 'is',
+    and: 'and',
+    or: 'or',
+    deleteAll: 'Delete All',
+    filter: 'Filter'
+  })
+});
+
+const emit = defineEmits<{
+  'update:currentPage': [page: number];
+  'update:pageSize': [size: number];
+  'update:selected': [items: any[]];
+  'update:orderedBy': [key: string];
+  'update:orderDirection': [direction: 'asc' | 'desc'];
+  'update:resetSelected': [value: boolean];
+  'table-action': [data: { action: string; items: Array<string | number> }];
+  'table-action-selected': [item: any];
+  'table-action-button-clicked': [data: { id: string; text: string }];
+  'smart-filters-sent': [filters: any];
+  'smart-filters-cleared': [];
+  'smart-filter-deleted': [index: number];
+  'custom-emit': [data: any];
+  'modal-action': [data: { modal: string; action: string }];
+  'select-all-items': [];
+  'deselect-all-items': [];
+  'no-results-action': [action: string];
+  'no-results-option-selected': [item: any];
+  'columns-visibility-changed': [data: { index: number; hidden: boolean }];
+  'order-by': [data: { value: string; orderDirection: 'asc' | 'desc' }];
+  'change-page': [page: number];
+  'change-page-size': [size: number | string];
+}>();
+
+// State management
+const internalHiddenColumns = ref<number[]>(props.hiddenColumns || []);
+const selectedItemIds = ref<Set<string | number>>(new Set());
+
+// Page size options for uiTable
+const pageSizeOptions = computed(() => [
+  { name: '10', value: '10', active: props.pageSize === 10 },
+  { name: '25', value: '25', active: props.pageSize === 25 },
+  { name: '50', value: '50', active: props.pageSize === 50 },
+  { name: '100', value: '100', active: props.pageSize === 100 }
+]);
+
+// Event handlers
+function handleOrderBy(event: { value: string; orderDirection: 'asc' | 'desc' }) {
+  emit('update:orderedBy', event.value);
+  emit('update:orderDirection', event.orderDirection);
+  emit('order-by', event);
+}
+
+function handleChangePage(page: number) {
+  emit('update:currentPage', page);
+  emit('change-page', page);
+}
+
+function handleChangePageSize(size: number | string) {
+  const numSize = typeof size === 'string' ? Number(size) : size;
+  emit('update:pageSize', numSize);
+  emit('change-page-size', size);
+  emit('update:currentPage', 1);
+}
+
+function handleTableAction(data: { action: string; items: Array<string | number> }) {
+  selectedItemIds.value = new Set(data.items);
+  updateSelectedItems();
+  emit('table-action', data);
+}
+
+function resetSelectedItems() {
+  selectedItemIds.value.clear();
+  updateSelectedItems();
+  emit('update:resetSelected', true);
+}
+
+function handleTableActionSelected(item: any) {
+  emit('table-action-selected', item);
+}
+
+function handleTableActionButtonClicked(data: { id: string; text: string }) {
+  emit('table-action-button-clicked', data);
+}
+
+function handleSmartFiltersSent(filters: any) {
+  emit('smart-filters-sent', filters);
+}
+
+function handleSmartFiltersCleared() {
+  emit('smart-filters-cleared');
+}
+
+function handleSmartFilterDeleted(index: number) {
+  emit('smart-filter-deleted', index);
+}
+
+function handleCustomEmit(data: any) {
+  emit('custom-emit', data);
+}
+
+function handleColumnsVisibilityChanged(event: { index: number; hidden: boolean }) {
+  if (event.hidden) {
+    if (!internalHiddenColumns.value.includes(event.index)) {
+      internalHiddenColumns.value.push(event.index);
+    }
+  } else {
+    const index = internalHiddenColumns.value.indexOf(event.index);
+    if (index > -1) {
+      internalHiddenColumns.value.splice(index, 1);
+    }
+  }
+  emit('columns-visibility-changed', event);
+}
+
+function handleModalAction(data: { modal: string; action: string }) {
+  emit('modal-action', data);
+}
+
+function handleSelectAllItems() {
+  selectedItemIds.value = new Set(props.items.map(item => item.id));
+  updateSelectedItems();
+  emit('select-all-items');
+}
+
+function handleDeselectAllItems() {
+  selectedItemIds.value.clear();
+  updateSelectedItems();
+  emit('deselect-all-items');
+}
+
+function handleNoResultsAction(action: string) {
+  emit('no-results-action', action);
+}
+
+function handleNoResultsOptionSelected(item: any) {
+  emit('no-results-option-selected', item);
+}
+
+function handleSelectedItemsDeleted() {
+  emit('update:resetSelected', false);
+}
+
+function updateSelectedItems() {
+  const selected = props.items.filter(item => item.id && selectedItemIds.value.has(item.id));
+  emit('update:selected', selected);
+}
+
+// Expose methods for parent components
+defineExpose({
+  clearSelection: () => { 
+    emit('update:resetSelected', true);
+    selectedItemIds.value.clear();
+    updateSelectedItems();
+  },
+  getHiddenColumns: () => internalHiddenColumns.value,
+  getSelectedItems: () => Array.from(selectedItemIds.value),
+  getSelectedItemsData: () => props.items.filter(item => item.id && selectedItemIds.value.has(item.id))
+});
+</script>
+
+<template>
+  <uiTable
+    :loading="loading"
+    :header="header"
+    :items="items"
+    :ordered-by="orderedBy"
+    :order-direction="orderDirection"
+    :actions="(actions as any)"
+    :hidden-columns="internalHiddenColumns"
+    :reset-selected="resetSelected"
+    :select-all-items-modal="(selectAllItemsModal as any)"
+    :smart-filter-categories="smartFilterCategories"
+    :filter-literals="filterLiterals"
+    :filters="filters"
+    :table-actions-dropdown="tableActionsDropdown"
+    :table-action-buttons="tableActionButtons"
+    :pagination-current="currentPage"
+    :pagination-total="totalPages"
+    :pagination-total-items="totalItems"
+    :page-size-options="pageSizeOptions"
+    :current-page-size="pageSize"
+    :no-results="noResults"
+    @order-by="handleOrderBy"
+    @table-action="handleTableAction"
+    @table-action-selected="handleTableActionSelected"
+    @table-action-button-clicked="handleTableActionButtonClicked"
+    @smart-filters-sent="handleSmartFiltersSent"
+    @smart-filters-cleared="handleSmartFiltersCleared"
+    @smart-filter-deleted="handleSmartFilterDeleted"
+    @change-page="handleChangePage"
+    @change-page-size="handleChangePageSize"
+    @custom-emit="handleCustomEmit"
+    @columns-visibility-changed="handleColumnsVisibilityChanged"
+    @selected-items-deleted="handleSelectedItemsDeleted"
+    @modal-action="handleModalAction"
+    @select-all-items="handleSelectAllItems"
+    @deselect-all-items="handleDeselectAllItems"
+    @no-results-action="handleNoResultsAction"
+    @no-results-option-selected="handleNoResultsOptionSelected"
+  />
+</template>
+
+<style scoped>
+.table-component {
+  width: 100%;
+}
+</style>

package/src/data/columnHelpers.ts

@@ -0,0 +1,334 @@
+/**
+ * Column Definition Helpers
+ *
+ * Pre-built column definitions for common patterns, reducing boilerplate
+ * when defining DataTable columns.
+ */
+
+import type { DataTableColumn } from "./DataTable.vue";
+
+/**
+ * Date formatting options
+ */
+export interface DateFormatOptions {
+	format?: "short" | "medium" | "long" | "full";
+	locale?: string;
+}
+
+/**
+ * Tag color function type
+ */
+export type TagColorFn<T> = (item: T) => string;
+
+/**
+ * Pre-built column helpers
+ */
+export const columns = {
+	/**
+	 * Simple text column
+	 *
+	 * @example
+	 * columns.text('name', 'Name')
+	 */
+	text: <T = any>(key: string, label: string, options?: { sortable?: boolean; width?: string }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "text",
+		sortable: options?.sortable ?? true,
+		width: options?.width,
+	}),
+
+	/**
+	 * Number column with locale formatting
+	 *
+	 * @example
+	 * columns.number('amount', 'Amount')
+	 * columns.number('price', 'Price', { prefix: '$', decimals: 2 })
+	 */
+	number: <T = any>(
+		key: string,
+		label: string,
+		options?: { prefix?: string; suffix?: string; decimals?: number; sortable?: boolean }
+	): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "number",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => {
+			const value = item[key];
+			if (value === null || value === undefined) return "";
+
+			const formatted =
+				options?.decimals !== undefined
+					? Number(value).toLocaleString(undefined, {
+							minimumFractionDigits: options.decimals,
+							maximumFractionDigits: options.decimals,
+						})
+					: Number(value).toLocaleString();
+
+			return `${options?.prefix ?? ""}${formatted}${options?.suffix ?? ""}`;
+		},
+	}),
+
+	/**
+	 * Date column with formatting
+	 *
+	 * @example
+	 * columns.date('createdAt', 'Created')
+	 * columns.date('updatedAt', 'Updated', { format: 'long' })
+	 */
+	date: <T = any>(key: string, label: string, options?: DateFormatOptions & { sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "date",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => {
+			const value = item[key];
+			if (!value) return "";
+
+			const date = value instanceof Date ? value : new Date(value);
+			if (Number.isNaN(date.getTime())) return "";
+
+			const formatOptions: Intl.DateTimeFormatOptions = {
+				short: { dateStyle: "short" },
+				medium: { dateStyle: "medium" },
+				long: { dateStyle: "long" },
+				full: { dateStyle: "full" },
+			}[options?.format ?? "medium"] as Intl.DateTimeFormatOptions;
+
+			return date.toLocaleDateString(options?.locale, formatOptions);
+		},
+	}),
+
+	/**
+	 * DateTime column with formatting
+	 *
+	 * @example
+	 * columns.dateTime('createdAt', 'Created At')
+	 */
+	dateTime: <T = any>(key: string, label: string, options?: { sortable?: boolean; locale?: string }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "date",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => {
+			const value = item[key];
+			if (!value) return "";
+
+			const date = value instanceof Date ? value : new Date(value);
+			if (Number.isNaN(date.getTime())) return "";
+
+			return date.toLocaleString(options?.locale, {
+				dateStyle: "medium",
+				timeStyle: "short",
+			});
+		},
+	}),
+
+	/**
+	 * Tag column with optional color function
+	 *
+	 * @example
+	 * columns.tag('status', 'Status')
+	 * columns.tag('status', 'Status', (item) => item.active ? 'green' : 'red')
+	 */
+	tag: <T = any>(key: string, label: string, colorFn?: TagColorFn<T>, options?: { sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "tag",
+		sortable: options?.sortable ?? true,
+		render: (item: T) => {
+			const value = (item as any)[key];
+			return {
+				content: value,
+				color: colorFn?.(item) ?? "gray",
+				type: "tag",
+			};
+		},
+	}),
+
+	/**
+	 * Badge column (numeric badge style)
+	 *
+	 * @example
+	 * columns.badge('count', 'Count')
+	 * columns.badge('brandCount', 'Brands')
+	 */
+	badge: <T = any>(key: string, label: string, options?: { sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "badge",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => ({
+			content: item[key],
+			type: "badge",
+		}),
+	}),
+
+	/**
+	 * Boolean column rendered as tag
+	 *
+	 * @example
+	 * columns.boolean('active', 'Active')
+	 * columns.boolean('verified', 'Verified', { trueLabel: 'Yes', falseLabel: 'No' })
+	 */
+	boolean: <T = any>(
+		key: string,
+		label: string,
+		options?: { trueLabel?: string; falseLabel?: string; trueColor?: string; falseColor?: string; sortable?: boolean }
+	): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "tag",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => {
+			const value = Boolean(item[key]);
+			return {
+				content: value ? (options?.trueLabel ?? "Yes") : (options?.falseLabel ?? "No"),
+				color: value ? (options?.trueColor ?? "green") : (options?.falseColor ?? "red"),
+				type: "tag",
+			};
+		},
+	}),
+
+	/**
+	 * Email column (renders as link)
+	 *
+	 * @example
+	 * columns.email('email', 'Email')
+	 */
+	email: <T = any>(key: string, label: string, options?: { sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "text",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => ({
+			content: item[key],
+			type: "link",
+			href: `mailto:${item[key]}`,
+		}),
+	}),
+
+	/**
+	 * Actions column (row actions)
+	 *
+	 * @example
+	 * columns.actions(['view', 'edit', 'delete'])
+	 */
+	actions: <T = any>(actions: string[]): DataTableColumn<T> => ({
+		key: "_actions",
+		label: "",
+		sortable: false,
+		render: () => actions,
+	}),
+
+	/**
+	 * Custom render column
+	 *
+	 * @example
+	 * columns.custom('fullName', 'Name', (item) => `${item.firstName} ${item.lastName}`)
+	 */
+	custom: <T = any>(
+		key: string,
+		label: string,
+		render: (item: T, index: number) => any,
+		options?: { sortable?: boolean; width?: string }
+	): DataTableColumn<T> => ({
+		key,
+		label,
+		sortable: options?.sortable ?? false,
+		width: options?.width,
+		render,
+	}),
+
+	/**
+	 * Truncated text column
+	 *
+	 * @example
+	 * columns.truncate('description', 'Description', 50)
+	 */
+	truncate: <T = any>(key: string, label: string, maxLength: number, options?: { sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "text",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => {
+			const value = String(item[key] ?? "");
+			if (value.length <= maxLength) return value;
+			return `${value.substring(0, maxLength)}...`;
+		},
+	}),
+
+	/**
+	 * Image column
+	 *
+	 * @example
+	 * columns.image('avatar', 'Avatar', { size: 32 })
+	 */
+	image: <T = any>(key: string, label: string, options?: { size?: number; fallback?: string }): DataTableColumn<T> => ({
+		key,
+		label,
+		sortable: false,
+		render: (item: any) => ({
+			content: item[key] || options?.fallback,
+			type: "image",
+			size: options?.size ?? 32,
+		}),
+	}),
+
+	/**
+	 * Progress column
+	 *
+	 * @example
+	 * columns.progress('completion', 'Progress')
+	 */
+	progress: <T = any>(key: string, label: string, options?: { max?: number; sortable?: boolean }): DataTableColumn<T> => ({
+		key,
+		label,
+		type: "number",
+		sortable: options?.sortable ?? true,
+		render: (item: any) => ({
+			content: item[key],
+			type: "progress",
+			max: options?.max ?? 100,
+		}),
+	}),
+};
+
+/**
+ * Status color mappings for common status values
+ */
+export const statusColors: Record<string, string> = {
+	active: "green",
+	inactive: "gray",
+	pending: "yellow",
+	approved: "green",
+	rejected: "red",
+	draft: "gray",
+	published: "green",
+	archived: "gray",
+	error: "red",
+	success: "green",
+	warning: "yellow",
+	info: "blue",
+};
+
+/**
+ * Get color for a status value
+ *
+ * @example
+ * columns.tag('status', 'Status', (item) => getStatusColor(item.status))
+ */
+export function getStatusColor(status: string): string {
+	return statusColors[status?.toLowerCase()] ?? "gray";
+}
+
+/**
+ * Create a status color function for a specific key
+ *
+ * @example
+ * columns.tag('status', 'Status', createStatusColorFn('status'))
+ */
+export function createStatusColorFn<T>(key: keyof T): TagColorFn<T> {
+	return (item: T) => getStatusColor(String(item[key]));
+}