@nexxtmove/ui 2.0.0 → 2.1.0

package/package.json

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

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

@@ -83,6 +83,16 @@ export interface NexxtEditorColorProps {
    * 8-digit hex is left out. Without roles the section is not rendered.
    */
   themeRoles?: EditorColorThemeRole[]
+  /**
+   * Offer an opacity slider in the picker. A colour picked below full opacity is
+   * written as an 8-digit hex (`bg-[#1777ea80]`); a fully opaque one keeps the
+   * 6-digit form. The slider is hidden while a theme role is selected: a role
+   * class carries no opacity. Off by default, in which case a stored 8-digit hex
+   * is shown opaque and only replaced once a new colour is picked. Turning it off
+   * while a translucent colour is set does write at once: the picker drops the
+   * alpha and the model gets the opaque 6-digit hex.
+   */
+  showAlpha?: boolean
 }
 
 const DEFAULT_MESSAGES = {
@@ -94,9 +104,9 @@ const DEFAULT_MESSAGES = {
 /**
  * A literal 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.
+ * any other class this component does not own. The alpha pair is accepted on
+ * read whether or not `showAlpha` is set, so a stored `#1777EA80` survives a
+ * round trip either way.
  */
 const VALUE_PATTERN = /^(bg|text)-\[(#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?)\]$/
 
@@ -109,6 +119,12 @@ const ROLE_PATTERN = new RegExp(`^(?:bg|text)-theme-(${ROLES.join('|')})$`)
 
 /** The picker throws on a colour it cannot read, so a role's hex is checked first. */
 const ROLE_HEX_PATTERN = /^#[0-9A-Fa-f]{6}(?:[0-9A-Fa-f]{2})?$/
+
+/**
+ * The picker writes `#rrggbbaa` only below full opacity, but an alpha a hair
+ * under 1 still rounds to `ff`. That pair says nothing, so it is dropped.
+ */
+const OPAQUE_ALPHA_PATTERN = /^(#[0-9A-Fa-f]{6})[fF]{2}$/
 </script>
 
 <script lang="ts" setup>
@@ -126,6 +142,7 @@ const {
   messages,
   suggestions = [],
   themeRoles = [],
+  showAlpha = false,
 } = defineProps<NexxtEditorColorProps>()
 
 /**
@@ -181,8 +198,19 @@ const activeRole = computed(() => offeredRoles.value.find(({ role }) => role ===
  * reports nothing when it is told to pick the string it already has, so a role's
  * hex is handed over in its 8-digit form: with `show-alpha` off the picker never
  * reports an alpha pair, which makes every pick a change.
+ *
+ * A role has no opacity here, so an alpha pair in the role's own hex is replaced
+ * by `ff`. Handed over translucent, the picker would drop that alpha the moment
+ * the role turns `show-alpha` off, and write the opaque hex over the role.
+ */
+const pickerHex = (roleHex: string) => `${roleHex.slice(0, 7)}ff`
+
+/**
+ * A role class has no opacity, so the slider is only offered for a literal.
+ * Hiding it is also what keeps the trick in `pickerHex` working: without the
+ * alpha channel the picker reads the role's hex as opaque.
  */
-const pickerHex = (roleHex: string) => (roleHex.length === 7 ? `${roleHex}ff` : roleHex)
+const alphaEnabled = computed(() => showAlpha && !activeRole.value)
 
 // 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
@@ -195,7 +223,8 @@ const picked = computed({
   // 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}]`
+    const color = value.replace(OPAQUE_ALPHA_PATTERN, '$1')
+    if (isHex(color)) model.value = `${property}-[${color}]`
   },
 })
 
@@ -234,7 +263,7 @@ watch(
       full-width
       match-width
       :formats="['hex']"
-      :show-alpha="false"
+      :show-alpha="alphaEnabled"
       :placeholder="copy.placeholder"
       :suggestions="{ hex: suggestions }"
       :suggestions-label="copy.suggestionsLabel"

package/src/components/organisms/ColorPicker/ColorPicker.vue

@@ -27,6 +27,11 @@ export interface NexxtColorPickerProps {
   error?: boolean
   errorMessage?: string
   required?: boolean
+  /**
+   * Offer an opacity slider and accept colours below full opacity. Turning it
+   * off while the colour is translucent writes the opaque colour to the model
+   * at once.
+   */
   showAlpha?: boolean
   formats?: ColorFormat[]
   fullWidth?: boolean
@@ -168,11 +173,24 @@ watch(
   },
 )
 
+// A parent can swap the value in the same update that turns alpha off, and this
+// watcher may run before the one above. So the colour is read from the model,
+// which already holds the new value, not from `colorObj`, which may not.
+const currentColor = () => {
+  if (!model.value) return colorObj.value
+  try {
+    return normalizeColor(model.value)
+  } catch {
+    return colorObj.value
+  }
+}
+
 watch(
   () => props.showAlpha,
   (showAlpha) => {
-    if (!showAlpha && colorObj.value.alpha < 1) {
-      const updated = withoutAlpha(colorObj.value)
+    const current = currentColor()
+    if (!showAlpha && current.alpha < 1) {
+      const updated = withoutAlpha(current)
       colorObj.value = updated
       model.value = fmt(updated, activeFormat.value)
     }