@nexxtmove/ui 1.28.0 → 1.30.0

package/dist/nuxt.js

@@ -70,12 +70,14 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
 	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/package.json

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

package/src/components/atoms/Switch/Switch.vue

@@ -66,7 +66,12 @@ const iconSizeClasses: Record<SwitchSize, string> = {
       squashes the toggle the moment a sibling label wraps onto a second line.
     -->
     <span :class="['relative inline-block shrink-0', trackClasses[size]]">
-      <input v-bind="$attrs" type="checkbox" class="peer sr-only" v-model="model" />
+      <!--
+        `role="switch"` on a native checkbox: it is on/off rather than
+        selected/unselected, and the checked state is still the input's own, so
+        no `aria-checked` is set -- the browser derives it from the checkbox.
+      -->
+      <input v-bind="$attrs" type="checkbox" role="switch" class="peer sr-only" v-model="model" />
       <span
         :class="[
           'absolute inset-0 overflow-hidden rounded-[30px] border transition-colors duration-200',

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

@@ -0,0 +1,83 @@
+<script lang="ts">
+/**
+ * The background size 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 EditorBackgroundSizeValue = 'bg-cover' | 'bg-contain' | 'bg-auto'
+
+/** Overridable copy for the three options. Every key is optional. */
+export interface EditorBackgroundSizeMessages {
+  /** Accessible name of the `bg-cover` option. Defaults to `'Opvullen'`. */
+  cover?: string
+  /** Accessible name of the `bg-contain` option. Defaults to `'Passend'`. */
+  contain?: string
+  /** Accessible name of the `bg-auto` option. Defaults to `'Origineel'`. */
+  auto?: string
+}
+
+export interface NexxtEditorBackgroundSizeProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Vulling'`;
+   * the library has no i18n layer, so a consumer in another language passes
+   * its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the three 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?: EditorBackgroundSizeMessages
+}
+
+const DEFAULT_MESSAGES = {
+  cover: 'Opvullen',
+  contain: 'Passend',
+  auto: 'Origineel',
+} satisfies Required<EditorBackgroundSizeMessages>
+</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: 'NexxtEditorBackgroundSize' })
+
+const { label = 'Vulling', messages } = defineProps<NexxtEditorBackgroundSizeProps>()
+
+/** The selected background size, as the Tailwind class to apply. */
+const model = defineModel<EditorBackgroundSizeValue>({ required: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+// Icon-only and deliberately without tooltips, matching the other editor
+// molecules in the panel (align items, justify content, text align): labelled
+// options do not fit the width the editor sidebar gives this block. The copy
+// travels as `ariaLabel`, so the buttons still have a name for assistive
+// technology.
+const options = computed<NexxtToggleGroupOption[]>(() => [
+  { value: 'bg-cover', icon: 'arrows-maximize', ariaLabel: copy.value.cover },
+  { value: 'bg-contain', icon: 'arrows-minimize', ariaLabel: copy.value.contain },
+  { value: 'bg-auto', icon: 'image', ariaLabel: copy.value.auto },
+])
+
+// 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 EditorBackgroundSizeValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,146 @@
+<script lang="ts">
+/**
+ * The steps the slider can land on: the `max-w-*` sizes, with the px numbers
+ * mirroring their values (rem × 16). These are Tailwind's own container sizes,
+ * not Figma tokens -- `tailwind/` defines no `--container-*`, so the token sync
+ * cannot move them. The desync to watch for is a Tailwind major that renames or
+ * renumbers the scale: nothing here fails when that happens, the numbers just
+ * stop matching the CSS, so this list has to be checked by hand on an upgrade.
+ */
+export const EDITOR_MAX_WIDTH_STEPS = [
+  { token: 'xs', px: 320 },
+  { token: 'sm', px: 384 },
+  { token: 'md', px: 448 },
+  { token: 'lg', px: 512 },
+  { token: 'xl', px: 576 },
+  { token: '2xl', px: 672 },
+  { token: '3xl', px: 768 },
+  { token: '4xl', px: 896 },
+  { token: '5xl', px: 1024 },
+  { token: '6xl', px: 1152 },
+  { token: '7xl', px: 1280 },
+] as const
+
+/**
+ * The maximum width 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 EditorMaxWidthValue = `max-w-${(typeof EDITOR_MAX_WIDTH_STEPS)[number]['token']}`
+
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorMaxWidthMessages {
+  /**
+   * Unit shown behind the value. Defaults to `'px'`. Keep it to a short symbol
+   * such as `'px'` or `'pt'`: the readout is only as wide as `1280 px` needs,
+   * and a spelled-out unit grows it and pushes the slider in.
+   */
+  unit?: string
+}
+
+export interface NexxtEditorMaxWidthProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Vaste breedte'` -- switched off the page runs full width, so the setting
+   * is the fixed width, not a maximum. 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?: EditorMaxWidthMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+} satisfies Required<EditorMaxWidthMessages>
+</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: 'NexxtEditorMaxWidth' })
+
+const { label = 'Vaste breedte', messages } = defineProps<NexxtEditorMaxWidthProps>()
+
+/** The selected maximum width, as the Tailwind class to apply. */
+const model = defineModel<EditorMaxWidthValue>({ required: true })
+
+/**
+ * Open state of the block. Switched off means the page runs full width, which
+ * is the absence of a class rather than a value of its own: the consumer simply
+ * writes no `max-w-*` then. The chosen width is kept while the block is
+ * collapsed, so switching back on restores it.
+ */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = EDITOR_MAX_WIDTH_STEPS.length - 1
+
+/**
+ * Position of the current value on the step list. A value that is not on the
+ * list -- a stored `max-w-prose` 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,
+    EDITOR_MAX_WIDTH_STEPS.findIndex(({ token }) => `max-w-${token}` === 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 = `max-w-${EDITOR_MAX_WIDTH_STEPS[index].token}`
+  },
+})
+
+const displayValue = computed(
+  () => `${EDITOR_MAX_WIDTH_STEPS[stepIndex.value].px} ${copy.value.unit}`,
+)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" switchable>
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the width, 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 the switch's own label, not a <label> for the slider, so the
+        name goes on the thumb explicitly.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+      />
+
+      <!--
+        `min-w-16` rather than the `min-w-12` of the narrower editor sliders:
+        `1280 px` does not fit in 12. That plus `shrink-0` is what fixes the
+        width of the box, so the slider keeps its size while dragging;
+        `tabular-nums` only stops the digits from jittering inside it.
+        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-16 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
+      >
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -67,12 +67,14 @@
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorBackgroundSize": "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
   "NexxtEditorBorder": "components/editor/molecules/EditorBorder/EditorBorder.vue",
   "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+  "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
   "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"

package/src/index.ts

@@ -23,6 +23,10 @@ export type {
   EditorAlignItemsMessages,
   EditorAlignItemsValue,
 } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export type {
+  EditorBackgroundSizeMessages,
+  EditorBackgroundSizeValue,
+} from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue'
 export type {
   EditorFlexDirectionMessages,
   EditorFlexDirectionValue,
@@ -56,6 +60,11 @@ export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
 } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { EDITOR_MAX_WIDTH_STEPS } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
+export type {
+  EditorMaxWidthMessages,
+  EditorMaxWidthValue,
+} from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
@@ -81,12 +90,14 @@ 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 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 NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 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'