apostrophe 3.63.3 → 4.1.0

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

@@ -1,20 +1,22 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
   >
     <template #body>
       <div class="apos-input-wrapper">
-        <div class="apos-range" v-apos-tooltip="tooltip">
+        <div v-apos-tooltip="tooltip" class="apos-range">
           <input
+            :id="uid"
+            v-model="next"
             type="range"
             :min="field.min"
             :max="field.max"
             :step="field.step"
             class="apos-range__input"
-            v-model="next"
-            :id="uid"
             :disabled="field.readOnly"
           >
           <div class="apos-range__scale">
@@ -39,7 +41,8 @@
         >
           {{ valueLabel }}
           <AposButton
-            type="quiet" label="apostrophe:clear"
+            type="quiet"
+            label="apostrophe:clear"
             class="apos-range__clear"
             :modifiers="['no-motion']"
             @click="unset"

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

@@ -1,7 +1,9 @@
 <template>
   <AposInputWrapper
-    :field="field" :error="effectiveError"
-    :uid="uid" :items="next"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
+    :items="next"
     :display-options="displayOptions"
     :modifiers="modifiers"
   >
@@ -20,7 +22,7 @@
       <AposMinMaxCount
         v-if="field.max > 1"
         :field="field"
-        :value="next"
+        :model-value="next"
       />
     </template>
     <template #body>
@@ -28,20 +30,21 @@
         <div class="apos-input-relationship__input-wrapper">
           <input
             v-if="!modifiers.includes('no-search')"
+            :id="uid"
+            v-model="searchTerm"
             class="apos-input apos-input--text apos-input--relationship"
-            v-model="searchTerm" type="text"
+            type="text"
             :placeholder="$t(placeholder)"
             :disabled="field.readOnly || limitReached"
             :required="field.required"
-            :id="uid"
+            tabindex="0"
             @input="input"
             @focus="input"
             @focusout="handleFocusOut"
-            tabindex="0"
           >
           <AposButton
-            class="apos-input-relationship__button"
             v-if="field.browse !== false"
+            class="apos-input-relationship__button"
             :disabled="field.readOnly || limitReached"
             :label="browseLabel"
             :modifiers="buttonModifiers"
@@ -50,25 +53,25 @@
           />
         </div>
         <AposSlatList
-          class="apos-input-relationship__items"
           v-if="next.length"
-          @input="updateSelected"
-          @item-clicked="editRelationship"
-          :value="next"
+          class="apos-input-relationship__items"
+          :model-value="next"
           :duplicate="duplicate"
           :disabled="field.readOnly"
           :relationship-schema="field.schema"
           :editor-label="field.editorLabel"
           :editor-icon="field.editorIcon"
+          @update:model-value="updateSelected"
+          @item-clicked="editRelationship"
         />
         <AposSearchList
           :list="searchList"
-          @select="updateSelected"
           :selected-items="next"
           :icon="field.suggestionIcon"
           :icon-size="field.suggestionIconSize"
           :fields="field.suggestionFields"
           disabled-tooltip="apostrophe:publishBeforeUsingTooltip"
+          @select="updateSelected"
         />
       </div>
     </template>

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

@@ -12,7 +12,7 @@
         :choices="choices"
         :classes="classes"
         :disabled="field.readOnly"
-        :selected="value.data"
+        :selected="modelValue.data"
         :autocomplete="field.autocomplete"
         @change="change"
       />

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

@@ -1,35 +1,40 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
     :meta="fieldMeta"
   >
     <template #body>
       <div :class="wrapperClasses">
         <span
-          class="apos-input__slug-locale-prefix"
           v-if="localePrefix"
-          @click="passFocus"
           v-apos-tooltip="'apostrophe:cannotChangeSlugPrefix'"
+          class="apos-input__slug-locale-prefix"
+          @click="passFocus"
         >
           {{ localePrefix }}
         </span>
         <input
+          :id="uid"
+          ref="input"
+          v-model="next"
           :class="classes"
-          v-model="next" :type="type"
+          :type="type"
           :placeholder="$t(field.placeholder)"
-          @keydown.enter="emitReturn"
-          :disabled="field.readOnly" :required="field.required"
-          :id="uid" :tabindex="tabindex"
-          ref="input"
+          :disabled="field.readOnly"
+          :required="field.required"
+          :tabindex="tabindex"
           :autocomplete="field.autocomplete"
+          @keydown.enter="emitReturn"
         >
         <component
+          :is="icon"
           v-if="icon"
           :size="iconSize"
           class="apos-input-icon"
-          :is="icon"
         />
       </div>
     </template>
@@ -40,8 +45,7 @@
 import AposInputSlugLogic from '../logic/AposInputSlug';
 export default {
   name: 'AposInputSlug',
-  mixins: [ AposInputSlugLogic ],
-  emits: [ 'return' ]
+  mixins: [ AposInputSlugLogic ]
 };
 </script>
 

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

@@ -1,38 +1,46 @@
 <template>
   <AposInputWrapper
-    :modifiers="modifiers" :field="field"
-    :error="effectiveError" :uid="uid"
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
     :display-options="displayOptions"
     :meta="fieldMeta"
   >
     <template #body>
       <div class="apos-input-wrapper">
         <textarea
+          v-if="field.textarea && field.type === 'string'"
+          :id="uid"
+          v-model="next"
+          rows="5"
           :class="classes"
-          v-if="field.textarea && field.type === 'string'" rows="5"
-          v-model="next" :placeholder="$t(field.placeholder)"
-          @keydown.enter="enterEmit"
+          :placeholder="$t(field.placeholder)"
           :disabled="field.readOnly"
           :required="field.required"
-          :id="uid" :tabindex="tabindex"
+          :tabindex="tabindex"
           :autocomplete="field.autocomplete"
+          @keydown.enter="enterEmit"
         />
         <input
-          v-else :class="classes"
-          v-model="next" :type="type"
+          v-else
+          :id="uid"
+          v-model="next"
+          :class="classes"
+          :type="type"
           :placeholder="$t(field.placeholder)"
-          @keydown.enter="enterEmit"
           :disabled="field.readOnly || field.disabled"
           :required="field.required"
-          :id="uid" :tabindex="tabindex"
+          :tabindex="tabindex"
           :step="step"
           :autocomplete="field.autocomplete"
+          @keydown.enter="enterEmit"
         >
         <component
+          :is="icon"
           v-if="icon"
           :size="iconSize"
           class="apos-input-icon"
-          :is="icon"
         />
       </div>
     </template>

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

@@ -9,10 +9,10 @@
     <component :is="wrapEl" :class="classList">
       <div class="apos-field__info">
         <component
+          :is="labelEl"
           v-if="field.label"
           class="apos-field__label"
           :class="{'apos-sr-only': field.hideLabel }"
-          :is="labelEl"
           :for="uid"
           :data-apos-test-name="field.name"
           :data-apos-test-label="field.label"
@@ -24,8 +24,8 @@
               *
             </span>
             <AposLabel
-              class="apos-field__tag"
               v-if="field.tag"
+              class="apos-field__tag"
               :label="field.tag.value || field.tag"
               :modifiers="[ `apos-is-${field.tag.type || 'success'}`, 'apos-is-filled' ]"
               data-apos-test="field-tag"
@@ -44,11 +44,13 @@
               />
             </span>
             <span
-              v-if="displayOptions.changed" class="apos-field__changed"
+              v-if="displayOptions.changed"
+              class="apos-field__changed"
               data-apos-test="field-changed"
             >
               <AposLabel
-                label="apostrophe:changed" class="apos-field__changed__label"
+                label="apostrophe:changed"
+                class="apos-field__changed__label"
                 :modifiers="[ 'apos-is-warning', 'apos-is-filled' ]"
                 tooltip="apostrophe:fieldHasUnpublishedChanges"
               />
@@ -56,16 +58,16 @@
           </span>
           <span data-apos-test="field-meta-wrapper" class="apos-field__label-meta">
             <component
-              v-for="component in metaComponents"
-              :key="component.name"
-              :is="component.name"
+              v-for="{name, namespace, data} in metaComponents"
+              :key="name"
+              :is="name"
               :field="field"
               :items="items"
-              :namespace="component.namespace"
-              :meta="component.data"
+              :namespace="namespace"
+              :meta="data"
               :meta-raw="meta"
-              :data-apos-test-component="component.name"
-              :data-apos-test-namespace="component.namespace"
+              :data-apos-test-component="name"
+              :data-apos-test-namespace="namespace"
               data-apos-test="field-meta"
             />
           </span>
@@ -81,7 +83,8 @@
       </div>
       <slot name="body" />
       <div
-        v-if="errorMessage" class="apos-field__error"
+        v-if="errorMessage"
+        class="apos-field__error"
         data-apos-test="field-error"
       >
         {{ $t(errorMessage) }}

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

@@ -24,21 +24,24 @@
 -->
 <template>
   <component
-    class="apos-schema"
     :is="fieldStyle === 'table' ? 'tr' : 'div'"
+    class="apos-schema"
+    :class="classes"
   >
     <slot name="before" />
     <component
-      v-for="field in schema" :key="field.name.concat(field._id ?? '')"
-      :data-apos-field="field.name"
       :is="fieldStyle === 'table' ? 'td' : 'div'"
+      v-for="field in schema"
+      :key="field.name.concat(field._id ?? '')"
+      :data-apos-field="field.name"
       :style="(fieldStyle === 'table' && field.columnStyle) || {}"
-      v-show="displayComponent(field)"
+      :class="{'apos-field--hidden': !displayComponent(field)}"
     >
       <component
-        v-show="displayComponent(field)"
-        v-model="fieldState[field.name]"
         :is="fieldComponentMap[field.type]"
+        :ref="field.name"
+        v-model="fieldState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
         :field="fields[field.name].field"
@@ -48,7 +51,26 @@
         :trigger-validation="triggerValidation"
         :server-error="fields[field.name].serverError"
         :doc-id="docId"
+        :generation="generation"
+        @update-doc-data="onUpdateDocData"
+        @validate="emitValidate()"
+      />
+      <component
+        :is="fieldComponentMap[field.type]"
+        v-if="hasCompareMeta"
+        v-show="displayComponent(field)"
         :ref="field.name"
+        v-model="compareMetaState[field.name]"
+        :class="{ 'apos-field__wrapper--highlight': highlight(field.name) }"
+        :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"
+        :server-error="fields[field.name].serverError"
+        :doc-id="docId"
         :generation="generation"
         @update-doc-data="onUpdateDocData"
         @validate="emitValidate()"
@@ -67,33 +89,64 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-schema ::v-deep .apos-field__wrapper {
+  .apos-schema :deep(.apos-field__wrapper) {
     max-width: $input-max-width;
   }
 
-  .apos-schema ::v-deep .apos-field__wrapper.apos-field__wrapper--full-width {
+  .apos-schema :deep(.apos-field__wrapper.apos-field__wrapper--full-width) {
     max-width: inherit;
   }
 
-  .apos-schema ::v-deep img {
+  .apos-schema :deep(img) {
     max-width: 100%;
   }
 
-  .apos-field {
-    .apos-schema ::v-deep & {
-      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;
-      }
-    }
+  .apos-schema .apos-field--hidden {
+    display: none;
+  }
 
-    .apos-schema ::v-deep .apos-toolbar & {
+  .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;
     }
   }
+
+  .apos-field .apos-schema :deep(.apos-toolbar) {
+    margin-bottom: 0;
+  }
+
+  .apos-schema.apos-schema--compare > :deep([data-apos-field]) {
+    display: flex;
+
+    &.apos-field--hidden {
+      display: none;
+    }
+
+    & > .apos-field__wrapper {
+      flex-grow: 1;
+      flex-basis: 50%;
+      border-right: 1px solid var(--a-base-9);
+      padding-right: 20px;
+    }
+    & > .apos-field__wrapper + .apos-field__wrapper {
+      border-right: none;
+      padding-right: 0;
+      padding-left: 20px;
+    }
+
+    & .apos-field__label {
+      word-break: break-all;
+    }
+  }
+
+  :deep(.apos-field__wrapper--highlight > .apos-field) {
+    padding: 10px;
+    background: var(--a-highlight);
+  }
 </style>

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

@@ -3,8 +3,8 @@
     <li
       v-for="item in list"
       :key="item._id"
-      :class="getClasses(item)"
       v-apos-tooltip="getTooltip(item)"
+      :class="getClasses(item)"
       @click="select(item, $event)"
     >
       <img

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

@@ -13,12 +13,12 @@
           :data-apos-test-name="subform.name"
           :trigger-validation="triggerValidation"
           :schema="schema"
-          :value="docFields"
+          :model-value="docFields"
           :following-values="followingValues()"
           :conditional-fields="conditionalFields"
           :server-errors="serverErrors"
           :modifiers="['small']"
-          @input="updateDocFields"
+          @update:model-value="updateDocFields"
           @validate="triggerValidate"
         />
         <div class="apos-subform__controls">

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

@@ -35,10 +35,6 @@ export default {
     docId: {
       type: String,
       default: null
-    },
-    parentFollowingValues: {
-      type: Object,
-      default: null
     }
   },
   emits: [ 'modal-result', 'safe-close' ],

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

@@ -16,7 +16,7 @@ export default {
   },
   data () {
     return {
-      next: this.value.data || this.getEmptyValue(),
+      next: this.modelValue.data || this.getEmptyValue(),
       error: false,
       // This is just meant to be sufficient to prevent unintended collisions
       // in the UI between id attributes
@@ -70,8 +70,8 @@ export default {
       };
     },
     watchValue () {
-      this.error = this.value.error;
-      this.next = this.value.data || this.getEmptyValue();
+      this.error = this.modelValue.error;
+      this.next = this.modelValue.data || this.getEmptyValue();
     },
     validate(value) {
       if (this.field.required) {

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

@@ -6,11 +6,11 @@ import { getConditionTypesObject } from 'Modules/@apostrophecms/schema/lib/condi
 import cuid from 'cuid';
 import { klona } from 'klona';
 import { get } from 'lodash';
-import draggable from 'vuedraggable';
+import { Sortable } from 'sortablejs-vue3';
 
 export default {
   name: 'AposInputArray',
-  components: { draggable },
+  components: { draggable: Sortable },
   mixins: [
     AposInputMixin,
     AposInputFollowingMixin,
@@ -124,6 +124,17 @@ export default {
     }
   },
   methods: {
+    moveUpdate({
+      oldIndex, newIndex
+    }) {
+      if (oldIndex !== newIndex) {
+        this.items = this.items.map((elem, index) => {
+          return index === oldIndex
+            ? this.items[newIndex]
+            : (index === newIndex && this.items[oldIndex]) || elem;
+        });
+      }
+    },
     getItemsSchema(_id) {
       return (this.items.find((item) => item._id === _id))?.schemaInput.data;
     },
@@ -199,8 +210,8 @@ export default {
     },
     getNext() {
       // Next should consistently be an array.
-      return (this.value && Array.isArray(this.value.data))
-        ? this.value.data
+      return (this.modelValue && Array.isArray(this.modelValue.data))
+        ? this.modelValue.data
         : (this.field.def || []);
     },
     disableAdd() {

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

@@ -9,8 +9,8 @@ export default {
     return {
       // Next should consistently be an object or null (an attachment field with
       // no value yet is null, per server side).
-      next: (this.value && (typeof this.value.data === 'object'))
-        ? this.value.data : (this.field.def || null),
+      next: (this.modelValue && (typeof this.modelValue.data === 'object'))
+        ? this.modelValue.data : (this.field.def || null),
       disabled: false,
       uploading: false
     };
@@ -61,7 +61,7 @@ export default {
           });
 
           this.$emit('upload-complete');
-          this.value.data = attachment;
+          this.modelValue.data = attachment;
         } catch (error) {
           console.error('Error uploading file.', error);
           const msg = error.body && error.body.message ? error.body.message : this.$t('apostrophe:uploadError');

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

@@ -6,15 +6,15 @@ export default {
   name: 'AposInputCheckboxes',
   mixins: [ AposInputMixin, AposInputChoicesMixin ],
   beforeMount () {
-    this.value.data = Array.isArray(this.value.data) ? this.value.data : [];
+    this.modelValue.data = Array.isArray(this.modelValue.data) ? this.modelValue.data : [];
   },
   methods: {
     getChoiceId(uid, value) {
       return uid + value.replace(/\s/g, '');
     },
     watchValue () {
-      this.error = this.value.error;
-      this.next = this.value.data || [];
+      this.error = this.modelValue.error;
+      this.next = this.modelValue.data || [];
     },
     validate(values) {
       // The choices and values should always be arrays.
@@ -51,17 +51,17 @@ export default {
     },
     selectItems(choice) {
       if (choice.value === '__all') {
-        this.value.data = this.choices.length === this.value.data.length
+        this.modelValue.data = this.choices.length === this.modelValue.data.length
           ? []
           : this.choices.map(({ value }) => value);
 
         return;
       }
 
-      if (this.value.data.includes(choice.value)) {
-        this.value.data = this.value.data.filter((val) => val !== choice.value);
+      if (this.modelValue.data.includes(choice.value)) {
+        this.modelValue.data = this.modelValue.data.filter((val) => val !== choice.value);
       } else {
-        this.value.data.push(choice.value);
+        this.modelValue.data.push(choice.value);
       }
     }
   }

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

@@ -1,6 +1,6 @@
 
 import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
-import Picker from '@apostrophecms/vue-color/src/components/Sketch';
+import { Sketch as Picker } from '@ckpack/vue-color';
 import tinycolor from 'tinycolor2';
 
 export default {
@@ -31,7 +31,7 @@ export default {
       return {
         label: this.field.label,
         type: 'color',
-        color: this.value.data || ''
+        color: this.modelValue.data || ''
       };
     },
     format() {
@@ -40,10 +40,7 @@ export default {
         : this.defaultFormat;
     },
     pickerOptions() {
-      let fieldOptions = {};
-      if (this.field.options && this.field.options.pickerOptions) {
-        fieldOptions = this.field.options.pickerOptions;
-      }
+      const fieldOptions = this.field.options?.pickerOptions || {};
       return Object.assign(this.defaultPickerOptions, fieldOptions);
     },
 
@@ -63,7 +60,7 @@ export default {
   },
   mounted() {
     if (!this.next) {
-      this.next = null;
+      this.next = '';
     }
   },
   methods: {
@@ -92,7 +89,7 @@ export default {
       return color.isValid() ? false : 'Error';
     },
     clear() {
-      this.next = null;
+      this.next = '';
     }
   }
 };

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

@@ -6,7 +6,7 @@ export default {
   emits: [ 'return' ],
   data() {
     return {
-      next: (this.value && this.value.data) || null,
+      next: (this.modelValue && this.modelValue.data) || null,
       date: '',
       time: '',
       disabled: !this.field.required