Color field: disable spectrum, merge pickerOptions, refactor

CHANGELOG.md

@@ -2,23 +2,27 @@
 
 ## UNRELEASED
 
-### Adds
-
-* When validating an `area` field, warn the developer if `widgets` is not nested in `options`.
-
 ### Fixes
 
 * Focus properly Widget Editor modals when opened. Keep the previous active focus on the modal when closing the widget editor.
 * a11y improvements for context menus.
 * Fixes broken widget preview URL when the image is overridden (module improve) and external build module is registered.
+* Fixes ability to change color hue by clicking the color hue bar rather than dragging the indicator
+* Prevents the rich text control bar from closing while using certain UI within the color picker
 * Inject dynamic custom bundle CSS when using external build module with no CSS entry point.
 
 ### Adds
 
+* When validating an `area` field, warn the developer if `widgets` is not nested in `options`.
+* Ability to disable the color spectrum UI of a color picker
 * Adds support for supplying CSS variable names to a color field's `presetColors` array as selectable values.
 * Adds support for dynamic focus trap in Context menus (prop `dynamicFocus`). When set to `true`, the focusable elements are recalculated on each cycle step.
 * Adds option to disable `tabindex` on `AposToggle` component. A new prop `disableFocus` can be set to `false` to disable the focus on the toggle button. It's enabled by default.
 
+### Changes
+
+* The `pickerOptions` sub property of a color field's configuration has been merged with it's parent `options` object.
+
 ## 4.10.0 (2024-11-20)
 
 ### Fixes

modules/@apostrophecms/color-field/index.js

@@ -10,6 +10,17 @@ module.exports = {
     self.name = self.options.name;
     self.addFieldType();
     self.enableBrowserData();
+    self.defaultOptions = {
+      format: 'hex8',
+      disableAlpha: false,
+      disableFields: false,
+      disableSpectrum: false,
+      presetColors: [
+        '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
+        '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
+        '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
+      ]
+    };
   },
   methods(self) {
     return {
@@ -36,7 +47,8 @@ module.exports = {
       getBrowserData(req) {
         return {
           name: self.name,
-          action: self.action
+          action: self.action,
+          defaultOptions: self.defaultOptions
         };
       }
     };

modules/@apostrophecms/color-field/ui/apos/components/AposColor.vue

@@ -3,14 +3,22 @@
     role="application"
     aria-label="Color picker"
     class="apos-color"
-    :class="[disableAlpha ? 'apos-color--disable-alpha' : '']"
+    :class="[
+      disableAlpha ? 'apos-color--disable-alpha' : null,
+      disableSpectrum ? 'apos-color--disable-spectrum' : null,
+      disableFields ? 'apos-color--disable-fields' : null,
+      !presetColors ? 'apos-color--disable-presets' : null
+    ]"
   >
-    <div class="apos-color__saturation-wrap">
+    <div v-if="!disableSpectrum" class="apos-color__saturation-wrap">
       <Saturation :value="colors" @change="childChange" />
     </div>
-    <div class="apos-color__controls">
+    <div
+      v-if="!(disableSpectrum && disableAlpha)"
+      class="apos-color__controls"
+    >
       <div class="apos-color__sliders">
-        <div class="apos-color__hue-wrap">
+        <div v-if="!disableSpectrum" class="apos-color__hue-wrap">
           <Hue :value="colors" @change="childChange" />
         </div>
         <div v-if="!disableAlpha" class="apos-color__alpha-wrap">
@@ -68,6 +76,7 @@
       </div>
     </div>
     <div
+      v-if="presetColors"
       class="apos-color__presets"
       role="group"
       aria-label="A color preset, pick one to set as current color"
@@ -103,12 +112,7 @@ import hue from '../lib/AposColorHue.vue';
 import alpha from '../lib/AposColorAlpha.vue';
 import checkboard from '../lib/AposColorCheckerboard.vue';
 
-const presetColors = [
-  '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
-  '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
-  '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF',
-  'rgba(0,0,0,0)'
-];
+const defaultOptions = { ...apos.modules['@apostrophecms/color-field'].defaultOptions };
 
 export default {
   name: 'AposColor',
@@ -121,22 +125,57 @@ export default {
   },
   mixins: [ colorMixin ],
   props: {
-    presetColors: {
-      type: Array,
+    options: {
+      type: Object,
       default() {
-        return presetColors;
+        return defaultOptions;
       }
-    },
-    disableAlpha: {
-      type: Boolean,
-      default: false
-    },
-    disableFields: {
-      type: Boolean,
-      default: false
     }
   },
   computed: {
+    defaultOptions() {
+      return defaultOptions;
+    },
+    finalOptions() {
+      let final = { ...this.options };
+
+      // Handle BC `pickerOptions` sub object.
+      // Modern API wins out over BC conflicts
+      if (final.pickerOptions) {
+        final = {
+          ...final.pickerOptions,
+          ...final
+        };
+        delete final.pickerOptions;
+      }
+
+      // Normalize disabling presetColors
+      if (
+        Array.isArray(final.presetColors) &&
+        final.presetColors.length === 0
+      ) {
+        final.presetColors = false;
+      }
+
+      // If `true`, let defaults through
+      if (final.presetColors === true) {
+        delete final.presetColors;
+      }
+
+      return Object.assign({ ...this.defaultOptions }, final);
+    },
+    presetColors() {
+      return this.finalOptions.presetColors;
+    },
+    disableAlpha() {
+      return this.finalOptions.disableAlpha;
+    },
+    disableSpectrum() {
+      return this.finalOptions.disableSpectrum;
+    },
+    disableFields() {
+      return this.finalOptions.disableFields;
+    },
     hex() {
       let hex;
       if (this.colors.a < 1) {
@@ -201,6 +240,12 @@ export default {
   box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 8px 16px rgb(0 0 0 / 15%);
 }
 
+.apos-color--disable-alpha.apos-color--disable-spectrum.apos-color--disable-fields {
+  .apos-color__presets {
+    border-top: none;
+  }
+}
+
 .apos-color__saturation-wrap {
   position: relative;
   overflow: hidden;

modules/@apostrophecms/color-field/ui/apos/components/AposInputColor.vue

@@ -18,7 +18,7 @@
             @close="close"
           >
             <AposColor
-              v-bind="pickerOptions"
+              :options="options"
               :model-value="pickerValue"
               @update:model-value="update"
             />

modules/@apostrophecms/color-field/ui/apos/lib/AposColorHue.vue

@@ -2,7 +2,7 @@
   <div class="apos-color__hue" :class="[directionClass]">
     <div
       ref="container"
-      class="vc-hue-container"
+      class="apos-color__hue-container"
       role="slider"
       :aria-valuenow="colors.hsl.h"
       aria-valuemin="0"

modules/@apostrophecms/color-field/ui/apos/logic/AposInputColor.js

@@ -12,24 +12,16 @@ export default {
   data() {
     return {
       active: false,
-      tinyColorObj: null,
-      startsNull: false,
-      defaultFormat: 'hex8',
-      defaultPickerOptions: {
-        presetColors: [
-          '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
-          '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
-          '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
-        ],
-        disableAlpha: false,
-        disableFields: false
-      }
+      tinyColorObj: null
     };
   },
   computed: {
-    // Color picker doesn't allow null or undefined values
     pickerValue() {
-      return this.next || '';
+      return this.next || this.defaultValue;
+    },
+    // Color picker doesn't allow null or undefined values
+    defaultValue() {
+      return this.field.def || '';
     },
     buttonOptions() {
       return {
@@ -38,16 +30,9 @@ export default {
         color: this.modelValue.data || ''
       };
     },
-    format() {
-      return this.field.options && this.field.options.format
-        ? this.field.options.format
-        : this.defaultFormat;
+    options() {
+      return this.field?.options || {};
     },
-    pickerOptions() {
-      const fieldOptions = this.field.options?.pickerOptions || {};
-      return Object.assign(this.defaultPickerOptions, fieldOptions);
-    },
-
     valueLabel() {
       if (this.next) {
         return this.next;
@@ -75,12 +60,7 @@ export default {
       this.active = false;
     },
     update(value) {
-      this.tinyColorObj = new TinyColor(value.hsl);
-      if (value._cssVariable) {
-        this.next = value._cssVariable;
-      } else {
-        this.next = this.tinyColorObj.toString(this.format);
-      }
+      this.next = value;
     },
     validate(value) {
       if (this.field.required) {

modules/@apostrophecms/color-field/ui/apos/mixins/AposColorMixin.js

@@ -82,8 +82,15 @@ export default {
         return this.val;
       },
       set(newVal) {
+        let stringVal;
+        if (newVal._cssVariable) {
+          stringVal = newVal._cssVariable;
+        } else {
+          const colorObj = tinycolor(newVal.hsl);
+          stringVal = colorObj.toString(this.finalOptions.format);
+        }
         this.val = newVal;
-        this.$emit('update:modelValue', newVal);
+        this.$emit('update:modelValue', stringVal);
       }
     }
   },