@veristone/nuxt-v-app 0.1.1 → 0.2.1

package/app/layouts/default.vue

@@ -1,107 +1,112 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
+import type { NavigationMenuItem } from "@nuxt/ui";
 
-const route = useRoute()
+const route = useRoute();
 
 const links = ref<NavigationMenuItem[][]>([
   [
     {
-      to: '/',
-      icon: 'i-lucide-home',
-      label: 'Overview'
+      to: "/",
+      icon: "i-lucide-home",
+      label: "Overview",
     },
     {
-      to: '/playground',
-      icon: 'i-lucide-blocks',
-      label: 'Playground',
+      to: "/playground",
+      icon: "i-lucide-blocks",
+      label: "Playground",
       open: true,
       children: [
         {
-          to: '/playground',
-          icon: 'i-lucide-layout-grid',
-          label: 'Components'
+          to: "/playground",
+          icon: "i-lucide-layout-grid",
+          label: "Components",
         },
         {
-          to: '/playground/cards',
-          icon: 'i-lucide-credit-card',
-          label: 'Cards'
+          to: "/playground/cards",
+          icon: "i-lucide-credit-card",
+          label: "Cards",
         },
         {
-          to: '/playground/charts',
-          icon: 'i-lucide-bar-chart-3',
-          label: 'Charts'
+          to: "/playground/charts",
+          icon: "i-lucide-bar-chart-3",
+          label: "Charts",
         },
         {
-          to: '/playground/blocks',
-          icon: 'i-lucide-layout-template',
-          label: 'Blocks'
+          to: "/playground/blocks",
+          icon: "i-lucide-layout-template",
+          label: "Blocks",
         },
         {
-          to: '/playground/dashboard',
-          icon: 'i-lucide-layout-dashboard',
-          label: 'Dashboard'
+          to: "/playground/dashboard",
+          icon: "i-lucide-layout-dashboard",
+          label: "Dashboard",
         },
         {
-          to: '/playground/tables',
-          icon: 'i-lucide-table-2',
-          label: 'Tables'
+          to: "/playground/tables",
+          icon: "i-lucide-table-2",
+          label: "Tables",
         },
         {
-          to: '/playground/base',
-          icon: 'i-lucide-box',
-          label: 'Base Components'
+          to: "/playground/base",
+          icon: "i-lucide-box",
+          label: "Base Components",
         },
         {
-          to: '/playground/buttons',
-          icon: 'i-lucide-mouse-pointer-click',
-          label: 'Buttons'
+          to: "/playground/buttons",
+          icon: "i-lucide-mouse-pointer-click",
+          label: "Buttons",
         },
         {
-          to: '/playground/formatters',
-          icon: 'i-lucide-text-cursor-input',
-          label: 'Formatters'
+          to: "/playground/formatters",
+          icon: "i-lucide-text-cursor-input",
+          label: "Formatters",
         },
         {
-          to: '/playground/states',
-          icon: 'i-lucide-loader',
-          label: 'States'
+          to: "/playground/states",
+          icon: "i-lucide-loader",
+          label: "States",
         },
         {
-          to: '/playground/modals',
-          icon: 'i-lucide-panel-right',
-          label: 'Modals'
-        }
-      ]
-    }
-  ]
-])
+          to: "/playground/modals",
+          icon: "i-lucide-panel-right",
+          label: "Modals",
+        },
+        {
+          to: "/playground/crud",
+          icon: "i-lucide-database",
+          label: "CRUD",
+        },
+      ],
+    },
+  ],
+]);
 
 const groups = computed(() => [
   {
-    id: 'links',
-    label: 'Go to',
-    items: links.value.flat()
+    id: "links",
+    label: "Go to",
+    items: links.value.flat(),
   },
   {
-    id: 'code',
-    label: 'Code',
+    id: "code",
+    label: "Code",
     items: [
       {
-        id: 'source',
-        label: 'View page source',
-        icon: 'i-simple-icons-github',
+        id: "source",
+        label: "View page source",
+        icon: "i-simple-icons-github",
         to: `https://github.com/nuxt-ui-templates/dashboard/blob/main/app/pages${
-          route.path === '/' ? '/index' : route.path
+          route.path === "/" ? "/index" : route.path
         }.vue`,
-        target: '_blank'
-      }
-    ]
-  }
-])
+        target: "_blank",
+      },
+    ],
+  },
+]);
 </script>
 
 <template>
-  <UDashboardGroup unit="rem">
+  <UDashboardGroup unit="rem" class="h-full overflow-hidden">
     <UDashboardSidebar
       resizable
       collapsible
@@ -114,18 +119,22 @@ const groups = computed(() => [
           class="flex items-center gap-2 px-3 py-2"
           :class="collapsed ? 'justify-center' : ''"
         >
-          <div class="size-8 rounded-lg bg-primary-500/10 flex items-center justify-center shrink-0">
-            <UIcon name="i-lucide-layout-dashboard" class="size-5 text-primary-500" />
+          <div
+            class="size-8 rounded-lg bg-primary-500/10 flex items-center justify-center shrink-0"
+          >
+            <UIcon
+              name="i-lucide-layout-dashboard"
+              class="size-5 text-primary-500"
+            />
           </div>
-          <span v-if="!collapsed" class="font-semibold text-lg truncate">VA Playground</span>
+          <span v-if="!collapsed" class="font-semibold text-lg truncate"
+            >VA Playground</span
+          >
         </div>
       </template>
 
       <template #default="{ collapsed }">
-        <VaLayoutSideNav
-          :items="links[0]!"
-          :collapsed="collapsed"
-        />
+        <VaLayoutSideNav :items="links[0]!" :collapsed="collapsed" />
 
         <!-- Accounts section commented out - requires /analytics.svg asset
         <div class="space-y-1 mt-4">
@@ -155,7 +164,6 @@ const groups = computed(() => [
           </div>
         </div>
         -->
-
       </template>
 
       <template #footer="{ collapsed }">
@@ -165,7 +173,9 @@ const groups = computed(() => [
 
     <UDashboardSearch :groups="groups" />
 
-    <slot />
+    <div class="flex-1 overflow-y-auto">
+      <slot />
+    </div>
     <VaLayoutNotificationsSlideover />
   </UDashboardGroup>
 </template>