@veristone/nuxt-v-app 0.2.10 → 0.2.14

package/app/components/V/A/Card/DonutChart.vue

@@ -5,11 +5,23 @@ interface DonutChartData {
   color: string;
 }
 
-defineProps<{
+const props = defineProps<{
   data: DonutChartData[];
   title: string;
   totalValue: string;
 }>();
+
+const categories = computed<Record<string, BulletLegendItemInterface>>(() =>
+  Object.fromEntries(
+    props.data.map((item) => [
+      item.name,
+      {
+        name: item.name,
+        color: item.color,
+      },
+    ])
+  )
+);
 </script>
 <template>
   <UCard>
@@ -24,9 +36,9 @@ defineProps<{
     <DonutChart
       :data="data.map((i) => i.value)"
       :height="200"
-      :labels="data"
+      :categories="categories"
       :hide-legend="true"
-      :radius="0"
+      :radius="4"
     >
       <div class="absolute text-center">
         <div class="font-semibold">Categories</div>

package/app/components/V/A/Card/RevenueBarChart.vue

@@ -1,11 +1,4 @@
 <script setup lang="ts">
-const LegendPosition = {
-  Top: "top",
-  Bottom: "bottom",
-  Left: "left",
-  Right: "right",
-};
-
 interface BarChartCategory {
   name: string;
   color: string;
@@ -41,7 +34,7 @@ defineProps<{
       :radius="4"
       :x-formatter="xFormatter"
       :y-formatter="yFormatter"
-      :legend-position="LegendPosition.Bottom"
+      :legend-position="LegendPosition.BottomCenter"
       :hide-legend="false"
       :y-grid-line="false"
     />

package/app/components/V/A/Chart/AppPerformanceBar.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyPerformanceData
 } from '~/data/AppPerformance'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  subscriptions: {
+    name: 'Subscriptions',
+    color: 'var(--color-orange-400)'
+  },
+  downloads: {
+    name: 'Downloads',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const performanceData = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const performanceData = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(performanceData.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/AppPerformanceBarChart.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyPerformanceData
 } from '~/data/AppPerformance'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  subscriptions: {
+    name: 'Subscriptions',
+    color: 'var(--color-orange-400)'
+  },
+  downloads: {
+    name: 'Downloads',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const performanceData = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const performanceData = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(performanceData.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/AreaMini.vue

@@ -91,10 +91,9 @@ const formatCurrency = (value: number) => {
       :data="chartData"
       :height="90"
       :categories="categories"
-      :y-axis="['amount']"
       :y-num-ticks="2"
       :y-grid-line="true"
-      :legend-position="LegendPosition.Bottom"
+      :legend-position="LegendPosition.BottomCenter"
       :hide-y-axis="true"
       :hide-x-axis="true"
       :hide-legend="true"

package/app/components/V/A/Chart/BarMini.vue

@@ -56,7 +56,6 @@ function formatDate(dateString: Date) {
       :height="80"
       :categories="categories"
       :y-axis="['amount']"
-      :curve-type="CurveType.Basis"
       :hide-y-axis="true"
       :x-formatter="(i) => `${chartData[i]?.month}`"
       :min-max-ticks-only="false"

package/app/components/V/A/Chart/ColorBarChart.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  title: string
+const props = withDefaults(defineProps<{
+  title?: string
   color?: string
-}>()
+}>(), {
+  title: 'Performance Metrics',
+  color: 'var(--ui-primary)'
+})
 
 const RevenueData = [
   {
@@ -37,12 +40,12 @@ const RevenueData = [
   }
 ]
 
-const RevenueCategories = {
+const RevenueCategories = computed(() => ({
   desktop: {
     name: 'Desktop',
     color: props.color
   }
-}
+}))
 
 const xFormatter = (i: number): string => `${RevenueData[i]?.month}`
 const yFormatter = (i: number) => i.toString()

package/app/components/V/A/Chart/ExpensesBar.vue

@@ -44,7 +44,7 @@ const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
     :y-axis="['sales' ,'counter']"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :hide-legend="false"
     :y-grid-line="true"
     :x-grid-line="false"

package/app/components/V/A/Chart/FinanceSummary.vue

@@ -28,6 +28,19 @@ const spendingData = ref<SpendingCategory[]>([
   },
 ]);
 
+const spendingCategories = computed<Record<string, BulletLegendItemInterface>>(
+  () =>
+    Object.fromEntries(
+      spendingData.value.map((item) => [
+        item.name,
+        {
+          name: item.name,
+          color: item.color,
+        },
+      ])
+    )
+);
+
 const totalSpent = computed(() =>
   spendingData.value.reduce((sum, item) => sum + item.value, 0)
 );
@@ -49,13 +62,7 @@ const formatCurrency = (amount: number) => {
           :data="spendingData.map((i) => i.value)"
           :height="200"
           :arc-width="10"
-          :labels="
-            spendingData.map((item) => ({
-              name: item.name,
-              color: item.color,
-              percentage: item.value,
-            }))
-          "
+          :categories="spendingCategories"
           :pad-angle="0.1"
           :hide-legend="true"
           :radius="4"

package/app/components/V/A/Chart/GoogleSearchConsole.vue

@@ -83,7 +83,6 @@ const xFormatter = (tick: number, _i?: number, _ticks?: number[]): string => {
       :group-padding="0.2"
       :bar-padding="0.5"
       :y-axis="['clicks', 'impressions', 'averagePosition', 'ctr']"
-      :curve-type="CurveType.Linear"
       :legend-position="LegendPosition.BottomCenter"
     />
   </UCard>

package/app/components/V/A/Chart/Legend.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
-import type { ChartCategories } from '~/types'
+type LegendItem = Pick<BulletLegendItemInterface, 'name' | 'color'>
 
-defineProps<{
-  categories: ChartCategories
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface> | null
+  items?: LegendItem[] | null
 }>()
+
+const legendEntries = computed(() =>
+  props.items?.length ? props.items : Object.values(props.categories ?? {})
+)
+
+const getColor = (color?: string | string[]) =>
+  Array.isArray(color) ? color[0] ?? 'currentColor' : color ?? 'currentColor'
 </script>
 
 <template>
   <div class="flex flex-wrap items-center justify-end gap-x-6 gap-y-2">
     <div
-      v-for="(category, categoryKey) in categories"
-      :key="categoryKey"
+      v-for="(item, index) in legendEntries"
+      :key="`${item.name}-${index}`"
       class="flex items-center gap-2"
     >
       <span
         class="h-2 w-2 rounded-full"
-        :style="{ backgroundColor: category.color }"
+        :style="{ backgroundColor: getColor(item.color) }"
       />
       <span class="text-xs text-(--vis-legend-label-color)">
-        {{ category.name }}
+        {{ item.name }}
       </span>
     </div>
   </div>

package/app/components/V/A/Chart/Revenue.vue

@@ -36,8 +36,8 @@ const yFormatter = (tick: number, _i?: number, _ticks?: number[]) =>
     :y-num-ticks="4"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :hide-legend="true"
     :y-grid-line="true"
   />
-</template>
+</template>

package/app/components/V/A/Chart/RevenueLine.vue

@@ -29,14 +29,14 @@ const yFormatter = (value: number): string => `$${(value / 1000).toFixed(1)}k`;
     :data="chartData"
     :height="180"
     :x-num-ticks="4"
-    :y-num-ticks="3.5"
+    :y-num-ticks="4"
     :categories="categories"
     :x-formatter="xFormatter"
     :y-formatter="yFormatter"
     :curve-type="CurveType.Linear"
-    :legend-position="LegendPosition.Top"
+    :legend-position="LegendPosition.TopCenter"
     :y-grid-line="true"
     :hide-x-axis="true"
     :hide-legend="true"
   />
-</template>
+</template>

package/app/components/V/A/Chart/RevenuevsCost.vue

@@ -70,13 +70,8 @@ const { height } = useResponsiveHeight({
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['Income', 'Expense']"
     :x-formatter="xAxisFormatter"
     :height="height"
-    :stacked="false"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :y-num-ticks="4"

package/app/components/V/A/Chart/SearchIntent.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TabsItem } from '#ui/types'
+import type { TabsItem } from '@nuxt/ui'
 
 const tabItems: TabsItem[] = [
   {

package/app/components/V/A/Chart/SpendingTrend.vue

@@ -105,7 +105,6 @@ const formatCurrency = (value: number) => {
         :data="chartData"
         :height="240"
         :categories="categories"
-        :y-axis="['amount']"
         :y-num-ticks="3"
         :y-grid-line="true"
         :curve-type="CurveType.MonotoneX"

package/app/components/V/A/Chart/StockComparisonLine.vue

@@ -70,12 +70,8 @@ const xAxisFormatter = (tick: number): string => {
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['stockA', 'stockB', 'stockC']"
     :x-formatter="xAxisFormatter"
     :height="220"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :x-domain-line="true"

package/app/components/V/A/Chart/StocksPortfolioLine.vue

@@ -145,13 +145,9 @@ const xAxisFormatter = (tick: number): string => {
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['portfolioValue']"
     :x-formatter="xAxisFormatter"
     :y-formatter="(i: number) => i / 1000 + 'K'"
     :height="220"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :x-domain-line="true"

package/app/components/V/A/Chart/StocksSectorLine.vue

@@ -207,13 +207,9 @@ const xAxisFormatter = (tick: number): string => {
   <LineChart
     :data="chartData"
     :categories="chartCategories"
-    :y-axis="['domestic', 'international']"
     :x-formatter="xAxisFormatter"
     :y-formatter="(i: number) => i / 1000 + 'K'"
     :height="220"
-    :radius="3"
-    :group-padding="0.2"
-    :bar-padding="0.2"
     :x-grid-line="true"
     :y-grid-line="true"
     :x-domain-line="true"

package/app/components/V/A/Chart/TrafficOverview.vue

@@ -67,7 +67,7 @@ const categories: Record<string, Category> = {
 
 const xFormatter = (i: number) => `${engagementData[i]?.date}`
 
-const yFormatter = (value: number) => value + 'K'
+const yFormatter = (value: number) => `${value.toFixed(1)}m`
 </script>
 
 <template>
@@ -95,8 +95,7 @@ const yFormatter = (value: number) => value + 'K'
       :y-num-ticks="3"
       :x-formatter="xFormatter"
       :y-formatter="yFormatter"
-      :y-min="0"
-      :y-max="600000"
+      :y-domain="[0, 8]"
       :x-grid-line="true"
       :legend-position="LegendPosition.BottomCenter"
       :curve-type="CurveType.Linear"

package/app/components/V/A/Chart/WebPerformanceLineChart.vue

@@ -5,10 +5,21 @@ import {
   getMonthlyWebsiteStatistics
 } from '~/data/WebsiteStatistics'
 
-defineProps<{
-  categories: Record<string, BulletLegendItemInterface>
+const props = defineProps<{
+  categories?: Record<string, BulletLegendItemInterface>
 }>()
 
+const defaultCategories: Record<string, BulletLegendItemInterface> = {
+  conversions: {
+    name: 'Conversions',
+    color: 'var(--color-orange-400)'
+  },
+  bounceRate: {
+    name: 'Bounce Rate',
+    color: 'var(--color-lime-400)'
+  }
+}
+
 const isSettingsOpen = ref<boolean>(false)
 
 function toggleSettings() {
@@ -32,6 +43,12 @@ const dataViewOptions = [
 
 const selectedDataView = ref('daily')
 
+const categories = computed(() =>
+  props.categories && Object.keys(props.categories).length > 0
+    ? props.categories
+    : defaultCategories
+)
+
 const WebsiteStatistics = computed(() => {
   switch (selectedDataView.value) {
     case 'weekly':
@@ -46,10 +63,6 @@ const WebsiteStatistics = computed(() => {
 
 const xFormatter = (i: number): string =>
   String(WebsiteStatistics.value[i]?.date ?? '')
-
-function handleDataViewChange(value: string) {
-  console.log('Data view changed to:', value)
-}
 </script>
 
 <template>
@@ -84,7 +97,6 @@ function handleDataViewChange(value: string) {
           :items="dataViewOptions"
           placeholder="Select data view"
           class="w-full focus:ring-0"
-          @update:model-value="handleDataViewChange"
         />
         <UButton
           variant="soft"

package/app/components/V/A/Chart/WinLostDonut.vue

@@ -36,9 +36,22 @@ const winLossData = computed(() => [
   }
 ])
 
+const winLossCategories = computed<Record<string, BulletLegendItemInterface>>(
+  () =>
+    Object.fromEntries(
+      winLossData.value.map(item => [
+        item.name,
+        {
+          name: item.name,
+          color: item.color
+        }
+      ])
+    )
+)
+
 const percentage = computed(() => {
   const total = win.value + loss.value
-  if (total === 0) return '0%'
+  if (total === 0) return 0
   return Math.round((win.value / total) * 100)
 })
 </script>
@@ -56,13 +69,7 @@ const percentage = computed(() => {
             :data="winLossData.map((i) => i.value)"
             :height="160"
             :arc-width="10"
-            :labels="
-              winLossData.map((item) => ({
-                name: item.name,
-                color: item.color,
-                percentage: item.value
-              }))
-            "
+            :categories="winLossCategories"
             :pad-angle="0.1"
             :hide-legend="true"
             :radius="4"

package/app/components/V/A/Chart/WinLostLine.vue

@@ -83,13 +83,8 @@ const xAxisFormatter = (tick: number): string => {
     <LineChart
       :data="chartData"
       :categories="chartCategories"
-      :y-axis="['Income', 'Expense']"
       :x-formatter="xAxisFormatter"
       :height="160"
-      :stacked="false"
-      :radius="3"
-      :group-padding="0.2"
-      :bar-padding="0.2"
       :hide-legend="true"
       :x-grid-line="true"
       :y-grid-line="true"

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

@@ -52,11 +52,12 @@
 						<USelect
 							v-for="filter in props.filters"
 							:key="filter.key"
-							v-model="filterValues[filter.key]"
+							:model-value="(filterValues[filter.key] as string)"
 							:items="filter.options"
 							:placeholder="filter.label"
 							size="sm"
 							class="w-40"
+							@update:model-value="(v: string) => filterValues[filter.key] = v"
 						/>
 					</template>
 
@@ -166,50 +167,44 @@
 </template>
 
 <script setup lang="ts">
-/**
- * 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
- */
+import type { SortingState } from '@tanstack/vue-table'
+import { getPaginationRowModel } from '@tanstack/vue-table'
+import type { TableColumn, DropdownMenuItem } from '@nuxt/ui'
+import CellRenderer from './CellRenderer.vue'
+
+interface FilterOption {
+	key: string
+	label: string
+	options: { label: string; value: string }[]
+}
+
+const props = withDefaults(
+	defineProps<{
+		name?: string
+		data?: Record<string, unknown>[]
+		columns: TableColumn<any>[]
+		loading?: boolean
+		initialPageLimit?: number
+		selectable?: boolean
+		showSearch?: boolean
+		filters?: FilterOption[]
+		onRefresh?: () => Promise<void>
+		onRowClick?: (row: any) => void
+		defaultSort?: string
+		defaultSortDesc?: boolean
+		manualPagination?: boolean
+		total?: number
+	}>(),
+	{
+		data: () => [],
+		loading: false,
+		initialPageLimit: 10,
+		selectable: false,
+		showSearch: true,
+		defaultSortDesc: false,
+		manualPagination: false,
+	}
+)
 
 // Sorting state - v-model support
 const sorting = defineModel<SortingState>("sorting", {
@@ -397,41 +392,40 @@ const tableColumns = computed(() => {
 		'expiresAt', 'completedAt', 'created_at', 'updated_at'
 	]
 
-	const columns = props.columns.map(col => {
-		const hasDataAccessor = Boolean(col.accessorKey || (col as any).accessorFn || (col as any).key);
-		const colDef = {
+	const columns: TableColumn<any>[] = props.columns.map((col) => {
+		const accessorKey = (col as any).accessorKey as string | undefined
+		const hasDataAccessor = Boolean(accessorKey || (col as any).accessorFn || (col as any).key)
+		const colDef: TableColumn<any> = {
 			...col,
 			enableSorting: col.enableSorting ?? hasDataAccessor,
-		};
+		}
 
-		// Auto-detect date columns based on accessorKey
-		const isDateColumn = dateColumnPatterns.includes(col.accessorKey)
+		const isDateColumn = accessorKey ? dateColumnPatterns.includes(accessorKey) : false
 		const hasPreset = col.meta?.preset && col.meta.preset !== 'actions'
 
 		if (hasPreset || isDateColumn) {
-			// Use existing preset or auto-detected date preset
 			const preset = col.meta?.preset || 'date'
 			const format = col.meta?.format || 'relative'
 
-			colDef.cell = ({ row }) => {
-				const value = row?.original?.[col.accessorKey as string];
+			colDef.cell = ({ row }: { row: any }) => {
+				const value = accessorKey ? row?.original?.[accessorKey] : undefined
 				return h(CellRenderer, {
 					value,
 					column: { ...col, meta: { ...col.meta, preset, format } },
 					row: row?.original
-				});
-			};
+				})
+			}
 		}
 
-		return colDef;
-	});
+		return colDef
+	})
 
 	if (props.selectable) {
-		const selectColumn: TableColumn<unknown> = {
+		const selectColumn: TableColumn<any> = {
 			id: 'select',
 			enableSorting: false,
 			enableHiding: false,
-			header: ({ table }) =>
+			header: ({ table }: { table: any }) =>
 				h(UCheckbox, {
 					modelValue: table.getIsSomePageRowsSelected()
 						? 'indeterminate'
@@ -440,7 +434,7 @@ const tableColumns = computed(() => {
 						table.toggleAllPageRowsSelected(!!value),
 					'aria-label': 'Select all rows',
 				}),
-			cell: ({ row }) =>
+			cell: ({ row }: { row: any }) =>
 				h(UCheckbox, {
 					modelValue: row.getIsSelected(),
 					'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
@@ -453,21 +447,20 @@ const tableColumns = computed(() => {
 					td: 'w-10',
 				},
 			},
-		};
+		}
 
-		columns.unshift(selectColumn);
+		columns.unshift(selectColumn)
 	}
 
 	// Add actions column if slot provided AND no actions column already exists
-	if (slots['actions-cell'] && !columns.some(c => c.id === 'actions' || c.accessorKey === 'actions')) {
-		const actionsColumn: TableColumn<unknown> = {
+	if (slots['actions-cell'] && !columns.some((c: any) => c.id === 'actions' || c.accessorKey === 'actions')) {
+		const actionsColumn: TableColumn<any> = {
 			id: 'actions',
 			header: 'Actions',
 			enableSorting: false,
 			enableHiding: false,
-			cell: ({ row }) => {
-				// Render slot content
-				return h('div', {}, slots['actions-cell']?.({ row }));
+			cell: ({ row }: { row: any }) => {
+				return h('div', {}, slots['actions-cell']?.({ row }))
 			},
 			meta: {
 				class: {
@@ -475,9 +468,9 @@ const tableColumns = computed(() => {
 					td: 'text-right',
 				},
 			},
-		};
+		}
 
-		columns.push(actionsColumn);
+		columns.push(actionsColumn)
 	}
 
 	return columns;

package/app/composables/useResponsiveHeight.ts

@@ -0,0 +1,44 @@
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { computed } from 'vue'
+
+interface ResponsiveHeightOptions {
+  default: number
+  sm?: number
+  md?: number
+  lg?: number
+  xl?: number
+  '2xl'?: number
+}
+
+export function useResponsiveHeight(options: ResponsiveHeightOptions) {
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+
+  const height = computed(() => {
+    if (
+      options['2xl'] !== undefined
+      && breakpoints.greaterOrEqual('2xl').value
+    ) {
+      return options['2xl']
+    }
+
+    if (options.xl !== undefined && breakpoints.greaterOrEqual('xl').value) {
+      return options.xl
+    }
+
+    if (options.lg !== undefined && breakpoints.greaterOrEqual('lg').value) {
+      return options.lg
+    }
+
+    if (options.md !== undefined && breakpoints.greaterOrEqual('md').value) {
+      return options.md
+    }
+
+    if (options.sm !== undefined && breakpoints.greaterOrEqual('sm').value) {
+      return options.sm
+    }
+
+    return options.default
+  })
+
+  return { height }
+}

package/app/data/AppPerformance.ts

@@ -0,0 +1,107 @@
+import { computed } from 'vue'
+
+export interface AppPerformanceItem {
+  date: string
+  subscriptions: number
+  downloads: number
+}
+
+const startDate = new Date('2025-01-01T00:00:00Z')
+
+const sourceDailyData: AppPerformanceItem[] = Array.from(
+  { length: 90 },
+  (_, index) => {
+    const date = new Date(startDate)
+    date.setUTCDate(startDate.getUTCDate() + index)
+
+    return {
+      date: date.toISOString().slice(0, 10),
+      subscriptions: Math.max(
+        48,
+        86
+        + Math.round(Math.sin(index / 2.8) * 22)
+        + index
+        + ((index % 6) - 2) * 4
+      ),
+      downloads: Math.max(
+        96,
+        148
+        + Math.round(Math.cos(index / 3.4) * 28)
+        + index * 2
+        + ((index % 5) - 2) * 6
+      )
+    }
+  }
+)
+
+export const getDailyPerformanceData = computed(() => {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+
+  return sourceDailyData.slice(0, 30).map(item => ({
+    ...item,
+    date: formatter.format(new Date(item.date))
+  }))
+})
+
+export const getWeeklyPerformanceData = computed((): AppPerformanceItem[] => {
+  const aggregated = new Map<
+    number,
+    { subscriptions: number, downloads: number }
+  >()
+
+  for (let index = 0; index < sourceDailyData.length; index++) {
+    const item = sourceDailyData[index]
+    if (!item) continue
+
+    const week = Math.floor(index / 7) + 1
+
+    if (!aggregated.has(week)) {
+      aggregated.set(week, {
+        subscriptions: 0,
+        downloads: 0
+      })
+    }
+
+    const current = aggregated.get(week)!
+    current.subscriptions += item.subscriptions
+    current.downloads += item.downloads
+  }
+
+  return Array.from(aggregated.entries()).map(([week, value]) => ({
+    date: `Week ${String(week).padStart(2, '0')}`,
+    subscriptions: value.subscriptions,
+    downloads: value.downloads
+  }))
+})
+
+export const getMonthlyPerformanceData = computed((): AppPerformanceItem[] => {
+  const aggregated = new Map<string, { subscriptions: number, downloads: number }>()
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    year: '2-digit'
+  })
+
+  for (const item of sourceDailyData) {
+    const monthKey = item.date.slice(0, 7)
+
+    if (!aggregated.has(monthKey)) {
+      aggregated.set(monthKey, {
+        subscriptions: 0,
+        downloads: 0
+      })
+    }
+
+    const current = aggregated.get(monthKey)!
+    current.subscriptions += item.subscriptions
+    current.downloads += item.downloads
+  }
+
+  return Array.from(aggregated.entries()).map(([monthKey, value]) => ({
+    date: formatter.format(new Date(`${monthKey}-01`)),
+    subscriptions: value.subscriptions,
+    downloads: value.downloads
+  }))
+})

package/app/data/WebsiteStatistics.ts

@@ -0,0 +1,122 @@
+import { computed } from 'vue'
+
+export interface WebsitePerformanceMetric {
+  date: string
+  bounceRate: number
+  conversions: number
+}
+
+const startDate = new Date('2025-01-01T00:00:00Z')
+
+const sourceDailyData: WebsitePerformanceMetric[] = Array.from(
+  { length: 90 },
+  (_, index) => {
+    const date = new Date(startDate)
+    date.setUTCDate(startDate.getUTCDate() + index)
+
+    return {
+      date: date.toISOString().slice(0, 10),
+      bounceRate: Math.max(
+        28,
+        Math.min(
+          62,
+          46
+          + Math.round(Math.sin(index / 4) * 5)
+          - (index % 6)
+        )
+      ),
+      conversions: Math.max(
+        72,
+        138
+        + Math.round(Math.cos(index / 3.1) * 18)
+        + Math.round(index * 0.7)
+        + ((index % 4) - 1) * 6
+      )
+    }
+  }
+)
+
+export const getDailyWebsiteStatistics = computed(() => {
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: '2-digit'
+  })
+
+  return sourceDailyData.slice(0, 30).map(item => ({
+    ...item,
+    date: formatter.format(new Date(item.date))
+  }))
+})
+
+export const getWeeklyWebsiteStatistics = computed(
+  (): WebsitePerformanceMetric[] => {
+    const aggregated = new Map<
+      number,
+      { bounceRate: number, conversions: number, count: number }
+    >()
+
+    for (let index = 0; index < sourceDailyData.length; index++) {
+      const item = sourceDailyData[index]
+      if (!item) continue
+
+      const week = Math.floor(index / 7) + 1
+
+      if (!aggregated.has(week)) {
+        aggregated.set(week, {
+          bounceRate: 0,
+          conversions: 0,
+          count: 0
+        })
+      }
+
+      const current = aggregated.get(week)!
+      current.bounceRate += item.bounceRate
+      current.conversions += item.conversions
+      current.count++
+    }
+
+    return Array.from(aggregated.entries()).map(([week, value]) => ({
+      date: `Week ${String(week).padStart(2, '0')}`,
+      bounceRate: Math.round(value.bounceRate / value.count),
+      conversions: value.conversions
+    }))
+  }
+)
+
+export const getMonthlyWebsiteStatistics = computed(
+  (): WebsitePerformanceMetric[] => {
+    const aggregated = new Map<
+      string,
+      { bounceRate: number, conversions: number, count: number }
+    >()
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      year: '2-digit'
+    })
+
+    for (const item of sourceDailyData) {
+      const monthKey = item.date.slice(0, 7)
+
+      if (!aggregated.has(monthKey)) {
+        aggregated.set(monthKey, {
+          bounceRate: 0,
+          conversions: 0,
+          count: 0
+        })
+      }
+
+      const current = aggregated.get(monthKey)!
+      current.bounceRate += item.bounceRate
+      current.conversions += item.conversions
+      current.count++
+    }
+
+    return Array.from(aggregated.entries()).map(([monthKey, value]) => ({
+      date: formatter.format(new Date(`${monthKey}-01`)),
+      bounceRate: Math.round(value.bounceRate / value.count),
+      conversions: value.conversions
+    }))
+  }
+)
+
+export const WebsiteStatistics = getMonthlyWebsiteStatistics

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veristone/nuxt-v-app",
-  "version": "0.2.10",
+  "version": "0.2.14",
   "description": "Veristone Nuxt App Layer - Shared components, composables, and layouts",
   "type": "module",
   "private": false,