@veristone/nuxt-v-app 0.2.2 → 0.2.4

package/app/components/V/A/Table/Toolbar.vue

@@ -0,0 +1,163 @@
+<template>
+  <header class="flex flex-wrap items-center justify-between gap-4 mb-4">
+    <!-- Left side: Search + Filters -->
+    <div class="flex items-center gap-3 flex-1 min-w-0">
+      <!-- Search -->
+      <UInput
+        v-if="searchable"
+        v-model="searchModel"
+        :placeholder="searchPlaceholder"
+        icon="i-lucide-search"
+        size="sm"
+        class="w-64"
+      />
+
+      <!-- Filter chips -->
+      <div v-if="activeFilters?.length" class="flex flex-wrap gap-2">
+        <UBadge
+          v-for="filter in activeFilters"
+          :key="filter.key"
+          variant="subtle"
+          class="cursor-pointer"
+          @click="$emit('remove-filter', filter.key)"
+        >
+          {{ filter.label }}: {{ filter.value }}
+          <UIcon name="i-lucide-x" class="w-3 h-3 ml-1" />
+        </UBadge>
+        <button
+          class="text-sm text-neutral-500 hover:text-neutral-700"
+          @click="$emit('clear-filters')"
+        >
+          Clear all
+        </button>
+      </div>
+
+      <!-- Extra toolbar content -->
+      <slot name="left" />
+    </div>
+
+    <!-- Right side: Column toggle, Export, Actions -->
+    <div class="flex items-center gap-2">
+      <slot name="right" />
+
+      <!-- Column visibility toggle -->
+      <VATableColumnToggle
+        v-if="showColumnToggle && columns?.length"
+        v-model="visibleColumnsModel"
+        :columns="hideableColumns"
+      />
+
+      <!-- Export -->
+      <VATableExport
+        v-if="exportable && data?.length"
+        :data="data"
+        :columns="exportColumns"
+        :filename="exportFilename"
+        :show-label="false"
+        enable-csv
+        enable-json
+      />
+
+      <!-- Extra actions slot -->
+      <slot name="actions" />
+    </div>
+  </header>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableToolbar'
+})
+
+const props = defineProps({
+  // Search
+  searchable: {
+    type: Boolean,
+    default: true
+  },
+  search: {
+    type: String,
+    default: ''
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Search...'
+  },
+  // Filters
+  activeFilters: {
+    type: Array,
+    default: () => []
+  },
+  // Column toggle
+  showColumnToggle: {
+    type: Boolean,
+    default: true
+  },
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  visibleColumns: {
+    type: Array,
+    default: () => []
+  },
+  // Export
+  exportable: {
+    type: Boolean,
+    default: true
+  },
+  data: {
+    type: Array,
+    default: () => []
+  },
+  exportFilename: {
+    type: String,
+    default: 'export'
+  }
+})
+
+const emit = defineEmits([
+  'update:search',
+  'update:visibleColumns',
+  'remove-filter',
+  'clear-filters'
+])
+
+// Two-way binding for search
+const searchModel = computed({
+  get: () => props.search,
+  set: (value) => emit('update:search', value)
+})
+
+// Two-way binding for visible columns
+const visibleColumnsModel = computed({
+  get: () => props.visibleColumns,
+  set: (value) => emit('update:visibleColumns', value)
+})
+
+// Filter columns that can be hidden
+const hideableColumns = computed(() =>
+  props.columns.filter(col =>
+    col.enableHiding !== false &&
+    col.id !== 'actions' &&
+    col.accessorKey !== 'actions'
+  )
+)
+
+// Columns for export (use visible columns if available, otherwise all)
+const exportColumns = computed(() => {
+  const visible = props.visibleColumns?.length
+    ? props.columns.filter(col =>
+        props.visibleColumns.includes(col.id || col.accessorKey || col.key)
+      )
+    : props.columns
+
+  // Transform to export format
+  return visible
+    .filter(col => col.id !== 'actions' && col.accessorKey !== 'actions')
+    .map(col => ({
+      key: col.accessorKey || col.key || col.id,
+      label: col.header || col.label || col.id
+    }))
+})
+</script>

package/app/components/V/A/Table/index.vue

@@ -0,0 +1,483 @@
+
+<template>
+	<UCard
+		class="w-full"
+		:ui="{
+			body: 'p-0 sm:p-0',
+			header: 'px-3 py-2',
+			footer: 'px-3 py-2 pt-0',
+		}"
+	>
+		<template #header v-if="name || $slots['header-right']">
+			<div class="flex items-center justify-between gap-3">
+				<h2 v-if="name" class="font-semibold text-base text-highlighted">
+					{{ name }}
+				</h2>
+				<slot name="header-right" />
+			</div>
+		</template>
+
+		<!-- Initial Loading State -->
+		<template v-if="isInitialLoading">
+			<VAStateLoading class="py-12" />
+		</template>
+
+		<template v-else>
+			<!-- Toolbar -->
+			<div
+				class="flex items-center justify-between gap-2 px-3 py-2 border-b border-default"
+			>
+				<!-- Bulk Actions (shown when items selected) -->
+				<div v-if="selectedRows.length > 0" class="flex items-center gap-2">
+					<slot
+						name="bulk-actions"
+						:selected="selectedRows"
+						:count="selectedRows.length"
+						:clear="clearSelection"
+					/>
+				</div>
+
+				<!-- Normal Toolbar (shown when no items selected) -->
+				<div v-else class="flex items-center gap-2">
+					<UInput
+						v-model="globalFilter"
+						placeholder="Search..."
+						icon="i-lucide-search"
+						size="sm"
+						class="max-w-xs"
+					/>
+
+					<template v-if="props.filters && props.filters.length > 0">
+						<USelect
+							v-for="filter in props.filters"
+							:key="filter.key"
+							v-model="filterValues[filter.key]"
+							:items="filter.options"
+							:placeholder="filter.label"
+							size="sm"
+							class="w-40"
+						/>
+					</template>
+				</div>
+
+				<div class="flex items-center gap-2">
+					<UButton
+						v-if="props.onRefresh"
+						icon="i-lucide-refresh-cw"
+						color="neutral"
+						variant="ghost"
+						size="sm"
+						:loading="refreshing"
+						@click="handleRefresh"
+					/>
+
+					<UDropdownMenu :items="columnVisibilityItems" :content="{ align: 'end' }">
+						<UButton
+							icon="i-lucide-columns-3"
+							color="neutral"
+							variant="ghost"
+							size="sm"
+							trailing-icon="i-lucide-chevron-down"
+						/>
+					</UDropdownMenu>
+				</div>
+			</div>
+
+			<!-- Active Filter Chips -->
+			<div v-if="hasActiveFilters" class="px-3 py-2 border-b border-default">
+				<FilterChips
+					:filters="filterValues"
+					:labels="filterLabels"
+					@remove="removeFilter"
+					@clear="clearAllFilters"
+				/>
+			</div>
+
+			<!-- Table -->
+			<UTable
+				ref="table"
+				v-model:sorting="sorting"
+				v-model:global-filter="globalFilter"
+				v-model:pagination="pagination"
+				v-model:column-visibility="columnVisibility"
+				v-model:row-selection="rowSelection"
+				:data="data"
+				:columns="tableColumns"
+				:loading="loading"
+				:row-selection-options="{ enableRowSelection: props.selectable }"
+				:sorting-options="{ getSortedRowModel: getSortedRowModel() }"
+				:pagination-options="{ getPaginationRowModel: getPaginationRowModel() }"
+				:ui="{
+					th: 'px-3 py-2',
+					td: 'px-3 py-2',
+				}"
+				empty="Nothing to show."
+				v-bind="$attrs"
+				@row-click="handleRowClick"
+			>
+				<template v-for="slotEntry in forwardedSlots" :key="slotEntry.target" #[slotEntry.target]="slotProps">
+					<slot :name="slotEntry.source" v-bind="slotProps" />
+				</template>
+			</UTable>
+		</template>
+
+		<!-- Footer -->
+		<template #footer v-if="!isInitialLoading">
+			<div
+				class="flex items-center justify-between gap-3 text-xs border-t border-default pt-2"
+			>
+				<p class="text-muted">
+					<template v-if="totalRows > 0">
+						{{ startIndex }}-{{ endIndex }} of {{ totalRows }}
+					</template>
+					<template v-else>No results</template>
+				</p>
+				<div class="flex items-center gap-3">
+					<div class="flex items-center gap-1.5">
+						<span class="text-muted">Per page:</span>
+						<USelect
+							:model-value="pagination.pageSize"
+							:items="[10, 20, 50, 100]"
+							size="sm"
+							class="w-16"
+							@update:model-value="onPageSizeChange"
+						/>
+					</div>
+					<UPagination
+						:page="pagination.pageIndex + 1"
+						:items-per-page="pagination.pageSize"
+						:total="totalRows"
+						size="sm"
+						@update:page="(p) => (pagination.pageIndex = p - 1)"
+					/>
+				</div>
+			</div>
+		</template>
+	</UCard>
+</template>
+
+<script setup lang="ts">
+import { getCoreRowModel, getPaginationRowModel, getSortedRowModel } from "@tanstack/vue-table";
+import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
+import type { SortingState } from "@tanstack/vue-table";
+import { h, resolveComponent, useSlots } from 'vue';
+import CellRenderer from './CellRenderer.vue';
+import FilterChips from './FilterChips.vue';
+
+type FilterDefinition = {
+	label: string;
+	key: string;
+	options: { label: string; value: string }[];
+};
+
+const props = withDefaults(defineProps<{
+	name?: string;
+	data: unknown[];
+	columns: TableColumn<unknown>[];
+	loading?: boolean;
+	initialPageLimit?: number;
+	selectable?: boolean;
+	filters?: FilterDefinition[];
+	onRefresh?: () => void | Promise<void>;
+	onRowClick?: (row: unknown) => void;
+	/** Default column to sort by */
+	defaultSort?: string;
+	/** Default sort direction */
+	defaultSortDesc?: boolean;
+}>(), {
+	selectable: false,
+});
+
+// Sorting state - v-model support
+const sorting = defineModel<SortingState>("sorting", {
+	default: () => [],
+});
+
+const filterValues = defineModel<Record<string, unknown>>("filterValues", {
+	default: () => ({}),
+});
+
+const refreshing = ref(false);
+const slots = useSlots()
+
+async function handleRefresh() {
+	if (!props.onRefresh) return;
+	refreshing.value = true;
+	try {
+		await props.onRefresh();
+	} finally {
+		refreshing.value = false;
+	}
+}
+
+const hasActiveFilters = computed(() => {
+	return Object.values(filterValues.value).some((v) => v !== undefined && v !== null && v !== '');
+});
+
+const filterLabels = computed<Record<string, string>>(() => {
+	const labels: Record<string, string> = {};
+	for (const filter of props.filters ?? []) {
+		labels[filter.key] = filter.label;
+	}
+	return labels;
+});
+
+function removeFilter(key: string) {
+	const current = { ...(filterValues.value ?? {}) };
+	delete current[key];
+	filterValues.value = current;
+}
+
+function clearAllFilters() {
+	filterValues.value = {};
+}
+
+// Row selection state
+const rowSelection = ref<Record<string, boolean>>({});
+
+function clearSelection() {
+	rowSelection.value = {};
+}
+
+watch(
+	() => filterValues.value,
+	() => {
+		clearSelection();
+	},
+	{ deep: true }
+);
+
+// Table ref for accessing TanStack API
+const table = ref<{ tableApi?: any } | null>(null);
+
+// Track if we've ever received data (to distinguish initial load from refresh)
+const hasLoadedOnce = ref(false);
+
+// Initial loading: loading is true AND we've never had data
+const isInitialLoading = computed(() => {
+	return props.loading && !hasLoadedOnce.value;
+});
+
+// Mark as loaded once we receive data
+watch(
+	() => props.data,
+	(newData) => {
+		if (newData && newData.length > 0) {
+			hasLoadedOnce.value = true;
+		}
+	},
+	{ immediate: true }
+);
+
+// Also mark as loaded when loading completes (even with empty data)
+watch(
+	() => props.loading,
+	(isLoading, wasLoading) => {
+		if (wasLoading && !isLoading) {
+			hasLoadedOnce.value = true;
+		}
+	}
+);
+
+// Global filter (search)
+const globalFilter = ref("");
+
+// Initialize default sorting if provided
+onMounted(() => {
+	if (props.defaultSort && sorting.value.length === 0) {
+		sorting.value = [{ id: props.defaultSort, desc: props.defaultSortDesc ?? false }];
+	}
+});
+
+// Pagination state
+const pagination = ref({
+	pageIndex: 0,
+	pageSize: props.initialPageLimit ?? 10,
+});
+
+// Column visibility state
+const columnVisibility = ref<Record<string, boolean>>({});
+
+// Transform columns for dropdown menu
+const columnVisibilityItems = computed<DropdownMenuItem[]>(() => {
+	const hidableColumns = table.value?.tableApi
+		?.getAllColumns()
+		.filter((col: any) => col.getCanHide());
+
+	return (
+		hidableColumns?.map((column: any) => ({
+			label:
+				typeof column.columnDef.header === "string"
+					? column.columnDef.header
+					: column.id,
+			type: "checkbox" as const,
+			checked: column.getIsVisible(),
+			onUpdateChecked: (checked: boolean) => column.toggleVisibility(checked),
+			onSelect: (e: Event) => e.preventDefault(),
+		})) ?? []
+	);
+});
+
+// Process columns to add preset rendering
+const tableColumns = computed(() => {
+	const UCheckbox = resolveComponent('UCheckbox');
+
+	// Date column patterns for auto-detection
+	const dateColumnPatterns = [
+		'createdAt', 'updatedAt', 'deletedAt', 'publishedAt',
+		'startedAt', 'endedAt', 'dueDate', 'due_at',
+		'expiresAt', 'completedAt', 'created_at', 'updated_at'
+	]
+
+	const columns = props.columns.map(col => {
+		const hasDataAccessor = Boolean(col.accessorKey || (col as any).accessorFn || (col as any).key);
+		const colDef = {
+			...col,
+			enableSorting: col.enableSorting ?? hasDataAccessor,
+		};
+
+		// Auto-detect date columns based on accessorKey
+		const isDateColumn = dateColumnPatterns.includes(col.accessorKey)
+		const hasPreset = col.meta?.preset && col.meta.preset !== 'actions'
+
+		if (hasPreset || isDateColumn) {
+			// Use existing preset or auto-detected date preset
+			const preset = col.meta?.preset || 'date'
+			const format = col.meta?.format || 'relative'
+
+			colDef.cell = ({ row }) => {
+				const value = row?.original?.[col.accessorKey as string];
+				return h(CellRenderer, {
+					value,
+					column: { ...col, meta: { ...col.meta, preset, format } },
+					row: row?.original
+				});
+			};
+		}
+
+		return colDef;
+	});
+
+	if (props.selectable) {
+		const selectColumn: TableColumn<unknown> = {
+			id: 'select',
+			enableSorting: false,
+			enableHiding: false,
+			header: ({ table }) =>
+				h(UCheckbox, {
+					modelValue: table.getIsSomePageRowsSelected()
+						? 'indeterminate'
+						: table.getIsAllPageRowsSelected(),
+					'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+						table.toggleAllPageRowsSelected(!!value),
+					'aria-label': 'Select all rows',
+				}),
+			cell: ({ row }) =>
+				h(UCheckbox, {
+					modelValue: row.getIsSelected(),
+					'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+						row.toggleSelected(!!value),
+					'aria-label': 'Select row',
+					onClick: (e: Event) => e.stopPropagation(),
+				}),
+			meta: {
+				class: {
+					td: 'w-10',
+				},
+			},
+		};
+
+		columns.unshift(selectColumn);
+	}
+
+	// Add actions column if slot provided AND no actions column already exists
+	if (slots['actions-cell'] && !columns.some(c => c.id === 'actions' || c.accessorKey === 'actions')) {
+		const actionsColumn: TableColumn<unknown> = {
+			id: 'actions',
+			header: 'Actions',
+			enableSorting: false,
+			enableHiding: false,
+			cell: ({ row }) => {
+				// Render slot content
+				return h('div', {}, slots['actions-cell']?.({ row }));
+			},
+			meta: {
+				class: {
+					th: 'text-right',
+					td: 'text-right',
+				},
+			},
+		};
+
+		columns.push(actionsColumn);
+	}
+
+	return columns;
+});
+
+const forwardedSlots = computed(() => {
+	const passthrough = Object.keys(slots).filter((name) => {
+		return !['default', 'header-right', 'bulk-actions'].includes(name);
+	});
+
+	return passthrough.map((source) => {
+		// Support both `name-cell` and `cell-name` slot naming patterns.
+		if (source.startsWith('cell-')) {
+			return {
+				source,
+				target: `${source.slice(5)}-cell`,
+			};
+		}
+
+		return { source, target: source };
+	});
+})
+
+const selectedRows = computed(() => {
+	return table.value?.tableApi?.getSelectedRowModel().rows.map((r: any) => r.original) ?? [];
+});
+
+// Handle row click
+function handleRowClick(row: any) {
+	if (props.onRowClick) {
+		props.onRowClick(row.original);
+	}
+}
+
+// Computed pagination info
+const totalRows = computed(() => {
+	return table.value?.tableApi?.getFilteredRowModel().rows.length ?? 0;
+});
+
+const startIndex = computed(() => {
+	if (totalRows.value === 0) return 0;
+	return pagination.value.pageIndex * pagination.value.pageSize + 1;
+});
+
+const endIndex = computed(() => {
+	const end = (pagination.value.pageIndex + 1) * pagination.value.pageSize;
+	return Math.min(end, totalRows.value);
+});
+
+// Handle page size change
+const onPageSizeChange = (size: number) => {
+	pagination.value = {
+		pageIndex: 0,
+		pageSize: size,
+	};
+};
+
+// Reset pagination when data changes
+watch(
+	() => props.data,
+	() => {
+		pagination.value.pageIndex = 0;
+	}
+);
+
+defineExpose({
+	selectedRows,
+	rowSelection,
+	clearSelection,
+});
+</script>