apostrophe 3.62.0 → 3.63.0

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

@@ -161,6 +161,14 @@ export default {
         return {};
       }
     },
+    // not used, but we need to keep it here to avoid
+    // an attribute [object Object]
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     docId: {
       type: String,
       required: false,

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

@@ -42,13 +42,6 @@ export default {
       active: false
     };
   },
-  watch: {
-    hasSelection(newVal, oldVal) {
-      if (!newVal) {
-        this.close();
-      }
-    }
-  },
   computed: {
     attributes() {
       return this.editor.getAttributes('image');
@@ -71,6 +64,13 @@ export default {
       return text !== '' || type?.name === 'image';
     }
   },
+  watch: {
+    hasSelection(newVal, oldVal) {
+      if (!newVal) {
+        this.close();
+      }
+    }
+  },
   methods: {
     click() {
       if (this.hasSelection) {

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

@@ -28,6 +28,7 @@ module.exports = {
     self.fieldsById = {};
     self.arrayManagers = {};
     self.objectManagers = {};
+    self.fieldMetadataComponents = [];
 
     self.enableBrowserData();
 
@@ -1127,6 +1128,13 @@ module.exports = {
         return self.fieldTypes[typeName];
       },
 
+      addFieldMetadataComponent(namespace, component) {
+        self.fieldMetadataComponents.push({
+          name: component,
+          namespace
+        });
+      },
+
       // Given a schema and a query, add query builders to the query
       // for each of the fields in the schema, based on their field type,
       // if supported by the field type. If the field already has a
@@ -1762,6 +1770,7 @@ module.exports = {
         }
         browserOptions.action = self.action;
         browserOptions.components = { fields: fields };
+        browserOptions.fieldMetadataComponents = self.fieldMetadataComponents;
         return browserOptions;
       }
     };

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

@@ -192,6 +192,9 @@ module.exports = (self) => {
             query.and(criteria);
           }
         },
+        launder: function (s) {
+          return self.apos.launder.string(s);
+        },
         choices: async function () {
           return self.sortedDistinct(field.name, query);
         }

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

@@ -70,6 +70,7 @@
                     :following-values="followingValues()"
                     :conditional-fields="conditionalFields"
                     :value="currentDoc"
+                    :meta="currentDocMeta"
                     :server-errors="currentDocServerErrors"
                     ref="schema"
                     :doc-id="docId"

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

@@ -4,6 +4,8 @@
     :error="effectiveError" :uid="uid"
     :display-options="displayOptions"
     :modifiers="[...modifiers, 'full-width']"
+    :items="next.items"
+    :meta="areaMeta"
   >
     <template #body>
       <!-- data-apos-schema-area lets all the child areas know that this area is in a schema (which is in a modal)
@@ -18,6 +20,7 @@
           :is="editorComponent"
           :options="field.options"
           :items="next.items"
+          :meta="areaMeta"
           :choices="choices"
           :id="next._id"
           :field-id="field._id"

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

@@ -8,6 +8,7 @@
     :modifiers="[
       ...field.style === 'table' ? ['full-width'] : []
     ]"
+    :meta="arrayMeta"
   >
     <template #additional>
       <AposMinMaxCount
@@ -61,6 +62,7 @@
           >
             <AposSchema
               v-model="item.schemaInput"
+              :meta="arrayMeta[item._id]?.aposMeta"
               v-for="(item, index) in items"
               class="apos-input-array-inline-item"
               :class="item.open && !alwaysExpand ? 'apos-input-array-inline-item--active' : null"
@@ -114,9 +116,9 @@
                 >
                   <AposButton
                     label="apostrophe:removeItem"
-                    icon="trash-can-outline-icon"
+                    icon="close-icon"
                     type="subtle"
-                    :modifiers="['inline', 'danger', 'no-motion']"
+                    :modifiers="['inline','no-motion']"
                     :icon-only="true"
                     @click="remove(item._id)"
                   />
@@ -171,12 +173,6 @@ export default {
     }
   }
   ::v-deep .apos-input-relationship {
-    .apos-button__wrapper {
-      display: none;
-    }
-    .apos-input {
-      width: auto;
-    }
     .apos-slat__main {
       min-width: 130px;
     }

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

@@ -6,12 +6,14 @@
     :error="null"
     :uid="uid"
     :display-options="displayOptions"
+    :meta="objectMeta"
   >
     <template #body>
       <div class="apos-input-object">
         <div class="apos-input-wrapper">
           <AposSchema
             v-model="schemaInput"
+            :meta="currentDocMeta"
             ref="schema"
             :schema="schema"
             :trigger-validation="triggerValidation"

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

@@ -3,6 +3,7 @@
     :modifiers="modifiers" :field="field"
     :error="effectiveError" :uid="uid"
     :display-options="displayOptions"
+    :meta="fieldMeta"
   >
     <template #body>
       <div :class="wrapperClasses">

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

@@ -3,6 +3,7 @@
     :modifiers="modifiers" :field="field"
     :error="effectiveError" :uid="uid"
     :display-options="displayOptions"
+    :meta="fieldMeta"
   >
     <template #body>
       <div class="apos-input-wrapper">

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

@@ -9,37 +9,64 @@
     <component :is="wrapEl" :class="classList">
       <div class="apos-field__info">
         <component
-          v-if="field.label" :class="{'apos-sr-only': field.hideLabel }"
+          v-if="field.label"
           class="apos-field__label"
-          :is="labelEl" :for="uid"
+          :class="{'apos-sr-only': field.hideLabel }"
+          :is="labelEl"
+          :for="uid"
+          :data-apos-test-name="field.name"
+          :data-apos-test-label="field.label"
+          data-apos-test="field-label"
         >
-          {{ $t(label) }}
-          <span v-if="field.required" class="apos-field__required">
-            *
-          </span>
-          <AposLabel
-            class="apos-field__tag"
-            v-if="field.tag"
-            :label="field.tag.value || field.tag"
-            :modifiers="[ `apos-is-${field.tag.type || 'success'}`, 'apos-is-filled' ]"
-          />
-          <span
-            v-if="(field.help || field.htmlHelp) && displayOptions.helpTooltip"
-            class="apos-field__help-tooltip"
-          >
-            <AposIndicator
-              icon="help-circle-icon"
-              class="apos-field__help-tooltip__icon"
-              :tooltip="field.help || field.htmlHelp"
-              :icon-size="11"
-              icon-color="var(--a-base-4)"
+          <span class="apos-field_label-info">
+            {{ $t(label) }}
+            <span v-if="field.required" class="apos-field__required">
+              *
+            </span>
+            <AposLabel
+              class="apos-field__tag"
+              v-if="field.tag"
+              :label="field.tag.value || field.tag"
+              :modifiers="[ `apos-is-${field.tag.type || 'success'}`, 'apos-is-filled' ]"
+              data-apos-test="field-tag"
             />
+            <span
+              v-if="(field.help || field.htmlHelp) && displayOptions.helpTooltip"
+              data-apos-test="field-help-tooltip"
+              class="apos-field__help-tooltip"
+            >
+              <AposIndicator
+                icon="help-circle-icon"
+                class="apos-field__help-tooltip__icon"
+                :tooltip="field.help || field.htmlHelp"
+                :icon-size="11"
+                icon-color="var(--a-base-4)"
+              />
+            </span>
+            <span
+              v-if="displayOptions.changed" class="apos-field__changed"
+              data-apos-test="field-changed"
+            >
+              <AposLabel
+                label="apostrophe:changed" class="apos-field__changed__label"
+                :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
+                tooltip="apostrophe:fieldHasUnpublishedChanges"
+              />
+            </span>
           </span>
-          <span v-if="displayOptions.changed" class="apos-field__changed">
-            <AposLabel
-              label="apostrophe:changed" class="apos-field__changed__label"
-              :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
-              tooltip="apostrophe:fieldHasUnpublishedChanges"
+          <span data-apos-test="field-meta-wrapper" class="apos-field__label-meta">
+            <component
+              v-for="component in metaComponents"
+              :key="component.name"
+              :is="component.name"
+              :field="field"
+              :items="items"
+              :namespace="component.namespace"
+              :meta="component.data"
+              :meta-raw="meta"
+              :data-apos-test-component="component.name"
+              :data-apos-test-namespace="component.namespace"
+              data-apos-test="field-meta"
             />
           </span>
         </component>
@@ -53,7 +80,10 @@
         <slot name="additional" />
       </div>
       <slot name="body" />
-      <div v-if="errorMessage" class="apos-field__error">
+      <div
+        v-if="errorMessage" class="apos-field__error"
+        data-apos-test="field-error"
+      >
         {{ $t(errorMessage) }}
       </div>
     </component>
@@ -93,10 +123,25 @@ export default {
 
 .apos-field__label {
   @include type-label;
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  gap: $spacing-double;
   margin: 0 0 $spacing-base;
   padding: 0;
   color: var(--a-text-primary);
+
+  &-info {
+    display: block;
+  }
+
+  &-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: $spacing-half;
+    justify-content: flex-end;
+  }
 }
 
 .apos-field__help {

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

@@ -42,6 +42,7 @@
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
         :field="fields[field.name].field"
+        :meta="meta"
         :modifiers="fields[field.name].modifiers"
         :display-options="getDisplayOptions(field.name)"
         :trigger-validation="triggerValidation"

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

@@ -50,7 +50,7 @@ export default {
 
 <style lang="scss" scoped>
 .apos-search {
-  z-index: $z-index-default;
+  z-index: calc(#{$z-index-widget-focused-controls} + 1);
   position: absolute;
   overflow: auto;
   width: 100%;

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

@@ -16,6 +16,10 @@ export default {
       required: true,
       type: Array
     },
+    meta: {
+      type: Object,
+      default: () => ({})
+    },
     field: {
       required: true,
       type: Object
@@ -133,6 +137,9 @@ export default {
         }
       });
       return serverErrors;
+    },
+    currentDocMeta() {
+      return this.meta[this.currentId]?.aposMeta || {};
     }
   },
   async mounted() {

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

@@ -43,10 +43,22 @@ export default {
       for (const [ name, options ] of Object.entries(widgets)) {
         result.push({
           name,
-          label: options.addLabel || apos.modules[`${name}-widget`].label
+          label: options.addLabel || apos.modules[`${name}-widget`].label,
+          icon: apos.modules[`${name}-widget`].icon
         });
       }
       return result;
+    },
+    areaMeta() {
+      const meta = this.convertMetaToItems(this.next.items);
+      // Get meta for the area itself
+      if (this.meta?.[`@${this.next._id}`]) {
+        return {
+          ...meta,
+          ...this.meta[`@${this.next._id}`]
+        };
+      }
+      return meta;
     }
   },
   methods: {

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

@@ -78,6 +78,9 @@ export default {
         return false;
       }
       return error;
+    },
+    arrayMeta() {
+      return this.convertMetaToItems(this.items);
     }
   },
   watch: {
@@ -187,7 +190,8 @@ export default {
         items: this.next,
         serverError: this.serverError,
         docId: this.docId,
-        parentFollowingValues: this.followingValues
+        parentFollowingValues: this.followingValues,
+        meta: this.arrayMeta
       });
       if (result) {
         this.next = result;

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

@@ -1,4 +1,5 @@
 
+import { klona } from 'klona';
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin.js';
 import AposInputFollowingMixin from 'Modules/@apostrophecms/schema/mixins/AposInputFollowingMixin.js';
 import AposInputConditionalFieldsMixin from 'Modules/@apostrophecms/schema/mixins/AposInputConditionalFieldsMixin.js';
@@ -46,6 +47,26 @@ export default {
     },
     values() {
       return this.schemaInput.data || {};
+    },
+    objectMeta() {
+      const meta = klona(this.fieldMeta);
+      const shared = {};
+
+      for (const fieldName of Object.keys(this.meta)) {
+        if (fieldName.startsWith('@')) {
+          shared[fieldName] = this.meta[fieldName];
+        }
+      }
+
+      meta.aposMeta = {
+        ...(this.fieldMeta.aposMeta || {}),
+        ...shared
+      };
+
+      return meta;
+    },
+    currentDocMeta() {
+      return this.objectMeta.aposMeta || {};
     }
   },
   watch: {

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

@@ -14,6 +14,12 @@ export default {
       type: Object,
       required: true
     },
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     error: {
       type: [ String, Boolean, Object ],
       default: null
@@ -107,6 +113,35 @@ export default {
       } else {
         return false;
       }
+    },
+    // Meta components receive the original data (key `_original`) and
+    // the "pure" keys (no namespace prefix) and values from their namespace.
+    // The `_original` key is useful for analyzing e.g. `area`, `array`, etc fields
+    // inside the metadata components.
+    // All registered metadata components will be rendered. It's the external
+    // component responsibility to not render itself when no matching conditions
+    // from its namespace are met.
+    metaComponents() {
+      const meta = {};
+      for (const metaKey of Object.keys(this.meta)) {
+        const [ ns, key ] = metaKey.split(':', 2);
+        if (!key) {
+          continue;
+        }
+        if (!meta[ns]) {
+          meta[ns] = {};
+        }
+        meta[ns][key] = this.meta[metaKey];
+      }
+
+      return apos.schema.fieldMetadataComponents
+        .map(component => {
+          return {
+            name: component.name,
+            namespace: component.namespace,
+            data: meta[component.namespace] || {}
+          };
+        });
     }
   },
   mounted: function () {

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

@@ -8,6 +8,12 @@ export default {
       type: Object,
       required: true
     },
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     generation: {
       type: Number,
       required: false,

package/modules/@apostrophecms/schema/ui/apos/mixins/AposInputMixin.js

@@ -1,3 +1,5 @@
+import { klona } from 'klona';
+
 export default {
   // Implements v-model pattern
   emits: [ 'input' ],
@@ -12,6 +14,12 @@ export default {
       type: Object,
       required: true
     },
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     modifiers: {
       default: function () {
         return [];
@@ -88,6 +96,9 @@ export default {
     },
     effectiveError () {
       return this.error || this.serverError;
+    },
+    fieldMeta() {
+      return this.meta?.[this.field.name] || {};
     }
   },
   watch: {
@@ -152,6 +163,36 @@ export default {
     // experience.
     convert() {
       return this.next;
+    },
+    // Accepts an array of object values and convertts the current meta to items
+    // so that it contains only the item _id's as keys (without leading `@`) and
+    // meta keys for the current field if any.
+    // This util is meant to be used in array and widget wrappers or
+    // custom fields that manage array of object values having unique `_id`.
+    convertMetaToItems(valueItems = []) {
+      const fieldMeta = klona(this.fieldMeta);
+      const meta = this.meta || {};
+
+      const shared = {};
+      for (const fieldName of Object.keys(meta)) {
+        if (fieldName.startsWith('@') && !valueItems.some(item => meta[`@${item._id}`])) {
+          shared[fieldName] = meta[fieldName];
+          continue;
+        }
+      }
+      for (const item of valueItems) {
+        const itemMeta = meta[`@${item._id}`] || {};
+        const subMeta = itemMeta.aposMeta;
+        fieldMeta[item._id] = {
+          ...itemMeta,
+          aposMeta: {
+            ...(subMeta || {}),
+            ...shared
+          }
+        };
+      }
+
+      return fieldMeta;
     }
   }
 };

package/modules/@apostrophecms/ui/ui/apos/mixins/AposPublishMixin.js

@@ -65,9 +65,10 @@ export default {
               // Retry now that ancestors are published
               return this.publish(doc);
             } catch (e) {
+              const errorMessage = e.name === 'forbidden' ? 'apostrophe:errorWhilePublishingParentPageForbidden' : e.message;
               await apos.alert({
                 heading: this.$t('apostrophe:errorWhilePublishing'),
-                description: e.message || this.$t('apostrophe:errorWhilePublishingParentPage'),
+                description: errorMessage || this.$t('apostrophe:errorWhilePublishingParentPage'),
                 localize: false
               });
             }
@@ -118,13 +119,18 @@ export default {
           body: {},
           draft: true
         });
+        const newDoc = {
+          ...doc,
+          submitted
+        };
         apos.notify('apostrophe:submittedForReview', {
           type: 'success',
           icon: 'list-status-icon',
           dismiss: true
         });
+
         apos.bus.$emit('content-changed', {
-          doc: submitted,
+          doc: newDoc,
           action: 'submit'
         });
         return submitted;
@@ -151,12 +157,12 @@ export default {
           dismiss: true,
           icon: 'close-circle-icon'
         });
-        doc = {
+        const newDoc = {
           ...doc,
           submitted: null
         };
         apos.bus.$emit('content-changed', {
-          doc,
+          doc: newDoc,
           action: 'dismiss-submission'
         });
       } catch (e) {

package/modules/@apostrophecms/widget-type/ui/apos/components/AposWidgetEditor.vue

@@ -18,6 +18,7 @@
               :trigger-validation="triggerValidation"
               :schema="schema"
               :value="docFields"
+              :meta="meta"
               @input="updateDocFields"
               @validate="triggerValidate"
               :following-values="followingValues()"
@@ -74,6 +75,12 @@ export default {
         return {};
       }
     },
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     focused: {
       type: Boolean,
       default: false

package/modules/@apostrophecms/widget-type/ui/apos/mixins/AposWidgetMixin.js

@@ -7,6 +7,12 @@ export default {
     type: String,
     areaFieldId: String,
     value: Object,
+    meta: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
     // Ignored for server side rendering
     areaField: Object,
     followingValues: Object,

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "apostrophe",
-  "version": "3.62.0",
+  "version": "3.63.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
     "pretest": "npm run lint",
-    "test": "nyc --reporter=html mocha -t 10000",
+    "test": "nyc --reporter=html mocha -t 10000 --ignore=test/assets.js && nyc --reporter=html mocha -t 10000 test/assets.js",
     "eslint": "eslint --ext .js,.vue .",
     "eslint-fix": "npm run eslint -- --fix",
     "i18n": "node scripts/lint-i18n",

package/test/areas.js

@@ -1,8 +1,8 @@
 const t = require('../test-lib/test.js');
 const assert = require('assert');
-let apos;
 
 describe('Areas', function() {
+  let apos;
 
   this.timeout(t.timeout);