@nexxtmove/ui 2.1.0 → 2.3.0

package/dist/nuxt.js

@@ -84,6 +84,7 @@ var s = {
 	NexxtEditorAlignmentGrid: "components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue",
 	NexxtEditorAnchor: "components/editor/molecules/EditorAnchor/EditorAnchor.vue",
 	NexxtEditorBackgroundSize: "components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue",
+	NexxtEditorBlur: "components/editor/molecules/EditorBlur/EditorBlur.vue",
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorDashPattern: "components/editor/molecules/EditorDashPattern/EditorDashPattern.vue",

package/package.json

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

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

@@ -11,6 +11,12 @@ interface NexxtEditorSettingsBlockProps {
    * When `false` the content is always visible and the model is ignored.
    */
   switchable?: boolean
+  /**
+   * Id(s) of an element that describes the setting, set as `aria-describedby`
+   * on the switch. Only has an effect when `switchable` is `true`; without it
+   * no attribute is rendered.
+   */
+  describedby?: string
 }
 
 /**
@@ -21,7 +27,7 @@ interface NexxtEditorSettingsBlockProps {
  */
 defineOptions({ name: 'NexxtEditorSettingsBlock' })
 
-const { label, switchable = false } = defineProps<NexxtEditorSettingsBlockProps>()
+const { label, switchable = false, describedby } = defineProps<NexxtEditorSettingsBlockProps>()
 
 /**
  * Open state of the block, driven by the switch. Only has an effect when
@@ -80,7 +86,14 @@ const labelTag = computed(() => (promoted.value && group ? `h${group.value.headi
       back to the `gap-2` that Switch.vue sets for itself.
     -->
     <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">
+      <Switch
+        v-if="switchable"
+        v-model="model"
+        size="sm"
+        color="blue"
+        label-position="before"
+        :aria-describedby="describedby"
+      >
         <span :class="['grow text-left', labelTypography, labelColor]">{{ label }}</span>
       </Switch>
       <component :is="labelTag" v-else :class="[labelTypography, labelColor]">

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

@@ -0,0 +1,160 @@
+<script lang="ts">
+/**
+ * The blur steps the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `backdrop-blur-` prefix, so the class is
+ * `backdrop-blur-` plus the token -- the same shape as `EDITOR_SHADOW_OPTIONS`.
+ * "No blur" is not a step: it is the switch being off. The labels are not in
+ * here; they arrive through `messages`, keyed by token.
+ */
+export const EDITOR_BLUR_OPTIONS = [
+  { token: 'xs' },
+  { token: 'sm' },
+  { token: 'md' },
+  { token: 'lg' },
+  { token: 'xl' },
+] as const
+
+/**
+ * The blur as the editor needs it: the Tailwind class itself, so the consumer
+ * can put the model value straight on the group it styles.
+ */
+export type EditorBlurValue = `backdrop-blur-${(typeof EDITOR_BLUR_OPTIONS)[number]['token']}`
+
+/** Overridable copy of the step control. Every key is optional. */
+export interface EditorBlurMessages {
+  /**
+   * Accessible name of the group of steps. Visually hidden: the block label
+   * already says what the steps are. Defaults to the Dutch `'Sterkte'`.
+   */
+  strength?: string
+  /** Name of the `backdrop-blur-xs` option. Defaults to `'XS'`. */
+  xs?: string
+  /** Name of the `backdrop-blur-sm` option. Defaults to `'S'`. */
+  sm?: string
+  /** Name of the `backdrop-blur-md` option. Defaults to `'M'`. */
+  md?: string
+  /** Name of the `backdrop-blur-lg` option. Defaults to `'L'`. */
+  lg?: string
+  /** Name of the `backdrop-blur-xl` option. Defaults to `'XL'`. */
+  xl?: string
+}
+
+export interface NexxtEditorBlurProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Vervagen'`; 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 steps.
+   * Defaults to `true`: there is no "none" step, so the switch is the only way
+   * to turn the blur off. The switch state is the `enabled` model; switching
+   * off leaves the step alone.
+   */
+  switchable?: boolean
+  /**
+   * Copy of the step control. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorBlurMessages
+  /**
+   * Id(s) of an element that describes the setting, such as a hint the
+   * consumer renders itself. Set as `aria-describedby` on the switch (when
+   * `switchable`) and on the group of steps. Without it no attribute is set.
+   */
+  describedby?: string
+}
+
+const DEFAULT_MESSAGES = {
+  strength: 'Sterkte',
+  xs: 'XS',
+  sm: 'S',
+  md: 'M',
+  lg: 'L',
+  xl: 'XL',
+} satisfies Required<EditorBlurMessages>
+
+/** The class a control starts on when it is switched on without a valid one. */
+const DEFAULT_VALUE: EditorBlurValue = 'backdrop-blur-md'
+
+const toValue = (token: (typeof EDITOR_BLUR_OPTIONS)[number]['token']): EditorBlurValue =>
+  `backdrop-blur-${token}`
+
+const isValue = (value: unknown): value is EditorBlurValue =>
+  EDITOR_BLUR_OPTIONS.some(({ token }) => toValue(token) === value)
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } 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: 'NexxtEditorBlur' })
+
+const {
+  label = 'Vervagen',
+  switchable = true,
+  messages,
+  describedby,
+} = defineProps<NexxtEditorBlurProps>()
+
+/**
+ * The selected blur, as the Tailwind class to apply (`backdrop-blur-md`).
+ * Optional: a consumer may have no class stored yet. Without a valid class the
+ * control shows `md` but writes nothing, so the consumer has to assume
+ * `backdrop-blur-md` itself. Only a switch from off to on (when `switchable`)
+ * writes `backdrop-blur-md` back; mounting never emits.
+ */
+const model = defineModel<EditorBlurValue>()
+
+/**
+ * Open state of the block. Only has an effect when `switchable` is `true`; then
+ * off is the way to express "no blur". With `switchable` set to `false` the
+ * steps are always active, whatever this model says.
+ */
+const enabled = defineModel<boolean>('enabled', { default: true })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const options = computed<NexxtToggleGroupOption[]>(() =>
+  EDITOR_BLUR_OPTIONS.map(({ token }) => ({ value: toValue(token), label: copy.value[token] })),
+)
+
+// ToggleGroup types its model as an open `string`; the setter narrows it, which
+// is safe because it can only emit the option values built above. A missing or
+// unknown class shows `md` rather than leaving every option unselected.
+const selected = computed({
+  get: () => (isValue(model.value) ? model.value : DEFAULT_VALUE),
+  set: (value: string) => {
+    model.value = value as EditorBlurValue
+  },
+})
+
+// Switching on without a valid class writes `backdrop-blur-md` back, so the
+// consumer never ends up with an enabled blur and no class to apply. Without a
+// switch there is no switching on, so `enabled` is ignored there like everywhere
+// else. The current model is read here rather than captured, so a parent that
+// sets both in one tick wins.
+watch(enabled, (on, wasOn) => {
+  if (switchable && on && !wasOn && !isValue(model.value)) model.value = DEFAULT_VALUE
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock
+    v-model="enabled"
+    :label="label"
+    :switchable="switchable"
+    :describedby="describedby"
+  >
+    <NexxtToggleGroup
+      v-model="selected"
+      :label="copy.strength"
+      label-hidden
+      :options="options"
+      :aria-describedby="describedby"
+    />
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -1,4 +1,24 @@
 <script lang="ts">
+import type { EditorColorRole, EditorColorThemeRole } from './colorClass'
+import type { EditorColorGradientValue } from './gradientClass'
+import type {
+  ColorPickerFillMode,
+  ColorPickerGradientMessages,
+} from '../../../organisms/ColorPicker/ColorPicker.vue'
+
+export type { EditorColorRole, EditorColorThemeRole } from './colorClass'
+export type {
+  EditorColorGradientValue,
+  EditorColorLinearGradientValue,
+  EditorColorRadialGradientValue,
+} from './gradientClass'
+
+/** A fill the editor can offer: `'solid'` or `'gradient'`; see NexxtColorPicker. */
+export type EditorColorFillMode = ColorPickerFillMode
+
+/** Copy of the gradient mode; see NexxtColorPicker. */
+export type EditorColorGradientMessages = ColorPickerGradientMessages
+
 /**
  * The CSS property the chosen colour is written to. It is the prefix of the
  * Tailwind class the model carries, so it decides whether the colour becomes a
@@ -7,14 +27,6 @@
  */
 export type EditorColorProperty = 'bg' | 'text'
 
-const ROLES = ['main', 'accent', 'background', 'heading', 'text'] as const
-
-/**
- * A role of the customer's theme. A colour bound to a role follows the theme,
- * where a literal colour stays what it was picked as.
- */
-export type EditorColorRole = (typeof ROLES)[number]
-
 /** A literal colour: a Tailwind arbitrary-value class such as `'bg-[#1777EA]'`. */
 export type EditorColorLiteralValue = `${EditorColorProperty}-[#${string}]`
 
@@ -24,22 +36,11 @@ export type EditorColorRoleValue = `${EditorColorProperty}-theme-${EditorColorRo
 /**
  * The colour as the editor needs it: the class to apply, so the consumer can
  * put the model value straight on the element it styles. Either a literal
- * colour or a theme role.
+ * colour or a theme role, or with `modes` including `'gradient'` a gradient: a string of classes
+ * such as `'bg-linear-135 from-[#7f56d9] to-[#432e73]'`.
  */
-export type EditorColorValue = EditorColorLiteralValue | EditorColorRoleValue
-
-export interface EditorColorThemeRole {
-  /** The role the class is written for: `'main'` becomes `bg-theme-main`. */
-  role: EditorColorRole
-  /** Name of the role as the user reads it, in the swatch's tooltip and in the trigger. */
-  label: string
-  /**
-   * The role's current colour as a 6- or 8-digit hex. Only used to paint the
-   * swatch: the library ships no CSS for the role classes, and the hex never
-   * reaches the model.
-   */
-  hex: string
-}
+export type EditorColorValue =
+  EditorColorLiteralValue | EditorColorRoleValue | EditorColorGradientValue
 
 export interface EditorColorMessages {
   /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
@@ -48,6 +49,11 @@ export interface EditorColorMessages {
   suggestionsLabel?: string
   /** Label shown above the theme roles. Defaults to `'Huisstijl'`. */
   themeLabel?: string
+  /**
+   * Label above the opacity slider, and its accessible name. Defaults to
+   * `'Dekking'`. Only shown with `showAlpha`.
+   */
+  alphaLabel?: string
 }
 
 export interface NexxtEditorColorProps {
@@ -93,45 +99,59 @@ export interface NexxtEditorColorProps {
    * alpha and the model gets the opaque 6-digit hex.
    */
   showAlpha?: boolean
+  /**
+   * The fills the picker offers. `['solid']` (the default) is the plain colour
+   * picker, unchanged. `['solid', 'gradient']`, in any order, adds an
+   * "Effen | Verloop" switch; `['gradient']` offers only the gradient, without a
+   * switch -- an empty value or a solid colour then opens on the gradient a
+   * switch would give, written only on the first change. A gradient only exists
+   * for `property` `'bg'`: with `'text'` this falls back to `['solid']`, also
+   * for `['gradient']`. A gradient is written as
+   * one string of classes in a fixed order -- type, from, from-position, via,
+   * via-position, to, to-position -- such as
+   * `'bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]'` or
+   * `'bg-radial-[at_30%_70%] from-theme-accent to-[#ffffff00]'`. Hexes are in
+   * lower case without an opaque `ff`, and a position is only written when it
+   * differs from 0 %, 50 % or 100 %. In the gradient mode the opacity slider is
+   * always offered, whatever `showAlpha` says. To draw a stored gradient as an
+   * inline style, parse it with `parseGradientClass` and turn it into CSS with
+   * `gradientClassToCss`, which always interpolates in oklab, as the preview does.
+   * A radial gradient off centre renders in sRGB as a Tailwind class; draw it
+   * with `gradientClassToCss` for the oklab result the picker shows.
+   */
+  modes?: EditorColorFillMode[]
+  /**
+   * Copy of the gradient mode. Merged per key over the Dutch defaults, so
+   * overriding one key keeps the others.
+   */
+  gradientMessages?: EditorColorGradientMessages
+  /**
+   * Id(s) of an element that describes the setting, such as a hint the
+   * consumer renders itself. Set as `aria-describedby` on the picker's trigger,
+   * and on the switch when `switchable`. Without it no attribute is set.
+   */
+  describedby?: string
 }
 
 const DEFAULT_MESSAGES = {
   placeholder: 'Kies kleur...',
   suggestionsLabel: 'Gebruikte kleuren',
   themeLabel: 'Huisstijl',
+  alphaLabel: 'Dekking',
 } satisfies Required<EditorColorMessages>
 
 /**
- * A literal model value: one of the two prefixes, then a 6- or 8-digit hex between
- * brackets. A `border-[…]` class is therefore read as unparseable, the same as
- * any other class this component does not own. The alpha pair is accepted on
- * read whether or not `showAlpha` is set, so a stored `#1777EA80` survives a
- * round trip either way.
- */
-const VALUE_PATTERN = /^(bg|text)-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
-
-/**
- * A role class: one of the two prefixes, then `theme-` and one of the five
- * roles. Either prefix takes every role. A tint such as `bg-theme-main/10` is
- * not a value this component writes, so it is read as unparseable.
- */
-const ROLE_PATTERN = new RegExp(`^(?:bg|text)-theme-(${ROLES.join('|')})$`)
-
-/** The picker throws on a colour it cannot read, so a role's hex is checked first. */
-const ROLE_HEX_PATTERN = /^#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?$/
-
-/**
- * The picker writes `#rrggbbaa` only below full opacity, but an alpha a hair
- * under 1 still rounds to `ff`. That pair says nothing, so it is dropped.
+ * The prefixes read as a colour. A value with the other prefix is shown and
+ * rewritten to `property`; a `border-[…]` class, like any other class this
+ * component does not own, is read as unparseable.
  */
-const OPAQUE_ALPHA_PATTERN = /^(#[0-9A-Fa-f]{6})[fF]{2}$/
+const PROPERTIES = ['bg', 'text'] as const satisfies readonly EditorColorProperty[]
 </script>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue'
+import { computed } from 'vue'
 import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
-import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
-import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+import NexxtColorField from './_ColorField.vue'
 
 defineOptions({ name: 'NexxtEditorColor' })
 
@@ -143,6 +163,9 @@ const {
   suggestions = [],
   themeRoles = [],
   showAlpha = false,
+  modes = ['solid'],
+  gradientMessages,
+  describedby,
 } = defineProps<NexxtEditorColorProps>()
 
 /**
@@ -164,88 +187,15 @@ const model = defineModel<EditorColorValue>({ required: true })
 const enabled = defineModel<boolean>('enabled', { default: true })
 
 const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
-
-/**
- * The `#` is part of the model's type, so a plain `string` cannot be written
- * into it. This narrows the picker's output and the regex capture to the shape
- * the model 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 is not a colour class. */
-const hex = computed(() => {
-  const captured = VALUE_PATTERN.exec(model.value)?.[2]
-  return captured && isHex(captured) ? captured : ''
-})
-
-/** The role out of the model, or `undefined` when it is not a role class. */
-const storedRole = computed(() => {
-  const captured = ROLE_PATTERN.exec(model.value)?.[1]
-  return ROLES.find((role) => role === captured)
-})
-
-const offeredRoles = computed(() => themeRoles.filter((entry) => ROLE_HEX_PATTERN.test(entry.hex)))
-
-/**
- * The stored role as the consumer offers it. Only a role class selects a role:
- * a literal colour that happens to equal a role's hex stays a literal.
- */
-const activeRole = computed(() => offeredRoles.value.find(({ role }) => role === storedRole.value))
-
-/**
- * Picking the role's own colour -- from the suggestions, or typed -- is how a
- * colour is detached from the theme without changing how it looks. The picker
- * reports nothing when it is told to pick the string it already has, so a role's
- * hex is handed over in its 8-digit form: with `show-alpha` off the picker never
- * reports an alpha pair, which makes every pick a change.
- *
- * A role has no opacity here, so an alpha pair in the role's own hex is replaced
- * by `ff`. Handed over translucent, the picker would drop that alpha the moment
- * the role turns `show-alpha` off, and write the opaque hex over the role.
- */
-const pickerHex = (roleHex: string) => `${roleHex.slice(0, 7)}ff`
-
-/**
- * A role class has no opacity, so the slider is only offered for a literal.
- * Hiding it is also what keeps the trick in `pickerHex` working: without the
- * alpha channel the picker reads the role's hex as opaque.
- */
-const alphaEnabled = computed(() => showAlpha && !activeRole.value)
-
-// An unparseable value -- empty, a token class such as `bg-red-500`, or copy
-// from before this component -- leaves the picker empty and its placeholder
-// visible, rather than being reported as a problem: the first pick writes a
-// valid class back. A role the consumer does not offer is shown the same way,
-// because there is no label or hex to show it with; it is not written back.
-const picked = computed({
-  get: () => (activeRole.value ? pickerHex(activeRole.value.hex) : 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) => {
-    const color = value.replace(OPAQUE_ALPHA_PATTERN, '$1')
-    if (isHex(color)) model.value = `${property}-[${color}]`
-  },
-})
-
-const pickRole = (role: EditorColorRole) => {
-  model.value = `${property}-theme-${role}`
-}
-
-// `property` is a prop, so the parent can flip a background setting into a
-// text-colour one while a value is already set. Rewriting the prefix here is
-// what keeps the stored class and the prop from drifting apart.
-watch(
-  () => property,
-  (next) => {
-    if (storedRole.value) model.value = `${next}-theme-${storedRole.value}`
-    else if (hex.value) model.value = `${next}-[${hex.value}]`
-  },
-)
 </script>
 
 <template>
-  <NexxtEditorSettingsBlock v-model="enabled" :label="label" :switchable="switchable">
+  <NexxtEditorSettingsBlock
+    v-model="enabled"
+    :label="label"
+    :switchable="switchable"
+    :describedby="describedby"
+  >
     <!--
       The block label is a <p> (or the switch's own label), so the picker gets
       no `label` of its own -- that would print the heading twice. Its trigger
@@ -258,51 +208,20 @@ watch(
       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="alphaEnabled"
+    <NexxtColorField
+      v-model="model"
+      :property="property"
+      :accepts="PROPERTIES"
+      :show-alpha="showAlpha"
       :placeholder="copy.placeholder"
-      :suggestions="{ hex: suggestions }"
+      :suggestions="suggestions"
       :suggestions-label="copy.suggestionsLabel"
-      :value-label="activeRole?.label"
-    >
-      <template v-if="offeredRoles.length" #presets>
-        <div class="flex flex-col gap-1">
-          <span class="extra-small-normal text-gray-500">{{ copy.themeLabel }}</span>
-          <!--
-            Same swatches and row as the picker's suggestions. Two roles often
-            share a hex (heading and text), so the tooltip is what tells them
-            apart; it repeats the accessible name rather than adding copy.
-          -->
-          <div class="flex flex-wrap gap-1.5">
-            <NexxtTooltip
-              v-for="{ role, label: roleLabel, hex: roleHex } in offeredRoles"
-              :key="role"
-              disable-closing-trigger
-            >
-              <button
-                type="button"
-                :aria-label="roleLabel"
-                :aria-pressed="role === activeRole?.role"
-                class="cursor-pointer rounded-md p-0.5 ring-gray-200 transition-shadow hover:ring-2 hover:ring-cornflower-blue-400 focus-visible:ring-2 focus-visible:ring-cornflower-blue-500 focus-visible:outline-none aria-pressed:ring-2 aria-pressed:ring-cornflower-blue-500"
-                @click="pickRole(role)"
-              >
-                <span
-                  aria-hidden="true"
-                  class="block size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
-                  :style="{ backgroundColor: roleHex }"
-                />
-              </button>
-              <template #tooltip>
-                <span class="small-normal text-gray-900">{{ roleLabel }}</span>
-              </template>
-            </NexxtTooltip>
-          </div>
-        </div>
-      </template>
-    </NexxtColorPicker>
+      :theme-label="copy.themeLabel"
+      :alpha-label="copy.alphaLabel"
+      :theme-roles="themeRoles"
+      :modes="modes"
+      :gradient-messages="gradientMessages"
+      :describedby="describedby"
+    />
   </NexxtEditorSettingsBlock>
 </template>