@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/formatters.vue

@@ -0,0 +1,329 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Formatter Components'
+})
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+    <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Formatter Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Data formatting components for currency, dates, percentages, and key-value displays.
+      </p>
+
+      <!-- VAFmtCurrency Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAFmtCurrency</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Format numbers as currency with locale support.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Currency Formatting Examples</h3>
+          </template>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Default (USD)</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="1234.56" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Large Amount</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="1250000" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Euro</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="1234.56" currency="EUR" locale="de-DE" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">GBP</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="1234.56" currency="GBP" locale="en-GB" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">With Sign (Positive)</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="500" :show-sign="true" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">With Sign (Negative)</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="-350.25" :show-sign="true" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Colorized Positive</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="2500" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Colorized Negative</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtCurrency :value="-1200" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAFmtDateTime Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAFmtDateTime</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Format dates and times with various display options.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Date & Time Formatting Examples</h3>
+          </template>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Short Format</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="new Date()" format="short" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Long Format</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="new Date()" format="long" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Full Format</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="new Date()" format="full" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">With Time</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="new Date()" format="short" :show-time="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">ISO String Input</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime value="2024-06-15T14:30:00Z" format="long" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Timestamp Input</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="1718451000000" format="short" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Full with Time</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="new Date()" format="full" :show-time="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Empty Value</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtDateTime :value="null" /></ClientOnly>
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VAFmtPercent Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAFmtPercent</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Format decimal values as percentages.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Percentage Formatting Examples</h3>
+          </template>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Standard (0.5 → 50%)</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="0.5" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Small Value</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="0.0234" :decimals="2" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Large Value</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="1.5" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">No Decimals</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="0.7532" :decimals="0" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Positive with Sign</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="0.125" :show-sign="true" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Negative with Sign</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="-0.08" :show-sign="true" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Colorized Positive</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="0.25" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-1">Colorized Negative</p>
+              <p class="text-lg font-semibold">
+                <ClientOnly><VAFmtPercent :value="-0.15" :colorize="true" /></ClientOnly>
+              </p>
+            </div>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VADataKeyValue Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VADataKeyValue</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Key-value pair display with various types and layouts.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Vertical Layout (Default)</h3>
+          </template>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+            <ClientOnly>
+              <VADataKeyValue label="Name" value="John Doe" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Email" value="john@example.com" type="text" icon="i-lucide-mail" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Status" value="Active" type="badge" badge-color="green" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Premium" :value="true" type="boolean" />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Horizontal Layout</h3>
+          </template>
+          <div class="space-y-0">
+            <ClientOnly>
+              <VADataKeyValue label="Company" value="Veristone Capital" layout="horizontal" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Founded" value="2024-01-15" type="date" layout="horizontal" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Revenue" :value="2500000" type="currency" layout="horizontal" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Verified" :value="true" type="boolean" layout="horizontal" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="API Key" value="sk_live_abc123..." type="code" layout="horizontal" :no-border="true" />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Size Variants</h3>
+          </template>
+          <div class="grid grid-cols-3 gap-6">
+            <ClientOnly>
+              <VADataKeyValue label="Small" value="Sample Text" size="sm" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Medium" value="Sample Text" size="md" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataKeyValue label="Large" value="Sample Text" size="lg" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+
+      <!-- VADataStatusBadge Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VADataStatusBadge</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Status badge with automatic color mapping.</p>
+      <div class="mb-8">
+        <UCard>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VADataStatusBadge status="active" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="success" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="published" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="completed" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="pending" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="warning" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="error" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="failed" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="deleted" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="inactive" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="draft" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="archived" />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Custom Label & Color</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VADataStatusBadge status="custom" label="In Review" color="blue" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="custom" label="Processing" color="purple" />
+            </ClientOnly>
+            <ClientOnly>
+              <VADataStatusBadge status="custom" label="On Hold" color="yellow" />
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>

package/app/pages/playground/index.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Component Playground'
+})
+
+const categories = [
+  {
+    title: 'Cards',
+    description: '15 card components for data display including KPI cards, chart cards, and table cards.',
+    to: '/playground/cards',
+    icon: 'i-lucide-credit-card'
+  },
+  {
+    title: 'Charts',
+    description: '33 chart components including bar charts, line charts, donut charts, and area charts.',
+    to: '/playground/charts',
+    icon: 'i-lucide-bar-chart-3'
+  },
+  {
+    title: 'Blocks',
+    description: '5 block components for layout composition including grid layouts and filter bars.',
+    to: '/playground/blocks',
+    icon: 'i-lucide-layout-template'
+  },
+   {
+     title: 'Dashboard Widgets',
+     description: '6 dashboard widgets including KPI cards, navigation, pricing plans, and usage charts.',
+     to: '/playground/dashboard',
+     icon: 'i-lucide-layout-dashboard'
+   },
+   {
+     title: 'Layout',
+     description: 'Layout components including side navigation, user menus, and slideovers',
+     to: '/playground/layout',
+     icon: 'i-lucide-layout'
+   },
+   {
+     title: 'Tables',
+    description: 'Full-featured data tables with search, sort, filter, export, selection, and pagination.',
+    to: '/playground/tables',
+    icon: 'i-lucide-table-2'
+  },
+  {
+    title: 'Base Components',
+    description: 'Core V/A components including cards, stats, badges, navigation, and data display.',
+    to: '/playground/base',
+    icon: 'i-lucide-box'
+  },
+  {
+    title: 'Buttons',
+    description: 'Action buttons for CRUD operations, navigation, and data export.',
+    to: '/playground/buttons',
+    icon: 'i-lucide-mouse-pointer-click'
+  },
+  {
+    title: 'Formatters',
+    description: 'Data formatting components for currency, dates, percentages, and key-value displays.',
+    to: '/playground/formatters',
+    icon: 'i-lucide-text-cursor-input'
+  },
+  {
+    title: 'States',
+    description: 'Loading, empty, and error state components for consistent UI feedback.',
+    to: '/playground/states',
+    icon: 'i-lucide-loader'
+  },
+  {
+    title: 'Modals',
+    description: 'Modal dialogs and slideover panels for confirmations, forms, and detailed views.',
+    to: '/playground/modals',
+    icon: 'i-lucide-panel-right'
+  }
+]
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Component Playground</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Explore the Veristone component library. This playground showcases 60+ migrated components
+        plus 36 base V/A components across 9 categories.
+      </p>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <ClientOnly v-for="category in categories" :key="category.to">
+          <UCard class="hover:shadow-lg transition-shadow">
+            <template #header>
+              <div class="flex items-center gap-3">
+                <div class="p-2 rounded-lg bg-primary-50 dark:bg-primary-900/20">
+                  <UIcon :name="category.icon" class="w-5 h-5 text-primary-500" />
+                </div>
+                <h2 class="text-xl font-semibold">{{ category.title }}</h2>
+              </div>
+            </template>
+            <p class="mb-4 text-gray-600 dark:text-gray-400">
+              {{ category.description }}
+            </p>
+            <UButton :to="category.to" color="primary" variant="soft">
+              View {{ category.title }}
+            </UButton>
+          </UCard>
+        </ClientOnly>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>

package/app/pages/playground/layout.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Layout Components'
+})
+
+const { isNotificationsSlideoverOpen } = useDashboard()
+
+// Mock Data for VaLayoutSideNav
+const mockNavItems = [
+  {
+    label: 'Management',
+    open: true,
+    children: [
+      { label: 'Users', icon: 'i-heroicons-users', to: '/users' },
+      { label: 'Teams', icon: 'i-heroicons-user-group', to: '/teams' },
+      { label: 'Settings', icon: 'i-heroicons-cog-6-tooth', to: '/settings' }
+    ]
+  },
+  {
+    label: 'Resources',
+    open: false,
+    children: [
+      { label: 'Documentation', icon: 'i-heroicons-book-open', to: '/docs' },
+      { label: 'Help Center', icon: 'i-heroicons-question-mark-circle', to: '/help' }
+    ]
+  }
+]
+
+// Mock Data for VaLayoutUserMenu (Note: Component currently uses internal data)
+const mockUser = {
+  name: 'Jane Doe',
+  email: 'jane@example.com',
+  avatar: 'https://i.pravatar.cc/150?img=5'
+}
+
+// Mock Data for VaLayoutTeamsMenu (Note: Component currently uses internal data)
+const mockTeams = [
+  { label: 'Engineering', avatar: { src: 'https://placehold.co/100', alt: 'Eng' } },
+  { label: 'Marketing', avatar: { src: 'https://placehold.co/100', alt: 'Mkt' } }
+]
+
+// Mock Data for VaLayoutNotificationsSlideover (Note: Component currently fetches from API)
+const mockNotifications = [
+  { id: 1, title: 'New message', time: '5 min ago', type: 'message' },
+  { id: 2, title: 'Task completed', time: '1 hour ago', type: 'success' }
+]
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+      <div class="py-8">
+        <h1 class="text-3xl font-bold mb-4">Layout Components Showcase</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-8">
+          Essential layout building blocks including navigation, menus, and side panels.
+        </p>
+
+        <!-- VaLayoutSideNav -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaLayoutSideNav</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Side navigation component for dashboard layouts with collapsible menu items.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Standard Side Navigation</h3>
+          </template>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div class="border border-gray-200 dark:border-gray-800 rounded-md bg-white dark:bg-gray-900 p-2 max-w-[250px]">
+              <p class="text-xs text-gray-500 mb-2 px-2">Expanded</p>
+              <ClientOnly>
+                <VaLayoutSideNav :items="mockNavItems" />
+              </ClientOnly>
+            </div>
+            <div class="border border-gray-200 dark:border-gray-800 rounded-md bg-white dark:bg-gray-900 p-2 max-w-[80px]">
+              <p class="text-xs text-gray-500 mb-2 text-center">Collapsed</p>
+              <ClientOnly>
+                <VaLayoutSideNav :items="mockNavItems" collapsed />
+              </ClientOnly>
+            </div>
+          </div>
+        </UCard>
+
+        <!-- VaLayoutUserMenu -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaLayoutUserMenu</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">User menu dropdown with avatar, profile info, and action items.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">User Menu Dropdown</h3>
+          </template>
+          <div class="flex flex-wrap gap-8 items-start">
+            <div>
+              <p class="text-sm text-gray-500 mb-2">Standard</p>
+              <ClientOnly>
+                <div class="w-64">
+                  <VaLayoutUserMenu />
+                </div>
+              </ClientOnly>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-2">Collapsed</p>
+              <ClientOnly>
+                <div class="w-16">
+                  <VaLayoutUserMenu collapsed />
+                </div>
+              </ClientOnly>
+            </div>
+          </div>
+        </UCard>
+
+        <!-- VaLayoutTeamsMenu -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaLayoutTeamsMenu</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Team switching menu for multi-tenant applications.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Team Switcher</h3>
+          </template>
+          <div class="flex flex-wrap gap-8 items-start">
+            <div>
+              <p class="text-sm text-gray-500 mb-2">Standard</p>
+              <ClientOnly>
+                <div class="w-64">
+                  <VaLayoutTeamsMenu />
+                </div>
+              </ClientOnly>
+            </div>
+            <div>
+              <p class="text-sm text-gray-500 mb-2">Collapsed</p>
+              <ClientOnly>
+                <div class="w-16">
+                  <VaLayoutTeamsMenu collapsed />
+                </div>
+              </ClientOnly>
+            </div>
+          </div>
+        </UCard>
+
+        <!-- VaLayoutNotificationsSlideover -->
+        <h2 class="text-2xl font-semibold mb-4 mt-8">VaLayoutNotificationsSlideover</h2>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">Notifications slideover panel with list of recent activities.</p>
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Notifications Panel</h3>
+          </template>
+          <div class="h-16 flex items-center">
+            <UButton 
+              label="Open Notifications Panel" 
+              icon="i-heroicons-bell"
+              color="primary"
+              variant="solid"
+              @click="isNotificationsSlideoverOpen = true"
+            />
+            <ClientOnly>
+              <VaLayoutNotificationsSlideover />
+            </ClientOnly>
+          </div>
+        </UCard>
+
+      </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>