@nexxtmove/ui 1.19.0 → 1.20.0

package/dist/nuxt.js

@@ -68,7 +68,8 @@ var s = {
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
-	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue"
+	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {
 		name: "@nexxtmove/ui",

package/package.json

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

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

@@ -0,0 +1,310 @@
+<script lang="ts">
+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.
+ */
+const PADDING_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16] 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]
+
+const ALL_SIDES: PaddingIconSide[] = ['top', 'right', 'bottom', 'left']
+
+/** Padding per side, as the numeric part of the Tailwind class. */
+type PaddingSides = Record<PaddingIconSide, number>
+
+/** Overridable copy of the field and toggle names. Every key is optional. */
+export interface EditorPaddingMessages {
+  /** Accessible name of the collapsed left/right field. Defaults to `'Horizontaal'`. */
+  horizontal?: string
+  /** Accessible name of the collapsed top/bottom field. Defaults to `'Verticaal'`. */
+  vertical?: string
+  /** Accessible name of the top field. Defaults to `'Boven'`. */
+  top?: string
+  /** Accessible name of the right field. Defaults to `'Rechts'`. */
+  right?: string
+  /** Accessible name of the bottom field. Defaults to `'Onder'`. */
+  bottom?: string
+  /** Accessible name of the left field. Defaults to `'Links'`. */
+  left?: string
+  /**
+   * Accessible name *and* tooltip of the button that shows the four separate
+   * fields. Defaults to `'Padding per zijde'`.
+   */
+  toggle?: string
+}
+
+export interface NexxtEditorPaddingProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Padding'`; the
+   * library has no i18n layer, so a consumer in another language passes its
+   * own copy in.
+   */
+  label?: string
+  /**
+   * Accessible names of the fields and the toggle. Defaults are Dutch and are
+   * merged per key, so overriding one keeps the defaults of the others. Copy
+   * is never translated inside the component.
+   */
+  messages?: EditorPaddingMessages
+}
+
+const DEFAULT_MESSAGES = {
+  horizontal: 'Horizontaal',
+  vertical: 'Verticaal',
+  top: 'Boven',
+  right: 'Rechts',
+  bottom: 'Onder',
+  left: 'Links',
+  toggle: 'Padding per zijde',
+} satisfies Required<EditorPaddingMessages>
+
+/** Which sides a `p*-` prefix writes to. */
+const PREFIX_SIDES: Record<string, PaddingIconSide[]> = {
+  '': ALL_SIDES,
+  x: ['left', 'right'],
+  y: ['top', 'bottom'],
+  t: ['top'],
+  r: ['right'],
+  b: ['bottom'],
+  l: ['left'],
+}
+
+const TOKEN = /^p([xytrbl]?)-(\d+)$/
+
+/**
+ * Read the four sides out of a Tailwind class string. Anything that is not a
+ * padding utility on the step list is ignored, and a later token wins over an
+ * earlier one -- the same thing Tailwind's own cascade does for `p-4 pt-2`.
+ */
+const parse = (value: string): PaddingSides => {
+  const sides: PaddingSides = { top: 0, right: 0, bottom: 0, left: 0 }
+
+  for (const token of value.split(/\s+/)) {
+    const match = TOKEN.exec(token)
+    if (!match) continue
+
+    const step = Number(match[2])
+    if (!PADDING_STEPS.includes(step as (typeof PADDING_STEPS)[number])) continue
+
+    for (const side of PREFIX_SIDES[match[1]]) sides[side] = step
+  }
+
+  return sides
+}
+
+/** Write the four sides back as the shortest class string that expresses them. */
+const serialize = ({ top, right, bottom, left }: PaddingSides): string => {
+  if (top === right && right === bottom && bottom === left) return `p-${top}`
+  if (top === bottom && left === right) return `px-${left} py-${top}`
+  return `pt-${top} pr-${right} pb-${bottom} pl-${left}`
+}
+
+/**
+ * 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.
+ */
+const snap = (value: number): number => {
+  const clamped = Math.min(Math.max(value, 0), MAX_STEP)
+
+  return PADDING_STEPS.reduce((best, step) =>
+    Math.abs(step - clamped) < Math.abs(best - clamped) ? step : best,
+  )
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+import PaddingField from './_PaddingField.vue'
+import PaddingIcon from './_PaddingIcon.vue'
+
+defineOptions({ name: 'NexxtEditorPadding' })
+
+const { label = 'Padding', messages } = defineProps<NexxtEditorPaddingProps>()
+
+/** The padding, as the Tailwind class string to apply. */
+const model = defineModel<string>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const sides = ref<PaddingSides>(parse(model.value))
+
+// The model is the source of truth, so a change from outside re-reads it. The
+// open state is deliberately left alone: collapsing is a view choice of the
+// user, and a re-parse mid-edit should not fold the four fields away.
+watch(model, (value) => {
+  sides.value = parse(value)
+})
+
+/**
+ * Whether the four separate fields are shown. Opens on mount when the value
+ * cannot be expressed with two fields; from then on the button owns it.
+ */
+const expanded = ref(
+  sides.value.top !== sides.value.bottom || sides.value.left !== sides.value.right,
+)
+
+interface PaddingField {
+  key: string
+  /** Sides this field writes to. */
+  targets: PaddingIconSide[]
+  /** Side this field reads from. */
+  source: PaddingIconSide
+  label: string
+}
+
+const singleSideField = (side: PaddingIconSide): PaddingField => ({
+  key: side,
+  targets: [side],
+  source: side,
+  label: copy.value[side],
+})
+
+/**
+ * The row that is always visible. Its two fields swap meaning the instant the
+ * toggle flips -- only the second row animates, so the block never jumps.
+ */
+const primaryFields = computed<PaddingField[]>(() =>
+  expanded.value
+    ? [singleSideField('top'), singleSideField('right')]
+    : [
+        {
+          key: 'horizontal',
+          targets: ['left', 'right'],
+          source: 'left',
+          label: copy.value.horizontal,
+        },
+        { key: 'vertical', targets: ['top', 'bottom'], source: 'top', label: copy.value.vertical },
+      ],
+)
+
+/** The row that slides open. Stays mounted so its height can be animated. */
+const secondaryFields = computed<PaddingField[]>(() => [
+  singleSideField('bottom'),
+  singleSideField('left'),
+])
+
+// Vue only drops an attribute on `false` for a fixed list of boolean
+// attributes, and `inert` is not on that list: `:inert="false"` renders
+// `inert="false"`, which a browser still treats as inert. `undefined` is the
+// only value that removes the attribute -- and with it the two hidden fields
+// 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.
+const display = (side: PaddingIconSide) =>
+  sides.value[side] === 0 ? '' : String(sides.value[side])
+
+// 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 onInput = (field: PaddingField, typed: string) => {
+  const raw = typed.trim()
+  const step = DIGITS.test(raw) ? snap(Number(raw)) : 0
+
+  const next = { ...sides.value }
+  for (const side of field.targets) next[side] = step
+  sides.value = next
+
+  model.value = serialize(next)
+}
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <!--
+      Both rows share one column template, and the third column is a fixed
+      2.5rem instead of `auto`: the second row has no toggle, so an `auto`
+      column would collapse there and its fields would come out wider than the
+      ones above them.
+    -->
+    <div class="grid grid-cols-[1fr_1fr_2.5rem] gap-2">
+      <PaddingField
+        v-for="field in primaryFields"
+        :key="field.key"
+        :sides="field.targets"
+        :label="field.label"
+        :value="display(field.source)"
+        :max="MAX_STEP"
+        @input="onInput(field, $event)"
+      />
+
+      <!--
+        Tooltip renders no element of its own -- its trigger is `as-child` --
+        so the button itself stays the third grid item and the columns are
+        unaffected. The tooltip repeats the accessible name rather than adding
+        copy: the icon alone does not say what the button does.
+      -->
+      <NexxtTooltip disable-closing-trigger>
+        <button
+          type="button"
+          :aria-label="copy.toggle"
+          :aria-pressed="expanded"
+          :class="[
+            'flex size-10 cursor-pointer items-center justify-center rounded-lg ring transition-colors duration-150 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:ring-offset-2 motion-reduce:transition-none',
+            expanded
+              ? '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"
+        >
+          <PaddingIcon :sides="ALL_SIDES" />
+        </button>
+        <template #tooltip>
+          <span class="small-normal text-gray-900">{{ copy.toggle }}</span>
+        </template>
+      </NexxtTooltip>
+    </div>
+
+    <!--
+      Only the second row animates: the first row keeps its place and swaps its
+      contents, so opening the four fields grows the block instead of jumping
+      it. The row stays mounted -- a 0fr grid row is what collapses it -- and
+      `inert` keeps the two hidden fields out of the tab order meanwhile.
+    -->
+    <div
+      data-testid="editor-padding-secondary-row"
+      :inert="secondaryInert"
+      :class="[
+        'grid transition-[grid-template-rows] duration-200 ease-out-strong motion-reduce:transition-none',
+        expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+      ]"
+    >
+      <!--
+        `overflow-hidden` is what makes the 0fr collapse clip, but it would also
+        clip the focus ring of the fields inside. `-mx-1` widens the clipping
+        box by 4px on each side and the `px-1` below pushes the content back, so
+        the ring has room while the columns stay aligned with the row above.
+      -->
+      <div
+        :class="[
+          '-mx-1 min-h-0 overflow-hidden transition-opacity duration-200 ease-out-strong motion-reduce:transition-none',
+          expanded ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        <!-- Spacing sits inside the clipped box so nothing is left over at 0fr. -->
+        <div class="grid grid-cols-[1fr_1fr_2.5rem] gap-2 px-1 pt-2 pb-1">
+          <PaddingField
+            v-for="field in secondaryFields"
+            :key="field.key"
+            :sides="field.targets"
+            :label="field.label"
+            :value="display(field.source)"
+            :max="MAX_STEP"
+            @input="onInput(field, $event)"
+          />
+        </div>
+      </div>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+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>`. */
+  label: string
+  /** Value as shown, already normalised. An empty string falls back to the `0` placeholder. */
+  value: string
+  /** Highest value the input accepts. */
+  max: number
+}
+
+defineOptions({ name: 'NexxtEditorPaddingField' })
+
+defineProps<NexxtEditorPaddingFieldProps>()
+
+/**
+ * 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.
+ */
+const emit = defineEmits<{ input: [value: string] }>()
+
+const onInput = (event: Event) => emit('input', (event.target as HTMLInputElement).value)
+</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.
+  -->
+  <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"
+  >
+    <PaddingIcon :sides="sides" class="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.
+    -->
+    <input
+      type="number"
+      inputmode="numeric"
+      min="0"
+      :max="max"
+      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"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+/** The four edges of the box, in CSS order. */
+export type PaddingIconSide = 'top' | 'right' | 'bottom' | 'left'
+
+export interface NexxtEditorPaddingIconProps {
+  /**
+   * Edges that are lit, so one icon covers every field: `['left', 'right']`
+   * reads as horizontal padding, `['top', 'bottom']` as vertical, a single
+   * side as that side, and all four as padding in general. The other lines are
+   * drawn as well, but transparent.
+   */
+  sides: PaddingIconSide[]
+}
+
+/** Outer box: inset by 1 so the 1.25 stroke stays inside the 16×16 viewBox. */
+const EDGE = 1
+/** Inner lines sit at 4, three units inside the outer box path at 1. */
+const INNER = 4
+
+/**
+ * Where an inner line starts and ends along its own axis. With all four sides
+ * lit the lines would touch in the corners, so they are pulled in on both ends;
+ * by 2, not by 1, because `stroke-linecap="round"` gives every line back half a
+ * stroke width at each end -- a 1-unit inset nets out at 0.375 and leaves no
+ * visible corner gap at 16 px. With fewer sides the longer line reads better.
+ */
+const SPAN = { long: [INNER, 16 - INNER], short: [INNER + 2, 16 - INNER - 2] } as const
+
+/** Drawn in this order, so the four lines keep their identity across a swap. */
+const ALL_SIDES: PaddingIconSide[] = ['top', 'right', 'bottom', 'left']
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+defineOptions({ name: 'NexxtEditorPaddingIcon' })
+
+const { sides } = defineProps<NexxtEditorPaddingIconProps>()
+
+const geometry = (side: PaddingIconSide, from: number, to: number) => {
+  if (side === 'top') return { x1: from, y1: INNER, x2: to, y2: INNER }
+  if (side === 'bottom') return { x1: from, y1: 16 - INNER, x2: to, y2: 16 - INNER }
+  if (side === 'left') return { x1: INNER, y1: from, x2: INNER, y2: to }
+  return { x1: 16 - INNER, y1: from, x2: 16 - INNER, y2: to }
+}
+
+// All four lines are always rendered and an inactive one is only faded out.
+// Swapping the icon of a field (horizontal -> top, say) then animates the
+// opacity instead of replacing one drawing with another in a single frame.
+const lines = computed(() => {
+  const [from, to] = sides.length === 4 ? SPAN.short : SPAN.long
+
+  return ALL_SIDES.map((side) => ({
+    side,
+    active: sides.includes(side),
+    ...geometry(side, from, to),
+  }))
+})
+</script>
+
+<template>
+  <svg
+    class="size-4 shrink-0"
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.25"
+    stroke-linecap="round"
+    aria-hidden="true"
+  >
+    <rect :x="EDGE" :y="EDGE" :width="16 - EDGE * 2" :height="16 - EDGE * 2" rx="1.5" />
+    <line
+      v-for="line in lines"
+      :key="line.side"
+      :x1="line.x1"
+      :y1="line.y1"
+      :x2="line.x2"
+      :y2="line.y2"
+      :class="[
+        'transition-opacity duration-150 ease-out-strong motion-reduce:transition-none',
+        line.active ? 'opacity-100' : 'opacity-0',
+      ]"
+    />
+  </svg>
+</template>

package/src/components.json

@@ -65,5 +65,6 @@
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
-  "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue"
+  "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+  "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue"
 }

package/src/index.ts

@@ -29,6 +29,7 @@ export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
 } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,
@@ -56,6 +57,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'

package/tailwind/nexxtmove.tailwind.custom.css

@@ -42,6 +42,11 @@
    (app/assets/css/main.css); the app drops its copies once it adopts the
    version that ships these. */
 @theme {
+  /* Strong ease-out (`ease-out-strong`): starts fast and settles slowly, so a
+     panel that grows or shrinks reads as one motion instead of a jump. Used by
+     NexxtEditorPadding; Tailwind's own `ease-out` is too shallow at 200ms. */
+  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);
+
   --spacing-8xl: 100rem;
   --spacing-full-width: 116rem; /* 1920px (full hd) minus the sidebar: max app width */
 }