@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,674 @@
+<script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+
+/**
+ * VATable - Full-Featured Data Table
+ * HubSpot-inspired design with search, sort, filter, export, selection, and pagination
+ */
+
+export interface TableColumn {
+  id?: string
+  accessorKey?: string
+  header: string
+  enableSorting?: boolean
+  enableHiding?: boolean
+  cell?: (info: { row: { original: any }, getValue: () => any }) => any
+  meta?: {
+    class?: string
+    headerClass?: string
+  }
+}
+
+export interface SortState {
+  column: string
+  direction: 'asc' | 'desc' | null
+}
+
+const props = withDefaults(defineProps<{
+  // Data
+  data: any[]
+  columns: TableColumn[]
+  rowKey?: string
+
+  // Features
+  searchable?: boolean
+  searchPlaceholder?: string
+  sortable?: boolean
+  selectable?: boolean | 'single' | 'multi'
+  showColumnToggle?: boolean
+  exportable?: boolean
+  exportFormats?: ('csv' | 'json')[]
+
+  // Pagination
+  paginated?: boolean
+  pageSize?: number
+  pageSizes?: number[]
+  showPageSize?: boolean
+  total?: number
+
+  // UI
+  card?: boolean
+  name?: string
+  stickyHeader?: boolean
+  striped?: boolean
+  compact?: boolean
+
+  // Actions
+  showView?: boolean
+  showEdit?: boolean
+  showDelete?: boolean
+
+  // Empty state
+  emptyTitle?: string
+  emptyDescription?: string
+  emptyIcon?: string
+
+  // Loading
+  loading?: boolean
+
+  // Sort (controlled)
+  sort?: SortState | null
+}>(), {
+  rowKey: 'id',
+  searchable: false,
+  searchPlaceholder: 'Search...',
+  sortable: true,
+  selectable: false,
+  showColumnToggle: false,
+  exportable: false,
+  exportFormats: () => ['csv', 'json'],
+  paginated: true,
+  pageSize: 10,
+  pageSizes: () => [10, 20, 50, 100],
+  showPageSize: true,
+  total: 0,
+  card: false,
+  name: '',
+  stickyHeader: false,
+  striped: false,
+  compact: false,
+  showView: false,
+  showEdit: false,
+  showDelete: false,
+  emptyTitle: 'No records found',
+  emptyDescription: 'Try adjusting your search or filters.',
+  emptyIcon: 'i-lucide-inbox',
+  loading: false,
+  sort: null
+})
+
+const emit = defineEmits<{
+  search: [value: string]
+  'update:sort': [sort: SortState | null]
+  select: [rows: any[]]
+  'row-click': [row: any]
+  page: [page: number]
+  'page-size': [size: number]
+  'update:pagination': [{ pageSize: number; pageIndex: number }]
+  view: [row: any]
+  edit: [row: any]
+  delete: [row: any]
+  export: [format: 'csv' | 'json', data: any[]]
+}>()
+
+// Internal State
+const searchQuery = ref('')
+const debouncedSearch = refDebounced(searchQuery, 300)
+const currentPage = ref(1)
+const internalPageSize = ref(props.pageSize)
+const selectedRows = ref<any[]>([])
+const hiddenColumns = ref<Set<string>>(new Set())
+const internalSort = ref<SortState | null>(props.sort)
+
+// Column toggle dropdown state
+const columnToggleOpen = ref(false)
+const exportMenuOpen = ref(false)
+
+// Watch for external search changes
+watch(debouncedSearch, (val) => emit('search', val))
+
+// Computed: Get column key
+const getColumnKey = (col: TableColumn): string => col.id || col.accessorKey || col.header
+
+// Computed: Visible columns (excluding hidden)
+const visibleColumns = computed(() => {
+  const cols = props.columns.filter(col => !hiddenColumns.value.has(getColumnKey(col)))
+
+  // Add actions column if any action is enabled
+  if (props.showView || props.showEdit || props.showDelete) {
+    cols.push({
+      id: 'actions',
+      header: '',
+      enableSorting: false,
+      enableHiding: false
+    })
+  }
+
+  return cols
+})
+
+// Computed: Filter data by search
+const filteredData = computed(() => {
+  if (!debouncedSearch.value) return props.data
+
+  const query = debouncedSearch.value.toLowerCase()
+  return props.data.filter(row => {
+    return props.columns.some(col => {
+      const key = col.accessorKey || col.id
+      if (!key) return false
+      const value = row[key]
+      if (value == null) return false
+      return String(value).toLowerCase().includes(query)
+    })
+  })
+})
+
+// Computed: Sort data
+const sortedData = computed(() => {
+  const sortState = internalSort.value || props.sort
+  if (!sortState || !sortState.direction) return filteredData.value
+
+  const { column, direction } = sortState
+  return [...filteredData.value].sort((a, b) => {
+    const aVal = a[column]
+    const bVal = b[column]
+
+    if (aVal == null && bVal == null) return 0
+    if (aVal == null) return 1
+    if (bVal == null) return -1
+
+    let comparison = 0
+    if (typeof aVal === 'number' && typeof bVal === 'number') {
+      comparison = aVal - bVal
+    } else {
+      comparison = String(aVal).localeCompare(String(bVal))
+    }
+
+    return direction === 'desc' ? -comparison : comparison
+  })
+})
+
+// Computed: Total rows
+const totalRows = computed(() => props.total || sortedData.value.length)
+
+// Computed: Paginated data
+const paginatedData = computed(() => {
+  if (!props.paginated) return sortedData.value
+
+  const start = (currentPage.value - 1) * internalPageSize.value
+  const end = start + internalPageSize.value
+  return sortedData.value.slice(start, end)
+})
+
+// Computed: Page count
+const pageCount = computed(() => Math.ceil(totalRows.value / internalPageSize.value))
+
+// Computed: Showing range text
+const showingText = computed(() => {
+  const start = (currentPage.value - 1) * internalPageSize.value + 1
+  const end = Math.min(currentPage.value * internalPageSize.value, totalRows.value)
+  return `Showing ${start} to ${end} of ${totalRows.value} results`
+})
+
+// Methods
+const handleSort = (column: TableColumn) => {
+  if (!props.sortable || column.enableSorting === false) return
+
+  const key = getColumnKey(column)
+  const currentSort = internalSort.value || props.sort
+
+  let newDirection: 'asc' | 'desc' | null = 'asc'
+
+  if (currentSort?.column === key) {
+    if (currentSort.direction === 'asc') newDirection = 'desc'
+    else if (currentSort.direction === 'desc') newDirection = null
+  }
+
+  const newSort = newDirection ? { column: key, direction: newDirection } : null
+  internalSort.value = newSort
+  emit('update:sort', newSort)
+}
+
+const getSortIcon = (column: TableColumn): string => {
+  const key = getColumnKey(column)
+  const currentSort = internalSort.value || props.sort
+
+  if (currentSort?.column !== key) return 'i-lucide-chevrons-up-down'
+  if (currentSort.direction === 'asc') return 'i-lucide-chevron-up'
+  if (currentSort.direction === 'desc') return 'i-lucide-chevron-down'
+  return 'i-lucide-chevrons-up-down'
+}
+
+const handleRowClick = (row: any) => {
+  emit('row-click', row)
+}
+
+const toggleRowSelection = (row: any) => {
+  const key = row[props.rowKey]
+  const index = selectedRows.value.findIndex(r => r[props.rowKey] === key)
+
+  if (props.selectable === 'single') {
+    selectedRows.value = index >= 0 ? [] : [row]
+  } else {
+    if (index >= 0) {
+      selectedRows.value.splice(index, 1)
+    } else {
+      selectedRows.value.push(row)
+    }
+  }
+
+  emit('select', selectedRows.value)
+}
+
+const isRowSelected = (row: any): boolean => {
+  return selectedRows.value.some(r => r[props.rowKey] === row[props.rowKey])
+}
+
+const toggleSelectAll = () => {
+  if (selectedRows.value.length === paginatedData.value.length) {
+    selectedRows.value = []
+  } else {
+    selectedRows.value = [...paginatedData.value]
+  }
+  emit('select', selectedRows.value)
+}
+
+const isAllSelected = computed(() => {
+  return paginatedData.value.length > 0 && selectedRows.value.length === paginatedData.value.length
+})
+
+const isSomeSelected = computed(() => {
+  return selectedRows.value.length > 0 && selectedRows.value.length < paginatedData.value.length
+})
+
+const toggleColumn = (column: TableColumn) => {
+  const key = getColumnKey(column)
+  if (hiddenColumns.value.has(key)) {
+    hiddenColumns.value.delete(key)
+  } else {
+    hiddenColumns.value.add(key)
+  }
+}
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+  emit('page', page)
+}
+
+const handlePageSizeChange = (size: number) => {
+  internalPageSize.value = size
+  currentPage.value = 1
+  emit('page-size', size)
+  emit('update:pagination', { pageSize: size, pageIndex: 0 })
+}
+
+const getCellValue = (row: any, column: TableColumn): any => {
+  const key = column.accessorKey || column.id
+  if (!key) return ''
+  return row[key]
+}
+
+// Export functions
+const exportToCSV = () => {
+  const headers = props.columns
+    .filter(col => col.accessorKey || col.id)
+    .map(col => col.header)
+
+  const rows = sortedData.value.map(row =>
+    props.columns
+      .filter(col => col.accessorKey || col.id)
+      .map(col => {
+        const val = getCellValue(row, col)
+        // Escape quotes and wrap in quotes if contains comma
+        if (typeof val === 'string' && (val.includes(',') || val.includes('"'))) {
+          return `"${val.replace(/"/g, '""')}"`
+        }
+        return val ?? ''
+      })
+  )
+
+  const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n')
+  downloadFile(csv, `${props.name || 'export'}.csv`, 'text/csv')
+  emit('export', 'csv', sortedData.value)
+}
+
+const exportToJSON = () => {
+  const json = JSON.stringify(sortedData.value, null, 2)
+  downloadFile(json, `${props.name || 'export'}.json`, 'application/json')
+  emit('export', 'json', sortedData.value)
+}
+
+const downloadFile = (content: string, filename: string, mimeType: string) => {
+  const blob = new Blob([content], { type: mimeType })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+  URL.revokeObjectURL(url)
+}
+
+// Slots
+const slots = useSlots()
+</script>
+
+<template>
+  <div
+    :class="[
+      card ? 'rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shadow-[var(--va-card-shadow)] overflow-hidden' : ''
+    ]"
+  >
+    <!-- Header/Toolbar -->
+    <div
+      v-if="name || searchable || $slots.toolbar || showColumnToggle || exportable"
+      class="px-4 py-3 border-b border-gray-200 dark:border-gray-800 flex flex-wrap items-center justify-between gap-4"
+    >
+      <div class="flex items-center gap-3">
+        <h3 v-if="name" class="font-bold text-gray-900 dark:text-white text-base">{{ name }}</h3>
+        <span
+          v-if="selectable && selectedRows.length > 0"
+          class="text-sm text-gray-500 dark:text-gray-400"
+        >
+          {{ selectedRows.length }} selected
+        </span>
+        <slot name="toolbar" />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <!-- Search -->
+        <UInput
+          v-if="searchable"
+          v-model="searchQuery"
+          :placeholder="searchPlaceholder"
+          icon="i-lucide-search"
+          size="sm"
+          class="w-64"
+        >
+          <template v-if="searchQuery" #trailing>
+            <UButton
+              color="neutral"
+              variant="link"
+              icon="i-lucide-x"
+              size="xs"
+              :padded="false"
+              @click="searchQuery = ''"
+            />
+          </template>
+        </UInput>
+
+        <!-- Column Toggle -->
+        <UDropdownMenu v-if="showColumnToggle">
+          <UButton
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-columns-3"
+            size="sm"
+          />
+          <template #content>
+            <div class="p-2 min-w-[180px]">
+              <p class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2 px-2">Columns</p>
+              <div
+                v-for="col in columns"
+                :key="getColumnKey(col)"
+                class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
+                @click="toggleColumn(col)"
+              >
+                <UCheckbox
+                  :model-value="!hiddenColumns.has(getColumnKey(col))"
+                  size="sm"
+                />
+                <span class="text-sm text-gray-700 dark:text-gray-300">{{ col.header }}</span>
+              </div>
+            </div>
+          </template>
+        </UDropdownMenu>
+
+        <!-- Export -->
+        <UDropdownMenu v-if="exportable">
+          <UButton
+            color="neutral"
+            variant="outline"
+            icon="i-lucide-download"
+            size="sm"
+          />
+          <template #content>
+            <div class="py-1">
+              <button
+                v-if="exportFormats.includes('csv')"
+                class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2"
+                @click="exportToCSV"
+              >
+                <UIcon name="i-lucide-file-spreadsheet" class="w-4 h-4" />
+                Export as CSV
+              </button>
+              <button
+                v-if="exportFormats.includes('json')"
+                class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center gap-2"
+                @click="exportToJSON"
+              >
+                <UIcon name="i-lucide-braces" class="w-4 h-4" />
+                Export as JSON
+              </button>
+            </div>
+          </template>
+        </UDropdownMenu>
+
+        <slot name="actions" />
+      </div>
+    </div>
+
+    <!-- Table -->
+    <div class="overflow-x-auto">
+      <table class="w-full">
+        <!-- Header -->
+        <thead
+          :class="[
+            'bg-gray-50/80 dark:bg-gray-800/50',
+            stickyHeader ? 'sticky top-0 z-10' : ''
+          ]"
+        >
+          <tr>
+            <!-- Select All Checkbox -->
+            <th
+              v-if="selectable"
+              class="w-12 px-4 py-3"
+            >
+              <UCheckbox
+                v-if="selectable === 'multi' || selectable === true"
+                :model-value="isAllSelected"
+                :indeterminate="isSomeSelected"
+                @update:model-value="toggleSelectAll"
+              />
+            </th>
+
+            <!-- Column Headers -->
+            <th
+              v-for="col in visibleColumns"
+              :key="getColumnKey(col)"
+              :class="[
+                'px-4 text-left text-xs font-semibold text-gray-600 dark:text-gray-400 uppercase tracking-wider',
+                compact ? 'py-2.5' : 'py-3.5',
+                col.meta?.headerClass || '',
+                sortable && col.enableSorting !== false ? 'cursor-pointer select-none hover:text-gray-900 dark:hover:text-white transition-colors' : '',
+                col.id === 'actions' ? 'w-24 text-right' : ''
+              ]"
+              @click="handleSort(col)"
+            >
+              <div class="flex items-center gap-1.5" :class="col.id === 'actions' ? 'justify-end' : ''">
+                <span>{{ col.header }}</span>
+                <UIcon
+                  v-if="sortable && col.enableSorting !== false && col.id !== 'actions'"
+                  :name="getSortIcon(col)"
+                  class="w-4 h-4 text-gray-400"
+                />
+              </div>
+            </th>
+          </tr>
+        </thead>
+
+        <!-- Body -->
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
+          <!-- Loading State -->
+          <template v-if="loading">
+            <tr v-for="i in internalPageSize" :key="`skeleton-${i}`">
+              <td v-if="selectable" class="px-4 py-4">
+                <div class="va-skeleton h-4 w-4 rounded" />
+              </td>
+              <td
+                v-for="col in visibleColumns"
+                :key="`skeleton-${i}-${getColumnKey(col)}`"
+                class="px-4 py-4"
+              >
+                <div class="va-skeleton h-4 w-3/4 rounded" />
+              </td>
+            </tr>
+          </template>
+
+          <!-- Empty State -->
+          <template v-else-if="paginatedData.length === 0">
+            <tr>
+              <td
+                :colspan="visibleColumns.length + (selectable ? 1 : 0)"
+                class="px-4 py-16 text-center"
+              >
+                <div class="flex flex-col items-center justify-center">
+                  <div class="p-4 rounded-full bg-gray-50 dark:bg-gray-800 mb-4">
+                    <UIcon :name="emptyIcon" class="w-10 h-10 text-gray-400" />
+                  </div>
+                  <h3 class="text-sm font-semibold text-gray-900 dark:text-white mb-1">{{ emptyTitle }}</h3>
+                  <p class="text-sm text-gray-500 max-w-sm">{{ emptyDescription }}</p>
+                </div>
+              </td>
+            </tr>
+          </template>
+
+          <!-- Data Rows -->
+          <template v-else>
+            <tr
+              v-for="row in paginatedData"
+              :key="row[rowKey]"
+              class="group va-table-row-hover"
+              :class="[
+                striped ? 'odd:bg-gray-50/50 dark:odd:bg-gray-800/30' : '',
+                isRowSelected(row) ? 'bg-blue-50/50 dark:bg-blue-900/20' : ''
+              ]"
+              @click="handleRowClick(row)"
+            >
+              <!-- Selection Checkbox -->
+              <td
+                v-if="selectable"
+                class="px-4"
+                :class="compact ? 'py-2.5' : 'py-4'"
+                @click.stop
+              >
+                <UCheckbox
+                  :model-value="isRowSelected(row)"
+                  @update:model-value="toggleRowSelection(row)"
+                />
+              </td>
+
+              <!-- Data Cells -->
+              <td
+                v-for="col in visibleColumns"
+                :key="`${row[rowKey]}-${getColumnKey(col)}`"
+                :class="[
+                  'px-4 text-sm text-gray-600 dark:text-gray-300',
+                  compact ? 'py-2.5' : 'py-4',
+                  col.meta?.class || '',
+                  col.id === 'actions' ? 'text-right' : ''
+                ]"
+              >
+                <!-- Actions Column -->
+                <template v-if="col.id === 'actions'">
+                  <div class="va-row-actions flex items-center justify-end gap-1">
+                    <UButton
+                      v-if="showView"
+                      icon="i-lucide-eye"
+                      color="neutral"
+                      variant="ghost"
+                      size="xs"
+                      @click.stop="emit('view', row)"
+                    />
+                    <UButton
+                      v-if="showEdit"
+                      icon="i-lucide-pencil"
+                      color="neutral"
+                      variant="ghost"
+                      size="xs"
+                      @click.stop="emit('edit', row)"
+                    />
+                    <UButton
+                      v-if="showDelete"
+                      icon="i-lucide-trash-2"
+                      color="error"
+                      variant="ghost"
+                      size="xs"
+                      @click.stop="emit('delete', row)"
+                    />
+                  </div>
+                </template>
+
+                <!-- Custom Cell Slot -->
+                <template v-else-if="slots[`${getColumnKey(col)}-data`]">
+                  <slot :name="`${getColumnKey(col)}-data`" :row="row" :value="getCellValue(row, col)" />
+                </template>
+
+                <!-- Custom Cell Renderer -->
+                <template v-else-if="col.cell">
+                  <component
+                    :is="() => col.cell!({ row: { original: row }, getValue: () => getCellValue(row, col) })"
+                  />
+                </template>
+
+                <!-- Default Cell -->
+                <template v-else>
+                  {{ getCellValue(row, col) }}
+                </template>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Footer / Pagination -->
+    <div
+      v-if="paginated && !loading && paginatedData.length > 0"
+      class="px-4 py-3 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between bg-gray-50/50 dark:bg-gray-800/30"
+    >
+      <div class="text-sm text-gray-500 dark:text-gray-400 font-medium">
+        {{ showingText }}
+      </div>
+
+      <div class="flex items-center gap-4">
+        <!-- Page Size Selector -->
+        <div v-if="showPageSize" class="flex items-center gap-2">
+          <span class="text-sm text-gray-500 dark:text-gray-400">Show</span>
+          <USelectMenu
+            :model-value="internalPageSize"
+            :items="pageSizes.map(s => ({ label: String(s), value: s }))"
+            size="sm"
+            class="w-20"
+            @update:model-value="handlePageSizeChange"
+          />
+        </div>
+
+        <!-- Pagination -->
+        <UPagination
+          :model-value="currentPage"
+          :total="totalRows"
+          :page-count="internalPageSize"
+          size="sm"
+          :ui="{
+            wrapper: 'gap-1',
+            base: 'min-w-8 h-8',
+            rounded: 'rounded-md'
+          }"
+          @update:model-value="handlePageChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>