apostrophe 3.63.1 → 4.0.0

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

@@ -28,7 +28,7 @@ export default {
       }
     },
     classes () {
-      return [ 'apos-input', `apos-input--${this.type}`, this.value.duplicate && 'apos-input--error' ];
+      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/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 }) {

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

@@ -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/ui/ui/apos/components/AposButton.vue

@@ -6,8 +6,9 @@
     :data-apos-test="actionTestLabel"
   >
     <component
+      v-bind="attrs"
       :is="href ? 'a' : 'button'"
-      v-on="href ? {} : {click: click}"
+      :id="attrs.id ? attrs.id : id"
       :href="href.length ? href : false"
       class="apos-button"
       :class="modifierClass"
@@ -15,12 +16,11 @@
       :disabled="isDisabled"
       :type="buttonType"
       :role="role"
-      :id="attrs.id ? attrs.id : id"
       :style="{color: textColor}"
-      v-bind="attrs"
+      v-on="href ? {} : {click: click}"
     >
       <transition name="fade">
-        <AposSpinner :color="spinnerColor" v-if="busy" />
+        <AposSpinner v-if="busy" :color="spinnerColor" />
       </transition>
       <span
         v-if="colorStyle"

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

@@ -52,7 +52,7 @@ export default {
     display: inline-flex;
   }
 
-  .apos-button-group ::v-deep .apos-button {
+  .apos-button-group :deep(.apos-button) {
     background-color: var(--a-background-primary);
     border: none;
     &:hover {
@@ -81,13 +81,13 @@ export default {
   // group-specific style overrides
 
   // transform weirds this out
-  .apos-button-group ::v-deep .apos-button:hover,
-  .apos-button-group ::v-deep .apos-button:focus {
+  .apos-button-group :deep(.apos-button:hover,)
+  .apos-button-group :deep(.apos-button:focus) {
     transform: none;
   }
 
   // border throws off bounding shell
-  .apos-button-group ::v-deep .apos-button:focus {
+  .apos-button-group :deep(.apos-button:focus) {
     border: none;
   }
 
@@ -97,7 +97,7 @@ export default {
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
     }
-    & ::v-deep .apos-button {
+    &:deep(.apos-button) {
       border: none;
       background-color: var(--a-background-inverted);
       color: var(--a-text-inverted);
@@ -116,7 +116,7 @@ export default {
       border: 1px solid var(--a-primary-dark-10);
       color: var(--a-primary-dark-10);
     }
-    & ::v-deep .apos-button {
+    &:deep(.apos-button) {
       background-color: var(--a-background-primary);
       color: var(--a-primary-dark-10);
       &:hover {