@nexxtmove/ui 1.23.0 → 1.25.0

package/dist/nuxt.js

@@ -66,13 +66,15 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.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",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
-	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue"
+	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",
+	NexxtEditorTextAlign: "components/editor/molecules/EditorTextAlign/EditorTextAlign.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.23.0",
+  "version": "1.25.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

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

@@ -0,0 +1,215 @@
+<script lang="ts">
+/**
+ * The widths the slider can land on: the Tailwind class and the pixels it
+ * renders. These are Tailwind's own defaults (`border` is 1px, then 2, 4 and 8)
+ * rather than theme tokens -- the theme defines no border-width scale, so
+ * stepping over arbitrary integers would produce classes with no CSS behind
+ * them.
+ */
+const BORDER_STEPS = [
+  { class: 'border', px: 1 },
+  { class: 'border-2', px: 2 },
+  { class: 'border-4', px: 4 },
+  { class: 'border-8', px: 8 },
+] as const
+
+/** The width part of the model value, as the Tailwind class itself. */
+export type EditorBorderWidth = (typeof BORDER_STEPS)[number]['class']
+
+/** Overridable copy of the readout and the picker. Every key is optional. */
+export interface EditorBorderMessages {
+  /** Unit shown behind the width. Defaults to `'px'`. */
+  unit?: string
+  /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
+  placeholder?: string
+  /** Accessible name of the width slider. Defaults to `'Dikte'`. */
+  width?: string
+}
+
+export interface NexxtEditorBorderProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Rand'`; the
+   * library has no i18n layer, so a consumer in another language passes its own
+   * copy in.
+   */
+  label?: string
+  /**
+   * Render a switch next to the label that collapses and expands the controls.
+   * Defaults to `true`: a border is the kind of setting that is off as often as
+   * it is on, so turning it off is part of the control rather than an extra.
+   * The switch state is the `enabled` model; the width and the colour are kept
+   * while the block is collapsed.
+   */
+  switchable?: boolean
+  /**
+   * Copy of the readout and the picker. Merged per key, so overriding one key
+   * keeps the defaults of the others. Copy is never translated inside the
+   * component.
+   */
+  messages?: EditorBorderMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  placeholder: 'Kies kleur...',
+  width: 'Dikte',
+} satisfies Required<EditorBorderMessages>
+
+/**
+ * The colour token: `border-[` then a 6- or 8-digit hex. The alpha pair is
+ * accepted on read so a stored `#1777EA80` survives a round trip, even though
+ * the picker itself is opened without an alpha channel here.
+ */
+const COLOR_PATTERN = /^border-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+
+defineOptions({ name: 'NexxtEditorBorder' })
+
+const { label = 'Rand', switchable = true, messages } = defineProps<NexxtEditorBorderProps>()
+
+/**
+ * The border as the editor needs it: one class string that carries both halves
+ * of the setting -- a width class, a space, and a `border-[#hex]` colour class,
+ * as in `'border-2 border-[#1777EA]'`. Either half may be missing on read and
+ * the two may arrive in any order; a change always writes the width first.
+ * Tokens this component does not own are dropped by that rewrite.
+ *
+ * Beware: Tailwind only generates an arbitrary class for text it finds in the
+ * source at build time. A value that arrives at runtime -- from a database,
+ * say -- therefore gets no CSS of its own; the consumer either translates it
+ * into an inline style or safelists the classes it can produce. The hex is
+ * always parseable out of the string, which is what makes that translation
+ * possible.
+ */
+const model = defineModel<string>({ required: true })
+
+/** Open state of the block. Only has an effect when `switchable` is `true`. */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = BORDER_STEPS.length - 1
+
+/** The model read as a token list; whitespace of any shape separates them. */
+const tokens = computed(() => model.value.split(/\s+/).filter(Boolean))
+
+/**
+ * Position of the current width on the step list, taken from the first token
+ * that is a width class so that the token order in the string decides. A string
+ * without one -- a colour-only value, or copy from before this component --
+ * 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(() => {
+  const widthToken = tokens.value.find((token) => BORDER_STEPS.some((step) => step.class === token))
+
+  return Math.max(
+    0,
+    BORDER_STEPS.findIndex((step) => step.class === widthToken),
+  )
+})
+
+/**
+ * The hex is part of the class the model writes, so a bare `string` cannot be
+ * handed to the writer. This narrows the picker's output and the regex capture
+ * to the shape the value promises, without a cast.
+ */
+const isHex = (value: string): value is `#${string}` => value.startsWith('#')
+
+/** The hex out of the model, or an empty string when it carries no colour. */
+const hex = computed(() => {
+  const captured = tokens.value.map((token) => COLOR_PATTERN.exec(token)?.[1]).find(Boolean)
+
+  return captured && isHex(captured) ? captured : ''
+})
+
+/**
+ * Both halves are written as one string, always width first, so the stored
+ * value has a single shape no matter what arrived. Without a colour the width
+ * stands alone rather than gaining an empty `border-[]`.
+ */
+const write = (width: EditorBorderWidth, color: string) => {
+  model.value = color ? `${width} border-[${color}]` : width
+}
+
+// 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]) => {
+    write(BORDER_STEPS[index].class, hex.value)
+  },
+})
+
+const picked = computed({
+  get: () => hex.value,
+  // The picker clears its own value in no flow it offers, but an empty string
+  // would still wipe a perfectly good colour, so it is dropped rather than
+  // written through. The picker keeps rendering the model's colour.
+  set: (value: string) => {
+    if (isHex(value)) write(BORDER_STEPS[stepIndex.value].class, value)
+  },
+})
+
+const displayValue = computed(() => `${BORDER_STEPS[stepIndex.value].px} ${copy.value.unit}`)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" :switchable="switchable">
+    <div class="flex flex-col gap-3">
+      <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
+          header names the whole setting ('Rand'), so the thumb is named after
+          the half it controls instead.
+        -->
+        <NexxtSlider
+          v-model="sliderValue"
+          :min="0"
+          :max="maxIndex"
+          :step="1"
+          :aria-label="copy.width"
+          :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>
+
+      <!--
+        The block label is the switch's own label, so the picker gets no `label`
+        of its own -- that would print the heading twice. Its trigger falls back
+        to the placeholder for its accessible name, which is why the placeholder
+        is the one piece of copy this component passes down.
+      -->
+      <!--
+        `matchWidth` makes the panel as wide as the full-width trigger instead of
+        the fixed `w-70` it defaults to. It works by setting a `min-width` on the
+        floating element, so a panel in a container narrower than its content
+        would still be wider than the trigger; in the settings column it is not.
+      -->
+      <NexxtColorPicker
+        v-model="picked"
+        full-width
+        match-width
+        :formats="['hex']"
+        :show-alpha="false"
+        :placeholder="copy.placeholder"
+      />
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+/**
+ * The text 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 EditorTextAlignValue = 'text-left' | 'text-center' | 'text-right' | 'text-justify'
+
+/** Overridable copy for the four options. Every key is optional. */
+export interface EditorTextAlignMessages {
+  /** Accessible name of the `text-left` option. Defaults to `'Links'`. */
+  left?: string
+  /** Accessible name of the `text-center` option. Defaults to `'Midden'`. */
+  center?: string
+  /** Accessible name of the `text-right` option. Defaults to `'Rechts'`. */
+  right?: string
+  /** Accessible name of the `text-justify` option. Defaults to `'Uitvullen'`. */
+  justify?: string
+}
+
+export interface NexxtEditorTextAlignProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Tekst 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?: EditorTextAlignMessages
+}
+
+const DEFAULT_MESSAGES = {
+  left: 'Links',
+  center: 'Midden',
+  right: 'Rechts',
+  justify: 'Uitvullen',
+} satisfies Required<EditorTextAlignMessages>
+</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: 'NexxtEditorTextAlign' })
+
+const { label = 'Tekst uitlijning', messages } = defineProps<NexxtEditorTextAlignProps>()
+
+/** The selected text alignment, as the Tailwind class to apply. */
+const model = defineModel<EditorTextAlignValue>({ 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: 'text-left', icon: 'align-left', ariaLabel: copy.value.left },
+  { value: 'text-center', icon: 'align-center', ariaLabel: copy.value.center },
+  { value: 'text-right', icon: 'align-right', ariaLabel: copy.value.right },
+  { value: 'text-justify', icon: 'align-justify', ariaLabel: copy.value.justify },
+])
+
+// 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 EditorTextAlignValue
+  },
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <NexxtToggleGroup v-model="selected" :options="options" />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -63,11 +63,13 @@
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.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",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
-  "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue"
+  "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",
+  "NexxtEditorTextAlign": "components/editor/molecules/EditorTextAlign/EditorTextAlign.vue"
 }

package/src/index.ts

@@ -30,6 +30,10 @@ export type {
   EditorColorProperty,
   EditorColorValue,
 } from './components/editor/molecules/EditorColor/EditorColor.vue'
+export type {
+  EditorBorderMessages,
+  EditorBorderWidth,
+} from './components/editor/molecules/EditorBorder/EditorBorder.vue'
 export type {
   EditorHeadingTypeMessages,
   EditorHeadingTypeValue,
@@ -38,6 +42,10 @@ export type {
   EditorRadiusMessages,
   EditorRadiusValue,
 } from './components/editor/molecules/EditorRadius/EditorRadius.vue'
+export type {
+  EditorTextAlignMessages,
+  EditorTextAlignValue,
+} from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue'
 export type {
   EditorJustifyContentMessages,
   EditorJustifyContentValue,
@@ -67,6 +75,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 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'
@@ -75,6 +84,7 @@ export { default as NexxtEditorJustifyContent } from './components/editor/molecu
 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 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'
 export { default as NexxtHeader } from './components/organisms/Header/Header.vue'