apostrophe 3.63.3 → 4.1.0

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

@@ -1,7 +1,8 @@
 <template>
   <li class="apos-tag-list__item">
     <button
-      :class="{'apos-is-active' : active}" class="apos-tag-list__button"
+      :class="{'apos-is-active' : active}"
+      class="apos-tag-list__button"
       @click="click(tag)"
     >
       <AposIndicator

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() {

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

@@ -1,6 +1,7 @@
 <template>
   <div
-    class="apos-tree__row-data apos-tree__header" :class="headerClasses"
+    class="apos-tree__row-data apos-tree__header"
+    :class="headerClasses"
     :aria-hidden="spacerOnly"
   >
     <span
@@ -12,7 +13,8 @@
       :style="getCellStyles(col)"
     >
       <component
-        v-if="col.columnHeaderIcon" :is="icons[col.columnHeaderIcon]"
+        :is="icons[col.columnHeaderIcon]"
+        v-if="col.columnHeaderIcon"
         class="apos-tree__cell__icon"
       />
       {{ $t(col.columnHeader) }}
@@ -77,7 +79,7 @@ export default {
       window.addEventListener('resize', debounce(this.calculateWidths, 100));
     }
   },
-  destroyed() {
+  unmounted() {
     if (this.spacerOnly) {
       window.removeEventListener('resize', debounce(this.calculateWidths, 100));
     }

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

@@ -1,135 +1,136 @@
 <template>
-  <VueDraggable
-    tag="ol"
-    class="apos-tree__list"
-    :list="myRows"
+  <draggable
     v-bind="dragOptions"
+    item-key="_id"
+    class="apos-tree__list"
+    tag="ol"
+    :list="rows"
     @start="startDrag"
     @end="endDrag"
   >
-    <li
-      v-for="row in myRows" :key="row._id"
-      :data-row-id="row._id" data-apos-tree-row
-      :class="getRowClasses(row)"
-      :aria-role="options.selectable ? 'button' : null"
-      :tabindex="options.selectable ? 0 : null"
-      v-on="options.selectable ? {
-        'click': selectRow,
-        'keydown': keydownRow
-      } : {}"
-    >
-      <div class="apos-tree__row-data">
-        <button
-          v-if="row._children && row._children.length > 0"
-          class="apos-tree__row__toggle" data-apos-tree-toggle
-          :aria-label="$t('apostrophe:toggleSection')" :aria-expanded="!options.startCollapsed"
-          @click="toggleSection($event)"
-        >
-          <AposIndicator
-            icon="chevron-down-icon"
-            class="apos-tree__row__toggle-icon"
-          />
-        </button>
-        <component
-          v-for="(col, index) in headers"
-          :key="`${col.property}-${index}`"
-          :is="getEffectiveType(col, row)"
-          :draft="row"
-          :published="row._publishedDoc"
-          :header="col"
-          :href="(getEffectiveType(col, row) === 'a') ? row[col.property] : false"
-          :target="col.type === 'link' ? '_blank' : false"
-          :class="getCellClasses(col, row)"
-          :disabled="getCellDisabled(col, row)"
-          :data-col="col.property"
-          :style="getCellStyles(col.property, index)"
-          :options="moduleOptions"
-          @click="((getEffectiveType(col, row) === 'button') && col.action) ? $emit(col.action, row._id) : null"
-        >
-          <AposIndicator
-            v-if="options.draggable && index === 0 && !row.parked"
-            icon="drag-icon"
-            class="apos-tree__row__icon apos-tree__row__icon--handle"
-          />
-          <AposIndicator
-            v-if="index === 0 && row.parked && row.type !== '@apostrophecms/archive-page'"
-            icon="lock-icon"
-            class="apos-tree__row__icon apos-tree__row__icon--parked"
-            tooltip="apostrophe:pageIsParked"
-          />
-          <AposIndicator
-            v-if="index === 0 && row.type === '@apostrophecms/archive-page'"
-            icon="lock-icon"
-            class="apos-tree__row__icon apos-tree__row__icon--parked"
-            tooltip="apostrophe:cannotMoveArchive"
-          />
-          <AposCheckbox
-            v-if="options.bulkSelect && index === 0"
-            class="apos-tree__row__checkbox"
-            tabindex="-1"
-            :field="{
-              name: row._id,
-              hideLabel: true,
-              label: {
-                key: 'apostrophe:toggleSelectionOf',
-                title: row.title
-              },
-              disableFocus: true
-            }"
-            :choice="{ value: row._id }"
-            v-model="checkedProxy"
-          />
-          <span class="apos-tree__cell__value">
+    <template #item="{element: row}">
+      <li
+        :data-row-id="row._id"
+        data-apos-tree-row
+        :class="getRowClasses(row)"
+        :aria-role="options.selectable ? 'button' : null"
+        :tabindex="options.selectable ? 0 : null"
+        v-on="options.selectable ? {
+          'click': selectRow,
+          'keydown': keydownRow
+        } : {}"
+      >
+        <div class="apos-tree__row-data">
+          <button
+            v-if="row._children && row._children.length > 0"
+            class="apos-tree__row__toggle"
+            data-apos-tree-toggle
+            :aria-label="$t('apostrophe:toggleSection')"
+            :aria-expanded="!options.startCollapsed"
+            @click="toggleSection($event)"
+          >
+            <AposIndicator
+              icon="chevron-down-icon"
+              class="apos-tree__row__toggle-icon"
+            />
+          </button>
+          <component
+            :is="getEffectiveType(col, row)"
+            v-for="(col, index) in headers"
+            :key="`${col.property}-${index}`"
+            :draft="row"
+            :published="row._publishedDoc"
+            :header="col"
+            :href="(getEffectiveType(col, row) === 'a') ? row[col.property] : false"
+            :target="col.type === 'link' ? '_blank' : false"
+            :class="getCellClasses(col, row)"
+            :disabled="getCellDisabled(col, row)"
+            :data-col="col.property"
+            :style="getCellStyles(col.property, index)"
+            :options="moduleOptions"
+            @click="((getEffectiveType(col, row) === 'button') && col.action) ? $emit(col.action, row._id) : null"
+          >
+            <AposIndicator
+              v-if="options.draggable && index === 0 && !row.parked"
+              icon="drag-icon"
+              class="apos-tree__row__icon apos-tree__row__icon--handle"
+            />
             <AposIndicator
-              v-if="getEffectiveIcon(col, row)"
-              :icon="getEffectiveIcon(col, row)"
-              class="apos-tree__cell__icon"
-              :icon-size="getEffectiveIconSize(col, row)"
+              v-if="index === 0 && row.parked && row.type !== '@apostrophecms/archive-page'"
+              icon="lock-icon"
+              class="apos-tree__row__icon apos-tree__row__icon--parked"
+              tooltip="apostrophe:pageIsParked"
             />
-            <span class="apos-tree__cell__label" v-if="getEffectiveCellLabel(col, row)">
-              {{ getEffectiveCellLabel(col, row) }}
+            <AposIndicator
+              v-if="index === 0 && row.type === '@apostrophecms/archive-page'"
+              icon="lock-icon"
+              class="apos-tree__row__icon apos-tree__row__icon--parked"
+              tooltip="apostrophe:cannotMoveArchive"
+            />
+            <AposCheckbox
+              v-if="options.bulkSelect && index === 0"
+              v-model="checkedProxy"
+              class="apos-tree__row__checkbox"
+              tabindex="-1"
+              :field="{
+                name: row._id,
+                hideLabel: true,
+                label: {
+                  key: 'apostrophe:toggleSelectionOf',
+                  title: row.title
+                },
+                disableFocus: true
+              }"
+              :choice="{ value: row._id }"
+            />
+            <span class="apos-tree__cell__value">
+              <AposIndicator
+                v-if="getEffectiveIcon(col, row)"
+                :icon="getEffectiveIcon(col, row)"
+                class="apos-tree__cell__icon"
+                :icon-size="getEffectiveIconSize(col, row)"
+              />
+              <span v-if="getEffectiveCellLabel(col, row)" class="apos-tree__cell__label">
+                {{ getEffectiveCellLabel(col, row) }}
+              </span>
             </span>
-          </span>
-        </component>
-      </div>
-      <AposTreeRows
-        data-apos-branch-height
-        :data-list-row="row._id"
-        ref="tree-branches"
-        :rows="row._children"
-        :headers="headers"
-        :icons="icons"
-        :col-widths="colWidths"
-        :level="level + 1"
-        :nested="nested"
-        :list-id="row._id"
-        :tree-id="treeId"
-        :options="options"
-        :class="{ 'apos-is-collapsed': options.startCollapsed }"
-        :style="{
-          'max-height': options.startCollapsed ? '0' : null
-        }"
-        :module-options="moduleOptions"
-        @update="$emit('update', $event)"
-        v-model="checkedProxy"
-      />
-    </li>
-  </VueDraggable>
+          </component>
+        </div>
+        <AposTreeRows
+          :ref="(el) => treeBranches.push(el)"
+          v-model:checked="checkedProxy"
+          data-apos-branch-height
+          :data-list-row="row._id"
+          :rows="row._children"
+          :headers="headers"
+          :icons="icons"
+          :col-widths="colWidths"
+          :level="level + 1"
+          :nested="nested"
+          :list-id="row._id"
+          :tree-id="treeId"
+          :options="options"
+          :class="{ 'apos-is-collapsed': options.startCollapsed }"
+          :style="{
+            'max-height': options.startCollapsed ? '0' : null
+          }"
+          :module-options="moduleOptions"
+          @update="$emit('update', $event)"
+        />
+      </li>
+    </template>
+  </draggable>
 </template>
 
 <script>
-import VueDraggable from 'vuedraggable';
+import { Sortable } from 'sortablejs-vue3';
 
 export default {
   name: 'AposTreeRows',
   components: {
-    VueDraggable
+    draggable: Sortable
   },
   // Custom model to handle the v-model connection on the parent.
-  model: {
-    prop: 'checked',
-    event: 'change'
-  },
   props: {
     headers: {
       type: Array,
@@ -189,23 +190,22 @@ export default {
       }
     }
   },
-  emits: [ 'update', 'change' ],
+  emits: [ 'update', 'update:checked', 'change' ],
+  data() {
+    return {
+      treeBranches: []
+    };
+  },
   computed: {
-    myRows() {
-      return this.rows;
-    },
     // Handle the local check state within this component.
     checkedProxy: {
       get() {
         return this.checked;
       },
       set(val) {
-        this.$emit('change', val);
+        this.$emit('update:checked', val);
       }
     },
-    isOpen() {
-      return true;
-    },
     dragOptions() {
       return {
         group: { name: this.treeId },
@@ -228,7 +228,7 @@ export default {
   },
   methods: {
     setHeights() {
-      this.$refs['tree-branches'].forEach(branch => {
+      this.treeBranches.forEach(branch => {
         // Add padding to the max-height to avoid needing a `resize`
         // event listener updating values.
         const height = branch.$el.clientHeight + 20;
@@ -240,7 +240,7 @@ export default {
     endDrag(event) {
       this.$emit('update', event);
       this.$nextTick(() => {
-        if (!this.$refs['tree-branches']) {
+        if (!this.treeBranches.length) {
           return;
         }
         this.setHeights();
@@ -505,7 +505,7 @@ export default {
   .apos-tree__row__icon {
     margin-right: 0.25em;
 
-    ::v-deep .material-design-icon__svg {
+    :deep(.material-design-icon__svg) {
       transition: fill 0.2s ease;
       fill: var(--a-base-5);
     }
@@ -516,8 +516,8 @@ export default {
     &:active {
       cursor: grabbing;
     }
-    .sortable-chosen & ::v-deep .material-design-icon__svg,
-    &:hover ::v-deep .material-design-icon__svg {
+    .sortable-chosen &:deep(.material-design-icon__svg,)
+    &:hover :deep(.material-design-icon__svg) {
       fill: var(--a-base-2);
     }
   }
@@ -559,7 +559,7 @@ export default {
     align-self: center;
   }
 
-  .apos-tree__cell.apos-is-published ::v-deep .apos-tree__cell__icon {
+  .apos-tree__cell.apos-is-published :deep(.apos-tree__cell__icon) {
     color: var(--a-success);
   }
 

package/modules/@apostrophecms/ui/ui/apos/composables/AposTheme.js

@@ -0,0 +1,11 @@
+import { computed } from 'vue';
+
+export function useAposTheme () {
+  const themeClass = computed(() => {
+    const classes = [];
+    classes.push(`apos-theme--primary-${window.apos.ui.theme.primary}`);
+    return classes;
+  });
+
+  return { themeClass };
+};

package/modules/@apostrophecms/ui/ui/apos/lib/click-outside-element.js

@@ -1,7 +1,7 @@
 export default {
-  install(Vue, options) {
-    Vue.directive('click-outside-element', {
-      bind(el, binding) {
+  install(app, options) {
+    app.directive('click-outside-element', {
+      beforeMount(el, binding) {
         el.aposClickOutsideHandler = (event) => {
           if ((el !== event.target) && !el.contains(event.target) && !apos.modal.onTopOf(event.target, el)) {
             binding.value(event);
@@ -9,7 +9,7 @@ export default {
         };
         document.body.addEventListener('click', el.aposClickOutsideHandler);
       },
-      unbind(el) {
+      beforeUnmount(el, binding) {
         document.body.removeEventListener('click', el.aposClickOutsideHandler);
       }
     });