@veristone/nuxt-v-app 0.1.0

package/app/pages/playground/states.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+definePageMeta({
+  title: 'State Components'
+})
+
+const handleRetry = () => {
+  console.log('Retry clicked')
+}
+
+const handleAction = () => {
+  console.log('Action clicked')
+}
+</script>
+
+<template>
+  <UDashboardPanel grow>
+    <UContainer>
+    <div class="py-8">
+      <h1 class="text-3xl font-bold mb-4">State Components Showcase</h1>
+      <p class="text-gray-600 dark:text-gray-400 mb-8">
+        Loading, empty, and error state components for consistent UI feedback.
+      </p>
+
+      <!-- VAStateLoading Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAStateLoading</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Loading state with multiple variants.</p>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Rows Variant (Default)</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="rows" :rows="4" />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Spinner Variant</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="spinner" message="Loading data..." />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Card Variant</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="card" />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Small Spinner</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="spinner" size="sm" message="Please wait..." />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Medium Spinner</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="spinner" size="md" message="Loading..." />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Large Spinner</h3>
+          </template>
+          <ClientOnly>
+            <VAStateLoading variant="spinner" size="lg" message="Fetching data..." />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- VAStateEmpty Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAStateEmpty</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Empty state with icon, title, description, and optional action.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Default Empty State</h3>
+          </template>
+          <ClientOnly>
+            <VAStateEmpty />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">With Custom Content</h3>
+          </template>
+          <ClientOnly>
+            <VAStateEmpty
+              icon="i-lucide-users"
+              title="No users found"
+              description="There are no users matching your search criteria."
+            />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">With Action Button</h3>
+          </template>
+          <ClientOnly>
+            <VAStateEmpty
+              icon="i-lucide-file-plus"
+              title="No documents"
+              description="Get started by creating your first document."
+            >
+              <template #action>
+                <UButton label="Create Document" icon="i-lucide-plus" />
+              </template>
+            </VAStateEmpty>
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Search Results Empty</h3>
+          </template>
+          <ClientOnly>
+            <VAStateEmpty
+              icon="i-lucide-search"
+              title="No results"
+              description="Try adjusting your search or filters to find what you're looking for."
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+      <!-- VAStateError Section -->
+      <h2 class="text-2xl font-semibold mb-4 mt-8">VAStateError</h2>
+      <p class="text-gray-600 dark:text-gray-400 mb-4">Error state with optional retry functionality.</p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Default Error</h3>
+          </template>
+          <ClientOnly>
+            <VAStateError />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">With Retry Button</h3>
+          </template>
+          <ClientOnly>
+            <VAStateError
+              title="Connection Failed"
+              description="Unable to connect to the server. Please check your internet connection."
+              :retryable="true"
+              @retry="handleRetry"
+            />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Custom Error Message</h3>
+          </template>
+          <ClientOnly>
+            <VAStateError
+              title="Permission Denied"
+              description="You don't have permission to access this resource. Contact your administrator."
+            />
+          </ClientOnly>
+        </UCard>
+
+        <UCard>
+          <template #header>
+            <h3 class="font-semibold">Server Error</h3>
+          </template>
+          <ClientOnly>
+            <VAStateError
+              title="Server Error"
+              description="Something went wrong on our end. Our team has been notified."
+              :retryable="true"
+              @retry="handleRetry"
+            />
+          </ClientOnly>
+        </UCard>
+      </div>
+
+       <!-- VAEmptyState Section -->
+       <h2 class="text-2xl font-semibold mb-4 mt-8">VAEmptyState</h2>
+       <p class="text-gray-600 dark:text-gray-400 mb-4">Styled empty state component with gold accents (Veristone branded).</p>
+       <div class="mb-8">
+         <UCard>
+           <template #header>
+             <h3 class="font-semibold">Size Variants</h3>
+           </template>
+           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+             <ClientOnly>
+               <VAEmptyState size="sm" title="No Data" description="Start adding items" />
+             </ClientOnly>
+
+             <ClientOnly>
+               <VAEmptyState
+                 size="md"
+                 icon="i-lucide-folder"
+                 title="No Projects"
+                 description="Create your first project to get started"
+                 action-label="Create Project"
+                 @action="handleAction"
+               />
+             </ClientOnly>
+
+             <ClientOnly>
+               <VAEmptyState
+                 size="lg"
+                 icon="i-lucide-bar-chart-2"
+                 title="No Analytics Data"
+                 description="Data will appear once you have some activity"
+               />
+             </ClientOnly>
+           </div>
+         </UCard>
+       </div>
+
+       <!-- VALoadingState Section -->
+       <h2 class="text-2xl font-semibold mb-4 mt-8">VALoadingState</h2>
+       <p class="text-gray-600 dark:text-gray-400 mb-4">Styled loading state with ring animation (Veristone branded).</p>
+       <div class="mb-8">
+         <UCard>
+           <template #header>
+             <h3 class="font-semibold">Size Variants</h3>
+           </template>
+           <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+             <ClientOnly>
+               <VALoadingState size="sm" text="Loading..." />
+             </ClientOnly>
+
+             <ClientOnly>
+               <VALoadingState
+                 size="md"
+                 text="Fetching data"
+                 description="Please wait while we load your content"
+               />
+             </ClientOnly>
+
+             <ClientOnly>
+               <VALoadingState
+                 size="lg"
+                 text="Processing"
+                 description="This may take a moment"
+                 icon="i-lucide-cog"
+               />
+             </ClientOnly>
+           </div>
+         </UCard>
+       </div>
+
+       <div class="mb-8">
+         <UCard>
+           <template #header>
+             <h3 class="font-semibold">With Skeleton Rows</h3>
+           </template>
+           <ClientOnly>
+             <VALoadingState
+               text="Loading content"
+               :show-skeleton="true"
+               :skeleton-rows="5"
+             />
+           </ClientOnly>
+         </UCard>
+       </div>
+    </div>
+    </UContainer>
+  </UDashboardPanel>
+</template>