apostrophe 3.63.2 → 4.0.0

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'"
+          v-model="next"
+          rows="5"
+          :id="uid"
           :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

@@ -38,7 +38,7 @@
               <AposIndicator
                 icon="help-circle-icon"
                 class="apos-field__help-tooltip__icon"
-                :tooltip="field.help || field.htmlHelp"
+                :tooltip="$t(field.help || field.htmlHelp)"
                 :icon-size="11"
                 icon-color="var(--a-base-4)"
               />

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

@@ -24,21 +24,23 @@
 -->
 <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]"
         :following-values="followingValues[field.name]"
         :condition-met="conditionalFields?.if[field.name]"
         :field="fields[field.name].field"
@@ -48,7 +50,25 @@
         :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]"
+        :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 +87,57 @@ 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-schema .apos-field--hidden {
+    display: none;
+  }
+
+  .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 {
+    & > ::v-deep [data-apos-field] {
+      display: flex;
+
+      & > .apos-field__wrapper {
+        flex-grow: 1;
+        flex-basis: 50%;
+        border-right: 1px solid var(--a-base-9);
+        padding-right: 20px;
       }
-      &.apos-field--margin-none {
-        margin-bottom: 0;
+      & > .apos-field__wrapper + .apos-field__wrapper {
+        border-right: none;
+        padding-right: 0;
+        padding-left: 20px;
       }
-    }
 
-    .apos-schema ::v-deep .apos-toolbar & {
-      margin-bottom: 0;
+      & .apos-field__label {
+        word-break: break-all;
+      }
     }
   }
 </style>

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

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' ];
+      return [ this.modelValue.duplicate && 'apos-input--error' ];
     }
   },
   methods: {