@veristone/nuxt-v-app 0.2.8 → 0.2.10

package/app/components/{Va/Blocks/VaBlockGridCharts.vue → V/A/Block/GridCharts.vue}

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RevenueData, RevenueCategoriesMultiple, xFormatter, yFormatter, DonutData } from '~/data/dashboardData';
-import { computed } from 'vue';
 
 const props = defineProps<{ childOrder: [0 | 1, 0 | 1] }>();
 
@@ -11,7 +10,7 @@ const flexDirection = computed(() =>
 <template>
   <div :class="`flex flex-col ${flexDirection} w-full px-4 md:px-8 mb-6 gap-6`">
     <div class="w-full md:w-8/12">
-      <VaCardsRevenueBarChartCard
+      <VACardRevenueBarChart
         title="Revenue"
         total-value="$4589.00"
         :data="RevenueData"
@@ -22,7 +21,7 @@ const flexDirection = computed(() =>
       />
     </div>
     <div class="w-full md:w-4/12 relative">
-      <VaCardsDonutChartCard
+      <VACardDonutChart
         title="Revenue"
         total-value="$4589.00"
         :data="DonutData"

package/app/components/{Va/Blocks/VaBlockGridKPI.vue → V/A/Block/GridKPI.vue}

@@ -5,7 +5,7 @@ import { SalesData, RevenueDataCard, ReturnsData } from '~/data/dashboardData';
 <template>
   <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-6 w-full px-4 md:px-8 mb-6">
     <div class="w-full md:col-span-1 xl:col-span-2">
-      <VaCardsSalesCard
+      <VACardSalesCard
         title="Sales"
         value="1,245"
         :chart-data="SalesData.chartData"
@@ -13,7 +13,7 @@ import { SalesData, RevenueDataCard, ReturnsData } from '~/data/dashboardData';
       />
     </div>
     <div class="w-full md:col-span-1 xl:col-span-2">
-      <VaCardsRevenueCard
+      <VACardRevenueCard
         title="Revenue"
         value="$58,981.00"
         :chart-data="RevenueDataCard.chartData"
@@ -21,7 +21,7 @@ import { SalesData, RevenueDataCard, ReturnsData } from '~/data/dashboardData';
       />
     </div>
     <div class="w-full md:col-span-2">
-      <VaCardsReturnsCard
+      <VACardReturnsCard
         title="Returns"
         value="32"
         :chart-data="ReturnsData.chartData"

package/app/components/{Va/Blocks/VaBlockGridTables.vue → V/A/Block/GridTables.vue}

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import VaCardsLatestOrdersCard from '../Cards/VaCardsLatestOrdersCard.vue';
-import VaCardsPopularProductsCard from '../Cards/VaCardsPopularProductsCard.vue';
+import VACardLatestOrders from '../Card/LatestOrders.vue';
+import VACardPopularProducts from '../Card/PopularProducts.vue';
 import { orders, products } from '~/data/dashboardData';
 
 defineProps<{ childOrder: [0 | 1, 0 | 1] }>();
 
-const cardComponents = [VaCardsLatestOrdersCard, VaCardsPopularProductsCard] as const;
+const cardComponents = [VACardLatestOrders, VACardPopularProducts] as const;
 </script>
 <template>
   <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-6 w-full px-4 md:px-8 mb-6">

package/app/components/{Va/Cards/VaCardWithActiveUsers.vue → V/A/Card/WithActiveUsers.vue}

@@ -9,16 +9,16 @@ defineProps<{
 <template>
   <UCard>
     <div class="space-y-2">
-      <VaCardSubtitle>
+      <VACardSubtitle>
         {{ metric }}
-      </VaCardSubtitle>
+      </VACardSubtitle>
 
       <div class="flex items-center justify-start gap-4">
-        <VaCardTitle>
+        <VACardTitle>
           {{ current }}
-        </VaCardTitle>
+        </VACardTitle>
 
-        <div class="flex items-center flex-col items-start text-sm">
+        <div class="flex flex-col items-start text-sm">
           <div class="flex items-center gap-1">
             <UIcon
               :name="

package/app/components/{Va/Cards/VaCardWithChart.vue → V/A/Card/WithChart.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { BulletLegendItemInterface, ChartData } from './types'
+import type { BulletLegendItemInterface, ChartData } from './card-types'
 
 defineProps<{
   name: string
@@ -91,10 +91,10 @@ const data: ChartData[] = [
 
 <template>
   <UCard>
-    <VaCardHeader>
-      <VaCardSubtitle>
+    <VACardHeader>
+      <VACardSubtitle>
         {{ name }}
-      </VaCardSubtitle>
+      </VACardSubtitle>
       <template #action>
         <UButton
           icon="i-lucide-ellipsis-vertical"
@@ -102,11 +102,11 @@ const data: ChartData[] = [
           variant="subtle"
         />
       </template>
-    </VaCardHeader>
+    </VACardHeader>
     <div class="space-y-2">
-      <VaCardTitle>
+      <VACardTitle>
         {{ value }}
-      </VaCardTitle>
+      </VACardTitle>
       <h5 class="text-sm text-muted">
         {{ name }}
       </h5>

package/app/components/{Va/Charts/VaChartAreaMini.vue → V/A/Chart/AreaMini.vue}

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SpendingData, BulletLegendItemInterface } from './types'
+import type { SpendingData, BulletLegendItemInterface } from './chart-types'
 
 const chartData = ref<SpendingData[]>([
   {
@@ -70,7 +70,7 @@ const categories: Record<string, BulletLegendItemInterface> = {
     color: '#22c55e'
   },
   previous: {
-    name: 'Last YHear',
+    name: 'Last Year',
     color: '#00BCFF'
   }
 }

package/app/components/V/A/Table/index.vue

@@ -165,6 +165,7 @@
 	</UCard>
 </template>
 
+<script setup lang="ts">
 /**
  * VATable - Veristone data table component built on Nuxt UI's UTable + TanStack Table.
  *

package/app/layouts/default.vue

@@ -134,7 +134,7 @@ const groups = computed(() => [
       </template>
 
       <template #default="{ collapsed }">
-        <VaLayoutSideNav :items="links[0]!" :collapsed="collapsed" />
+        <VALayoutSideNav :items="links[0]!" :collapsed="collapsed" />
 
         <!-- Accounts section commented out - requires /analytics.svg asset
         <div class="space-y-1 mt-4">
@@ -167,7 +167,7 @@ const groups = computed(() => [
       </template>
 
       <template #footer="{ collapsed }">
-        <VaLayoutUserMenu :collapsed="collapsed" />
+        <VALayoutUserMenu :collapsed="collapsed" />
       </template>
     </UDashboardSidebar>
 
@@ -176,6 +176,6 @@ const groups = computed(() => [
     <div class="flex-1 overflow-y-auto">
       <slot />
     </div>
-    <VaLayoutNotificationsSlideover />
+    <VALayoutNotificationsSlideover />
   </UDashboardGroup>
 </template>

package/app/layouts/legacy.vue

@@ -29,11 +29,11 @@ const links: NavigationMenuItem[][] = [
       :max-size="18"
     >
       <template #header="{ collapsed }">
-        <VaLayoutTeamsMenu :collapsed="collapsed" />
+        <VALayoutTeamsMenu :collapsed="collapsed" />
       </template>
 
       <template #default="{ collapsed }">
-        <VaLayoutSideNav
+        <VALayoutSideNav
           :items="links[0]!"
           :collapsed="collapsed"
         />
@@ -49,13 +49,13 @@ const links: NavigationMenuItem[][] = [
       </template>
 
       <template #footer="{ collapsed }">
-        <VaLayoutUserMenu :collapsed="collapsed" />
+        <VALayoutUserMenu :collapsed="collapsed" />
       </template>
     </UDashboardSidebar>
 
     <slot name="header" />
     <slot name="header-actions" />
     <slot />
-    <VaLayoutNotificationsSlideover />
+    <VALayoutNotificationsSlideover />
   </UDashboardGroup>
 </template>

package/app/pages/playground/blocks.vue

@@ -7,8 +7,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>
+        <!-- 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>
@@ -16,13 +16,13 @@
               <h3 class="font-semibold">KPI Grid Layout</h3>
             </template>
             <ClientOnly>
-              <VaBlockKpiGrid :items="kpiGridItems" />
+              <VABlockKpiGrid :items="kpiGridItems" />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaBlockSessionFilterBar Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockSessionFilterBar</h2>
+        <!-- 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>
@@ -30,7 +30,7 @@
               <h3 class="font-semibold">Session Filter Bar</h3>
             </template>
             <ClientOnly>
-              <VaBlockSessionFilterBar
+              <VABlockSessionFilterBar
                 :filters="mockFilters"
                 @update:filters="handleFilterUpdate"
               />
@@ -38,8 +38,8 @@
           </UCard>
         </div>
 
-        <!-- VaBlockGridKPI Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridKPI</h2>
+        <!-- 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>
@@ -47,13 +47,13 @@
               <h3 class="font-semibold">KPI Cards Grid</h3>
             </template>
             <ClientOnly>
-              <VaBlockGridKPI />
+              <VABlockGridKPI />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaBlockGridCharts Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridCharts</h2>
+        <!-- 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>
@@ -61,13 +61,13 @@
               <h3 class="font-semibold">Charts Grid Layout</h3>
             </template>
             <ClientOnly>
-              <VaBlockGridCharts :child-order="[0, 1]" />
+              <VABlockGridCharts :child-order="[0, 1]" />
             </ClientOnly>
           </UCard>
         </div>
 
-        <!-- VaBlockGridTables Section -->
-        <h2 class="text-2xl font-semibold mb-4 mt-8">VaBlockGridTables</h2>
+        <!-- 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>
@@ -75,7 +75,7 @@
               <h3 class="font-semibold">Tables Grid Layout</h3>
             </template>
             <ClientOnly>
-              <VaBlockGridTables :child-order="[0, 1]" />
+              <VABlockGridTables :child-order="[0, 1]" />
             </ClientOnly>
           </UCard>
         </div>

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"