@falcondev-oss/nuxt-layers-base 0.10.3 → 0.12.0

package/app/components/layout/LayoutDashboard.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import type { NavigationMenuItem } from '@nuxt/ui'
+import type {
+  DashboardNavbarProps,
+  DashboardNavbarSlots,
+  DashboardPanelProps,
+  DashboardSidebarProps,
+  DashboardToolbarProps,
+  NavigationMenuItem,
+} from '@nuxt/ui'
+import type { AddPropertyPrefix } from '~/types/helpers'
+import { keys, omit, pickBy, pipe, pullObject } from 'remeda'
 
 defineProps<{
   sidebar?: {
@@ -13,27 +22,61 @@ defineProps<{
       name: string
       avatarSrc?: string
     }
+    ui?: DashboardSidebarProps['ui']
+    itemsUi?: NavigationMenuItem['ui']
+    bottomItemsUi?: NavigationMenuItem['ui']
   }
-  navbar?: {
-    title?: string
-  }
-  toolbar?: {
-    items?: NavigationMenuItem[]
-    itemsEnd?: NavigationMenuItem[]
+  panel?: {
+    navbar?: {
+      title?: string
+      ui?: DashboardNavbarProps['ui']
+    }
+    toolbar?: {
+      items?: NavigationMenuItem[]
+      itemsEnd?: NavigationMenuItem[]
+      ui?: DashboardToolbarProps['ui']
+      itemsUi?: NavigationMenuItem['ui']
+      itemsEndUi?: NavigationMenuItem['ui']
+    }
+    container?: boolean
+    ui?: DashboardPanelProps['ui']
   }
-  container?: boolean
 }>()
 
-defineSlots<{
-  default: any
-}>()
+const slots = defineSlots<
+  {
+    default: any
+  } & AddPropertyPrefix<DashboardNavbarSlots, 'navbar'>
+>()
+
+const omitNavbarSlots = ['navbar-leading'] satisfies (keyof typeof slots)[]
+
+const navbarSlots = computed(() =>
+  pipe(
+    slots,
+    pickBy((_, key) => key.startsWith('navbar-')),
+    omit(omitNavbarSlots),
+    keys(),
+    pullObject(
+      (key) => key.replace('navbar-', ''),
+      (key) => key,
+    ),
+  ),
+)
 
 const config = useRuntimeConfig()
 </script>
 
 <template>
   <UDashboardGroup storage="local" :storage-key="`${config.public.projectId}-dashboard`" unit="rem">
-    <UDashboardSidebar v-if="sidebar" collapsible resizable class="bg-white" mode="drawer">
+    <UDashboardSidebar
+      v-if="sidebar"
+      :ui="sidebar.ui"
+      collapsible
+      resizable
+      class="bg-white"
+      mode="drawer"
+    >
       <template v-if="sidebar.logo?.src || sidebar.logo?.iconSrc" #header="{ collapsed }">
         <img
           v-if="!collapsed && sidebar.logo.src"
@@ -55,6 +98,7 @@ const config = useRuntimeConfig()
           :collapsed="collapsed"
           :items="sidebar.items"
           orientation="vertical"
+          :ui="sidebar.itemsUi"
         />
 
         <UNavigationMenu
@@ -63,6 +107,7 @@ const config = useRuntimeConfig()
           :items="sidebar.bottomItems"
           orientation="vertical"
           class="mt-auto"
+          :ui="sidebar.bottomItemsUi"
         />
       </template>
       <template v-if="sidebar.userMenu" #footer="{ collapsed }">
@@ -81,18 +126,33 @@ const config = useRuntimeConfig()
     </UDashboardSidebar>
     <UDashboardPanel>
       <template #header>
-        <UDashboardNavbar v-if="navbar" class="bg-white" :title="navbar.title">
+        <UDashboardNavbar
+          v-if="panel?.navbar"
+          :ui="panel.navbar.ui"
+          class="bg-white"
+          :title="panel.navbar.title"
+        >
           <template #leading>
             <UDashboardSidebarCollapse />
           </template>
+
+          <template v-for="(originalName, slotName) in navbarSlots" #[slotName]="slotData">
+            <!-- @vue-ignore -->
+            <slot :name="originalName" v-bind="slotData || {}" />
+          </template>
         </UDashboardNavbar>
-        <UDashboardToolbar v-if="toolbar" class="bg-white">
-          <UNavigationMenu :items="toolbar.items" highlight />
-          <UNavigationMenu :items="toolbar.itemsEnd" class="ml-auto" highlight />
+        <UDashboardToolbar v-if="panel?.toolbar" :ui="panel.toolbar.ui" class="bg-white">
+          <UNavigationMenu :items="panel.toolbar.items" highlight :ui="panel.toolbar.itemsUi" />
+          <UNavigationMenu
+            :items="panel.toolbar.itemsEnd"
+            class="ml-auto"
+            highlight
+            :ui="panel.toolbar.itemsEndUi"
+          />
         </UDashboardToolbar>
       </template>
       <template #body>
-        <UContainer v-if="container">
+        <UContainer v-if="panel?.container">
           <slot />
         </UContainer>
         <slot v-else />

package/app/components/layout/LayoutPage.vue

@@ -8,6 +8,7 @@ import type {
   NavigationMenuItem,
   NavigationMenuProps,
 } from '@nuxt/ui'
+import type { AddPropertyPrefix } from '~/types/helpers'
 import { keys, omit, pickBy, pipe, pullObject } from 'remeda'
 
 defineProps<{
@@ -34,10 +35,6 @@ const slots = defineSlots<
     AddPropertyPrefix<FooterSlots, 'footer'>
 >()
 
-type AddPropertyPrefix<T extends object, P extends string> = {
-  [K in keyof T as `${P}-${K & string}`]: T[K]
-}
-
 const omitHeaderSlots = [
   'header-title',
   'header-right',

package/app/types/helpers.ts

@@ -0,0 +1,3 @@
+export type AddPropertyPrefix<T extends object, P extends string> = {
+  [K in keyof T as `${P}-${K & string}`]: T[K]
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@falcondev-oss/nuxt-layers-base",
   "type": "module",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "description": "Nuxt layer with lots of useful helpers and @nuxt/ui components",
   "license": "MIT",
   "repository": "github:falcondev-oss/nuxt-layers",