@veristone/nuxt-v-app 0.2.2 → 0.2.4

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="flex flex-wrap items-center gap-2">
+    <!-- Search Input -->
+    <UInput
+      v-if="showSearch"
+      v-model="searchQuery"
+      :placeholder="searchPlaceholder"
+      icon="i-lucide-search"
+      size="sm"
+      class="w-64"
+      @update:model-value="onSearchChange"
+    />
+
+    <!-- Filter Dropdowns -->
+    <template v-for="filter in filters" :key="filter.key">
+      <USelectMenu
+        v-if="filter.type === 'select'"
+        v-model="filterValues[filter.key]"
+        :items="filter.options || []"
+        :placeholder="filter.placeholder || filter.label"
+        size="sm"
+        class="w-40"
+        @update:model-value="onFilterChange(filter.key, $event)"
+      />
+
+      <UInput
+        v-else-if="filter.type === 'text'"
+        v-model="filterValues[filter.key]"
+        :placeholder="filter.placeholder || filter.label"
+        size="sm"
+        class="w-40"
+        @update:model-value="onFilterChange(filter.key, $event)"
+      />
+
+      <UInput
+        v-else-if="filter.type === 'date'"
+        v-model="filterValues[filter.key]"
+        type="date"
+        :placeholder="filter.placeholder || filter.label"
+        size="sm"
+        class="w-40"
+        @update:model-value="onFilterChange(filter.key, $event)"
+      />
+
+      <UInput
+        v-else-if="filter.type === 'number'"
+        v-model="filterValues[filter.key]"
+        type="number"
+        :placeholder="filter.placeholder || filter.label"
+        size="sm"
+        class="w-32"
+        @update:model-value="onFilterChange(filter.key, $event)"
+      />
+    </template>
+
+    <!-- Clear Filters Button -->
+    <UButton
+      v-if="hasActiveFilters"
+      label="Clear"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      icon="i-lucide-x"
+      @click="clearFilters"
+    />
+
+    <!-- Additional actions slot -->
+    <slot name="actions" />
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableFilterBar'
+})
+
+const props = defineProps({
+  filters: {
+    type: Array,
+    default: () => []
+  },
+  showSearch: {
+    type: Boolean,
+    default: true
+  },
+  searchPlaceholder: {
+    type: String,
+    default: 'Search...'
+  },
+  debounce: {
+    type: Number,
+    default: 300
+  }
+})
+
+const emit = defineEmits(['update:search', 'update:filters', 'filter', 'clear'])
+
+// Search state
+const searchQuery = ref('')
+
+// Filter values
+const filterValues = ref({})
+
+// Debounced search
+let searchTimeout = null
+
+function onSearchChange(value) {
+  if (searchTimeout) clearTimeout(searchTimeout)
+
+  searchTimeout = setTimeout(() => {
+    emit('update:search', value)
+  }, props.debounce)
+}
+
+function onFilterChange(key, value) {
+  emit('filter', key, value)
+  emit('update:filters', { ...filterValues.value })
+}
+
+function clearFilters() {
+  searchQuery.value = ''
+  filterValues.value = {}
+  emit('update:search', '')
+  emit('update:filters', {})
+  emit('clear')
+}
+
+// Check if any filters are active
+const hasActiveFilters = computed(() => {
+  if (searchQuery.value) return true
+  return Object.values(filterValues.value).some(v => v !== undefined && v !== '' && v !== null)
+})
+
+// Expose for parent access
+defineExpose({
+  searchQuery,
+  filterValues,
+  clearFilters
+})
+</script>

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

@@ -0,0 +1,107 @@
+<template>
+  <div v-if="activeFilters.length > 0" class="flex flex-wrap items-center gap-2">
+    <span class="text-sm text-neutral-500">Filters:</span>
+
+    <TransitionGroup name="chip">
+      <div
+        v-for="filter in activeFilters"
+        :key="filter.key"
+        class="inline-flex items-center gap-1 px-2 py-1 text-sm bg-neutral-100 dark:bg-neutral-800 rounded-full"
+      >
+        <span class="text-neutral-600 dark:text-neutral-400">{{ filter.label }}:</span>
+        <span class="font-medium text-neutral-900 dark:text-white">{{ formatValue(filter.value) }}</span>
+        <button
+          type="button"
+          class="ml-1 p-0.5 rounded-full hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
+          @click="removeFilter(filter.key)"
+        >
+          <UIcon name="i-lucide-x" class="w-3 h-3 text-neutral-500" />
+        </button>
+      </div>
+    </TransitionGroup>
+
+    <UButton
+      v-if="activeFilters.length > 1"
+      label="Clear all"
+      color="neutral"
+      variant="link"
+      size="xs"
+      @click="clearAll"
+    />
+  </div>
+</template>
+
+<script setup>
+defineOptions({
+  name: 'VATableFilterChips'
+})
+
+const props = defineProps({
+  filters: {
+    type: Object,
+    required: true
+  },
+  labels: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+const emit = defineEmits(['remove', 'clear'])
+
+// Convert filters object to array with labels
+const activeFilters = computed(() => {
+  return Object.entries(props.filters)
+    .filter(([_, value]) => value !== undefined && value !== '' && value !== null)
+    .map(([key, value]) => ({
+      key,
+      label: props.labels[key] || formatLabel(key),
+      value
+    }))
+})
+
+// Format camelCase/snake_case to readable label
+function formatLabel(key) {
+  return key
+    .replace(/([A-Z])/g, ' $1')
+    .replace(/[_-]/g, ' ')
+    .replace(/^\s/, '')
+    .split(' ')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ')
+}
+
+// Format value for display
+function formatValue(value) {
+  if (value === true) return 'Yes'
+  if (value === false) return 'No'
+  if (value instanceof Date) return value.toLocaleDateString()
+  if (Array.isArray(value)) return value.join(', ')
+  return String(value)
+}
+
+function removeFilter(key) {
+  emit('remove', key)
+}
+
+function clearAll() {
+  emit('clear')
+}
+</script>
+
+<style scoped>
+.chip-enter-active,
+.chip-leave-active {
+  transition: all 0.2s ease;
+}
+
+.chip-enter-from {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.chip-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+</style>

package/app/components/V/A/Table/README.md

@@ -0,0 +1,380 @@
+# VATable Component System
+
+TanStack-powered data table components for Nuxt 4 with built-in search, sorting, filtering, pagination, selection, and preset-based cell rendering.
+
+## Components
+
+### `<VATable>` — Main Table
+
+The primary table component. Wraps Nuxt UI's `<UTable>` with a toolbar, filter chips, pagination footer, and automatic column processing.
+
+```vue
+<VATable
+  name="Users"
+  :data="users"
+  :columns="columns"
+  :loading="loading"
+  :filters="filterDefs"
+  :selectable="true"
+  :on-refresh="refresh"
+  :on-row-click="handleClick"
+  default-sort="name"
+  :default-sort-desc="false"
+  :initial-page-limit="20"
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `name` | `string` | — | Table title shown in the card header |
+| `data` | `unknown[]` | **required** | Array of row data |
+| `columns` | `TableColumn[]` | **required** | TanStack column definitions |
+| `loading` | `boolean` | `false` | Shows loading skeleton on initial load |
+| `initialPageLimit` | `number` | `10` | Rows per page |
+| `selectable` | `boolean` | `false` | Enable row selection checkboxes |
+| `filters` | `FilterDefinition[]` | — | Filter dropdown definitions |
+| `onRefresh` | `() => void \| Promise<void>` | — | Shows refresh button; called on click |
+| `onRowClick` | `(row: unknown) => void` | — | Called when a row is clicked |
+| `defaultSort` | `string` | — | Column accessorKey to sort by on mount |
+| `defaultSortDesc` | `boolean` | `false` | Sort descending by default |
+
+#### v-model Bindings
+
+| Model | Type | Description |
+|-------|------|-------------|
+| `sorting` | `SortingState` | TanStack sorting state |
+| `filterValues` | `Record<string, unknown>` | Active filter values |
+
+#### Slots
+
+| Slot | Props | Description |
+|------|-------|-------------|
+| `header-right` | — | Content placed right of the table name |
+| `bulk-actions` | `{ selected, count, clear }` | Shown when rows are selected |
+| `actions-cell` | `{ row }` | Custom actions column (auto-added) |
+| `[column]-cell` | `{ row }` | Custom cell for a specific column |
+| `cell-[column]` | `{ row }` | Alias for above (auto-mapped) |
+
+#### Exposed
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `selectedRows` | `computed<any[]>` | Currently selected row data |
+| `rowSelection` | `ref<Record<string, boolean>>` | Selection state |
+| `clearSelection` | `() => void` | Clears all selections |
+
+---
+
+### `<VACrudTable>` — CRUD-Integrated Table
+
+Full CRUD table that integrates with `useXCrud` composable. Provides toolbar, search, column toggle, export, pagination, and delete confirmation.
+
+```vue
+<VACrudTable
+  endpoint="/api/users"
+  :columns="columns"
+  :config="{
+    toolbar: { search: true, export: true },
+    actions: { create: true, view: true, edit: true, delete: true },
+    pagination: { enabled: true, pageSize: 20 }
+  }"
+  @create="openCreate"
+  @view="openView"
+  @edit="openEdit"
+  @delete="onDeleted"
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `endpoint` | `string` | — | API endpoint for useXCrud |
+| `columns` | `Array` | **required** | Column definitions |
+| `rowKey` | `string` | `'id'` | Row identifier key |
+| `crud` | `Object` | — | Inject existing crud instance |
+| `config` | `Object` | see below | Grouped configuration |
+| `emptyState` | `Object` | `{ title: 'No data' }` | Empty state config |
+| `initialFilters` | `Object` | `{}` | Initial filter values |
+
+**Config structure:**
+
+```ts
+{
+  toolbar: {
+    search: true,
+    searchPlaceholder: 'Search...',
+    columns: true,      // show column toggle
+    export: true,
+    exportFilename: 'export'
+  },
+  actions: {
+    create: true,
+    createLabel: 'Create',
+    view: true,
+    edit: true,
+    delete: true,
+    viewRoute: '/users/:id',    // auto-navigate
+    editRoute: '/users/:id/edit'
+  },
+  selection: { enabled: false },
+  pagination: { enabled: true, pageSize: 20 }
+}
+```
+
+#### Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `create` | — | Create button clicked |
+| `view` | `row` | View action (if no viewRoute) |
+| `edit` | `row` | Edit action (if no editRoute) |
+| `delete` | `row` | After successful delete |
+| `select` | `rows[]` | Selection changed |
+| `row-click` | `row` | Row clicked |
+
+#### Slots
+
+| Slot | Description |
+|------|-------------|
+| `toolbar-left` | Left side of toolbar |
+| `toolbar-right` | Right side of toolbar |
+| `toolbar-actions` | After the create button |
+| `row-actions` | Override row action buttons |
+| `extra-actions` | Additional action buttons per row |
+| `empty` | Empty state content |
+
+---
+
+## Sub-Components
+
+### `<VATableCellRenderer>`
+
+Renders cell content based on `column.meta.preset`. Used automatically by VATable when columns have presets.
+
+**Presets:**
+
+| Preset | Description | Meta Options |
+|--------|-------------|--------------|
+| `text` | Plain text (default) | — |
+| `email` | Clickable mailto link | — |
+| `link` | External link with icon | — |
+| `badge` | Colored status badge | `colorMap` |
+| `boolean` | Check/X circle icon | — |
+| `avatar` | Avatar image + optional name | `size`, `showName` |
+| `date` | Formatted date | `format: 'date' \| 'time' \| 'datetime' \| 'relative'` |
+| `currency` | Formatted currency | `currency`, `locale` |
+| `number` | Formatted number | `decimals`, `locale` |
+
+### `<VATableActions>`
+
+Row action buttons with optional route navigation.
+
+```vue
+<VATableActions
+  :row="row"
+  :show-view="true"
+  :show-edit="true"
+  :show-delete="true"
+  view-route="/users/:id"
+  @view="onView"
+  @edit="onEdit"
+  @delete="onDelete"
+/>
+```
+
+### `<VATableActionColumn>`
+
+Smart action column with primary actions + overflow dropdown menu.
+
+```vue
+<VATableActionColumn
+  :row="row"
+  :show-view="true"
+  :show-edit="true"
+  :show-delete="true"
+  :max-visible="2"
+  :actions="[
+    { name: 'archive', label: 'Archive', icon: 'i-lucide-archive' }
+  ]"
+/>
+```
+
+### `<VATableToolbar>`
+
+Standalone toolbar with search, filter chips, column toggle, and export. Used by VACrudTable.
+
+### `<VATableFilterBar>`
+
+Filter input row with support for `select`, `text`, `date`, and `number` filter types.
+
+### `<VATableFilterChips>`
+
+Displays active filters as animated chips with remove/clear buttons.
+
+### `<VATableColumnToggle>`
+
+Popover with per-column visibility checkboxes, show all, and reset.
+
+### `<VATableExport>`
+
+Dropdown button for CSV/JSON export with nested path and custom formatter support.
+
+### `<VATableEditableCell>`
+
+Inline editing triggered by double-click. Supports text, email, number, textarea, select, and boolean input types.
+
+```vue
+<VATableEditableCell
+  :value="row.name"
+  type="text"
+  :editable="true"
+  @save="(newVal, oldVal) => updateField(row.id, 'name', newVal)"
+/>
+```
+
+---
+
+## Composables
+
+### `useXATableColumns()`
+
+Preset-based column factory. Returns column definitions with `meta.preset` that CellRenderer auto-renders.
+
+```ts
+const { presets } = useXATableColumns()
+
+const columns = [
+  presets.text('name', 'Name'),
+  presets.email('email'),
+  presets.badge('status', 'Status', {
+    colorMap: { active: 'success', pending: 'warning', inactive: 'neutral' }
+  }),
+  presets.date('createdAt', 'Created', { format: 'relative' }),
+  presets.currency('price', 'Price', { currency: 'USD' }),
+  presets.number('quantity', 'Qty', { decimals: 0 }),
+  presets.boolean('isActive', 'Active'),
+  presets.avatar('avatar', 'Photo', { size: 'sm', showName: true }),
+  presets.link('website', 'Website'),
+  presets.editable('notes', 'Notes', { inputType: 'textarea' }),
+  presets.actions({ showView: true, showEdit: true, showDelete: true }),
+  presets.custom('custom', 'Custom Column'),
+]
+```
+
+### `useDataTable(options?)`
+
+State management composable for server-side table patterns. Manages pagination, sorting, filtering, selection, and builds API query params.
+
+```ts
+const {
+  // Pagination
+  page, pageSize, total, totalPages, startIndex, endIndex,
+
+  // Sorting
+  sortKey, sortDirection, toggleSort, setSort, clearSort,
+
+  // Filtering
+  filters, searchQuery, activeFilters, setFilter, removeFilter, clearFilters,
+
+  // Selection
+  selectedRows, selectRow, deselectRow, toggleRowSelection,
+  selectAll, deselectAll, isRowSelected,
+
+  // API query
+  queryParams,  // { page, limit, sort, search, ...filters }
+
+  // Reset
+  reset,
+} = useDataTable({
+  defaultPageSize: 20,
+  defaultSortKey: 'createdAt',
+  defaultSortDirection: 'desc',
+})
+```
+
+---
+
+## Quick Start
+
+### Basic table
+
+```vue
+<script setup>
+const { data, pending } = await useFetch('/api/users')
+
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'status', header: 'Status' },
+]
+</script>
+
+<template>
+  <VATable name="Users" :data="data" :columns="columns" :loading="pending" />
+</template>
+```
+
+### Preset columns with actions
+
+```vue
+<script setup>
+const { presets } = useXATableColumns()
+
+const columns = [
+  presets.text('name', 'Name'),
+  presets.email('email'),
+  presets.badge('status', 'Status'),
+  presets.date('createdAt', 'Created', { format: 'relative' }),
+]
+
+const { data } = await useFetch('/api/users')
+</script>
+
+<template>
+  <VATable name="Users" :data="data" :columns="columns">
+    <template #actions-cell="{ row }">
+      <VATableActions
+        :row="row.original"
+        view-route="/users/:id"
+        @edit="openEdit"
+        @delete="confirmDelete"
+      />
+    </template>
+  </VATable>
+</template>
+```
+
+### CRUD table (auto-fetches data)
+
+```vue
+<script setup>
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'status', header: 'Status', meta: { preset: 'badge' } },
+  { accessorKey: 'createdAt', header: 'Created' },
+]
+</script>
+
+<template>
+  <VACrudTable
+    endpoint="/api/users"
+    :columns="columns"
+    :config="{
+      actions: { viewRoute: '/users/:id', editRoute: '/users/:id/edit' }
+    }"
+    @create="navigateTo('/users/new')"
+  />
+</template>
+```
+
+---
+
+## Date Auto-Detection
+
+VATable automatically detects date columns by accessorKey and applies relative time formatting. Recognized patterns:
+
+`createdAt`, `updatedAt`, `deletedAt`, `publishedAt`, `startedAt`, `endedAt`, `dueDate`, `due_at`, `expiresAt`, `completedAt`, `created_at`, `updated_at`