apostrophe 3.63.1 → 4.0.0

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

@@ -1,64 +1,42 @@
 <template>
-  <!-- Disabling since the SVG is mostly not active vue template code. -->
-  <!-- eslint-disable vue/max-attributes-per-line -->
   <svg
-    :class="alignmentModifier"
-    class="apos-context-menu__tip" width="27px" height="11px" viewBox="0 0 27 11" version="1.1" xmlns="http://www.w3.org/2000/svg"
+    :ref="(el) => emit('set-arrow', el)"
+    class="apos-context-menu__tip"
+    width="27px"
+    height="11px"
+    viewBox="0 0 27 11"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
   >
-    <g width="27px" height="11px" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <path class="apos-context-menu__tip-outline" d="M17.2842712,1.46446609 L25.748,9.928 L1.749,9.928 L10.2132034,1.46446609 C12.1658249,-0.488155365 15.3316498,-0.488155365 17.2842712,1.46446609 Z" stroke="var(--a-base-8)" />
-      <path class="apos-context-menu__tip-background" d="M17.0029602,1.84623992 C15.3903198,0.179595947 12.5749711,0.0148310371 10.7918701,1.61499023 C9.60313614,2.68176303 9.52086075,2.75884626 10.5450439,1.84623992 L0.815307617,11.4361572 L26.6676025,11.4361572 L17.0029602,1.84623992 Z" fill="var(--a-background-primary)" fill-rule="nonzero" />
+    <g
+      width="27px"
+      height="11px"
+      stroke="none"
+      stroke-width="1"
+      fill="none"
+      fill-rule="evenodd"
+    >
+      <path
+        class="apos-context-menu__tip-outline"
+        d="M17.2842712,1.46446609 L25.748,9.928 L1.749,9.928 L10.2132034,1.46446609 C12.1658249,-0.488155365 15.3316498,-0.488155365 17.2842712,1.46446609 Z"
+        stroke="var(--a-base-8)"
+      />
+      <path
+        class="apos-context-menu__tip-background"
+        d="M17.0029602,1.84623992 C15.3903198,0.179595947 12.5749711,0.0148310371 10.7918701,1.61499023 C9.60313614,2.68176303 9.52086075,2.75884626 10.5450439,1.84623992 L0.815307617,11.4361572 L26.6676025,11.4361572 L17.0029602,1.84623992 Z"
+        fill="var(--a-background-primary)"
+        fill-rule="nonzero"
+      />
     </g>
   </svg>
-  <!-- eslint-enable vue/max-attributes-per-line -->
 </template>
 
-<script>
-export default {
-  name: 'AposContextMenuTip',
-  props: {
-    align: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    alignmentModifier () {
-      return `apos-context-menu__tip--alignment-${this.align}`;
-    }
-  }
-};
+<script setup>
+const emit = defineEmits([ 'set-arrow' ]);
 </script>
 
 <style lang="scss">
   .apos-context-menu__tip {
     position: absolute;
   }
-
-  .apos-context-menu__tip--alignment-start {
-    left: 20px;
-  }
-
-  .apos-context-menu__tip--alignment-center {
-    right: 0;
-    left: 0;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .apos-context-menu__tip--alignment-end {
-    right: 20px;
-  }
-
-  .apos-popover[x-placement^='bottom'] .apos-context-menu__tip {
-    top: -10px;
-    bottom: auto;
-  }
-
-  .apos-popover[x-placement^='top'] .apos-context-menu__tip {
-    top: auto;
-    bottom: -10px;
-    transform: rotate(180deg);
-  }
-
 </style>

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

@@ -18,7 +18,7 @@
         <template v-else>
           <paperclip-icon :size="14" class="apos-file-icon" />
           {{ messages.primary }}&nbsp;
-          <span class="apos-file-highlight" v-if="messages.highlighted">
+          <span v-if="messages.highlighted" class="apos-file-highlight">
             {{ messages.highlighted }}
           </span>
         </template>
@@ -28,15 +28,15 @@
         type="file"
         class="apos-sr-only"
         :disabled="disabled || fileOrAttachment"
-        @input="uploadFile"
         :accept="allowedExtensions"
+        @input="uploadFile"
       >
     </label>
     <div v-if="fileOrAttachment" class="apos-file-files">
       <AposSlatList
-        :value="[fileOrAttachment]"
-        @input="update"
+        :model-value="[fileOrAttachment]"
         :disabled="attachmentDisabled"
+        @update:model-value="update"
       />
     </div>
   </div>
@@ -200,7 +200,7 @@ export default {
     justify-content: center;
     pointer-events: none;
     // v-html goofiness
-    & ::v-deep .apos-file-highlight {
+    &:deep(.apos-file-highlight) {
       color: var(--a-primary);
       font-weight: var(--a-weight-bold);
     }

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

@@ -9,12 +9,12 @@
         <component
           :is="map[set.field.type]"
           :field="set.field"
-          :value="set.value"
+          :model-value="set.value"
           :status="set.status"
           :icon="
             set.field.type === 'select' ? 'unfold-more-horizontal-icon' : ''
           "
-          @input="input($event, set.name)"
+          @update:model-value="input($event, set.name)"
         />
       </div>
     </div>
@@ -133,7 +133,7 @@ export default {
 .apos-filters-menu {
   min-width: 140px;
 
-  ::v-deep .apos-input--select {
+  :deep(.apos-input--select) {
     padding-top: 10px;
     padding-bottom: 10px;
     background-color: var(--a-base-10);
@@ -141,7 +141,7 @@ export default {
   }
 }
 
-.apos-filters-menu ::v-deep .apos-field__label {
+.apos-filters-menu :deep(.apos-field__label) {
   display: block;
   width: 100%;
   padding-bottom: 10px;

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

@@ -28,7 +28,7 @@
 export default {
   name: 'AposMinMaxCount',
   props: {
-    value: {
+    modelValue: {
       required: true,
       type: Array
     },
@@ -39,12 +39,12 @@ export default {
   },
   computed: {
     maxed() {
-      return (this.field.max !== undefined) && (this.value.length >= this.field.max);
+      return (this.field.max !== undefined) && (this.modelValue.length >= this.field.max);
     },
     minError() {
       let minError = false;
       if (this.effectiveMin) {
-        if (this.value.length < this.effectiveMin) {
+        if (this.modelValue.length < this.effectiveMin) {
           minError = true;
         }
       }
@@ -54,7 +54,7 @@ export default {
     maxError() {
       let maxError = false;
       if (this.field.max !== undefined) {
-        if (this.value.length > this.field.max) {
+        if (this.modelValue.length > this.field.max) {
           maxError = true;
         }
       }
@@ -62,7 +62,7 @@ export default {
     },
     countLabel() {
       return this.$t('apostrophe:numberAdded', {
-        count: this.value.length
+        count: this.modelValue.length
       });
     },
     // Here in the array editor we use effectiveMin to factor in the

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

@@ -3,19 +3,23 @@
     <AposButton
       :disabled="currentPage == 1"
       class="apos-pager__btn"
+      type="outline"
+      icon="chevron-left-icon"
       :modifiers="['small']"
-      type="outline" @click="incrementPage(-1)"
-      :icon-only="true" icon="chevron-left-icon"
+      :icon-only="true"
       :label="prevButtonLabel"
+      @click="incrementPage(-1)"
     />
     <div class="apos-input-wrapper">
       <select
-        :disabled="totalPages <= 1"
+        v-model="selectedPage"
         class="apos-pager__page-select apos-input apos-input--select"
-        v-model="selectedPage" :aria-label="$t('apostrophe:selectPage')"
+        :disabled="totalPages <= 1"
+        :aria-label="$t('apostrophe:selectPage')"
       >
         <option
-          v-for="num in totalPages" :key="num"
+          v-for="num in totalPages"
+          :key="num"
           :value="num"
         >
           {{ $t('apostrophe:pageNumber', { number: num }) }}
@@ -25,17 +29,19 @@
     </div>
     <AposButton
       :disabled="currentPage >= totalPages"
+      type="outline"
       class="apos-pager__btn"
+      icon="chevron-right-icon"
       :modifiers="['small']"
-      type="outline" @click="incrementPage(1)"
-      :icon-only="true" icon="chevron-right-icon"
+      :icon-only="true"
       :label="nextButtonLabel"
+      @click="incrementPage(1)"
     />
   </nav>
 </template>
 
 <script>
-import MenuSwap from 'vue-material-design-icons/MenuSwap.vue';
+import MenuSwap from '@apostrophecms/vue-material-design-icons/MenuSwap.vue';
 
 export default {
   name: 'AposPager',

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

@@ -270,7 +270,7 @@ export default {
   .apos-slat.apos-is-selected:focus {
     background-color: var(--a-primary);
     &,
-    ::v-deep .apos-button {
+    :deep(.apos-button) {
       color: var(--a-white);
     }
     &:hover {
@@ -292,7 +292,7 @@ export default {
     display: flex;
     align-items: center;
     max-width: 75%;
-    & ::v-deep .trigger {
+    &:deep(.trigger) {
       /* This gets inline positioned and has doesn't provide an extra class to beef up, sorry */
       /* stylelint-disable-next-line declaration-no-important */
       display: flex !important;

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

@@ -2,55 +2,55 @@
 <template>
   <div ref="root">
     <draggable
+      :id="listId"
+      item-key="_id"
       class="apos-slat-list"
       tag="ol"
       role="list"
+      :options="dragOptions"
       :list="next"
-      :move="onMove"
-      v-bind="dragOptions"
-      @start="isDragging=true"
-      @end="isDragging=false"
-      :id="listId"
+      @update="update"
     >
-      <transition-group type="transition" name="apos-flip-list">
-        <AposSlat
-          v-for="item in next"
-          class="apos-slat-list__item"
-          @remove="remove"
-          @engage="engage"
-          @disengage="disengage"
-          @select="select"
-          @move="move"
-          @item-clicked="$emit('item-clicked', item)"
-          :key="item._id"
-          :item="item"
-          :selected="selected === item._id"
-          :class="{'apos-slat-list__item--disabled' : disabled, 'apos-input--error': duplicate}"
-          :disabled="disabled"
-          :engaged="engaged === item._id"
-          :parent="listId"
-          :slat-count="next.length"
-          :removable="removable"
-          :relationship-schema="relationshipSchema"
-          :editor-label="editorLabel"
-          :editor-icon="editorIcon"
-        />
-      </transition-group>
+      <template #item="{element: item}">
+        <transition-group type="transition" name="apos-flip-list">
+          <AposSlat
+            :key="item._id"
+            class="apos-slat-list__item"
+            :item="item"
+            :selected="selected === item._id"
+            :class="{'apos-slat-list__item--disabled' : disabled, 'apos-input--error': duplicate}"
+            :disabled="disabled"
+            :engaged="engaged === item._id"
+            :parent="listId"
+            :slat-count="next.length"
+            :removable="removable"
+            :relationship-schema="relationshipSchema"
+            :editor-label="editorLabel"
+            :editor-icon="editorIcon"
+            @remove="remove"
+            @engage="engage"
+            @disengage="disengage"
+            @select="select"
+            @move="move"
+            @item-clicked="$emit('item-clicked', item)"
+          />
+        </transition-group>
+      </template>
     </draggable>
   </div>
 </template>
 
 <script>
-import draggable from 'vuedraggable';
+import { Sortable } from 'sortablejs-vue3';
 import cuid from 'cuid';
 
 export default {
   name: 'AposSlatList',
   components: {
-    draggable
+    draggable: Sortable
   },
   props: {
-    value: {
+    modelValue: {
       type: Array,
       required: true
     },
@@ -83,13 +83,12 @@ export default {
       default: null
     }
   },
-  emits: [ 'update', 'item-clicked', 'select', 'input' ],
+  emits: [ 'item-clicked', 'select', 'update:modelValue' ],
   data() {
     return {
       isDragging: false,
-      delayedDragging: false,
       engaged: null,
-      next: this.value.slice()
+      next: this.modelValue.slice()
     };
   },
   computed: {
@@ -104,24 +103,16 @@ export default {
       };
     }
   },
+
   watch: {
-    isDragging(newValue) {
-      if (newValue) {
-        this.delayedDragging = true;
-        return;
-      }
-      this.$nextTick(() => {
-        this.delayedDragging = false;
-      });
-    },
-    value() {
-      this.next = this.value.slice();
+    modelValue() {
+      this.next = this.modelValue.slice();
     },
     next(newValue, oldValue) {
       let equal = true;
-      if (newValue.length === this.value.length) {
+      if (newValue.length === this.modelValue.length) {
         for (let i = 0; (i < newValue.length); i++) {
-          if ((newValue[i]._id !== this.value[i]._id) || (newValue[i].title !== this.value[i].title)) {
+          if ((newValue[i]._id !== this.modelValue[i]._id) || (newValue[i].title !== this.modelValue[i].title)) {
             equal = false;
             break;
           }
@@ -130,11 +121,22 @@ export default {
         equal = false;
       }
       if (!equal) {
-        this.$emit('input', this.next);
+        this.$emit('update:modelValue', this.next);
       }
     }
   },
   methods: {
+    update({
+      oldIndex, newIndex
+    }) {
+      if (oldIndex !== newIndex) {
+        this.next = this.next.map((elem, index) => {
+          return index === oldIndex
+            ? this.next[newIndex]
+            : (index === newIndex && this.next[oldIndex]) || elem;
+        });
+      }
+    },
     engage(id) {
       this.engaged = id;
     },
@@ -152,15 +154,14 @@ export default {
       } else if (focusNext && this.next[itemIndex - 1]) {
         this.focusElement(this.next[itemIndex - 1]._id);
       }
-      this.$emit('update', this.next);
     },
+
     move(id, dir) {
       const index = this.getIndex(id);
       const target = dir > 0 ? index + 1 : index - 1;
       if (this.next[target]) {
         this.next.splice(target, 0, this.next.splice(index, 1)[0]);
         this.focusElement(id);
-        return this.$emit('update', this.next);
       }
     },
     getIndex(id) {
@@ -178,20 +179,13 @@ export default {
           this.$refs.root.querySelector(`[data-id="${id}"]`).focus();
         });
       }
-    },
-    onMove({ relatedContext, draggedContext }) {
-      const relatedElement = relatedContext.element;
-      const draggedElement = draggedContext.element;
-      return (
-        (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
-      );
     }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-  .apos-slat-list ::v-deep .apos-slat {
+  .apos-slat-list :deep(.apos-slat) {
     margin-bottom: 5px;
     transition: all 0.4s;
     max-width: $input-max-width * 0.65;

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

@@ -5,13 +5,13 @@
     </div>
     <div class="apos-subform-preview__value" :class="{ 'is-help': !!subform.help }">
       <component
+        :is="subform.previewComponent"
         v-if="subform.previewComponent"
         class="apos-subform-preview__value-block"
-        :is="subform.previewComponent"
         :subform="subform"
         :values="values"
       />
-      <span class="apos-subform-preview__value-block" v-else>
+      <span v-else class="apos-subform-preview__value-block">
         {{ previewValue }}
       </span>
     </div>

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

@@ -1,55 +1,60 @@
 <template>
   <AposContextMenu
-    @open="open = $event"
     menu-placement="bottom-end"
+    @open="open = $event"
   >
     <div class="apos-apply-tag-menu__inner">
       <AposInputString
-        @input="updateSearchInput"
+        ref="textInput"
+        :field="searchField"
+        :model-value="searchValue"
+        :status="searchStatus"
+        @update:model-value="updateSearchInput"
         @return="create"
-        :field="searchField" :value="searchValue"
-        :status="searchStatus" ref="textInput"
       />
       <div class="apos-apply-tag__create">
         <AposButton
-          @click="create"
           :label="createLabel"
           type="quiet"
           :disabled="disabledCreate"
           :disable-focus="!open"
+          @click="create"
         />
       </div>
       <transition name="fade">
-        <ol v-if="searchTags.length && !creating" class="apos-apply-tag-menu__tags">
-          <li
-            class="apos-apply-tag-menu__tag" v-for="tag in searchTags"
-            :key="`${keyPrefix}-${tag.slug}`"
-          >
-            <AposCheckbox
-              v-if="checkboxes[tag.slug]"
-              :field="checkboxes[tag.slug].field"
-              :status="checkboxes[tag.slug].status"
-              :choice="checkboxes[tag.slug].choice"
-              v-model="checked"
-              @updated="updateTag"
-              :disable-focus="!open"
-            />
-          </li>
-        </ol>
-        <div v-if="(!searchTags.length && myTags.length) && !creating" class="apos-apply-tag-menu__empty">
-          <p class="apos-apply-tag-menu__empty-message">
-            We couldn't find any matching tags. Perhaps
-            <AposButton
-              @click="create"
-              :label="`create ${searchInputValue} ?`"
-              type="quiet"
-              :disabled="disabledCreate"
-              :disable-focus="!open"
-            />
-          </p>
-          <span class="apos-apply-tag-menu__empty-icon">
-            🌾
-          </span>
+        <div>
+          <ol v-if="searchTags.length && !creating" class="apos-apply-tag-menu__tags">
+            <li
+              v-for="tag in searchTags"
+              :key="`${keyPrefix}-${tag.slug}`"
+              class="apos-apply-tag-menu__tag"
+            >
+              <AposCheckbox
+                v-if="checkboxes[tag.slug]"
+                v-model="checked"
+                :field="checkboxes[tag.slug].field"
+                :status="checkboxes[tag.slug].status"
+                :choice="checkboxes[tag.slug].choice"
+                :disable-focus="!open"
+                @updated="updateTag"
+              />
+            </li>
+          </ol>
+          <div v-if="(!searchTags.length && myTags.length) && !creating" class="apos-apply-tag-menu__empty">
+            <p class="apos-apply-tag-menu__empty-message">
+              We couldn't find any matching tags. Perhaps
+              <AposButton
+                :label="`create ${searchInputValue} ?`"
+                type="quiet"
+                :disabled="disabledCreate"
+                :disable-focus="!open"
+                @click="create"
+              />
+            </p>
+            <span class="apos-apply-tag-menu__empty-icon">
+              🌾
+            </span>
+          </div>
         </div>
       </transition>
     </div>

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

@@ -2,7 +2,7 @@
   <div class="apos-toggle__container">
     <div
       class="apos-toggle__slider"
-      :class="{'apos-toggle__slider--activated': !value}"
+      :class="{'apos-toggle__slider--activated': !modelValue}"
       @click="$emit('toggle')"
     />
   </div>
@@ -12,7 +12,7 @@
 
 export default {
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       required: true
     }

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

@@ -7,22 +7,24 @@
       @calculated="setWidths"
     />
     <AposTreeHeader
-      :headers="headers" :icons="icons"
-      :col-widths="colWidths" :hidden="options.hideHeader"
+      :headers="headers"
+      :icons="icons"
+      :col-widths="colWidths"
+      :hidden="options.hideHeader"
     />
     <AposTreeRows
-      v-model="checkedProxy"
+      v-model:checked="checkedProxy"
+      list-id="root"
       :rows="myItems"
       :headers="headers"
       :icons="icons"
       :col-widths="colWidths"
       :level="1"
       :nested="nested"
-      @update="update"
-      list-id="root"
       :options="options"
       :tree-id="treeId"
       :module-options="moduleOptions"
+      @update="update"
     />
   </div>
 </template>
@@ -33,10 +35,6 @@ import cuid from 'cuid';
 
 export default {
   name: 'AposTree',
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
     headers: {
       type: Array,
@@ -79,7 +77,7 @@ export default {
       }
     }
   },
-  emits: [ 'update', 'change' ],
+  emits: [ 'update', 'update:checked' ],
   data() {
     return {
       // Copy the `items` property to mutate with VueDraggable.
@@ -96,7 +94,7 @@ export default {
         return this.checked;
       },
       set(val) {
-        this.$emit('change', val);
+        this.$emit('update:checked', val);
       }
     },
     spacingRow() {