@veristone/nuxt-v-app 0.1.0

package/app/components/V/A/State/Loading.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  rows?: number
+  variant?: 'rows' | 'card' | 'spinner'
+  message?: string
+  size?: 'sm' | 'md' | 'lg'
+}>(), {
+  rows: 3,
+  variant: 'rows',
+  size: 'md'
+})
+</script>
+
+<template>
+  <div class="w-full animate-pulse">
+    <div v-if="variant === 'spinner'" class="flex flex-col items-center justify-center py-8">
+      <UIcon name="i-lucide-loader-2" class="animate-spin text-primary-500" :class="{ 'w-6 h-6': size === 'sm', 'w-8 h-8': size === 'md', 'w-12 h-12': size === 'lg' }" />
+      <p v-if="message" class="mt-3 text-sm text-gray-500 font-medium">{{ message }}</p>
+    </div>
+
+    <div v-else-if="variant === 'card'" class="rounded-xl border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900 p-4 space-y-4">
+      <div class="h-6 bg-gray-200 dark:bg-gray-800 rounded w-1/3" />
+      <div class="space-y-2">
+        <div class="h-4 bg-gray-200 dark:bg-gray-800 rounded w-full" />
+        <div class="h-4 bg-gray-200 dark:bg-gray-800 rounded w-5/6" />
+      </div>
+    </div>
+
+    <div v-else class="space-y-3">
+      <div v-for="i in rows" :key="i" class="h-4 bg-gray-200 dark:bg-gray-800 rounded" :style="{ width: `${Math.random() * 40 + 60}%` }" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+type StatFormat = 'number' | 'currency' | 'percentage'
+type AccentColor = 'coral' | 'teal' | 'amber' | 'navy' | 'success' | 'warning' | 'gold'
+
+const props = withDefaults(defineProps<{
+  label: string
+  value?: string | number
+  previousValue?: string | number | null
+  format?: StatFormat
+  icon?: string
+  accentColor?: AccentColor
+  loading?: boolean
+  animationDelay?: string
+}>(), {
+  value: '',
+  previousValue: null,
+  format: 'number',
+  icon: '',
+  accentColor: 'coral',
+  loading: false,
+  animationDelay: '0s'
+})
+
+const accentColors: Record<AccentColor, string> = {
+  coral: '#ff5c35',
+  teal: '#00a4bd',
+  amber: '#f5a623',
+  navy: '#2d3e50',
+  success: '#00a4bd',
+  warning: '#f5a623',
+  gold: '#d4af37'
+}
+
+const accentStyle = computed(() => ({
+  '--stat-accent': accentColors[props.accentColor] || accentColors.coral
+}))
+
+const formattedValue = computed(() => {
+  if (props.loading) return '—'
+  const num = typeof props.value === 'string' ? parseFloat(props.value) : props.value
+
+  if (isNaN(num as number)) return props.value
+
+  switch (props.format) {
+    case 'currency':
+      return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 0
+      }).format(num as number)
+    case 'percentage':
+      return `${(num as number).toFixed(1)}%`
+    default:
+      return new Intl.NumberFormat('en-US').format(num as number)
+  }
+})
+
+const trend = computed(() => {
+  if (props.previousValue === null || props.loading) return null
+
+  const current = typeof props.value === 'string' ? parseFloat(props.value) : props.value
+  const previous = typeof props.previousValue === 'string' ? parseFloat(props.previousValue) : props.previousValue
+
+  if (isNaN(current as number) || isNaN(previous as number) || previous === 0) return null
+
+  const change = (((current as number) - (previous as number)) / (previous as number)) * 100
+  return {
+    direction: change > 0 ? 'up' : change < 0 ? 'down' : 'neutral',
+    value: Math.abs(change).toFixed(1)
+  }
+})
+
+const trendIcon = computed(() => {
+  if (!trend.value) return ''
+  return trend.value.direction === 'up'
+    ? 'i-lucide-trending-up'
+    : trend.value.direction === 'down'
+      ? 'i-lucide-trending-down'
+      : 'i-lucide-minus'
+})
+</script>
+
+<template>
+  <div
+    class="va-stats-card-wrapper rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-5 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 animate-fade-in-up"
+    :style="{ animationDelay }"
+  >
+    <div
+      class="va-stats-card"
+      :style="accentStyle"
+    >
+      <div v-if="icon" class="va-stats-card__icon" :style="{ background: `${accentColors[accentColor]}15`, color: accentColors[accentColor] }">
+        <UIcon :name="icon" class="size-5" />
+      </div>
+
+      <div class="va-stats-card__content">
+        <p class="va-stats-card__label">{{ label }}</p>
+
+        <div class="va-stats-card__value-row">
+          <template v-if="loading">
+            <div class="va-stats-card__skeleton" />
+          </template>
+          <template v-else>
+            <span class="va-stats-card__value tabular-nums">{{ formattedValue }}</span>
+
+            <div
+              v-if="trend"
+              class="va-stats-card__trend"
+              :class="`va-stats-card__trend--${trend.direction}`"
+            >
+              <UIcon :name="trendIcon" class="size-4" />
+              <span>{{ trend.value }}%</span>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.va-stats-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.va-stats-card__icon {
+  flex-shrink: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  transition: transform 0.2s ease;
+}
+
+.va-stats-card:hover .va-stats-card__icon {
+  transform: scale(1.05);
+}
+
+.va-stats-card__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.va-stats-card__label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--color-text-muted);
+  margin-bottom: 0.375rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.va-stats-card__value-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.va-stats-card__value {
+  font-family: var(--font-display);
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.dark .va-stats-card__value {
+  color: #ffffff;
+}
+
+.va-stats-card__skeleton {
+  height: 2rem;
+  width: 6rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  animation: vaStatsPulse 1.5s ease-in-out infinite;
+}
+
+@keyframes vaStatsPulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.va-stats-card__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: 9999px;
+}
+
+.va-stats-card__trend--up {
+  color: var(--color-success, #00a4bd);
+  background: rgba(0, 164, 189, 0.1);
+}
+
+.va-stats-card__trend--down {
+  color: var(--color-error, #f2545b);
+  background: rgba(242, 84, 91, 0.1);
+}
+
+.va-stats-card__trend--neutral {
+  color: var(--color-text-muted);
+  background: var(--color-surface-muted);
+}
+</style>

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

@@ -0,0 +1,215 @@
+<template>
+  <span
+    class="va-status-badge"
+    :class="[
+      `va-status-badge--${status}`,
+      `va-status-badge--${size}`,
+      `va-status-badge--${variant}`
+    ]"
+  >
+    <span v-if="showDot" class="va-status-badge__dot" />
+    <span class="va-status-badge__text">
+      <slot>{{ label }}</slot>
+    </span>
+  </span>
+</template>
+
+<script setup lang="ts">
+type BadgeStatus = 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'gold'
+type BadgeSize = 'sm' | 'md' | 'lg'
+type BadgeVariant = 'subtle' | 'solid' | 'outline'
+
+withDefaults(defineProps<{
+  label?: string
+  status?: BadgeStatus
+  size?: BadgeSize
+  variant?: BadgeVariant
+  showDot?: boolean
+}>(), {
+  label: '',
+  status: 'neutral',
+  size: 'md',
+  variant: 'subtle',
+  showDot: true
+})
+</script>
+
+<style scoped>
+.va-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 100px;
+  transition: all 0.2s ease;
+}
+
+.va-status-badge--sm {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.6875rem;
+}
+
+.va-status-badge--md {
+  padding: 0.375rem 0.875rem;
+  font-size: 0.75rem;
+}
+
+.va-status-badge--lg {
+  padding: 0.5rem 1.125rem;
+  font-size: 0.8125rem;
+}
+
+.va-status-badge__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  animation: vaBadgePulse 2s ease-in-out infinite;
+}
+
+.va-status-badge--sm .va-status-badge__dot {
+  width: 5px;
+  height: 5px;
+}
+
+.va-status-badge--lg .va-status-badge__dot {
+  width: 7px;
+  height: 7px;
+}
+
+@keyframes vaBadgePulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Subtle Variant */
+.va-status-badge--subtle.va-status-badge--success {
+  background: rgba(34, 197, 94, 0.12);
+  color: #4ade80;
+}
+.va-status-badge--subtle.va-status-badge--success .va-status-badge__dot {
+  background: #22c55e;
+  box-shadow: 0 0 6px #22c55e;
+}
+
+.va-status-badge--subtle.va-status-badge--warning {
+  background: rgba(245, 158, 11, 0.12);
+  color: #fbbf24;
+}
+.va-status-badge--subtle.va-status-badge--warning .va-status-badge__dot {
+  background: #f59e0b;
+  box-shadow: 0 0 6px #f59e0b;
+}
+
+.va-status-badge--subtle.va-status-badge--error {
+  background: rgba(239, 68, 68, 0.12);
+  color: #f87171;
+}
+.va-status-badge--subtle.va-status-badge--error .va-status-badge__dot {
+  background: #ef4444;
+  box-shadow: 0 0 6px #ef4444;
+}
+
+.va-status-badge--subtle.va-status-badge--info {
+  background: rgba(59, 130, 246, 0.12);
+  color: #60a5fa;
+}
+.va-status-badge--subtle.va-status-badge--info .va-status-badge__dot {
+  background: #3b82f6;
+  box-shadow: 0 0 6px #3b82f6;
+}
+
+.va-status-badge--subtle.va-status-badge--neutral {
+  background: rgba(156, 163, 175, 0.12);
+  color: #9ca3af;
+}
+.va-status-badge--subtle.va-status-badge--neutral .va-status-badge__dot {
+  background: #6b7280;
+}
+
+.va-status-badge--subtle.va-status-badge--gold {
+  background: rgba(212, 175, 55, 0.12);
+  color: #e8c96f;
+}
+.va-status-badge--subtle.va-status-badge--gold .va-status-badge__dot {
+  background: #d4af37;
+  box-shadow: 0 0 6px #d4af37;
+}
+
+/* Solid Variant */
+.va-status-badge--solid.va-status-badge--success {
+  background: #22c55e;
+  color: #052e16;
+}
+
+.va-status-badge--solid.va-status-badge--warning {
+  background: #f59e0b;
+  color: #451a03;
+}
+
+.va-status-badge--solid.va-status-badge--error {
+  background: #ef4444;
+  color: #450a0a;
+}
+
+.va-status-badge--solid.va-status-badge--info {
+  background: #3b82f6;
+  color: #1e3a5f;
+}
+
+.va-status-badge--solid.va-status-badge--neutral {
+  background: #6b7280;
+  color: #1f2937;
+}
+
+.va-status-badge--solid.va-status-badge--gold {
+  background: #d4af37;
+  color: #1a1a1a;
+}
+
+.va-status-badge--solid .va-status-badge__dot {
+  background: currentColor;
+  opacity: 0.5;
+}
+
+/* Outline Variant */
+.va-status-badge--outline {
+  background: transparent;
+  border: 1px solid currentColor;
+}
+
+.va-status-badge--outline.va-status-badge--success {
+  color: #4ade80;
+  border-color: rgba(34, 197, 94, 0.4);
+}
+
+.va-status-badge--outline.va-status-badge--warning {
+  color: #fbbf24;
+  border-color: rgba(245, 158, 11, 0.4);
+}
+
+.va-status-badge--outline.va-status-badge--error {
+  color: #f87171;
+  border-color: rgba(239, 68, 68, 0.4);
+}
+
+.va-status-badge--outline.va-status-badge--info {
+  color: #60a5fa;
+  border-color: rgba(59, 130, 246, 0.4);
+}
+
+.va-status-badge--outline.va-status-badge--neutral {
+  color: #9ca3af;
+  border-color: rgba(156, 163, 175, 0.4);
+}
+
+.va-status-badge--outline.va-status-badge--gold {
+  color: #e8c96f;
+  border-color: rgba(212, 175, 55, 0.4);
+}
+
+.va-status-badge--outline .va-status-badge__dot {
+  background: currentColor;
+}
+</style>