@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/tables.vue

@@ -0,0 +1,618 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Table Components'
+})
+
+// Sample data
+const users = ref([
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 95000 },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'active', department: 'Marketing', salary: 72000 },
+  { id: 3, name: 'Bob Wilson', email: 'bob@example.com', role: 'Viewer', status: 'pending', department: 'Sales', salary: 68000 },
+  { id: 4, name: 'Alice Brown', email: 'alice@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 105000 },
+  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com', role: 'Editor', status: 'inactive', department: 'Design', salary: 78000 },
+  { id: 6, name: 'Diana Miller', email: 'diana@example.com', role: 'Viewer', status: 'active', department: 'HR', salary: 62000 },
+  { id: 7, name: 'Edward Lee', email: 'edward@example.com', role: 'Admin', status: 'active', department: 'Engineering', salary: 112000 },
+  { id: 8, name: 'Fiona Garcia', email: 'fiona@example.com', role: 'Editor', status: 'pending', department: 'Marketing', salary: 75000 },
+  { id: 9, name: 'George Martinez', email: 'george@example.com', role: 'Viewer', status: 'active', department: 'Sales', salary: 71000 },
+  { id: 10, name: 'Hannah Robinson', email: 'hannah@example.com', role: 'Editor', status: 'active', department: 'Design', salary: 82000 },
+  { id: 11, name: 'Ivan Thompson', email: 'ivan@example.com', role: 'Admin', status: 'inactive', department: 'Engineering', salary: 98000 },
+  { id: 12, name: 'Julia White', email: 'julia@example.com', role: 'Viewer', status: 'active', department: 'HR', salary: 58000 }
+])
+
+// Basic columns
+const basicColumns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+  { accessorKey: 'status', header: 'Status' }
+]
+
+// Full columns with more fields
+const fullColumns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+  { accessorKey: 'department', header: 'Department' },
+  { accessorKey: 'salary', header: 'Salary' },
+  { accessorKey: 'status', header: 'Status' }
+]
+
+// Columns with custom cells
+const customCellColumns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'email', header: 'Email' },
+  { accessorKey: 'role', header: 'Role' },
+  { accessorKey: 'status', header: 'Status' },
+  { accessorKey: 'salary', header: 'Salary' }
+]
+
+// Products data for variety
+const products = ref([
+  { id: 1, name: 'MacBook Pro 14"', category: 'Laptops', price: 1999, stock: 45, rating: 4.8 },
+  { id: 2, name: 'iPhone 15 Pro', category: 'Phones', price: 999, stock: 120, rating: 4.9 },
+  { id: 3, name: 'AirPods Pro', category: 'Audio', price: 249, stock: 200, rating: 4.7 },
+  { id: 4, name: 'iPad Air', category: 'Tablets', price: 599, stock: 80, rating: 4.6 },
+  { id: 5, name: 'Apple Watch Ultra', category: 'Wearables', price: 799, stock: 35, rating: 4.8 },
+  { id: 6, name: 'Mac Mini M2', category: 'Desktops', price: 699, stock: 60, rating: 4.5 }
+])
+
+const productColumns = [
+  { accessorKey: 'name', header: 'Product' },
+  { accessorKey: 'category', header: 'Category' },
+  { accessorKey: 'price', header: 'Price' },
+  { accessorKey: 'stock', header: 'Stock' },
+  { accessorKey: 'rating', header: 'Rating' }
+]
+
+// Event handlers
+const handleSearch = (query: string) => {
+  console.log('Search:', query)
+}
+
+const handleSelect = (rows: any[]) => {
+  console.log('Selected:', rows)
+}
+
+const handleView = (row: any) => {
+  console.log('View:', row)
+}
+
+const handleEdit = (row: any) => {
+  console.log('Edit:', row)
+}
+
+const handleDelete = (row: any) => {
+  console.log('Delete:', row)
+}
+
+const handleExport = (format: string, data: any[]) => {
+  console.log(`Exported ${data.length} rows as ${format}`)
+}
+
+// Status badge color helper
+const getStatusColor = (status: string) => {
+  switch (status) {
+    case 'active': return 'green'
+    case 'pending': return 'yellow'
+    case 'inactive': return 'red'
+    default: return 'gray'
+  }
+}
+
+// VADataTable handlers
+const handleDataTableSelect = (row: any) => {
+  console.log('DataTable selected:', row)
+}
+
+const handleDataTablePrev = () => {
+  console.log('DataTable prev')
+}
+
+const handleDataTableNext = () => {
+  console.log('DataTable next')
+}
+
+const handleDataTableNew = () => {
+  console.log('DataTable new')
+}
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+    <div class="py-8 space-y-12">
+      <div>
+        <h1 class="text-3xl font-bold mb-4">VATable Components Showcase</h1>
+        <p class="text-gray-600 dark:text-gray-400">
+          Full-featured data tables with search, sort, filter, export, selection, and pagination capabilities.
+        </p>
+      </div>
+
+      <!-- Basic Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Basic Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Simple table with minimal configuration.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Basic Table Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 5)"
+              :columns="basicColumns"
+              :paginated="false"
+              card
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Searchable Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Searchable Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Table with search functionality to filter rows.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Search Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users"
+              :columns="basicColumns"
+              searchable
+              search-placeholder="Search users..."
+              card
+              name="Users"
+              @search="handleSearch"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Sortable Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Sortable Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Click column headers to sort. Click again to reverse, third click to clear.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Sort Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="products"
+              :columns="productColumns"
+              sortable
+              card
+              name="Products"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Row Selection -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Row Selection</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Multi-select with checkbox column and select all functionality.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Multi-Select Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 6)"
+              :columns="basicColumns"
+              selectable="multi"
+              card
+              name="Select Users"
+              @select="handleSelect"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Single Selection -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Single Selection</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Single row selection mode - only one row can be selected at a time.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Single-Select Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="products"
+              :columns="productColumns"
+              selectable="single"
+              card
+              name="Select Product"
+              :paginated="false"
+              @select="handleSelect"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Row Actions -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Row Actions</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Table with view, edit, and delete action buttons per row.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Actions Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 5)"
+              :columns="basicColumns"
+              show-view
+              show-edit
+              show-delete
+              card
+              name="Users with Actions"
+              :paginated="false"
+              @view="handleView"
+              @edit="handleEdit"
+              @delete="handleDelete"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Export Functionality -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Export Functionality</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Export data to CSV or JSON format.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Export Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="products"
+              :columns="productColumns"
+              exportable
+              :export-formats="['csv', 'json']"
+              card
+              name="Products Export"
+              @export="handleExport"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Column Toggle -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Column Toggle</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Show/hide columns using the column toggle dropdown.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Column Toggle Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 6)"
+              :columns="fullColumns"
+              show-column-toggle
+              card
+              name="Toggle Columns"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Custom Cell Rendering -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Custom Cell Rendering</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Custom cell templates for status badges and formatted currency.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Custom Cells Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 6)"
+              :columns="customCellColumns"
+              card
+              name="Custom Cells"
+              :paginated="false"
+            >
+              <template #status-data="{ value }">
+                <UBadge :color="getStatusColor(value)" size="sm" variant="subtle">
+                  {{ value }}
+                </UBadge>
+              </template>
+              <template #salary-data="{ value }">
+                <span class="font-medium text-gray-900 dark:text-white">
+                  ${{ value.toLocaleString() }}
+                </span>
+              </template>
+            </VATable>
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Striped Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Striped Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Alternating row colors for improved readability.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Striped Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 8)"
+              :columns="basicColumns"
+              striped
+              card
+              name="Striped Table"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Compact Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Compact Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Reduced padding for denser data display.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Compact Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users.slice(0, 8)"
+              :columns="basicColumns"
+              compact
+              card
+              name="Compact Table"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Sticky Header -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Sticky Header</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Header stays visible when scrolling through large datasets.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Sticky Header Example</h3>
+          </template>
+          <div class="max-h-64 overflow-auto">
+            <ClientOnly>
+              <VATable
+                :data="users"
+                :columns="basicColumns"
+                sticky-header
+                :paginated="false"
+                card
+                name="Sticky Header"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- Full Featured Table -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Full Featured Table</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">All features combined: search, sort, select, export, pagination, and actions.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Full Featured Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users"
+              :columns="fullColumns"
+              searchable
+              search-placeholder="Search users..."
+              sortable
+              selectable="multi"
+              show-column-toggle
+              exportable
+              show-view
+              show-edit
+              show-delete
+              striped
+              card
+              name="Full Featured Users"
+              :page-size="5"
+              :page-sizes="[5, 10, 20]"
+              @search="handleSearch"
+              @select="handleSelect"
+              @view="handleView"
+              @edit="handleEdit"
+              @delete="handleDelete"
+              @export="handleExport"
+            >
+              <template #status-data="{ value }">
+                <UBadge :color="getStatusColor(value)" size="sm" variant="subtle">
+                  {{ value }}
+                </UBadge>
+              </template>
+              <template #salary-data="{ value }">
+                <span class="font-medium">${{ value.toLocaleString() }}</span>
+              </template>
+            </VATable>
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Loading State -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Loading State</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Skeleton loading state while data is being fetched.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Loading Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="[]"
+              :columns="basicColumns"
+              loading
+              card
+              name="Loading Table"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Empty State -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Empty State</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Custom empty state when no data is available.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Empty State Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="[]"
+              :columns="basicColumns"
+              empty-title="No users found"
+              empty-description="There are no users matching your criteria. Try adjusting your filters or add new users."
+              empty-icon="i-lucide-users"
+              card
+              name="Empty Table"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Custom Pagination -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Custom Pagination</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Configurable page sizes and pagination controls.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Pagination Example</h3>
+          </template>
+          <ClientOnly>
+            <VATable
+              :data="users"
+              :columns="basicColumns"
+              :page-size="3"
+              :page-sizes="[3, 5, 10, 20]"
+              show-page-size
+              card
+              name="Paginated Table"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- VADataTable Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VADataTable</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Simpler table component with basic search, pagination, and loading states. Ideal for list pages with minimal configuration.</p>
+      
+      <!-- Basic DataTable -->
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Basic DataTable</h3>
+          </template>
+          <ClientOnly>
+            <VADataTable
+              title="Users"
+              :rows="users.slice(0, 5)"
+              :columns="basicColumns"
+              :show-search="false"
+              :show-pagination="false"
+              @select="handleDataTableSelect"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- DataTable with Search -->
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">DataTable with Search</h3>
+          </template>
+          <ClientOnly>
+            <VADataTable
+              title="Users"
+              :rows="users"
+              :columns="basicColumns"
+              search-placeholder="Search users..."
+              :show-search="true"
+              :show-pagination="false"
+              @select="handleDataTableSelect"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- DataTable with Pagination -->
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">DataTable with Pagination</h3>
+          </template>
+          <ClientOnly>
+            <VADataTable
+              title="Products"
+              :rows="products.slice(0, 3)"
+              :columns="productColumns"
+              :total-count="products.length"
+              :has-prev="false"
+              :has-next="true"
+              :show-search="true"
+              :show-pagination="true"
+              search-placeholder="Search products..."
+              @select="handleDataTableSelect"
+              @prev="handleDataTablePrev"
+              @next="handleDataTableNext"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- DataTable with New Button -->
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">DataTable with New Button</h3>
+          </template>
+          <ClientOnly>
+            <VADataTable
+              title="Users"
+              :rows="users.slice(0, 4)"
+              :columns="basicColumns"
+              :show-search="true"
+              :show-pagination="false"
+              :show-new-button="true"
+              new-button-label="Add User"
+              @select="handleDataTableSelect"
+              @new="handleDataTableNew"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- DataTable Loading State -->
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">DataTable Loading State</h3>
+          </template>
+          <ClientOnly>
+            <VADataTable
+              title="Loading Data"
+              :rows="[]"
+              :columns="basicColumns"
+              :loading="true"
+              :show-search="true"
+              :show-pagination="false"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>

package/app/pages/test-layout.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'dashboard' })
+</script>
+
+<template>
+  <div class="p-8">
+    <h1 class="text-2xl font-bold">Dashboard Layout Test</h1>
+    <p>If you see the sidebar and header, the layout is working!</p>
+  </div>
+</template>

package/nuxt.config.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules: ['@nuxt/ui', 'nuxt-charts'],
+  css: [join(currentDir, 'app/assets/css/v-app.css')],
+  ssr: false
+})