apostrophe 3.63.3 → 4.1.0

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

@@ -106,7 +106,7 @@ export default {
     },
     // Return next at mount or when generation changes
     getNext() {
-      return this.value?.data ? this.value.data : (this.field.def || {});
+      return this.modelValue?.data ? this.modelValue.data : (this.field.def || {});
     }
   }
 };

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

@@ -1,6 +1,6 @@
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
 import AposInputChoicesMixin from 'Modules/@apostrophecms/schema/mixins/AposInputChoicesMixin';
-import InformationIcon from 'vue-material-design-icons/Information.vue';
+import InformationIcon from '@apostrophecms/vue-material-design-icons/Information.vue';
 
 export default {
   name: 'AposInputRadio',

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

@@ -6,8 +6,8 @@ export default {
   mixins: [ AposInputMixin ],
   emits: [ 'input' ],
   data () {
-    const next = (this.value && Array.isArray(this.value.data))
-      ? klona(this.value.data) : (klona(this.field.def) || []);
+    const next = (this.modelValue && Array.isArray(this.modelValue.data))
+      ? klona(this.modelValue.data) : (klona(this.field.def) || []);
 
     // Remember relationship subfield values even if a document
     // is temporarily deselected, easing the user's pain if they
@@ -99,7 +99,7 @@ export default {
       return widgetOptions.minSize || [];
     },
     duplicate () {
-      return this.value.duplicate ? 'apos-input--error' : null;
+      return this.modelValue?.duplicate ? 'apos-input--error' : null;
     }
   },
   watch: {
@@ -209,9 +209,9 @@ export default {
       }, 200);
     },
     watchValue () {
-      this.error = this.value.error;
+      this.error = this.modelValue.error;
       // Ensure the internal state is an array.
-      this.next = Array.isArray(this.value.data) ? this.value.data : [];
+      this.next = Array.isArray(this.modelValue.data) ? this.modelValue.data : [];
     },
     async choose () {
       const result = await apos.modal.execute(this.chooserComponent, {
@@ -231,14 +231,17 @@ export default {
         schema: this.field.schema,
         item,
         title: item.title,
-        value: item._fields
+        'model-value': item._fields
       });
 
       if (result) {
         const index = this.next.findIndex(_item => _item._id === item._id);
-        this.$set(this.next, index, {
-          ...this.next[index],
-          _fields: result
+
+        this.next = this.next.map((item, i) => {
+          return i === index ? {
+            ...item,
+            _fields: result
+          } : item;
         });
       }
     },

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

@@ -12,13 +12,13 @@ export default {
   },
   data() {
     return {
-      next: (this.value.data == null) ? null : this.value.data,
+      next: (this.modelValue.data == null) ? null : this.modelValue.data,
       choices: []
     };
   },
   computed: {
-    classes () {
-      return [ this.value.duplicate && 'apos-input--error' ];
+    classes() {
+      return [ this.modelValue?.duplicate && 'apos-input--error' ];
     }
   },
   methods: {

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

@@ -27,8 +27,8 @@ export default {
         return 'text';
       }
     },
-    classes () {
-      return [ 'apos-input', `apos-input--${this.type}`, this.value.duplicate && 'apos-input--error' ];
+    classes() {
+      return [ 'apos-input', `apos-input--${this.type}`, this.modelValue?.duplicate && 'apos-input--error' ];
     },
     icon () {
       if (this.error) {
@@ -78,11 +78,9 @@ export default {
         this.$emit('return');
       }
     },
-    validate(value) {
-      if (value == null) {
-        value = '';
-      }
-      if (typeof value === 'string' && !value.length) {
+    validate(value = '') {
+      const isString = typeof value === 'string';
+      if (isString && !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;
@@ -104,12 +102,12 @@ export default {
       }
 
       if (this.field.min && minMaxFields.includes(this.field.type)) {
-        if ((value != null) && value.length && (this.minMaxComparable(value) < this.field.min)) {
+        if ((!isString || 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)) {
+        if ((!isString || value.length) && (this.minMaxComparable(value) > this.field.max)) {
           return 'max';
         }
       }

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

@@ -135,11 +135,11 @@ export default {
       }
 
       return apos.schema.fieldMetadataComponents
-        .map(component => {
+        .map(({ name, namespace }) => {
           return {
-            name: component.name,
-            namespace: component.namespace,
-            data: meta[component.namespace] || {}
+            name,
+            namespace: namespace,
+            data: meta[namespace] || {}
           };
         });
     }

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

@@ -4,7 +4,7 @@ import { getConditionTypesObject } from '../lib/conditionalFields';
 export default {
   name: 'AposSchema',
   props: {
-    value: {
+    modelValue: {
       type: Object,
       required: true
     },
@@ -87,7 +87,7 @@ export default {
     }
   },
   emits: [
-    'input',
+    'update:model-value',
     'reset',
     'validate',
     'update-doc-data'
@@ -120,7 +120,7 @@ export default {
               required
             },
             value: {
-              data: this.value[item.name]
+              data: this.modelValue[item.name]
             },
             serverError: this.serverErrors && this.serverErrors[item.name],
             modifiers: [
@@ -130,6 +130,32 @@ export default {
           }
         };
       }, {});
+    },
+    hasCompareMeta() {
+      return this.schema.some(field => this.meta[field.name]?.['@apostrophecms/schema:compare']);
+    },
+    classes() {
+      const classes = [];
+      if (this.hasCompareMeta) {
+        classes.push('apos-schema--compare');
+      }
+
+      return classes;
+    },
+    compareMetaState() {
+      if (!this.hasCompareMeta) {
+        return {};
+      }
+
+      const compareMetaState = {};
+      this.schema.forEach(field => {
+        compareMetaState[field.name] = {
+          error: false,
+          data: this.meta[field.name]?.['@apostrophecms/schema:compare']
+        };
+      });
+
+      return compareMetaState;
     }
   },
   watch: {
@@ -142,7 +168,7 @@ export default {
     schema() {
       this.populateDocData();
     },
-    'value.data._id'(_id) {
+    'modelValue.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 (
@@ -207,18 +233,18 @@ export default {
       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 };
+      if (this.modelValue.data._id) {
+        next.data._id = this.modelValue.data._id;
+        fieldState._id = { data: this.modelValue.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 };
+      if (this.modelValue.data.archived !== undefined) {
+        next.data.archived = this.modelValue.data.archived;
+        fieldState.archived = { data: this.modelValue.data.archived };
       }
 
       this.schema.forEach(field => {
-        const value = this.value.data[field.name];
+        const value = this.modelValue.data[field.name];
         fieldState[field.name] = {
           error: false,
           data: (value === undefined) ? field.def : value
@@ -262,7 +288,7 @@ export default {
           changeFound = true;
           this.next.data[field.name] = this.fieldState[field.name].data;
         } else {
-          this.next.data[field.name] = this.value.data[field.name];
+          this.next.data[field.name] = this.modelValue.data[field.name];
         }
       });
       if (
@@ -275,7 +301,7 @@ export default {
 
       if (changeFound) {
         // ... removes need for deep watch at parent level
-        this.$emit('input', { ...this.next });
+        this.$emit('update:model-value', { ...this.next });
       }
     },
     displayComponent({ name, hidden = false }) {
@@ -302,6 +328,9 @@ export default {
     },
     onUpdateDocData(data) {
       this.$emit('update-doc-data', data);
+    },
+    highlight(fieldName) {
+      return this.meta[fieldName]?.['@apostrophecms/schema:highlight'];
     }
   }
 };

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

@@ -93,7 +93,7 @@ export default {
     this.evaluateConditions();
     this.docFields.data = klona(this.values);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.scrollTimeout);
   },
   methods: {

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

@@ -2,11 +2,11 @@ import { klona } from 'klona';
 
 export default {
   // Implements v-model pattern
-  emits: [ 'input' ],
+  emits: [ 'update:modelValue' ],
   props: {
     // The value passed in from the parent component through the v-model
     // directive.
-    value: {
+    modelValue: {
       type: Object,
       required: true
     },
@@ -59,7 +59,7 @@ export default {
   },
   data () {
     return {
-      next: (this.value && this.value.data !== undefined) ? this.value.data : '',
+      next: (this.modelValue && this.modelValue.data !== undefined) ? this.modelValue.data : '',
       error: false,
       // This is just meant to be sufficient to prevent unintended collisions
       // in the UI between id attributes
@@ -72,7 +72,7 @@ export default {
     this.$el.addEventListener('focusin', this.focusInListener);
     this.$el.addEventListener('focusout', this.focusOutListener);
   },
-  destroyed () {
+  unmounted () {
     this.$el.removeEventListener('focusin', this.focusInListener);
     this.$el.removeEventListener('focusout', this.focusOutListener);
   },
@@ -102,7 +102,7 @@ export default {
     }
   },
   watch: {
-    value: {
+    modelValue: {
       deep: true,
       handler (value) {
         this.watchValue();
@@ -134,15 +134,15 @@ export default {
       // If the field is conditional and isn't shown, disregard any errors.
       const error = this.conditionMet === false ? false : this.validate(this.next);
 
-      this.$emit('input', {
+      this.$emit('update:modelValue', {
         data: error ? this.next : this.convert(this.next),
         error,
-        ranValidation: this.conditionMet === false ? this.value.ranValidation : true
+        ranValidation: this.conditionMet === false ? this.modelValue.ranValidation : true
       });
     },
     watchValue () {
-      this.error = this.value.error;
-      this.next = this.value.data;
+      this.error = this.modelValue.error;
+      this.next = this.modelValue.data;
     },
     watchNext () {
       this.validateAndEmit();

package/modules/@apostrophecms/schema/ui/apos/scss/AposInputArray.scss

@@ -0,0 +1,205 @@
+.apos-schema {
+  padding-top: $spacing-base;
+  padding-bottom: $spacing-base;
+}
+
+:deep(.apos-field--array.apos-field--error-duplicate) {
+  .apos-input {
+    border-color: var(--a-base-8);
+  }
+  .apos-input:focus {
+    box-shadow: 0 0 3px var(--a-base-8);
+  }
+  .apos-input-icon {
+    color: var(--a-base-2);
+  }
+  .apos-input--error {
+    border-color: var(--a-danger);
+  }
+}
+:deep(.apos-input-relationship) {
+  .apos-slat__main {
+    min-width: 130px;
+  }
+}
+.apos-is-dragging {
+  opacity: 0.5;
+  background: var(--a-base-4);
+}
+.apos-input-array-inline-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: $spacing-base;
+  padding: $spacing-triple 0;
+  border: 1px solid var(--a-base-9);
+  color: var(--a-base-8);
+}
+.apos-input-array-inline-empty-label {
+  @include type-label;
+  color: var(--a-base-3);
+}
+
+.apos-input-array-inline-table {
+  @include type-label;
+  position: relative;
+  left: -35px;
+  min-width: calc(100% + 35px);
+  width: max-content;
+  margin: 0 0 $spacing-base;
+  border-collapse: collapse;
+
+  th {
+    padding-left: $spacing-base;
+    padding-right: $spacing-base;
+    height: 40px;
+    border: 1px solid var(--a-base-9);
+    text-align: left;
+    background-color: var(--a-base-10);
+  }
+  .apos-table-cell--hidden {
+    padding-left: 5px;
+    border: none;
+    cursor: pointer;
+    background-color: transparent;
+  }
+
+  td, :deep(td) {
+    padding: $spacing-base;
+    border: 1px solid var(--a-base-9);
+    vertical-align: middle;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    background-color: var(--a-background-primary);
+  }
+  td.apos-input-array-inline-item-controls {
+    width: 15px;
+    min-width: 15px;
+    border: none;
+    background-color: transparent;
+  }
+  tr.apos-is-dragging, :deep(tr.apos-is-dragging) {
+    td, &:hover td {
+      background: var(--a-base-4);
+    }
+  }
+  tr:hover, :deep(tr:hover) {
+    td {
+      background-color: var(--a-base-10);
+    }
+    td.apos-input-array-inline-item-controls {
+      background-color: transparent;
+    }
+  }
+
+  :deep(.apos-field__info) {
+    padding-top: 0;
+  }
+  :deep(.apos-field__label) {
+    display: none;
+  }
+  :deep(.apos-input-wrapper) {
+    padding: 0 4px;
+  }
+  :deep(.apos-input--select) {
+    min-width: 130px;
+  }
+  :deep(.apos-input--relationship) {
+    width: 100%;
+    min-width: 150px;
+  }
+  :deep(.apos-schema .apos-field.apos-field--small),
+  :deep(.apos-schema .apos-field.apos-field--micro),
+  :deep(.apos-schema .apos-field.apos-field--margin-micro) {
+    margin-bottom: 0;
+  }
+  :deep(.apos-search) {
+    z-index: calc(#{$z-index-widget-focused-controls} + 1);
+    position: absolute;
+    top: 35px;
+    width: 100%;
+    min-width: 350px;
+  }
+  :deep(.apos-slat-list .apos-slat),
+  :deep(.apos-input-relationship__items) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  :deep(.apos-input-relationship__input-wrapper :disabled) {
+    display: none;
+  }
+  :deep(.apos-field__error) {
+    position: absolute;
+    bottom: 13px;
+    left: $spacing-base;
+  }
+  :deep(.apos-field--relationship .apos-field__error) {
+    z-index: calc(#{$z-index-widget-focused-controls} + 1);
+  }
+}
+
+.apos-input-array-inline-standard {
+  .apos-input-array-inline-collapse {
+    position: absolute;
+    top: $spacing-quadruple;
+    left: $spacing-base;
+  }
+
+  :deep(.apos-schema) {
+    position: relative;
+    display: grid;
+    grid-template-columns: 35px auto 35px;
+    gap: 5px;
+    width: 100%;
+    padding-bottom: $spacing-base;
+    border-bottom: 1px solid var(--a-base-9);
+    transition: background-color 0.3s ease;
+    &:hover {
+      background-color: var(--a-base-10);
+    }
+    .apos-field.apos-field--small,
+    .apos-field.apos-field--micro,
+    .apos-field.apos-field--margin-micro {
+      margin-bottom: 0;
+    }
+    & > div {
+      grid-column: 2;
+    }
+    &.apos-input-array-inline-item--active {
+      background-color: var(--a-base-10);
+      border-bottom: 1px solid var(--a-base-6);
+    }
+    &.apos-input-array-inline-item--active > div {
+      display: block;
+    }
+    .apos-input-array-inline-label,
+    .apos-input-array-inline-item-controls,
+    .apos-input-array-inline-item-controls--remove {
+      display: block;
+    }
+
+    .apos-input-array-inline-label {
+      transition: background-color 0.3s ease;
+      @include type-label;
+      margin: 0;
+      padding-top: $spacing-base;
+      padding-bottom: $spacing-base;
+      text-align: left;
+      grid-column: 2;
+    }
+    .apos-input-array-inline-label:hover {
+      cursor: pointer;
+    }
+
+    .apos-input-array-inline-item-controls {
+      padding: $spacing-base;
+      grid-column: 1;
+      grid-row: 1;
+    }
+    .apos-input-array-inline-item-controls--remove {
+      grid-column: 3;
+      grid-row: 1;
+    }
+  }
+}

package/modules/@apostrophecms/settings/ui/apos/components/AposSettingsManager.vue

@@ -45,8 +45,8 @@
           <div
             v-for="(group, name) in groups"
             v-show="name === activeGroup"
-            class="apos-settings__subform-group"
             :key="name"
+            class="apos-settings__subform-group"
             data-apos-test="subformGroup"
             :data-apos-test-name="name"
             :data-apos-test-label="$t(group.label)"
@@ -94,7 +94,7 @@ export default {
 .apos-settings {
   @include type-base;
 
-  ::v-deep .apos-modal__inner {
+  :deep(.apos-modal__inner) {
     // 1/2 or 2/3 width
     // $width: calc(100vw / 2);
     $width: min(700px, calc(calc(100vw / 3) * 2));
@@ -109,16 +109,16 @@ export default {
     height: calc(100vh - #{$vertical-spacing * 2});
   }
 
-  ::v-deep .apos-modal__main--with-left-rail {
+  :deep(.apos-modal__main--with-left-rail) {
     grid-template-columns: 25% 75%;
   }
 
-  ::v-deep .apos-modal__body-inner {
+  :deep(.apos-modal__body-inner) {
     // padding: $spacing-triple $spacing-triple $spacing-double;
     padding: $spacing-double $spacing-triple;
   }
 
-  ::v-deep .apos-modal__header__main {
+  :deep(.apos-modal__header__main) {
     // padding: $spacing-triple $spacing-triple $spacing-double;
     padding: $spacing-double $spacing-triple;
   }

package/modules/@apostrophecms/settings/ui/apos/logic/AposSettingsManager.js

@@ -77,7 +77,7 @@ export default {
       }
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     clearTimeout(this.restoreRefTimeout);
     Object.values(this.subformUpdateTimeouts)
       .forEach(clearTimeout);
@@ -90,7 +90,7 @@ export default {
       this.expanded = event.value ? event.name : null;
       if (this.expanded) {
         clearTimeout(this.subformUpdateTimeouts[event.name]);
-        this.$delete(this.subformUpdateTimeouts, event.name);
+        delete this.setSubformValues[event.name];
       }
     },
     async submit(event) {
@@ -125,9 +125,9 @@ export default {
     },
     setUpdatedTimeout(name, ms = 3000) {
       const updateTimeout = setTimeout(() => {
-        this.$delete(this.subformUpdateTimeouts, name);
+        delete this.subformUpdateTimeouts[name];
       }, ms);
-      this.$set(this.subformUpdateTimeouts, name, updateTimeout);
+      this.subformUpdateTimeouts[name] = updateTimeout;
     },
     async loadData() {
       const result = await apos.http.get(this.action, {

package/modules/@apostrophecms/submitted-draft/ui/apos/components/AposSubmittedDraftIcon.vue

@@ -1,11 +1,12 @@
 <template>
   <AposButton
     icon="tray-full-icon"
-    type="subtle" :modifiers="['small', 'no-motion']"
-    @click="open"
+    type="subtle"
+    :modifiers="['small', 'no-motion']"
     :disabled="count <= 0"
     :tooltip="tooltip"
     :icon-only="true"
+    @click="open"
   >
     <template #label>
       <span v-if="canPublish && count > 0" class="apos-submitted-drafts__counter">
@@ -37,7 +38,7 @@ export default {
   mounted() {
     this.updateCount();
   },
-  destroyed() {
+  unmounted() {
     if (this.timeout) {
       clearTimeout(this.timeout);
     }
@@ -69,7 +70,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  ::v-deep .apos-submitted-drafts__counter {
+  :deep(.apos-submitted-drafts__counter) {
     display: inline-flex;
     margin-left: $spacing-half;
     padding: 3px;

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

@@ -265,7 +265,9 @@ module.exports = {
               lng: req.locale
             });
           },
+          body: {},
           data: {},
+          headers: {},
           protocol: 'http',
           get: function (propName) {
             return { Host: 'you-need-to-set-baseUrl-in-app-js.com' }[propName];