@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/base.vue

@@ -0,0 +1,498 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Base Components'
+})
+
+// Mock data for components
+const navItems = [
+  { label: 'Overview', to: '/playground/base', icon: 'i-lucide-home', exact: true },
+  { label: 'Details', to: '/playground/base/details', icon: 'i-lucide-info' },
+  { label: 'Settings', to: '/playground/base/settings', icon: 'i-lucide-settings' }
+]
+
+const quickActions = [
+  { id: '1', label: 'Create New', description: 'Add a new record', icon: 'i-lucide-plus', color: 'coral' as const },
+  { id: '2', label: 'View Report', description: 'View analytics', icon: 'i-lucide-bar-chart-2', color: 'teal' as const },
+  { id: '3', label: 'Export Data', description: 'Download CSV', icon: 'i-lucide-download', color: 'amber' as const }
+]
+
+// Mock data for new components
+const userMenuUser = {
+  name: 'John Doe',
+  avatar: {
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'John Doe'
+  }
+}
+
+const companies = [
+  {
+    label: 'Acme Corp',
+    avatar: {
+      src: 'https://api.dicebear.com/7.x/initials/svg?seed=AC&backgroundColor=3b82f6',
+      alt: 'Acme Corp'
+    }
+  },
+  {
+    label: 'Tech Inc',
+    avatar: {
+      src: 'https://api.dicebear.com/7.x/initials/svg?seed=TI&backgroundColor=10b981',
+      alt: 'Tech Inc'
+    }
+  },
+  {
+    label: 'Veristone Capital',
+    avatar: {
+      src: 'https://api.dicebear.com/7.x/initials/svg?seed=VC&backgroundColor=84cc16',
+      alt: 'Veristone Capital'
+    }
+  }
+]
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Base Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Core V/A components including cards, stats, badges, navigation, and data display components.
+      </p>
+
+      <!-- VACard Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VACard</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Flexible card component with variants, accents, and interactive states.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Card Variants & States</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <ClientOnly>
+              <VACard title="Default Card" description="Basic card with title and description">
+                <p class="text-gray-600 dark:text-gray-400">This is the default card variant with standard styling.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Success Card" variant="success" icon="i-lucide-check-circle">
+                <p class="text-gray-600 dark:text-gray-400">Card with success variant for positive states.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Warning Card" variant="warning" icon="i-lucide-alert-triangle">
+                <p class="text-gray-600 dark:text-gray-400">Card with warning variant for attention states.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Error Card" variant="error" icon="i-lucide-alert-circle">
+                <p class="text-gray-600 dark:text-gray-400">Card with error variant for critical states.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Collapsible Card" collapsible icon="i-lucide-chevrons-down">
+                <p class="text-gray-600 dark:text-gray-400">Click the chevron to collapse this card content.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Accent Card" accent-color="coral" icon="i-lucide-flame">
+                <p class="text-gray-600 dark:text-gray-400">Card with coral accent bar on the left side.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Teal Accent" accent-color="teal" icon="i-lucide-droplet">
+                <p class="text-gray-600 dark:text-gray-400">Card with teal accent bar styling.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Loading Card" :loading="true">
+                <p class="text-gray-600 dark:text-gray-400">This content is hidden during loading.</p>
+              </VACard>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VACard title="Clickable Card" clickable accent-color="navy" @click="() => {}">
+                <p class="text-gray-600 dark:text-gray-400">Click anywhere on this card to trigger an action.</p>
+              </VACard>
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAStatsCard Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAStatsCard</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Statistics cards with trend indicators and multiple format options.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Stats with Trends & Formats</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ClientOnly>
+              <VAStatsCard
+                label="Total Revenue"
+                :value="125000"
+                :previous-value="110000"
+                format="currency"
+                icon="i-lucide-dollar-sign"
+                accent-color="coral"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Conversion Rate"
+                :value="45.8"
+                :previous-value="42.3"
+                format="percentage"
+                icon="i-lucide-percent"
+                accent-color="teal"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Active Users"
+                :value="8432"
+                :previous-value="9200"
+                format="number"
+                icon="i-lucide-users"
+                accent-color="amber"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Orders"
+                :value="1523"
+                :previous-value="1400"
+                format="number"
+                icon="i-lucide-shopping-cart"
+                accent-color="navy"
+                trend-display="inline"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Error Rate"
+                :value="2.3"
+                :previous-value="3.5"
+                format="percentage"
+                icon="i-lucide-alert-circle"
+                accent-color="coral"
+                :invert-trend="true"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Compact Stat"
+                :value="542"
+                format="number"
+                icon="i-lucide-box"
+                accent-color="teal"
+                :compact="true"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Loading State"
+                :loading="true"
+                icon="i-lucide-loader"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Gold Accent"
+                :value="99.9"
+                format="percentage"
+                icon="i-lucide-star"
+                accent-color="gold"
+                trend-display="minimal"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VABadge Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VABadge</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Status badges with animated dots and customizable labels.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Badge Variants</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VABadge label="Premium" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABadge label="Active" status="active" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABadge label="Pending" status="pending" />
+            </ClientOnly>
+            <ClientOnly>
+              <VABadge label="No Dot" :show-dot="false" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAMetricCard Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAMetricCard</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Animated metric cards with staggered entrance animations.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Metrics with Animations</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ClientOnly>
+              <VAMetricCard label="Total Value" value="$2.4M" animation-delay="0ms" />
+            </ClientOnly>
+            <ClientOnly>
+              <VAMetricCard label="Growth" value="127" unit="%" animation-delay="100ms" />
+            </ClientOnly>
+            <ClientOnly>
+              <VAMetricCard label="Founded" value="Jan 2024" :is-date="true" animation-delay="200ms" />
+            </ClientOnly>
+            <ClientOnly>
+              <VAMetricCard label="Team Size" value="48" unit="members" animation-delay="300ms" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAWelcomeHeader Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAWelcomeHeader</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Personalized welcome header with user greeting.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Welcome Message</h3>
+          </template>
+          <ClientOnly>
+            <VAWelcomeHeader user-name="John" />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- VANavigation Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VANavigation</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Navigation component with icon support and active states.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Navigation Items</h3>
+          </template>
+          <ClientOnly>
+            <VANavigation :items="navItems" />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- VAQuickActions Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAQuickActions</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Quick action buttons with icons and descriptions.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Action Buttons</h3>
+          </template>
+          <div class="max-w-md">
+            <ClientOnly>
+              <VAQuickActions :actions="quickActions" title="Quick Actions" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VADataField & VADataGrid Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VADataField & VADataGrid</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Data display fields with grid layout and multiple variants.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Data Grid Layout</h3>
+          </template>
+          <ClientOnly>
+            <VADataGrid :columns="3">
+              <VADataField label="Company Name" value="Veristone Capital" size="lg" />
+              <VADataField label="Total Assets" value="24500000" variant="currency" size="lg" />
+              <VADataField label="Growth Rate" value="27.5" unit="%" variant="percentage" size="lg" />
+              <VADataField label="Founded" value="2024" />
+              <VADataField label="Headquarters" value="New York, NY" />
+              <VADataField label="Employees" value="150" />
+            </VADataGrid>
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- Highlighted DataField -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Highlighted DataField</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Emphasized data field for key metrics.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Highlighted Metric</h3>
+          </template>
+          <div class="max-w-md">
+            <ClientOnly>
+              <VADataField
+                label="Net Profit"
+                value="5200000"
+                variant="currency"
+                size="xl"
+                :highlight="true"
+                description="Year-to-date performance"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAUserMenu Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAUserMenu</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">User dropdown menu with profile, settings, and logout options.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">User Menu Dropdown</h3>
+          </template>
+          <div class="flex items-center gap-4">
+            <ClientOnly>
+              <VAUserMenu :user="userMenuUser" />
+            </ClientOnly>
+            <p class="text-sm text-gray-500">Click the user button to open menu</p>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VACompanyMenu Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VACompanyMenu</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Company switcher dropdown for multi-tenant applications.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Company Selection</h3>
+          </template>
+          <div class="flex items-center gap-4">
+            <ClientOnly>
+              <VACompanyMenu :companies="companies" />
+            </ClientOnly>
+            <p class="text-sm text-gray-500">Click to switch between companies</p>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAStatusBadge Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAStatusBadge</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Status badges with animated dots and multiple color variants.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Status Badge Variants</h3>
+          </template>
+          <div class="space-y-6">
+            <div>
+              <p class="text-sm font-semibold mb-3">Subtle Variant</p>
+              <div class="flex flex-wrap gap-3">
+                <ClientOnly>
+                  <VAStatusBadge label="Success" status="success" variant="subtle" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Warning" status="warning" variant="subtle" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Error" status="error" variant="subtle" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Info" status="info" variant="subtle" />
+                </ClientOnly>
+              </div>
+            </div>
+            <div>
+              <p class="text-sm font-semibold mb-3">Solid Variant</p>
+              <div class="flex flex-wrap gap-3">
+                <ClientOnly>
+                  <VAStatusBadge label="Success" status="success" variant="solid" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Warning" status="warning" variant="solid" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Error" status="error" variant="solid" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Info" status="info" variant="solid" />
+                </ClientOnly>
+              </div>
+            </div>
+            <div>
+              <p class="text-sm font-semibold mb-3">Outline Variant</p>
+              <div class="flex flex-wrap gap-3">
+                <ClientOnly>
+                  <VAStatusBadge label="Success" status="success" variant="outline" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Warning" status="warning" variant="outline" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Error" status="error" variant="outline" />
+                </ClientOnly>
+                <ClientOnly>
+                  <VAStatusBadge label="Info" status="info" variant="outline" />
+                </ClientOnly>
+              </div>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VACardLegacy Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VACardLegacy</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Legacy card component with classic styling and layout.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Legacy Card Variants</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <ClientOnly>
+              <VACardLegacy title="Default Legacy Card" subtitle="Classic card styling">
+                <p class="text-gray-600 dark:text-gray-400">This is a legacy card component with traditional design patterns.</p>
+              </VACardLegacy>
+            </ClientOnly>
+            <ClientOnly>
+              <VACardLegacy title="Elevated Legacy Card" subtitle="With shadow effect" variant="elevated">
+                <p class="text-gray-600 dark:text-gray-400">Legacy card with elevated styling and shadow effects.</p>
+              </VACardLegacy>
+            </ClientOnly>
+            <ClientOnly>
+              <VACardLegacy title="Outlined Legacy Card" subtitle="Border only" variant="outlined">
+                <p class="text-gray-600 dark:text-gray-400">Legacy card with outline variant for minimal styling.</p>
+              </VACardLegacy>
+            </ClientOnly>
+            <ClientOnly>
+              <VACardLegacy title="Glass Legacy Card" subtitle="Frosted effect" variant="glass">
+                <p class="text-gray-600 dark:text-gray-400">Legacy card with glass morphism effect and backdrop blur.</p>
+              </VACardLegacy>
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>

package/app/pages/playground/blocks.vue

@@ -0,0 +1,108 @@
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+        <h1 class="text-3xl font-bold mb-4">Block Components Showcase</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-8">
+          Block components are larger, composite components that combine multiple elements into organized layouts.
+        </p>
+
+        <!-- VaBlockKpiGrid Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockKpiGrid</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">KPI grid layout block displaying key performance indicators.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">KPI Grid Layout</h3>
+            </template>
+            <ClientOnly>
+              <VaBlockKpiGrid :items="kpiGridItems" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaBlockSessionFilterBar Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockSessionFilterBar</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Session filter bar for filtering data by date range, status, and category.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Session Filter Bar</h3>
+            </template>
+            <ClientOnly>
+              <VaBlockSessionFilterBar
+                :filters="mockFilters"
+                @update:filters="handleFilterUpdate"
+              />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaBlockGridKPI Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridKPI</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">KPI cards grid layout block with sales, revenue, and returns data.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">KPI Cards Grid</h3>
+            </template>
+            <ClientOnly>
+              <VaBlockGridKPI />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaBlockGridCharts Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridCharts</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Charts grid layout block with revenue bar chart and donut chart visualization.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Charts Grid Layout</h3>
+            </template>
+            <ClientOnly>
+              <VaBlockGridCharts :child-order="[0, 1]" />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+        <!-- VaBlockGridTables Section -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridTables</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Tables grid layout block with latest orders and popular products data.</p>
+        <div class="mb-8">
+          <UCard>
+            <template #header>
+              <h3 class="font-semibold">Tables Grid Layout</h3>
+            </template>
+            <ClientOnly>
+              <VaBlockGridTables :child-order="[0, 1]" />
+            </ClientOnly>
+          </UCard>
+        </div>
+      </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  title: 'Block Components'
+})
+
+const kpiGridItems = [
+  { label: 'Total Sales', value: 45231, unit: 'USD' },
+  { label: 'New Customers', value: 234, unit: '' },
+  { label: 'Conversion Rate', value: 3.45, unit: '%' },
+  { label: 'Avg Session', value: 4.2, unit: 'min' }
+]
+
+const mockFilters = {
+  dateRange: { start: '2024-01-01', end: '2024-01-31' },
+  status: 'all',
+  category: 'all'
+}
+
+const handleFilterUpdate = (filters: any) => {
+  console.log('Filters updated:', filters)
+}
+</script>