@nexxtmove/ui 1.42.0 → 1.43.0

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

@@ -0,0 +1,254 @@
+<script lang="ts">
+import type {
+  EditorDimensionUnit,
+  EditorDimensionValue,
+} from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+/**
+ * The options the editor offers, in the order they are shown. The labels are
+ * not in here; they arrive through `messages`, keyed by token.
+ */
+export const EDITOR_SIZE_OPTIONS = [
+  { token: 'auto' },
+  { token: 'fill' },
+  { token: 'fixed' },
+] as const
+
+/** How a dimension is sized: by its content, filling its parent, or fixed. */
+export type EditorSizeMode = (typeof EDITOR_SIZE_OPTIONS)[number]['token']
+
+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'`.
+   */
+  fixed?: EditorDimensionValue
+}
+
+/** Overridable copy of the options and the field. Every key is optional. */
+export interface EditorSizeMessages {
+  /** Label of the `auto` option. Defaults to `'Automatisch'`. */
+  auto?: string
+  /** Label of the `fill` option. Defaults to `'Vullen'`. */
+  fill?: string
+  /** Label of the `fixed` option. Defaults to `'Vast'`. */
+  fixed?: string
+  /**
+   * Accessible name of the `auto` option. Defaults to the label followed by
+   * the option, lowercased: `'Breedte automatisch'`. Pass it for a language
+   * where that concatenation does not read.
+   */
+  autoAriaLabel?: string
+  /** Accessible name of the `fill` option. Defaults to `'Breedte vullen'`, built the same way. */
+  fillAriaLabel?: string
+  /** Accessible name of the `fixed` option. Defaults to `'Breedte vast'`, built the same way. */
+  fixedAriaLabel?: string
+  /** Accessible name of the unit selector, when more than one unit is offered. Defaults to `'Eenheid'`. */
+  unit?: string
+  /** How the px unit is written. Defaults to `'px'`. */
+  px?: string
+  /** How the percentage unit is written. Defaults to `'%'`. */
+  percent?: string
+}
+
+export interface NexxtEditorSizeProps {
+  /**
+   * Header text of the settings block, and the accessible name of the fixed
+   * field. Defaults to the Dutch `'Formaat'`; a consumer showing a width and a
+   * height passes `'Breedte'` and `'Hoogte'`.
+   */
+  label?: string
+  /**
+   * The modes offered, as a subset of `'auto'`, `'fill'` and `'fixed'`; they
+   * are always shown in that order. An image, which has nothing to fill,
+   * passes `['auto', 'fixed']`. Defaults to all three. A model whose mode is
+   * not offered shows no option selected.
+   */
+  modes?: EditorSizeMode[]
+  /** The units the fixed field offers. Defaults to `['px']`. */
+  units?: EditorDimensionUnit[]
+  /** Lowest fixed value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  min?: Partial<Record<EditorDimensionUnit, number>>
+  /** Highest fixed value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  max?: Partial<Record<EditorDimensionUnit, number>>
+  /**
+   * Copy of the options and the field. 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?: EditorSizeMessages
+}
+
+const DEFAULT_MESSAGES = {
+  auto: 'Automatisch',
+  fill: 'Vullen',
+  fixed: 'Vast',
+  unit: 'Eenheid',
+  px: 'px',
+  percent: '%',
+  // The accessible names default to a string built from the label, not to copy of their own.
+} satisfies Required<Omit<EditorSizeMessages, 'autoAriaLabel' | 'fillAriaLabel' | 'fixedAriaLabel'>>
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeUnmount, useTemplateRef, watch } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtEditorDimensionField from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorSize' })
+
+const {
+  label = 'Formaat',
+  modes,
+  units = ['px'],
+  min,
+  max,
+  messages,
+} = defineProps<NexxtEditorSizeProps>()
+
+const emit = defineEmits<{
+  /**
+   * One edit is finished: a mode was picked, or the fixed field committed (see
+   * `NexxtEditorDimensionField`). A consumer that folds model writes into one
+   * undo step closes it here.
+   */
+  commit: []
+}>()
+
+/**
+ * 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.
+ */
+const model = defineModel<EditorSizeValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const fieldEl = useTemplateRef<InstanceType<typeof NexxtEditorDimensionField>>('field')
+
+// Two of these blocks usually sit together (width and height), and without
+// the label in the name both would read out as the same three buttons.
+const ariaLabelOf = (token: EditorSizeMode) =>
+  messages?.[`${token}AriaLabel`] ?? `${label} ${copy.value[token].toLocaleLowerCase()}`
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_SIZE_OPTIONS.filter(({ token }) => !modes || modes.includes(token)).map(({ token }) => ({
+    value: token,
+    label: copy.value[token],
+    ariaLabel: ariaLabelOf(token),
+  })),
+)
+
+// ToggleGroup types its model as the open `string` of its options; the only
+// values it can emit are the tokens built above.
+//
+/**
+ * Set when the user picks `'fixed'`: the field takes focus once the model
+ * actually turns fixed. That may be later than the pick -- a consumer can
+ * debounce the model or route it through a store -- and until then the field
+ * is `inert` and cannot take focus.
+ */
+let focusOnFixed = false
+
+// The pick expires on the user's next press anywhere, so a pick the consumer
+// never applied does not move focus on a later model change from outside.
+const EXPIRE_ON = ['pointerdown', 'keydown'] as const
+
+const expireFocus = () => {
+  focusOnFixed = false
+  EXPIRE_ON.forEach((type) => document.removeEventListener(type, expireFocus, true))
+}
+
+onBeforeUnmount(expireFocus)
+
+// Only a pick in the group passes this setter -- a click, or Enter or Space on
+// an option; the group has no roving focus, so arrow keys pick nothing. A mount
+// in `'fixed'` or a model change from outside does not come through here.
+const mode = computed({
+  get: () => model.value.mode,
+  set: (value: string) => {
+    if (value === model.value.mode) return
+
+    expireFocus()
+    if (value === 'fixed') {
+      focusOnFixed = true
+      // Added while the activating event is already past the document, so the
+      // press that picked `'fixed'` does not expire it.
+      EXPIRE_ON.forEach((type) => document.addEventListener(type, expireFocus, true))
+    }
+
+    model.value = { ...model.value, mode: value as EditorSizeMode }
+    emit('commit')
+  },
+})
+
+// The field never writes `null` -- it is not optional -- so there is always a
+// dimension to store.
+const fixed = computed({
+  get: () => model.value.fixed ?? null,
+  set: (value: EditorDimensionValue | null) => {
+    if (value) model.value = { ...model.value, fixed: value }
+  },
+})
+
+const isFixed = computed(() => model.value.mode === 'fixed')
+
+// `:inert="false"` still renders the attribute, so `undefined` removes it.
+const fieldInert = computed(() => (isFixed.value ? undefined : true))
+
+// After the render that lifts `inert`, so the field can take focus. The first
+// mode change after a pick settles it either way. No scrolling, or the browser
+// would scroll the clipping box of the row that is still sliding open.
+watch(
+  () => model.value.mode,
+  (next) => {
+    const focus = focusOnFixed && next === 'fixed'
+    expireFocus()
+    if (focus) fieldEl.value?.focus({ preventScroll: true })
+  },
+  { flush: 'post' },
+)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="mode" :options="options" />
+
+    <!--
+      The field slides open under the choice it belongs to, the same 0fr/1fr
+      grid as the second padding row, and stays mounted so it can animate.
+      `-mx-1` / `px-1` leave room for the focus ring inside the clipping box.
+    -->
+    <div
+      data-testid="editor-size-fixed-row"
+      :inert="fieldInert"
+      :class="[
+        'grid transition-[grid-template-rows] duration-200 ease-out-strong motion-reduce:transition-none',
+        isFixed ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+      ]"
+    >
+      <div
+        :class="[
+          '-mx-1 min-h-0 overflow-hidden transition-opacity duration-200 ease-out-strong motion-reduce:transition-none',
+          isFixed ? 'opacity-100' : 'opacity-0',
+        ]"
+      >
+        <div class="px-1 pt-2 pb-1">
+          <NexxtEditorDimensionField
+            ref="field"
+            v-model="fixed"
+            :label="label"
+            :units="units"
+            :min="min"
+            :max="max"
+            :messages="{ unit: copy.unit, px: copy.px, percent: copy.percent }"
+            @commit="emit('commit')"
+          />
+        </div>
+      </div>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+import type {
+  EditorDimensionFieldMessages,
+  EditorDimensionUnit,
+} from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+/** Overridable copy of the field. Every key is optional. */
+export type EditorSizeLimitMessages = EditorDimensionFieldMessages
+
+export interface NexxtEditorSizeLimitProps {
+  /** Visible label above the field, and its accessible name, as in `'Maximale breedte'`. */
+  label: string
+  /** The units the field offers. Defaults to `['px']`. */
+  units?: EditorDimensionUnit[]
+  /** Lowest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  min?: Partial<Record<EditorDimensionUnit, number>>
+  /** Highest value per unit, merged over `EDITOR_DIMENSION_LIMITS`. */
+  max?: Partial<Record<EditorDimensionUnit, number>>
+  /**
+   * Copy of the placeholder and the units. Defaults are Dutch and are merged
+   * per key. Copy is never translated inside the component.
+   */
+  messages?: EditorSizeLimitMessages
+}
+</script>
+
+<script lang="ts" setup>
+import NexxtEditorDimensionField from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+import type { EditorDimensionValue } from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+defineOptions({ name: 'NexxtEditorSizeLimit' })
+
+const { label, units = ['px'], min, max, messages } = defineProps<NexxtEditorSizeLimitProps>()
+
+const emit = defineEmits<{
+  /** One edit is finished; see `NexxtEditorDimensionField`. */
+  commit: []
+}>()
+
+/** The limit, or `null` for none: emptying the field removes it. */
+const model = defineModel<EditorDimensionValue | null>({ default: null })
+</script>
+
+<template>
+  <!--
+    No settings block of its own: a limit sits inside a block that holds the
+    sizes it limits, typically two side by side (maximum width, minimum height).
+    The label is a real one above the field, like a toggle group's label.
+  -->
+  <label class="flex min-w-0 flex-col gap-1">
+    <span class="small-normal text-gray-700">{{ label }}</span>
+
+    <NexxtEditorDimensionField
+      v-model="model"
+      :label="label"
+      :units="units"
+      :min="min"
+      :max="max"
+      :messages="messages"
+      optional
+      @commit="emit('commit')"
+    />
+  </label>
+</template>

package/src/components.json

@@ -72,6 +72,7 @@
   "NexxtTimelineTrack": "components/organisms/TimelineTrack/TimelineTrack.vue",
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
+  "NexxtEditorDimensionField": "components/editor/atoms/EditorDimensionField/EditorDimensionField.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
@@ -87,5 +88,7 @@
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
+  "NexxtEditorSize": "components/editor/molecules/EditorSize/EditorSize.vue",
+  "NexxtEditorSizeLimit": "components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue",
   "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"
 }

package/src/index.ts

@@ -125,6 +125,19 @@ export type {
   EditorPaddingMessages,
   EditorPaddingStep,
 } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
+export { EDITOR_DIMENSION_LIMITS } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue'
+export type {
+  EditorDimensionFieldMessages,
+  EditorDimensionUnit,
+  EditorDimensionValue,
+} from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue'
+export { EDITOR_SIZE_OPTIONS } from './components/editor/molecules/EditorSize/EditorSize.vue'
+export type {
+  EditorSizeMessages,
+  EditorSizeMode,
+  EditorSizeValue,
+} from './components/editor/molecules/EditorSize/EditorSize.vue'
+export type { EditorSizeLimitMessages } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,
@@ -152,6 +165,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
+export { default as NexxtEditorDimensionField } from './components/editor/atoms/EditorDimensionField/EditorDimensionField.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorFontSize } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
@@ -163,6 +177,8 @@ export { default as NexxtEditorMaxWidth } from './components/editor/molecules/Ed
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
 export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+export { default as NexxtEditorSize } from './components/editor/molecules/EditorSize/EditorSize.vue'
+export { default as NexxtEditorSizeLimit } from './components/editor/molecules/EditorSizeLimit/EditorSizeLimit.vue'
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'