@nexxtmove/ui 1.43.0 → 1.45.0

package/dist/ui.css

@@ -1,2 +1,2 @@
-input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-17eb933b]{animation:snap-in-17eb933b .18s var(--ease-out-strong)}input[data-snap=up][data-v-17eb933b]{--snap-from:2px}input[data-snap=down][data-v-17eb933b]{--snap-from:-2px}@keyframes snap-in-17eb933b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-17eb933b]{animation:1ms snap-hold-17eb933b}@keyframes snap-hold-17eb933b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
+input[data-snap][data-v-5d3904ac]{animation:snap-in-5d3904ac .18s var(--ease-out-strong)}input[data-snap=up][data-v-5d3904ac]{--snap-from:2px}input[data-snap=down][data-v-5d3904ac]{--snap-from:-2px}@keyframes snap-in-5d3904ac{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-5d3904ac]{animation:1ms snap-hold-5d3904ac}@keyframes snap-hold-5d3904ac{0%,to{opacity:1}}}input[data-snap][data-v-15feed8b]{animation:snap-in-15feed8b .18s var(--ease-out-strong)}input[data-snap=up][data-v-15feed8b]{--snap-from:2px}input[data-snap=down][data-v-15feed8b]{--snap-from:-2px}@keyframes snap-in-15feed8b{0%{opacity:0;transform:translateY(var(--snap-from))}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){input[data-snap][data-v-15feed8b]{animation:1ms snap-hold-15feed8b}@keyframes snap-hold-15feed8b{0%,to{opacity:1}}}rect[data-v-0a5d9b21]{animation-duration:4s;animation-timing-function:cubic-bezier(.77,0,.175,1);animation-iteration-count:infinite}rect[data-v-0a5d9b21]:first-child{animation-name:load-1-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(2){animation-name:load-2-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(3){animation-name:load-3-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(4){animation-name:load-4-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(5){animation-name:load-5-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(6){animation-name:load-6-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(7){animation-name:load-7-0a5d9b21}rect[data-v-0a5d9b21]:nth-child(8){animation-name:load-8-0a5d9b21}@media (prefers-reduced-motion:reduce){rect[data-v-0a5d9b21]{animation:none}svg[data-v-0a5d9b21]{animation:2.5s ease-in-out infinite pulse-0a5d9b21}}@keyframes pulse-0a5d9b21{0%,to{opacity:1}50%{opacity:.65}}@keyframes load-1-0a5d9b21{0%,80%{transform:translate(0)}5%,20%,60%,75%{transform:translate(-25px,25px)}30%,50%{transform:translate(-75px,75px)}}@keyframes load-2-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(50px)}30%,50%{transform:translateY(50px)}}@keyframes load-3-0a5d9b21{10%,70%{transform:translate(0%)}15%,65%{transform:translateY(-50px)}20%,60%{fill:var(--color-sapphire-500);transform:translateY(-50px)}30%,50%{fill:var(--color-purple-500);transform:translate(-50px)}}@keyframes load-4-0a5d9b21{20%,60%{transform:translate(0%)}30%,50%{transform:translate(50px,-50px)}}@keyframes load-5-0a5d9b21{0%,80%{transform:translate(0%)}5%,20%,60%,75%{transform:translateY(50px)}30%,50%{transform:translate(50px)}}@keyframes load-6-0a5d9b21{5%,75%{transform:translate(0%)}10%,20%,60%,70%{transform:translate(-50px)}30%,50%{transform:translateY(-50px)}}@keyframes load-7-0a5d9b21{10%,70%{transform:translate(0%)}15%,20%,60%,65%{transform:translate(50px)}30%,50%{transform:translate(100px,-50px)}}@keyframes load-8-0a5d9b21{15%,65%{transform:translate(0%)}20%,60%{transform:translateY(-50px)}30%,50%{transform:translate(50px,-100px)}}.timer-circle[data-v-7e3c5bda]{stroke-dashoffset:0;animation:linear forwards toast-timer-7e3c5bda}@keyframes toast-timer-7e3c5bda{to{stroke-dashoffset:var(--fa0d20de)}}
 /*$vite$:1*/

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.43.0",
+  "version": "1.45.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/editor/atoms/EditorDimensionField/EditorDimensionField.vue

@@ -97,7 +97,12 @@ const emit = defineEmits<{
   commit: []
 }>()
 
-/** The dimension, or `null` for none. */
+/**
+ * The dimension, or `null` for none. A `null` from outside -- another element
+ * selected, an undo -- resets the unit to the first of `units`; a field the
+ * user emptied keeps the unit picked in it. A value from outside brings its
+ * own unit.
+ */
 const model = defineModel<EditorDimensionValue | null>({ default: null })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
@@ -109,10 +114,20 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
  */
 const unit = ref<EditorDimensionUnit>(model.value?.unit ?? units[0])
 
+/**
+ * Set while the field's own `null` is on its way through the model. Without
+ * it, the user emptying the field could not be told apart from a `null` from
+ * outside, and only the latter resets the unit.
+ */
+let emptiedHere = false
+
 watch(
-  () => model.value?.unit,
+  () => model.value,
   (next) => {
-    if (next) unit.value = next
+    if (next) unit.value = next.unit
+    else if (!emptiedHere) unit.value = units[0]
+
+    emptiedHere = false
   },
 )
 
@@ -183,6 +198,7 @@ const write = (next: EditorDimensionValue | null) => {
   )
     return false
 
+  emptiedHere = next === null
   model.value = next
   return true
 }

package/src/components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue

@@ -37,6 +37,12 @@ export interface EditorMaxWidthMessages {
   unit?: string
 }
 
+/**
+ * Sets a width on Tailwind's `max-w-*` steps, stored as the class.
+ *
+ * @deprecated Use `NexxtEditorSizeLimit`: a free maximum in px or % that can
+ * be none.
+ */
 export interface NexxtEditorMaxWidthProps {
   /**
    * Header text of the settings block. Defaults to the Dutch

package/src/components/editor/molecules/EditorSize/EditorSize.vue

@@ -21,7 +21,9 @@ export interface EditorSizeValue {
   mode: EditorSizeMode
   /**
    * The fixed dimension. Kept when another mode is picked, so switching back
-   * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`.
+   * to `'fixed'` restores it; it only applies while `mode` is `'fixed'`. The
+   * app always fills it with the measured size of the element, so picking
+   * `'fixed'` starts from that size.
    */
   fixed?: EditorDimensionValue
 }
@@ -119,9 +121,10 @@ const emit = defineEmits<{
 }>()
 
 /**
- * The size. Picking `'fixed'` without a `fixed` dimension leaves the field
- * empty until a value is entered; seed `fixed` -- with the measured size, say
- * -- to start from there instead.
+ * The size. Fill `fixed` with the measured size of the element, as the app
+ * always does. Without it, picking `'fixed'` writes `{ mode: 'fixed' }` and
+ * commits straight away, leaving a fixed mode without a size until a value is
+ * typed; with the measured size, that state does not come up.
  */
 const model = defineModel<EditorSizeValue>({ required: true })
 

package/src/components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue

@@ -7,6 +7,11 @@ import type {
 /** Overridable copy of the field. Every key is optional. */
 export type EditorSizeLimitMessages = EditorDimensionFieldMessages
 
+/**
+ * A free minimum or maximum of an element's size, in px or %, that can be
+ * none. Replaces the deprecated `NexxtEditorMaxWidth`, which offers only
+ * Tailwind's `max-w-*` steps.
+ */
 export interface NexxtEditorSizeLimitProps {
   /** Visible label above the field, and its accessible name, as in `'Maximale breedte'`. */
   label: string

package/src/components/molecules/Tree/Tree.vue

@@ -80,7 +80,7 @@ const selected = defineModel<string | null>('selected', { default: null })
 /** Ids of the nodes whose children are hidden. Tracking the collapsed ones makes "everything open" the default. */
 const collapsed = defineModel<string[]>('collapsed', { default: () => [] })
 
-const INDENT = 22
+const INDENT = 8
 
 const root = useTemplateRef<HTMLElement>('root')
 const focusedId = ref<string | null>(null)
@@ -890,7 +890,7 @@ defineExpose({ focusNode })
         <!-- The drop indicator: where the dragged node lands, at the depth it lands on. Out of
              the accessibility tree and without `data-tree-id`, so it is no row to the keyboard,
              the tab stop or the highlight. One element for the whole drag, that changes spots. -->
-        <div v-if="item.ghost" aria-hidden="true" class="mb-0.5" data-tree-ghost>
+        <div v-if="item.ghost" aria-hidden="true" class="mb-1.5" data-tree-ghost>
           <div
             class="flex rounded-md bg-cornflower-blue-50 py-1 pr-2 pl-1 small-normal text-gray-700 outline-1 -outline-offset-1 outline-cornflower-blue-600 transition-[margin-left] duration-200 ease-in-out-strong outline-dashed motion-reduce:transition-none"
             :style="{ marginLeft: `${item.depth * INDENT}px` }"
@@ -918,7 +918,7 @@ defineExpose({ focusNode })
           :data-tree-id="item.row.node.id"
           :data-tree-drop="collapsedTargetId === item.row.node.id ? 'inside' : undefined"
           :draggable="item.row.draggable"
-          class="group mb-0.5 flex items-center gap-1.5 rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
+          class="group mb-1.5 flex items-center gap-1.5 overflow-x-clip rounded-md py-1 pr-2 small-normal transition-[color,background-color,outline-color,opacity] duration-150 select-none focus-visible:outline-2 focus-visible:outline-cornflower-blue-500 motion-reduce:transition-none"
           :class="rowClasses(item.row)"
           :style="{ paddingLeft: `${item.row.depth * INDENT + 4}px` }"
           @click="onRowClick(item.row.node.id)"
@@ -955,19 +955,39 @@ defineExpose({ focusNode })
             class="shrink-0 transition-colors duration-150 motion-reduce:transition-none"
             :class="selected === item.row.node.id ? 'text-cornflower-blue-600' : 'text-gray-600'"
           />
-          <span :id="labelId(item.row.node.id)" class="truncate">{{ item.row.node.label }}</span>
-
-          <!-- Revealed by opacity rather than removed, so the row keeps its layout while it
-               appears. Pulled into the row's padding so a 24px button leaves the row at 28px.
-               Stopping here keeps the row's click and the tree's keys away from the actions. -->
+          <span :id="labelId(item.row.node.id)" data-tree-label class="min-w-0 flex-1 truncate">{{
+            item.row.node.label
+          }}</span>
+
+          <!-- Only the selected row has actions: the track grows from 0 to their width and pushes
+               its label in, while their start, pinned to it, slides them in from the row's end.
+               The clip hides what has not slid in yet; the row's `overflow-x-clip` keeps them out
+               of the panel's scroll width meanwhile. Inert on every other row, so what cannot be
+               seen cannot be focused or read either; `undefined` rather than `false`, so no
+               `inert="false"` lands where the DOM has no such property. Pulled into the row's padding so a 24px
+               button leaves the row at 28px, and into the row's gap so a label without actions
+               runs to the row's end. Stopping here keeps the row's click and the tree's keys away
+               from the actions. -->
           <div
             v-if="slots['node-actions']"
             data-tree-actions
-            class="-my-0.5 ml-auto flex shrink-0 items-center opacity-0 transition-opacity duration-150 ease-out group-focus-within:opacity-100 group-hover:opacity-100 motion-reduce:transition-none pointer-coarse:opacity-100"
+            class="-my-0.5 -ml-1.5 grid shrink-0 transition-[grid-template-columns] duration-200 ease-in-out-strong [clip-path:inset(-0.5rem_-0.25rem)] motion-reduce:transition-none"
+            :class="
+              selected === item.row.node.id
+                ? 'grid-cols-[minmax(0,1fr)]'
+                : 'grid-cols-[minmax(0,0fr)]'
+            "
+            :inert="selected !== item.row.node.id || undefined"
             @click.stop
             @keydown.stop
           >
-            <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            <div
+              data-tree-actions-content
+              class="flex w-max items-center pl-1.5 transition-opacity duration-150 ease-out motion-reduce:transition-none"
+              :class="selected === item.row.node.id ? 'opacity-100' : 'opacity-0'"
+            >
+              <NodeActions :node="item.row.node" :tabindex="tabindexOf(item.row.node.id)" />
+            </div>
           </div>
         </div>
       </template>