@nexxtmove/ui 1.17.0 → 1.19.0

package/dist/nuxt.js

@@ -65,7 +65,9 @@ var s = {
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+	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"
 }, c = ["@nexxtmove/ui/ui.css", "@nexxtmove/ui/dist/ui.css"], l = (e, t) => e.some((e) => e === t || c.includes(e)), u = i({
 	meta: {

package/package.json

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

package/src/components/atoms/Slider/Slider.vue

@@ -8,6 +8,17 @@ type SliderVariant = 'filled' | 'plain'
 
 interface NexxtSliderProps {
   label?: string
+  /**
+   * Accessible name of the thumb for a slider without a visible `label`. When both are given the
+   * visible `label` wins, so the name matches what a sighted user reads.
+   */
+  ariaLabel?: string
+  /**
+   * Human-readable version of the value, announced instead of the raw number — `'16 px'` for a
+   * slider whose model is an index into a scale. Ignored on a range: one string cannot describe two
+   * thumbs, and repeating it on both would announce the wrong value on one of them.
+   */
+  ariaValuetext?: string
   min?: number
   max?: number
   step?: number
@@ -27,6 +38,8 @@ defineOptions({
 
 const {
   label,
+  ariaLabel,
+  ariaValuetext,
   min = 0,
   max = 100,
   step = 1,
@@ -80,6 +93,13 @@ const onFocusOut = (event: FocusEvent) => {
   if (!next || !(event.currentTarget as HTMLElement).contains(next)) usingPointer.value = false
 }
 
+/**
+ * A range has one string per thumb at most, and there is only one prop, so the text is dropped
+ * there rather than repeated. `undefined` is what keeps the attribute off the element — an empty
+ * string would render `aria-valuetext=""` and silence the value entirely.
+ */
+const thumbValuetext = computed(() => (model.value.length > 1 ? undefined : ariaValuetext))
+
 const displayValue = computed(() =>
   model.value.map((value) => `${value}${valueSuffix}`).join(' – '),
 )
@@ -120,7 +140,8 @@ const displayValue = computed(() =>
         <SliderThumb
           v-for="(_, index) in model"
           :key="index"
-          :aria-label="label"
+          :aria-label="label ?? ariaLabel"
+          :aria-valuetext="thumbValuetext"
           :class="[
             'block size-4 rounded-full border shadow-sm transition-colors',
             variant === 'filled' ? 'border-gray-200 bg-white' : thumbColorClasses[color],

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

@@ -0,0 +1,94 @@
+<script lang="ts">
+/**
+ * The cross-axis alignment as the editor needs it: the Tailwind class itself,
+ * so the consumer can put the model value straight on the element it styles.
+ */
+export type EditorAlignItemsValue = 'items-start' | 'items-center' | 'items-end' | 'items-stretch'
+
+/** Overridable copy for the four options. Every key is optional. */
+export interface EditorAlignItemsMessages {
+  /** Accessible name of the `items-start` option. Defaults to `'Begin'`. */
+  start?: string
+  /** Accessible name of the `items-center` option. Defaults to `'Midden'`. */
+  center?: string
+  /** Accessible name of the `items-end` option. Defaults to `'Einde'`. */
+  end?: string
+  /** Accessible name of the `items-stretch` option. Defaults to `'Uitrekken'`. */
+  stretch?: string
+}
+
+export interface NexxtEditorAlignItemsProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Uitlijning items'`; the library has no i18n layer, so a consumer in
+   * another language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the four options. The options are icon-only and show no tooltip, so
+   * this copy is purely the accessible name of each button. 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?: EditorAlignItemsMessages
+}
+
+const DEFAULT_MESSAGES = {
+  start: 'Begin',
+  center: 'Midden',
+  end: 'Einde',
+  stretch: 'Uitrekken',
+} satisfies Required<EditorAlignItemsMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtToggleGroup from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/ToggleGroup.vue'
+
+defineOptions({ name: 'NexxtEditorAlignItems' })
+
+const { label = 'Uitlijning items', messages } = defineProps<NexxtEditorAlignItemsProps>()
+
+/** The selected alignment, as the Tailwind class to apply. */
+const model = defineModel<EditorAlignItemsValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips, matching the justify-content
+// block it sits next to: four labels do not fit side by side at the width the
+// editor sidebar gives this block. The icons are the vertical counterparts of
+// that block's horizontal ones. `items-stretch` gets `arrows-up-down` rather
+// than a distribute-spacing icon, because stretching fills the cross axis --
+// the spacing icons depict gaps between separate objects, which is the
+// justify-between metaphor, not this one. The copy travels as `ariaLabel`, so
+// the buttons still have a name for assistive technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'items-start', icon: 'objects-align-top', ariaLabel: copy.value.start },
+  {
+    value: 'items-center',
+    icon: 'objects-align-center-vertical',
+    ariaLabel: copy.value.center,
+  },
+  { value: 'items-end', icon: 'objects-align-bottom', ariaLabel: copy.value.end },
+  { value: 'items-stretch', icon: 'arrows-up-down', ariaLabel: copy.value.stretch },
+])
+
+// ToggleGroup types its model as the open `string` of its options, so writing
+// straight back into the narrower model is a type error. The setter is the one
+// place that narrowing happens, and it is safe: the only values ToggleGroup can
+// emit are the option values built above.
+const selected = computed({
+  get: () => model.value,
+  set: (value: string) => {
+    model.value = value as EditorAlignItemsValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+/**
+ * The steps the slider 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 stepping over the px value instead
+ * of over this list would offer gaps that have no token behind them.
+ */
+const GAP_STEPS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16] as const
+
+/**
+ * The gap as the editor needs it: the Tailwind class itself, so the consumer
+ * can put the model value straight on the element it styles.
+ */
+export type EditorGapValue = `gap-${(typeof GAP_STEPS)[number]}`
+
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorGapMessages {
+  /** Unit shown behind the value. Defaults to `'px'`. */
+  unit?: string
+}
+
+export interface NexxtEditorGapProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Tussenruimte'`; the library has no i18n layer, so a consumer in another
+   * language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the value readout. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorGapMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+} satisfies Required<EditorGapMessages>
+
+/** The spacing scale is built on 0.25rem, so `gap-4` is 4 × 4 = 16 px. */
+const PX_PER_STEP = 4
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+
+defineOptions({ name: 'NexxtEditorGap' })
+
+const { label = 'Tussenruimte', messages } = defineProps<NexxtEditorGapProps>()
+
+/** The selected gap, as the Tailwind class to apply. */
+const model = defineModel<EditorGapValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = GAP_STEPS.length - 1
+
+/**
+ * Position of the current value on the step list. A value that is not on the
+ * list -- a stored `gap-13` from before this component, say -- falls back to
+ * the first step instead of leaving the thumb off the track; the first change
+ * writes a valid class back.
+ */
+const stepIndex = computed(() =>
+  Math.max(
+    0,
+    GAP_STEPS.findIndex((step) => `gap-${step}` === model.value),
+  ),
+)
+
+// The slider moves over the index, not over the px value, so its model is
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = `gap-${GAP_STEPS[index]}`
+  },
+})
+
+const displayValue = computed(
+  () => `${GAP_STEPS[stepIndex.value] * PX_PER_STEP} ${copy.value.unit}`,
+)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the gap, so the readout is rendered next to it instead. The
+        thumb has the same problem in `aria-valuenow`, which `aria-valuetext`
+        overrides with the string the readout shows. The block label is a <p>,
+        not a <label>, so the name goes on the thumb explicitly.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+      />
+
+      <!--
+        gray-700, not the gray-500 Slider uses for its own readout: axe puts
+        gray-500 on white at 1.84:1, well under the 4.5:1 it needs at this size.
+      -->
+      <span class="min-w-12 shrink-0 text-right small-normal whitespace-nowrap text-gray-700">
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -62,6 +62,8 @@
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
+  "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"
 }

package/src/index.ts

@@ -13,10 +13,18 @@ export type { EnergyLabelLetter } from './components/atoms/EnergyLabel/EnergyLab
 export type { IconType, NexxtIconName } from './components/atoms/Icon/Icon.vue'
 export type { CustomIconName } from './components/atoms/Icon/customIcons'
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue'
+export type {
+  EditorAlignItemsMessages,
+  EditorAlignItemsValue,
+} from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
 } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
+export type {
+  EditorGapMessages,
+  EditorGapValue,
+} from './components/editor/molecules/EditorGap/EditorGap.vue'
 export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
@@ -44,7 +52,9 @@ export { default as NexxtCustomerJourneyTile } from './components/molecules/Cust
 export { default as NexxtDatePicker } from './components/organisms/DatePicker/DatePicker.vue'
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
+export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
 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 NexxtEditorSettingsBlock } from './components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue'