@nexxtmove/ui 1.27.0 → 1.28.0

package/dist/ui.css

@@ -1,2 +1,2 @@
-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}}}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.27.0",
+  "version": "1.28.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

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

@@ -2,15 +2,22 @@
 import type { PaddingIconSide } from './_PaddingIcon.vue'
 
 /**
- * The steps a field can land on, as the numeric part of the Tailwind class.
- * 13 and 15 are missing on purpose: the theme defines `--spacing-0` through
- * `--spacing-12` and then only 14 and 16, so offering every integer would
- * produce classes that have no token behind them.
+ * The steps a field can land on, as the numeric part of the Tailwind class:
+ * every integer `--spacing-*` token the theme defines. The list thins out as it
+ * climbs -- 13 and 15 are absent, and past 16 it moves in fours and then
+ * eights -- so snapping over this list rather than over the px value keeps the
+ * field off classes that have no token behind them.
  */
-const PADDING_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16] as const
+const PADDING_STEPS = [
+  0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64,
+  72, 80, 96,
+] as const
 
-/** Highest step, used as the `max` of every field and as the clamp ceiling. */
-const MAX_STEP = PADDING_STEPS[PADDING_STEPS.length - 1]
+/** The spacing scale is built on 0.25rem, so `p-4` is 4 × 4 = 16 px. */
+const PX_PER_STEP = 4
+
+/** Highest value a field takes, in px: the top step is `p-96`, which is 384 px. */
+const MAX_PX = PADDING_STEPS[PADDING_STEPS.length - 1] * PX_PER_STEP
 
 const ALL_SIDES: PaddingIconSide[] = ['top', 'right', 'bottom', 'left']
 
@@ -36,6 +43,12 @@ export interface EditorPaddingMessages {
    * fields. Defaults to `'Padding per zijde'`.
    */
   toggle?: string
+  /**
+   * Unit the fields show and read, appended to every accessible name. The
+   * values themselves are px whatever this says, so it is copy, not a
+   * conversion. Defaults to `'px'`.
+   */
+  unit?: string
 }
 
 export interface NexxtEditorPaddingProps {
@@ -61,6 +74,7 @@ const DEFAULT_MESSAGES = {
   bottom: 'Onder',
   left: 'Links',
   toggle: 'Padding per zijde',
+  unit: 'px',
 } satisfies Required<EditorPaddingMessages>
 
 /** Which sides a `p*-` prefix writes to. */
@@ -105,15 +119,15 @@ const serialize = ({ top, right, bottom, left }: PaddingSides): string => {
 }
 
 /**
- * Clamp to 0-16 and snap to the nearest step. A tie goes to the lower step, so
- * 13 becomes 12 and 15 becomes 14; that way typing a digit never jumps the
- * value further than the next step up.
+ * Turn a px value into a step: clamp to 0-384 and take the nearest one. A tie
+ * goes to the lower step, so 14 px becomes 12 and 60 px becomes 56; that way a
+ * value in between never lands further away than the step above it.
  */
-const snap = (value: number): number => {
-  const clamped = Math.min(Math.max(value, 0), MAX_STEP)
+const snap = (px: number): number => {
+  const clamped = Math.min(Math.max(px, 0), MAX_PX)
 
   return PADDING_STEPS.reduce((best, step) =>
-    Math.abs(step - clamped) < Math.abs(best - clamped) ? step : best,
+    Math.abs(step * PX_PER_STEP - clamped) < Math.abs(best * PX_PER_STEP - clamped) ? step : best,
   )
 }
 </script>
@@ -198,25 +212,53 @@ const secondaryFields = computed<PaddingField[]>(() => [
 // from the tab order. Same trick as EditorSettingsBlock.
 const secondaryInert = computed(() => (expanded.value ? undefined : true))
 
-// An empty field is a 0, and a 0 is shown as an empty field so the placeholder
-// carries it. Typing "0" therefore leaves the bound value unchanged, which is
-// what keeps Vue from wiping the character out from under the caret.
+// The fields speak px, not steps: `p-6` reads as 24. A 0 is shown as an empty
+// field so the placeholder carries it, and an empty field commits back as a 0.
 const display = (side: PaddingIconSide) =>
-  sides.value[side] === 0 ? '' : String(sides.value[side])
+  sides.value[side] === 0 ? '' : String(sides.value[side] * PX_PER_STEP)
 
-// Only plain digits count. `Number.parseInt` would read "1e2" as 1 and "12abc"
-// as 12, which silently turns a typo into a value the user did not ask for.
-const DIGITS = /^\d+$/
+const apply = (next: PaddingSides) => {
+  // A change that changes nothing -- committing 30 where the value is already
+  // 28 px, arrowing up at the ceiling, closing a symmetrical block -- writes
+  // nothing either, so the editor does not see an edit that was not one.
+  if (ALL_SIDES.every((side) => next[side] === sides.value[side])) return
 
-const onInput = (field: PaddingField, typed: string) => {
-  const raw = typed.trim()
-  const step = DIGITS.test(raw) ? snap(Number(raw)) : 0
+  sides.value = next
+  model.value = serialize(next)
+}
 
+const write = (field: PaddingField, step: number) => {
   const next = { ...sides.value }
   for (const side of field.targets) next[side] = step
-  sides.value = next
 
-  model.value = serialize(next)
+  apply(next)
+}
+
+/** A confirmed field, in px: blur or Enter, not a keystroke. */
+const onCommit = (field: PaddingField, px: number) => write(field, snap(px))
+
+/** One step along the list, so the arrow keys never stop on a missing token. */
+const onStep = (field: PaddingField, direction: 1 | -1) => {
+  const index = PADDING_STEPS.indexOf(sides.value[field.source] as (typeof PADDING_STEPS)[number])
+  // No wrapping: the ends of the list are the ends of the range.
+  const next = Math.min(Math.max(index + direction, 0), PADDING_STEPS.length - 1)
+
+  write(field, PADDING_STEPS[next])
+}
+
+/**
+ * Closing the block makes the two fields that stay visible the truth: whatever
+ * the hidden bottom and left were, they follow top and right. That is written
+ * straight away rather than on the next edit, so what is on screen and what is
+ * on the element never disagree -- `pt-4 pr-2 pb-6 pl-2` closes as `px-2 py-4`,
+ * and the horizontal field then reads what Rechts said. Opening changes nothing:
+ * it only shows the two values that were already there.
+ */
+const onToggle = () => {
+  expanded.value = !expanded.value
+  if (expanded.value) return
+
+  apply({ ...sides.value, bottom: sides.value.top, left: sides.value.right })
 }
 </script>
 
@@ -235,8 +277,9 @@ const onInput = (field: PaddingField, typed: string) => {
         :sides="field.targets"
         :label="field.label"
         :value="display(field.source)"
-        :max="MAX_STEP"
-        @input="onInput(field, $event)"
+        :unit="copy.unit"
+        @commit="onCommit(field, $event)"
+        @step="onStep(field, $event)"
       />
 
       <!--
@@ -256,7 +299,7 @@ const onInput = (field: PaddingField, typed: string) => {
               ? 'bg-cornflower-blue-50 text-cornflower-blue-600 ring-cornflower-blue-500'
               : 'text-gray-700 ring-gray-200 hover:text-gray-900',
           ]"
-          @click="expanded = !expanded"
+          @click="onToggle"
         >
           <PaddingIcon :sides="ALL_SIDES" />
         </button>
@@ -300,8 +343,9 @@ const onInput = (field: PaddingField, typed: string) => {
             :sides="field.targets"
             :label="field.label"
             :value="display(field.source)"
-            :max="MAX_STEP"
-            @input="onInput(field, $event)"
+            :unit="copy.unit"
+            @commit="onCommit(field, $event)"
+            @step="onStep(field, $event)"
           />
         </div>
       </div>

package/src/components/editor/molecules/EditorPadding/_PaddingField.vue

@@ -1,56 +1,243 @@
+<script lang="ts">
+// Only plain digits count. `Number.parseInt` would read "1e2" as 1 and "12abc"
+// as 12, which silently turns a typo into a value the user did not ask for.
+const DIGITS = /^\d+$/
+</script>
+
 <script lang="ts" setup>
+import { nextTick, ref, useTemplateRef, watch } from 'vue'
 import PaddingIcon from './_PaddingIcon.vue'
 import type { PaddingIconSide } from './_PaddingIcon.vue'
 
 export interface NexxtEditorPaddingFieldProps {
   /** Sides the icon marks, which is also what this field edits. */
   sides: PaddingIconSide[]
-  /** Accessible name of the input; the settings block label is not a `<label for>`. */
+  /** Name of the field; the unit is appended to it for the accessible name. */
   label: string
-  /** Value as shown, already normalised. An empty string falls back to the `0` placeholder. */
+  /** Value as shown, in the unit below. An empty string falls back to the `0` placeholder. */
   value: string
-  /** Highest value the input accepts. */
-  max: number
+  /** Unit of the value, shown behind the input and part of the accessible name. */
+  unit: string
 }
 
 defineOptions({ name: 'NexxtEditorPaddingField' })
 
-defineProps<NexxtEditorPaddingFieldProps>()
+const { value } = defineProps<NexxtEditorPaddingFieldProps>()
+
+const emit = defineEmits<{
+  /**
+   * The value the user confirmed, on blur or Enter rather than on every
+   * keystroke. Reading the text is this component's job because it owns the
+   * input; text that is not a number never gets here. Snapping it onto the
+   * scale is the parent's, because it owns the class string.
+   */
+  commit: [value: number]
+  /** One step up or down the parent's list, straight away. */
+  step: [direction: 1 | -1]
+}>()
+
+const inputEl = useTemplateRef<HTMLInputElement>('input')
+
+/**
+ * What the input shows while it is being edited. It is deliberately not the
+ * model: a half-typed "3" on the way to "30" would snap to 4 and fight the
+ * caret, so nothing leaves this component until the value is confirmed.
+ */
+const draft = ref(value)
+
+/** Direction of the one-shot snap animation, cleared once it has played. */
+const snapped = ref<'up' | 'down'>()
+
+// The model stays the source of truth: a change from outside -- the parent
+// snapping a commit included -- replaces the draft.
+watch(
+  () => value,
+  (next) => {
+    draft.value = next
+  },
+)
+
+/** Focus with the whole value selected, so the next digit replaces it. */
+const selectAll = () => {
+  inputEl.value?.focus()
+  inputEl.value?.select()
+}
+
+/**
+ * Pointer-down anywhere in the field -- on the icon or the unit as much as on
+ * the input -- lands in the input with its value selected. The default is
+ * prevented so the browser does not drop a caret inside that selection again on
+ * mouse-up.
+ */
+const onPointerDown = (event: PointerEvent) => {
+  // Mouse only. Touch and pen keep their native behaviour, because preventing
+  // the default there can keep iOS from opening the keyboard -- and `@focus`
+  // selects the value on those just the same.
+  if (event.pointerType !== 'mouse') return
+  if (document.activeElement === inputEl.value) return
+
+  event.preventDefault()
+  selectAll()
+}
 
 /**
- * The raw string the user typed, on every keystroke rather than on change.
- * Parsing and snapping belong to the parent, which owns the class string.
+ * Hand the value to the parent and show back whatever it made of it, which is
+ * the snapped value, or the value from before for text that was not a number at
+ * all. The draft is re-read rather than assumed: a commit that snaps onto the
+ * value the field already had leaves the model untouched, so waiting on the prop
+ * to change would strand the typed text.
  */
-const emit = defineEmits<{ input: [value: string] }>()
+const commit = async () => {
+  const typed = draft.value.trim()
+
+  // Clearing the field is how a zero is entered; the placeholder already shows
+  // it. Anything that is not a number leaves the field without a commit and is
+  // replaced by the old value below, the same as Escape -- guessing at "12a"
+  // would put a value on the element that nobody asked for.
+  if (typed === '') emit('commit', 0)
+  else if (DIGITS.test(typed)) emit('commit', Number(typed))
+
+  await nextTick()
+  draft.value = value
+
+  // Compared as numbers, so "016" against a field already showing 16 is not a
+  // change and does not animate.
+  if (!DIGITS.test(typed) || Number(typed) === Number(value || '0')) return
+
+  // Restart the one-shot: re-setting the direction it already has would not
+  // retrigger the animation, so two snaps the same way within 180ms would show
+  // only the first.
+  snapped.value = undefined
+  await nextTick()
+
+  snapped.value = Number(value || '0') > Number(typed) ? 'up' : 'down'
+}
 
-const onInput = (event: Event) => emit('input', (event.target as HTMLInputElement).value)
+/** Arrows write immediately, so the draft only has to catch up. */
+const onStep = async (direction: 1 | -1) => {
+  emit('step', direction)
+
+  await nextTick()
+  draft.value = value
+}
+
+const onKeydown = async (event: KeyboardEvent) => {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    await commit()
+
+    // Select what it landed on, so the field is ready for the next value the
+    // same way focus and Escape leave it.
+    return selectAll()
+  }
+
+  if (event.key === 'Escape') {
+    // Only swallowed when there is typing to undo. With nothing to revert,
+    // Escape belongs to whatever popover or panel the field sits in.
+    if (draft.value === value) return
+
+    event.stopPropagation()
+    draft.value = value
+    return selectAll()
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+    // Or the caret would jump to either end of the value as well.
+    event.preventDefault()
+    return onStep(event.key === 'ArrowUp' ? 1 : -1)
+  }
+}
 </script>
 
 <template>
   <!--
     Visually a NexxtInputField, rebuilt here: that component forces `min-w-60`
     on its input, which blows up this two-column grid, and renders spin buttons
-    for `type="number"` that make no sense against a step list.
+    for `type="number"` that make no sense against a step list. `cursor-text`
+    and the pointer handler make the whole row behave as the input it wraps.
+
+    The inner spacing is asymmetric, the padding is not: `gap-1` with an extra
+    `mr-1` on the icon leaves 8px between the icon and the number but only 4px
+    between the number and its unit, which reads as one value and buys the number
+    the width it needs. At three digits plus a unit the field has little to spare.
   -->
   <div
-    class="flex items-center gap-2 overflow-hidden rounded-lg pl-3 ring ring-gray-200 transition-colors duration-150 ease-out focus-within:ring-cornflower-blue-500 hover:ring-gray-300 motion-reduce:transition-none"
+    class="flex cursor-text items-center gap-1 overflow-hidden rounded-lg px-3 whitespace-nowrap ring ring-gray-200 transition-colors duration-150 ease-out focus-within:ring-cornflower-blue-500 hover:ring-gray-300 motion-reduce:transition-none"
+    @pointerdown="onPointerDown"
   >
-    <PaddingIcon :sides="sides" class="text-gray-900" />
+    <PaddingIcon :sides="sides" class="mr-1 text-gray-900" />
 
     <!--
-      `type="number"` for the numeric keypad on mobile; the spinners are hidden
-      because the value snaps to a step list, not to a fixed interval.
+      Text, not `type="number"`: a number input reports an empty `value` for
+      anything it cannot parse, so "12a" would arrive as a cleared field and
+      snap to 0 mid-word. `inputmode` still asks for the numeric keypad. No
+      `maxlength`: it would silently turn a pasted 1000 into 100, where the
+      clamp turns it into the 384 the user was reaching for.
     -->
     <input
-      type="number"
+      ref="input"
+      type="text"
       inputmode="numeric"
-      min="0"
-      :max="max"
+      autocomplete="off"
       placeholder="0"
-      :aria-label="label"
-      :value="value"
-      class="h-10 w-full bg-transparent pr-3 small-normal text-gray-900 placeholder-gray-700 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-      @input="onInput"
+      :aria-label="`${label} (${unit})`"
+      :value="draft"
+      :data-snap="snapped"
+      class="h-10 min-w-0 flex-1 bg-transparent text-right small-normal text-gray-900 tabular-nums placeholder-gray-700 focus:outline-none"
+      @input="draft = ($event.target as HTMLInputElement).value"
+      @focus="selectAll"
+      @blur="commit"
+      @keydown="onKeydown"
+      @animationend="snapped = undefined"
     />
+
+    <span class="shrink-0 small-normal text-gray-700 select-none" aria-hidden="true">
+      {{ unit }}
+    </span>
   </div>
 </template>
+
+<style scoped>
+/* A committed value that landed on a different step than the one typed is
+   replaced rather than edited, so it arrives as its own number: it fades in and
+   travels the way the value moved -- up for a higher one, down for a lower. */
+input[data-snap] {
+  animation: snap-in 180ms var(--ease-out-strong);
+}
+
+input[data-snap='up'] {
+  --snap-from: 2px;
+}
+
+input[data-snap='down'] {
+  --snap-from: -2px;
+}
+
+@keyframes snap-in {
+  from {
+    opacity: 0;
+    transform: translateY(var(--snap-from));
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* The number itself is the feedback; without motion there is nothing left to
+   say that the swap needs, so it just appears. Not `animation: none`: that fires
+   no `animationend`, so the attribute would stay on and the next snap in the
+   same direction would have nothing to retrigger. A 1ms no-op keeps the event. */
+@media (prefers-reduced-motion: reduce) {
+  input[data-snap] {
+    animation: snap-hold 1ms;
+  }
+
+  @keyframes snap-hold {
+    from,
+    to {
+      opacity: 1;
+    }
+  }
+}
+</style>