@veristone/nuxt-v-app 0.2.7 → 0.2.9

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/V/A/Card/index.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+/**
+ * VACard - Veristone Card
+ * Matches XACard API exactly.
+ */
+const props = withDefaults(
+	defineProps<{
+		title?: string;
+		description?: string;
+		icon?: string;
+		collapsible?: boolean;
+		collapsed?: boolean;
+		padding?: boolean;
+		divider?: boolean;
+		variant?: "default" | "error" | "warning" | "success";
+	}>(),
+	{
+		title: "",
+		description: "",
+		icon: "",
+		collapsible: false,
+		collapsed: false,
+		padding: true,
+		divider: true,
+		variant: "default",
+	}
+);
+
+const isCollapsed = ref(props.collapsed);
+watch(
+	() => props.collapsed,
+	(val) => (isCollapsed.value = val)
+);
+
+const toggleCollapse = () => {
+	if (props.collapsible) isCollapsed.value = !isCollapsed.value;
+};
+
+const variantClass = computed(() => {
+	switch (props.variant) {
+		case "error":
+			return "border-red-200 dark:border-red-900 bg-red-50/50 dark:bg-red-900/10";
+		case "warning":
+			return "border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-900/10";
+		case "success":
+			return "border-green-200 dark:border-green-900 bg-green-50/50 dark:bg-green-900/10";
+		default:
+			return "border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900";
+	}
+});
+</script>
+
+<template>
+	<div
+		class="va-card rounded-xl border transition-all duration-200 shadow-[0_2px_9px_rgba(0,0,0,0.08)] hover:shadow-[0_4px_12px_rgba(61,113,136,0.12)]"
+		:class="variantClass"
+	>
+		<!-- Header -->
+		<div
+			v-if="title || $slots['header-actions'] || icon"
+			class="flex items-center justify-between"
+			:class="[
+				padding ? 'px-5 py-4' : 'px-4 py-3',
+				divider && !isCollapsed
+					? 'border-b border-gray-100 dark:border-gray-800'
+					: '',
+			]"
+		>
+			<div class="flex items-center gap-3 overflow-hidden">
+				<slot name="header">
+					<div
+						v-if="icon"
+						class="flex-shrink-0 p-1.5 rounded-md bg-gray-100 dark:bg-gray-800 text-gray-500"
+					>
+						<UIcon :name="icon" class="w-5 h-5" />
+					</div>
+					<div class="min-w-0">
+						<div class="flex items-center gap-2">
+							<h3
+								class="font-bold text-gray-900 dark:text-white truncate text-base"
+							>
+								{{ title }}
+							</h3>
+
+							<button
+								v-if="collapsible"
+								@click="toggleCollapse"
+								class="ml-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors focus:outline-none"
+							>
+								<UIcon
+									name="i-lucide-chevron-down"
+									class="w-4 h-4 transition-transform duration-300"
+									:class="{ '-rotate-180': !isCollapsed }"
+								/>
+							</button>
+						</div>
+						<p
+							v-if="description"
+							class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5 font-medium"
+						>
+							{{ description }}
+						</p>
+					</div>
+				</slot>
+			</div>
+
+			<!-- XACard uses 'header-actions' slot -->
+			<div
+				v-if="$slots['header-actions']"
+				class="flex-shrink-0 flex items-center gap-2 ml-4"
+			>
+				<slot name="header-actions" />
+			</div>
+		</div>
+
+		<!-- Body -->
+		<div v-show="!isCollapsed" class="transition-all duration-300 ease-in-out">
+			<div :class="{ 'p-5': padding, 'p-0': !padding }">
+				<slot />
+			</div>
+
+			<!-- Footer -->
+			<div
+				v-if="$slots.footer"
+				class="bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800"
+				:class="padding ? 'px-5 py-3' : 'px-4 py-2'"
+			>
+				<slot name="footer" />
+			</div>
+		</div>
+	</div>
+</template>

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/Dashboard/PricePlan.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+interface Feature {
+	label: string;
+	available: boolean;
+}
+
+export interface PricePlanProps {
+	name: string;
+	description: string;
+	price: string;
+	priceSuffix?: string;
+	per?: string;
+	features: Feature[];
+	current?: boolean;
+	badge?: string;
+	buttonLabel?: string;
+}
+
+defineProps<PricePlanProps>();
+</script>
+
+<template>
+	<UCard
+		:class="[
+			'relative transition-all duration-200',
+			current ? 'ring-2 ring-success bg-success/5' : ' ',
+		]"
+	>
+		<div v-if="badge" class="absolute -top-3 left-1/2 -translate-x-1/2">
+			<UBadge :label="badge" variant="solid" color="success" size="sm" />
+		</div>
+
+		<div class="text-center">
+			<div>
+				<h3 class="text-xl font-bold text-highlighted">
+					{{ name }}
+				</h3>
+				<p class="text-dimmed mt-1">
+					{{ description }}
+				</p>
+			</div>
+
+			<div class="border-y border-default my-4 py-4">
+				<div class="mb-4">
+					<div class="text-3xl font-bold text-success space-x-2">
+						<span>{{ price }}</span>
+						<span v-if="priceSuffix" class="text-base text-toned">{{
+							priceSuffix
+						}}</span>
+					</div>
+					<div v-if="per" class="text-sm text-muted">
+						{{ per }}
+					</div>
+				</div>
+
+				<UButton
+					:label="buttonLabel"
+					:variant="current ? 'outline' : 'solid'"
+					:color="current ? 'success' : 'success'"
+					class="w-full justify-center"
+					:disabled="current"
+					:icon="current ? 'i-lucide-check' : 'i-lucide-arrow-up-right'"
+				/>
+			</div>
+
+			<div class="space-y-4 mt-8">
+				<div
+					v-for="(feature, i) in features"
+					:key="i"
+					class="flex items-center justify-start gap-2 text-sm"
+				>
+					<UIcon
+						:name="feature.available ? 'i-lucide-check' : 'i-lucide-x'"
+						:class="feature.available ? 'text-success' : 'text-error'"
+						size="16"
+					/>
+					<span
+						:class="{
+							'text-dimmed': !feature.available,
+						}"
+						>{{ feature.label }}</span
+					>
+				</div>
+			</div>
+		</div>
+	</UCard>
+</template>

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

@@ -59,6 +59,8 @@
 							class="w-40"
 						/>
 					</template>
+
+					<slot name="toolbar-left" />
 				</div>
 
 				<div class="flex items-center gap-2">
@@ -120,7 +122,7 @@
 				}"
 				empty="Nothing to show."
 				v-bind="$attrs"
-				@row-click="handleRowClick"
+				:on-select="props.onRowClick ? (_e: any, row: any) => handleRowClick(row) : undefined"
 			>
 				<template v-for="slotEntry in forwardedSlots" :key="slotEntry.target" #[slotEntry.target]="slotProps">
 					<slot :name="slotEntry.source" v-bind="slotProps" />
@@ -163,40 +165,50 @@
 	</UCard>
 </template>
 
-<script setup lang="ts">
-import { getPaginationRowModel } from "@tanstack/vue-table";
-import type { TableColumn, DropdownMenuItem } from "@nuxt/ui";
-import type { SortingState } from "@tanstack/vue-table";
-import { h, resolveComponent, useSlots } from 'vue';
-import CellRenderer from './CellRenderer.vue';
-import FilterChips from './FilterChips.vue';
-
-type FilterDefinition = {
-	label: string;
-	key: string;
-	options: { label: string; value: string }[];
-};
-
-const props = withDefaults(defineProps<{
-	name?: string;
-	data: unknown[];
-	columns: TableColumn<unknown>[];
-	loading?: boolean;
-	initialPageLimit?: number;
-	selectable?: boolean;
-	showSearch?: boolean;
-	filters?: FilterDefinition[];
-	onRefresh?: () => void | Promise<void>;
-	onRowClick?: (row: unknown) => void;
-	defaultSort?: string;
-	defaultSortDesc?: boolean;
-	manualPagination?: boolean;
-	total?: number;
-}>(), {
-	selectable: false,
-	showSearch: false,
-	manualPagination: false,
-});
+/**
+ * VATable - Veristone data table component built on Nuxt UI's UTable + TanStack Table.
+ *
+ * @props
+ *   name             - Optional card header title
+ *   data             - Row data array
+ *   columns          - TanStack TableColumn definitions; supports `meta.preset` for cell rendering
+ *   loading          - Shows skeleton on initial load; shows inline spinner on subsequent refreshes
+ *   initialPageLimit - Default page size (default: 10)
+ *   selectable       - Enables row checkboxes; exposes `selectedRows` via template ref
+ *   showSearch       - Renders a global search input in the toolbar
+ *   filters          - Array of { key, label, options } for toolbar USelect dropdowns
+ *   onRefresh        - Async callback; shows a refresh spinner button in the toolbar
+ *   onRowClick       - Called with the row's original data when a row is clicked
+ *   defaultSort      - Column key to sort by on mount
+ *   defaultSortDesc  - Sort descending when defaultSort is set (default: false)
+ *   manualPagination - Enables server-side pagination mode
+ *   total            - Total row count for server-side pagination
+ *
+ * @models (v-model)
+ *   sorting          - SortingState — sync sort state with parent
+ *   filterValues     - Record<string, unknown> — sync active filter values with parent
+ *   globalFilter     - string — sync search input value with parent
+ *   page             - number (1-based) — current page in manual pagination mode
+ *   itemsPerPage     - number — page size in manual pagination mode
+ *
+ * @slots
+ *   header-right     - Content rendered on the right side of the card header
+ *   toolbar-left     - Custom controls (e.g. filter selects) injected into the toolbar
+ *                      next to the search input and built-in filter dropdowns
+ *                      Example:
+ *                        <template #toolbar-left>
+ *                          <USelect v-model="status" :items="opts" placeholder="Status" size="sm" />
+ *                        </template>
+ *   bulk-actions     - Shown in the toolbar when rows are selected; receives
+ *                      { selected, count, clear }
+ *   actions-cell     - Renders an "Actions" column; receives { row }
+ *   [column]-cell    - Override cell rendering for a specific column by accessor key
+ *
+ * @exposes
+ *   selectedRows     - Array of selected row originals
+ *   rowSelection     - Raw TanStack row selection state
+ *   clearSelection   - Clears the current row selection
+ */
 
 // Sorting state - v-model support
 const sorting = defineModel<SortingState>("sorting", {
@@ -472,7 +484,7 @@ const tableColumns = computed(() => {
 
 const forwardedSlots = computed(() => {
 	const passthrough = Object.keys(slots).filter((name) => {
-		return !['default', 'header-right', 'bulk-actions'].includes(name);
+		return !['default', 'header-right', 'bulk-actions', 'toolbar-left'].includes(name);
 	});
 
 	return passthrough.map((source) => {

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>