@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/buttons.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Button Components'
+})
+
+const isRefreshing = ref(false)
+
+const handleRefresh = () => {
+  isRefreshing.value = true
+  setTimeout(() => {
+    isRefreshing.value = false
+  }, 1500)
+}
+
+const handleExport = (format: string) => {
+  console.log('Exporting as:', format)
+}
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Button Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Action buttons for common CRUD operations, navigation, and data export.
+      </p>
+
+      <!-- VABtnAdd Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnAdd</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Primary action button for creating new items.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Add Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VABtnAdd />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnAdd label="Add User" icon="i-lucide-user-plus" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnAdd label="Create Project" icon="i-lucide-folder-plus" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnEdit Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnEdit</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Edit button that opens a form modal for editing records.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Edit Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap items-center gap-4">
+            <ClientOnly>
+              <VABtnEdit title="Edit User">
+                <div class="space-y-4">
+                  <UFormField label="Name">
+                    <UInput placeholder="Enter name" />
+                  </UFormField>
+                  <UFormField label="Email">
+                    <UInput type="email" placeholder="Enter email" />
+                  </UFormField>
+                </div>
+              </VABtnEdit>
+            </ClientOnly>
+            <span class="text-sm text-gray-500">Click the pencil icon to open edit modal</span>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnView Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnView</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">View button for navigating to detail pages.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">View Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap items-center gap-4">
+            <ClientOnly>
+              <VABtnView to="/playground/buttons" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnView to="/playground/buttons" trigger-color="primary" trigger-variant="soft" />
+            </ClientOnly>
+            <span class="text-sm text-gray-500">Links to detail pages</span>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnSubmit Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnSubmit</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Form submission button with optional cancel action.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Submit Button Variations</h3>
+          </template>
+          <div class="space-y-6">
+            <ClientOnly>
+              <VABtnSubmit />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnSubmit label="Submit" :show-cancel="true" align="left" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnSubmit label="Create Account" icon="i-lucide-plus" color="green" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnSubmit label="Processing..." :loading="true" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnBack Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnBack</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Navigation button for going back in history or to a specific route.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Back Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VABtnBack />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnBack label="Return to List" to="/playground" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnBack label="Home" icon="i-lucide-home" to="/" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnRefresh Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnRefresh</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Refresh button with loading state animation.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Refresh Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap items-center gap-4">
+            <ClientOnly>
+              <VABtnRefresh @refresh="handleRefresh" :loading="isRefreshing" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnRefresh label="Refresh Data" @refresh="handleRefresh" :loading="isRefreshing" />
+            </ClientOnly>
+            <span class="text-sm text-gray-500">Click to see loading animation</span>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnConfirmDelete Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnConfirmDelete</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Delete button with confirmation modal. Requires endpoint and ID for CRUD operations.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Delete Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap items-center gap-4">
+            <ClientOnly>
+              <VABtnConfirmDelete endpoint="users" :id="1" item-name="user" />
+            </ClientOnly>
+            <span class="text-sm text-gray-500">Click to open delete confirmation modal</span>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABtnExport Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABtnExport</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Export dropdown with format options.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Export Button Variations</h3>
+          </template>
+          <div class="flex flex-wrap items-center gap-4">
+            <ClientOnly>
+              <VABtnExport @export="handleExport" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABtnExport :formats="['csv', 'excel']" @export="handleExport" />
+            </ClientOnly>
+            <span class="text-sm text-gray-500">Click to see format options</span>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- Combined Actions Example -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Combined Actions Example</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Common pattern: action buttons in a table row context.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Table Row Actions</h3>
+          </template>
+          <div class="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+            <div>
+              <p class="font-semibold text-gray-900 dark:text-white">John Doe</p>
+              <p class="text-sm text-gray-500">john@example.com</p>
+            </div>
+            <div class="flex items-center gap-2">
+              <ClientOnly>
+                <VABtnView to="/playground/buttons" />
+              </ClientOnly>
+              <ClientOnly>
+                <VABtnEdit title="Edit User">
+                  <div class="space-y-4">
+                    <UFormField label="Name">
+                      <UInput model-value="John Doe" />
+                    </UFormField>
+                  </div>
+                </VABtnEdit>
+              </ClientOnly>
+              <ClientOnly>
+                <VABtnConfirmDelete endpoint="users" :id="1" item-name="user" />
+              </ClientOnly>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>

package/app/pages/playground/cards.vue

@@ -0,0 +1,326 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Card Components'
+})
+
+// Mock data for chart-based cards
+const chartData = [
+  { date: 'Jan 23', users: 234, sessions: 1432, churn: 5.2 },
+  { date: 'Feb 23', users: 431, sessions: 1032, churn: 4.3 },
+  { date: 'Mar 23', users: 543, sessions: 1089, churn: 5.1 },
+  { date: 'Apr 23', users: 489, sessions: 988, churn: 5.4 },
+  { date: 'May 23', users: 391, sessions: 642, churn: 5.5 },
+  { date: 'Jun 23', users: 582, sessions: 786, churn: 4.8 },
+  { date: 'Jul 23', users: 482, sessions: 673, churn: 4.5 },
+  { date: 'Aug 23', users: 389, sessions: 761, churn: 0 },
+  { date: 'Sep 23', users: 521, sessions: 793, churn: 0 },
+  { date: 'Oct 23', users: 434, sessions: 543, churn: 0 },
+  { date: 'Nov 23', users: 332, sessions: 678, churn: 0 },
+  { date: 'Dec 23', users: 275, sessions: 873, churn: 0 }
+]
+
+const donutChartData = [
+  { name: 'Direct', value: 35, color: '#3b82f6' },
+  { name: 'Organic', value: 45, color: '#10b981' },
+  { name: 'Referral', value: 20, color: '#f59e0b' }
+]
+
+const revenueData = [
+  { month: 'Jan', revenue: 45000, expenses: 32000 },
+  { month: 'Feb', revenue: 52000, expenses: 38000 },
+  { month: 'Mar', revenue: 48000, expenses: 35000 },
+  { month: 'Apr', revenue: 61000, expenses: 42000 },
+  { month: 'May', revenue: 55000, expenses: 40000 },
+  { month: 'Jun', revenue: 67000, expenses: 45000 }
+]
+
+const revenueCategories = {
+  revenue: { name: 'Revenue', color: '#3b82f6' },
+  expenses: { name: 'Expenses', color: '#ef4444' }
+}
+
+const orders = [
+  { id: 1001, customer: 'John Doe', date: '2024-01-15T10:30:00', total: 250, status: 'Paid' as const },
+  { id: 1002, customer: 'Jane Smith', date: '2024-01-14T14:20:00', total: 180, status: 'Pending' as const },
+  { id: 1003, customer: 'Bob Johnson', date: '2024-01-13T09:15:00', total: 320, status: 'Paid' as const },
+  { id: 1004, customer: 'Alice Brown', date: '2024-01-12T16:45:00', total: 150, status: 'Failed' as const }
+]
+
+const products = [
+  { id: 1, name: 'Laptop Pro', category: 'Electronics', stock: 15, image: '' },
+  { id: 2, name: 'Wireless Mouse', category: 'Accessories', stock: 45, image: '' },
+  { id: 3, name: 'USB-C Cable', category: 'Cables', stock: 0, image: '' },
+  { id: 4, name: 'Monitor 4K', category: 'Electronics', stock: 8, image: '' }
+]
+
+const activeUsers = [
+  { metric: 'Total Users', current: 12450, percentChange: 8.5 },
+  { metric: 'Active Sessions', current: 3421, percentChange: -2.3 },
+  { metric: 'New Signups', current: 542, percentChange: 15.2 }
+]
+
+const handleClick = () => {
+  console.log('Card clicked!')
+}
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+        <h1 class="text-3xl font-bold mb-4">Card Components Showcase</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-8">
+          Complete showcase of all card components with standardized UCard format.
+        </p>
+
+        <!-- VaCardHeader Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardHeader</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card header component with title, subtitle, and action slot.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Header Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardHeader
+                title="Card Header"
+                subtitle="With subtitle text"
+                icon="i-heroicons-chart-bar"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardTitle Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardTitle</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Large title component for card content.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Title Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardTitle title="Card Title Component" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardSubtitle Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardSubtitle</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Subtitle component for secondary text in cards.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Subtitle Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardSubtitle subtitle="This is a card subtitle component" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardKpi Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardKpi</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">KPI card with value and trend indicator.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">KPI Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardKpi
+                title="Total Revenue"
+                :value="45231"
+                :change="12.5"
+                trend="up"
+                icon="i-heroicons-currency-dollar"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardKpi2 Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardKpi2</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Alternative KPI card with percentage change display.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">KPI2 Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardKpi2
+                title="Active Users"
+                :value="8432"
+                :change="-3.2"
+                trend="down"
+                icon="i-heroicons-users"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardWithIndicator Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithIndicator</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with status indicator dot.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Indicator Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardWithIndicator
+                title="Status"
+                value="Active"
+                indicator="success"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardWithProgressCircle Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithProgressCircle</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with circular progress indicator.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Progress Circle Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardWithProgressCircle
+                title="Completion"
+                :progress="75"
+                :total="100"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardWithChart Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithChart</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with embedded area chart showing trends over time.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Chart Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardWithChart
+                name="User Growth"
+                value="582"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardWithChartBlock Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithChartBlock</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with chart block layout and title overlay.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Chart Block Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardWithChartBlock
+                title="Performance Metrics"
+                text="Last 30 days"
+              >
+                <div class="h-32 bg-gradient-to-r from-blue-400 to-blue-600 rounded flex items-center justify-center">
+                  <span class="text-white font-semibold">Chart Visualization</span>
+                </div>
+              </VaCardWithChartBlock>
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardWithActiveUsers Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithActiveUsers</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card displaying active user metrics with percentage changes.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Active Users Examples</h3>
+            </template>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <ClientOnly v-for="user in activeUsers" :key="user.metric">
+                <VaCardWithActiveUsers
+                  :metric="user.metric"
+                  :current="user.current"
+                  :percent-change="user.percentChange"
+                />
+              </ClientOnly>
+            </div>
+          </UCard>
+        </div>
+
+        <!-- VaCardDonutChart Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardDonutChart</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with donut chart and category breakdown.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Donut Chart Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardDonutChart
+                :data="donutChartData"
+                title="Traffic Sources"
+                total-value="100%"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardLatestOrders Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardLatestOrders</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card displaying recent orders in a table format.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Orders Table Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardLatestOrders :orders="orders" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardPopularProducts Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardPopularProducts</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card showing popular products with stock status.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Products Table Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardPopularProducts :products="products" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaCardRevenueBarChart Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardRevenueBarChart</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Card with bar chart comparing revenue and expenses.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Revenue Bar Chart Example</h3>
+            </template>
+            <ClientOnly>
+              <VaCardRevenueBarChart
+                title="Revenue vs Expenses"
+                total-value="$328,000"
+                :data="revenueData"
+                :categories="revenueCategories"
+                :y-axis="['revenue', 'expenses']"
+                :x-formatter="(i: number) => revenueData[i]?.month || ''"
+                :y-formatter="() => ''"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+      </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>