@nexxtmove/ui 1.34.0 → 1.35.0

package/package.json

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

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/organisms/ColorPicker/ColorPicker.vue

@@ -19,6 +19,7 @@ import NexxtFloatingPanel from '../../atoms/FloatingPanel/FloatingPanel.vue'
 import NexxtIcon from '../../atoms/Icon/Icon.vue'
 
 export type ColorFormat = 'hex' | 'hsl' | 'rgb'
+export type ColorSuggestions = Partial<Record<ColorFormat, string[]>>
 
 export interface NexxtColorPickerProps {
   label?: string
@@ -30,6 +31,10 @@ export interface NexxtColorPickerProps {
   formats?: ColorFormat[]
   fullWidth?: boolean
   matchWidth?: boolean
+  /** Existing colours grouped by format; only suggestions for the active format are shown. */
+  suggestions?: ColorSuggestions
+  /** Accessible and visible label for the suggestions. */
+  suggestionsLabel?: string
 }
 
 defineOptions({ name: 'NexxtColorPicker' })
@@ -42,22 +47,62 @@ const props = withDefaults(defineProps<NexxtColorPickerProps>(), {
   formats: () => ['hex'],
   fullWidth: false,
   matchWidth: false,
+  suggestions: () => ({}),
+  suggestionsLabel: 'Gebruikte kleuren',
 })
 
 const model = defineModel<string>({ default: '' })
 
-const colorObj = ref<Color>(normalizeColor(model.value || '#3b82f6'))
-const hexInputError = ref('')
+const withoutAlpha = (color: Color) =>
+  color.alpha < 1 ? setChannelValue(color, 'alpha', 100) : color
+
+const normalizeModelColor = (value: string) => {
+  const color = normalizeColor(value)
+
+  return props.showAlpha ? color : withoutAlpha(color)
+}
+
+const normalizeInputColor = (value: string) => {
+  const color = normalizeColor(value)
+
+  if (!props.showAlpha && color.alpha < 1) {
+    throw new Error('Transparantie is niet beschikbaar')
+  }
+
+  return color
+}
+
 const activeFormatIndex = ref(0)
+const activeFormat = computed<ColorFormat>(() => props.formats[activeFormatIndex.value] ?? 'hex')
+const fmt = (color: Color, format: ColorFormat) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return colorToString(color, format as any)
+}
+
+const colorObj = ref<Color>(normalizeModelColor(model.value || '#3b82f6'))
+const hexInputError = ref('')
 const channelInputErrors = ref<Partial<Record<ColorChannel, string>>>({})
 
 const hexColor = computed(() => colorToString(colorObj.value, 'hex'))
-const activeFormat = computed<ColorFormat>(() => props.formats[activeFormatIndex.value] ?? 'hex')
 const displayValue = computed(() => (model.value ? fmt(colorObj.value, activeFormat.value) : ''))
+const colorSuggestions = computed(() => {
+  const values = new Set<string>()
 
-const fmt = (color: Color, format: ColorFormat) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return colorToString(color, format as any)
+  props.suggestions[activeFormat.value]?.forEach((suggestion) => {
+    try {
+      const color = normalizeInputColor(suggestion)
+      values.add(fmt(color, activeFormat.value))
+    } catch {
+      // Consumers can derive suggestions from stored classes; ignore malformed or unsupported values safely.
+    }
+  })
+
+  return [...values]
+})
+
+const selectSuggestion = (suggestion: string) => {
+  colorObj.value = normalizeInputColor(suggestion)
+  model.value = fmt(colorObj.value, activeFormat.value)
 }
 
 const cycleFormat = (direction: 1 | -1) => {
@@ -67,14 +112,15 @@ const cycleFormat = (direction: 1 | -1) => {
 }
 
 const handleColorUpdate = (newColor: Color) => {
-  colorObj.value = newColor
-  model.value = fmt(newColor, activeFormat.value)
+  const updated = props.showAlpha ? newColor : withoutAlpha(newColor)
+  colorObj.value = updated
+  model.value = fmt(updated, activeFormat.value)
 }
 
 const handleHexInput = (event: Event) => {
   const val = (event.target as HTMLInputElement).value
   try {
-    colorObj.value = normalizeColor(val)
+    colorObj.value = normalizeInputColor(val)
     model.value = fmt(colorObj.value, activeFormat.value)
     hexInputError.value = ''
   } catch (e) {
@@ -103,12 +149,23 @@ watch(
   (val) => {
     if (!val) return
     try {
-      colorObj.value = normalizeColor(val)
+      colorObj.value = normalizeModelColor(val)
     } catch {
       // Ignore invalid color strings
     }
   },
 )
+
+watch(
+  () => props.showAlpha,
+  (showAlpha) => {
+    if (!showAlpha && colorObj.value.alpha < 1) {
+      const updated = withoutAlpha(colorObj.value)
+      colorObj.value = updated
+      model.value = fmt(updated, activeFormat.value)
+    }
+  },
+)
 </script>
 
 <template>
@@ -386,6 +443,25 @@ watch(
               </ColorFieldRoot>
             </div>
           </div>
+          <div v-if="colorSuggestions.length" class="flex flex-col gap-1">
+            <span class="extra-small-normal text-gray-500">{{ suggestionsLabel }}</span>
+            <div class="flex flex-wrap gap-1.5">
+              <button
+                v-for="suggestion in colorSuggestions"
+                :key="suggestion"
+                type="button"
+                class="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-label="`Kies kleur ${suggestion}`"
+                @click="selectSuggestion(suggestion)"
+              >
+                <ColorSwatch
+                  :color="suggestion"
+                  class="size-6 rounded-sm shadow-[inset_0_0_0_1px_rgba(0,0,0,0.1)]"
+                  :style="{ backgroundColor: 'var(--reka-color-swatch-color)' }"
+                />
+              </button>
+            </div>
+          </div>
         </div>
       </template>
     </NexxtFloatingPanel>