apostrophe 4.3.3 → 4.4.1

package/modules/@apostrophecms/area/ui/apos/components/AposAreaWidget.vue

@@ -498,29 +498,35 @@ export default {
     min-height: 50px;
     border-radius: var(--a-border-radius);
     outline: 1px solid transparent;
-    transition: outline 0.2s ease;
+    transition: outline 200ms ease;
+
     &.apos-is-highlighted {
       outline: 1px dashed var(--a-primary-transparent-50);
     }
+
     &.apos-is-focused {
       outline: 1px dashed var(--a-primary);
+
       &:deep(.apos-rich-text-editor__editor.apos-is-visually-empty) {
         box-shadow: none;
       }
     }
+
     &.apos-is-ui-adjusted {
       .apos-area-widget-controls--modify {
         transform: translate3d(-10px, 50px, 0);
       }
+
       .apos-area-widget__label {
         transform: translate(-10px, 10px);
       }
     }
 
-    .apos-area-widget-inner &:after {
+    .apos-area-widget-inner &::after {
       display: none;
     }
-    .apos-area-widget-inner &:before {
+
+    .apos-area-widget-inner &::before {
       z-index: $z-index-under;
       top: 0;
       left: 0;
@@ -531,17 +537,19 @@ export default {
       background-color: var(--a-base-5);
       pointer-events: none;
     }
-    .apos-area-widget-inner &.apos-is-focused:before,
-    .apos-area-widget-inner &.apos-is-highlighted:before {
+
+    .apos-area-widget-inner &.apos-is-focused::before,
+    .apos-area-widget-inner &.apos-is-highlighted::before {
       z-index: $z-index-default;
     }
   }
 
   .apos-area-widget-inner .apos-area-widget-inner {
-    &.apos-is-highlighted:before {
+    &.apos-is-highlighted::before {
       opacity: 0.1;
     }
-    &.apos-is-focused:before {
+
+    &.apos-is-focused::before {
       opacity: 0.15;
     }
   }
@@ -551,11 +559,12 @@ export default {
     position: absolute;
     opacity: 0;
     pointer-events: none;
-    transition: all 0.3s ease;
+    transition: all 300ms ease;
 
     &.apos-area-widget__label {
       z-index: $z-index-widget-label;
     }
+
     &.apos-is-focused {
       z-index: $z-index-widget-focused-controls;
     }
@@ -564,10 +573,12 @@ export default {
   .apos-area-widget-controls--modify {
     right: 0;
     transform: translate3d(-10px, 30px, 0);
+
     :deep(.apos-button-group__inner) {
       border: 1px solid var(--a-primary-transparent-25);
       box-shadow: var(--a-box-shadow);
     }
+
     :deep(.apos-button-group) .apos-button {
       width: 32px;
       height: 32px;
@@ -576,13 +587,16 @@ export default {
       border-radius: var(--a-border-radius);
       background-color: transparent;
       color: var(--a-base-1);
+
       &:hover[disabled] {
         background-color: transparent;
       }
+
       &:hover:not([disabled]), &:active:not([disabled]), &:focus:not([disabled]) {
         background-color: var(--a-primary-transparent-10);
         color: var(--a-primary);
       }
+
       &[disabled] {
         color: var(--a-base-6);
       }
@@ -596,7 +610,6 @@ export default {
   }
 
   .apos-area-widget-controls--add {
-
     :deep(.apos-button__wrapper) {
       padding: 8px;
 
@@ -604,13 +617,13 @@ export default {
         transform: scale(1.15);
         background-size: 150% 100%;
         border-radius: 10px;
-        transition-duration: 0.5s;
+        transition-duration: 500ms;
 
         /* stylelint-disable-next-line max-nesting-depth */
         .apos-button__label {
           max-width: 100px;
           max-height: 100px;
-          transition-duration: 0.5s;
+          transition-duration: 500ms;
           padding: 0 5px 0 0;
         }
 
@@ -628,21 +641,21 @@ export default {
     :deep(.apos-button__label) {
       display: inline-block;
       overflow: hidden;
+      font-size: var(--a-type-small);
+      transition: max-width 200ms var(--a-transition-timing-bounce);
       max-width: 0;
       max-height: 0;
-      transition: max-width 0.2s var(--a-transition-timing-bounce);
       white-space: nowrap;
-      font-size: var(--a-type-small);
     }
 
     :deep(.apos-button) {
       display: flex;
       align-items: center;
       justify-content: center;
+      padding: 5px;
+      transition: all 200ms var(--a-transition-timing-bounce);
       background-image: linear-gradient( 45deg, var(--a-primary), var(--a-primary-dark-15), var(--a-primary-light-40), var(--a-primary) );
       background-size: 200% 100%;
-      transition: all 0.2s var(--a-transition-timing-bounce);
-      padding: 5px;
       border-radius: 12px;
     }
   }
@@ -665,7 +678,7 @@ export default {
     right: 0;
     display: flex;
     transform: translateY(-100%);
-    transition: opacity 0.3s ease;
+    transition: opacity 300ms ease;
   }
 
   .apos-area-widget-inner .apos-area-widget-inner .apos-area-widget__label {
@@ -675,6 +688,7 @@ export default {
 
   .apos-area-widget__breadcrumbs {
     @include apos-list-reset();
+
     display: flex;
     align-items: center;
     margin: 0 0 8px;
@@ -687,10 +701,11 @@ export default {
   .apos-area-widget__breadcrumb,
   .apos-area-widget__breadcrumb :deep(.apos-button__content) {
     @include type-help;
+
     padding: 2px;
     white-space: nowrap;
     color: var(--a-base-1);
-    transition: background-color 0.3s var(--a-transition-timing-bounce);
+    transition: background-color 300ms var(--a-transition-timing-bounce);
   }
 
   .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb,
@@ -699,12 +714,12 @@ export default {
   }
 
   .apos-area-widget__breadcrumb--widget-icon {
+    margin-right: 2px;
     padding: 3px 2px 2px;
-    background-color: var(--a-primary-transparent-10);
     color: var(--a-primary);
+    transition: background-color 300ms var(--a-transition-timing-bounce);
+    background-color: var(--a-primary-transparent-10);
     border-radius: 4px;
-    margin-right: 2px;
-    transition: background-color 0.3s var(--a-transition-timing-bounce);
   }
 
   .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb--widget-icon {
@@ -718,6 +733,7 @@ export default {
 
   .apos-area-widget__breadcrumb :deep(.apos-button) {
     color: var(--a-primary-dark-10);
+
     &:hover, &:active, &:focus {
       text-decoration: none;
     }

package/modules/@apostrophecms/area/ui/apos/components/AposWidgetControls.vue

@@ -189,32 +189,39 @@ $z-index-button-foreground: 2;
     z-index: $z-index-button-foreground;
     position: relative;
   }
+
   :deep(.apos-button__icon) {
-    transition: all 0.3s var(--a-transition-timing-bounce);
+    transition: all 300ms var(--a-transition-timing-bounce);
   }
+
   :deep(.apos-button) {
     background-color: transparent;
 
-    &:not([disabled]):hover:after {
+    &:not([disabled]):hover::after {
       background-color: var(--a-base-9);
     }
+
     &:active {
       background-color: transparent;
     }
+
     &:active .apos-button__icon {
       transform: scale(0.8);
     }
-    &:active:after, &:focus:after {
+
+    &:active::after, &:focus::after {
       background-color: var(--a-primary-transparent-25);
     }
-    &:after,
-    &:not([disabled]):hover:after,
-    &:not([disabled]):active:after,
-    &:not([disabled]):focus:after {
+
+    &::after,
+    &:not([disabled]):hover::after,
+    &:not([disabled]):active::after,
+    &:not([disabled]):focus::after {
       opacity: 1;
       transform: scale(1.15) translateY(0);
     }
-    &:after {
+
+    &::after {
       content: '';
       z-index: $z-index-button-background;
       position: absolute;
@@ -225,9 +232,9 @@ $z-index-button-foreground: 2;
       height: 100%;
       background-color: transparent;
       transition:
-        opacity 0.5s var(--a-transition-timing-bounce),
-        transform 0.5s var(--a-transition-timing-bounce),
-        background-color 0.5s ease;
+        opacity 500ms var(--a-transition-timing-bounce),
+        transform 500ms var(--a-transition-timing-bounce),
+        background-color 500ms ease;
       opacity: 0;
       transform: scale(0.3) translateY(-4px);
     }

package/modules/@apostrophecms/busy/ui/apos/components/TheAposBusy.vue

@@ -51,18 +51,15 @@ export default {
 .apos-busy {
   z-index: $z-index-busy;
   position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  justify-content: center;
-  align-items: center;
   background: var(--a-overlay);
-  transition: opacity 0.5s ease;
-  transition-delay: 0.3s;
+  transition: opacity 500ms ease;
+  transition-delay: 300ms;
   opacity: 0;
   pointer-events: none;
 }
@@ -76,6 +73,7 @@ export default {
   z-index: $z-index-default;
   width: 60px;
   height: 60px;
+
   &:deep(svg) {
     width: 100%;
     height: 100%;

package/modules/@apostrophecms/command-menu/index.js

@@ -12,7 +12,7 @@ module.exports = {
           type: 'item',
           label: 'apostrophe:commandMenuShowShortcutList',
           action: {
-            type: 'open-modal',
+            type: '@apostrophecms/command-menu:open-modal',
             payload: {
               name: 'AposCommandMenuShortcut',
               props: { moduleName: '@apostrophecms/command-menu' }
@@ -382,12 +382,17 @@ module.exports = {
           .forEach(([ modal, groups ]) => Object.values(groups)
             .forEach(group => Object.entries(group.commands)
               .forEach(([ name, field ]) => {
-                self.detectShortcutConflict({
-                  shortcuts,
-                  shortcut: field.shortcut.toUpperCase(),
-                  modal: modal === 'default' ? 'admin-bar' : modal,
-                  moduleName: name
-                });
+                field.shortcut
+                  .toUpperCase()
+                  .split(' ')
+                  .forEach(shortcut => {
+                    self.detectShortcutConflict({
+                      shortcuts,
+                      shortcut,
+                      modal: modal === 'default' ? 'admin-bar' : modal,
+                      moduleName: name
+                    });
+                  });
               })
             )
           );

package/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuKey.vue

@@ -57,20 +57,21 @@ export default {
 
 .apos-command-menu-key {
   @include type-small;
+
   display: inline-flex;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: $spacing-double;
   height: $spacing-double;
-  padding: 3px $spacing-half;
   margin-left: $spacing-half;
+  padding: 3px $spacing-half;
   border: 1px solid var(--a-base-7);
-  border-radius: 3px;
-  border-color: var(--a-base-7);
   border-bottom: 2px solid var(--a-base-7);
   color: var(--a-base-1);
   background: linear-gradient(180deg, var(--a-base-10) 0%, var(--a-base-9) 100%);
+  border-radius: 3px;
+  border-color: var(--a-base-7);
   font-weight: 600;
 
   &.apos-command-menu-key-auto {
@@ -79,15 +80,16 @@ export default {
 }
 
 .apos-command-menu-text {
+  @include type-small;
+
   display: inline-flex;
+  box-sizing: border-box;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   width: auto;
   height: $spacing-double;
-  padding: 3px 2px;
   margin-left: $spacing-half;
-  @include type-small;
+  padding: 3px 2px;
   color: var(--a-base-1);
 }
 

package/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue

@@ -3,7 +3,6 @@
     :modal="modal"
     class="apos-command-menu-shortcut"
     @esc="close"
-    @no-modal="$emit('safe-close')"
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
   >
@@ -130,8 +129,7 @@ export default {
 }
 
 :deep(.apos-modal__inner) {
-  top: auto;
-  left: auto;
+  inset: auto $spacing-quadruple $spacing-quadruple auto;
   max-width: 700px;
   height: auto;
   border-radius: $spacing-base + $spacing-half;
@@ -141,12 +139,16 @@ export default {
   display: none;
 }
 
+:deep(.apos-modal__body-main) {
+  padding-bottom: 15px;
+}
+
 .apos-modal__header {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  border-bottom: 1px solid var(--a-base-8);
   padding: $spacing-base + $spacing-half 0;
+  border-bottom: 1px solid var(--a-base-8);
 
   .apos-modal__header__main {
     display: flex;
@@ -155,67 +157,78 @@ export default {
 
   :deep(.apos-button) {
     display: inline-flex;
-    align-items: center;
     box-sizing: border-box;
+    align-items: center;
     width: auto;
     height: $spacing-double;
-    padding: 3px $spacing-half;
     margin-right: $spacing-base;
+    padding: 3px $spacing-half;
+    border-bottom: 2px solid var(--a-base-7);
     vertical-align: bottom;
     border-radius: 3px;
     border-color: var(--a-base-7);
-    border-bottom: 2px solid var(--a-base-7);
   }
 }
+
 .apos-modal__heading {
+  @include type-base;
+
   display: inline-block;
   margin: 0;
-  @include type-base;
   font-size: var(--a-type-large);
   line-height: $spacing-double;
 }
 
 .apos-command-menu-key {
   :deep(button) {
+    box-sizing: border-box;
     width: $spacing-double;
     height: $spacing-double;
-    padding: 3px $spacing-half;
     margin-left: $spacing-half;
-    box-sizing: border-box;
+    padding: 3px $spacing-half;
+    border-bottom: 2px solid var(--a-base-7);
     border-radius: 3px;
     border-color: var(--a-base-7);
-    border-bottom: 2px solid var(--a-base-7);
   }
 }
 
 .apos-command-menu-shortcut-groups {
+  overflow: hidden auto;
   padding: $spacing-base $spacing-double $spacing-base + $spacing-half;
+  max-height: 70vh;
 }
+
 .apos-command-menu-shortcut-group + .apos-command-menu-shortcut-group {
   padding-top: $spacing-base + $spacing-half;
 }
+
 .apos-command-menu-shortcut-group {
   @include type-base;
+
   font-weight: 400;
 }
+
 .apos-command-menu-shortcut-group-title {
+  @include type-base;
+
+  box-sizing: border-box;
   height: 24px;
   margin: 0;
   padding: $spacing-half 0;
-  box-sizing: border-box;
-  @include type-base;
   color: var(--a-base-3);
   text-align: left;
 }
+
 .apos-command-menu-shortcut-command {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
   height: 28px;
   padding: $spacing-half 0;
 }
+
 .apos-command-menu-shortcut-command-title {
   flex: 1 1 auto;
   margin-right: $spacing-base;

package/modules/@apostrophecms/command-menu/ui/apos/components/TheAposCommandMenu.vue

@@ -8,7 +8,10 @@
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia';
 import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
+
 export default {
   name: 'TheAposCommandMenu',
   mixins: [ AposThemeMixin ],
@@ -23,11 +26,11 @@ export default {
   data() {
     return {
       previousKey: '',
-      modal: 'default',
-      keyboardShortcutListener() {}
+      modal: 'default'
     };
   },
   computed: {
+    ...mapState(useModalStore, [ 'stack' ]),
     shortcuts() {
       const modals = Object.values(this.modals[this.modal] || {});
 
@@ -45,26 +48,60 @@ export default {
       );
     }
   },
+  watch: {
+    stack(newStack) {
+      this.modal = this.getFirstNonShortcutModal();
+    }
+  },
   mounted() {
-    apos.bus.$on('open-modal', async state => {
+    apos.bus.$on('@apostrophecms/command-menu:open-modal', async state => {
       await apos.modal.execute(state.name, state.props);
     });
 
-    this.keyboardShortcutListener = (event) => {
+    document.addEventListener('keydown', this.keyboardShortcutListener.bind(this));
+  },
+  beforeUnmount() {
+    document.removeEventListener('keydown', this.keyboardShortcutListener);
+  },
+  methods: {
+    ...mapActions(useModalStore, [ 'getAt', 'getProperties' ]),
+    delay(resolve, ms) {
+      return new Promise(() => {
+        setTimeout(resolve, ms);
+      });
+    },
+    getModal() {
+      return this.modal;
+    },
+    getFirstNonShortcutModal(index = -1) {
+      const modal = this.getAt(index);
+      const properties = this.getProperties(modal.id);
+
+      return properties.itemName === '@apostrophecms/command-menu:shortcut'
+        ? this.getFirstNonShortcutModal(index + -1)
+        : properties.itemName || 'default';
+    },
+    keyboardShortcutListener(event) {
       if (event.target.nodeName !== 'INPUT' && event.target.nodeName !== 'TEXTAREA' && document.activeElement.contentEditable !== 'true') {
         const key = [
           [ 'ALT', event.altKey ],
           [ 'CTRL', event.ctrlKey ],
           [ 'META', event.metaKey ],
           [ 'SHIFT', event.shiftKey ],
-          [ 'KEY', event.key.length === 1 ? [ this.previousKey, event.key.toUpperCase() ].filter(value =>
-            value).join(',') : event.key.toUpperCase() ]
+          [ 'KEY', event.key.toUpperCase() ]
         ]
           .filter(([ , value ]) => value)
           .map(([ key, value ]) => key === 'KEY' ? value : key)
           .join('+');
 
-        const action = this.shortcuts[key] || this.shortcuts[key.startsWith('SHIFT+') ? key.slice('SHIFT+'.length) : key];
+        const keys = this.previousKey
+          ? `${this.previousKey},${key}`
+          : key;
+
+        const action = this.shortcuts[keys] ||
+          this.shortcuts[keys.startsWith('SHIFT+')
+            ? keys.slice('SHIFT+'.length)
+            : keys];
         if (action) {
           event.preventDefault();
           apos.bus.$emit(action.type, action.payload);
@@ -78,42 +115,7 @@ export default {
           }, 1000);
         }
       }
-    };
-
-    document.addEventListener('keydown', this.keyboardShortcutListener.bind(this));
-
-    apos.bus.$on('modal-launched', this.updateModal);
-    apos.bus.$on('modal-resolved', this.updateModal);
-  },
-  beforeUnmount() {
-    document.removeEventListener('keydown', this.keyboardShortcutListener);
-
-    apos.bus.$off('modal-launched', this.updateModal);
-    apos.bus.$off('modal-resolved', this.updateModal);
-  },
-  methods: {
-    delay(resolve, ms) {
-      return new Promise(() => {
-        setTimeout(resolve, ms);
-      });
-    },
-    getModal() {
-      return this.modal;
-    },
-    getFirstNonShortcutModal(index = -1) {
-      const modal = apos.modal.getAt(index);
-      const properties = apos.modal.getProperties(modal.id);
-
-      return properties.itemName === '@apostrophecms/command-menu:shortcut'
-        ? this.getFirstNonShortcutModal(index + -1)
-        : properties.itemName || 'default';
-    },
-    updateModal() {
-      this.modal = this.getFirstNonShortcutModal();
     }
   }
 };
 </script>
-
-<style lang="scss" scoped>
-</style>

package/modules/@apostrophecms/doc-type/index.js

@@ -172,7 +172,7 @@ module.exports = {
         },
         [`${self.__meta.name}:manager`]: {
           '@apostrophecms/command-menu:manager': {
-            label: '',
+            label: 'apostrophe:commandMenuManager',
             commands: [
               `${self.__meta.name}:create-new`,
               `${self.__meta.name}:search`,
@@ -1598,6 +1598,7 @@ module.exports = {
         browserOptions.previewDraft = self.isLocalized() &&
           !browserOptions.autopublish &&
           self.options.previewDraft;
+        browserOptions.relationshipSuggestionFields = self.options.relationshipSuggestionFields;
 
         return browserOptions;
       }

package/modules/@apostrophecms/doc-type/ui/apos/components/AposDocEditor.vue

@@ -6,7 +6,6 @@
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
     @esc="confirmAndCancel"
-    @no-modal="$emit('safe-close')"
   >
     <template #secondaryControls>
       <AposButton
@@ -137,7 +136,8 @@ export default {
   ],
   provide () {
     return {
-      originalDoc: this.originalDoc
+      originalDoc: this.originalDoc,
+      liveOriginalDoc: this.docFields
     };
   },
   props: {
@@ -158,7 +158,7 @@ export default {
       default: null
     }
   },
-  emits: [ 'modal-result', 'safe-close' ],
+  emits: [ 'modal-result' ],
   data() {
     return {
       docType: this.moduleName,
@@ -835,6 +835,7 @@ export default {
 
   .apos-doc-editor__utility {
     padding: $spacing-quadruple $spacing-base;
+
     @include media-up(lap) {
       padding: $spacing-quadruple $spacing-double;
     }

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

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