@veristone/nuxt-v-app 0.2.11 → 0.2.14

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

@@ -52,11 +52,12 @@
 						<USelect
 							v-for="filter in props.filters"
 							:key="filter.key"
-							v-model="filterValues[filter.key]"
+							:model-value="(filterValues[filter.key] as string)"
 							:items="filter.options"
 							:placeholder="filter.label"
 							size="sm"
 							class="w-40"
+							@update:model-value="(v: string) => filterValues[filter.key] = v"
 						/>
 					</template>
 
@@ -166,50 +167,44 @@
 </template>
 
 <script setup lang="ts">
-/**
- * VATable - Veristone data table component built on Nuxt UI's UTable + TanStack Table.
- *
- * @props
- *   name             - Optional card header title
- *   data             - Row data array
- *   columns          - TanStack TableColumn definitions; supports `meta.preset` for cell rendering
- *   loading          - Shows skeleton on initial load; shows inline spinner on subsequent refreshes
- *   initialPageLimit - Default page size (default: 10)
- *   selectable       - Enables row checkboxes; exposes `selectedRows` via template ref
- *   showSearch       - Renders a global search input in the toolbar
- *   filters          - Array of { key, label, options } for toolbar USelect dropdowns
- *   onRefresh        - Async callback; shows a refresh spinner button in the toolbar
- *   onRowClick       - Called with the row's original data when a row is clicked
- *   defaultSort      - Column key to sort by on mount
- *   defaultSortDesc  - Sort descending when defaultSort is set (default: false)
- *   manualPagination - Enables server-side pagination mode
- *   total            - Total row count for server-side pagination
- *
- * @models (v-model)
- *   sorting          - SortingState — sync sort state with parent
- *   filterValues     - Record<string, unknown> — sync active filter values with parent
- *   globalFilter     - string — sync search input value with parent
- *   page             - number (1-based) — current page in manual pagination mode
- *   itemsPerPage     - number — page size in manual pagination mode
- *
- * @slots
- *   header-right     - Content rendered on the right side of the card header
- *   toolbar-left     - Custom controls (e.g. filter selects) injected into the toolbar
- *                      next to the search input and built-in filter dropdowns
- *                      Example:
- *                        <template #toolbar-left>
- *                          <USelect v-model="status" :items="opts" placeholder="Status" size="sm" />
- *                        </template>
- *   bulk-actions     - Shown in the toolbar when rows are selected; receives
- *                      { selected, count, clear }
- *   actions-cell     - Renders an "Actions" column; receives { row }
- *   [column]-cell    - Override cell rendering for a specific column by accessor key
- *
- * @exposes
- *   selectedRows     - Array of selected row originals
- *   rowSelection     - Raw TanStack row selection state
- *   clearSelection   - Clears the current row selection
- */
+import type { SortingState } from '@tanstack/vue-table'
+import { getPaginationRowModel } from '@tanstack/vue-table'
+import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
+import CellRenderer from './CellRenderer.vue'
+
+interface FilterOption {
+	key: string
+	label: string
+	options: { label: string; value: string }[]
+}
+
+const props = withDefaults(
+	defineProps<{
+		name?: string
+		data?: Record<string, unknown>[]
+		columns: TableColumn<any>[]
+		loading?: boolean
+		initialPageLimit?: number
+		selectable?: boolean
+		showSearch?: boolean
+		filters?: FilterOption[]
+		onRefresh?: () => Promise<void>
+		onRowClick?: (row: any) => void
+		defaultSort?: string
+		defaultSortDesc?: boolean
+		manualPagination?: boolean
+		total?: number
+	}>(),
+	{
+		data: () => [],
+		loading: false,
+		initialPageLimit: 10,
+		selectable: false,
+		showSearch: true,
+		defaultSortDesc: false,
+		manualPagination: false,
+	}
+)
 
 // Sorting state - v-model support
 const sorting = defineModel<SortingState>("sorting", {
@@ -397,41 +392,40 @@ const tableColumns = computed(() => {
 		'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 = {
+	const columns: TableColumn<any>[] = props.columns.map((col) => {
+		const accessorKey = (col as any).accessorKey as string | undefined
+		const hasDataAccessor = Boolean(accessorKey || (col as any).accessorFn || (col as any).key)
+		const colDef: TableColumn<any> = {
 			...col,
 			enableSorting: col.enableSorting ?? hasDataAccessor,
-		};
+		}
 
-		// Auto-detect date columns based on accessorKey
-		const isDateColumn = dateColumnPatterns.includes(col.accessorKey)
+		const isDateColumn = accessorKey ? dateColumnPatterns.includes(accessorKey) : false
 		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];
+			colDef.cell = ({ row }: { row: any }) => {
+				const value = accessorKey ? row?.original?.[accessorKey] : undefined
 				return h(CellRenderer, {
 					value,
 					column: { ...col, meta: { ...col.meta, preset, format } },
 					row: row?.original
-				});
-			};
+				})
+			}
 		}
 
-		return colDef;
-	});
+		return colDef
+	})
 
 	if (props.selectable) {
-		const selectColumn: TableColumn<unknown> = {
+		const selectColumn: TableColumn<any> = {
 			id: 'select',
 			enableSorting: false,
 			enableHiding: false,
-			header: ({ table }) =>
+			header: ({ table }: { table: any }) =>
 				h(UCheckbox, {
 					modelValue: table.getIsSomePageRowsSelected()
 						? 'indeterminate'
@@ -440,7 +434,7 @@ const tableColumns = computed(() => {
 						table.toggleAllPageRowsSelected(!!value),
 					'aria-label': 'Select all rows',
 				}),
-			cell: ({ row }) =>
+			cell: ({ row }: { row: any }) =>
 				h(UCheckbox, {
 					modelValue: row.getIsSelected(),
 					'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
@@ -453,21 +447,20 @@ const tableColumns = computed(() => {
 					td: 'w-10',
 				},
 			},
-		};
+		}
 
-		columns.unshift(selectColumn);
+		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> = {
+	if (slots['actions-cell'] && !columns.some((c: any) => c.id === 'actions' || c.accessorKey === 'actions')) {
+		const actionsColumn: TableColumn<any> = {
 			id: 'actions',
 			header: 'Actions',
 			enableSorting: false,
 			enableHiding: false,
-			cell: ({ row }) => {
-				// Render slot content
-				return h('div', {}, slots['actions-cell']?.({ row }));
+			cell: ({ row }: { row: any }) => {
+				return h('div', {}, slots['actions-cell']?.({ row }))
 			},
 			meta: {
 				class: {
@@ -475,9 +468,9 @@ const tableColumns = computed(() => {
 					td: 'text-right',
 				},
 			},
-		};
+		}
 
-		columns.push(actionsColumn);
+		columns.push(actionsColumn)
 	}
 
 	return columns;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.2.11",
+  "version": "0.2.14",
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "type": "module",
   "private": false,