@nexxtmove/ui 1.16.0 → 1.17.0

package/dist/nuxt.js

@@ -65,7 +65,8 @@ var s = {
 	NexxtToaster: "components/organisms/Toaster/Toaster.vue",
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
-	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue"
+	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.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: {
 		name: "@nexxtmove/ui",

package/package.json

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

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

@@ -0,0 +1,95 @@
+<script lang="ts">
+/**
+ * The justification 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 EditorJustifyContentValue =
+  'justify-start' | 'justify-center' | 'justify-end' | 'justify-between'
+
+/** Overridable copy for the four options. Every key is optional. */
+export interface EditorJustifyContentMessages {
+  /** Accessible name of the `justify-start` option. Defaults to `'Begin'`. */
+  start?: string
+  /** Accessible name of the `justify-center` option. Defaults to `'Midden'`. */
+  center?: string
+  /** Accessible name of the `justify-end` option. Defaults to `'Einde'`. */
+  end?: string
+  /** Accessible name of the `justify-between` option. Defaults to `'Verdelen'`. */
+  between?: string
+}
+
+export interface NexxtEditorJustifyContentProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Uitlijning'`;
+   * 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?: EditorJustifyContentMessages
+}
+
+const DEFAULT_MESSAGES = {
+  start: 'Begin',
+  center: 'Midden',
+  end: 'Einde',
+  between: 'Verdelen',
+} satisfies Required<EditorJustifyContentMessages>
+</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: 'NexxtEditorJustifyContent' })
+
+const { label = 'Uitlijning', messages } = defineProps<NexxtEditorJustifyContentProps>()
+
+/** The selected justification, as the Tailwind class to apply. */
+const model = defineModel<EditorJustifyContentValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips: four labels do not fit side by
+// side at the width the editor sidebar gives this block, and the icons are
+// conventional enough to stand on their own. The copy travels as `ariaLabel`,
+// so the buttons still have a name for assistive technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'justify-start', icon: 'objects-align-left', ariaLabel: copy.value.start },
+  {
+    value: 'justify-center',
+    icon: 'objects-align-center-horizontal',
+    ariaLabel: copy.value.center,
+  },
+  { value: 'justify-end', icon: 'objects-align-right', ariaLabel: copy.value.end },
+  {
+    value: 'justify-between',
+    icon: 'distribute-spacing-horizontal',
+    ariaLabel: copy.value.between,
+  },
+])
+
+// 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 EditorJustifyContentValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components/molecules/ToggleGroup/ToggleGroup.vue

@@ -10,6 +10,13 @@ export interface NexxtToggleGroupOption {
   icon?: IconName
   label?: string
   tooltip?: string
+  /**
+   * Accessible name for an icon-only option without a visible label. A button
+   * whose only content is an icon has no discernible text, so axe flags it with
+   * `button-name`; this is the copy that names it. Takes precedence over the
+   * `tooltip` fallback below, and is not needed when `label` is set.
+   */
+  ariaLabel?: string
   activeClass?: string
 }
 
@@ -88,12 +95,23 @@ onMounted(async () => {
         :style="sliderStyle"
       />
 
-      <!-- buttons with gray text underneath -->
+      <!--
+        buttons with gray text underneath.
+
+        An icon-only option renders a button with no text at all, so its
+        accessible name has to come from somewhere: the tooltip is a sibling in
+        a portal, not a label, and axe flags these buttons with `button-name`.
+        `ariaLabel` is the explicit way to name such a button. Falling back to
+        the tooltip keeps the consumers that were already relying on it named,
+        and neither applies once there is a visible label -- an `aria-label`
+        would override the text the user can actually read.
+      -->
       <template v-for="(option, index) in options" :key="option.value">
         <NexxtTooltip v-if="option.tooltip" disable-closing-trigger>
           <button
             :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
             type="button"
+            :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
             class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
             :class="{ 'flex-1': equalWidth }"
             @click="model = option.value"
@@ -107,6 +125,7 @@ onMounted(async () => {
           v-else
           :ref="(el) => (buttonRefs[index] = el as HTMLButtonElement)"
           type="button"
+          :aria-label="option.ariaLabel ?? (option.label ? undefined : option.tooltip)"
           class="relative z-10 flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-4 py-1.5 whitespace-nowrap text-gray-500 hover:text-gray-700"
           :class="{ 'flex-1': equalWidth }"
           @click="model = option.value"

package/src/components.json

@@ -62,5 +62,6 @@
   "NexxtToaster": "components/organisms/Toaster/Toaster.vue",
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
-  "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue"
+  "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
+  "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue"
 }

package/src/index.ts

@@ -17,6 +17,10 @@ export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
 } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
+export type {
+  EditorJustifyContentMessages,
+  EditorJustifyContentValue,
+} from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
 export type {
   NexxtTemplateCardContentFeature,
   NexxtTemplateCardProps,
@@ -41,6 +45,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.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'
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue'