@nexxtmove/ui 2.5.0 → 2.6.0

package/package.json

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

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+import type { EditorColorThemeRole } from '../EditorColor/colorClass'
+
 /**
  * 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)
@@ -29,6 +31,8 @@ export interface EditorBorderMessages {
   placeholder?: string
   /** Accessible name of the width slider. Defaults to `'Dikte'`. */
   width?: string
+  /** Label shown above the theme roles. Defaults to `'Huisstijl'`. */
+  themeLabel?: string
 }
 
 export interface NexxtEditorBorderProps {
@@ -52,12 +56,22 @@ export interface NexxtEditorBorderProps {
    * component.
    */
   messages?: EditorBorderMessages
+  /**
+   * Theme roles offered as swatches in the colour panel, the same ones
+   * NexxtEditorColor takes. A role is a shortcut to its hex, not a binding: a
+   * pick writes `border-[#hex]` exactly as a picked colour does, and a swatch
+   * shows as selected while the border's hex equals the role's, whatever the
+   * case. An entry with an unreadable hex is left out. Defaults to `[]`, which
+   * renders no theme section.
+   */
+  themeRoles?: EditorColorThemeRole[]
 }
 
 const DEFAULT_MESSAGES = {
   unit: 'px',
   placeholder: 'Kies kleur...',
   width: 'Dikte',
+  themeLabel: 'Huisstijl',
 } satisfies Required<EditorBorderMessages>
 
 /**
@@ -73,10 +87,17 @@ 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'
+import NexxtThemeRoleSwatches from '../EditorColor/_ThemeRoleSwatches.vue'
+import { ROLE_HEX_PATTERN } from '../EditorColor/colorClass'
 
 defineOptions({ name: 'NexxtEditorBorder' })
 
-const { label = 'Rand', switchable = true, messages } = defineProps<NexxtEditorBorderProps>()
+const {
+  label = 'Rand',
+  switchable = true,
+  messages,
+  themeRoles = [],
+} = defineProps<NexxtEditorBorderProps>()
 
 /**
  * The border as the editor needs it: one class string that carries both halves
@@ -164,6 +185,32 @@ const picked = computed({
   },
 })
 
+/** The picker throws on a colour it cannot read, so a role's hex is checked first. */
+const offeredRoles = computed(() => themeRoles.filter((entry) => ROLE_HEX_PATTERN.test(entry.hex)))
+
+/**
+ * A colour without its alpha pair, as `#rrggbb`. The picker is opened without
+ * an alpha channel here, so a role's alpha would be stored but never shown;
+ * the role is offered, written and compared by its opaque colour instead.
+ */
+const opaque = (value: string) => value.slice(0, 7).toLowerCase()
+
+/**
+ * A role is only a shortcut to a hex here, so its swatch is pressed by colour:
+ * two roles that share a hex are pressed together, and a hand-picked colour
+ * equal to a role's presses that role too.
+ */
+const isRolePressed = (entry: EditorColorThemeRole) =>
+  hex.value !== '' && opaque(hex.value) === opaque(entry.hex)
+
+/**
+ * Written through the picker's own path, so a role's hex is stored as any
+ * picked hex is: six digits, in the case the consumer passed it.
+ */
+const pickRole = (entry: EditorColorThemeRole) => {
+  picked.value = entry.hex.slice(0, 7)
+}
+
 const displayValue = computed(() => `${EDITOR_BORDER_STEPS[stepIndex.value].px} ${copy.value.unit}`)
 </script>
 
@@ -216,7 +263,16 @@ const displayValue = computed(() => `${EDITOR_BORDER_STEPS[stepIndex.value].px}
         :formats="['hex']"
         :show-alpha="false"
         :placeholder="copy.placeholder"
-      />
+      >
+        <template v-if="offeredRoles.length" #presets>
+          <NexxtThemeRoleSwatches
+            :roles="offeredRoles"
+            :label="copy.themeLabel"
+            :is-pressed="isRolePressed"
+            @pick="pickRole"
+          />
+        </template>
+      </NexxtColorPicker>
     </div>
   </NexxtEditorSettingsBlock>
 </template>

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

@@ -56,8 +56,8 @@ const OPAQUE_ALPHA_PATTERN = /^(#[0-9A-Fa-f]{6})[fF]{2}$/
 
 <script lang="ts" setup generic="P extends string">
 import { computed, ref, watch } from 'vue'
-import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
 import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+import NexxtThemeRoleSwatches from './_ThemeRoleSwatches.vue'
 import type { ColorPickerGradient } from '../../../organisms/ColorPicker/ColorPicker.vue'
 import { clampCenter } from '../../../organisms/ColorPicker/gradientGeometry'
 import { COLOR_ROLES, ROLE_HEX_PATTERN, isHex, parseColorClass } from './colorClass'
@@ -412,34 +412,12 @@ watch(
     @close="onClose"
   >
     <template v-if="offeredRoles.length" #presets="{ preset, selectPreset }">
-      <div class="flex flex-col gap-1">
-        <span class="extra-small-normal text-gray-500">{{ 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="entry in offeredRoles" :key="entry.role" disable-closing-trigger>
-            <button
-              type="button"
-              :aria-label="entry.label"
-              :aria-pressed="isRolePressed(entry.role, preset)"
-              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="onRoleClick(entry, selectPreset)"
-            >
-              <span
-                aria-hidden="true"
-                class="block size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
-                :style="{ backgroundColor: entry.hex }"
-              />
-            </button>
-            <template #tooltip>
-              <span class="small-normal text-gray-900">{{ entry.label }}</span>
-            </template>
-          </NexxtTooltip>
-        </div>
-      </div>
+      <NexxtThemeRoleSwatches
+        :roles="offeredRoles"
+        :label="themeLabel"
+        :is-pressed="(entry) => isRolePressed(entry.role, preset)"
+        @pick="(entry) => onRoleClick(entry, selectPreset)"
+      />
     </template>
   </NexxtColorPicker>
 </template>

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+import type { EditorColorThemeRole } from './colorClass'
+
+/**
+ * The theme roles as one row of swatches under a section title, for the
+ * `presets` slot of NexxtColorPicker. What a pick writes, and when a swatch is
+ * pressed, is up to the field that renders it: NexxtEditorColor writes the role
+ * class, NexxtEditorBorder the role's hex.
+ */
+defineOptions({ name: 'NexxtThemeRoleSwatches' })
+
+defineProps<{
+  /** The roles to show, already stripped of entries with an unreadable hex. */
+  roles: EditorColorThemeRole[]
+  /** Section title above the swatches. */
+  label: string
+  /** Whether the swatch of a role shows as selected. */
+  isPressed: (entry: EditorColorThemeRole) => boolean
+}>()
+
+const emit = defineEmits<{
+  /** A swatch was clicked, or activated with the keyboard. */
+  pick: [entry: EditorColorThemeRole]
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-1">
+    <span class="extra-small-normal text-gray-500">{{ label }}</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="entry in roles" :key="entry.role" disable-closing-trigger>
+        <button
+          type="button"
+          :aria-label="entry.label"
+          :aria-pressed="isPressed(entry)"
+          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="emit('pick', entry)"
+        >
+          <span
+            aria-hidden="true"
+            class="block size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+            :style="{ backgroundColor: entry.hex }"
+          />
+        </button>
+        <template #tooltip>
+          <span class="small-normal text-gray-900">{{ entry.label }}</span>
+        </template>
+      </NexxtTooltip>
+    </div>
+  </div>
+</template>