@falcondev-oss/nuxt-layers-base 0.37.2 → 0.38.0

package/app/assets/css/base.css

@@ -13,7 +13,7 @@
   }
 
   body {
-    background: var(--ui-color-neutral-50);
+    background: color-mix(in oklch, var(--ui-color-neutral-50) 50%, white);
   }
 
   button:not(:disabled),

package/app/components/ForwardSlots.tsx

@@ -0,0 +1,30 @@
+import type { Component, Slot, VNode } from 'vue'
+
+/**
+ * Passes a set of slot functions on to the component in the default slot.
+ *
+ * Slots can only be declared where a component is written, so forwarding a dynamic set of them has
+ * to happen from the outside: the target's vnode is re-created with `slots` merged into the slots
+ * written inline. Inline slots win on conflict.
+ */
+export default defineSetupComponent(
+  (_: {
+    props: {
+      slots: Record<string, Slot | undefined>
+    }
+    slots: { default: () => VNode[] }
+  }) =>
+    options(_, {
+      props: ['slots'],
+      emits: [],
+      setup: (props, ctx) => () => {
+        const [target] = ctx.slots.default?.() ?? []
+        if (!target) return null
+
+        // dropping `_` makes Vue re-normalize the merged slots instead of treating them as stable
+        const { _: _slotFlag, ...inlineSlots } = (target.children ?? {}) as Record<string, unknown>
+
+        return h(target.type as Component, target.props, { ...props.slots, ...inlineSlots })
+      },
+    }),
+)

package/app/components/layout/LayoutNavbar.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import type {
+  BreadcrumbItem,
+  BreadcrumbProps,
   DashboardNavbarProps,
   DashboardNavbarSlots,
   DashboardPanelProps,
@@ -7,67 +9,128 @@ import type {
   NavigationMenuItem,
   NavigationMenuProps,
 } from '@nuxt/ui'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import type { ToolbarTool } from '../../composables/useToolbar'
 import type { AddPropertyPrefix } from '../../types/helpers'
 import * as R from 'remeda'
+import { toolbarToolsKey } from '../../composables/useToolbar'
+import { mergeSlotClass } from '../../utils/ui'
 
-defineProps<{
+const props = defineProps<{
   panel?: DashboardPanelProps
   navbar?: {
-    showSidebarToggle?: boolean
+    sidebarToggle?: boolean
     title?: string
+    breadcrumb?: BreadcrumbItem[]
+    breadcrumbUi?: BreadcrumbProps<BreadcrumbItem>['ui']
     ui?: DashboardNavbarProps['ui']
   }
-  toolbar?: {
+  tabs?: {
     items?: NavigationMenuItem[]
-    itemsEnd?: NavigationMenuItem[]
-    ui?: DashboardToolbarProps['ui']
-    itemsUi?: NavigationMenuProps['ui']
-    itemsEndUi?: NavigationMenuProps['ui']
+    ui?: NavigationMenuProps['ui']
   }
+  tools?: {
+    items?: NavigationMenuItem[]
+    ui?: NavigationMenuProps['ui']
+  }
+  toolbarUi?: DashboardToolbarProps['ui']
 }>()
 
 const slots = defineSlots<
   {
-    default: any
+    'default': any
+    'navbar-title': any
+    'navbar-trailing': any
+    'navbar-actions': any
   } & AddPropertyPrefix<DashboardNavbarSlots, 'navbar'>
 >()
 
-const omitNavbarSlots = ['navbar-leading'] satisfies (keyof typeof slots)[]
+// rendered manually in the `left` slot below
+const omitNavbarSlots = [
+  'navbar-left',
+  'navbar-leading',
+  'navbar-title',
+  'navbar-trailing',
+  'navbar-right',
+  'navbar-actions',
+] satisfies (keyof typeof slots)[]
 const navbarSlots = computed(() =>
   R.pipe(
     slots,
     R.pickBy((_, key) => key.startsWith('navbar-')),
     R.omit(omitNavbarSlots),
-    R.keys(),
-    R.pullObject(
-      (key) => key.replace('navbar-', ''),
-      (key) => key,
-    ),
+    R.mapKeys((key) => key.replace('navbar-', '')),
   ),
 )
+
+// added by the content rendered inside this navbar through `useToolbar()`
+// `ref()`'s deep unwrapping blows up on the recursive `NavigationMenuItem` type
+const providedTools = ref([]) as Ref<MaybeRefOrGetter<ToolbarTool>[]>
+provide(toolbarToolsKey, providedTools)
+
+const toolItems = computed(() => [
+  ...(props.tools?.items ?? []),
+  ...providedTools.value.map((tool) => toValue(tool)),
+])
+
+const navbarUi = computed<DashboardNavbarProps['ui']>(() => ({
+  ...props.navbar?.ui,
+  toggle: mergeSlotClass(props.navbar?.ui?.toggle, '-ml-1'),
+  ...(props.navbar?.breadcrumb && {
+    root: mergeSlotClass(props.navbar.ui?.root, 'h-auto min-h-(--ui-header-height) py-2'),
+  }),
+}))
 </script>
 
 <template>
   <UDashboardPanel v-bind="panel">
     <template #header>
-      <UDashboardNavbar v-if="navbar" :ui="navbar.ui" class="bg-white" :title="navbar.title">
-        <template v-if="navbar.showSidebarToggle" #leading>
-          <UDashboardSidebarCollapse />
-        </template>
+      <ForwardSlots v-if="navbar" :slots="navbarSlots">
+        <UDashboardNavbar :ui="navbarUi" class="bg-white" :title="navbar.title">
+          <template #left>
+            <UDashboardSidebarCollapse v-if="navbar.sidebarToggle" class="-ml-1" />
+
+            <div class="flex min-w-0 flex-col items-start gap-0.5">
+              <div class="flex min-w-0 items-center gap-1.5">
+                <h1 class="text-highlighted truncate font-semibold">
+                  <slot name="navbar-title">{{ navbar.title }}</slot>
+                </h1>
+                <slot name="navbar-trailing" />
+              </div>
 
-        <template v-for="(originalName, slotName) in navbarSlots" #[slotName]="slotData">
-          <!-- @vue-ignore -->
-          <slot :name="originalName" v-bind="slotData || {}" />
+              <UBreadcrumb
+                v-if="navbar.breadcrumb"
+                :items="navbar.breadcrumb"
+                :ui="{
+                  ...navbar.breadcrumbUi,
+                  link: mergeSlotClass(navbar.breadcrumbUi?.link, 'text-xs'),
+                  separatorIcon: mergeSlotClass(navbar.breadcrumbUi?.separatorIcon, 'size-3.5'),
+                }"
+              />
+            </div>
+          </template>
+
+          <template #right>
+            <!-- eslint-disable-next-line vue/require-explicit-slots -->
+            <slot name="navbar-right" />
+            <div id="navbar-actions" class="flex items-center gap-2">
+              <slot name="navbar-actions" />
+            </div>
+          </template>
+        </UDashboardNavbar>
+      </ForwardSlots>
+      <UDashboardToolbar
+        v-if="tabs || toolItems.length"
+        :ui="toolbarUi"
+        class="bg-white *:first:-ml-2"
+      >
+        <template #left>
+          <UNavigationMenu v-if="tabs" :items="tabs.items" highlight variant="link" :ui="tabs.ui" />
+          <UNavigationMenu v-else :items="toolItems" highlight :ui="tools?.ui" />
+        </template>
+        <template v-if="tabs" #right>
+          <UNavigationMenu :items="toolItems" highlight :ui="tools?.ui" />
         </template>
-      </UDashboardNavbar>
-      <UDashboardToolbar v-if="toolbar" :ui="toolbar.ui" class="bg-white">
-        <UNavigationMenu :items="toolbar.items" highlight :ui="toolbar.itemsUi" />
-        <UNavigationMenu
-          :items="toolbar.itemsEnd"
-          class="ml-auto"
-          highlight
-          :ui="toolbar.itemsEndUi"
-        />
       </UDashboardToolbar>
     </template>
     <template #body>

package/app/components/layout/LayoutSidebar.vue

@@ -2,6 +2,7 @@
 import type {
   ArrayOrNested,
   AvatarProps,
+  DashboardSearchProps,
   DashboardSidebarProps,
   DropdownMenuItem,
   NavigationMenuItem,
@@ -15,6 +16,7 @@ defineProps<{
     src?: string
     iconSrc?: string
   }
+  search?: DashboardSearchProps
   items?: NavigationMenuItem[]
   bottomItems?: NavigationMenuItem[]
   userMenu?: {
@@ -55,18 +57,21 @@ const config = useRuntimeConfig()
         <slot v-if="!collapsed" name="logo">
           <img v-if="logo?.src" class="h-5 w-auto shrink-0" :src="logo.src" />
         </slot>
-        <slot v-if="collapsed || (!logo?.src && !slots.logo)" name="icon">
-          <img
-            v-if="logo?.iconSrc"
-            class="size-5"
-            :src="logo.iconSrc"
-            :class="{
-              'mx-auto': collapsed,
-            }"
-          />
-        </slot>
+        <div v-if="collapsed || (!logo?.src && !slots.logo)" :class="{ 'mx-auto': collapsed }">
+          <slot name="icon">
+            <img v-if="logo?.iconSrc" class="size-5" :src="logo.iconSrc" />
+          </slot>
+        </div>
       </template>
       <template #default="{ collapsed }">
+        <!-- height and negative margins line the border up with the `LayoutNavbar` toolbar's, cancelling the sidebar body's padding -->
+        <div
+          v-if="search"
+          class="border-default -mx-4 -mt-2 -mb-2 flex h-[calc(--spacing(12)+1px)] shrink-0 items-center border-b px-4 sm:max-lg:-mx-6 sm:max-lg:px-6"
+        >
+          <UDashboardSearchButton :collapsed="collapsed" variant="outline" tooltip block />
+        </div>
+
         <UNavigationMenu
           v-if="items"
           :collapsed="collapsed"
@@ -105,6 +110,8 @@ const config = useRuntimeConfig()
       </template>
     </UDashboardSidebar>
 
+    <UDashboardSearch v-if="search" :color-mode="false" v-bind="search" />
+
     <slot />
   </UDashboardGroup>
 </template>

package/app/components/u/URibbonCard.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { CardProps, CardSlots } from '@nuxt/ui'
+import { useForwardProps } from 'reka-ui'
+
+const props = defineProps<CardProps>()
+const slots = defineSlots<
+  CardSlots & {
+    /** Ribbon strip above the body — fill it with `URibbonSection`s. */
+    ribbon?: () => any
+  }
+>()
+
+const forwarded = useForwardProps(props)
+
+const cardSlots = computed(
+  () => Object.keys(slots).filter((name) => name !== 'ribbon') as (keyof CardSlots)[],
+)
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <!-- the ribbon's lower edge runs behind the card, so the card keeps its own rounded top -->
+    <div
+      v-if="slots.ribbon"
+      class="divide-default ring-default bg-elevated -mb-2 flex items-stretch divide-x overflow-x-auto rounded-t-lg pb-2 shadow-[inset_0_2px_3px_-2px_rgb(0_0_0/0.06),inset_2px_0_3px_-2px_rgb(0_0_0/0.06),inset_-2px_0_3px_-2px_rgb(0_0_0/0.06)] ring"
+    >
+      <slot name="ribbon" />
+    </div>
+
+    <UCard
+      v-bind="forwarded"
+      :ui="{
+        body: 'p-0!',
+        ...forwarded.ui,
+      }"
+      class="ring-accented relative shadow-[0_-2px_3px_-1px_rgb(0_0_0/0.08)]"
+    >
+      <template v-for="name of cardSlots" #[name]>
+        <slot :name />
+      </template>
+    </UCard>
+  </div>
+</template>

package/app/components/u/URibbonSection.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  title?: string
+  end?: boolean
+}>()
+
+defineSlots<{
+  default: () => any
+}>()
+</script>
+
+<template>
+  <div
+    :data-end="end || undefined"
+    class="flex shrink-0 flex-col gap-1.5 px-3 py-2"
+    :class="end && 'border-default [&:not([data-end]~*)]:ml-auto [&:not([data-end]~*)]:border-l'"
+  >
+    <p v-if="title" class="text-dimmed text-[10px] leading-none">
+      {{ title }}
+    </p>
+    <div class="flex flex-1 flex-wrap items-center gap-1" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/composables/useStableColumnWidths.ts

@@ -0,0 +1,41 @@
+/**
+ * pins a table's column widths at their measured auto-layout size, so filtering rows out can't
+ * resize the columns underneath the user
+ *
+ * pass the `UTable` template ref — the widths re-measure when the table resizes or a column is
+ * shown or hidden, and `freeze()` re-measures them by hand once late data has rendered
+ */
+export function useStableColumnWidths(
+  table: MaybeRefOrGetter<{ $el?: HTMLElement } | null | undefined>,
+) {
+  const tableEl = computed(() => toValue(table)?.$el?.querySelector('table') ?? null)
+  const headerRow = computed(() => tableEl.value?.tHead?.rows[0] ?? null)
+
+  /** the table width the current widths were measured at */
+  let measuredAt = 0
+
+  function freeze() {
+    const el = tableEl.value
+    const cells = headerRow.value && [...headerRow.value.cells]
+    if (!el || !cells) return
+
+    // measure the natural layout first — the pinned widths would otherwise fix the old one in place
+    el.style.tableLayout = ''
+    for (const cell of cells) cell.style.width = ''
+
+    const widths = cells.map((cell) => cell.getBoundingClientRect().width)
+    for (const [index, cell] of cells.entries()) cell.style.width = `${widths[index]!}px`
+    el.style.tableLayout = 'fixed'
+    measuredAt = el.getBoundingClientRect().width
+  }
+
+  onMounted(freeze)
+  // a resize gives the columns a different share of the table, so they re-measure
+  useResizeObserver(tableEl, () => {
+    if (tableEl.value?.getBoundingClientRect().width !== measuredAt) freeze()
+  })
+  // showing or hiding a column adds or removes header cells, so the pinned widths no longer line up
+  useMutationObserver(headerRow, freeze, { childList: true })
+
+  return { freeze }
+}

package/app/composables/useToolbar.ts

@@ -0,0 +1,42 @@
+import type { NavigationMenuItem } from '@nuxt/ui'
+import type { InjectionKey, MaybeRefOrGetter, Ref } from 'vue'
+
+export type ToolbarTool = NavigationMenuItem
+
+export const toolbarToolsKey = Symbol('toolbar-tools') as InjectionKey<
+  Ref<MaybeRefOrGetter<ToolbarTool>[]>
+>
+
+/**
+ * Tools of the enclosing `LayoutNavbar`'s toolbar, so that anything rendered inside it — a nested
+ * `NuxtPage`, a deeply nested component — can contribute to it. Whoever renders `LayoutNavbar`
+ * itself passes its tools as props instead.
+ */
+export function useToolbar() {
+  const injected = inject(toolbarToolsKey)
+  if (!injected) throw new Error('useToolbar() has to be called inside a `LayoutNavbar`')
+  const toolSources = injected
+
+  /**
+   * Appends a tool to the toolbar. Pass a getter to keep the tool reactive.
+   *
+   * The tool is removed again when the calling scope is disposed, i.e. when the component that
+   * added it unmounts.
+   */
+  function addTool(tool: MaybeRefOrGetter<ToolbarTool>) {
+    toolSources.value.push(tool)
+
+    const remove = () => {
+      const index = toolSources.value.indexOf(tool)
+      if (index !== -1) toolSources.value.splice(index, 1)
+    }
+    onScopeDispose(remove, true)
+
+    return remove
+  }
+
+  return {
+    tools: computed(() => toolSources.value.map((tool) => toValue(tool))),
+    addTool,
+  }
+}

package/package.json

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

package/app/components/u/UTableCard.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { CardProps, CardSlots } from '@nuxt/ui'
-import { useForwardProps } from 'reka-ui'
-const props = defineProps<CardProps>()
-const slots = defineSlots<CardSlots>()
-
-const forwarded = useForwardProps(props)
-</script>
-
-<template>
-  <UCard
-    v-bind="forwarded"
-    :ui="{
-      body: 'p-0!',
-      ...forwarded.ui,
-    }"
-  >
-    <template v-for="(_, name) of slots" #[name]>
-      <slot :name />
-    </template>
-  </UCard>
-</template>

package/app/pages/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <NuxtWelcome />
-</template>

package/app/utils/define-setup-component-old.ts

@@ -1,55 +0,0 @@
-/* eslint-disable ts/no-empty-object-type */
-import type { AllUnionFields, UnionToTuple } from 'type-fest'
-import type {
-  ComponentOptionsMixin,
-  CreateComponentPublicInstanceWithMixins,
-  EmitsOptions,
-  EmitsToProps,
-  PublicProps,
-  RenderFunction,
-  SetupContext,
-  SlotsType,
-} from 'vue'
-
-export function defineSetupComponentOld<
-  const Opts extends {
-    props: Record<string, any>
-    emits: Record<string, any>
-    slots: Record<string, any>
-  },
-  Setup extends (
-    props: Props,
-    ctx: SetupContext<Opts['emits'], SlotsType<Partial<Opts['slots']>>>,
-  ) => RenderFunction | Promise<RenderFunction>,
-  const PropsRuntime extends Readonly<UnionToTuple<keyof AllUnionFields<Opts['props']>>>,
-  E extends EmitsOptions = Opts['emits'],
-  Props extends Record<string, any> = Opts['props'] & EmitsToProps<E>,
-  PP = PublicProps & { vSlots?: Opts['slots'] },
-  S extends SlotsType<Partial<Opts['slots']>> = SlotsType<Partial<Opts['slots']>>,
->(
-  define: (opts: Opts) => { props: PropsRuntime },
-  setup: Setup,
-): new (
-  props: Opts['props'],
-) => CreateComponentPublicInstanceWithMixins<
-  Props,
-  {},
-  {},
-  {},
-  {},
-  ComponentOptionsMixin,
-  ComponentOptionsMixin,
-  E,
-  PP,
-  {},
-  false,
-  {},
-  S
-> {
-  // eslint-disable-next-line ts/no-unsafe-argument
-  const opts = define({} as any)
-  // eslint-disable-next-line ts/no-unsafe-return
-  return defineComponent(setup, {
-    props: opts.props as unknown as string[],
-  }) as any
-}