@nexxtmove/ui 1.49.0 → 1.51.0

package/dist/nuxt.js

@@ -80,6 +80,7 @@ var s = {
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorSettingsGroup: "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorAnchor: "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",

package/package.json

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

package/src/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue

@@ -57,6 +57,9 @@ const promoted = computed(() => group?.value.promoted ?? false)
 
 const labelTypography = computed(() => (promoted.value ? 'small-semibold' : 'small-normal'))
 
+/** A promoted label reads as the group's title, so it takes the group heading's colour too. */
+const labelColor = computed(() => (promoted.value ? 'text-cornflower-blue-700' : 'text-gray-900'))
+
 /**
  * A promoted label is a heading, so heading navigation finds it next to the
  * labelled groups. A switchable label stays the switch's <label>: a heading
@@ -78,9 +81,9 @@ const labelTag = computed(() => (promoted.value && group ? `h${group.value.headi
     -->
     <div class="flex items-center [&>label]:flex [&>label]:w-full [&>label]:gap-3">
       <Switch v-if="switchable" v-model="model" size="sm" color="blue" label-position="before">
-        <span :class="['grow text-left', labelTypography, 'text-gray-900']">{{ label }}</span>
+        <span :class="['grow text-left', labelTypography, labelColor]">{{ label }}</span>
       </Switch>
-      <component :is="labelTag" v-else :class="[labelTypography, 'text-gray-900']">
+      <component :is="labelTag" v-else :class="[labelTypography, labelColor]">
         {{ label }}
       </component>
     </div>

package/src/components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue

@@ -186,7 +186,7 @@ watch(open, (isOpen) => {
       :is="heading"
       v-if="active"
       :id="headingId"
-      class="flex small-semibold text-gray-900"
+      class="flex small-semibold text-cornflower-blue-700"
     >
       <button
         ref="toggle"
@@ -205,7 +205,12 @@ watch(open, (isOpen) => {
         </span>
       </button>
     </component>
-    <component :is="heading" v-else-if="label" :id="headingId" class="small-semibold text-gray-900">
+    <component
+      :is="heading"
+      v-else-if="label"
+      :id="headingId"
+      class="small-semibold text-cornflower-blue-700"
+    >
       {{ label }}
     </component>
 

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

@@ -0,0 +1,242 @@
+<script lang="ts">
+/** The horizontal part of an anchor point. */
+export type EditorAnchorX = 'left' | 'center' | 'right'
+
+/** The vertical part of an anchor point. */
+export type EditorAnchorY = 'top' | 'center' | 'bottom'
+
+/** The point something is anchored to: a corner, an edge or the middle. */
+export interface EditorAnchorValue {
+  x: EditorAnchorX
+  y: EditorAnchorY
+}
+
+/**
+ * The nine cells, in reading order: row by row from the top, left to right.
+ * The labels are not in here; they arrive through `messages`.
+ */
+export const EDITOR_ANCHOR_OPTIONS = [
+  { x: 'left', y: 'top' },
+  { x: 'center', y: 'top' },
+  { x: 'right', y: 'top' },
+  { x: 'left', y: 'center' },
+  { x: 'center', y: 'center' },
+  { x: 'right', y: 'center' },
+  { x: 'left', y: 'bottom' },
+  { x: 'center', y: 'bottom' },
+  { x: 'right', y: 'bottom' },
+] as const satisfies readonly EditorAnchorValue[]
+
+/** Overridable copy for the nine cells. Every key is optional. */
+export interface EditorAnchorMessages {
+  /** Name of the top left cell. Defaults to `'Linksboven'`. */
+  topLeft?: string
+  /** Name of the top cell. Defaults to `'Boven'`. */
+  top?: string
+  /** Name of the top right cell. Defaults to `'Rechtsboven'`. */
+  topRight?: string
+  /** Name of the left cell. Defaults to `'Links'`. */
+  left?: string
+  /** Name of the middle cell. Defaults to `'Midden'`. */
+  center?: string
+  /** Name of the right cell. Defaults to `'Rechts'`. */
+  right?: string
+  /** Name of the bottom left cell. Defaults to `'Linksonder'`. */
+  bottomLeft?: string
+  /** Name of the bottom cell. Defaults to `'Onder'`. */
+  bottom?: string
+  /** Name of the bottom right cell. Defaults to `'Rechtsonder'`. */
+  bottomRight?: string
+}
+
+export interface NexxtEditorAnchorProps {
+  /**
+   * Accessible name of the radiogroup. Defaults to the Dutch
+   * `'Plek van de afbeelding'`; the library has no i18n layer, so a consumer
+   * in another language passes its own copy in. Only shown when `showLabel`
+   * is set.
+   */
+  label?: string
+  /**
+   * Show `label` as a header above the grid. Off by default: the editor puts
+   * the name of the setting next to the grid itself.
+   */
+  showLabel?: boolean
+  /**
+   * Names of the nine cells. 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?: EditorAnchorMessages
+  /** Block every interaction: no cell can be focused or chosen. */
+  disabled?: boolean
+}
+
+const DEFAULT_MESSAGES = {
+  topLeft: 'Linksboven',
+  top: 'Boven',
+  topRight: 'Rechtsboven',
+  left: 'Links',
+  center: 'Midden',
+  right: 'Rechts',
+  bottomLeft: 'Linksonder',
+  bottom: 'Onder',
+  bottomRight: 'Rechtsonder',
+} satisfies Required<EditorAnchorMessages>
+
+/** The messages key of each cell, by row and then by column. */
+const MESSAGE_KEYS: Record<EditorAnchorY, Record<EditorAnchorX, keyof EditorAnchorMessages>> = {
+  top: { left: 'topLeft', center: 'top', right: 'topRight' },
+  center: { left: 'left', center: 'center', right: 'right' },
+  bottom: { left: 'bottomLeft', center: 'bottom', right: 'bottomRight' },
+}
+
+const COLUMNS = 3
+const ROWS = EDITOR_ANCHOR_OPTIONS.length / COLUMNS
+
+/** The cell that takes the tab stop while none is chosen. */
+const MIDDLE = 4
+</script>
+
+<script lang="ts" setup>
+import { computed, useId, useTemplateRef } from 'vue'
+
+defineOptions({ name: 'NexxtEditorAnchor', inheritAttrs: false })
+
+const {
+  label = 'Plek van de afbeelding',
+  showLabel = false,
+  messages,
+  disabled = false,
+} = defineProps<NexxtEditorAnchorProps>()
+
+/**
+ * The chosen cell. `null` while none is, e.g. for a stored position that no
+ * cell stands for.
+ */
+const model = defineModel<EditorAnchorValue | null>({ required: true })
+
+const labelId = useId()
+
+const cellEls = useTemplateRef<HTMLButtonElement[]>('cellButtons')
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const selectedIndex = computed(() => {
+  const index = EDITOR_ANCHOR_OPTIONS.findIndex(
+    ({ x, y }) => x === model.value?.x && y === model.value?.y,
+  )
+  return index === -1 ? null : index
+})
+
+/** Roving tabindex: one tab stop, on the chosen cell or else on the middle. */
+const tabStop = computed(() => selectedIndex.value ?? MIDDLE)
+
+const cells = computed(() =>
+  EDITOR_ANCHOR_OPTIONS.map(({ x, y }, index) => {
+    const checked = index === selectedIndex.value
+    return {
+      index,
+      label: copy.value[MESSAGE_KEYS[y][x]],
+      checked,
+      tabindex: index === tabStop.value ? 0 : -1,
+      // -600, not -500: the white dot on -500 reaches only 2.78:1. The focus
+      // outline below is -600 for the same reason, against the white around it.
+      cellClass: [
+        checked ? 'bg-cornflower-blue-600' : !disabled && 'hover:bg-gray-100',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+      ],
+      dotClass: checked ? 'size-2.5 bg-white' : 'size-1.5 bg-gray-400',
+    }
+  }),
+)
+
+/** The visible header names the group when shown; otherwise the label does. */
+const groupName = computed(() =>
+  showLabel ? { 'aria-labelledby': labelId } : { 'aria-label': label },
+)
+
+const choose = (index: number) => {
+  const cell = EDITOR_ANCHOR_OPTIONS[index]
+
+  if (disabled || !cell || index === selectedIndex.value) return
+
+  model.value = { x: cell.x, y: cell.y }
+}
+
+/**
+ * The radio pattern in two dimensions: an arrow moves and chooses at once and
+ * stops at the edge; Home and End jump to the first and the last cell. A key
+ * with a modifier belongs to the browser or the OS (Alt+Left is back, Cmd+Left
+ * is line start), so it is left alone: no choice, no preventDefault.
+ */
+const onKeydown = (event: KeyboardEvent, index: number) => {
+  if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
+
+  const row = Math.floor(index / COLUMNS)
+  const column = index % COLUMNS
+  const next = {
+    ArrowLeft: column > 0 ? index - 1 : index,
+    ArrowRight: column < COLUMNS - 1 ? index + 1 : index,
+    ArrowUp: row > 0 ? index - COLUMNS : index,
+    ArrowDown: row < ROWS - 1 ? index + COLUMNS : index,
+    Home: 0,
+    End: EDITOR_ANCHOR_OPTIONS.length - 1,
+  }[event.key]
+
+  if (next === undefined) return
+
+  event.preventDefault()
+  choose(next)
+  cellEls.value?.[next]?.focus()
+}
+</script>
+
+<template>
+  <p v-if="showLabel" :id="labelId" class="mb-1.5 small-normal text-gray-900">{{ label }}</p>
+  <!--
+    `w-fit`: the grid columns are fractions, so in block flow the ring would
+    stretch to the full width of the parent.
+  -->
+  <div
+    role="radiogroup"
+    v-bind="{ ...groupName, ...$attrs }"
+    :aria-disabled="disabled || undefined"
+    :class="[
+      'grid w-fit grid-cols-3 gap-1 rounded-lg p-1 ring ring-gray-200',
+      disabled && 'opacity-50',
+    ]"
+  >
+    <!--
+      No `focus:outline-none` next to the focus-visible outline: in Tailwind v4
+      it sets the outline style to none, which the focus-visible variant does
+      not set back, so the ring would never show. The outline is -600, not
+      -500: -500 reaches 2.78:1 on white, short of the 3:1 for non-text.
+    -->
+    <button
+      v-for="cell in cells"
+      :key="cell.index"
+      ref="cellButtons"
+      type="button"
+      role="radio"
+      :aria-checked="cell.checked"
+      :aria-label="cell.label"
+      :tabindex="cell.tabindex"
+      :disabled="disabled"
+      :class="[
+        'flex size-7 items-center justify-center rounded-md outline-cornflower-blue-600 transition-colors duration-150 ease-out focus-visible:outline-2 motion-reduce:transition-none',
+        cell.cellClass,
+      ]"
+      @click="choose(cell.index)"
+      @keydown="onKeydown($event, cell.index)"
+    >
+      <span
+        aria-hidden="true"
+        :class="[
+          'rounded-full transition-colors duration-150 ease-out motion-reduce:transition-none',
+          cell.dotClass,
+        ]"
+      />
+    </button>
+  </div>
+</template>

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

@@ -41,6 +41,18 @@ export interface NexxtEditorBackgroundSizeProps {
    * others. Copy is never translated inside the component.
    */
   messages?: EditorBackgroundSizeMessages
+  /**
+   * The options to offer, as a subset of the three. They are always shown in
+   * the order of `EDITOR_BACKGROUND_SIZE_OPTIONS`, whatever order this list is
+   * in; a duplicate or unknown value is ignored. Defaults to all three.
+   */
+  options?: EditorBackgroundSizeValue[]
+  /**
+   * Render only the options, without the settings block and its header, for a
+   * consumer that puts the control in a block of its own. `label` then names
+   * the options toolbar only and is not shown.
+   */
+  bare?: boolean
 }
 
 const DEFAULT_MESSAGES = {
@@ -58,7 +70,12 @@ import type { NexxtToggleGroupOption } from '../../../molecules/ToggleGroup/Togg
 
 defineOptions({ name: 'NexxtEditorBackgroundSize' })
 
-const { label = 'Vulling', messages } = defineProps<NexxtEditorBackgroundSizeProps>()
+const {
+  label = 'Vulling',
+  messages,
+  options: offered,
+  bare = false,
+} = defineProps<NexxtEditorBackgroundSizeProps>()
 
 /** The selected background size, as the Tailwind class to apply. */
 const model = defineModel<EditorBackgroundSizeValue>({ required: true })
@@ -83,8 +100,12 @@ const ICONS: Record<
   auto: 'image',
 }
 
+// Filtered from the full list rather than mapped from `offered`, so the order is
+// always the canonical one and a duplicate in `offered` cannot double a button.
 const options = computed<NexxtToggleGroupOption[]>(() =>
-  EDITOR_BACKGROUND_SIZE_OPTIONS.map(({ token }) => ({
+  EDITOR_BACKGROUND_SIZE_OPTIONS.filter(
+    ({ token }) => !offered || offered.includes(`bg-${token}`),
+  ).map(({ token }) => ({
     value: `bg-${token}`,
     icon: ICONS[token],
     ariaLabel: copy.value[token],
@@ -104,7 +125,8 @@ const selected = computed({
 </script>
 
 <template>
-  <NexxtEditorSettingsBlock :label="label">
+  <NexxtToggleGroup v-if="bare" v-model="selected" :options="options" :aria-label="label" />
+  <NexxtEditorSettingsBlock v-else :label="label">
     <NexxtToggleGroup v-model="selected" :options="options" :aria-label="label" />
   </NexxtEditorSettingsBlock>
 </template>

package/src/components.json

@@ -77,6 +77,7 @@
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorSettingsGroup": "components/editor/atoms/EditorSettingsGroup/EditorSettingsGroup.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorAnchor": "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
   "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",

package/src/index.ts

@@ -39,6 +39,13 @@ export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
 } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { EDITOR_ANCHOR_OPTIONS } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
+export type {
+  EditorAnchorMessages,
+  EditorAnchorValue,
+  EditorAnchorX,
+  EditorAnchorY,
+} from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
 export { EDITOR_BACKGROUND_SIZE_OPTIONS } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export type {
   EditorBackgroundSizeMessages,
@@ -204,6 +211,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 NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { default as NexxtEditorAnchor } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue'
 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'