apostrophe 4.3.3 → 4.4.0

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

@@ -6,6 +6,7 @@
     :uid="uid"
     :display-options="displayOptions"
     :meta="fieldMeta"
+    @replace-field-value="replaceFieldValue"
   >
     <template #body>
       <div :class="wrapperClasses">
@@ -52,12 +53,15 @@ export default {
 <style lang="scss" scoped>
   .apos-input-wrapper--with-prefix {
     @include apos-input();
+
     display: flex;
     align-items: center;
     color: var(--a-base-4);
+
     .apos-input {
-      border: none;
       padding-left: 0;
+      border: none;
+
       &:hover,
       &:focus {
         border: none;
@@ -65,10 +69,12 @@ export default {
       }
     }
   }
+
   .apos-input__slug-locale-prefix {
     display: inline-block;
     padding-left: 20px;
   }
+
   .apos-field--inverted .apos-input-wrapper--with-prefix {
     background-color: var(--a-background-primary);
   }

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

@@ -6,6 +6,7 @@
     :uid="uid"
     :display-options="displayOptions"
     :meta="fieldMeta"
+    @replace-field-value="replaceFieldValue"
   >
     <template #body>
       <div class="apos-input-wrapper">
@@ -13,7 +14,7 @@
           v-if="field.textarea && field.type === 'string'"
           :id="uid"
           v-model="next"
-          rows="5"
+          :rows="rows"
           :class="classes"
           :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
@@ -63,6 +64,7 @@ export default {
     height: 46px;
     padding-right: 40px;
   }
+
   .apos-input--date {
     &::-webkit-clear-button {
       position: relative;

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

@@ -12,7 +12,10 @@
           :is="labelEl"
           v-if="field.label"
           class="apos-field__label"
-          :class="{'apos-sr-only': field.hideLabel }"
+          :class="{
+            'apos-sr-only': field.hideLabel,
+            'apos-field__label--meta-left': field.meta && field.meta.position === 'left',
+          }"
           :for="uid"
           :data-apos-test-name="field.name"
           :data-apos-test-label="field.label"
@@ -69,6 +72,7 @@
               :data-apos-test-component="name"
               :data-apos-test-namespace="namespace"
               data-apos-test="field-meta"
+              @replace-field-value="replaceFieldValue"
             />
           </span>
         </component>
@@ -115,6 +119,7 @@ export default {
 .apos-field {
   border-width: 0;
   padding: 0;
+
   [disable]:hover, [disabled] ~ .apos-choice-label-text:hover {
     cursor: not-allowed;
   }
@@ -126,14 +131,28 @@ export default {
 
 .apos-field__label {
   @include type-label;
+
   display: flex;
+  flex-wrap: nowrap;
   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);
+  gap: $spacing-double;
+
+  &.apos-field__label--meta-left {
+    justify-content: flex-start;
+    gap: $spacing-base;
+
+    .apos-field__label-meta {
+      order: 1;
+    }
+
+    .apos-field_label-info {
+      order: 2;
+    }
+  }
 
   &-info {
     display: block;
@@ -148,8 +167,9 @@ export default {
 }
 
 .apos-field__help {
-  margin: 0 0 $spacing-base;
   @include type-base;
+
+  margin: 0 0 $spacing-base;
   line-height: var(--a-line-tall);
   color: var(--a-base-3);
 }
@@ -160,12 +180,13 @@ export default {
 
 .apos-field__changed {
   position: relative;
-  margin-left: $spacing-half;
   top: -2px;
+  margin-left: $spacing-half;
 }
 
 .apos-field__error {
   @include type-help;
+
   margin: $spacing-base 0;
   color: var(--a-danger);
 }
@@ -186,30 +207,39 @@ export default {
 .apos-field--inline {
   display: flex;
   align-items: center;
+
   .apos-field__label {
     margin-bottom: 0;
   }
+
   .apos-field__info,
   .apos-input-wrapper {
     width: 48%;
   }
+
   .apos-field__info {
     margin-right: 4%;
   }
+
   &.apos-field--range {
     display: block;
+
     .apos-range__input {
       margin: 5px 0 0;
     }
+
     .apos-range__scale {
       margin-top: 0;
     }
+
     .apos-range__value {
       padding-top: 9px;
     }
+
     .apos-field__info {
       margin: 0 0 5px;
     }
+
     .apos-field__info,
     .apos-input-wrapper {
       width: 100%;

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

@@ -107,11 +107,13 @@ export default {
 
   .apos-schema :deep(.apos-field) {
     margin-bottom: $spacing-quadruple;
+
     &.apos-field--small,
     &.apos-field--micro,
     &.apos-field--margin-micro {
       margin-bottom: $spacing-double;
     }
+
     &.apos-field--margin-none {
       margin-bottom: 0;
     }
@@ -129,15 +131,16 @@ export default {
     }
 
     & > .apos-field__wrapper {
-      flex-grow: 1;
       flex-basis: 50%;
-      border-right: 1px solid var(--a-base-9);
+      flex-grow: 1;
       padding-right: 20px;
+      border-right: 1px solid var(--a-base-9);
     }
+
     & > .apos-field__wrapper + .apos-field__wrapper {
-      border-right: none;
       padding-right: 0;
       padding-left: 20px;
+      border-right: none;
     }
 
     & .apos-field__label {

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

@@ -7,11 +7,12 @@
       :class="getClasses(item)"
       @click="select(item, $event)"
     >
-      <img
+      <div
         v-if="item?.attachment?._urls?.['one-sixth']"
-        :src="item.attachment._urls['one-sixth']"
         class="apos-search-image"
       >
+        <img :src="item.attachment._urls['one-sixth']">
+      </div>
       <AposIndicator
         v-else-if="getIcon(item).icon"
         :icon="getIcon(item).icon"
@@ -53,18 +54,18 @@ export default {
   z-index: calc(#{$z-index-widget-focused-controls} + 1);
   position: absolute;
   overflow: auto;
+  box-sizing: border-box;
   width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--a-base-8);
+  background: var(--a-background-primary);
   list-style: none;
   box-shadow: var(--a-box-shadow);
-  box-sizing: border-box;
   min-width: 320px;
   max-height: 300px;
-  margin: 0;
-  padding: 0;
   border-bottom-left-radius: var(--a-border-radius);
   border-bottom-right-radius: var(--a-border-radius);
-  border: 1px solid var(--a-base-8);
-  background: var(--a-background-primary);
 
   &:empty {
     display: none;
@@ -76,9 +77,11 @@ export default {
   border: none;
   background-color: var(--a-background-primary);
   cursor: auto;
+
   .apos-search__item__title {
     color: $input-color-disabled;
   }
+
   .apos-search__item__field {
     color: $input-color-disabled;
   }
@@ -87,9 +90,11 @@ export default {
 @mixin suggestion {
   padding-top: 14px;
   background-color: var(--a-background-inverted);
+
   .apos-search__item__title {
     color: var(--a-text-inverted);
   }
+
   .apos-search__item__field {
     color: var(--a-base-8);
   }
@@ -99,9 +104,11 @@ export default {
   flex-direction: column;
   gap: 4px;
   border-top: 1px solid var(--a-base-5);
+
   .apos-search__item__title {
     color: var(--a-base-2);
   }
+
   .apos-search__item__field {
     color: var(--a-text-primary);
   }
@@ -109,14 +116,15 @@ export default {
 
 .apos-search__item {
   display: flex;
-  justify-content: flex-start;
+  box-sizing: border-box;
   align-items: center;
-  gap: 10px;
+  justify-content: flex-start;
   margin: 0;
   padding: 10px 20px;
   border-top: 1px solid var(--a-base-5);
-  box-sizing: border-box;
-  transition: background-color 0.3s ease;
+  transition: background-color 300ms ease;
+  gap: 10px;
+
   & * {
     pointer-events: none;
   }
@@ -124,12 +132,15 @@ export default {
   &:hover.apos-search__item {
     background-color: var(--a-base-10);
     cursor: pointer;
+
     &.apos-search__item--disabled {
       @include disabled;
     }
+
     &.apos-search__item--suggestion {
       @include suggestion;
     }
+
     &.apos-search__item--hint {
       @include hint;
     }
@@ -137,11 +148,13 @@ export default {
 
   &__title {
     @include type-base;
+
     color: var(--a-text-primary);
   }
 
   &__field {
     @include type-base;
+
     color: var(--a-base-2);
   }
 
@@ -158,11 +171,33 @@ export default {
   }
 
   .apos-search-image {
-    flex-basis: 0;
+    display: flex;
+    flex-basis: 32px;
     flex-grow: 0;
-    max-width: 32px;
-    max-height: 32px;
-    object-fit: cover;
+
+    & img {
+      max-width: 32px;
+      max-height: 32px;
+      object-fit: cover;
+      margin: 0 auto;
+    }
+  }
+
+  &--attachment {
+    .apos-search-image {
+      flex-basis: 50px;
+    }
+
+    .apos-search-image img {
+      max-width: 50px;
+      max-height: 50px;
+    }
+
+    .apos-search__item__title {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
   }
 }
 </style>

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

@@ -86,12 +86,9 @@ export default {
   &__preview-trigger {
     z-index: $z-index-default;
     position: absolute;
-    box-sizing: border-box;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     display: block;
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
     margin: 0;
@@ -115,9 +112,9 @@ export default {
     @include type-base;
 
     display: block;
+    padding-bottom: $spacing-double;
     color: var(--a-base-3);
     line-height: 1;
-    padding-bottom: $spacing-double;
   }
 
   &__controls {
@@ -152,11 +149,9 @@ export default {
 }
 
 .slide-fade-enter-active {
-  transition: all 0.3s ease-in;
-}
-.slide-fade-leave-active {
-  // nothing on expand: false
+  transition: all 300ms ease-in;
 }
+
 .slide-fade-enter, .slide-fade-leave-to {
   transform: translateY(-5px);
   opacity: 0;

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

@@ -37,7 +37,7 @@ export default {
       default: null
     }
   },
-  emits: [ 'modal-result', 'safe-close' ],
+  emits: [ 'modal-result' ],
   data() {
     // Automatically add `_id` to default items
     const items = this.items.map(item => ({
@@ -47,7 +47,7 @@ export default {
 
     return {
       currentId: null,
-      currentDoc: null,
+      currentDoc: { data: {} },
       modal: {
         active: false,
         type: 'overlay',
@@ -142,7 +142,7 @@ export default {
     this.modal.active = true;
     await this.evaluateExternalConditions();
     if (this.next.length) {
-      await this.select(this.next[0]._id);
+      this.setCurrentDoc(this.next.at(0)._id);
     }
     if (this.serverError && this.serverError.data && this.serverError.data.errors) {
       const first = this.serverError.data.errors[0];
@@ -155,19 +155,22 @@ export default {
     this.titleFieldChoices = await this.getTitleFieldChoices();
   },
   methods: {
+    setCurrentDoc(_id) {
+      this.currentId = _id;
+      this.currentDoc = {
+        hasErrors: false,
+        data: this.next.find(item => item._id === _id)
+      };
+      this.evaluateConditions();
+      this.triggerValidation = false;
+    },
     async select(_id) {
       if (this.currentId === _id) {
         return;
       }
       if (await this.validate(true, false)) {
         this.currentDocToCurrentItem();
-        this.currentId = _id;
-        this.currentDoc = {
-          hasErrors: false,
-          data: this.next.find(item => item._id === _id)
-        };
-        this.evaluateConditions();
-        this.triggerValidation = false;
+        this.setCurrentDoc(_id);
       }
     },
     update(items) {
@@ -176,9 +179,9 @@ export default {
       // drags fail
       this.next = items.map(item => this.next.find(_item => item._id === _item._id));
       if (this.currentId) {
-        if (!this.next.find(item => item._id === this.currentId)) {
-          this.currentId = null;
-          this.currentDoc = null;
+        if (!this.next.some(item => item._id === this.currentId)) {
+          this.currentId = this.next.at(0)?._id || null;
+          this.currentDoc = { data: this.next.at(0) || {} };
         }
       }
       this.updateMinMax();
@@ -254,7 +257,7 @@ export default {
       return false;
     },
     async validate(validateItem, validateLength) {
-      if (validateItem) {
+      if (validateItem && this.next.length > 0 && this.currentId) {
         this.triggerValidation = true;
       }
       await this.$nextTick();
@@ -355,9 +358,6 @@ export default {
         }
       }
       return choices;
-    },
-    emitSafeClose() {
-      this.$emit('safe-close');
     }
   }
 };

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

@@ -17,9 +17,12 @@ export default {
         .map(doc => [ doc._id, doc._fields ])
     );
 
+    const suggestionFields = this.field.suggestionFields || apos.modules[this.field.withType]?.relationshipSuggestionFields;
+
     return {
       searchTerm: '',
       searchList: [],
+      suggestionFields,
       next,
       subfields,
       disabled: false,

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

@@ -4,6 +4,12 @@ export default {
   name: 'AposInputString',
   mixins: [ AposInputMixin ],
   emits: [ 'return' ],
+  props: {
+    rows: {
+      type: Number,
+      default: 5
+    }
+  },
   data () {
     return {
       step: undefined,
@@ -19,6 +25,9 @@ export default {
         if (this.field.type === 'float' || this.field.type === 'integer') {
           return 'number';
         }
+        if (this.field.type === 'string' && this.field.textarea) {
+          return 'textarea';
+        }
         if (this.field.type === 'string' || this.field.type === 'slug') {
           return 'text';
         }

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

@@ -9,6 +9,7 @@ export default {
       })
     }
   },
+  emits: [ 'replace-field-value' ],
   props: {
     field: {
       type: Object,
@@ -149,5 +150,11 @@ export default {
       this.wrapEl = 'fieldset';
       this.labelEl = 'legend';
     }
+  },
+  methods: {
+    // Notify about a value, suggested by meta components or their children.
+    replaceFieldValue(value) {
+      this.$emit('replace-field-value', value);
+    }
   }
 };

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

@@ -6,7 +6,12 @@ export default {
   props: {
     modelValue: {
       type: Object,
-      required: true
+      required: true,
+      default() {
+        return {
+          data: {}
+        };
+      }
     },
     meta: {
       type: Object,
@@ -120,7 +125,7 @@ export default {
               required
             },
             value: {
-              data: this.modelValue[item.name]
+              data: this.modelValue.data[item.name]
             },
             serverError: this.serverErrors && this.serverErrors[item.name],
             modifiers: [
@@ -181,7 +186,7 @@ export default {
         this.populateDocData();
       }
     },
-    generation(generated) {
+    generation() {
       // repopulate the schema.
       this.populateDocData();
     },

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

@@ -69,6 +69,9 @@ export default {
       item.classes && Array.isArray(item.classes) && item.classes.forEach(suffix => {
         classes[`apos-search__item--${suffix}`] = true;
       });
+      if (item.attachment) {
+        classes['apos-search__item--attachment'] = true;
+      }
 
       return classes;
     },

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

@@ -145,6 +145,11 @@ export default {
         ranValidation: this.conditionMet === false ? this.modelValue.ranValidation : true
       });
     },
+    // Allows replacing the current component value externally, e.g. via
+    // local component or global bus events.
+    replaceFieldValue(value) {
+      this.next = value;
+    },
     watchValue () {
       this.error = this.modelValue.error;
       this.next = this.modelValue.data;