@veristone/nuxt-v-app 0.2.0 → 0.2.1

package/app/components/V/A/Crud/Delete.vue

@@ -111,7 +111,6 @@ const handleDelete = async () => {
       </div>
     </template>
 
-    <!-- Modal Content -->
     <template #body>
       <div class="p-4 space-y-4">
         <div class="flex items-start gap-4">

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

@@ -1,195 +1,92 @@
 <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
+ * VAModalBase - Base Modal Component using Nuxt UI v4
+ * Simple wrapper around UModal with consistent V-App styling
  */
-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
+  triggerLabel?: string
+  triggerIcon?: string
+  triggerColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  triggerVariant?: 'solid' | 'outline' | 'soft' | 'ghost' | 'link'
+  triggerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 }>(), {
-  modelValue: false,
+  modelValue: undefined,
   title: '',
   size: 'md',
-  closable: true,
-  closeOnEscape: true,
-  closeOnClickOutside: true,
-  showBackdrop: true,
-  backdropBlur: true
+  triggerColor: 'primary',
+  triggerVariant: 'solid',
+  triggerSize: 'sm'
 })
 
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  'open': []
-  'close': []
-}>()
+const emit = defineEmits(['update:modelValue', '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
-})
+const internalOpen = ref(false)
 
-// 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()
+  get: () => props.modelValue ?? internalOpen.value,
+  set: (val) => {
+    emit('update:modelValue', val)
+    internalOpen.value = val
+    if (val) emit('open')
+    else emit('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(() => {
+// Size to width mapping
+const widthClass = 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'
+    case 'sm': return 'sm:max-w-sm'
+    case 'md': return 'sm:max-w-lg'
+    case 'lg': return 'sm:max-w-2xl'
+    case 'xl': return 'sm:max-w-4xl'
+    case 'full': return 'sm:max-w-full'
+    default: return 'sm:max-w-lg'
   }
 })
-
-// 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>
+  <UModal v-model:open="isOpen" :ui="{ width: widthClass }">
+    <!-- Trigger Button (required for Nuxt UI v4) -->
+    <slot name="trigger">
+      <UButton
+        v-if="triggerLabel || triggerIcon"
+        :label="triggerLabel"
+        :icon="triggerIcon"
+        :color="triggerColor"
+        :variant="triggerVariant"
+        :size="triggerSize"
+      />
+    </slot>
 
-            <!-- Body -->
-            <div class="flex-1 overflow-y-auto px-6 py-4">
-              <slot />
-            </div>
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <slot name="header">
+          <h3 v-if="title" class="text-base font-semibold text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+        </slot>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
 
-            <!-- 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>
+    <template #body>
+      <div class="p-4">
+        <slot />
       </div>
-    </Transition>
-  </Teleport>
+    </template>
+
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
+  </UModal>
 </template>

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

@@ -8,13 +8,22 @@ const props = withDefaults(defineProps<{
   endpoint?: string
   recordId?: string | number
   initialData?: any
-  size?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   loading?: boolean
   error?: string
+  triggerLabel?: string
+  triggerIcon?: string
+  triggerColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  triggerVariant?: 'solid' | 'outline' | 'soft' | 'ghost' | 'link'
+  triggerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 }>(), {
-  modelValue: false,
+  modelValue: undefined,
   title: 'Edit Record',
-  size: 'md'
+  size: 'md',
+  triggerIcon: 'i-lucide-edit',
+  triggerColor: 'primary',
+  triggerVariant: 'solid',
+  triggerSize: 'sm'
 })
 
 const emit = defineEmits(['update:modelValue', 'submit', 'success', 'error'])
@@ -25,7 +34,7 @@ const formData = ref({ ...(props.initialData || {}) })
 const isEdit = computed(() => !!props.recordId)
 
 const isOpen = computed({
-  get: () => props.modelValue !== undefined ? props.modelValue : internalOpen.value,
+  get: () => props.modelValue ?? internalOpen.value,
   set: (val) => {
     emit('update:modelValue', val)
     internalOpen.value = val
@@ -65,18 +74,36 @@ const handleSubmit = async (data: any = formData.value) => {
 </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>
+  <UModal v-model:open="isOpen" :ui="{ width: size === 'lg' ? 'sm:max-w-4xl' : 'sm:max-w-xl' }">
+    <!-- Trigger Button (required for Nuxt UI v4) -->
+    <slot name="trigger">
+      <UButton
+        v-if="triggerLabel || triggerIcon"
+        :label="triggerLabel"
+        :icon="triggerIcon"
+        :color="triggerColor"
+        :variant="triggerVariant"
+        :size="triggerSize"
+      />
+    </slot>
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ title }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
 
-      <div class="p-6">
+    <template #body>
+      <div class="p-6 space-y-4">
         <slot 
           :state="formData" 
           :loading="loading || crudLoading" 
@@ -86,20 +113,19 @@ const handleSubmit = async (data: any = formData.value) => {
           <!-- 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">
+        <div v-if="error || errorState" class="p-3 rounded bg-red-50 text-red-600 text-sm">
           {{ error || errorState }}
         </div>
       </div>
+    </template>
 
-      <template v-if="$slots.footer" #footer>
-        <slot name="footer" :submit="handleSubmit" :loading="loading || crudLoading" />
-      </template>
-    </UCard>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" :submit="handleSubmit" :loading="loading || crudLoading" />
+    </template>
   </UModal>
 </template>

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

@@ -50,7 +50,7 @@ const widthClass = computed(() => {
     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 'xl': return 'max-w-2xl'
     case 'full': return 'max-w-full'
     default: return 'max-w-md'
   }
@@ -74,36 +74,34 @@ const widthClass = computed(() => {
 
     <!-- Slideover -->
     <USlideover
-      v-model="isOpen"
+      v-model:open="isOpen"
       :side="side"
-      :ui="{ width: widthClass, overlay: { background: 'bg-gray-900/50 backdrop-blur-sm' } }"
+      :ui="{ width: widthClass }"
     >
-      <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">
+      <template #header>
+        <div class="flex items-center justify-between w-full">
           <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" 
+          <UButton
+            icon="i-lucide-x"
+            color="neutral"
+            variant="ghost"
             size="sm"
-            class="-mr-2"
-            @click="close" 
+            @click="close"
           />
         </div>
+      </template>
 
-        <!-- Body -->
-        <div class="flex-1 overflow-y-auto px-6 py-4">
+      <template #body>
+        <div class="flex-1 overflow-y-auto">
           <slot />
         </div>
+      </template>
 
-        <!-- 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>
+      <template v-if="$slots.footer" #footer>
+        <slot name="footer" />
+      </template>
     </USlideover>
   </div>
 </template>

package/app/components/V/Modal.vue

@@ -1,36 +1,69 @@
 <script setup lang="ts">
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   title?: string
   modelValue?: boolean
-}>()
+  triggerLabel?: string
+  triggerIcon?: string
+  triggerColor?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
+  triggerVariant?: 'solid' | 'outline' | 'soft' | 'ghost' | 'link'
+  triggerSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+}>(), {
+  modelValue: undefined,
+  triggerColor: 'primary',
+  triggerVariant: 'solid',
+  triggerSize: 'sm'
+})
 
 const emit = defineEmits(['update:modelValue'])
 
+const internalOpen = ref(false)
+
 const isOpen = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val)
+  get: () => props.modelValue ?? internalOpen.value,
+  set: (val) => {
+    emit('update:modelValue', val)
+    internalOpen.value = val
+  }
 })
 </script>
 
 <template>
-  <UModal v-model="isOpen">
-    <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>
+  <UModal v-model:open="isOpen">
+    <!-- Trigger Button (required for Nuxt UI v4) -->
+    <slot name="trigger">
+      <UButton
+        v-if="triggerLabel || triggerIcon"
+        :label="triggerLabel"
+        :icon="triggerIcon"
+        :color="triggerColor"
+        :variant="triggerVariant"
+        :size="triggerSize"
+      />
+    </slot>
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ title }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
 
+    <template #body>
       <div class="p-4">
         <slot />
       </div>
+    </template>
 
-      <template v-if="$slots.footer" #footer>
-        <slot name="footer" />
-      </template>
-    </UCard>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" />
+    </template>
   </UModal>
 </template>

package/app/composables/useVToast.ts

@@ -11,8 +11,8 @@ export function useVToast() {
       title,
       description,
       icon: 'i-lucide-check-circle',
-      color: 'green',
-      timeout
+      color: 'success',
+      duration: timeout
     })
   }
 
@@ -21,8 +21,8 @@ export function useVToast() {
       title,
       description,
       icon: 'i-lucide-info',
-      color: 'blue',
-      timeout
+      color: 'info',
+      duration: timeout
     })
   }
 
@@ -31,8 +31,8 @@ export function useVToast() {
       title,
       description,
       icon: 'i-lucide-alert-circle',
-      color: 'red',
-      timeout
+      color: 'error',
+      duration: timeout
     })
   }
 
@@ -41,8 +41,8 @@ export function useVToast() {
       title,
       description,
       icon: 'i-lucide-alert-triangle',
-      color: 'amber',
-      timeout
+      color: 'warning',
+      duration: timeout
     })
   }
 
@@ -50,7 +50,7 @@ export function useVToast() {
     err: any,
     friendlyName: string,
     action: string,
-    successColor: string = 'green'
+    successColor: string = 'success'
   ) => {
     if (err.value) {
       error(
@@ -63,7 +63,7 @@ export function useVToast() {
         title: `${friendlyName} ${action} successful`,
         icon: 'i-lucide-check-circle',
         color: successColor as any,
-        timeout
+        duration: timeout
       })
       return true
     }

package/app/layouts/default.vue

@@ -106,7 +106,7 @@ const groups = computed(() => [
 </script>
 
 <template>
-  <UDashboardGroup unit="rem">
+  <UDashboardGroup unit="rem" class="h-full overflow-hidden">
     <UDashboardSidebar
       resizable
       collapsible
@@ -173,7 +173,9 @@ const groups = computed(() => [
 
     <UDashboardSearch :groups="groups" />
 
-    <slot />
+    <div class="flex-1 overflow-y-auto">
+      <slot />
+    </div>
     <VaLayoutNotificationsSlideover />
   </UDashboardGroup>
 </template>