@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/modals.vue

@@ -0,0 +1,606 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'Modal Components'
+})
+
+// Modal states
+const showInfoModal = ref(false)
+const showWarningModal = ref(false)
+const showDangerModal = ref(false)
+const showFormModal = ref(false)
+const isLoading = ref(false)
+
+// Custom modal states
+const showSmModal = ref(false)
+const showMdModal = ref(false)
+const showLgModal = ref(false)
+const showXlModal = ref(false)
+const showFullModal = ref(false)
+
+// Custom slideover states
+const showSmSlide = ref(false)
+const showMdSlide = ref(false)
+const showLgSlide = ref(false)
+const showLeftSlide = ref(false)
+
+// VModal state
+const showVModal = ref(false)
+
+const handleConfirm = () => {
+  isLoading.value = true
+  setTimeout(() => {
+    isLoading.value = false
+    showInfoModal.value = false
+    showWarningModal.value = false
+    showDangerModal.value = false
+  }, 1500)
+}
+
+const handleFormSubmit = (data: any) => {
+  console.log('Form submitted:', data)
+}
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+    <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">Modal Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Modal dialogs and slideover panels for confirmations, forms, and detailed views.
+      </p>
+
+      <!-- VAModalConfirm Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAModalConfirm</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Confirmation modals with different variants.</p>
+      <div class="mb-8">
+        <UCard>
+          <div class="flex flex-wrap gap-4">
+            <UButton label="Info Confirm" color="blue" @click="showInfoModal = true" />
+            <UButton label="Warning Confirm" color="orange" @click="showWarningModal = true" />
+            <UButton label="Danger Confirm" color="red" @click="showDangerModal = true" />
+          </div>
+        </UCard>
+
+        <ClientOnly>
+          <VAModalConfirm
+            v-model="showInfoModal"
+            title="Confirm Action"
+            message="Are you sure you want to proceed with this action? This will apply the changes immediately."
+            variant="info"
+            confirm-text="Proceed"
+            :loading="isLoading"
+            @confirm="handleConfirm"
+          />
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalConfirm
+            v-model="showWarningModal"
+            title="Warning"
+            message="This action may have unintended consequences. Please review before proceeding."
+            variant="warning"
+            confirm-text="Continue Anyway"
+            :loading="isLoading"
+            @confirm="handleConfirm"
+          />
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalConfirm
+            v-model="showDangerModal"
+            title="Delete Item"
+            message="Are you sure you want to delete this item? This action cannot be undone."
+            variant="danger"
+            confirm-text="Delete"
+            :loading="isLoading"
+            @confirm="handleConfirm"
+          />
+        </ClientOnly>
+      </div>
+
+      <!-- VAModalForm Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAModalForm</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Form modal for creating and editing records.</p>
+      <div class="mb-8">
+        <UCard>
+          <div class="flex flex-wrap gap-4">
+            <UButton label="Open Form Modal" color="primary" @click="showFormModal = true" />
+          </div>
+        </UCard>
+
+        <ClientOnly>
+          <VAModalForm
+            v-model="showFormModal"
+            title="Create New User"
+            @submit="handleFormSubmit"
+          >
+            <template #default="{ submit }">
+              <form @submit.prevent="submit" class="space-y-4">
+                <UFormField label="Full Name" required>
+                  <UInput placeholder="Enter full name" />
+                </UFormField>
+                <UFormField label="Email Address" required>
+                  <UInput type="email" placeholder="Enter email" />
+                </UFormField>
+                <UFormField label="Role">
+                  <USelect
+                    placeholder="Select role"
+                    :items="[
+                      { label: 'Admin', value: 'admin' },
+                      { label: 'Editor', value: 'editor' },
+                      { label: 'Viewer', value: 'viewer' }
+                    ]"
+                  />
+                </UFormField>
+                <UFormField label="Notes">
+                  <UTextarea placeholder="Any additional notes..." />
+                </UFormField>
+                <div class="flex justify-end gap-3 pt-4">
+                  <UButton label="Cancel" color="gray" variant="ghost" @click="showFormModal = false" />
+                  <UButton type="submit" label="Create User" color="primary" />
+                </div>
+              </form>
+            </template>
+          </VAModalForm>
+         </ClientOnly>
+       </div>
+
+       <!-- VModal Section -->
+       <h2 class="text-2xl font-semibold mb-4 mt-8">VModal</h2>
+       <p class="text-gray-600 dark:text-gray-400 mb-4">Simple modal wrapper using UModal component.</p>
+       <div class="mb-8">
+         <UCard>
+           <template #header>
+             <h3 class="font-semibold">Basic Modal</h3>
+           </template>
+           <div class="flex flex-wrap gap-4">
+             <UButton label="Open Modal" color="primary" @click="showVModal = true" />
+           </div>
+         </UCard>
+
+         <ClientOnly>
+           <VModal v-model="showVModal" title="Simple Modal">
+             <p class="text-gray-600 dark:text-gray-400">This is a simple modal using the VModal component.</p>
+             <p class="mt-2 text-gray-600 dark:text-gray-400">It's a lightweight wrapper around UModal for basic modal functionality.</p>
+             <template #footer>
+               <div class="flex justify-end gap-3">
+                 <UButton label="Close" color="gray" variant="ghost" @click="showVModal = false" />
+               </div>
+             </template>
+           </VModal>
+         </ClientOnly>
+       </div>
+
+       <!-- VAModalBase Section (Custom) -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAModalBase (Custom)</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Custom modal component (not using UModal) with size variants and full accessibility.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Size Variants</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <UButton label="Small" @click="showSmModal = true" />
+            <UButton label="Medium" @click="showMdModal = true" />
+            <UButton label="Large" @click="showLgModal = true" />
+            <UButton label="Extra Large" @click="showXlModal = true" />
+            <UButton label="Full" @click="showFullModal = true" />
+          </div>
+        </UCard>
+
+        <ClientOnly>
+          <VAModalBase v-model="showSmModal" title="Small Modal" size="sm">
+            <p class="text-gray-600 dark:text-gray-400">This is a small modal (max-w-sm).</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Perfect for quick confirmations or simple messages.</p>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showSmModal = false" />
+                <UButton label="Confirm" color="primary" @click="showSmModal = false" />
+              </div>
+            </template>
+          </VAModalBase>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalBase v-model="showMdModal" title="Medium Modal" size="md">
+            <p class="text-gray-600 dark:text-gray-400">This is a medium modal (max-w-md). The default size.</p>
+            <div class="mt-4 space-y-4">
+              <UFormField label="Name">
+                <UInput placeholder="Enter your name" />
+              </UFormField>
+              <UFormField label="Email">
+                <UInput type="email" placeholder="Enter your email" />
+              </UFormField>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showMdModal = false" />
+                <UButton label="Save" color="primary" @click="showMdModal = false" />
+              </div>
+            </template>
+          </VAModalBase>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalBase v-model="showLgModal" title="Large Modal" size="lg">
+            <p class="text-gray-600 dark:text-gray-400">This is a large modal (max-w-lg).</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Good for forms with more fields or content that needs more space.</p>
+            <div class="mt-4 grid grid-cols-2 gap-4">
+              <UFormField label="First Name">
+                <UInput placeholder="First name" />
+              </UFormField>
+              <UFormField label="Last Name">
+                <UInput placeholder="Last name" />
+              </UFormField>
+              <UFormField label="Email">
+                <UInput type="email" placeholder="Email" />
+              </UFormField>
+              <UFormField label="Phone">
+                <UInput type="tel" placeholder="Phone" />
+              </UFormField>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showLgModal = false" />
+                <UButton label="Save" color="primary" @click="showLgModal = false" />
+              </div>
+            </template>
+          </VAModalBase>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalBase v-model="showXlModal" title="Extra Large Modal" size="xl">
+            <p class="text-gray-600 dark:text-gray-400">This is an extra large modal (max-w-2xl).</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Ideal for complex forms, data displays, or content requiring significant horizontal space.</p>
+            <div class="mt-4 grid grid-cols-3 gap-4">
+              <UFormField label="Field 1"><UInput placeholder="Value" /></UFormField>
+              <UFormField label="Field 2"><UInput placeholder="Value" /></UFormField>
+              <UFormField label="Field 3"><UInput placeholder="Value" /></UFormField>
+              <UFormField label="Field 4"><UInput placeholder="Value" /></UFormField>
+              <UFormField label="Field 5"><UInput placeholder="Value" /></UFormField>
+              <UFormField label="Field 6"><UInput placeholder="Value" /></UFormField>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showXlModal = false" />
+                <UButton label="Save" color="primary" @click="showXlModal = false" />
+              </div>
+            </template>
+          </VAModalBase>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VAModalBase v-model="showFullModal" title="Full Screen Modal" size="full">
+            <p class="text-gray-600 dark:text-gray-400">This is a full-width modal that takes up most of the viewport.</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Use for complex workflows, data tables, or when maximum screen real estate is needed.</p>
+            <div class="mt-6 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+              <p class="text-sm text-gray-500">Content area - this modal scales to fill the available space.</p>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Close" color="gray" variant="ghost" @click="showFullModal = false" />
+              </div>
+            </template>
+          </VAModalBase>
+        </ClientOnly>
+      </div>
+
+      <!-- VASlideover Section (Custom) -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VASlideover (Custom)</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Custom slideover component (not using USlideover) with custom transitions.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Size Variants & Positioning</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <UButton label="Small Right" @click="showSmSlide = true" />
+            <UButton label="Medium Right" @click="showMdSlide = true" />
+            <UButton label="Large Right" @click="showLgSlide = true" />
+            <UButton label="Medium Left" color="gray" variant="outline" @click="showLeftSlide = true" />
+          </div>
+        </UCard>
+
+        <ClientOnly>
+          <VASlideover v-model="showSmSlide" title="Small Slideover" size="sm">
+            <p class="text-gray-600 dark:text-gray-400">This is a small slideover (w-80).</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Good for quick settings or filters.</p>
+          </VASlideover>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VASlideover v-model="showMdSlide" title="Medium Slideover" size="md">
+            <p class="text-gray-600 dark:text-gray-400">This is a medium slideover (w-96).</p>
+            <div class="mt-4 space-y-4">
+              <UFormField label="Name">
+                <UInput placeholder="Enter name" />
+              </UFormField>
+              <UFormField label="Description">
+                <UTextarea placeholder="Enter description" />
+              </UFormField>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showMdSlide = false" />
+                <UButton label="Save" color="primary" @click="showMdSlide = false" />
+              </div>
+            </template>
+          </VASlideover>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VASlideover v-model="showLgSlide" title="Large Slideover" size="lg">
+            <p class="text-gray-600 dark:text-gray-400">This is a large slideover (w-[32rem]).</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Ideal for detailed forms or data views.</p>
+            <div class="mt-4 grid grid-cols-2 gap-4">
+              <UFormField label="First Name">
+                <UInput placeholder="First name" />
+              </UFormField>
+              <UFormField label="Last Name">
+                <UInput placeholder="Last name" />
+              </UFormField>
+              <UFormField label="Email">
+                <UInput type="email" placeholder="Email" />
+              </UFormField>
+              <UFormField label="Phone">
+                <UInput type="tel" placeholder="Phone" />
+              </UFormField>
+            </div>
+            <template #footer>
+              <div class="flex justify-end gap-3">
+                <UButton label="Cancel" color="gray" variant="ghost" @click="showLgSlide = false" />
+                <UButton label="Save" color="primary" @click="showLgSlide = false" />
+              </div>
+            </template>
+          </VASlideover>
+        </ClientOnly>
+
+        <ClientOnly>
+          <VASlideover v-model="showLeftSlide" title="Left Slideover" size="md" side="left">
+            <p class="text-gray-600 dark:text-gray-400">This slideover opens from the left side.</p>
+            <p class="mt-2 text-gray-600 dark:text-gray-400">Useful for navigation panels or secondary menus.</p>
+            <div class="mt-4 space-y-2">
+              <UButton label="Dashboard" color="gray" variant="ghost" block class="justify-start" icon="i-lucide-home" />
+              <UButton label="Analytics" color="gray" variant="ghost" block class="justify-start" icon="i-lucide-bar-chart-3" />
+              <UButton label="Settings" color="gray" variant="ghost" block class="justify-start" icon="i-lucide-settings" />
+            </div>
+          </VASlideover>
+        </ClientOnly>
+      </div>
+
+      <!-- VASlide Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VASlide</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Slideover panels for detailed views and forms.</p>
+      <div class="mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Right Side Slidevers (Default)</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VASlide
+                title="Small Slideover"
+                size="sm"
+                trigger-label="Small"
+                trigger-variant="outline"
+              >
+                <p class="text-gray-600 dark:text-gray-400">This is a small slideover panel.</p>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Perfect for quick actions or minimal content.</p>
+              </VASlide>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VASlide
+                title="Medium Slideover"
+                size="md"
+                trigger-label="Medium"
+                trigger-variant="outline"
+              >
+                <p class="text-gray-600 dark:text-gray-400">This is a medium slideover panel.</p>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Good for forms and detailed information.</p>
+                <div class="mt-6 space-y-4">
+                  <UFormField label="Name">
+                    <UInput placeholder="Enter name" />
+                  </UFormField>
+                  <UFormField label="Description">
+                    <UTextarea placeholder="Enter description" />
+                  </UFormField>
+                </div>
+              </VASlide>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VASlide
+                title="Large Slideover"
+                size="lg"
+                trigger-label="Large"
+                trigger-variant="outline"
+              >
+                <p class="text-gray-600 dark:text-gray-400">This is a large slideover panel.</p>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Ideal for complex forms or data views.</p>
+                <div class="mt-6 grid grid-cols-2 gap-4">
+                  <UFormField label="First Name">
+                    <UInput placeholder="First name" />
+                  </UFormField>
+                  <UFormField label="Last Name">
+                    <UInput placeholder="Last name" />
+                  </UFormField>
+                  <UFormField label="Email">
+                    <UInput type="email" placeholder="Email" />
+                  </UFormField>
+                  <UFormField label="Phone">
+                    <UInput type="tel" placeholder="Phone" />
+                  </UFormField>
+                </div>
+              </VASlide>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VASlide
+                title="Extra Large Slideover"
+                size="xl"
+                trigger-label="Extra Large"
+                trigger-variant="outline"
+              >
+                <p class="text-gray-600 dark:text-gray-400">This is an extra large slideover panel.</p>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Best for complex workflows with multiple sections.</p>
+                <div class="mt-6">
+                  <div class="grid grid-cols-3 gap-4">
+                    <UFormField label="Field 1">
+                      <UInput placeholder="Value" />
+                    </UFormField>
+                    <UFormField label="Field 2">
+                      <UInput placeholder="Value" />
+                    </UFormField>
+                    <UFormField label="Field 3">
+                      <UInput placeholder="Value" />
+                    </UFormField>
+                  </div>
+                </div>
+              </VASlide>
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Left Side Slideover</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VASlide
+                title="Left Slideover"
+                size="md"
+                side="left"
+                trigger-label="Open Left"
+                trigger-variant="soft"
+              >
+                <p class="text-gray-600 dark:text-gray-400">This slideover opens from the left side.</p>
+                <p class="mt-4 text-gray-600 dark:text-gray-400">Useful for navigation or filter panels.</p>
+              </VASlide>
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Slideover with Footer</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VASlide
+                title="Form Slideover"
+                size="md"
+                trigger-label="With Footer"
+                trigger-color="green"
+              >
+                <div class="space-y-4">
+                  <UFormField label="Project Name" required>
+                    <UInput placeholder="Enter project name" />
+                  </UFormField>
+                  <UFormField label="Description">
+                    <UTextarea placeholder="Describe your project" />
+                  </UFormField>
+                  <UFormField label="Priority">
+                    <USelect
+                      placeholder="Select priority"
+                      :items="[
+                        { label: 'High', value: 'high' },
+                        { label: 'Medium', value: 'medium' },
+                        { label: 'Low', value: 'low' }
+                      ]"
+                    />
+                  </UFormField>
+                </div>
+                <template #footer>
+                  <div class="flex justify-end gap-3">
+                    <UButton label="Cancel" color="gray" variant="ghost" />
+                    <UButton label="Save Project" color="primary" />
+                  </div>
+                </template>
+              </VASlide>
+            </ClientOnly>
+          </div>
+        </UCard>
+
+        <UCard class="mt-4">
+          <template #header>
+            <h3 class="font-semibold">Icon-Only Trigger</h3>
+          </template>
+          <div class="flex flex-wrap gap-4">
+            <ClientOnly>
+              <VASlide
+                title="Settings"
+                size="sm"
+                trigger-icon="i-lucide-settings"
+                trigger-variant="ghost"
+              >
+                <div class="space-y-4">
+                  <div class="flex items-center justify-between">
+                    <span>Dark Mode</span>
+                    <UToggle />
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>Notifications</span>
+                    <UToggle />
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span>Auto-save</span>
+                    <UToggle />
+                  </div>
+                </div>
+              </VASlide>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VASlide
+                title="Filter Options"
+                size="sm"
+                trigger-icon="i-lucide-filter"
+                trigger-variant="outline"
+              >
+                <div class="space-y-4">
+                  <UFormField label="Status">
+                    <USelect
+                      placeholder="All statuses"
+                      :items="[
+                        { label: 'Active', value: 'active' },
+                        { label: 'Pending', value: 'pending' },
+                        { label: 'Archived', value: 'archived' }
+                      ]"
+                    />
+                  </UFormField>
+                  <UFormField label="Date Range">
+                    <UInput type="date" />
+                  </UFormField>
+                </div>
+              </VASlide>
+            </ClientOnly>
+
+            <ClientOnly>
+              <VASlide
+                title="Help & Support"
+                size="md"
+                trigger-icon="i-lucide-help-circle"
+                trigger-color="neutral"
+                trigger-variant="soft"
+              >
+                <div class="space-y-4">
+                  <p class="text-gray-600 dark:text-gray-400">Need help? Here are some resources:</p>
+                  <ul class="list-disc list-inside space-y-2 text-gray-600 dark:text-gray-400">
+                    <li>Documentation</li>
+                    <li>Video Tutorials</li>
+                    <li>Community Forum</li>
+                    <li>Contact Support</li>
+                  </ul>
+                </div>
+              </VASlide>
+            </ClientOnly>
+          </div>
+        </UCard>
+      </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>