@veristone/nuxt-v-app 0.1.0

package/README.md

@@ -0,0 +1,42 @@
+# @veristone/nuxt-v-app
+
+Veristone Nuxt App Layer — shared components, composables, and layouts for Nuxt 4 apps.
+
+## Requirements
+
+- **Nuxt** ^4.0.0  
+- **@nuxt/ui** ^4.0.0  
+
+## Installation
+
+```bash
+npm install @veristone/nuxt-v-app
+# or
+pnpm add @veristone/nuxt-v-app
+# or
+bun add @veristone/nuxt-v-app
+```
+
+## Usage
+
+Extend the layer in your Nuxt config:
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: ['@veristone/nuxt-v-app'],
+})
+```
+
+The layer adds:
+
+- **Components** — `V/*`, `Va/*` (e.g. `V.A.Card`, `VaCardKpi`, `VaChartRevenue`)
+- **Composables** — `useDashboard`, `useVAUtils`, `useVCrud`, `useVFetch`, etc.
+- **Layouts** — `default`, `legacy`
+- **Styles** — `v-app.css` (Tailwind-based)
+
+Ensure `@nuxt/ui` and `nuxt` are installed in your app (they are peer dependencies).
+
+## License
+
+MIT

package/app/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <UApp>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>

package/app/assets/css/v-app.css

@@ -0,0 +1,313 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+/* ============================================
+   Veristone Design System - HubSpot Style
+   ============================================ */
+
+:root {
+  /* HubSpot Color Palette */
+  --va-coral-50: #fff5f2;
+  --va-coral-100: #ffe8e1;
+  --va-coral-200: #ffc9b8;
+  --va-coral-300: #ffa285;
+  --va-coral-400: #ff7a52;
+  --va-coral-500: #ff5c35;
+  --va-coral-600: #e8491d;
+  --va-coral-700: #c23a14;
+  --va-coral-800: #9a2f11;
+  --va-coral-900: #7d2810;
+
+  --va-teal-50: #e6f8fa;
+  --va-teal-100: #b3ecf3;
+  --va-teal-200: #80e0ec;
+  --va-teal-300: #4dd4e5;
+  --va-teal-400: #26c9de;
+  --va-teal-500: #00a4bd;
+  --va-teal-600: #008da3;
+  --va-teal-700: #007589;
+  --va-teal-800: #005e6f;
+  --va-teal-900: #004655;
+
+  --va-navy-500: #2d3e50;
+  --va-navy-600: #213343;
+  --va-navy-700: #1a2836;
+  --va-navy-800: #131d29;
+  --va-navy-900: #0d131c;
+
+  /* Semantic Colors */
+  --va-success: #00a4bd;
+  --va-warning: #f5a623;
+  --va-error: #f2545b;
+  --va-info: #5c6ac4;
+
+  /* Shadow System - HubSpot inspired */
+  --va-shadow-xs: 0 1px 2px rgba(33, 51, 67, 0.04);
+  --va-shadow-sm: 0 1px 3px rgba(33, 51, 67, 0.06), 0 1px 2px rgba(33, 51, 67, 0.04);
+  --va-shadow-md: 0 4px 6px rgba(33, 51, 67, 0.06), 0 2px 4px rgba(33, 51, 67, 0.04);
+  --va-shadow-lg: 0 10px 15px rgba(33, 51, 67, 0.08), 0 4px 6px rgba(33, 51, 67, 0.04);
+  --va-shadow-xl: 0 20px 25px rgba(33, 51, 67, 0.10), 0 10px 10px rgba(33, 51, 67, 0.04);
+
+  /* Card-specific shadows */
+  --va-card-shadow: 0 1px 3px rgba(33, 51, 67, 0.06), 0 1px 2px rgba(33, 51, 67, 0.04);
+  --va-card-shadow-hover: 0 6px 16px rgba(0, 164, 189, 0.10), 0 2px 6px rgba(33, 51, 67, 0.06);
+
+  /* Timing Functions */
+  --va-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+  --va-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --va-ease-snap: cubic-bezier(0.22, 1, 0.36, 1);
+
+  /* Duration */
+  --va-duration-fast: 150ms;
+  --va-duration-normal: 200ms;
+  --va-duration-slow: 300ms;
+
+  /* Border Radius */
+  --va-radius-sm: 6px;
+  --va-radius-md: 8px;
+  --va-radius-lg: 12px;
+  --va-radius-xl: 16px;
+
+  /* Font families */
+  --va-font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --va-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+/* Dark mode overrides */
+.dark {
+  --va-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.12);
+  --va-card-shadow-hover: 0 6px 16px rgba(0, 164, 189, 0.15), 0 2px 6px rgba(0, 0, 0, 0.12);
+}
+
+/* ============================================
+   Animations
+   ============================================ */
+
+@keyframes va-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes va-fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes va-fade-in-down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes va-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes va-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes va-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+@keyframes va-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+@keyframes va-count-up {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+  animation: va-fade-in var(--va-duration-normal) var(--va-ease-smooth) forwards;
+}
+
+.animate-fade-in-up {
+  animation: va-fade-in-up var(--va-duration-slow) var(--va-ease-smooth) forwards;
+}
+
+.animate-fade-in-down {
+  animation: va-fade-in-down var(--va-duration-slow) var(--va-ease-smooth) forwards;
+}
+
+.animate-scale-in {
+  animation: va-scale-in var(--va-duration-normal) var(--va-ease-smooth) forwards;
+}
+
+.animate-slide-in-left {
+  animation: va-slide-in-left var(--va-duration-slow) var(--va-ease-smooth) forwards;
+}
+
+/* ============================================
+   Component Utilities
+   ============================================ */
+
+/* Card base styles */
+.va-card-base {
+  background: white;
+  border: 1px solid rgb(229 231 235);
+  border-radius: var(--va-radius-lg);
+  box-shadow: var(--va-card-shadow);
+  transition: box-shadow var(--va-duration-normal) var(--va-ease-smooth),
+              transform var(--va-duration-normal) var(--va-ease-smooth);
+}
+
+.va-card-base:hover {
+  box-shadow: var(--va-card-shadow-hover);
+  transform: translateY(-2px);
+}
+
+.dark .va-card-base {
+  background: rgb(17 24 39);
+  border-color: rgb(31 41 55);
+}
+
+/* Accent bar for cards */
+.va-accent-bar {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  border-radius: var(--va-radius-lg) 0 0 var(--va-radius-lg);
+  background: var(--va-coral-500);
+  opacity: 0;
+  transition: opacity var(--va-duration-fast) var(--va-ease-smooth);
+}
+
+.va-card-base:hover .va-accent-bar {
+  opacity: 1;
+}
+
+/* Table row hover effect */
+.va-table-row-hover {
+  transition: background-color var(--va-duration-fast) var(--va-ease-smooth);
+}
+
+.va-table-row-hover:hover {
+  background-color: rgb(249 250 251);
+}
+
+.dark .va-table-row-hover:hover {
+  background-color: rgb(31 41 55);
+}
+
+/* Sidebar active indicator */
+.va-nav-indicator {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 3px;
+  height: 24px;
+  background: var(--va-coral-500);
+  border-radius: 0 2px 2px 0;
+  opacity: 0;
+  transition: opacity var(--va-duration-fast) var(--va-ease-smooth);
+}
+
+.va-nav-active .va-nav-indicator {
+  opacity: 1;
+}
+
+/* Skeleton loading */
+.va-skeleton {
+  background: linear-gradient(
+    90deg,
+    rgb(229 231 235) 0%,
+    rgb(243 244 246) 50%,
+    rgb(229 231 235) 100%
+  );
+  background-size: 200% 100%;
+  animation: va-shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--va-radius-sm);
+}
+
+.dark .va-skeleton {
+  background: linear-gradient(
+    90deg,
+    rgb(55 65 81) 0%,
+    rgb(75 85 99) 50%,
+    rgb(55 65 81) 100%
+  );
+  background-size: 200% 100%;
+}
+
+/* Action buttons fade-in on row hover */
+.va-row-actions {
+  opacity: 0;
+  transition: opacity var(--va-duration-fast) var(--va-ease-smooth);
+}
+
+.va-table-row-hover:hover .va-row-actions {
+  opacity: 1;
+}
+
+/* Focus ring utility */
+.va-focus-ring:focus-visible {
+  outline: 2px solid var(--va-coral-500);
+  outline-offset: 2px;
+}
+
+/* ============================================
+   Dashboard 2 Chart & Visualization Variables
+   Source: reference-repos/nuxt-dashboard-2-main/app/assets/css/main.css
+   ============================================ */
+
+:root {
+  /* Chart Tooltip Styling */
+  --vis-tooltip-title-color: var(--ui-text) !important;
+  --vis-tooltip-title-border-bottom: 1px solid var(--ui-border) !important;
+  --vis-tooltip-label-color: var(--ui-text-muted) !important;
+
+  /* Chart Background & Donut */
+  --vis-donut-background-color: var(--ui-bg-elevated) !important;
+
+  /* Legend Spacing */
+  --vis-legend-spacing: 0.75rem;
+
+  /* Axis & Grid Styling */
+  --vis-axis-grid-color: var(--ui-border) !important;
+  --vis-axis-tick-label-color: var(--ui-text-muted) !important;
+  --vis-axis-label-color: var(--ui-text-toned) !important;
+  --vis-legend-label-color: var(--ui-text-toned) !important;
+
+  /* Tooltip Styling */
+  --vis-tooltip-padding: 0 !important;
+  --vis-tooltip-background-color: var(--ui-bg) !important;
+  --vis-tooltip-border-color: var(--ui-border) !important;
+  --vis-tooltip-text-color: var(--ui-text-toned) !important;
+
+  /* Legend Spacing (override) */
+  --vis-legend-spacing: 1rem;
+}

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

@@ -0,0 +1,75 @@
+<template>
+  <div
+    class="va-badge"
+    :class="badgeClass"
+  >
+    <span v-if="showDot" class="va-badge-dot" />
+    <span class="va-badge-text">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label: string
+  status?: string
+  showDot?: boolean
+}>(), {
+  status: '',
+  showDot: true
+})
+
+const badgeClass = computed(() => {
+  if (props.status) {
+    return `va-badge-${props.status.toLowerCase().replace(/\s+/g, '-')}`
+  }
+  return ''
+})
+</script>
+
+<style scoped>
+.va-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(212, 175, 55, 0.15);
+  border-radius: 100px;
+  transition: all 0.3s ease;
+}
+
+.va-badge:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: #d4af37;
+  transform: translateY(-1px);
+}
+
+.va-badge-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #d4af37;
+  box-shadow: 0 0 8px #d4af37;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.va-badge-text {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #e8eaed;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.6;
+    transform: scale(0.95);
+  }
+}
+</style>

package/app/components/V/A/Btn/Add.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  to?: string
+  icon?: string
+}>()
+</script>
+
+<template>
+  <UButton
+    :label="label || 'Add New'"
+    :to="to"
+    :icon="icon || 'i-lucide-plus'"
+    color="primary"
+    variant="soft"
+  />
+</template>

package/app/components/V/A/Btn/Back.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+  to?: string | object
+  label?: string
+  icon?: string
+}>()
+
+const router = useRouter()
+const goBack = () => {
+  if (props.to) return router.push(props.to)
+  router.back()
+}
+</script>
+
+<template>
+  <UButton
+    :icon="icon || 'i-lucide-arrow-left'"
+    :label="label || 'Back'"
+    color="gray"
+    variant="ghost"
+    size="sm"
+    class="-ml-2"
+    @click="goBack"
+  />
+</template>

package/app/components/V/A/Btn/ConfirmDelete.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const props = defineProps<{
+  endpoint: string
+  id: string | number
+  itemName?: string
+  triggerIcon?: string
+}>()
+
+const emit = defineEmits(['success', 'deleted'])
+const { remove, loading } = useVCrud(props.endpoint)
+const isOpen = ref(false)
+
+const onConfirm = async () => {
+  try {
+    await remove(props.id)
+    emit('success')
+    emit('deleted', props.id)
+    isOpen.value = false
+  } catch (e) {
+    // Handled
+  }
+}
+</script>
+
+<template>
+  <div class="inline-block">
+    <UButton
+      :icon="triggerIcon || 'i-lucide-trash-2'"
+      color="red"
+      variant="ghost"
+      size="xs"
+      @click="isOpen = true"
+    />
+    
+    <VAModalConfirm
+      v-model="isOpen"
+      title="Delete Item"
+      :message="`Are you sure you want to delete this ${itemName || 'item'}? This cannot be undone.`"
+      variant="danger"
+      confirm-text="Delete"
+      :loading="loading"
+      @confirm="onConfirm"
+    />
+  </div>
+</template>

package/app/components/V/A/Btn/Edit.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const props = defineProps<{
+  endpoint?: string
+  id?: string | number
+  title?: string
+}>()
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div class="inline-block">
+    <slot name="trigger" :open="() => isOpen = true">
+      <UButton
+        icon="i-lucide-pencil"
+        color="gray"
+        variant="ghost"
+        size="xs"
+        @click="isOpen = true"
+      />
+    </slot>
+
+    <VAModalForm
+      v-model="isOpen"
+      :title="title || 'Edit Record'"
+      :endpoint="endpoint"
+      :record-id="id"
+      v-bind="$attrs"
+    >
+      <template #default="slotProps">
+        <slot v-bind="slotProps" />
+      </template>
+    </VAModalForm>
+  </div>
+</template>

package/app/components/V/A/Btn/Export.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+const props = defineProps<{
+  loading?: boolean
+  formats?: string[]
+}>()
+
+const emit = defineEmits(['export'])
+const items = computed(() => [
+  (props.formats || ['csv', 'excel', 'pdf']).map(f => ({
+    label: f.toUpperCase(),
+    icon: f === 'pdf' ? 'i-lucide-file-text' : 'i-lucide-table',
+    onSelect: () => emit('export', f)
+  }))
+])
+</script>
+
+<template>
+  <UDropdownMenu :items="items" :content="{ align: 'end' }">
+    <UButton
+      icon="i-lucide-download"
+      label="Export"
+      color="neutral"
+      variant="soft"
+      size="sm"
+      :loading="loading"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/V/A/Btn/Refresh.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+const props = defineProps<{
+  loading?: boolean
+  label?: string
+}>()
+
+defineEmits(['refresh'])
+</script>
+
+<template>
+  <UButton
+    icon="i-lucide-refresh-cw"
+    :loading="loading"
+    :label="label"
+    color="gray"
+    variant="ghost"
+    size="sm"
+    :class="{ 'animate-spin': loading && !label }"
+    @click="$emit('refresh')"
+  />
+</template>

package/app/components/V/A/Btn/Submit.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  label?: string
+  loading?: boolean
+  disabled?: boolean
+  color?: string
+  variant?: string
+  icon?: string
+  align?: string
+  showCancel?: boolean
+  cancelLabel?: string
+}>(), {
+  label: 'Save',
+  loading: false,
+  disabled: false,
+  color: 'primary',
+  variant: 'solid',
+  showCancel: false,
+  cancelLabel: 'Cancel'
+})
+
+defineEmits(['cancel'])
+</script>
+
+<template>
+  <div class="flex items-center gap-3" :class="{ 'justify-end': align === 'right', 'justify-center': align === 'center', 'justify-start': align === 'left' || !align }">
+    <UButton
+      v-if="showCancel"
+      :label="cancelLabel"
+      color="gray"
+      variant="ghost"
+      :disabled="loading"
+      @click="$emit('cancel')"
+    />
+    <UButton
+      type="submit"
+      :label="label"
+      :loading="loading"
+      :disabled="disabled || loading"
+      :color="color"
+      :variant="variant"
+      :icon="icon"
+    />
+  </div>
+</template>

package/app/components/V/A/Btn/View.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const props = defineProps<{
+  to?: string | object
+  id?: string | number
+  triggerIcon?: string
+  triggerColor?: string
+  triggerVariant?: string
+  triggerSize?: string
+}>()
+
+// Simple view button that links to a detail page
+</script>
+
+<template>
+  <UButton
+    :to="to"
+    :icon="triggerIcon || 'i-lucide-eye'"
+    :color="triggerColor || 'gray'"
+    :variant="triggerVariant || 'ghost'"
+    :size="triggerSize || 'xs'"
+    aria-label="View"
+  />
+</template>