apostrophe 3.63.3 → 4.1.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/AposEmptyState.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="apos-empty-state">
-    <p class="apos-title" v-if="emptyState.title">
+    <p v-if="emptyState.title" class="apos-title">
       {{ $t(emptyState.title) }}
     </p>
-    <p class="apos-hint" v-if="emptyState.message">
+    <p v-if="emptyState.message" class="apos-hint">
       {{ $t(emptyState.message) }}
     </p>
-    <div class="apos-emoji" v-if="emptyState.emoji">
+    <div v-if="emptyState.emoji" class="apos-emoji">
       {{ emptyState.emoji }}
     </div>
   </div>

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/AposIndicator.vue

@@ -1,7 +1,7 @@
 <template>
   <span
-    class="apos-indicator"
     v-apos-tooltip="tooltip"
+    class="apos-indicator"
     :aria-hidden="decorative"
   >
     <component

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

@@ -1,8 +1,8 @@
 <template>
   <span
+    v-apos-tooltip="tooltip"
     class="apos-label"
     :class="modifiers"
-    v-apos-tooltip="tooltip"
   >
     {{ $t(label) }}
   </span>

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/AposPagerDots.vue

@@ -1,8 +1,9 @@
 <template>
   <ul class="apos-pager-dots">
     <li
-      class="apos-pager-dots__item" v-for="i in dots"
+      v-for="i in dots"
       :key="i"
+      class="apos-pager-dots__item"
     >
       <button
         role="button"

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

@@ -11,6 +11,9 @@
         'apos-is-selected': selected,
         'apos-is-disabled': disabled,
       }"
+      :aria-pressed="engaged"
+      role="listitem"
+      :aria-labelledby="parent"
       @keydown.prevent.space="toggleEngage"
       @keydown.prevent.enter="toggleEngage"
       @keydown.prevent.escape="disengage"
@@ -18,27 +21,25 @@
       @keydown.prevent.arrow-up="move(-1)"
       @keydown.prevent.backspace="remove(true)"
       @click="click"
-      :aria-pressed="engaged"
-      role="listitem"
-      :aria-labelledby="parent"
     >
       <div class="apos-slat__main">
         <drag-icon
-          v-if="slatCount > 1" class="apos-slat__control apos-slat__control--drag"
+          v-if="slatCount > 1"
+          class="apos-slat__control apos-slat__control--drag"
           :size="13"
         />
         <AposContextMenu
           v-if="hasRelationshipFields && more.menu.length"
           :button="more.button"
           :menu="more.menu"
-          @item-clicked="$emit('item-clicked', item)"
           menu-placement="bottom-start"
           menu-offset="40, 10"
           :disabled="disabled"
+          @item-clicked="$emit('item-clicked', item)"
         />
         <AposButton
-          class="apos-slat__editor-btn"
           v-if="editorIcon && hasRelationshipEditor"
+          class="apos-slat__editor-btn"
           role="button"
           :tooltip="{
             content: editorLabel,
@@ -47,12 +48,12 @@
           :icon="editorIcon"
           :icon-only="true"
           :modifiers="['inline']"
-          @click="$emit('item-clicked', item)"
           :disabled="disabled"
+          @click="$emit('item-clicked', item)"
         />
         <a
-          class="apos-slat__control apos-slat__control--view"
           v-if="item._url || item._urls"
+          class="apos-slat__control apos-slat__control--view"
           :href="item._url || item._urls.original"
           target="_blank"
         >
@@ -82,18 +83,18 @@
         </div>
       </div>
       <div class="apos-slat__secondary">
-        <div class="apos-slat__size" v-if="item.length && item.length.size">
+        <div v-if="item.length && item.length.size" class="apos-slat__size">
           {{ itemSize }}
         </div>
         <AposButton
           v-if="removable"
-          @click="remove"
           class="apos-slat__control apos-slat__control--remove"
           icon="close-icon"
           :icon-only="true"
           :modifiers="['inline']"
           label="apostrophe:removeItem"
           :disabled="disabled"
+          @click="remove"
         />
       </div>
     </li>
@@ -270,7 +271,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 +293,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/AposSpinner.vue

@@ -32,7 +32,7 @@
       :style="style"
     >
       <defs>
-        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+        <linearGradient id="a" x1="8.042%" y1="0%" x2="65.682%" y2="23.865%">
           <stop stop-color="currentColor" stop-opacity="0" offset="0%" />
           <stop stop-color="currentColor" stop-opacity=".631" offset="63.146%" />
           <stop stop-color="currentColor" offset="100%" />
@@ -40,7 +40,7 @@
       </defs>
       <g fill="none" fill-rule="evenodd">
         <g transform="translate(1 1)">
-          <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2" transform="rotate(266.312 18 18)">
+          <path id="Oval-2" d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2" transform="rotate(266.312 18 18)">
             <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite" />
           </path>
           <circle fill="currentColor" cx="36" cy="18" r="1" transform="rotate(266.312 18 18)">

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/AposTag.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="apos-tag">
-    <button @click="click" class="apos-tag__button">
+    <button class="apos-tag__button" @click="click">
       <close-icon
-        class="apos-tag__remove" title="Remove Tag"
+        class="apos-tag__remove"
+        title="Remove Tag"
         :size="10"
       />
     </button>