@nexxtmove/ui 1.22.0 → 1.23.0

package/dist/nuxt.js

@@ -66,6 +66,7 @@ var s = {
 	NexxtVideoPlayer: "components/organisms/VideoPlayer/VideoPlayer.vue",
 	NexxtEditorSettingsBlock: "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
 	NexxtEditorAlignItems: "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",

package/package.json

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

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

@@ -0,0 +1,155 @@
+<script lang="ts">
+/**
+ * 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
+ * background or a text colour. `border` is deliberately not offered: a border
+ * is colour plus width, and that pair gets a component of its own.
+ */
+export type EditorColorProperty = 'bg' | 'text'
+
+/**
+ * The colour as the editor needs it: a Tailwind arbitrary-value class such as
+ * `'bg-[#1777EA]'`, so the consumer can put the model value straight on the
+ * element it styles.
+ */
+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
+}
+
+export interface NexxtEditorColorProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Kleur'`; 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 picker.
+   * The switch state is the `enabled` model; the colour itself is kept while
+   * the block is collapsed.
+   */
+  switchable?: boolean
+  /**
+   * The prefix of the class that is written: `'bg'` for a background colour,
+   * `'text'` for a text colour. Changing it rewrites the current value, so the
+   * model never disagrees with this prop.
+   */
+  property?: EditorColorProperty
+  /**
+   * Copy of the picker. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorColorMessages
+}
+
+const DEFAULT_MESSAGES = {
+  placeholder: 'Kies kleur...',
+} satisfies Required<EditorColorMessages>
+
+/**
+ * A full 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 so a stored `#1777EA80` survives a round trip,
+ * even though the picker itself is opened without an alpha channel here.
+ */
+const VALUE_PATTERN = /^(bg|text)-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtColorPicker from '../../../organisms/ColorPicker/ColorPicker.vue'
+
+defineOptions({ name: 'NexxtEditorColor' })
+
+const {
+  label = 'Kleur',
+  switchable = false,
+  property = 'bg',
+  messages,
+} = defineProps<NexxtEditorColorProps>()
+
+/**
+ * The chosen colour, as the Tailwind class to apply.
+ *
+ * Beware: Tailwind only generates an arbitrary class for text it finds in the
+ * source at build time. A value that arrives at runtime -- from a database,
+ * say -- therefore gets no CSS of its own; the consumer either translates it
+ * into an inline style or safelists the classes it can produce. The hex is
+ * always parseable out of the string, which is what makes that translation
+ * possible.
+ */
+const model = defineModel<EditorColorValue>({ required: true })
+
+/** Open state of the block. Only has an effect when `switchable` is `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 : ''
+})
+
+// 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.
+const picked = computed({
+  get: () => 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) => {
+    if (isHex(value)) model.value = `${property}-[${value}]`
+  },
+})
+
+// `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 (hex.value) model.value = `${next}-[${hex.value}]`
+  },
+)
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock v-model="enabled" :label="label" :switchable="switchable">
+    <!--
+      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
+      falls back to the placeholder for its accessible name, which is why the
+      placeholder is the one piece of copy this component passes down.
+    -->
+    <!--
+      `matchWidth` makes the panel as wide as the full-width trigger instead of
+      the fixed `w-70` it defaults to. It works by setting a `min-width` on the
+      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="false"
+      :placeholder="copy.placeholder"
+    />
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -63,6 +63,7 @@
   "NexxtVideoPlayer": "components/organisms/VideoPlayer/VideoPlayer.vue",
   "NexxtEditorSettingsBlock": "components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue",
   "NexxtEditorAlignItems": "components/editor/molecules/EditorAlignItems/EditorAlignItems.vue",
+  "NexxtEditorColor": "components/editor/molecules/EditorColor/EditorColor.vue",
   "NexxtEditorFlexDirection": "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",

package/src/index.ts

@@ -25,6 +25,15 @@ export type {
   EditorGapMessages,
   EditorGapValue,
 } from './components/editor/molecules/EditorGap/EditorGap.vue'
+export type {
+  EditorColorMessages,
+  EditorColorProperty,
+  EditorColorValue,
+} from './components/editor/molecules/EditorColor/EditorColor.vue'
+export type {
+  EditorHeadingTypeMessages,
+  EditorHeadingTypeValue,
+} from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export type {
   EditorRadiusMessages,
   EditorRadiusValue,
@@ -58,6 +67,7 @@ export { default as NexxtDatePicker } from './components/organisms/DatePicker/Da
 export { default as NexxtDoughnutChart } from './components/molecules/DoughnutChart/DoughnutChart.vue'
 export { default as NexxtDropdownButton } from './components/organisms/DropdownButton/DropdownButton.vue'
 export { default as NexxtEditorAlignItems } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue'
+export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue'
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue'
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'