@nexxtmove/ui 1.33.0 → 1.35.0

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

@@ -14,10 +14,11 @@ export type EditorColorProperty = 'bg' | 'text'
  */
 export type EditorColorValue = `${EditorColorProperty}-[#${string}]`
 
-/** Overridable copy of the picker. Every key is optional. */
 export interface EditorColorMessages {
   /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
   placeholder?: string
+  /** Label shown above reusable colours. */
+  suggestionsLabel?: string
 }
 
 export interface NexxtEditorColorProps {
@@ -44,10 +45,13 @@ export interface NexxtEditorColorProps {
    * defaults of the others. Copy is never translated inside the component.
    */
   messages?: EditorColorMessages
+  /** Hex colours available inside the picker panel as one-click suggestions. */
+  suggestions?: string[]
 }
 
 const DEFAULT_MESSAGES = {
   placeholder: 'Kies kleur...',
+  suggestionsLabel: 'Gebruikte kleuren',
 } satisfies Required<EditorColorMessages>
 
 /**
@@ -72,6 +76,7 @@ const {
   switchable = false,
   property = 'bg',
   messages,
+  suggestions = [],
 } = defineProps<NexxtEditorColorProps>()
 
 /**
@@ -150,6 +155,8 @@ watch(
       :formats="['hex']"
       :show-alpha="false"
       :placeholder="copy.placeholder"
+      :suggestions="{ hex: suggestions }"
+      :suggestions-label="copy.suggestionsLabel"
     />
   </NexxtEditorSettingsBlock>
 </template>

package/src/components/molecules/PickerGroup/PickerGroup.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed, useId } from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import NexxtIcon from '../../atoms/Icon/Icon.vue'
+
+interface NexxtPickerGroupProps {
+  /** Heading of the group, and the accessible name of its `role="group"`. */
+  label: string
+  /**
+   * Whether the heading folds the group. `false` turns the heading into a plain label: no
+   * chevron, no click handler, no `aria-expanded`.
+   */
+  collapsible?: boolean
+}
+
+defineOptions({ name: 'NexxtPickerGroup' })
+
+const { label, collapsible = true } = defineProps<NexxtPickerGroupProps>()
+
+/** Whether the options are shown. A closed group has its options out of the DOM. */
+const open = defineModel<boolean>('open', { default: true })
+
+defineSlots<{
+  /** The options: `NexxtPickerItem`s, or anything else with `role="option"`. */
+  default(): unknown
+}>()
+
+const headingId = useId()
+
+const preferredMotion = usePreferredReducedMotion()
+// `motion-reduce:transition-none` alone leaves Vue reading the 120ms off the leaving wrapper, so
+// the options of a "closed" group would linger; without CSS mode they go in the same patch
+const reduced = computed(() => preferredMotion.value === 'reduce')
+
+const HEADING_CLASSES = {
+  base: 'flex h-7 items-center gap-1.5 rounded-lg px-2 extra-small-semibold tracking-wide text-gray-700 uppercase select-none',
+  collapsible: 'cursor-pointer hover:bg-gray-50',
+  static: 'cursor-default',
+}
+
+const CHEVRON_CLASSES = {
+  base: 'extra-small-normal transition-transform motion-reduce:transition-none',
+  open: 'duration-160 ease-out',
+  closed: '-rotate-90 duration-120 ease-in',
+}
+
+const headingClass = computed(() => [
+  HEADING_CLASSES.base,
+  collapsible ? HEADING_CLASSES.collapsible : HEADING_CLASSES.static,
+])
+
+const chevronClass = computed(() => [
+  CHEVRON_CLASSES.base,
+  open.value ? CHEVRON_CLASSES.open : CHEVRON_CLASSES.closed,
+])
+
+// Bound through `v-on`, so a static heading has no click handler at all
+const headingListeners = computed(() =>
+  collapsible ? { click: () => (open.value = !open.value) } : {},
+)
+
+// Options on their way out can no longer be clicked, and assistive tech skips them
+const onBeforeLeave = (el: Element) => el.setAttribute('inert', '')
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-labelledby="headingId"
+    :aria-expanded="collapsible ? open : undefined"
+    class="flex flex-col not-first:mt-2"
+  >
+    <!-- Not a button and not a tab stop: a listbox may only hold options and groups. The keyboard
+         folds a group with ←/→ from the listbox. `mousedown.prevent` keeps focus where it was. -->
+    <div role="presentation" :class="headingClass" v-on="headingListeners" @mousedown.prevent>
+      <span
+        v-if="collapsible"
+        class="flex size-3 shrink-0 items-center justify-center text-gray-700"
+      >
+        <NexxtIcon name="chevron-down" aria-hidden="true" :class="chevronClass" />
+      </span>
+      <span :id="headingId">{{ label }}</span>
+    </div>
+
+    <!-- No row class on the wrapper itself: after entering it is plain `auto`, so a base class
+         never fights the from/to classes -->
+    <Transition
+      :css="!reduced"
+      enter-active-class="transition-[grid-template-rows,opacity] duration-160 ease-out motion-reduce:transition-none"
+      enter-from-class="grid-rows-[0fr] opacity-0"
+      enter-to-class="grid-rows-[1fr] opacity-100"
+      leave-active-class="transition-[grid-template-rows,opacity] duration-120 ease-in motion-reduce:transition-none"
+      leave-from-class="grid-rows-[1fr] opacity-100"
+      leave-to-class="grid-rows-[0fr] opacity-0"
+      @before-leave="onBeforeLeave"
+    >
+      <div v-if="open" class="grid">
+        <div class="min-h-0 overflow-hidden">
+          <!-- Padding here rather than on the clipping layer, so nothing is left at 0fr -->
+          <div class="flex flex-col gap-0.5 pt-0.5">
+            <slot />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>