@veristone/nuxt-v-app 0.1.0

package/app/components/V/A/DataField.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="va-data-field" :class="[sizeClass, { 'va-data-field--highlight': highlight }]">
+    <dt class="va-data-field__label">
+      <UIcon v-if="icon" :name="icon" class="va-data-field__icon" />
+      <span>{{ label }}</span>
+    </dt>
+    <dd class="va-data-field__value" :class="valueClass">
+      <slot>{{ formattedValue }}</slot>
+      <span v-if="unit" class="va-data-field__unit">{{ unit }}</span>
+    </dd>
+    <p v-if="description" class="va-data-field__description">{{ description }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+type FieldSize = 'sm' | 'md' | 'lg' | 'xl'
+type FieldVariant = 'default' | 'currency' | 'percentage' | 'date'
+
+const props = withDefaults(defineProps<{
+  label: string
+  value?: string | number
+  unit?: string
+  icon?: string
+  size?: FieldSize
+  variant?: FieldVariant
+  highlight?: boolean
+  description?: string
+  mono?: boolean
+}>(), {
+  value: '',
+  unit: '',
+  icon: '',
+  size: 'md',
+  variant: 'default',
+  highlight: false,
+  description: '',
+  mono: false
+})
+
+const { formatCurrency } = useVAUtils()
+
+const sizeClass = computed(() => `va-data-field--${props.size}`)
+
+const valueClass = computed(() => ({
+  'va-data-field__value--mono': props.mono || props.variant === 'currency',
+  'va-data-field__value--currency': props.variant === 'currency',
+  'va-data-field__value--percentage': props.variant === 'percentage'
+}))
+
+const formattedValue = computed(() => {
+  if (!props.value && props.value !== 0) return '—'
+
+  switch (props.variant) {
+    case 'currency':
+      return formatCurrency(Number(props.value))
+    case 'percentage':
+      return `${props.value}`
+    default:
+      return props.value
+  }
+})
+</script>
+
+<style scoped>
+.va-data-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.va-data-field--highlight {
+  position: relative;
+  padding-left: 1rem;
+}
+
+.va-data-field--highlight::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(180deg, var(--color-gold, #d4af37) 0%, var(--color-gold-light, #e8c96f) 100%);
+  border-radius: 2px;
+}
+
+.va-data-field__label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted, #9ca3af);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.va-data-field__icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  opacity: 0.7;
+}
+
+.va-data-field__value {
+  font-weight: 600;
+  color: var(--color-text, #e8eaed);
+  line-height: 1.3;
+}
+
+.va-data-field__value--mono {
+  font-variant-numeric: tabular-nums;
+}
+
+.va-data-field__value--currency {
+  font-family: 'Cormorant Garamond', Georgia, serif;
+  letter-spacing: -0.01em;
+}
+
+.va-data-field__unit {
+  opacity: 0.7;
+  margin-left: 0.125rem;
+}
+
+.va-data-field--sm .va-data-field__value { font-size: 1rem; }
+.va-data-field--md .va-data-field__value { font-size: 1.25rem; }
+.va-data-field--lg .va-data-field__value { font-size: 1.75rem; }
+.va-data-field--xl .va-data-field__value { font-size: 2.25rem; }
+
+.va-data-field--lg .va-data-field__label,
+.va-data-field--xl .va-data-field__label {
+  font-size: 0.8125rem;
+}
+
+.va-data-field__description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #9ca3af);
+  opacity: 0.8;
+  margin-top: 0.125rem;
+}
+</style>

package/app/components/V/A/DataGrid.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="va-data-grid" :class="`va-data-grid--${columns}`">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+type GridColumns = 1 | 2 | 3 | 4 | '1' | '2' | '3' | '4' | 'auto'
+
+withDefaults(defineProps<{
+  columns?: GridColumns
+}>(), {
+  columns: 2
+})
+</script>
+
+<style scoped>
+.va-data-grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.va-data-grid--1 { grid-template-columns: 1fr; }
+.va-data-grid--2 { grid-template-columns: repeat(2, 1fr); }
+.va-data-grid--3 { grid-template-columns: repeat(3, 1fr); }
+.va-data-grid--4 { grid-template-columns: repeat(4, 1fr); }
+.va-data-grid--auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
+
+@media (max-width: 768px) {
+  .va-data-grid--2,
+  .va-data-grid--3,
+  .va-data-grid--4 {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .va-data-grid--3,
+  .va-data-grid--4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+</style>

package/app/components/V/A/DataTable.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { TableColumn } from '@nuxt/ui'
+
+const props = withDefaults(defineProps<{
+  title: string
+  rows: unknown[]
+  columns: TableColumn<unknown>[]
+  loading?: boolean
+  error?: Error | null
+  searchPlaceholder?: string
+  totalCount?: number
+  hasPrev?: boolean
+  hasNext?: boolean
+  showSearch?: boolean
+  showPagination?: boolean
+  showNewButton?: boolean
+  newButtonLabel?: string
+  newButtonPath?: string
+}>(), {
+  loading: false,
+  error: null,
+  searchPlaceholder: 'Search...',
+  totalCount: 0,
+  hasPrev: false,
+  hasNext: false,
+  showSearch: true,
+  showPagination: true,
+  showNewButton: false,
+  newButtonLabel: 'New',
+  newButtonPath: ''
+})
+
+const emit = defineEmits<{
+  select: [row: unknown]
+  prev: []
+  next: []
+  new: []
+}>()
+
+const search = defineModel<string>('search', { default: '' })
+
+function handleSelect(row: unknown) {
+  emit('select', row)
+}
+
+function handlePrev() {
+  emit('prev')
+}
+
+function handleNext() {
+  emit('next')
+}
+
+function handleNew() {
+  if (props.newButtonPath) {
+    navigateTo(props.newButtonPath)
+  } else {
+    emit('new')
+  }
+}
+</script>
+
+<template>
+  <UDashboardPanel>
+    <template #header>
+      <UDashboardNavbar :title="title">
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #right>
+          <UInput
+            v-if="showSearch"
+            v-model="search"
+            icon="i-lucide-search"
+            :placeholder="searchPlaceholder"
+            class="w-64"
+          />
+          <UButton v-if="showNewButton" icon="i-lucide-plus" @click="handleNew">
+            {{ newButtonLabel }}
+          </UButton>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <section v-if="loading" class="flex justify-center py-12">
+        <UIcon name="i-lucide-loader-2" class="animate-spin text-4xl" />
+      </section>
+
+      <section v-else-if="error" class="p-6">
+        <UAlert
+          color="red"
+          variant="soft"
+          title="Error loading data"
+          :description="error.message"
+        />
+      </section>
+
+      <section v-else-if="rows.length > 0">
+        <UTable
+          :data="rows"
+          :columns="columns"
+          :loading="loading"
+          @select="handleSelect"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData" />
+          </template>
+        </UTable>
+
+        <div
+          v-if="showPagination"
+          class="flex justify-between items-center p-4 border-t border-default"
+        >
+          <p class="text-sm text-muted">
+            Showing {{ rows.length }} of {{ totalCount }} items
+          </p>
+          <div class="flex gap-2">
+            <UButton variant="outline" :disabled="!hasPrev" @click="handlePrev">
+              Previous
+            </UButton>
+            <UButton variant="outline" :disabled="!hasNext" @click="handleNext">
+              Next
+            </UButton>
+          </div>
+        </div>
+      </section>
+
+      <section v-else class="p-6">
+        <div class="text-center py-12">
+          <slot name="empty">
+            <UIcon
+              name="i-lucide-inbox"
+              class="size-16 mx-auto mb-4 text-muted opacity-50"
+            />
+            <h2 class="text-2xl font-bold mb-2">No Data Found</h2>
+            <p class="text-muted">There are no items available at this time</p>
+          </slot>
+        </div>
+      </section>
+    </template>
+  </UDashboardPanel>
+</template>

package/app/components/V/A/EmptyState.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="va-empty-state" :class="`va-empty-state--${size}`">
+    <div class="va-empty-state__container">
+      <div class="va-empty-state__icon-wrapper">
+        <UIcon :name="icon" class="va-empty-state__icon" />
+        <div class="va-empty-state__icon-ring" />
+      </div>
+
+      <div class="va-empty-state__content">
+        <h3 class="va-empty-state__title">{{ title }}</h3>
+        <p v-if="description" class="va-empty-state__description">{{ description }}</p>
+      </div>
+
+      <div v-if="$slots.default || actionLabel" class="va-empty-state__actions">
+        <slot>
+          <UButton
+            v-if="actionLabel"
+            :label="actionLabel"
+            :icon="actionIcon"
+            class="va-empty-state__btn"
+            @click="$emit('action')"
+          />
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+type EmptyStateSize = 'sm' | 'md' | 'lg'
+
+withDefaults(defineProps<{
+  icon?: string
+  title?: string
+  description?: string
+  actionLabel?: string
+  actionIcon?: string
+  size?: EmptyStateSize
+}>(), {
+  icon: 'i-lucide-inbox',
+  title: 'No Data Found',
+  description: '',
+  actionLabel: '',
+  actionIcon: 'i-lucide-plus',
+  size: 'md'
+})
+
+defineEmits<{
+  action: []
+}>()
+</script>
+
+<style scoped>
+.va-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: vaEmptyFadeIn 0.4s ease-out;
+}
+
+@keyframes vaEmptyFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.va-empty-state--sm { padding: 2rem 1rem; }
+.va-empty-state--md { padding: 4rem 2rem; }
+.va-empty-state--lg { padding: 6rem 2rem; min-height: 400px; }
+
+.va-empty-state__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  max-width: 400px;
+}
+
+.va-empty-state__icon-wrapper {
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.va-empty-state__icon {
+  position: relative;
+  z-index: 1;
+  font-size: 2.5rem;
+  color: #d4af37;
+  opacity: 0.8;
+}
+
+.va-empty-state--sm .va-empty-state__icon { font-size: 1.75rem; }
+.va-empty-state--lg .va-empty-state__icon { font-size: 3.5rem; }
+
+.va-empty-state__icon-ring {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 5rem;
+  height: 5rem;
+  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
+  border-radius: 50%;
+  animation: vaEmptyPulse 3s ease-in-out infinite;
+}
+
+.va-empty-state--sm .va-empty-state__icon-ring { width: 3.5rem; height: 3.5rem; }
+.va-empty-state--lg .va-empty-state__icon-ring { width: 7rem; height: 7rem; }
+
+@keyframes vaEmptyPulse {
+  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
+  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
+}
+
+.va-empty-state__content { margin-bottom: 1.5rem; }
+
+.va-empty-state__title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text, #e8eaed);
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.01em;
+}
+
+.va-empty-state--sm .va-empty-state__title { font-size: 1rem; }
+.va-empty-state--lg .va-empty-state__title { font-size: 1.5rem; }
+
+.va-empty-state__description {
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #9ca3af);
+  line-height: 1.6;
+}
+
+.va-empty-state__actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.va-empty-state__btn {
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid rgba(212, 175, 55, 0.25);
+  color: #d4af37;
+}
+
+.va-empty-state__btn:hover {
+  background: rgba(212, 175, 55, 0.15);
+  border-color: rgba(212, 175, 55, 0.4);
+}
+</style>

package/app/components/V/A/Fmt/Currency.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  value: number
+  currency?: string
+  locale?: string
+  showSign?: boolean
+  colorize?: boolean
+}>(), {
+  currency: 'USD',
+  locale: 'en-US',
+  showSign: false,
+  colorize: false
+})
+
+const formatted = computed(() => {
+  const opts: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency: props.currency,
+    signDisplay: props.showSign ? 'always' : 'auto'
+  }
+  return new Intl.NumberFormat(props.locale, opts).format(props.value)
+})
+
+const colorClass = computed(() => {
+  if (!props.colorize) return ''
+  if (props.value > 0) return 'text-green-600 dark:text-green-400'
+  if (props.value < 0) return 'text-red-600 dark:text-red-400'
+  return 'text-gray-600 dark:text-gray-400'
+})
+</script>
+
+<template>
+  <span :class="['font-variant-numeric tabular-nums', colorClass]">
+    {{ formatted }}
+  </span>
+</template>

package/app/components/V/A/Fmt/DateTime.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useDateFormat } from '@vueuse/core'
+
+const props = withDefaults(defineProps<{
+  value: string | number | Date
+  format?: 'short' | 'long' | 'full' | 'relative'
+  showTime?: boolean
+  locale?: string
+}>(), {
+  format: 'short',
+  showTime: false,
+  locale: 'en-US'
+})
+
+const formatted = computed(() => {
+  if (!props.value) return '-'
+  const date = new Date(props.value)
+  
+  if (props.format === 'full') {
+    return useDateFormat(date, 'MMMM D, YYYY' + (props.showTime ? ' h:mm A' : '')).value
+  }
+  
+  const opts: Intl.DateTimeFormatOptions = {
+    dateStyle: props.format as any
+  }
+  if (props.showTime) opts.timeStyle = 'short'
+  
+  return new Intl.DateTimeFormat(props.locale, opts).format(date)
+})
+</script>
+
+<template>
+  <span class="whitespace-nowrap">{{ formatted }}</span>
+</template>

package/app/components/V/A/Fmt/Percent.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  value: number
+  decimals?: number
+  showSign?: boolean
+  colorize?: boolean
+  scale?: number // Allow passing 0.5 for 50% or 50 for 50%
+}>(), {
+  decimals: 1,
+  showSign: false,
+  colorize: false,
+  scale: 1 // Default assumes value is 0-100. If 0-1, pass scale: 100? No, standard Intl uses 0-1.
+  // Wait, standard Intl Percent expects 0.5 -> 50%.
+  // Veristone variation: We'll accept standard 0-100 or 0-1 via heuristic or prop.
+  // Let's assume input is 0-100 based on typical business apps, OR match standard behavior.
+})
+
+// V-App Variation: Handle 0-100 inputs gracefully if > 1
+const normalizedValue = computed(() => {
+  // Heuristic: If value > 1, assume it's a percentage (e.g. 50 = 50%), so divide by 100 for Intl
+  // unless user explicitly wants 5000%.
+  // Actually, let's stick to standard behavior: Input 0.5 = 50%.
+  return props.value
+})
+
+const formatted = computed(() => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'percent',
+    minimumFractionDigits: props.decimals,
+    maximumFractionDigits: props.decimals,
+    signDisplay: props.showSign ? 'always' : 'auto'
+  }).format(normalizedValue.value)
+})
+
+const colorClass = computed(() => {
+  if (!props.colorize) return ''
+  if (props.value > 0) return 'text-green-600 dark:text-green-400'
+  if (props.value < 0) return 'text-red-600 dark:text-red-400'
+  return 'text-gray-600 dark:text-gray-400'
+})
+</script>
+
+<template>
+  <span :class="['font-variant-numeric tabular-nums', colorClass]">
+    {{ formatted }}
+  </span>
+</template>