@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,291 @@
+<template>
+  <article
+    class="va-card"
+    :class="[
+      `va-card--${variant}`,
+      { 'va-card--collapsible': collapsible, 'va-card--collapsed': isCollapsed }
+    ]"
+    :style="{ animationDelay }"
+  >
+    <div v-if="showAccent" class="va-card__accent" :class="`va-card__accent--${accentColor}`" />
+
+    <header v-if="title || $slots.header || $slots.actions" class="va-card__header" @click="toggleCollapse">
+      <div class="va-card__header-content">
+        <div v-if="icon" class="va-card__icon-wrapper">
+          <UIcon :name="icon" class="va-card__icon" />
+        </div>
+        <div class="va-card__title-group">
+          <slot name="header">
+            <h3 class="va-card__title">{{ title }}</h3>
+            <p v-if="subtitle" class="va-card__subtitle">{{ subtitle }}</p>
+          </slot>
+        </div>
+      </div>
+      <div class="va-card__header-right">
+        <slot name="actions" />
+        <button v-if="collapsible" class="va-card__collapse-btn" :aria-expanded="!isCollapsed">
+          <UIcon name="i-lucide-chevron-down" class="va-card__collapse-icon" />
+        </button>
+      </div>
+    </header>
+
+    <div class="va-card__body" :class="{ 'va-card__body--padded': padded }">
+      <slot />
+    </div>
+
+    <footer v-if="$slots.footer" class="va-card__footer">
+      <slot name="footer" />
+    </footer>
+  </article>
+</template>
+
+<script setup lang="ts">
+type CardVariant = 'default' | 'elevated' | 'outlined' | 'glass'
+type AccentColor = 'gold' | 'success' | 'warning' | 'error' | 'info' | 'primary'
+
+const props = withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  icon?: string
+  variant?: CardVariant
+  showAccent?: boolean
+  accentColor?: AccentColor
+  collapsible?: boolean
+  defaultCollapsed?: boolean
+  padded?: boolean
+  animationDelay?: string
+}>(), {
+  title: '',
+  subtitle: '',
+  icon: '',
+  variant: 'default',
+  showAccent: false,
+  accentColor: 'gold',
+  collapsible: false,
+  defaultCollapsed: false,
+  padded: true,
+  animationDelay: '0s'
+})
+
+const isCollapsed = ref(props.defaultCollapsed)
+
+function toggleCollapse() {
+  if (props.collapsible) {
+    isCollapsed.value = !isCollapsed.value
+  }
+}
+</script>
+
+<style scoped>
+.va-card {
+  position: relative;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: vaCardFadeIn 0.5s ease-out backwards;
+}
+
+@keyframes vaCardFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.va-card--default {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.va-card--default:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
+.va-card--elevated {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(212, 175, 55, 0.12);
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.va-card--elevated:hover {
+  border-color: rgba(212, 175, 55, 0.25);
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.2),
+    0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.va-card--outlined {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.va-card--outlined:hover {
+  border-color: rgba(212, 175, 55, 0.3);
+}
+
+.va-card--glass {
+  background: rgba(255, 255, 255, 0.02);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.va-card--glass:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(212, 175, 55, 0.2);
+}
+
+.va-card__accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  transition: width 0.3s ease;
+}
+
+.va-card:hover .va-card__accent {
+  width: 5px;
+}
+
+.va-card__accent--gold {
+  background: linear-gradient(180deg, #d4af37 0%, #e8c96f 100%);
+}
+
+.va-card__accent--primary {
+  background: linear-gradient(180deg, var(--ui-primary) 0%, var(--ui-primary) 100%);
+}
+
+.va-card__accent--success {
+  background: linear-gradient(180deg, #22c55e 0%, #4ade80 100%);
+}
+
+.va-card__accent--warning {
+  background: linear-gradient(180deg, #f59e0b 0%, #fbbf24 100%);
+}
+
+.va-card__accent--error {
+  background: linear-gradient(180deg, #ef4444 0%, #f87171 100%);
+}
+
+.va-card__accent--info {
+  background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
+}
+
+.va-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.va-card--collapsible .va-card__header {
+  cursor: pointer;
+  user-select: none;
+}
+
+.va-card--collapsible .va-card__header:hover {
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.va-card__header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.va-card__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  background: rgba(212, 175, 55, 0.1);
+  border: 1px solid rgba(212, 175, 55, 0.2);
+  border-radius: 10px;
+}
+
+.va-card__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: #d4af37;
+}
+
+.va-card__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.va-card__title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--color-text, #e8eaed);
+  letter-spacing: -0.01em;
+}
+
+.va-card__subtitle {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted, #9ca3af);
+}
+
+.va-card__header-right {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.va-card__collapse-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.va-card__collapse-btn:hover {
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.va-card__collapse-icon {
+  width: 1rem;
+  height: 1rem;
+  color: var(--color-text-muted, #9ca3af);
+  transition: transform 0.3s ease;
+}
+
+.va-card--collapsed .va-card__collapse-icon {
+  transform: rotate(-90deg);
+}
+
+.va-card__body {
+  transition: all 0.3s ease;
+}
+
+.va-card__body--padded {
+  padding: 1.5rem;
+}
+
+.va-card--collapsed .va-card__body {
+  display: none;
+}
+
+.va-card__footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  background: rgba(255, 255, 255, 0.01);
+}
+</style>

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

@@ -0,0 +1,108 @@
+<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)] hover:-translate-y-0.5"
+    :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/V/A/CompanyMenu.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+interface Company {
+  label: string
+  avatar?: {
+    src: string
+    alt?: string
+  }
+}
+
+const props = withDefaults(defineProps<{
+  companies?: Company[]
+  modelValue?: Company
+  collapsed?: boolean
+  theme?: 'light' | 'dark'
+}>(), {
+  companies: () => [
+    {
+      label: 'Veristone Capital',
+      avatar: {
+        src: 'https://api.dicebear.com/7.x/initials/svg?seed=VC&backgroundColor=84cc16',
+        alt: 'Veristone Capital'
+      }
+    }
+  ],
+  collapsed: false,
+  theme: 'light'
+})
+
+const buttonUi = computed(() => props.theme === 'dark'
+  ? {
+      root: 'hover:bg-white/5',
+      label: 'text-slate-300 group-hover:text-white',
+      trailingIcon: 'text-slate-400 group-hover:text-white'
+    }
+  : { trailingIcon: 'text-dimmed' }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [company: Company]
+}>()
+
+const selectedCompany = computed({
+  get: () => props.modelValue || props.companies[0],
+  set: (value: Company) => emit('update:modelValue', value)
+})
+
+const items = computed(() => {
+  return [
+    props.companies.map((company) => ({
+      ...company,
+      onSelect() {
+        selectedCompany.value = company
+      }
+    }))
+  ]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    :items="items"
+    :content="{ align: 'center', collisionPadding: 12 }"
+    :ui="{
+      content: collapsed ? 'w-40' : 'w-(--reka-dropdown-menu-trigger-width)',
+    }"
+  >
+    <UButton
+      :avatar="selectedCompany?.avatar"
+      :label="collapsed ? undefined : selectedCompany?.label"
+      :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
+      color="neutral"
+      variant="ghost"
+      block
+      :square="collapsed"
+      :class="[
+        'data-[state=open]:bg-elevated group',
+        !collapsed && 'py-2',
+        theme === 'dark' && 'data-[state=open]:bg-white/5'
+      ]"
+      :ui="buttonUi"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/V/A/Data/KeyValue.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+/**
+ * VADataKeyValue - Veristone Key Value Display
+ */
+const props = withDefaults(defineProps<{
+  label: string
+  value?: any
+  type?: 'text' | 'badge' | 'boolean' | 'link' | 'email' | 'phone' | 'currency' | 'date' | 'copy' | 'code'
+  layout?: 'horizontal' | 'vertical' | 'inline'
+  size?: 'sm' | 'md' | 'lg'
+  icon?: string
+  emptyText?: string
+  currency?: string
+  dateFormat?: string
+  badgeColor?: string
+  linkText?: string
+  trueLabel?: string
+  falseLabel?: string
+  showBooleanLabel?: boolean
+  noBorder?: boolean
+}>(), {
+  type: 'text',
+  layout: 'vertical',
+  size: 'md',
+  emptyText: '-',
+  trueLabel: 'Yes',
+  falseLabel: 'No'
+})
+
+const displayValue = computed(() => {
+  if (props.value === null || props.value === undefined || props.value === '') return props.emptyText
+  return props.value
+})
+</script>
+
+<template>
+  <div 
+    class="flex gap-2 group"
+    :class="{
+      'flex-col items-start': layout === 'vertical',
+      'flex-row items-center justify-between': layout === 'horizontal',
+      'inline-flex items-center': layout === 'inline',
+      'text-sm': size === 'sm',
+      'text-base': size === 'md',
+      'text-lg': size === 'lg',
+      'border-b border-gray-100 dark:border-gray-800 pb-3 mb-3 last:border-0 last:pb-0 last:mb-0': !noBorder && layout === 'horizontal'
+    }"
+  >
+    <dt class="font-medium text-gray-500 dark:text-gray-400 flex items-center gap-1.5">
+      <UIcon v-if="icon" :name="icon" class="w-4 h-4 opacity-70" />
+      {{ label }}
+    </dt>
+    
+    <dd class="font-medium text-gray-900 dark:text-white">
+      <slot>
+        <!-- Text / Default -->
+        <span v-if="type === 'text'">{{ displayValue }}</span>
+        
+        <!-- Boolean -->
+        <UBadge 
+          v-else-if="type === 'boolean'" 
+          :color="value ? 'green' : 'gray'" 
+          variant="subtle"
+          size="xs"
+        >
+          {{ value ? trueLabel : falseLabel }}
+        </UBadge>
+        
+        <!-- Badge -->
+        <UBadge 
+          v-else-if="type === 'badge'" 
+          :color="badgeColor || 'gray'" 
+          variant="subtle" 
+          size="xs"
+        >
+          {{ displayValue }}
+        </UBadge>
+
+        <!-- Currency -->
+        <VAFmtCurrency 
+          v-else-if="type === 'currency'" 
+          :value="Number(value)" 
+          :currency="currency" 
+        />
+
+        <!-- Date -->
+        <VAFmtDateTime 
+          v-else-if="type === 'date'" 
+          :value="value" 
+          :format="dateFormat" 
+        />
+        
+        <!-- Code -->
+        <code v-else-if="type === 'code'" class="px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono text-xs">{{ displayValue }}</code>
+      </slot>
+    </dd>
+  </div>
+</template>

package/app/components/V/A/Data/StatusBadge.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  status: string
+  label?: string
+  color?: string
+  colorMap?: Record<string, string>
+  variant?: string
+  size?: string
+}>(), {
+  variant: 'subtle',
+  size: 'xs',
+  colorMap: () => ({
+    active: 'green',
+    success: 'green',
+    published: 'green',
+    completed: 'green',
+    pending: 'orange',
+    warning: 'orange',
+    error: 'red',
+    failed: 'red',
+    danger: 'red',
+    deleted: 'red',
+    inactive: 'gray',
+    draft: 'gray',
+    archived: 'gray'
+  })
+})
+
+const computedColor = computed(() => {
+  if (props.color) return props.color
+  const key = props.status?.toLowerCase()
+  return props.colorMap[key] || 'gray'
+})
+
+const computedLabel = computed(() => {
+  return props.label || props.status || 'Unknown'
+})
+</script>
+
+<template>
+  <UBadge :color="computedColor" :variant="variant" :size="size" class="capitalize">
+    <slot>{{ computedLabel }}</slot>
+  </UBadge>
+</template>