apostrophe 3.53.0 → 3.55.0

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

@@ -0,0 +1,170 @@
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+
+export default {
+  name: 'AposInputString',
+  mixins: [ AposInputMixin ],
+  emits: [ 'return' ],
+  data () {
+    return {
+      step: undefined,
+      wasPopulated: false
+    };
+  },
+  computed: {
+    tabindex () {
+      return this.field.disableFocus ? '-1' : '0';
+    },
+    type () {
+      if (this.field.type) {
+        if (this.field.type === 'float' || this.field.type === 'integer') {
+          return 'number';
+        }
+        if (this.field.type === 'string' || this.field.type === 'slug') {
+          return 'text';
+        }
+        return this.field.type;
+      } else {
+        return 'text';
+      }
+    },
+    classes () {
+      return [ 'apos-input', `apos-input--${this.type}`, this.value.duplicate && 'apos-input--error' ];
+    },
+    icon () {
+      if (this.error) {
+        return 'circle-medium-icon';
+      } else if (this.field.icon) {
+        return this.field.icon;
+      } else {
+        return null;
+      }
+    }
+  },
+  watch: {
+    followingValues: {
+      // We may be following multiple fields, like firstName and lastName,
+      // or none at all, depending
+      deep: true,
+      handler(newValue, oldValue) {
+        // Follow the value of the other field(s), but only if our
+        // previous value matched the previous value of the other field(s)
+        oldValue = Object.values(oldValue).join(' ').trim();
+        newValue = Object.values(newValue).join(' ').trim();
+        if ((!this.wasPopulated && ((this.next == null) || (!this.next.length))) || (this.next === oldValue)) {
+          this.next = newValue;
+        }
+      }
+    },
+    next() {
+      if (this.next && this.next.length) {
+        this.wasPopulated = true;
+      }
+    }
+  },
+  mounted() {
+    this.defineStep();
+    this.wasPopulated = this.next && this.next.length;
+  },
+  methods: {
+    enterEmit() {
+      if (this.field.enterSubmittable) {
+        // Include the validated results in cases where an Enter keydown should
+        // act as submitting a form.
+        this.$emit('return', {
+          data: this.next,
+          error: this.validate(this.next)
+        });
+      } else {
+        this.$emit('return');
+      }
+    },
+    validate(value) {
+      if (value == null) {
+        value = '';
+      }
+      if (typeof value === 'string' && !value.length) {
+        // Also correct for float and integer because Vue coerces
+        // number fields to either a number or the empty string
+        return this.field.required ? 'required' : false;
+      }
+
+      const minMaxFields = [
+        'integer',
+        'float',
+        'string',
+        'date',
+        'password'
+      ];
+
+      if (typeof value === 'string' && this.field.pattern) {
+        const regex = new RegExp(this.field.pattern);
+        if (!regex.test(value)) {
+          return 'invalid';
+        }
+      }
+
+      if (this.field.min && minMaxFields.includes(this.field.type)) {
+        if ((value != null) && value.length && (this.minMaxComparable(value) < this.field.min)) {
+          return 'min';
+        }
+      }
+      if (this.field.max && minMaxFields.includes(this.field.type)) {
+        if ((value != null) && value.length && (this.minMaxComparable(value) > this.field.max)) {
+          return 'max';
+        }
+      }
+      if (this.field.type === 'email' && value) {
+        // regex source: https://emailregex.com/
+        const matches = value.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
+        if (!matches) {
+          return 'invalid';
+        }
+      }
+      return false;
+    },
+    defineStep() {
+      if (this.type === 'number') {
+        this.step = this.field.type === 'float' ? 'any' : 1;
+      }
+    },
+    convert(s) {
+      if (this.field.type === 'integer') {
+        if ((s == null) || (s === '')) {
+          return s;
+        } else {
+          return parseInt(s);
+        }
+      } else if (this.field.type === 'float') {
+        if ((s == null) || (s === '')) {
+          return s;
+        } else {
+          // The native parse float converts 3.0 to 3 and makes
+          // next to become integer. In theory we don't need parseFloat
+          // as the value is natively guarded by the browser 'number' type.
+          // However we need a float value sent to the backend
+          // and we force that when focus is lost.
+          if (this.focus && `${s}`.match(/\.[0]*$/)) {
+            return s;
+          }
+          return parseFloat(s);
+        }
+      } else {
+        if (s == null) {
+          return '';
+        } else {
+          return s.toString();
+        }
+      }
+    },
+    minMaxComparable(s) {
+      const converted = this.convert(s);
+      if ([ 'integer', 'float', 'date', 'range', 'time' ].includes(this.field.type)) {
+        // Compare the actual values for these types
+        return converted;
+      } else {
+        // Compare the length for other types, like string or password or url
+        return converted.length;
+      }
+    }
+  }
+};

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

@@ -0,0 +1,118 @@
+// A component designed to be used as a scaffold for AposInputString and
+// friends, which override the `body` slot
+export default {
+  name: 'AposInputWrapper',
+  inject: {
+    originalDoc: {
+      default: () => ({
+        ref: null
+      })
+    }
+  },
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    error: {
+      type: [ String, Boolean, Object ],
+      default: null
+    },
+    uid: {
+      type: Number,
+      required: true
+    },
+    modifiers: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    items: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    displayOptions: {
+      type: Object,
+      default() {
+        return {};
+      }
+    }
+  },
+  data () {
+    return {
+      wrapEl: 'div',
+      labelEl: 'label'
+    };
+  },
+  computed: {
+    label () {
+      const { label, publishedLabel } = this.field;
+
+      if (
+        this.originalDoc.ref &&
+        this.originalDoc.ref.lastPublishedAt &&
+        publishedLabel
+      ) {
+        return publishedLabel;
+      }
+
+      return label;
+    },
+    classList: function () {
+      const classes = [
+        'apos-field',
+        `apos-field--${this.field.type}`,
+        `apos-field--${this.field.name}`
+      ];
+      if (this.field.classes) {
+        classes.push(this.field.classes);
+      }
+      if (this.errorClasses) {
+        classes.push(this.errorClasses);
+      }
+      if (this.modifiers) {
+        this.modifiers.forEach((m) => {
+          classes.push(`apos-field--${m}`);
+        });
+      }
+      return classes;
+    },
+    errorClasses: function () {
+      if (!this.error) {
+        return null;
+      }
+
+      let error = 'unknown';
+
+      if (typeof this.error === 'string') {
+        error = this.error;
+      } else if (this.error.name) {
+        error = this.error.name;
+      }
+
+      return `apos-field--error apos-field--error-${error}`;
+    },
+    errorMessage () {
+      if (this.error) {
+        if (typeof this.error === 'string') {
+          return this.error;
+        } else if (this.error.message) {
+          return this.error.message;
+        } else {
+          return 'Error';
+        }
+      } else {
+        return false;
+      }
+    }
+  },
+  mounted: function () {
+    if (this.field.type === 'radio' || this.field.type === 'checkbox') {
+      this.wrapEl = 'fieldset';
+      this.labelEl = 'legend';
+    }
+  }
+};

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

@@ -0,0 +1,281 @@
+import { detectFieldChange } from 'Modules/@apostrophecms/schema/lib/detectChange';
+
+export default {
+  name: 'AposSchema',
+  props: {
+    value: {
+      type: Object,
+      required: true
+    },
+    generation: {
+      type: Number,
+      required: false,
+      default() {
+        return null;
+      }
+    },
+    schema: {
+      type: Array,
+      required: true
+    },
+    fieldStyle: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    currentFields: {
+      type: Array,
+      default() {
+        return null;
+      }
+    },
+    followingValues: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    conditionalFields: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    modifiers: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    triggerValidation: Boolean,
+    utilityRail: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    docId: {
+      type: String,
+      default() {
+        return null;
+      }
+    },
+    serverErrors: {
+      type: Object,
+      default() {
+        return null;
+      }
+    },
+    displayOptions: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    changed: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  emits: [
+    'input',
+    'reset',
+    'validate',
+    'update-doc-data'
+  ],
+  data() {
+    return {
+      schemaReady: false,
+      next: {
+        hasErrors: false,
+        data: {},
+        fieldErrors: {}
+      },
+      fieldState: {},
+      fieldComponentMap: window.apos.schema.components.fields || {}
+    };
+  },
+  computed: {
+    fields() {
+      const fields = {};
+      this.schema.forEach(item => {
+        fields[item.name] = {};
+        fields[item.name].field = item;
+        fields[item.name].value = {
+          data: this.value[item.name]
+        };
+        fields[item.name].serverError = this.serverErrors && this.serverErrors[item.name];
+        fields[item.name].modifiers = [
+          ...(this.modifiers || []),
+          ...(item.modifiers || [])
+        ];
+      });
+      return fields;
+    }
+  },
+  watch: {
+    fieldState: {
+      deep: true,
+      handler() {
+        this.updateNextAndEmit();
+      }
+    },
+    schema() {
+      this.populateDocData();
+    },
+    'value.data._id'(_id) {
+      // The doc might be swapped out completely in cases such as the media
+      // library editor. Repopulate the fields if that happens.
+      if (
+        // If the fieldState had been cleared and there's new populated data
+        (!this.fieldState._id && _id) ||
+        // or if there *is* active fieldState, but the new data is a new doc
+        (this.fieldState._id && _id !== this.fieldState._id.data)
+      ) {
+        // repopulate the schema.
+        this.populateDocData();
+      }
+    },
+    generation() {
+      // repopulate the schema.
+      this.populateDocData();
+    },
+    conditionalFields(newVal, oldVal) {
+      for (const field in oldVal) {
+        if (!this.fieldState[field] || (newVal[field] === oldVal[field]) || !this.fieldState[field].ranValidation) {
+          continue;
+        }
+
+        if (
+          (newVal[field] === false) ||
+          (newVal[field] && this.fieldState[field].ranValidation)
+        ) {
+          this.$emit('validate');
+        }
+      }
+    }
+  },
+  created() {
+    this.populateDocData();
+  },
+  methods: {
+    getDisplayOptions(fieldName) {
+      let options = {};
+      if (this.displayOptions) {
+        options = { ...this.displayOptions };
+      }
+      if (this.changed && this.changed.includes(fieldName)) {
+        options.changed = true;
+      }
+      return options;
+    },
+    populateDocData() {
+      this.schemaReady = false;
+      const next = {
+        hasErrors: false,
+        data: {}
+      };
+
+      const fieldState = {};
+
+      // Though not in the schema, keep track of the _id field.
+      if (this.value.data._id) {
+        next.data._id = this.value.data._id;
+        fieldState._id = { data: this.value.data._id };
+      }
+      // Though not *always* in the schema, keep track of the archived status.
+      if (this.value.data.archived !== undefined) {
+        next.data.archived = this.value.data.archived;
+        fieldState.archived = { data: this.value.data.archived };
+      }
+
+      this.schema.forEach(field => {
+        const value = this.value.data[field.name];
+        fieldState[field.name] = {
+          error: false,
+          data: (value === undefined) ? field.def : value
+        };
+        next.data[field.name] = fieldState[field.name].data;
+      });
+      this.next = next;
+      this.fieldState = fieldState;
+
+      // Wait until the next tick so the parent editor component is done
+      // updating. This is only really a concern in editors that can swap
+      // the active doc/object without unmounting AposSchema.
+      this.$nextTick(() => {
+        this.schemaReady = true;
+        // Signal that the schema data is ready to be tracked.
+        this.$emit('reset');
+      });
+    },
+    updateNextAndEmit() {
+      if (!this.schemaReady) {
+        return;
+      }
+      const oldHasErrors = this.next.hasErrors;
+      // destructure these for non-linked comparison
+      const oldFieldState = { ...this.next.fieldState };
+      const newFieldState = { ...this.fieldState };
+
+      let changeFound = false;
+
+      this.next.hasErrors = false;
+      this.next.fieldState = { ...this.fieldState };
+
+      this.schema.filter(field => this.displayComponent(field)).forEach(field => {
+        if (this.fieldState[field.name].error) {
+          this.next.hasErrors = true;
+        }
+        if (
+          this.fieldState[field.name].data !== undefined &&
+          detectFieldChange(field, this.next.data[field.name], this.fieldState[field.name].data)
+        ) {
+          changeFound = true;
+          this.next.data[field.name] = this.fieldState[field.name].data;
+        } else {
+          this.next.data[field.name] = this.value.data[field.name];
+        }
+      });
+      if (
+        oldHasErrors !== this.next.hasErrors ||
+        oldFieldState !== newFieldState
+      ) {
+        // Otherwise the save button may never unlock
+        changeFound = true;
+      }
+
+      if (changeFound) {
+        // ... removes need for deep watch at parent level
+        this.$emit('input', { ...this.next });
+      }
+    },
+    displayComponent({ name, hidden = false }) {
+      if (hidden === true) {
+        return false;
+      }
+
+      if (this.currentFields && !this.currentFields.includes(name)) {
+        return false;
+      }
+
+      // Might not be a conditional field at all, so test explicitly for false
+      if (this.conditionalFields[name] === false) {
+        return false;
+      }
+
+      return true;
+    },
+    scrollFieldIntoView(fieldName) {
+      // The refs for a name are an array if that ref was assigned
+      // in a v-for. We know there is only one in this case
+      // https://forum.vuejs.org/t/this-refs-theid-returns-an-array/31995/9
+      this.$refs[fieldName][0].$el.scrollIntoView();
+    },
+    onUpdateDocData(data) {
+      this.$emit('update-doc-data', data);
+    }
+  }
+};

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

@@ -0,0 +1,85 @@
+export default {
+  name: 'AposSearchList',
+  props: {
+    list: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    customFields: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    selectedItems: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    disabledTooltip: {
+      type: String,
+      default: null
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    help: {
+      type: [ String, Object ],
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: 'text-box-icon'
+    },
+    iconSize: {
+      type: Number,
+      default: 20
+    },
+    fields: {
+      type: Array,
+      default() {
+        return [ 'slug' ];
+      }
+    }
+  },
+  emits: [ 'select' ],
+  methods: {
+    select(item, $event) {
+      if (item.disabled) {
+        $event.stopPropagation();
+        return;
+      }
+      const selectedItems = this.selectedItems;
+      if (!selectedItems.some(selectedItem => selectedItem._id === item._id)) {
+        // Never modify a prop
+        this.$emit('select', [ ...selectedItems, item ]);
+      }
+    },
+    getClasses(item) {
+      const classes = {
+        'apos-search__item': true
+      };
+      if (item.disabled) {
+        classes['apos-search__item--disabled'] = true;
+      }
+      item.classes && Array.isArray(item.classes) && item.classes.forEach(suffix => {
+        classes[`apos-search__item--${suffix}`] = true;
+      });
+
+      return classes;
+    },
+    getTooltip(item) {
+      return item.disabled && item.tooltip !== false ? this.disabledTooltip : null;
+    },
+    getIcon(item) {
+      return {
+        icon: item.icon ?? this.icon,
+        iconSize: item.iconSize || this.iconSize
+      };
+    }
+  }
+};

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

@@ -698,7 +698,7 @@ module.exports = {
             // Make the query available to templates for easy access to
             // filter settings etc.
             query: req.query,
-            url: unrefreshed(req.url)
+            url: unrefreshed(req.prefix + req.url)
           };
 
           _.extend(args, data);

package/modules/@apostrophecms/ui/ui/apos/components/AposTreeHeader.vue

@@ -96,8 +96,8 @@ export default {
         }
 
         // Set the column width to the spacer width plus 15 for extra wiggle
-        // room.
-        colWidths[col.property] = ref.clientWidth + 15;
+        // room. Add additional width if specified.
+        colWidths[col.property] = ref.clientWidth + 15 + (col.extraWidth ?? 0);
       });
       this.$emit('calculated', colWidths);
     },