@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="va-loading-state" :class="`va-loading-state--${size}`">
+    <div class="va-loading-state__container">
+      <div class="va-loading-state__ring">
+        <div class="va-loading-state__ring-inner" />
+        <UIcon v-if="icon" :name="icon" class="va-loading-state__icon" />
+      </div>
+
+      <div v-if="text || description" class="va-loading-state__content">
+        <p v-if="text" class="va-loading-state__text">{{ text }}</p>
+        <p v-if="description" class="va-loading-state__description">{{ description }}</p>
+      </div>
+    </div>
+
+    <div v-if="showSkeleton" class="va-loading-state__skeleton">
+      <USkeleton v-for="i in skeletonRows" :key="i" class="va-loading-state__skeleton-row" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+type LoadingSize = 'sm' | 'md' | 'lg'
+
+withDefaults(defineProps<{
+  size?: LoadingSize
+  text?: string
+  description?: string
+  icon?: string
+  showSkeleton?: boolean
+  skeletonRows?: number
+}>(), {
+  size: 'md',
+  text: 'Loading...',
+  description: '',
+  icon: '',
+  showSkeleton: false,
+  skeletonRows: 3
+})
+</script>
+
+<style scoped>
+.va-loading-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  animation: vaLoadingFadeIn 0.3s ease-out;
+}
+
+@keyframes vaLoadingFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.va-loading-state--sm { padding: 2rem 1rem; }
+.va-loading-state--md { padding: 3rem 1.5rem; }
+.va-loading-state--lg { padding: 5rem 2rem; min-height: 400px; }
+
+.va-loading-state__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.25rem;
+}
+
+.va-loading-state__ring {
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+.va-loading-state--sm .va-loading-state__ring { width: 32px; height: 32px; }
+.va-loading-state--lg .va-loading-state__ring { width: 64px; height: 64px; }
+
+.va-loading-state__ring::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 2px solid rgba(212, 175, 55, 0.1);
+  border-radius: 50%;
+}
+
+.va-loading-state__ring-inner {
+  position: absolute;
+  inset: 0;
+  border: 2px solid transparent;
+  border-top-color: #d4af37;
+  border-radius: 50%;
+  animation: vaLoadingSpin 1s linear infinite;
+}
+
+@keyframes vaLoadingSpin {
+  to { transform: rotate(360deg); }
+}
+
+.va-loading-state__icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #d4af37;
+  opacity: 0.6;
+}
+
+.va-loading-state--sm .va-loading-state__icon { width: 14px; height: 14px; }
+.va-loading-state--md .va-loading-state__icon { width: 18px; height: 18px; }
+.va-loading-state--lg .va-loading-state__icon { width: 24px; height: 24px; }
+
+.va-loading-state__content { text-align: center; }
+
+.va-loading-state__text {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text, #e8eaed);
+  letter-spacing: 0.02em;
+}
+
+.va-loading-state__description {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted, #9ca3af);
+  margin-top: 0.25rem;
+}
+
+.va-loading-state__skeleton {
+  width: 100%;
+  max-width: 600px;
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.va-loading-state__skeleton-row {
+  height: 1rem;
+  border-radius: 6px;
+}
+
+.va-loading-state__skeleton-row:nth-child(odd) { width: 100%; }
+.va-loading-state__skeleton-row:nth-child(even) { width: 75%; }
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <div class="va-metric-card" :style="{ animationDelay }">
+    <div class="va-metric-accent" />
+    <div class="va-metric-content">
+      <div class="va-metric-label">{{ label }}</div>
+      <div class="va-metric-value" :class="{ 'va-metric-date': isDate }">
+        <slot>{{ value }}</slot>
+        <span v-if="unit" class="va-metric-unit">{{ unit }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  value?: string | number
+  unit?: string
+  isDate?: boolean
+  animationDelay?: string
+}>()
+</script>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&display=swap');
+
+.va-metric-card {
+  position: relative;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(212, 175, 55, 0.15);
+  border-radius: 16px;
+  padding: 2rem;
+  overflow: hidden;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: fadeInUp 0.6s ease-out backwards;
+}
+
+.va-metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    135deg,
+    rgba(212, 175, 55, 0.03) 0%,
+    transparent 100%
+  );
+  opacity: 0;
+  transition: opacity 0.4s ease;
+}
+
+.va-metric-card:hover {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: #d4af37;
+  transform: translateY(-4px);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.3),
+    0 0 0 1px #d4af37;
+}
+
+.va-metric-card:hover::before {
+  opacity: 1;
+}
+
+.va-metric-accent {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 0;
+  background: linear-gradient(
+    180deg,
+    #d4af37 0%,
+    #e8c96f 100%
+  );
+  transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.va-metric-card:hover .va-metric-accent {
+  height: 100%;
+}
+
+.va-metric-content {
+  position: relative;
+  z-index: 1;
+}
+
+.va-metric-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #9ca3af;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.75rem;
+}
+
+.va-metric-value {
+  font-family: 'Cormorant Garamond', serif;
+  font-size: 2.25rem;
+  font-weight: 600;
+  color: #faf8f3;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+.va-metric-unit {
+  font-size: 1.5rem;
+  opacity: 0.7;
+  margin-left: 0.125rem;
+}
+
+.va-metric-date {
+  font-size: 1.75rem;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>

package/app/components/V/A/Modal/Base.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+/**
+ * VAModalBase - Custom Modal Component
+ * Pure Vue/Tailwind implementation without UModal
+ *
+ * Features:
+ * - Size variants: sm, md, lg, xl, full
+ * - Backdrop with optional blur
+ * - Accessible: focus trap, escape key, click outside to close
+ * - Header/body/footer slots
+ * - Smooth enter/leave transitions
+ */
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  title?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  closable?: boolean
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+  showBackdrop?: boolean
+  backdropBlur?: boolean
+}>(), {
+  modelValue: false,
+  title: '',
+  size: 'md',
+  closable: true,
+  closeOnEscape: true,
+  closeOnClickOutside: true,
+  showBackdrop: true,
+  backdropBlur: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'open': []
+  'close': []
+}>()
+
+// Modal ref for focus trap
+const modalRef = ref<HTMLElement | null>(null)
+const { activate, deactivate } = useFocusTrap(modalRef, {
+  immediate: false,
+  allowOutsideClick: true,
+  escapeDeactivates: false // We handle escape ourselves
+})
+
+// Computed open state
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+// Close modal
+const close = () => {
+  if (!props.closable) return
+  isOpen.value = false
+  emit('close')
+}
+
+// Open modal
+const open = () => {
+  isOpen.value = true
+  emit('open')
+}
+
+// Handle escape key
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.closeOnEscape && props.closable) {
+    close()
+  }
+}
+
+// Handle click outside
+const handleBackdropClick = (e: MouseEvent) => {
+  if (e.target === e.currentTarget && props.closeOnClickOutside && props.closable) {
+    close()
+  }
+}
+
+// Watch for open state changes
+watch(isOpen, (val) => {
+  if (val) {
+    document.body.style.overflow = 'hidden'
+    nextTick(() => {
+      activate()
+    })
+  } else {
+    document.body.style.overflow = ''
+    deactivate()
+  }
+})
+
+// Cleanup on unmount
+onUnmounted(() => {
+  document.body.style.overflow = ''
+  deactivate()
+})
+
+// Size classes
+const sizeClasses = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'max-w-sm'
+    case 'md': return 'max-w-md'
+    case 'lg': return 'max-w-lg'
+    case 'xl': return 'max-w-2xl'
+    case 'full': return 'max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] h-full'
+    default: return 'max-w-md'
+  }
+})
+
+// Expose methods
+defineExpose({ open, close })
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="duration-200 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-150 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50 flex items-center justify-center p-4"
+        :class="[
+          showBackdrop ? (backdropBlur ? 'bg-gray-900/60 backdrop-blur-sm' : 'bg-gray-900/60') : ''
+        ]"
+        @click="handleBackdropClick"
+        @keydown="handleKeydown"
+      >
+        <Transition
+          enter-active-class="duration-200 ease-out"
+          enter-from-class="opacity-0 scale-95 translate-y-4"
+          enter-to-class="opacity-100 scale-100 translate-y-0"
+          leave-active-class="duration-150 ease-in"
+          leave-from-class="opacity-100 scale-100 translate-y-0"
+          leave-to-class="opacity-0 scale-95 translate-y-4"
+        >
+          <div
+            v-if="isOpen"
+            ref="modalRef"
+            class="relative w-full bg-white dark:bg-gray-900 rounded-xl shadow-2xl border border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden"
+            :class="[sizeClasses, size === 'full' ? '' : 'max-h-[calc(100vh-2rem)]']"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="title ? 'va-modal-title' : undefined"
+          >
+            <!-- Header -->
+            <div
+              v-if="title || $slots.header || closable"
+              class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800 shrink-0"
+            >
+              <slot name="header">
+                <h2
+                  v-if="title"
+                  id="va-modal-title"
+                  class="text-lg font-semibold text-gray-900 dark:text-white"
+                >
+                  {{ title }}
+                </h2>
+              </slot>
+              <button
+                v-if="closable"
+                type="button"
+                class="p-1.5 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500"
+                aria-label="Close modal"
+                @click="close"
+              >
+                <UIcon name="i-lucide-x" class="w-5 h-5" />
+              </button>
+            </div>
+
+            <!-- Body -->
+            <div class="flex-1 overflow-y-auto px-6 py-4">
+              <slot />
+            </div>
+
+            <!-- Footer -->
+            <div
+              v-if="$slots.footer"
+              class="px-6 py-4 border-t border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 shrink-0"
+            >
+              <slot name="footer" />
+            </div>
+          </div>
+        </Transition>
+      </div>
+    </Transition>
+  </Teleport>
+</template>

package/app/components/V/A/Modal/Confirm.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * VAModalConfirm - Veristone Confirmation Modal
+ */
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  title?: string
+  message?: string
+  variant?: 'info' | 'warning' | 'danger'
+  confirmText?: string
+  cancelText?: string
+  loading?: boolean
+}>(), {
+  modelValue: false,
+  title: 'Confirm Action',
+  message: 'Are you sure you want to proceed?',
+  variant: 'warning',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel'
+})
+
+const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
+
+const isOpen = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val)
+})
+
+const confirmColor = computed(() => {
+  switch (props.variant) {
+    case 'danger': return 'red'
+    case 'warning': return 'orange'
+    case 'info': return 'blue'
+    default: return 'primary'
+  }
+})
+
+const iconName = computed(() => {
+  switch (props.variant) {
+    case 'danger': return 'i-lucide-alert-triangle'
+    case 'warning': return 'i-lucide-alert-circle'
+    case 'info': return 'i-lucide-info'
+    default: return 'i-lucide-help-circle'
+  }
+})
+
+const handleConfirm = () => {
+  emit('confirm')
+  if (!props.loading) isOpen.value = false
+}
+
+const handleCancel = () => {
+  emit('cancel')
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <UModal v-model="isOpen">
+    <div class="p-6">
+      <div class="flex items-start gap-4">
+        <div class="flex-shrink-0 p-2 rounded-full" :class="`bg-${confirmColor}-50 dark:bg-${confirmColor}-900/20 text-${confirmColor}-600 dark:text-${confirmColor}-400`">
+          <UIcon :name="iconName" class="w-6 h-6" />
+        </div>
+        <div class="flex-1">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white leading-6">
+            {{ title }}
+          </h3>
+          <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+      
+      <div class="mt-6 flex justify-end gap-3">
+        <UButton 
+          :label="cancelText" 
+          color="gray" 
+          variant="ghost" 
+          @click="handleCancel" 
+        />
+        <UButton 
+          :label="confirmText" 
+          :color="confirmColor" 
+          variant="solid" 
+          :loading="loading" 
+          @click="handleConfirm" 
+        />
+      </div>
+    </div>
+  </UModal>
+</template>

package/app/components/V/A/Modal/Form.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+/**
+ * VAModalForm - Veristone Form Modal (CRUD aware)
+ */
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  title?: string
+  endpoint?: string
+  recordId?: string | number
+  initialData?: any
+  size?: string
+  loading?: boolean
+  error?: string
+}>(), {
+  modelValue: false,
+  title: 'Edit Record',
+  size: 'md'
+})
+
+const emit = defineEmits(['update:modelValue', 'submit', 'success', 'error'])
+
+const { findOne, create, update, loading: crudLoading, errorState } = useVCrud(props.endpoint || '')
+const internalOpen = ref(false)
+const formData = ref({ ...(props.initialData || {}) })
+const isEdit = computed(() => !!props.recordId)
+
+const isOpen = computed({
+  get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+  set: (val) => {
+    emit('update:modelValue', val)
+    internalOpen.value = val
+  }
+})
+
+// Fetch data on open if endpoint/id provided
+watch(isOpen, async (val) => {
+  if (val && props.endpoint && props.recordId) {
+    try {
+      formData.value = await findOne(props.recordId)
+    } catch (e) {
+      // Error handled by composable
+    }
+  } else if (val && !props.recordId) {
+    formData.value = { ...(props.initialData || {}) }
+  }
+})
+
+const handleSubmit = async (data: any = formData.value) => {
+  emit('submit', data)
+  
+  if (props.endpoint) {
+    try {
+      if (isEdit.value) {
+        await update(props.recordId!, data)
+      } else {
+        await create(data)
+      }
+      emit('success')
+      isOpen.value = false
+    } catch (e) {
+      emit('error', e)
+    }
+  }
+}
+</script>
+
+<template>
+  <UModal v-model="isOpen" :ui="{ width: size === 'lg' ? 'sm:max-w-4xl' : 'sm:max-w-xl' }">
+    <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        <div class="flex items-center justify-between">
+          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+          <UButton color="gray" variant="ghost" icon="i-lucide-x" class="-my-1" @click="isOpen = false" />
+        </div>
+      </template>
+
+      <div class="p-6">
+        <slot 
+          :state="formData" 
+          :loading="loading || crudLoading" 
+          :error="error || errorState"
+          :submit="handleSubmit"
+        >
+          <!-- Default content if no slot -->
+          <form @submit.prevent="handleSubmit()">
+            <div class="space-y-4">
+              <!-- If we knew fields we'd render them, but this is generic -->
+              <p class="text-gray-500 italic">Form content goes here...</p>
+            </div>
+          </form>
+        </slot>
+        
+        <div v-if="error || errorState" class="mt-4 p-3 rounded bg-red-50 text-red-600 text-sm">
+          {{ error || errorState }}
+        </div>
+      </div>
+
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" :submit="handleSubmit" :loading="loading || crudLoading" />
+      </template>
+    </UCard>
+  </UModal>
+</template>