@veristone/nuxt-v-app 0.1.0

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

@@ -0,0 +1,110 @@
+<template>
+  <nav class="va-navigation">
+    <div class="va-navigation__links">
+      <NuxtLink
+        v-for="link in items"
+        :key="link.to"
+        :to="link.to"
+        :exact="link.exact"
+        class="va-navigation__link"
+        active-class="va-navigation__link--active"
+      >
+        <UIcon v-if="link.icon" :name="link.icon" class="va-navigation__link-icon" />
+        {{ link.label }}
+      </NuxtLink>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+interface NavigationItem {
+  label: string
+  to: string
+  icon?: string
+  exact?: boolean
+}
+
+defineProps<{
+  items: NavigationItem[]
+}>()
+</script>
+
+<style scoped>
+.va-navigation {
+  margin-bottom: 2.5rem;
+  animation: vaNavFadeIn 0.8s ease-out 0.3s backwards;
+}
+
+.va-navigation__links {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(212, 175, 55, 0.15);
+  border-radius: 12px;
+  overflow-x: auto;
+}
+
+.va-navigation__link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.875rem 1.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #9ca3af;
+  text-decoration: none;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.va-navigation__link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background: #d4af37;
+  transition: width 0.3s ease;
+}
+
+.va-navigation__link:hover {
+  color: #e8c96f;
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.va-navigation__link--active {
+  color: #d4af37;
+  background: rgba(212, 175, 55, 0.12);
+}
+
+.va-navigation__link--active::before {
+  width: 80%;
+}
+
+.va-navigation__link-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+@keyframes vaNavFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .va-navigation__links {
+    overflow-x: scroll;
+  }
+}
+</style>

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

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+type ActionColor = 'coral' | 'teal' | 'amber' | 'navy' | 'success' | 'gold'
+
+interface QuickAction {
+  id: string
+  label: string
+  description?: string
+  icon: string
+  to?: string
+  color?: ActionColor
+}
+
+const props = withDefaults(defineProps<{
+  actions: QuickAction[]
+  title?: string
+}>(), {
+  title: 'Quick Actions'
+})
+
+const emit = defineEmits<{
+  action: [action: QuickAction]
+}>()
+
+const actionColors: Record<ActionColor, { bg: string; color: string }> = {
+  coral: { bg: 'rgba(255, 92, 53, 0.1)', color: '#ff5c35' },
+  teal: { bg: 'rgba(0, 164, 189, 0.1)', color: '#00a4bd' },
+  amber: { bg: 'rgba(245, 166, 35, 0.1)', color: '#f5a623' },
+  navy: { bg: 'rgba(45, 62, 80, 0.1)', color: '#2d3e50' },
+  success: { bg: 'rgba(0, 189, 165, 0.1)', color: '#00bda5' },
+  gold: { bg: 'rgba(212, 175, 55, 0.1)', color: '#d4af37' }
+}
+
+function getColor(color?: ActionColor) {
+  return actionColors[color || 'coral'] || actionColors.coral
+}
+
+function handleAction(action: QuickAction) {
+  if (action.to) {
+    navigateTo(action.to)
+  } else {
+    emit('action', action)
+  }
+}
+</script>
+
+<template>
+  <div class="va-quick-actions">
+    <h3 v-if="title" class="va-quick-actions__title">{{ title }}</h3>
+
+    <div class="va-quick-actions__grid">
+      <button
+        v-for="(action, index) in actions"
+        :key="action.id"
+        class="va-quick-actions__item animate-fade-in-up"
+        :style="{ animationDelay: `${index * 0.05}s` }"
+        @click="handleAction(action)"
+      >
+        <div
+          class="va-quick-actions__icon"
+          :style="{
+            background: getColor(action.color).bg,
+            color: getColor(action.color).color
+          }"
+        >
+          <UIcon :name="action.icon" class="size-5" />
+        </div>
+        <div class="va-quick-actions__text">
+          <span class="va-quick-actions__label">{{ action.label }}</span>
+          <span v-if="action.description" class="va-quick-actions__description">
+            {{ action.description }}
+          </span>
+        </div>
+        <UIcon name="i-lucide-chevron-right" class="va-quick-actions__arrow size-4 text-muted" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.va-quick-actions {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg, 12px);
+  padding: 1.25rem;
+}
+
+.dark .va-quick-actions {
+  background: rgba(255, 255, 255, 0.02);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.va-quick-actions__title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 1rem;
+}
+
+.va-quick-actions__grid {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.va-quick-actions__item {
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.va-quick-actions__item:hover {
+  background: rgba(255, 255, 255, 0.03);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.va-quick-actions__icon {
+  flex-shrink: 0;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  transition: transform 0.2s ease;
+}
+
+.va-quick-actions__item:hover .va-quick-actions__icon {
+  transform: scale(1.05);
+}
+
+.va-quick-actions__text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.va-quick-actions__label {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: var(--color-text, #e8eaed);
+}
+
+.va-quick-actions__description {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.va-quick-actions__arrow {
+  flex-shrink: 0;
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: all 0.2s ease;
+}
+
+.va-quick-actions__item:hover .va-quick-actions__arrow {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+/**
+ * VASlide - Veristone Slideover
+ * Matches XASlide API with V-App styling.
+ */
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  title?: string
+  side?: 'left' | 'right'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  triggerLabel?: string
+  triggerIcon?: string
+  triggerColor?: string
+  triggerVariant?: string
+  triggerSize?: string
+}>(), {
+  modelValue: undefined,
+  title: '',
+  side: 'right',
+  size: 'md',
+  triggerLabel: '',
+  triggerIcon: '',
+  triggerColor: 'primary',
+  triggerVariant: 'solid',
+  triggerSize: 'sm'
+})
+
+const emit = defineEmits(['update:modelValue', 'open', 'close'])
+
+// Handle v-model or internal state
+const internalOpen = ref(false)
+const isOpen = computed({
+  get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+  set: (val) => {
+    if (props.modelValue !== undefined) emit('update:modelValue', val)
+    internalOpen.value = val
+    if (val) emit('open')
+    else emit('close')
+  }
+})
+
+const open = () => isOpen.value = true
+const close = () => isOpen.value = false
+
+defineExpose({ open, close })
+
+// Variation: Use simpler size mapping
+const widthClass = computed(() => {
+  switch (props.size) {
+    case 'sm': return 'max-w-xs'
+    case 'md': return 'max-w-md'
+    case 'lg': return 'max-w-lg'
+    case 'xl': return 'max-w-2xl' // Variation: XL is wider here
+    case 'full': return 'max-w-full'
+    default: return 'max-w-md'
+  }
+})
+</script>
+
+<template>
+  <div>
+    <!-- Trigger -->
+    <slot name="trigger" :open="open">
+      <UButton
+        v-if="triggerLabel || triggerIcon"
+        :label="triggerLabel"
+        :icon="triggerIcon"
+        :color="triggerColor"
+        :variant="triggerVariant"
+        :size="triggerSize"
+        @click="open"
+      />
+    </slot>
+
+    <!-- Slideover -->
+    <USlideover
+      v-model="isOpen"
+      :side="side"
+      :ui="{ width: widthClass, overlay: { background: 'bg-gray-900/50 backdrop-blur-sm' } }"
+    >
+      <div class="flex flex-col h-full bg-white dark:bg-gray-900 shadow-xl">
+        <!-- Header -->
+        <div class="px-6 py-4 flex items-center justify-between border-b border-gray-100 dark:border-gray-800">
+          <slot name="header">
+            <h2 class="text-lg font-bold text-gray-900 dark:text-white">{{ title }}</h2>
+          </slot>
+          <UButton 
+            color="gray" 
+            variant="ghost" 
+            icon="i-lucide-x" 
+            size="sm"
+            class="-mr-2"
+            @click="close" 
+          />
+        </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-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
+          <slot name="footer" />
+        </div>
+      </div>
+    </USlideover>
+  </div>
+</template>

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

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/**
+ * VASlideover - Custom Slideover Component
+ * Pure Vue/Tailwind implementation without USlideover
+ *
+ * Features:
+ * - Side: left or right
+ * - Size variants: sm, md, lg, xl, full
+ * - Smooth slide transitions
+ * - Backdrop with optional blur
+ * - Accessible: focus trap, escape key, click outside to close
+ */
+import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+
+const props = withDefaults(defineProps<{
+  modelValue?: boolean
+  title?: string
+  side?: 'left' | 'right'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  closable?: boolean
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+  showBackdrop?: boolean
+  backdropBlur?: boolean
+  // Trigger props for self-contained usage
+  triggerLabel?: string
+  triggerIcon?: string
+  triggerColor?: string
+  triggerVariant?: string
+  triggerSize?: string
+}>(), {
+  modelValue: undefined,
+  title: '',
+  side: 'right',
+  size: 'md',
+  closable: true,
+  closeOnEscape: true,
+  closeOnClickOutside: true,
+  showBackdrop: true,
+  backdropBlur: true,
+  triggerLabel: '',
+  triggerIcon: '',
+  triggerColor: 'primary',
+  triggerVariant: 'solid',
+  triggerSize: 'sm'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'open': []
+  'close': []
+}>()
+
+// Slideover ref for focus trap
+const slideoverRef = ref<HTMLElement | null>(null)
+const { activate, deactivate } = useFocusTrap(slideoverRef, {
+  immediate: false,
+  allowOutsideClick: true,
+  escapeDeactivates: false
+})
+
+// Internal state for self-contained mode
+const internalOpen = ref(false)
+
+// Computed open state (supports both v-model and internal)
+const isOpen = computed({
+  get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+  set: (val) => {
+    if (props.modelValue !== undefined) {
+      emit('update:modelValue', val)
+    }
+    internalOpen.value = val
+  }
+})
+
+// Close slideover
+const close = () => {
+  if (!props.closable) return
+  isOpen.value = false
+  emit('close')
+}
+
+// Open slideover
+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 'w-80 max-w-[90vw]'
+    case 'md': return 'w-96 max-w-[90vw]'
+    case 'lg': return 'w-[32rem] max-w-[90vw]'
+    case 'xl': return 'w-[42rem] max-w-[90vw]'
+    case 'full': return 'w-screen'
+    default: return 'w-96 max-w-[90vw]'
+  }
+})
+
+// Transition classes based on side
+const transitionClasses = computed(() => {
+  if (props.side === 'left') {
+    return {
+      enterFrom: '-translate-x-full',
+      enterTo: 'translate-x-0',
+      leaveFrom: 'translate-x-0',
+      leaveTo: '-translate-x-full'
+    }
+  }
+  return {
+    enterFrom: 'translate-x-full',
+    enterTo: 'translate-x-0',
+    leaveFrom: 'translate-x-0',
+    leaveTo: 'translate-x-full'
+  }
+})
+
+// Position classes based on side
+const positionClasses = computed(() => {
+  return props.side === 'left' ? 'left-0' : 'right-0'
+})
+
+// Expose methods
+defineExpose({ open, close })
+</script>
+
+<template>
+  <div>
+    <!-- Trigger -->
+    <slot name="trigger" :open="open">
+      <UButton
+        v-if="triggerLabel || triggerIcon"
+        :label="triggerLabel"
+        :icon="triggerIcon"
+        :color="triggerColor"
+        :variant="triggerVariant"
+        :size="triggerSize"
+        @click="open"
+      />
+    </slot>
+
+    <!-- Slideover Panel -->
+    <Transition
+      enter-active-class="duration-300 ease-out"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="duration-200 ease-in"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="isOpen"
+        class="fixed inset-0 z-50"
+        @keydown="handleKeydown"
+      >
+        <!-- Backdrop -->
+        <div
+          v-if="showBackdrop"
+          class="absolute inset-0"
+          :class="backdropBlur ? 'bg-gray-900/60 backdrop-blur-sm' : 'bg-gray-900/60'"
+          @click="handleBackdropClick"
+        />
+
+        <!-- Panel -->
+        <Transition
+          enter-active-class="duration-300 ease-out transform"
+          :enter-from-class="transitionClasses.enterFrom"
+          :enter-to-class="transitionClasses.enterTo"
+          leave-active-class="duration-200 ease-in transform"
+          :leave-from-class="transitionClasses.leaveFrom"
+          :leave-to-class="transitionClasses.leaveTo"
+        >
+          <div
+            v-if="isOpen"
+            ref="slideoverRef"
+            class="fixed inset-y-0 flex flex-col bg-white dark:bg-gray-900 shadow-2xl border-gray-200 dark:border-gray-800"
+            :class="[
+              sizeClasses,
+              positionClasses,
+              side === 'left' ? 'border-r' : 'border-l'
+            ]"
+            role="dialog"
+            aria-modal="true"
+            :aria-labelledby="title ? 'va-slideover-title' : undefined"
+          >
+            <!-- Header -->
+            <div 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-slideover-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 slideover"
+                @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>
+  </div>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  title?: string
+  description?: string
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center py-12 px-4 text-center">
+    <div class="p-4 rounded-full bg-gray-50 dark:bg-gray-800/50 mb-4 ring-1 ring-gray-100 dark:ring-gray-800">
+      <UIcon :name="icon || 'i-lucide-inbox'" class="w-8 h-8 text-gray-400" />
+    </div>
+    <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ title || 'No data found' }}</h3>
+    <p v-if="description" class="mt-1 text-sm text-gray-500 max-w-sm mx-auto">{{ description }}</p>
+    <div v-if="$slots.action" class="mt-6">
+      <slot name="action" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  description?: string
+  retryable?: boolean
+}>()
+
+defineEmits(['retry'])
+</script>
+
+<template>
+  <div class="rounded-lg bg-red-50 dark:bg-red-900/10 p-4 border border-red-100 dark:border-red-900/20">
+    <div class="flex items-start">
+      <div class="flex-shrink-0">
+        <UIcon name="i-lucide-alert-circle" class="w-5 h-5 text-red-400" />
+      </div>
+      <div class="ml-3 w-full">
+        <h3 class="text-sm font-medium text-red-800 dark:text-red-200">{{ title || 'Error' }}</h3>
+        <div class="mt-2 text-sm text-red-700 dark:text-red-300">
+          <p>{{ description || 'An unexpected error occurred.' }}</p>
+        </div>
+        <div v-if="retryable" class="mt-4">
+          <button
+            type="button"
+            class="rounded-md bg-red-50 dark:bg-red-900/20 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2"
+            @click="$emit('retry')"
+          >
+            Try again
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>