apostrophe 3.63.2 → 4.0.0

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' ],
+  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);
       }
     });

package/modules/@apostrophecms/ui/ui/apos/lib/i18next.js

@@ -4,11 +4,14 @@
 // each app
 
 import i18next from 'i18next';
+let i18n;
 
 export default {
 
-  install(Vue, options) {
-    const i18n = options.i18n;
+  install(app, options) {
+    if (!i18n) {
+      i18n = options.i18n;
+    }
 
     const fallbackLng = [ i18n.defaultLocale ];
     // In case the default locale also has inadequate admin UI phrases
@@ -67,56 +70,59 @@ export default {
     // property for instance. You may also specify
     // `localize: false` to pass a string through without
     // invoking i18next.
-    Vue.prototype.$t = (key, options = {}) => {
-      if ((key !== null) && ((typeof key) === 'object')) {
-        options = key;
-        key = options.key;
-      }
-      if (options.localize === false) {
-        return key;
-      }
-      // Check carefully for empty string and equivalent scenarios
-      // before doing any work
-      if (key == null) {
-        return '';
-      }
-      key += '';
-      if (!key.length) {
-        return '';
-      }
-      const result = i18next.t(key, {
-        lng: i18n.adminLocale,
-        ...options
-      });
-      if (i18n.show) {
-        if (result === key) {
-          if (key.match(/^\S+:/)) {
-            // The l10n key does not have a value assigned (or the key is
-            // actually the same as the phrase). The key seems to have a
-            // namespace, so might be from the Apostrophe UI.
-            return `❌ ${result}`;
-          } else {
-            // The l10n key does not have a value assigned (or the key is
-            // actually the same as the phrase). It is in the default namespace.
-            return `🕳 ${result}`;
-          }
-        } else {
-          // The phrase is fully localized.
-          return `🌍 ${result}`;
-        }
-      } else {
-        return result;
-      }
-    };
+    app.config.globalProperties.$t = $t;
+  }
+};
 
-    function canonicalize(locale) {
-      const [ language, territory ] = locale.split('-');
-      if (territory) {
-        return `${language}-${territory.toUpperCase()}`;
+export function $t(key, options = {}) {
+  if (!i18n) {
+    return '';
+  }
+  if ((key !== null) && ((typeof key) === 'object')) {
+    options = key;
+    key = options.key;
+  }
+  if (options.localize === false) {
+    return key;
+  }
+  // Check carefully for empty string and equivalent scenarios
+  // before doing any work
+  if (key == null) {
+    return '';
+  }
+  key += '';
+  if (!key.length) {
+    return '';
+  }
+  const result = i18next.t(key, {
+    lng: i18n.adminLocale,
+    ...options
+  });
+  if (i18n.show) {
+    if (result === key) {
+      if (key.match(/^\S+:/)) {
+        // The l10n key does not have a value assigned (or the key is
+        // actually the same as the phrase). The key seems to have a
+        // namespace, so might be from the Apostrophe UI.
+        return `❌ ${result}`;
+      } else {
+        // The l10n key does not have a value assigned (or the key is
+        // actually the same as the phrase). It is in the default namespace.
+        return `🕳 ${result}`;
       }
-      return locale;
+    } else {
+      // The phrase is fully localized.
+      return `🌍 ${result}`;
     }
-
+  } else {
+    return result;
   }
-
 };
+
+function canonicalize(locale) {
+  const [ language, territory ] = locale.split('-');
+  if (territory) {
+    return `${language}-${territory.toUpperCase()}`;
+  }
+  return locale;
+}