apostrophe 4.4.3 → 4.5.0

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposTiptapColor.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="apos-color-control">
+    <AposButton
+      type="rich-text"
+      class="apos-rich-text-editor__control"
+      :class="['apos-color-button', { 'apos-is-active': active }]"
+      :icon-only="false"
+      icon="circle-icon"
+      :icon-fill="indicatorColor"
+      :label="'apostrophe:richTextColor'"
+      :modifiers="['no-border', 'no-motion']"
+      :tooltip="{
+        content: 'apostrophe:richTextColor',
+        placement: 'top',
+        delay: 650
+      }"
+      @click="click"
+    >
+      <template #label>
+        <AposIndicator icon="chevron-down-icon" />
+      </template>
+    </AposButton>
+    <div
+      v-if="active"
+      v-click-outside-element="close"
+      class="apos-popover apos-color-control__dialog"
+      x-placement="bottom"
+      :class="{
+        'apos-is-triggered': active,
+        'apos-has-selection': hasSelection
+      }"
+    >
+      <AposContextMenuDialog menu-placement="bottom-center">
+        <div
+          v-if="editor"
+          class="text-color-component"
+          @mousedown="handleMouseDown"
+        >
+          <Picker
+            v-bind="pickerOptions"
+            :model-value="pickerValue"
+            @update:model-value="update"
+            @focus="focus"
+          />
+        </div>
+        <footer class="apos-color-control__footer">
+          <AposButton
+            type="primary"
+            label="apostrophe:close"
+            :modifiers="['small', 'margin-micro']"
+            @click="close"
+          />
+        </footer>
+      </AposContextMenuDialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  ref, watch, computed, defineComponent
+} from 'vue';
+import { Sketch as Picker } from '@ckpack/vue-color';
+import tinycolor from 'tinycolor2';
+
+export default defineComponent({
+  name: 'AposTiptapColor',
+  components: {
+    Picker
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    tool: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    editor: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const active = ref(false);
+    const next = ref('');
+    const tinyColorObj = ref(null);
+    const startsNull = ref(false);
+    const indicatorColor = ref('#000000');
+
+    const defaultOptions = {
+      presetColors: [
+        '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
+        '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
+        '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
+      ],
+      disableAlpha: false,
+      disableFields: false,
+      format: 'hex8'
+    };
+
+    const projectOptions = computed(() => {
+      return window.apos.modules['@apostrophecms/rich-text-widget'];
+    });
+
+    const areaOptions = props.options || {};
+
+    const userOptions = computed(() => {
+      return {
+        ...projectOptions.value,
+        ...areaOptions
+      };
+    });
+
+    const mergedOptions = computed(() => {
+      return {
+        ...defaultOptions,
+        ...userOptions.value.color
+      };
+    });
+
+    const pickerOptions = computed(() => {
+      const {
+        presetColors, disableAlpha, disableFields
+      } = mergedOptions.value;
+
+      return {
+        presetColors,
+        disableAlpha,
+        disableFields
+      };
+    });
+
+    const format = computed(() => {
+      return mergedOptions.value.format;
+    });
+
+    const pickerValue = ref(next.value || '');
+
+    const hasSelection = computed(() => !props.editor.state.selection.empty);
+
+    watch(
+      () => props.editor.state.selection,
+      () => {
+        if (hasSelection.value) {
+          const newColor = props.editor.getAttributes('textStyle').color;
+          next.value = newColor || '#000000';
+          indicatorColor.value = next.value;
+        } else {
+          next.value = '#000000';
+          indicatorColor.value = next.value;
+        }
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+
+    watch(pickerValue, (newColor) => {
+      indicatorColor.value = newColor;
+    });
+
+    const open = () => {
+      active.value = true;
+    };
+
+    const close = () => {
+      active.value = false;
+    };
+
+    const update = (value) => {
+      tinyColorObj.value = tinycolor(value.hsl);
+      next.value = tinyColorObj.value.toString(format.value);
+      props.editor.chain().focus().setColor(next.value).run();
+      indicatorColor.value = next.value;
+    };
+
+    const click = () => {
+      active.value = !active.value;
+    };
+
+    const focus = () => {
+      // Keep focus on the toolbar to prevent it from closing
+      props.editor.view.dom.focus();
+    };
+
+    const handleMouseDown = (event) => {
+      const target = event.target;
+      if (target.closest('.vc-sketch-saturation-wrap') || target.closest('.vc-sketch-presets')) {
+        event.preventDefault();
+      } else {
+        props.editor.view.dom.focus();
+      }
+    };
+
+    return {
+      active,
+      indicatorColor,
+      pickerOptions,
+      pickerValue,
+      hasSelection,
+      startsNull,
+      open,
+      close,
+      update,
+      click,
+      focus,
+      handleMouseDown
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.apos-color-control {
+  position: relative;
+  display: inline-block;
+}
+
+.apos-color-button {
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.color-indicator {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-right: 5px;
+  border-radius: 50%;
+}
+
+.button-label {
+  margin-right: 5px;
+}
+
+.chevron-down {
+  display: inline-block;
+  padding: 3px;
+  border: solid var(--a-base-8);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.apos-color-control__dialog {
+  z-index: $z-index-modal;
+  position: absolute;
+  top: calc(100% + 15px);
+  left: 5px;
+  opacity: 0;
+  pointer-events: none;
+  width: auto;
+  max-width: 90%;
+
+  &.apos-is-triggered.apos-has-selection {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+.apos-is-active {
+  background-color: var(--a-base-7);
+}
+
+.apos-color-control__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+</style>

package/modules/@apostrophecms/rich-text-widget/ui/apos/tiptap-extensions/Color.js

@@ -0,0 +1,5 @@
+// imports the tiptap extension from node_modules
+import Color from '@tiptap/extension-color';
+export default (options) => {
+  return Color.extend({});
+};

package/modules/@apostrophecms/schema/lib/addFieldTypes.js

@@ -722,7 +722,8 @@ module.exports = (self) => {
 
         destination[field.name] = checkStringLength(destination[field.name], field.min, field.max);
       }
-    }
+    },
+    def: ''
   });
 
   self.addFieldType({
@@ -889,11 +890,12 @@ module.exports = (self) => {
       try {
         await self.convert(req, schema, data, result);
       } catch (e) {
-        for (const error of e) {
-          errors.push({
-            path: error.path,
-            error: error.error
-          });
+        if (Array.isArray(e)) {
+          for (const error of e) {
+            errors.push(error);
+          }
+        } else {
+          throw e;
         }
       }
       result.metaType = 'objectItem';
@@ -912,7 +914,7 @@ module.exports = (self) => {
       self.register(metaType, type, field.schema);
     },
     validate: function (field, options, warn, fail) {
-      for (const subField of field.schema || field.fields.add) {
+      for (const subField of field.schema) {
         self.validateField(subField, options, field);
       }
     },
@@ -1139,12 +1141,7 @@ module.exports = (self) => {
           field.schema = self.fieldsToArray(`Relationship field ${field.name}`, field.fields);
         }
       }
-      if (field.schema && !field.fieldsStorage) {
-        field.fieldsStorage = field.name.replace(/^_/, '') + 'Fields';
-      }
-      if (field.schema && !Array.isArray(field.schema)) {
-        fail('schema property should be an array if present at this stage');
-      }
+      validateSchema(field);
       if (field.filters) {
         fail('"filters" property should be changed to "builders" for 3.x');
       }
@@ -1157,6 +1154,22 @@ module.exports = (self) => {
           fail('withType property, ' + type + ', does not match the name of any piece or page type module.');
         }
       }
+
+      function validateSchema(_field) {
+        if (!_field.schema) {
+          return;
+        }
+        if (!Array.isArray(_field.schema)) {
+          fail('schema property should be an array if present at this stage');
+        }
+        self.validate(_field.schema, {
+          type: 'relationship',
+          subtype: _field.withType
+        });
+        if (!_field.fieldsStorage) {
+          _field.fieldsStorage = _field.name.replace(/^_/, '') + 'Fields';
+        }
+      }
     },
     isEqual(req, field, one, two) {
       const ids1 = one[field.idsStorage] || [];

package/modules/@apostrophecms/schema/ui/apos/components/AposInputBoolean.vue

@@ -25,7 +25,7 @@
             class="apos-boolean__icon"
             title=""
           />
-          {{ trueLabel || 'Yes' }}
+          {{ trueLabel || $t('apostrophe:yes') }}
         </label>
         <input
           :id="`${uid}-false`"
@@ -44,7 +44,7 @@
             class="apos-boolean__icon"
             title=""
           />
-          {{ falseLabel || 'No' }}
+          {{ falseLabel || $t('apostrophe:no') }}
         </label>
       </div>
     </template>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputColor.vue

@@ -12,7 +12,6 @@
           <AposContextMenu
             :button="buttonOptions"
             menu-placement="bottom-start"
-            menu-offset="5, 20"
             :disabled="field.readOnly"
             :tooltip="tooltip"
             @open="open"

package/modules/@apostrophecms/schema/ui/apos/components/AposInputObject.vue

@@ -21,6 +21,7 @@
             :doc-id="docId"
             :conditional-fields="conditionalFields"
             :following-values="followingValuesWithParent"
+            :server-errors="currentDocServerErrors"
             @update:model-value="evaluateConditions(values)"
             @validate="emitValidate()"
           />

package/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue

@@ -91,7 +91,7 @@
         class="apos-field__error"
         data-apos-test="field-error"
       >
-        {{ $t(errorMessage) }}
+        {{ getTranslatedErrorMessage(errorMessage) }}
       </div>
     </component>
     <!-- CSS Escape hatch for additional interfaces like relatipnship managers -->
@@ -103,7 +103,18 @@
 import AposInputWrapperLogic from '../logic/AposInputWrapper';
 export default {
   name: 'AposInputWrapper',
-  mixins: [ AposInputWrapperLogic ]
+  mixins: [ AposInputWrapperLogic ],
+  methods: {
+    getTranslatedErrorMessage(message) {
+      if (message === 'required') {
+        return this.$t('apostrophe:required');
+      }
+      if (message === 'invalid') {
+        return this.$t('apostrophe:invalid');
+      }
+      return this.$t(message);
+    }
+  }
 };
 </script>
 

package/modules/@apostrophecms/schema/ui/apos/logic/AposArrayEditor.js

@@ -1,6 +1,6 @@
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposEditorMixin from 'Modules/@apostrophecms/modal/mixins/AposEditorMixin';
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 import { klona } from 'klona';
 import { get } from 'lodash';
 import { detectDocChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
@@ -42,7 +42,7 @@ export default {
     // Automatically add `_id` to default items
     const items = this.items.map(item => ({
       ...item,
-      _id: item._id || cuid()
+      _id: item._id || createId()
     }));
 
     return {
@@ -144,13 +144,15 @@ export default {
     if (this.next.length) {
       this.setCurrentDoc(this.next.at(0)._id);
     }
-    if (this.serverError && this.serverError.data && this.serverError.data.errors) {
+    if (this.serverError?.data?.errors?.length) {
       const first = this.serverError.data.errors[0];
-      const [ _id, name ] = first.path.split('.');
-      await this.select(_id);
-      const aposSchema = this.$refs.schema;
-      await this.$nextTick();
-      aposSchema.scrollFieldIntoView(name);
+      const [ _id, name ] = first.path?.split('.') || [];
+      if (_id) {
+        await this.select(_id);
+        const aposSchema = this.$refs.schema;
+        await this.$nextTick();
+        name && aposSchema.scrollFieldIntoView(name);
+      }
     }
     this.titleFieldChoices = await this.getTitleFieldChoices();
   },
@@ -193,7 +195,7 @@ export default {
     async add() {
       if (await this.validate(true, false)) {
         const item = this.newInstance();
-        item._id = cuid();
+        item._id = createId();
         this.next.push(item);
         await this.select(item._id);
         this.updateMinMax();

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputArea.js

@@ -1,6 +1,6 @@
 
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 
 export default {
   name: 'AposInputArea',
@@ -43,8 +43,8 @@ export default {
       for (const [ name, options ] of Object.entries(widgets)) {
         result.push({
           name,
-          label: options.addLabel || apos.modules[`${name}-widget`].label,
-          icon: apos.modules[`${name}-widget`].icon
+          label: options.addLabel || apos.modules[`${name}-widget`]?.label,
+          icon: apos.modules[`${name}-widget`]?.icon
         });
       }
       return result;
@@ -65,7 +65,7 @@ export default {
     getEmptyValue() {
       return {
         metaType: 'area',
-        _id: cuid(),
+        _id: createId(),
         items: []
       };
     },

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputArray.js

@@ -3,7 +3,7 @@ import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposIn
 import AposInputConditionalFieldsMixin from 'Modules/@apostrophecms/schema/mixins/AposInputConditionalFieldsMixin';
 import { getConditionTypesObject } from 'Modules/@apostrophecms/schema/lib/conditionalFields';
 
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 import { klona } from 'klona';
 import { get } from 'lodash';
 import { Sortable } from 'sortablejs-vue3';
@@ -45,7 +45,7 @@ export default {
       return alwaysExpand(this.field, this.schema);
     },
     listId() {
-      return `sortableList-${cuid()}`;
+      return `sortableList-${createId()}`;
     },
     dragOptions() {
       return {
@@ -72,9 +72,9 @@ export default {
       const error = this.error || this.serverError;
       // Server-side errors behave differently
       const name = error?.name || error;
-      if (name === 'invalid') {
-        // Always due to a subproperty which will display its own error,
-        // don't confuse the user
+      if (name === 'invalid' && !this.serverError) {
+        // Not always due to a subproperty which will display its own error,
+        // don't confuse the user if so
         return false;
       }
       return error;
@@ -222,7 +222,7 @@ export default {
       delete this.itemsConditionalFields[_id];
     },
     add() {
-      const _id = cuid();
+      const _id = createId();
       this.items.push({
         _id,
         schemaInput: {
@@ -280,7 +280,7 @@ function modelItems(items, field, schema) {
   return items.map(item => {
     const open = alwaysExpand(field, schema);
     return {
-      _id: item._id || cuid(),
+      _id: item._id || createId(),
       schemaInput: {
         data: item || {}
       },

package/modules/@apostrophecms/schema/ui/apos/logic/AposInputObject.js

@@ -67,6 +67,17 @@ export default {
     },
     currentDocMeta() {
       return this.objectMeta.aposMeta || {};
+    },
+    currentDocServerErrors() {
+      let serverErrors = null;
+      (this.serverError?.data?.errors || [])
+        .forEach(error => {
+          if (error.path) {
+            serverErrors = serverErrors || {};
+            serverErrors[error.path] = error;
+          }
+        });
+      return serverErrors;
     }
   },
   watch: {