@falcondev-oss/nuxt-layers-base 0.42.0 → 0.42.2

package/app/components/layout/LayoutNavbar.tsx

@@ -24,7 +24,7 @@ import {
   UOverflowButtons,
   USeparator,
 } from '#components'
-import { useAvailableWidth } from '../../composables/useAvailableWidth'
+import { useFreeSpace } from '../../composables/useFreeSpace'
 import { toolbarToolsKey } from '../../composables/useToolbar'
 import { mergeSlotClass } from '../../utils/ui'
 
@@ -107,7 +107,7 @@ export default defineSetupComponent(
         // anchor that stays at the end of that toolbar, so the answer doesn't change once the
         // tools have moved to a toolbar of their own — they'd have no way back.
         const toolsAnchor = ref<HTMLElement>()
-        const toolsSpace = useAvailableWidth(toolsAnchor)
+        const toolsSpace = useFreeSpace(toolsAnchor)
         // only ever the inline row — the wrapped one is compact, and a width measured there
         // would not be the width the tools need to come back up
         const toolsRow = ref<HTMLElement>()
@@ -163,7 +163,7 @@ export default defineSetupComponent(
                       <ForwardSlots slots={navbarSlots.value}>
                         <UDashboardNavbar
                           ui={navbarUi.value}
-                          {...useAvailableWidth.root}
+                          {...useFreeSpace.root}
                           class="bg-white"
                           title={props.navbar.title}
                           v-slots={vSlots(UDashboardNavbar, {
@@ -228,7 +228,7 @@ export default defineSetupComponent(
                               left: mergeSlotClass(props.toolbarUi?.left, 'grow'),
                             }),
                         }}
-                        {...useAvailableWidth.root}
+                        {...useFreeSpace.root}
                         class={['bg-white', (props.tabs || props.tools?.left) && '*:first:-ml-2']}
                         v-slots={vSlots(UDashboardToolbar, {
                           ...((props.tabs || props.tools?.left) && {
@@ -253,7 +253,7 @@ export default defineSetupComponent(
                                     ...(showDivider.value
                                       ? [
                                           <USeparator
-                                            {...useAvailableWidth.free}
+                                            {...useFreeSpace.free}
                                             orientation="vertical"
                                             class="h-7"
                                           />,
@@ -264,7 +264,7 @@ export default defineSetupComponent(
                                       : [
                                           <div
                                             ref={toolsRow}
-                                            {...useAvailableWidth.free}
+                                            {...useFreeSpace.free}
                                             class="shrink-0"
                                           >
                                             {toolsMenu()}
@@ -273,10 +273,7 @@ export default defineSetupComponent(
                                   ]
                                 : // right-aligned: held open here, for the divider to centre in
                                   [
-                                    <div
-                                      {...useAvailableWidth.free}
-                                      class="flex grow justify-center"
-                                    >
+                                    <div {...useFreeSpace.free} class="flex grow justify-center">
                                       {showDivider.value ? (
                                         <USeparator orientation="vertical" class="h-7" />
                                       ) : null}
@@ -291,7 +288,7 @@ export default defineSetupComponent(
                             // as free whether they are in it or not, so they keep their way back
                             ...(!props.tools?.left && !toolsWrapped.value
                               ? [
-                                  <div ref={toolsRow} {...useAvailableWidth.free} class="shrink-0">
+                                  <div ref={toolsRow} {...useFreeSpace.free} class="shrink-0">
                                     {toolsMenu()}
                                   </div>,
                                 ]

package/app/components/u/UOverflowButtons.tsx

@@ -2,7 +2,7 @@ import type { VNode } from 'vue'
 import { useResizeObserver } from '@vueuse/core'
 import { Comment, Fragment, isVNode } from 'vue'
 import { UButton, UPopover } from '#components'
-import { useAvailableWidth } from '../../composables/useAvailableWidth'
+import { useFreeSpace } from '../../composables/useFreeSpace'
 
 /** JSX children and `v-if`/`v-for` arrive nested — unpack them to reach the individual actions.
  * A `v-if` that didn't take leaves a comment placeholder behind, which is not an action. */
@@ -38,7 +38,7 @@ export default defineSetupComponent(
       emits: [],
       setup: (_props, { slots }) => {
         const root = ref<HTMLElement>()
-        const space = useAvailableWidth(root)
+        const space = useFreeSpace(root)
 
         const triggerWidth = ref(0)
         /** Action widths by index, kept from when the action last stood in the row — one that has

package/app/components/u/URibbonSection.tsx

@@ -1,10 +1,16 @@
+import type { ClassValue } from 'tailwind-variants'
 import type { VNode } from 'vue'
+import { cnMerge } from 'tailwind-variants'
 
 export default defineSetupComponent(
   (_: {
     props: {
       title?: string
       end?: boolean
+      ui?: {
+        root?: ClassValue
+        content?: ClassValue
+      }
     }
     slots: {
       default: () => VNode[]
@@ -13,24 +19,28 @@ export default defineSetupComponent(
     options(_, {
       name: 'URibbonSection',
       inheritAttrs: false,
-      props: ['title', 'end'],
+      props: ['title', 'end', 'ui'],
       emits: [],
       setup:
         (props, { slots, attrs }) =>
         () => (
           <div
             data-end={props.end || undefined}
-            class={[
+            class={cnMerge(
               'border-default -mt-px -ml-px flex min-w-fit flex-col gap-1.5 border-l px-3 py-2',
               // the row separator spans the full ribbon width (clipped by its overflow-hidden), so a
               // partially filled wrapped line still gets an unbroken line above it
               'before:border-default relative before:absolute before:inset-x-[-100vw] before:top-0 before:border-t',
               // end sections hug their content, so the leading sections absorb the spare space
               props.end ? 'flex-none' : 'flex-1',
-            ]}
+              props.ui?.root,
+            )()}
           >
             {props.title ? <p class="text-dimmed text-[10px] leading-none">{props.title}</p> : null}
-            <div class="flex flex-1 flex-wrap items-center gap-1" {...attrs}>
+            <div
+              class={cnMerge('flex flex-1 flex-wrap items-center gap-1', props.ui?.content)()}
+              {...attrs}
+            >
               {slots.default?.()}
             </div>
           </div>

package/app/composables/{useAvailableWidth.ts → useFreeSpace.ts}

@@ -5,18 +5,22 @@ import { unrefElement, useResizeObserver } from '@vueuse/core'
 // eslint-disable-next-line unicorn/prefer-number-coercion
 const px = (value: string) => Number.parseFloat(value)
 
-const FREE_ATTR = 'data-available-width-free'
-const ROOT_ATTR = 'data-available-width-root'
+const FREE_ATTR = 'data-free-space'
+const ROOT_ATTR = 'data-free-space-root'
 
 const FREE = `[${FREE_ATTR}]`
 const ROOT = `[${ROOT_ATTR}]`
 
+/** Counts as free: opted out of the measurement, or taking up no room in it anyway — hidden,
+ * unrendered, or grown to nothing. */
+const isFree = (el: Element) => el.matches(FREE) || el.getBoundingClientRect().width === 0
+
 /** The element next to `node` on `side`, skipping the ones that count as free. */
 function siblingOf(node: Element | null | undefined, side: 'left' | 'right') {
   const step = (el: Element) =>
     side === 'left' ? el.previousElementSibling : el.nextElementSibling
   let sibling = node && step(node)
-  while (sibling?.matches(FREE)) sibling = step(sibling)
+  while (sibling && isFree(sibling)) sibling = step(sibling)
   return (sibling ?? undefined) as HTMLElement | undefined
 }
 
@@ -27,7 +31,7 @@ const rightOf = (node: Element | null | undefined) => siblingOf(node, 'right')
  * opted-out children hands over to the last child that isn't; one made of nothing but those
  * ends where it begins, however wide it grew. */
 function contentEdge(el: HTMLElement): { el: HTMLElement; side: 'left' | 'right' } {
-  if (!el.lastElementChild?.matches(FREE)) return { el, side: 'right' }
+  if (!el.lastElementChild || !isFree(el.lastElementChild)) return { el, side: 'right' }
   const last = leftOf(el.lastElementChild)
   return last ? contentEdge(last) : { el, side: 'left' }
 }
@@ -59,7 +63,7 @@ function anchors(target: MaybeComputedElementRef) {
  * nothing does. Stays meaningful when `target` overflows — unlike its own width, which is why it
  * can decide what still fits.
  *
- *   useAvailableWidth.root
+ *   useFreeSpace.root
  *  ┌───────────────────────────────────────────────────────┐
  *  │  ┌───────────┐  ┌╌╌╌╌╌╌╌╌╌┐  ┌────────┐  ┌─────────┐  │
  *  │  │ neighbour │  ╎  free   ╎  │ target │  │ blocker │  │
@@ -68,16 +72,17 @@ function anchors(target: MaybeComputedElementRef) {
  *                    from                   to
  *                    └─────── space ───────┘
  *
- * Elements spread with `useAvailableWidth.free` are read as empty space rather than as content
- * — the measurement runs straight through them, so `target` may grow into the room they hold. The
- * row containing `target` should carry `useAvailableWidth.root`: without it a target with nothing
- * to its left keeps climbing and ends up measured against something elsewhere on the page.
+ * Elements spread with `useFreeSpace.free`, and ones of no width at all — hidden, unrendered, or
+ * collapsed — are read as empty space rather than as content: the measurement runs straight
+ * through them, so `target` may grow into the room they hold. The row containing `target` should
+ * carry `useFreeSpace.root`: without it a target with nothing to its left keeps climbing and ends
+ * up measured against something elsewhere on the page.
  *
  * Either neighbour may be missing, in which case that end falls back to the container's content
  * box. `target` itself is never measured — which is what keeps the answer meaningful once it
  * overflows, and what lets an element that has given way find its way back.
  */
-export function useAvailableWidth(target: MaybeComputedElementRef) {
+export function useFreeSpace(target: MaybeComputedElementRef) {
   // until measured, whatever asks gets "plenty" and renders in full
   const space = ref(Infinity)
 
@@ -123,8 +128,8 @@ export function useAvailableWidth(target: MaybeComputedElementRef) {
 }
 
 /** Spread onto the box the search for a target's neighbours stops at. */
-useAvailableWidth.root = { [ROOT_ATTR]: '' }
+useFreeSpace.root = { [ROOT_ATTR]: '' }
 
 /** Spread onto an element that only fills room the others left over — a divider centred in the
  * gap, say. It sits in the flow, but the width it covers still counts as free. */
-useAvailableWidth.free = { [FREE_ATTR]: '' }
+useFreeSpace.free = { [FREE_ATTR]: '' }

package/package.json

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