@veristone/nuxt-v-app 0.2.7 → 0.2.9

package/app/pages/playground/cards.vue

@@ -73,8 +73,8 @@ const handleClick = () => {
           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>
+        <!-- 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>
@@ -82,7 +82,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Header Example</h3>
             </template>
             <ClientOnly>
-              <VaCardHeader
+              <VACardHeader
                 title="Card Header"
                 subtitle="With subtitle text"
                 icon="i-heroicons-chart-bar"
@@ -91,8 +91,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardTitle Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardTitle</h2>
+        <!-- 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>
@@ -100,13 +100,13 @@ const handleClick = () => {
               <h3 class="font-semibold">Title Example</h3>
             </template>
             <ClientOnly>
-              <VaCardTitle title="Card Title Component" />
+              <VACardTitle title="Card Title Component" />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaCardSubtitle Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardSubtitle</h2>
+        <!-- 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>
@@ -114,13 +114,13 @@ const handleClick = () => {
               <h3 class="font-semibold">Subtitle Example</h3>
             </template>
             <ClientOnly>
-              <VaCardSubtitle subtitle="This is a card subtitle component" />
+              <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>
+        <!-- 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>
@@ -128,7 +128,7 @@ const handleClick = () => {
               <h3 class="font-semibold">KPI Example</h3>
             </template>
             <ClientOnly>
-              <VaCardKpi
+              <VACardKpi
                 title="Total Revenue"
                 :value="45231"
                 :change="12.5"
@@ -139,8 +139,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardKpi2 Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardKpi2</h2>
+        <!-- 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>
@@ -148,7 +148,7 @@ const handleClick = () => {
               <h3 class="font-semibold">KPI2 Example</h3>
             </template>
             <ClientOnly>
-              <VaCardKpi2
+              <VACardKpi2
                 title="Active Users"
                 :value="8432"
                 :change="-3.2"
@@ -159,8 +159,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardWithIndicator Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithIndicator</h2>
+        <!-- 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>
@@ -168,7 +168,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Indicator Example</h3>
             </template>
             <ClientOnly>
-              <VaCardWithIndicator
+              <VACardWithIndicator
                 title="Status"
                 value="Active"
                 indicator="success"
@@ -177,8 +177,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardWithProgressCircle Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithProgressCircle</h2>
+        <!-- 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>
@@ -186,7 +186,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Progress Circle Example</h3>
             </template>
             <ClientOnly>
-              <VaCardWithProgressCircle
+              <VACardWithProgressCircle
                 title="Completion"
                 :progress="75"
                 :total="100"
@@ -195,8 +195,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardWithChart Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithChart</h2>
+        <!-- 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>
@@ -204,7 +204,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Chart Example</h3>
             </template>
             <ClientOnly>
-              <VaCardWithChart
+              <VACardWithChart
                 name="User Growth"
                 value="582"
               />
@@ -212,8 +212,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardWithChartBlock Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithChartBlock</h2>
+        <!-- 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>
@@ -221,20 +221,20 @@ const handleClick = () => {
               <h3 class="font-semibold">Chart Block Example</h3>
             </template>
             <ClientOnly>
-              <VaCardWithChartBlock
+              <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>
+              </VACardWithChartBlock>
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaCardWithActiveUsers Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardWithActiveUsers</h2>
+        <!-- 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>
@@ -243,7 +243,7 @@ const handleClick = () => {
             </template>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
               <ClientOnly v-for="user in activeUsers" :key="user.metric">
-                <VaCardWithActiveUsers
+                <VACardWithActiveUsers
                   :metric="user.metric"
                   :current="user.current"
                   :percent-change="user.percentChange"
@@ -253,8 +253,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardDonutChart Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardDonutChart</h2>
+        <!-- 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>
@@ -262,7 +262,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Donut Chart Example</h3>
             </template>
             <ClientOnly>
-              <VaCardDonutChart
+              <VACardDonutChart
                 :data="donutChartData"
                 title="Traffic Sources"
                 total-value="100%"
@@ -271,8 +271,8 @@ const handleClick = () => {
           </UCard>
         </div>
 
-        <!-- VaCardLatestOrders Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardLatestOrders</h2>
+        <!-- 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>
@@ -280,13 +280,13 @@ const handleClick = () => {
               <h3 class="font-semibold">Orders Table Example</h3>
             </template>
             <ClientOnly>
-              <VaCardLatestOrders :orders="orders" />
+              <VACardLatestOrders :orders="orders" />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaCardPopularProducts Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardPopularProducts</h2>
+        <!-- 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>
@@ -294,13 +294,13 @@ const handleClick = () => {
               <h3 class="font-semibold">Products Table Example</h3>
             </template>
             <ClientOnly>
-              <VaCardPopularProducts :products="products" />
+              <VACardPopularProducts :products="products" />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaCardRevenueBarChart Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaCardRevenueBarChart</h2>
+        <!-- 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>
@@ -308,7 +308,7 @@ const handleClick = () => {
               <h3 class="font-semibold">Revenue Bar Chart Example</h3>
             </template>
             <ClientOnly>
-              <VaCardRevenueBarChart
+              <VACardRevenueBarChart
                 title="Revenue vs Expenses"
                 total-value="$328,000"
                 :data="revenueData"

package/app/pages/playground/charts.vue

@@ -13,55 +13,55 @@
       <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>
+              <h3 class="text-sm font-semibold">VAChartAreaMini</h3>
             </template>
             <ClientOnly>
-              <VaChartAreaMini />
+              <VAChartAreaMini />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartBarMini</h3>
+              <h3 class="text-sm font-semibold">VAChartBarMini</h3>
             </template>
             <ClientOnly>
-              <VaChartBarMini />
+              <VAChartBarMini />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartLineMini</h3>
+              <h3 class="text-sm font-semibold">VAChartLineMini</h3>
             </template>
             <ClientOnly>
-              <VaChartLineMini />
+              <VAChartLineMini />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartDonutMini</h3>
+              <h3 class="text-sm font-semibold">VAChartDonutMini</h3>
             </template>
             <ClientOnly>
-              <VaChartDonutMini />
+              <VAChartDonutMini />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartDonutHalf</h3>
+              <h3 class="text-sm font-semibold">VAChartDonutHalf</h3>
             </template>
             <ClientOnly>
-              <VaChartDonutHalf />
+              <VAChartDonutHalf />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartStepMinimal</h3>
+              <h3 class="text-sm font-semibold">VAChartStepMinimal</h3>
             </template>
             <ClientOnly>
-              <VaChartStepMinimal />
+              <VAChartStepMinimal />
             </ClientOnly>
           </UCard>
         </div>
@@ -72,73 +72,73 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartRevenue</h3>
+              <h3 class="text-sm font-semibold">VAChartRevenue</h3>
             </template>
             <ClientOnly>
-              <VaChartRevenue />
+              <VAChartRevenue />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartRevenueLine</h3>
+              <h3 class="text-sm font-semibold">VAChartRevenueLine</h3>
             </template>
             <ClientOnly>
-              <VaChartRevenueLine />
+              <VAChartRevenueLine />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartRevenuevsCost</h3>
+              <h3 class="text-sm font-semibold">VAChartRevenuevsCost</h3>
             </template>
             <ClientOnly>
-              <VaChartRevenuevsCost />
+              <VAChartRevenuevsCost />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartFinanceSummary</h3>
+              <h3 class="text-sm font-semibold">VAChartFinanceSummary</h3>
             </template>
             <ClientOnly>
-              <VaChartFinanceSummary />
+              <VAChartFinanceSummary />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartExpensesBar</h3>
+              <h3 class="text-sm font-semibold">VAChartExpensesBar</h3>
             </template>
             <ClientOnly>
-              <VaChartExpensesBar />
+              <VAChartExpensesBar />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartIncomeBar</h3>
+              <h3 class="text-sm font-semibold">VAChartIncomeBar</h3>
             </template>
             <ClientOnly>
-              <VaChartIncomeBar />
+              <VAChartIncomeBar />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartSpendingTrend</h3>
+              <h3 class="text-sm font-semibold">VAChartSpendingTrend</h3>
             </template>
             <ClientOnly>
-              <VaChartSpendingTrend />
+              <VAChartSpendingTrend />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartColorBarChart</h3>
+              <h3 class="text-sm font-semibold">VAChartColorBarChart</h3>
             </template>
             <ClientOnly>
-              <VaChartColorBarChart />
+              <VAChartColorBarChart />
             </ClientOnly>
           </UCard>
         </div>
@@ -149,64 +149,64 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartAppPerformanceBar</h3>
+              <h3 class="text-sm font-semibold">VAChartAppPerformanceBar</h3>
             </template>
             <ClientOnly>
-              <VaChartAppPerformanceBar />
+              <VAChartAppPerformanceBar />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartAppPerformanceBarChart</h3>
+              <h3 class="text-sm font-semibold">VAChartAppPerformanceBarChart</h3>
             </template>
             <ClientOnly>
-              <VaChartAppPerformanceBarChart />
+              <VAChartAppPerformanceBarChart />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartWebPerformanceLineChart</h3>
+              <h3 class="text-sm font-semibold">VAChartWebPerformanceLineChart</h3>
             </template>
             <ClientOnly>
-              <VaChartWebPerformanceLineChart />
+              <VAChartWebPerformanceLineChart />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartTrafficOverview</h3>
+              <h3 class="text-sm font-semibold">VAChartTrafficOverview</h3>
             </template>
             <ClientOnly>
-              <VaChartTrafficOverview />
+              <VAChartTrafficOverview />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartRealtimeTraffic</h3>
+              <h3 class="text-sm font-semibold">VAChartRealtimeTraffic</h3>
             </template>
             <ClientOnly>
-              <VaChartRealtimeTraffic />
+              <VAChartRealtimeTraffic />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartGoogleSearchConsole</h3>
+              <h3 class="text-sm font-semibold">VAChartGoogleSearchConsole</h3>
             </template>
             <ClientOnly>
-              <VaChartGoogleSearchConsole />
+              <VAChartGoogleSearchConsole />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartSearchIntent</h3>
+              <h3 class="text-sm font-semibold">VAChartSearchIntent</h3>
             </template>
             <ClientOnly>
-              <VaChartSearchIntent />
+              <VAChartSearchIntent />
             </ClientOnly>
           </UCard>
         </div>
@@ -217,46 +217,46 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartCardinalMulti</h3>
+              <h3 class="text-sm font-semibold">VAChartCardinalMulti</h3>
             </template>
             <ClientOnly>
-              <VaChartCardinalMulti />
+              <VAChartCardinalMulti />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartStockComparisonLine</h3>
+              <h3 class="text-sm font-semibold">VAChartStockComparisonLine</h3>
             </template>
             <ClientOnly>
-              <VaChartStockComparisonLine />
+              <VAChartStockComparisonLine />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartStocksPortfolioLine</h3>
+              <h3 class="text-sm font-semibold">VAChartStocksPortfolioLine</h3>
             </template>
             <ClientOnly>
-              <VaChartStocksPortfolioLine />
+              <VAChartStocksPortfolioLine />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartStocksSectorLine</h3>
+              <h3 class="text-sm font-semibold">VAChartStocksSectorLine</h3>
             </template>
             <ClientOnly>
-              <VaChartStocksSectorLine />
+              <VAChartStocksSectorLine />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartStackedHorizontal</h3>
+              <h3 class="text-sm font-semibold">VAChartStackedHorizontal</h3>
             </template>
             <ClientOnly>
-              <VaChartStackedHorizontal />
+              <VAChartStackedHorizontal />
             </ClientOnly>
           </UCard>
         </div>
@@ -267,46 +267,46 @@
       <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>
+              <h3 class="text-sm font-semibold">VAChartTasksProgress</h3>
             </template>
             <ClientOnly>
-              <VaChartTasksProgress />
+              <VAChartTasksProgress />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartTasksCategories</h3>
+              <h3 class="text-sm font-semibold">VAChartTasksCategories</h3>
             </template>
             <ClientOnly>
-              <VaChartTasksCategories />
+              <VAChartTasksCategories />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartWinLostBar</h3>
+              <h3 class="text-sm font-semibold">VAChartWinLostBar</h3>
             </template>
             <ClientOnly>
-              <VaChartWinLostBar />
+              <VAChartWinLostBar />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartWinLostDonut</h3>
+              <h3 class="text-sm font-semibold">VAChartWinLostDonut</h3>
             </template>
             <ClientOnly>
-              <VaChartWinLostDonut />
+              <VAChartWinLostDonut />
             </ClientOnly>
           </UCard>
 
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartWinLostLine</h3>
+              <h3 class="text-sm font-semibold">VAChartWinLostLine</h3>
             </template>
             <ClientOnly>
-              <VaChartWinLostLine />
+              <VAChartWinLostLine />
             </ClientOnly>
           </UCard>
         </div>
@@ -317,10 +317,10 @@
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
           <UCard>
             <template #header>
-              <h3 class="text-sm font-semibold">VaChartLegend</h3>
+              <h3 class="text-sm font-semibold">VAChartLegend</h3>
             </template>
             <ClientOnly>
-              <VaChartLegend :items="legendItems" />
+              <VAChartLegend :items="legendItems" />
             </ClientOnly>
            </UCard>
          </div>