apostrophe 4.3.2 → 4.4.0

package/modules/@apostrophecms/image/ui/apos/components/AposMediaUploader.vue

@@ -248,18 +248,22 @@ export default {
 <style lang="scss" scoped>
   .apos-media-uploader {
     @include apos-button-reset();
-    box-sizing: border-box;
+    @include apos-transition();
+
     display: flex;
+    box-sizing: border-box;
     align-items: center;
     justify-content: center;
     border: 2px dashed var(--a-base-3);
+    color: inherit;
     grid-column: 1 / 3;
     grid-row: 1 / 3;
-    @include apos-transition();
-    color: inherit;
   }
+
   .apos-media-uploader--enabled {
     &::after {
+      @include apos-transition($duration: 0.3s);
+
       z-index: $z-index-under;
       position: absolute;
       content: '';
@@ -276,7 +280,6 @@ export default {
         5% 100%;
       background-repeat: no-repeat;
       filter: blur(10px);
-      @include apos-transition($duration: 0.3s);
     }
 
     &:hover,
@@ -289,8 +292,9 @@ export default {
         width: 102%;
         height: 102%;
       }
+
       .apos-media-uploader__icon {
-        fill: url(#apos-upload-gradient);
+        fill: url("#apos-upload-gradient");
         transform: translateY(-2px);
       }
     }
@@ -303,21 +307,22 @@ export default {
 
   .apos-media-uploader__inner {
     display: flex;
-    width: 100%;
-    height: 100%;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 100%;
+    height: 100%;
     background-color: var(--a-background-primary);
   }
 
   .apos-media-uploader__icon {
+    @include apos-transition($duration: 0.2s);
+
     width: 57px;
     max-width: 50%;
     height: auto;
     margin-bottom: 5px;
     fill: var(--a-text-primary);
-    @include apos-transition($duration: 0.2s);
   }
 
   .apos-media-uploader__instructions {
@@ -327,13 +332,17 @@ export default {
   .apos-media-uploader__primary,
   .apos-media-uploader__secondary {
     @include apos-p-reset();
+
     text-align: center;
   }
+
   .apos-media-uploader__secondary {
     @include type-small;
   }
+
   .apos-media-uploader__primary {
     @include type-large;
+
     max-width: 100px;
     margin: 5px auto 10px;
   }

package/modules/@apostrophecms/image-tag/index.js

@@ -7,7 +7,7 @@ module.exports = {
     autopublish: true,
     editRole: 'editor',
     publishRole: 'editor',
-    shortcut: 'G,o',
+    shortcut: 'G,Shift+I',
     relationshipSuggestionIcon: 'tag-icon'
   },
   fields: {

package/modules/@apostrophecms/login/ui/apos/components/AposLoginForm.vue

@@ -99,6 +99,7 @@ export default {
 
     &__link {
       @include type-large;
+
       position: relative;
       // AposSchema adds $spacing-quadruple margin bottom
       top: -$spacing-triple;

package/modules/@apostrophecms/login/ui/apos/components/AposResetPasswordForm.vue

@@ -64,6 +64,7 @@ export default {
       flex-direction: column;
     }
   }
+
   .apos-login-form__submit :deep(.apos-button) {
     height: 47px;
   }

package/modules/@apostrophecms/login/ui/apos/components/TheAposLogin.vue

@@ -81,8 +81,8 @@ export default {
   }
 
   .fade-stage-enter-active {
-    transition: opacity 0.2s linear;
-    transition-delay: 0.3s;
+    transition: opacity 200ms linear;
+    transition-delay: 300ms;
   }
 
   .fade-stage-enter-to,
@@ -100,12 +100,12 @@ export default {
   }
 
   .fade-body-enter-active {
-    transition: all 0.25s linear;
-    transition-delay: 0.6s;
+    transition: all 250ms linear;
+    transition-delay: 600ms;
   }
 
   .fade-body-leave-active {
-    transition: all 0.25s linear;
+    transition: all 250ms linear;
   }
 
   .fade-body-enter-to, .fade-body-leave {
@@ -117,8 +117,8 @@ export default {
   }
 
   .fade-outer-enter-active {
-    transition: opacity 0.4s linear;
-    transition-delay: 1s;
+    transition: opacity 400ms linear;
+    transition-delay: 1000ms;
   }
 
   .apos-login {
@@ -134,13 +134,14 @@ export default {
       right: 0;
       left: 0;
       display: flex;
-      justify-content: space-between;
       align-items: center;
+      justify-content: space-between;
       padding: $spacing-triple;
     }
 
     &__link {
       @include type-large;
+
       display: inline-block;
       text-decoration: underline;
       text-underline-offset: 2px;
@@ -200,25 +201,26 @@ export default {
 
     &__footer {
       @include type-base;
+
       position: absolute;
       right: 0;
       bottom: 32px;
       left: 0;
       display: flex;
-      width: 100%;
-      max-width: $login-container;
-      margin: auto;
       align-items: center;
       justify-content: flex-start;
+      width: 100%;
+      margin: auto;
+      max-width: $login-container;
     }
 
     &__project-version {
       overflow: hidden;
-      text-overflow: clip;
-      white-space: nowrap;
-      color: var(--a-base-5);
       margin-right: 0;
       margin-left: auto;
+      color: var(--a-base-5);
+      text-overflow: clip;
+      white-space: nowrap;
     }
   }
 </style>

package/modules/@apostrophecms/login/ui/apos/components/TheAposLoginHeader.vue

@@ -71,8 +71,8 @@ export default {
     z-index: $z-index-manager-display;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: flex-start;
+    justify-content: center;
   }
 
   &__project-header {
@@ -84,6 +84,7 @@ export default {
 
   &__project-subtitle {
     @include type-title;
+
     margin: 0;
     opacity: 0.6;
     line-height: 1;
@@ -93,6 +94,7 @@ export default {
 
   &__project-name {
     @include type-display;
+
     margin: 0;
     color: var(--a-text-primary);
     text-transform: capitalize;
@@ -100,6 +102,7 @@ export default {
 
   &__project-env {
     @include type-base;
+
     text-transform: capitalize;
     padding: 6px 12px;
     color: var(--a-white);
@@ -117,6 +120,7 @@ export default {
 
   &--help {
     @include type-label;
+
     margin-top: $spacing-double;
     text-align: center;
     white-space: pre-line;
@@ -124,10 +128,11 @@ export default {
 
   &--error {
     @include type-help;
-    color: var(--a-danger);
-    min-height: 13px;
+
     margin-top: 20px;
     margin-bottom: 15px;
+    color: var(--a-danger);
+    min-height: 13px;
   }
 
   &__header--center {
@@ -148,7 +153,7 @@ export default {
     }
 
     .apos-login__project-name {
-      // stylelint-disable-next-line scale-unlimited/declaration-strict-value
+      // stylelint-disable-next-line declaration-property-unit-allowed-list
       font-size: 21px;
     }
 

package/modules/@apostrophecms/modal/ui/apos/apps/AposModals.js

@@ -1,4 +1,5 @@
 import createApp from 'Modules/@apostrophecms/ui/lib/vue';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 
 export default function() {
   const component = apos.vueComponents.TheAposModals;
@@ -6,65 +7,16 @@ export default function() {
   if (!el) {
     return;
   }
-  const app = createApp(component, {
-    modals: apos.modal.modals
-  });
-  const theAposModals = app.mount(el);
+  const app = createApp(component);
+  app.mount(el);
 
-  apos.modal.execute = theAposModals.execute;
-  apos.modal.getAt = theAposModals.getAt;
-  apos.modal.getProperties = theAposModals.getProperties;
-  apos.modal.onTopOf = onTopOf;
-  apos.modal.stack = [];
-  apos.confirm = theAposModals.confirm;
-  apos.alert = theAposModals.alert;
-}
+  const modalStore = useModalStore();
 
-// Returns true if el1 is "on top of" el2 in the
-// modal stack, as viewed by the user. If el1 is a
-// modal that appears later in the stack than el2
-// (visually stacked on top), this method returns true.
-// If el2 is `document` and el1 is a modal, this
-// method returns true. For convenenience, if el1
-// or el2 is not a modal, it is treated as its DOM
-// parent modal, or as `document`. If el1 has no
-// parent modal this method always returns false.
-//
-// If el1 is no longer connected to the DOM then it
-// is also considered to be "on top" e.g. not something
-// that should concern `v-click-outside-element` and
-// similar functionality. This is necessary because
-// sometimes Vue removes elements from the DOM before
-// we can examine their relationships.
-function onTopOf(el1, el2) {
-  if (el2.matches('[data-apos-menu]')) {
-    return false;
-  }
-  if (!el1.isConnected) {
-    // If el1 is no longer in the DOM we can't make a proper determination,
-    // returning true prevents unwanted things like click-outside-element
-    // events from firing
-    return true;
-  }
-  if (!el1.matches('[data-apos-modal]')) {
-    el1 = el1.closest('[data-apos-modal]') || document;
-  }
-  if (!el2.matches('[data-apos-modal]')) {
-    el2 = el2.closest('[data-apos-modal]') || document;
-  }
-  if (el1 === document) {
-    return false;
-  }
-  if (el2 === document) {
-    return true;
-  }
-  const index1 = apos.modal.stack.findIndex(modal => modal.modalEl === el1);
-  const index2 = apos.modal.stack.findIndex(modal => modal.modalEl === el2);
-  if (index1 === -1) {
-    throw new Error('apos.modal.onTopOf: el1 is not in the modal stack');
-  }
-  if (index2 === -1) {
-    throw new Error('apos.modal.onTopOf: el2 is not in the modal stack');
-  }
-  return index1 > index2;
+  apos.modal.execute = modalStore.execute;
+  apos.modal.get = modalStore.get;
+  apos.modal.getAt = modalStore.getAt;
+  apos.modal.getProperties = modalStore.getProperties;
+  apos.modal.onTopOf = modalStore.onTopOf;
+  apos.confirm = modalStore.confirm;
+  apos.alert = modalStore.alert;
 }

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

@@ -330,6 +330,7 @@ export default {
     :deep(.apos-field--search) {
       width: 250px;
     }
+
     :deep(.apos-input) {
       height: 32px;
     }

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

@@ -11,16 +11,17 @@
       :class="classes"
       role="dialog"
       aria-modal="true"
-      :aria-labelledby="state.id"
+      :aria-labelledby="props.modalId"
       data-apos-modal
       @focus.capture="storeFocusedElement"
-      @keydown="onKeydown"
+      @esc="close"
+      @keydown.tab="onTab"
     >
       <transition :name="transitionType">
         <div
           v-if="modal.showModal"
           class="apos-modal__overlay"
-          @click="close"
+          @click="emit('esc')"
         />
       </transition>
       <transition :name="transitionType" @after-leave="$emit('inactive')">
@@ -44,7 +45,7 @@
                 <div v-if="hasSlot('secondaryControls')" class="apos-modal__controls--secondary">
                   <slot name="secondaryControls" />
                 </div>
-                <h2 :id="state.id" class="apos-modal__heading">
+                <h2 :id="props.modalId" class="apos-modal__heading">
                   <span v-if="modal.a11yTitle" class="apos-sr-only">
                     {{ $t(modal.a11yTitle) }}
                   </span>
@@ -96,17 +97,15 @@
 // transition.
 
 import {
-  ref, reactive, onMounted, computed, watch, nextTick, useSlots
+  ref, onMounted, onUnmounted, computed, watch, nextTick, useSlots
 } from 'vue';
 import { useAposFocus } from 'Modules/@apostrophecms/modal/composables/AposFocus';
-import cuid from 'cuid';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 
 const {
   cycleElementsToFocus,
-  elementsToFocus,
   focusElement,
   focusLastModalFocusedElement,
-  focusedElement,
   isElementVisible,
   storeFocusedElement
 } = useAposFocus();
@@ -119,18 +118,18 @@ const props = defineProps({
   modalTitle: {
     type: [ String, Object ],
     default: ''
+  },
+  modalId: {
+    type: String,
+    required: true
   }
 });
 
+const store = useModalStore();
+
 const slots = useSlots();
 const emit = defineEmits([ 'inactive', 'esc', 'show-modal', 'no-modal', 'ready' ]);
 const modalEl = ref(null);
-const state = reactive({
-  id: `modal:${cuid()}`,
-  elementsToFocus,
-  focusedElement,
-  modalEl
-});
 
 const transitionType = computed(() => {
   if (props.modal.type !== 'slide') {
@@ -212,10 +211,17 @@ watch(triggerFocusRefresh, (newVal) => {
   }
 });
 
-onMounted(() => {
+onMounted(async () => {
+  await nextTick();
   if (shouldTrapFocus.value) {
-    nextTick(trapFocus);
+    trapFocus();
   }
+  store.updateModalData(props.modalId, { modalEl: modalEl.value });
+  window.addEventListener('keydown', onKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeydown);
 });
 
 function onKeydown(e) {
@@ -223,25 +229,24 @@ function onKeydown(e) {
   if (hasPressedEsc) {
     close(e);
   }
-  cycleElementsToFocus(e);
+}
+
+function onTab(e) {
+  const currentModal = store.get(props.modalId);
+  cycleElementsToFocus(e, currentModal.elementsToFocus);
 }
 
 async function onEnter() {
   emit('show-modal');
-  apos.modal.stack = apos.modal.stack || [];
 
-  apos.modal.stack.push(state);
   await nextTick();
   emit('ready');
 }
 
 function onLeave() {
-  emit('no-modal');
-
-  apos.modal.stack = apos.modal.stack
-    .filter(modal => modal.id !== state.id);
-
+  store.remove(props.modalId);
   focusLastModalFocusedElement();
+  emit('no-modal');
 }
 
 function trapFocus() {
@@ -258,10 +263,13 @@ function trapFocus() {
     .map(addExcludingAttributes)
     .join(', ');
 
-  elementsToFocus.value = [ ...modalEl.value.querySelectorAll(selector) ]
+  const elementsToFocus = [ ...modalEl.value.querySelectorAll(selector) ]
     .filter(isElementVisible);
 
-  focusElement(focusedElement.value, elementsToFocus.value[0]);
+  store.updateModalData(props.modalId, { elementsToFocus });
+  const currentModal = store.get(props.modalId);
+
+  focusElement(currentModal.focusedElement, currentModal.elementsToFocus[0]);
 
   function addExcludingAttributes(element) {
     return `${element}:not([tabindex="-1"]):not([disabled]):not([type="hidden"]):not([aria-hidden])`;
@@ -269,10 +277,10 @@ function trapFocus() {
 }
 
 function close() {
-  if (apos.modal.stack.at(-1)?.id !== state.id) {
-    return;
+  const activeModalId = store.activeModal?.id;
+  if (activeModalId === props.modalId) {
+    emit('esc');
   }
-  emit('esc');
 }
 </script>
 
@@ -282,10 +290,7 @@ function close() {
   .apos-modal__inner {
     z-index: $z-index-modal;
     position: fixed;
-    top: $spacing-base;
-    right: $spacing-base;
-    bottom: $spacing-base;
-    left: $spacing-base;
+    inset: $spacing-base $spacing-base $spacing-base $spacing-base;
     display: grid;
     grid-template-rows: auto 1fr auto;
     height: calc(100vh - #{$spacing-base * 2});
@@ -295,24 +300,21 @@ function close() {
     color: var(--a-text-primary);
 
     @include media-up(lap) {
-      top: $spacing-double;
-      right: $spacing-double;
-      bottom: $spacing-double;
-      left: $spacing-double;
+      inset: $spacing-double $spacing-double $spacing-double $spacing-double;
       height: calc(100vh - #{$spacing-double * 2});
     }
 
     .apos-modal--slide & {
       position: fixed;
-      transition: transform 0.15s ease;
       top: 0;
       bottom: 0;
-      transform: translateX(0);
       width: 100%;
-      border-radius: 0;
       height: 100vh;
+      transition: transform 200ms ease;
+      transform: translateX(0);
+      border-radius: 0;
 
-      @media screen and (min-width: 800px) {
+      @include media-up(hands-wide) {
         max-width: 540px;
       }
     }
@@ -328,19 +330,19 @@ function close() {
     }
 
     &.apos-modal__inner--two-thirds {
-      @media screen and (min-width: 800px) {
+      @include media-up(hands-wide) {
         max-width: 66%;
       }
     }
 
     &.apos-modal__inner--half {
-      @media screen and (min-width: 800px) {
+      @include media-up(hands-wide) {
         max-width: 50%;
       }
     }
 
     &.apos-modal__inner--full {
-      @media screen and (min-width: 800px) {
+      @include media-up(hands-wide) {
         max-width: 100%;
       }
     }
@@ -357,7 +359,7 @@ function close() {
 
     .apos-modal--overlay & {
       transform: scale(1);
-      transition: opacity 0.15s ease, transform 0.15s ease;
+      transition: opacity 200ms ease, transform 200ms ease;
     }
 
     &.fade-enter-from,
@@ -384,15 +386,12 @@ function close() {
   .apos-modal__overlay {
     z-index: $z-index-modal;
     position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     background-color: var(--a-overlay-modal);
 
     .apos-modal--slide &,
     .apos-modal--overlay & {
-      transition: opacity 0.15s ease;
+      transition: opacity 200ms ease;
     }
 
     &.slide-left-enter-from,
@@ -425,8 +424,8 @@ function close() {
   .apos-modal__footer__inner,
   .apos-modal__header__main {
     display: flex;
-    padding: $spacing-double;
     align-items: center;
+    padding: $spacing-double;
   }
 
   .apos-modal__header__main {
@@ -453,9 +452,10 @@ function close() {
   }
 
   .apos-modal__controls--header {
-    justify-content: flex-end;
     flex-grow: 1;
+    justify-content: flex-end;
   }
+
   :deep(.apos-modal__controls--primary) {
     & > .apos-button__wrapper,
     & > .apos-context-menu {
@@ -465,6 +465,7 @@ function close() {
 
   .apos-modal__locale {
     @include type-base;
+
     margin-right: $spacing-double;
     font-weight: var(--a-weight-bold);
   }
@@ -475,6 +476,7 @@ function close() {
 
   .apos-modal__heading {
     @include type-title;
+
     margin: 0;
   }
 
@@ -484,6 +486,7 @@ function close() {
 
   .apos-modal__main--with-rails {
     grid-template-columns: 15% 1fr minmax(200px, 10%);
+
     @include media-up(lap) {
       grid-template-columns: 15% 1fr minmax(250px, $modal-rail-right-w);
     }
@@ -499,14 +502,15 @@ function close() {
 
   .apos-modal--busy .apos-modal__inner {
     $height: 190px;
+
     top: 50%;
     bottom: -50%;
     display: flex;
-    height: $height;
-    transform: translateY(math.div($height, 2) * -1);
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    height: $height;
     text-align: center;
+    transform: translateY(math.div($height, 2) * -1);
   }
 
   .apos-modal__busy-text {

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

@@ -29,6 +29,7 @@ export default {
 .apos-modal__body {
   overflow-y: auto;
   padding: $spacing-double;
+
   @include media-up(lap) {
     padding: $spacing-quadruple;
   }