apostrophe 4.11.2 → 4.12.0

package/CHANGELOG.md

@@ -1,10 +1,39 @@
 # Changelog
 
+## 4.12.0 (2025-01-27)
+
+### Fixes
+
+* 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.
+* Saving a document via the dialog box properly refreshes the main content area when on a "show page" (when the context document is a piece rather than a page)
+* Fixes the `AposButtonSplit` markup to follow the HTML5 specification, optimizes the component performance, visuals and testability.
+* Fixes a case where releationship button overlaps a context menu.
+
+### Adds
+
+* Ability to disable the color spectrum UI of a color picker
+* Accessibility improvement for the rich text editor Typography toolbar item.
+* Adds `moduleLabels` prop to `AposDocContextMenu` to pass it to opened modals from custom operations (used by templates to define labels to display on the export modal).
+
+### Changes
+
+* Range style updates.
+* The `pickerOptions` sub property of a color field's configuration has been merged with it's parent `options` object.
+* Reworks `inline` and `micro` UI of some fields (color, range, select). Improve global inline style.
+* Makes the range input being a number all the time instead of a string that we convert manually.
+* Command line tasks can run before the first frontend asset build without error messages.
+
 ## 4.11.2 (2024-12-29)
 
 ### Fixes
 
 * Fixes a bug where images in Media manager are not selectable (click on an image does nothing) in both default and relationship mode.
+* Eliminated superfluous error messages. The convert method now waits for all recursive invocations to complete before attempting to determine if fields are visible.
+
+### Adds
+
+* Possibility to set a field not ready when performing async operations, when a field isn't ready, the validation and emit won't occur. 
 
 ## 4.11.1 (2024-12-18)
 
@@ -22,7 +51,6 @@
 * 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.
 * Adds support for event on `addContextOperation`, an option `type` can now be passed and can be `modal` (default) or `event`, in this case it does not try to open a modal but emit a bus event using the action as name.
 
-
 ### Fixes
 
 * Focus properly Widget Editor modals when opened. Keep the previous active focus on the modal when closing the widget editor.

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -518,7 +518,7 @@ export default {
         }
       }
 
-      // Check that refresh hasn't been disbled for this page type
+      // Check that refresh hasn't been disabled for this page type
       const contextOptions = this.context
         ? apos.modules[this.context.type]
         : { contentChangedRefresh: true };

package/modules/@apostrophecms/asset/index.js

@@ -248,6 +248,7 @@ module.exports = {
         usage: 'Build Apostrophe frontend CSS and JS bundles',
         afterModuleInit: true,
         async task(argv = {}) {
+          self.inBuildTask = true;
           if (self.hasBuildModule()) {
             return self.build(argv);
           }
@@ -645,9 +646,14 @@ module.exports = {
         const buildOptions = self.getBuildOptions();
         const entrypoints = await self.getBuildModule().entrypoints(buildOptions);
 
+        // Command line tasks other than the asset build task do not display a warning
+        // if there is no manifest from a previous build attempt as they do not depend
+        // on the manifest to succeed
+        const silent = self.apos.isTask() && !self.inBuildTask;
         const {
           manifest = [], devServerUrl, hmrTypes
-        } = await self.loadSavedBuildManifest();
+        } = await self.loadSavedBuildManifest(silent);
+
         self.currentBuildManifest.devServerUrl = devServerUrl;
         self.currentBuildManifest.hmrTypes = hmrTypes ?? [];
 

package/modules/@apostrophecms/asset/lib/globalIcons.js

@@ -61,8 +61,8 @@ module.exports = {
   'format-list-numbered-icon': 'FormatListNumbered',
   'format-quote-close-icon': 'FormatQuoteClose',
   'format-strikethrough-variant-icon': 'FormatStrikethroughVariant',
-  'format-superscript-icon': 'FormatSuperscript',
   'format-subscript-icon': 'FormatSubscript',
+  'format-superscript-icon': 'FormatSuperscript',
   'format-text-icon': 'FormatText',
   'format-underline-icon': 'FormatUnderline',
   'help-circle-icon': 'HelpCircle',
@@ -122,5 +122,6 @@ module.exports = {
   'unfold-more-horizontal-icon': 'UnfoldMoreHorizontal',
   'video-icon': 'Video',
   'view-column-icon': 'ViewColumn',
+  'water-off-icon': 'WaterOff',
   'web-icon': 'Web'
 };

package/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
         };
       }
     };

package/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;

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

@@ -8,6 +8,13 @@
   >
     <template #body>
       <div class="apos-input-color">
+        <AposColorInfo
+          v-if="isInline"
+          class="apos-input-color__info apos-input-color__info--inline"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
         <div class="apos-input-color__ui">
           <AposContextMenu
             :button="buttonOptions"
@@ -18,23 +25,19 @@
             @close="close"
           >
             <AposColor
-              v-bind="pickerOptions"
+              :options="options"
               :model-value="pickerValue"
               @update:model-value="update"
             />
           </AposContextMenu>
         </div>
-        <div class="apos-input-color__info" data-apos-test="colorInfo">
-          {{ valueLabel }}
-          <AposButton
-            v-if="next"
-            type="quiet"
-            label="apostrophe:clear"
-            class="apos-input-color__clear"
-            :modifiers="['no-motion']"
-            @click="clear"
-          />
-        </div>
+        <AposColorInfo
+          v-if="!isInline"
+          class="apos-input-color__info"
+          :value="next"
+          :is-micro="isMicro"
+          @clear="clear"
+        />
       </div>
     </template>
   </AposInputWrapper>
@@ -42,8 +45,13 @@
 
 <script>
 import AposInputColorLogic from '../logic/AposInputColor';
+import AposColorInfo from '../lib/AposColorInfo.vue';
+
 export default {
   name: 'AposInputColor',
+  components: {
+    AposColorInfo
+  },
   mixins: [ AposInputColorLogic ]
 };
 </script>
@@ -54,16 +62,13 @@ export default {
     align-items: center;
   }
 
-  .apos-input-color__clear {
-    margin-left: 10px;
-  }
-
   .apos-input-color__info {
-    @include type-base;
+    margin-left: 15px;
 
-    & {
-      margin-left: 15px;
-      color: var(--a-text-primary);
+    &--inline {
+      margin-right: 5px;
+      margin-left: 0;
     }
   }
+
 </style>

package/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"

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="apos-color-info" data-apos-test="colorInfo">
+    <span v-if="!isMicro">
+      {{ label }}
+    </span>
+    <AposButton
+      v-if="!isMicro && value"
+      type="quiet"
+      :label="'apostrophe:clear'"
+      class="apos-color-info__clear-btn"
+      :modifiers="['no-motion']"
+      @click="emit('clear')"
+    />
+    <AposIndicator
+      v-else-if="value"
+      class="apos-color-info__clear-icon"
+      icon="water-off-icon"
+      @click="emit('clear')"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: null
+  },
+  isMicro: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const label = computed(() => props.value || 'None Selected');
+const emit = defineEmits([ 'clear' ]);
+</script>
+
+<style lang="scss">
+  .apos-color-info {
+    @include type-base;
+
+    & {
+      color: var(--a-text-primary);
+    }
+  }
+
+  .apos-color-info__clear-btn {
+    margin-left: 10px;
+  }
+
+  .apos-color-info__clear-icon {
+    cursor: pointer;
+    color: var(--a-base-2);
+
+    &:hover {
+      color: var(--a-primary);
+    }
+  }
+</style>

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

@@ -12,24 +12,22 @@ 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
+    isMicro() {
+      return this.modifiers.includes('micro');
+    },
+    isInline() {
+      return this.modifiers.includes('inline');
+    },
     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,22 +36,8 @@ export default {
         color: this.modelValue.data || ''
       };
     },
-    format() {
-      return this.field.options && this.field.options.format
-        ? this.field.options.format
-        : this.defaultFormat;
-    },
-    pickerOptions() {
-      const fieldOptions = this.field.options?.pickerOptions || {};
-      return Object.assign(this.defaultPickerOptions, fieldOptions);
-    },
-
-    valueLabel() {
-      if (this.next) {
-        return this.next;
-      } else {
-        return 'None Selected';
-      }
+    options() {
+      return this.field?.options || {};
     },
     classList() {
       return [
@@ -75,12 +59,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) {

package/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);
       }
     }
   },

package/modules/@apostrophecms/doc-type/ui/apos/logic/AposDocContextMenu.js

@@ -87,6 +87,10 @@ export default {
     localeSwitched: {
       type: Boolean,
       default: false
+    },
+    moduleLabels: {
+      type: Object,
+      default: null
     }
   },
   emits: [ 'menu-open', 'menu-close', 'close' ],
@@ -207,7 +211,8 @@ export default {
 
         ifProps = ifProps || {};
         moduleIf = moduleIf || {};
-        const canSeeOperation = checkIfConditions(this.doc, ifProps) && checkIfConditions(this.moduleOptions, moduleIf);
+        const canSeeOperation = checkIfConditions(this.doc, ifProps) &&
+            checkIfConditions(this.moduleOptions, moduleIf);
 
         if (!canSeeOperation) {
           return false;
@@ -219,9 +224,8 @@ export default {
     moduleName() {
       if (apos.modules[this.context.type].action === apos.modules['@apostrophecms/page'].action) {
         return '@apostrophecms/page';
-      } else {
-        return this.context.type;
       }
+      return this.context.type;
     },
     moduleOptions() {
       return apos.modules[this.moduleName];
@@ -446,6 +450,7 @@ export default {
       }
       const props = {
         moduleName: operation.moduleName || this.moduleName,
+        moduleLabels: this.moduleLabels,
         // For backwards compatibility
         doc,
         ...docProps(doc),

package/modules/@apostrophecms/modal/ui/apos/components/AposDocsManagerToolbar.vue

@@ -135,7 +135,7 @@ export default {
     },
     checkedTypes: {
       type: Array,
-      default: () => []
+      default: null
     },
     checkedCount: {
       type: Number,

package/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js

@@ -118,7 +118,8 @@ export default {
       return this.moduleOptions.canCreate;
     },
     checkedTypes() {
-      return this.checkedDocs.map(doc => doc.type);
+      const types = this.checkedDocs.map(doc => doc.type);
+      return [ ...new Set(types) ];
     }
   },
   created() {

package/modules/@apostrophecms/piece-type/index.js

@@ -1151,7 +1151,7 @@ module.exports = {
         browserOptions.showArchive = self.options.showArchive;
         browserOptions.showDiscardDraft = self.options.showDiscardDraft;
         browserOptions.canDeleteDraft = self.apos.permission.can(req, 'delete', self.name, 'draft');
-
+        browserOptions.contentChangedRefresh = self.options.contentChangedRefresh !== false;
         _.defaults(browserOptions, {
           components: {}
         });