@nexxtmove/ui 2.4.0 → 2.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "2.4.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>

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

@@ -110,9 +110,9 @@ const selected = computed({
 <template>
   <NexxtEditorSettingsBlock :label="label">
     <!--
-      Select is `inline-flex` and its field carries a `min-w-60`, so without
-      `w-full` it would sit at that minimum instead of filling the block. The
-      class lands on Select's root, whose trigger is already `w-full`.
+      Select is `inline-flex` and 240px wide by default (capped at its
+      container), so without `w-full` it would sit at 240px instead of filling
+      the block. The class lands on Select's root; the trigger grows with it.
     -->
     <!--
       The block label is a <p>, not a <label>, so the combobox would have no

package/src/components/molecules/Select/Select.vue

@@ -151,7 +151,7 @@ watch(model, () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1 [:where(&)]:max-w-full">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -165,6 +165,10 @@ watch(model, () => {
       @open="activeIndex = selectedIndex >= 0 ? selectedIndex : activeIndex"
     >
       <template #trigger="{ isOpen, toggle }">
+        <!-- The 240px default width lives here, as the trigger's flex basis: it
+             holds in a shrink-to-fit wrapper, and the trigger shrinks below it
+             (min-w-0) or grows past it with any width the root gets. The root's
+             max-w-full, at zero specificity, keeps it inside a narrow column. -->
         <div
           :id="selectId"
           role="combobox"
@@ -174,7 +178,7 @@ watch(model, () => {
           :aria-controls="isOpen ? listboxId : undefined"
           :aria-activedescendant="isOpen && activeIndex >= 0 ? optionId(activeIndex) : undefined"
           tabindex="0"
-          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-60 min-w-0 grow cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="[
             error ? 'ring-brick-400' : 'ring-gray-200',
             { 'pl-3': triggerIcon, 'pr-3': true },
@@ -185,11 +189,13 @@ watch(model, () => {
           <span v-if="triggerIcon" class="flex items-center">
             <NexxtIcon :name="triggerIcon" />
           </span>
+          <!-- The ellipsis needs a block box: text directly in a flex container is
+               an anonymous flex item that `truncate` does not reach. -->
           <span
-            class="flex h-10 w-full min-w-60 items-center text-sm"
+            class="flex h-10 min-w-0 flex-1 items-center text-sm"
             :class="[selectedLabel ? 'text-gray-900' : 'text-gray-400', { 'pl-3': !triggerIcon }]"
           >
-            {{ selectedLabel ?? placeholder }}
+            <span class="truncate">{{ selectedLabel ?? placeholder }}</span>
           </span>
           <NexxtIcon
             name="chevron-down"

package/src/components/organisms/CountrySelect/CountrySelect.vue

@@ -71,7 +71,7 @@ const onOpen = async () => {
 </script>
 
 <template>
-  <div class="inline-flex flex-col gap-1">
+  <div class="inline-flex flex-col gap-1 [:where(&)]:max-w-full">
     <label v-if="label" class="justify-start small-normal text-gray-700" :for="selectId">
       {{ label }}
       <span v-if="required" class="text-brick-500">*</span>
@@ -79,20 +79,24 @@ const onOpen = async () => {
 
     <NexxtFloatingPanel placement="bottom" match-width @open="onOpen">
       <template #trigger="{ isOpen, toggle }">
+        <!-- The 240px default width lives here, as the trigger's flex basis: it
+             holds in a shrink-to-fit wrapper, and the trigger shrinks below it
+             (min-w-0) or grows past it with any width the root gets. The root's
+             max-w-full, at zero specificity, keeps it inside a narrow column. -->
         <div
           :id="selectId"
           role="combobox"
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
           tabindex="0"
-          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-60 min-w-0 grow cursor-pointer items-center gap-2 rounded-lg pr-3 ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="error ? 'ring-brick-400' : 'ring-gray-200'"
           @click="toggle"
           @keydown.enter.prevent="toggle"
           @keydown.space.prevent="toggle"
         >
           <span
-            class="flex h-10 w-full min-w-60 items-center gap-2 pl-3 text-sm"
+            class="flex h-10 min-w-0 flex-1 items-center gap-2 pl-3 text-sm"
             :class="selectedCountry ? 'text-gray-900' : 'text-gray-400'"
           >
             <span
@@ -100,7 +104,8 @@ const onOpen = async () => {
               :class="`fi fi-${selectedCountry.code}`"
               class="shrink-0"
             />
-            {{ selectedCountry?.name ?? placeholder }}
+            <!-- A block box of its own, or `truncate` would not reach the text. -->
+            <span class="truncate">{{ selectedCountry?.name ?? placeholder }}</span>
           </span>
           <NexxtIcon
             name="chevron-down"