apostrophe 3.63.3 → 4.1.0

package/modules/@apostrophecms/modal/ui/apos/components/AposDocsManagerToolbar.vue

@@ -3,15 +3,15 @@
     <template #leftControls>
       <AposButton
         v-if="canSelectAll"
+        ref="selectAll"
         label="apostrophe:select"
         type="outline"
         :modifiers="['small']"
         text-color="var(--a-base-1)"
         :icon-only="true"
         :icon="checkboxIcon"
-        @click="selectAll"
-        ref="selectAll"
         data-apos-test="selectAll"
+        @click="selectAll"
       />
       <div
         v-for="{
@@ -50,8 +50,10 @@
     <template #rightControls>
       <AposPager
         v-if="!options.noPager && totalPages !== 0"
-        @click="registerPageChange" @change="registerPageChange"
-        :total-pages="totalPages" :current-page="currentPage"
+        :total-pages="totalPages"
+        :current-page="currentPage"
+        @click="registerPageChange"
+        @change="registerPageChange"
       />
       <AposFilterMenu
         v-if="filters.length"
@@ -62,11 +64,13 @@
       />
       <AposInputString
         v-if="hasSearch"
-        @input="search" @return="search($event, true)"
+        ref="search"
         :field="searchField.field"
-        :status="searchField.status" :value="searchField.value"
+        :status="searchField.status"
+        :model-value="searchField.value"
         :modifiers="['small']"
-        ref="search"
+        @update:model-value="search"
+        @return="search($event, true)"
       />
     </template>
   </AposModalToolbar>
@@ -188,7 +192,7 @@ export default {
     apos.bus.$on('command-menu-manager-archive-selected', this.archiveSelected);
     apos.bus.$on('command-menu-manager-focus-search', this.focusSearch);
   },
-  destroyed () {
+  unmounted () {
     apos.bus.$off('command-menu-manager-select-all', this.selectAll);
     apos.bus.$off('command-menu-manager-archive-selected', this.archiveSelected);
     apos.bus.$off('command-menu-manager-focus-search', this.focusSearch);
@@ -322,11 +326,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .apos-manager-toolbar ::v-deep {
-    .apos-field--search {
+  .apos-manager-toolbar {
+    :deep(.apos-field--search) {
       width: 250px;
     }
-    .apos-input {
+    :deep(.apos-input) {
       height: 32px;
     }
   }

package/modules/@apostrophecms/modal/ui/apos/components/AposModal.vue

@@ -1,26 +1,26 @@
 <template>
   <transition
     :name="transitionType"
+    :duration="250"
     @enter="onEnter"
     @leave="onLeave"
-    :duration="250"
   >
     <section
       v-if="modal.active"
+      ref="modalEl"
       :class="classes"
       role="dialog"
       aria-modal="true"
       :aria-labelledby="id"
-      ref="modalEl"
+      data-apos-modal
       @keydown="cycleElementsToFocus"
       @focus.capture="storeFocusedElement"
-      data-apos-modal
     >
       <transition :name="transitionType">
         <div
-          @click="close"
           v-if="modal.showModal"
           class="apos-modal__overlay"
+          @click="close"
         />
       </transition>
       <transition :name="transitionType" @after-leave="$emit('inactive')">
@@ -39,7 +39,7 @@
             </div>
           </template>
           <template v-else>
-            <header class="apos-modal__header" v-if="!modal.disableHeader">
+            <header v-if="!modal.disableHeader" class="apos-modal__header">
               <div class="apos-modal__header__main">
                 <div v-if="hasSecondaryControls" class="apos-modal__controls--secondary">
                   <slot name="secondaryControls" />
@@ -50,20 +50,20 @@
                   </span>
                   {{ $t(modalTitle) }}
                 </h2>
-                <div class="apos-modal__controls--header" v-if="hasBeenLocalized || hasPrimaryControls">
-                  <div class="apos-modal__locale" v-if="hasBeenLocalized">
+                <div v-if="hasBeenLocalized || hasPrimaryControls" class="apos-modal__controls--header">
+                  <div v-if="hasBeenLocalized" class="apos-modal__locale">
                     <span class="apos-modal__locale-label">
                       {{ $t('apostrophe:locale') }}:
                     </span> <span class="apos-modal__locale-name">
                       {{ currentLocale }}
                     </span>
                   </div>
-                  <div class="apos-modal__controls--primary" v-if="hasPrimaryControls">
+                  <div v-if="hasPrimaryControls" class="apos-modal__controls--primary">
                     <slot name="primaryControls" />
                   </div>
                 </div>
               </div>
-              <div class="apos-modal__breadcrumbs" v-if="hasBreadcrumbs">
+              <div v-if="hasBreadcrumbs" class="apos-modal__breadcrumbs">
                 <slot class="apos-modal__breadcrumbs" name="breadcrumbs" />
               </div>
             </header>
@@ -308,7 +308,7 @@ export default {
       top: 0;
       bottom: 0;
       transform: translateX(0);
-      width: 90%;
+      width: 100%;
       border-radius: 0;
       height: 100vh;
 
@@ -339,6 +339,12 @@ export default {
       }
     }
 
+    &.apos-modal__inner--full {
+      @media screen and (min-width: 800px) {
+        max-width: 100%;
+      }
+    }
+
     &.slide-left-enter,
     &.slide-left-leave-to {
       transform: translateX(100%);
@@ -448,7 +454,7 @@ export default {
     justify-content: flex-end;
     flex-grow: 1;
   }
-  .apos-modal__controls--primary ::v-deep {
+  :deep(.apos-modal__controls--primary) {
     & > .apos-button__wrapper,
     & > .apos-context-menu {
       margin-left: 7.5px;

package/modules/@apostrophecms/modal/ui/apos/components/AposModalBreadcrumbs.vue

@@ -2,11 +2,13 @@
   <nav :class="['apos-breadcrumb', classObj]" aria-label="breadcrumb">
     <ol class="apos-breadcrumb__items">
       <li
-        v-for="(item, index) in items" :key="index"
+        v-for="(item, index) in items"
+        :key="index"
         :class="`apos-breadcrumb__item ${modifier}`"
       >
         <component
-          :is="item.target ? 'button' : 'span'" :data-apos-target="item.target"
+          :is="item.target ? 'button' : 'span'"
+          :data-apos-target="item.target"
           :type="item.target ? 'button' : null"
           :aria-label="item.target ? {
             key: 'apostrophe:returnToPage',
@@ -17,8 +19,9 @@
           {{ item.label }}
         </component>
         <ChevronRightIcon
-          class="apos-breadcrumb__chevron" :size="13"
           v-if="index !== last"
+          class="apos-breadcrumb__chevron"
+          :size="13"
         />
       </li>
     </ol>
@@ -26,7 +29,7 @@
 </template>
 
 <script>
-import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
+import ChevronRightIcon from '@apostrophecms/vue-material-design-icons/ChevronRight.vue';
 
 export default {
   name: 'AposModalBreadcrumbs',

package/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue

@@ -28,8 +28,8 @@
             {{ localize(content.description) }}
           </p>
           <Component
-            v-if="content.body"
             :is="content.body.component"
+            v-if="content.body"
             v-bind="content.body.props"
           />
           <div v-if="content.form" class="apos-confirm__schema">
@@ -48,15 +48,15 @@
               @click="cancel"
             />
             <AposButton
+              ref="confirm"
               class="apos-confirm__btn"
               :label="affirmativeLabel"
-              @click="confirm"
               :type="content.theme || 'primary'"
               :disabled="isDisabled"
-              ref="confirm"
+              @click="confirm"
             />
           </div>
-          <p class="apos-confirm__note" v-if="content.note">
+          <p v-if="content.note" class="apos-confirm__note">
             {{ localize(content.note) }}
           </p>
         </template>
@@ -167,7 +167,7 @@ export default {
   justify-content: center;
 }
 
-::v-deep .apos-modal__inner {
+:deep(.apos-modal__inner) {
   top: auto;
   right: auto;
   bottom: auto;
@@ -177,17 +177,17 @@ export default {
   text-align: center;
 }
 
-::v-deep .apos-modal__overlay {
+:deep(.apos-modal__overlay) {
   .apos-modal + .apos-confirm & {
     display: block;
   }
 }
 
-::v-deep .apos-modal__body {
+:deep(.apos-modal__body) {
   padding: 60px;
 }
 
-::v-deep .apos-modal__body-main {
+:deep(.apos-modal__body-main) {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -223,7 +223,7 @@ export default {
   margin-top: $spacing-base;
 }
 
-::v-deep .apos-schema .apos-field {
+:deep(.apos-schema .apos-field) {
   margin-bottom: $spacing-base;
 }
 

package/modules/@apostrophecms/modal/ui/apos/components/AposModalLip.vue

@@ -1,14 +1,14 @@
 <template>
   <!-- Disabling since the SVG is mostly not active vue template code. -->
   <!-- eslint-disable vue/max-attributes-per-line -->
-  <div class="apos-modal-lip" ref="lip">
+  <div ref="lip" class="apos-modal-lip">
     <div class="apos-modal-lip__shadow">
       <svg width="406px" height="56px" viewBox="0 0 406 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
         <title>Shadow</title>
         <defs>
           <rect id="shadow-path-1" x="0" y="0" width="406" height="56" />
           <rect id="shadow-path-3" x="-13" y="20" width="432" height="83" />
-          <filter x="-6.2%" y="-28.9%" width="112.5%" height="165.1%" filterUnits="objectBoundingBox" id="shadow-filter-4">
+          <filter id="shadow-filter-4" x="-6.2%" y="-28.9%" width="112.5%" height="165.1%" filterUnits="objectBoundingBox">
             <feMorphology radius="3" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1" />
             <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1" />
             <feGaussianBlur stdDeviation="6.5" in="shadowOffsetOuter1" result="shadowBlurOuter1" />

package/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue

@@ -30,7 +30,7 @@
                 class="apos-share-draft__toggle"
                 @toggle="toggle"
               />
-              <p @click="toggle" class="apos-share-draft__toggle-label">
+              <p class="apos-share-draft__toggle-label" @click="toggle">
                 {{ $t('apostrophe:shareDraftEnable') }}
               </p>
             </div>
@@ -42,8 +42,8 @@
               :duration="200"
             >
               <div
-                class="apos-share-draft__url-block"
                 v-show="!disabled"
+                class="apos-share-draft__url-block"
               >
                 <input
                   v-model="shareUrl"
@@ -74,8 +74,8 @@
 </template>
 
 <script>
-import Close from 'vue-material-design-icons/Close.vue';
-import LinkVariant from 'vue-material-design-icons/LinkVariant.vue';
+import Close from '@apostrophecms/vue-material-design-icons/Close.vue';
+import LinkVariant from '@apostrophecms/vue-material-design-icons/LinkVariant.vue';
 
 export default {
   components: {
@@ -213,7 +213,7 @@ export default {
   justify-content: center;
 }
 
-::v-deep .apos-modal__inner {
+:deep(.apos-modal__inner) {
   top: auto;
   right: auto;
   bottom: auto;
@@ -223,17 +223,17 @@ export default {
   border-radius: 15px;
 }
 
-::v-deep .apos-modal__overlay {
+:deep(.apos-modal__overlay) {
   .apos-modal + .apos-share-draft & {
     display: block;
   }
 }
 
-::v-deep .apos-modal__body {
+:deep(.apos-modal__body) {
   padding: 20px;
 }
 
-::v-deep .apos-modal__body-main {
+:deep(.apos-modal__body-main) {
   display: flex;
   flex-direction: column;
   align-items: center;

package/modules/@apostrophecms/modal/ui/apos/components/AposModalTabs.vue

@@ -2,13 +2,14 @@
   <div class="apos-modal-tabs">
     <ul class="apos-modal-tabs__tabs">
       <li
-        class="apos-modal-tabs__tab"
         v-for="tab in tabs"
-        :key="tab.name"
         v-show="tab.isVisible !== false"
+        :key="tab.name"
+        class="apos-modal-tabs__tab"
       >
         <button
-          :id="tab.name" class="apos-modal-tabs__btn"
+          :id="tab.name"
+          class="apos-modal-tabs__btn"
           :aria-selected="tab.name === current ? true : false"
           @click="selectTab"
         >

package/modules/@apostrophecms/modal/ui/apos/components/AposModalToolbar.vue

@@ -35,16 +35,16 @@ export default {
     justify-content: space-between;
   }
 
-  .apos-toolbar__group--left > * {
-    margin-right: 7.5px;
+  .apos-toolbar__group {
+    display: flex;
+    align-items: center;
   }
 
-  .apos-toolbar__group--right > * {
-    margin-left: 20px;
+  .apos-toolbar__group--left > :deep(*) {
+    margin-right: 7.5px;
   }
 
-  .apos-toolbar__group {
-    display: flex;
-    align-items: center;
+  .apos-toolbar__group--right > :deep(*) {
+    margin-left: 20px;
   }
 </style>

package/modules/@apostrophecms/modal/ui/apos/components/TheAposModals.vue

@@ -1,11 +1,13 @@
 <template>
   <div
-    id="apos-modals" :class="themeClass"
+    id="apos-modals"
+    :class="themeClass"
   >
     <component
-      v-for="modal in stack" :key="modal.id"
-      :is="modal.componentName"
       v-bind="modal.props"
+      :is="modal.componentName"
+      v-for="modal in stack"
+      :key="modal.id"
       @modal-result="modal.result = $event"
       @safe-close="resolve(modal)"
     />
@@ -64,7 +66,7 @@ export default {
   },
   methods: {
     async execute(componentName, props) {
-      return new Promise((resolve, reject) => {
+      return new Promise((resolve) => {
         const item = {
           id: cuid(),
           componentName,
@@ -112,6 +114,22 @@ export default {
       };
 
       return properties;
+    },
+
+    async confirm(content, options = {}) {
+      return this.execute(apos.modal.components.confirm, {
+        content,
+        mode: 'confirm',
+        options
+      });
+    },
+
+    async alert(alertContent, options = {}) {
+      return this.execute(apos.modal.components.confirm, {
+        content: alertContent,
+        mode: 'alert',
+        options
+      });
     }
   }
 };

package/modules/@apostrophecms/modal/ui/apos/composables/AposFocus.js

@@ -0,0 +1,95 @@
+import { ref } from 'vue';
+
+export function useAposFocus() {
+  const elementsToFocus = ref([]);
+  const focusedElement = ref(null);
+
+  return {
+    elementsToFocus,
+    focusedElement,
+    cycleElementsToFocus,
+    focuslastmodalfocusedelement,
+    storeFocusedElement,
+    focusElement,
+    isElementVisible
+  };
+
+  // Adapted from https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700
+  // All the elements inside modal which you want to make focusable.
+  //
+  // This has been adapted to Vue logic with `this.elementsToFocus` array as a data
+  // so that any elements, not only from a modal but a menu for instance, can be focusable.
+  // `cycleElementsToFocus` listeners relies on this dynamic list which has the advantage of
+  // taking new or less elements to focus, after an update has happened inside a modal,
+  // like an XHR call to get the pieces list in the AposDocsManager modal, for instance.
+  function cycleElementsToFocus(e) {
+    if (!elementsToFocus.value.length) {
+      return;
+    }
+
+    const isTabPressed = e.key === 'Tab' || e.code === 'Tab';
+    if (!isTabPressed) {
+      return;
+    }
+
+    const firstElementToFocus = elementsToFocus.value.at(0);
+    const lastElementToFocus = elementsToFocus.value.at(-1);
+
+    // If shift key pressed for shift + tab combination
+    if (e.shiftKey) {
+      if (document.activeElement === firstElementToFocus) {
+        // Add focus for the last focusable element
+        lastElementToFocus.focus();
+        e.preventDefault();
+      }
+      return;
+    }
+
+    // If tab key is pressed
+    if (document.activeElement === lastElementToFocus) {
+      // Add focus for the first focusable element
+      firstElementToFocus.focus();
+      e.preventDefault();
+    }
+  }
+
+  // Focus the last focused element from the last modal.
+  // If it is not focusable (not visible/not in the DOM),
+  // fallbacks to the first focusable element from the last modal.
+  function focuslastmodalfocusedelement() {
+    const lastModal = apos.modal.stack.at(-1);
+
+    if (!lastModal) {
+      return;
+    }
+
+    const { focusedElement, elementsToFocus } = lastModal;
+
+    focusElement(focusedElement, elementsToFocus[0]);
+  }
+
+  function storeFocusedElement(e) {
+    focusedElement.value = e.target;
+  }
+
+  // Iterate through elements given in arguments and
+  // focus the first element that exists in the DOM.
+  function focusElement(...elementsToFocus) {
+    for (const element of elementsToFocus) {
+      const isAlreadySelected = document.activeElement === element;
+
+      if (!element || !isElementVisible(element)) {
+        continue;
+      }
+      if (!isAlreadySelected) {
+        element.focus();
+      }
+      // Element exists in the DOM and is focused, stop iterating.
+      return;
+    }
+  }
+
+  function isElementVisible(element) {
+    return element.offsetParent !== null;
+  }
+}

package/modules/@apostrophecms/modal/ui/apos/mixins/AposDocsManagerMixin.js

@@ -12,8 +12,7 @@ export default {
       icons: {},
       // If passing in chosen items from the relationship input, use those
       // as initially checked.
-      checked: Array.isArray(this.chosen) ? this.chosen.map(item => item._id)
-        : [],
+      checked: Array.isArray(this.chosen) ? this.chosen.map(item => item._id) : [],
       checkedDocs: Array.isArray(this.chosen) ? klona(this.chosen) : [],
       // Remember relationship subfield values even if a document
       // is temporarily deselected, easing the user's pain if they
@@ -86,7 +85,7 @@ export default {
   mounted() {
     this.docsManagerAddEventHandlers();
   },
-  destroyed() {
+  unmounted() {
     this.docsManagerRemoveEventHandlers();
   },
   watch: {

package/modules/@apostrophecms/modal/ui/apos/mixins/AposEditorMixin.js

@@ -20,6 +20,12 @@ import {
 } from 'Modules/@apostrophecms/schema/lib/conditionalFields.js';
 
 export default {
+  props: {
+    parentFollowingValues: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     return {
       docFields: {

package/modules/@apostrophecms/notification/index.js

@@ -154,7 +154,7 @@ module.exports = {
           dismissed
         });
 
-        return self.db.updateOne({ _id }, {
+        await self.db.updateOne({ _id }, {
           $set: {
             dismissed
           },
@@ -164,8 +164,8 @@ module.exports = {
         });
       }
     },
-    delete(req, _id) {
-      return self.db.deleteMany({ _id });
+    async delete(req, _id) {
+      await self.db.deleteMany({ _id });
     }
   }),
   apiRoutes(self) {
@@ -414,7 +414,7 @@ module.exports = {
 
       async ensureCollection() {
         self.db = self.apos.db.collection('aposNotifications');
-        return self.db.createIndex({
+        await self.db.createIndex({
           userId: 1,
           createdAt: 1
         });

package/modules/@apostrophecms/notification/ui/apos/apps/AposNotification.js

@@ -1,16 +1,13 @@
-import Vue from 'Modules/@apostrophecms/ui/lib/vue';
+import createApp from 'Modules/@apostrophecms/ui/lib/vue';
 
 export default function() {
-  if (!apos.login.user) {
+  const component = apos.vueComponents.TheAposNotifications;
+  const el = document.querySelector('#apos-notification');
+  if (!apos.login.user || !el) {
     // The user scene is being used but no one is logged in
     // (example: the login page)
     return;
   }
-
-  return new Vue({
-    el: '#apos-notification',
-    render: function (h) {
-      return h('TheAposNotifications');
-    }
-  });
+  const app = createApp(component);
+  app.mount(el);
 };