@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/charts.vue

@@ -0,0 +1,338 @@
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Chart Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        These chart components use embedded demo data. Wrap them in ClientOnly for SSR compatibility.
+      </p>
+
+      <!-- Mini Charts -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Mini Charts</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Compact chart components for dashboards and summaries.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartAreaMini</h3>
+            </template>
+            <ClientOnly>
+              <VaChartAreaMini />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartBarMini</h3>
+            </template>
+            <ClientOnly>
+              <VaChartBarMini />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartLineMini</h3>
+            </template>
+            <ClientOnly>
+              <VaChartLineMini />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartDonutMini</h3>
+            </template>
+            <ClientOnly>
+              <VaChartDonutMini />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartDonutHalf</h3>
+            </template>
+            <ClientOnly>
+              <VaChartDonutHalf />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartStepMinimal</h3>
+            </template>
+            <ClientOnly>
+              <VaChartStepMinimal />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+      <!-- Revenue & Financial Charts -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Revenue & Financial Charts</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Charts for revenue tracking, expenses, and financial analysis.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartRevenue</h3>
+            </template>
+            <ClientOnly>
+              <VaChartRevenue />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartRevenueLine</h3>
+            </template>
+            <ClientOnly>
+              <VaChartRevenueLine />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartRevenuevsCost</h3>
+            </template>
+            <ClientOnly>
+              <VaChartRevenuevsCost />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartFinanceSummary</h3>
+            </template>
+            <ClientOnly>
+              <VaChartFinanceSummary />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartExpensesBar</h3>
+            </template>
+            <ClientOnly>
+              <VaChartExpensesBar />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartIncomeBar</h3>
+            </template>
+            <ClientOnly>
+              <VaChartIncomeBar />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartSpendingTrend</h3>
+            </template>
+            <ClientOnly>
+              <VaChartSpendingTrend />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartColorBarChart</h3>
+            </template>
+            <ClientOnly>
+              <VaChartColorBarChart />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+      <!-- Performance & Analytics Charts -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Performance & Analytics</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Charts for application performance, traffic, and analytics metrics.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartAppPerformanceBar</h3>
+            </template>
+            <ClientOnly>
+              <VaChartAppPerformanceBar />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartAppPerformanceBarChart</h3>
+            </template>
+            <ClientOnly>
+              <VaChartAppPerformanceBarChart />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartWebPerformanceLineChart</h3>
+            </template>
+            <ClientOnly>
+              <VaChartWebPerformanceLineChart />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartTrafficOverview</h3>
+            </template>
+            <ClientOnly>
+              <VaChartTrafficOverview />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartRealtimeTraffic</h3>
+            </template>
+            <ClientOnly>
+              <VaChartRealtimeTraffic />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartGoogleSearchConsole</h3>
+            </template>
+            <ClientOnly>
+              <VaChartGoogleSearchConsole />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartSearchIntent</h3>
+            </template>
+            <ClientOnly>
+              <VaChartSearchIntent />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+      <!-- Stock & Multi-Series Charts -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Stock & Multi-Series</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Charts for stock data, portfolio comparison, and multi-series visualization.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartCardinalMulti</h3>
+            </template>
+            <ClientOnly>
+              <VaChartCardinalMulti />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartStockComparisonLine</h3>
+            </template>
+            <ClientOnly>
+              <VaChartStockComparisonLine />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartStocksPortfolioLine</h3>
+            </template>
+            <ClientOnly>
+              <VaChartStocksPortfolioLine />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartStocksSectorLine</h3>
+            </template>
+            <ClientOnly>
+              <VaChartStocksSectorLine />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartStackedHorizontal</h3>
+            </template>
+            <ClientOnly>
+              <VaChartStackedHorizontal />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+      <!-- Task & Win/Loss Charts -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Tasks & Win/Loss</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Charts for task progress tracking and win/loss analysis.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartTasksProgress</h3>
+            </template>
+            <ClientOnly>
+              <VaChartTasksProgress />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartTasksCategories</h3>
+            </template>
+            <ClientOnly>
+              <VaChartTasksCategories />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartWinLostBar</h3>
+            </template>
+            <ClientOnly>
+              <VaChartWinLostBar />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartWinLostDonut</h3>
+            </template>
+            <ClientOnly>
+              <VaChartWinLostDonut />
+            </ClientOnly>
+          </UCard>
+
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartWinLostLine</h3>
+            </template>
+            <ClientOnly>
+              <VaChartWinLostLine />
+            </ClientOnly>
+          </UCard>
+        </div>
+
+      <!-- Legend Component -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">Chart Utilities</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Utility components for chart legends and additional chart features.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <UCard>
+            <template #header>
+              <h3 class="text-sm font-semibold">VaChartLegend</h3>
+            </template>
+            <ClientOnly>
+              <VaChartLegend :items="legendItems" />
+            </ClientOnly>
+           </UCard>
+         </div>
+     </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+const legendItems = [
+  { name: 'Revenue', color: '#3b82f6' },
+  { name: 'Expenses', color: '#ef4444' },
+  { name: 'Profit', color: '#22c55e' }
+]
+</script>

package/app/pages/playground/dashboard.vue

@@ -0,0 +1,315 @@
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+        <h1 class="text-3xl font-bold mb-4">Dashboard Components Showcase</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-8">
+          Dashboard-specific components for navigation, KPIs, pricing, and usage visualization.
+        </p>
+
+        <!-- VaDashboardNavigation -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaDashboardNavigation</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Navigation component for dashboard sidebars and top menus with icon support.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Standard Navigation</h3>
+          </template>
+          <ClientOnly>
+            <VaDashboardNavigation :sections="mockNavSections" />
+          </ClientOnly>
+        </UCard>
+
+        <!-- VaDashboardKPICard -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaDashboardKPICard</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">KPI cards displaying metrics with trend indicators, icons, and percentage changes.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">KPI Examples</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ClientOnly>
+              <VaDashboardKPICard
+                title="Total Revenue"
+                :value="125000"
+                :change="12.5"
+                trend="up"
+                icon="i-heroicons-currency-dollar"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VaDashboardKPICard
+                title="Active Users"
+                :value="8432"
+                :change="-3.2"
+                trend="down"
+                icon="i-heroicons-users"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VaDashboardKPICard
+                title="Conversion Rate"
+                :value="3.45"
+                :change="0.8"
+                trend="up"
+                icon="i-heroicons-chart-bar"
+                suffix="%"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VaDashboardKPICard
+                title="Avg Order Value"
+                :value="89.50"
+                :change="5.2"
+                trend="up"
+                icon="i-heroicons-shopping-cart"
+                prefix="$"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <!-- VAStatsCard (HubSpot Style) -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VAStatsCard - HubSpot Style</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">HubSpot-style stats cards with accent colors and trend visualization.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Stats Card Variations</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ClientOnly>
+              <VAStatsCard
+                label="Monthly Revenue"
+                :value="58981"
+                :previous-value="52000"
+                format="currency"
+                icon="i-lucide-dollar-sign"
+                accent-color="coral"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="New Signups"
+                :value="1234"
+                :previous-value="1100"
+                icon="i-lucide-user-plus"
+                accent-color="teal"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="Churn Rate"
+                :value="2.1"
+                :previous-value="2.8"
+                format="percentage"
+                icon="i-lucide-trending-down"
+                accent-color="warning"
+                :invert-trend="true"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VAStatsCard
+                label="NPS Score"
+                :value="72"
+                :previous-value="68"
+                icon="i-lucide-star"
+                accent-color="success"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <!-- VaDashboardPricePlan -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaDashboardPricePlan</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Pricing plan cards with features list and call-to-action buttons.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Pricing Tiers</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <ClientOnly>
+              <VaDashboardPricePlan
+                name="Starter"
+                :price="9.99"
+                period="month"
+                :features="starterFeatures"
+                buttonText="Get Started"
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VaDashboardPricePlan
+                name="Pro"
+                :price="29.99"
+                period="month"
+                :features="proFeatures"
+                buttonText="Upgrade to Pro"
+                highlighted
+              />
+            </ClientOnly>
+
+            <ClientOnly>
+              <VaDashboardPricePlan
+                name="Enterprise"
+                :price="99.99"
+                period="month"
+                :features="enterpriseFeatures"
+                buttonText="Contact Sales"
+              />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <!-- VaDashboardUsageChart -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaDashboardUsageChart</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Usage chart showing current consumption against limits.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">API Usage Example</h3>
+          </template>
+          <ClientOnly>
+            <VaDashboardUsageChart
+              title="API Usage"
+              :data="mockUsageData"
+              :limit="10000"
+              :current="7500"
+            />
+          </ClientOnly>
+        </UCard>
+
+        <!-- VaDashboardUsageRequestChart -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaDashboardUsageRequestChart</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Request volume chart showing traffic patterns over time.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Request Volume Example</h3>
+          </template>
+          <ClientOnly>
+            <VaDashboardUsageRequestChart
+              title="Request Volume"
+              :data="mockRequestData"
+              :total="125000"
+            />
+          </ClientOnly>
+        </UCard>
+
+        <!-- Dashboard Layout Example -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">Full Dashboard Layout</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Complete dashboard layout combining multiple components.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Complete Dashboard Example</h3>
+          </template>
+          <div class="space-y-6">
+            <!-- Stats Row -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <ClientOnly>
+                <VAStatsCard
+                  label="Total Sales"
+                  :value="124500"
+                  :previous-value="115000"
+                  format="currency"
+                  icon="i-lucide-shopping-bag"
+                  accent-color="coral"
+                />
+              </ClientOnly>
+              <ClientOnly>
+                <VAStatsCard
+                  label="Orders"
+                  :value="1842"
+                  :previous-value="1650"
+                  icon="i-lucide-package"
+                  accent-color="teal"
+                />
+              </ClientOnly>
+              <ClientOnly>
+                <VAStatsCard
+                  label="Customers"
+                  :value="3421"
+                  :previous-value="3200"
+                  icon="i-lucide-users"
+                  accent-color="navy"
+                />
+              </ClientOnly>
+              <ClientOnly>
+                <VAStatsCard
+                  label="Returns"
+                  :value="23"
+                  :previous-value="31"
+                  icon="i-lucide-undo-2"
+                  accent-color="amber"
+                  :invert-trend="true"
+                />
+              </ClientOnly>
+            </div>
+
+            <!-- Charts Row -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+              <ClientOnly>
+                <VACard title="Revenue Trend" icon="i-lucide-trending-up">
+                  <ClientOnly>
+                    <VaChartRevenueLine />
+                  </ClientOnly>
+                </VACard>
+              </ClientOnly>
+
+              <ClientOnly>
+                <VACard title="Sales Distribution" icon="i-lucide-pie-chart">
+                  <ClientOnly>
+                    <VaChartDonutHalf />
+                  </ClientOnly>
+                </VACard>
+              </ClientOnly>
+            </div>
+          </div>
+        </UCard>
+      </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  title: 'Dashboard Components'
+})
+
+const mockNavSections = [
+  {
+    label: 'Main',
+    children: [
+      { label: 'Dashboard', leadingIcon: 'i-heroicons-home', href: '/dashboard' },
+      { label: 'Analytics', leadingIcon: 'i-heroicons-chart-bar', href: '/analytics' },
+      { label: 'Reports', leadingIcon: 'i-heroicons-document-text', href: '/reports' },
+      { label: 'Settings', leadingIcon: 'i-heroicons-cog', href: '/settings' }
+    ]
+  }
+]
+
+const starterFeatures = ['5 User Accounts', '10 GB Storage', '1,000 API Calls/month', 'Email Support']
+const proFeatures = ['20 User Accounts', '50 GB Storage', '10,000 API Calls/month', 'Priority Support', 'Advanced Analytics']
+const enterpriseFeatures = ['Unlimited Users', 'Custom Storage', 'Unlimited API Calls', '24/7 Dedicated Support', 'Custom Integrations', 'SLA']
+
+const mockUsageData = [
+  { date: '2024-01-01', value: 1200 },
+  { date: '2024-01-02', value: 1500 },
+  { date: '2024-01-03', value: 1800 },
+  { date: '2024-01-04', value: 1600 },
+  { date: '2024-01-05', value: 2100 },
+  { date: '2024-01-06', value: 1900 },
+  { date: '2024-01-07', value: 2300 }
+]
+
+const mockRequestData = [
+  { hour: '00:00', requests: 450 },
+  { hour: '04:00', requests: 320 },
+  { hour: '08:00', requests: 1200 },
+  { hour: '12:00', requests: 1800 },
+  { hour: '16:00', requests: 1500 },
+  { hour: '20:00', requests: 980 }
+]
+</script>