apostrophe 4.6.1 → 4.7.0

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalize.vue

@@ -1012,13 +1012,17 @@ export default {
 .apos-wizard__navigation__items {
   @include apos-list-reset();
 
-  padding: $spacing-base;
+  & {
+    padding: $spacing-base;
+  }
 }
 
 .apos-wizard__navigation__item {
   @include type-small;
 
-  margin-bottom: $spacing-base + $spacing-half;
+  & {
+    margin-bottom: $spacing-base + $spacing-half;
+  }
 
   &.apos-is-active {
     color: var(--a-primary);
@@ -1028,7 +1032,9 @@ export default {
 .apos-modal__heading {
   @include type-title;
 
-  margin: 0 0 $spacing-double;
+  & {
+    margin: 0 0 $spacing-double;
+  }
 }
 
 .apos-wizard__step {
@@ -1100,10 +1106,12 @@ export default {
 .apos-locale-item {
   @include apos-transition();
 
-  position: relative;
-  padding: 12px 35px;
-  line-height: 1;
-  border-radius: var(--a-border-radius);
+  & {
+    position: relative;
+    padding: 12px 35px;
+    line-height: 1;
+    border-radius: var(--a-border-radius);
+  }
 
   &:not(.apos-current-locale),
   &:not(.apos-disabled-locale) {
@@ -1174,10 +1182,12 @@ export default {
 .apos-wizard__field-group-heading {
   @include type-base;
 
-  margin-bottom: $spacing-base;
-  padding-bottom: $spacing-base;
-  border-bottom: 1px solid var(--a-base-8);
-  color: var(--a-base-3);
+  & {
+    margin-bottom: $spacing-base;
+    padding-bottom: $spacing-base;
+    border-bottom: 1px solid var(--a-base-8);
+    color: var(--a-base-3);
+  }
 }
 
 .apos-wizard__field-group-heading__info {
@@ -1220,10 +1230,12 @@ export default {
 .apos-wizard__translation-title {
   @include type-label;
 
-  display: flex;
-  align-items: center;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--a-base-8);
+  & {
+    display: flex;
+    align-items: center;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--a-base-8);
+  }
 }
 
 .apos-wizard__translation-title-text {
@@ -1233,7 +1245,9 @@ export default {
 .apos-wizard__translation-error {
   @include type-label;
 
-  color: var(--a-danger);
+  & {
+    color: var(--a-danger);
+  }
 }
 
 .apos-wizard__translation-spinner {

package/modules/@apostrophecms/i18n/ui/apos/components/AposI18nLocalizeErrors.vue

@@ -76,11 +76,13 @@ export default {
 .apos-confirm__notifications {
   @include type-base;
 
-  margin-left: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  text-align: left;
-  list-style-type: none;
+  & {
+    margin-left: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    text-align: left;
+    list-style-type: none;
+  }
 }
 
 .apos-confirm__notification:not(:last-of-type)  {

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

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import debounce from 'lodash/debounce';
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
 
@@ -129,6 +129,10 @@ export default {
     };
   },
   beforeUnmount() {
+    this.onScreenResizeDebounced.cancel();
+    this.handleCropperChangeDebounced.cancel();
+    this.setCropperCoordinatesDebounced.cancel();
+    this.updateFocalPointCoordinatesDebounced.cancel();
     this.$refs.focalPoint.removeEventListener('mousedown', this.onFocalPointMouseDown);
     window.removeEventListener('resize', this.onScreenResizeDebounced);
   },

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

@@ -479,8 +479,10 @@ export default {
 .apos-field__min-size {
   @include type-small;
 
-  margin-bottom: 10px;
-  color: var(--a-base-1);
+  & {
+    margin-bottom: 10px;
+    color: var(--a-base-1);
+  }
 
   &--correcting {
     color: var(--a-primary);
@@ -490,10 +492,12 @@ export default {
 .apos-field__label {
   @include type-label;
 
-  display: block;
-  margin: 0 0 $spacing-base;
-  padding: 0;
-  color: var(--a-text-primary);
+  & {
+    display: block;
+    margin: 0 0 $spacing-base;
+    padding: 0;
+    color: var(--a-text-primary);
+  }
 }
 
 .apos-field__label--aligned {

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

@@ -125,10 +125,10 @@
 </template>
 
 <script>
-import { debounce } from 'Modules/@apostrophecms/ui/utils';
+import { createId } from '@paralleldrive/cuid2';
+import { debounceAsync } from 'Modules/@apostrophecms/ui/utils';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
-import { createId } from '@paralleldrive/cuid2';
 
 const DEBOUNCE_TIMEOUT = 500;
 
@@ -166,7 +166,9 @@ export default {
         emoji: '🖼'
       },
       cancelDescription: 'apostrophe:discardImageChangesPrompt',
-      debouncedGetMedia: debounce(this.getMedia, DEBOUNCE_TIMEOUT),
+      debouncedGetMedia: debounceAsync(this.getMedia, DEBOUNCE_TIMEOUT, {
+        onSuccess: this.appendMedia
+      }),
       loadObserver: new IntersectionObserver(
         this.handleIntersect,
         {
@@ -243,6 +245,7 @@ export default {
       return this.totalPages > 1 && this.currentPage === this.totalPages;
     }
   },
+
   watch: {
     async checked (newVal, oldVal) {
       this.lastSelected = newVal.at(-1);
@@ -270,21 +273,26 @@ export default {
       }
     }
   },
+
   created() {
     this.setDefaultFilters();
   },
+
   async mounted() {
     this.modal.active = true;
-    await this.getMedia({ tags: true });
-    this.isFirstLoading = false;
-
+    // Do these before any async work or they might get added after they are "removed"
     apos.bus.$on('content-changed', this.onContentChanged);
     apos.bus.$on('command-menu-manager-close', this.confirmAndCancel);
+    await this.debouncedGetMedia.skipDelay({ tags: true });
+    this.isFirstLoading = false;
   },
-  unmounted() {
+
+  beforeUnmount() {
+    this.debouncedGetMedia.cancel();
     apos.bus.$off('content-changed', this.onContentChanged);
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
+
   methods: {
     setDefaultFilters() {
       this.moduleOptions.filters.forEach(filter => {
@@ -296,7 +304,8 @@ export default {
     editorModified (val) {
       this.modified = val;
     },
-    async getMedia (options = {}) {
+    async getMedia(options = {}) {
+      const result = {};
       const qs = {
         ...this.filterValues,
         page: this.currentPage,
@@ -344,23 +353,37 @@ export default {
               draft: true
             }
           ));
-          this.tagList = apiResponse.choices._tags;
+          result.tagList = apiResponse.choices._tags;
         } else {
-          this.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
+          result.tagList = apiResponse.choices ? apiResponse.choices._tags : [];
         }
       }
 
-      this.currentPage = apiResponse.currentPage;
-      this.totalPages = apiResponse.pages;
+      result.currentPage = apiResponse.currentPage;
+      result.totalPages = apiResponse.pages;
+      result.items = [];
       for (const image of apiResponse.results) {
-        this.items.push(image);
+        result.items.push(image);
+      }
+      return result;
+    },
+    async appendMedia({
+      tagList, currentPage, totalPages, items
+    }) {
+      if (Array.isArray(tagList)) {
+        this.tagList = tagList;
+      }
+      this.currentPage = currentPage;
+      this.totalPages = totalPages;
+      for (const item of items) {
+        this.items.push(item);
       }
     },
     async refetchMedia(opts) {
       this.isLoading = true;
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia(opts);
+      await this.debouncedGetMedia.skipDelay(opts);
       this.isLoading = false;
       this.modified = false;
       this.updateEditing(null);
@@ -376,11 +399,10 @@ export default {
         dimensions
       });
     },
-    async completeUploading (imgIds) {
+    async completeUploading(imgIds) {
       this.currentPage = 1;
       this.items = [];
-      await this.getMedia();
-
+      await this.debouncedGetMedia.skipDelay();
       if (Array.isArray(imgIds) && imgIds.length && this.items.length === 0) {
         const [ widgetOptions = {} ] = apos.area.widgetOptions;
         const [ width, height ] = widgetOptions.minSize || [];
@@ -551,7 +573,7 @@ export default {
           this.loadRef.scrollIntoView({
             behavior: 'smooth'
           });
-          await this.getMedia();
+          await this.debouncedGetMedia.skipDelay();
           this.isScrollLoading = false;
         }
       }

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

@@ -246,12 +246,14 @@ export default {
   .apos-media-manager-display__cell {
     @include apos-transition();
 
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
+    & {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
 
     &.apos-is-hidden { visibility: hidden; }
 
@@ -267,11 +269,13 @@ export default {
   .apos-media-manager-display__checkbox {
     @include apos-transition();
 
-    z-index: $z-index-manager-display;
-    position: absolute;
-    top: -6px;
-    left: -6px;
-    opacity: 0;
+    & {
+      z-index: $z-index-manager-display;
+      position: absolute;
+      top: -6px;
+      left: -6px;
+      opacity: 0;
+    }
   }
 
   .apos-media-manager-display__cell:hover .apos-media-manager-display__checkbox,
@@ -283,9 +287,11 @@ export default {
   .apos-media-manager-display__placeholder {
     @include apos-transition();
 
-    max-width: 100%;
-    max-height: 100%;
-    opacity: 0.85;
+    & {
+      max-width: 100%;
+      max-height: 100%;
+      opacity: 0.85;
+    }
   }
 
   .apos-media-manager-display__placeholder {
@@ -296,13 +302,15 @@ export default {
     @include apos-button-reset();
     @include apos-transition();
 
-    display: flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    border: 1px solid var(--a-base-7);
+    & {
+      display: flex;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      border: 1px solid var(--a-base-7);
+    }
 
     &:active + .apos-media-manager-display__checkbox {
       opacity: 1;
@@ -353,9 +361,11 @@ export default {
   .apos-media-manager-display__end-reached {
     @include type-label;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 40px;
+    & {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+    }
   }
 </style>

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

@@ -417,21 +417,27 @@ export default {
   .apos-media-editor__details {
     @include apos-list-reset();
 
-    margin-bottom: $spacing-double;
+    & {
+      margin-bottom: $spacing-double;
+    }
   }
 
   .apos-media-editor__detail {
     @include type-base;
 
-    line-height: var(--a-line-tallest);
-    color: var(--a-base-4);
+    & {
+      line-height: var(--a-line-tallest);
+      color: var(--a-base-4);
+    }
   }
 
   .apos-media-editor__links {
     @include apos-list-reset();
 
-    display: flex;
-    margin-bottom: $spacing-triple;
+    & {
+      display: flex;
+      margin-bottom: $spacing-triple;
+    }
 
     :deep(.apos-button--quiet) {
       display: inline;

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

@@ -84,15 +84,19 @@ export default {
 .apos-media-manager-selections {
   @include type-base;
 
-  box-sizing: border-box;
-  height: 100%;
-  padding: 20px;
+  & {
+    box-sizing: border-box;
+    height: 100%;
+    padding: 20px;
+  }
 }
 
 .apos-media-manager-selections__heading {
   @include type-base;
 
-  margin-bottom: $spacing-double;
+  & {
+    margin-bottom: $spacing-double;
+  }
 }
 
 .apos-media-manager-selections__heading :deep(.apos-button) {
@@ -132,11 +136,13 @@ export default {
 .apos-media-manager-selections__item-title {
   @include type-base;
 
-  max-width: 150px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin-bottom: 5px;
+  & {
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-bottom: 5px;
+  }
 }
 
 .apos-media-manager-selection__empty {

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

@@ -250,36 +250,40 @@ export default {
     @include apos-button-reset();
     @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;
+    & {
+      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;
+    }
   }
 
   .apos-media-uploader--enabled {
     &::after {
       @include apos-transition($duration: 0.3s);
 
-      z-index: $z-index-under;
-      position: absolute;
-      content: '';
-      width: 90%;
-      height: 90%;
-      background-image:
-        linear-gradient(to right, rgba($brand-magenta, 0.3), rgba($brand-blue, 0.3)),
-        linear-gradient(to right, rgba($brand-gold, 0.3), rgba($brand-magenta, 0.3));
-      background-size:
-        100% 60%,
-        100% 60%;
-      background-position:
-        5% -5%,
-        5% 100%;
-      background-repeat: no-repeat;
-      filter: blur(10px);
+      & {
+        z-index: $z-index-under;
+        position: absolute;
+        content: '';
+        width: 90%;
+        height: 90%;
+        background-image:
+          linear-gradient(to right, rgba($brand-magenta, 0.3), rgba($brand-blue, 0.3)),
+          linear-gradient(to right, rgba($brand-gold, 0.3), rgba($brand-magenta, 0.3));
+        background-size:
+          100% 60%,
+          100% 60%;
+        background-position:
+          5% -5%,
+          5% 100%;
+        background-repeat: no-repeat;
+        filter: blur(10px);
+      }
     }
 
     &:hover,
@@ -318,11 +322,13 @@ export default {
   .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);
+    & {
+      width: 57px;
+      max-width: 50%;
+      height: auto;
+      margin-bottom: 5px;
+      fill: var(--a-text-primary);
+    }
   }
 
   .apos-media-uploader__instructions {
@@ -343,7 +349,9 @@ export default {
   .apos-media-uploader__primary {
     @include type-large;
 
-    max-width: 100px;
-    margin: 5px auto 10px;
+    & {
+      max-width: 100px;
+      margin: 5px auto 10px;
+    }
   }
 </style>

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

@@ -276,7 +276,7 @@ module.exports = {
         return self.apos.notification.trigger(req, req.body.messages[stage], {
           interpolate: {
             count: options.count || (req.body._ids && req.body._ids.length),
-            type: req.body.type || req.t('apostrophe:document')
+            type: req.t(req.body.type) || req.t('apostrophe:document')
           },
           dismiss: options.dismiss,
           job: {

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

@@ -100,13 +100,15 @@ export default {
     &__link {
       @include type-large;
 
-      position: relative;
-      // AposSchema adds $spacing-quadruple margin bottom
-      top: -$spacing-triple;
-      display: block;
-      text-align: right;
-      text-decoration: underline;
-      text-underline-offset: 2px;
+      & {
+        position: relative;
+        // AposSchema adds $spacing-quadruple margin bottom
+        top: -$spacing-triple;
+        display: block;
+        text-align: right;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
 
       &:hover,
       &:focus,

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

@@ -142,9 +142,11 @@ export default {
     &__link {
       @include type-large;
 
-      display: inline-block;
-      text-decoration: underline;
-      text-underline-offset: 2px;
+      & {
+        display: inline-block;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+      }
 
       &:hover,
       &:focus,
@@ -202,16 +204,18 @@ export default {
     &__footer {
       @include type-base;
 
-      position: absolute;
-      right: 0;
-      bottom: 32px;
-      left: 0;
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      width: 100%;
-      margin: auto;
-      max-width: $login-container;
+      & {
+        position: absolute;
+        right: 0;
+        bottom: 32px;
+        left: 0;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+        margin: auto;
+        max-width: $login-container;
+      }
     }
 
     &__project-version {