apostrophe 4.4.2 → 4.5.0

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

@@ -3,7 +3,6 @@
     <div class="apos-media-manager-display__grid">
       <AposMediaUploader
         v-if="moduleOptions.canCreate"
-        :disabled="maxReached"
         :action="moduleOptions.action"
         :accept="accept"
         @upload-started="$emit('upload-started')"
@@ -25,9 +24,12 @@
             :field="{
               name: item._id,
               hideLabel: true,
-              label: `Toggle selection of ${item.title}`,
+              label: $t({
+                key: 'apostrophe:toggleSelectionOf',
+                title: item.title
+              }),
               disableFocus: true,
-              readOnly: options.disableUnchecked && !checked.includes(item._id)
+              readOnly: canSelect(item._id) === false
             }"
             :choice="{ value: item._id }"
           />
@@ -35,20 +37,19 @@
         <button
           :id="`btn-${item._id}`"
           :disabled="
-            item._id === 'placeholder' ||
-              (options.disableUnchecked && !checked.includes(item._id))
+            item._id === 'placeholder' || canSelect(item._id) === false
           "
           class="apos-media-manager-display__select"
           @click.exact="$emit('select', item._id)"
           @click.shift="$emit('select-series', item._id)"
           @click.meta="$emit('select-another', item._id)"
+          @click.ctrl="$emit('select-another', item._id)"
         >
           <div
             v-if="item.dimensions"
             class="apos-media-manager-display__placeholder"
             :style="getPlaceholderStyles(item)"
           />
-          <!-- TODO: make sure using TITLE is the correct alt tag application here. -->
           <img
             v-else
             class="apos-media-manager-display__media"
@@ -57,8 +58,6 @@
           >
         </button>
       </div>
-      <!-- We need a placeholder display cell to generate the first image
-      placeholder. -->
       <div
         v-if="items.length === 0"
         class="apos-media-manager-display__cell apos-is-hidden"
@@ -70,11 +69,25 @@
         />
       </div>
     </div>
+    <div
+      v-if="!isLastPage"
+      ref="scrollLoad"
+      class="apos-media-manager-display__scroll-load"
+      :class="{ 'apos-media-manager-display__scroll-load--loading': isScrollLoading }"
+    >
+      <AposLoading
+        v-if="isScrollLoading"
+        class="apos-loading"
+      />
+    </div>
+    <div v-else class="apos-media-manager-display__end-reached">
+      <p>{{ $t('apostrophe:mediaLibraryEndReached') }}</p>
+    </div>
   </div>
 </template>
 
 <script>
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 
 export default {
   // Custom model to handle the v-model connection on the parent.
@@ -111,6 +124,18 @@ export default {
     largePreview: {
       type: Boolean,
       default: false
+    },
+    relationshipField: {
+      type: [ Object, Boolean ],
+      default: false
+    },
+    isLastPage: {
+      type: Boolean,
+      default: false
+    },
+    isScrollLoading: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
@@ -120,7 +145,8 @@ export default {
     'select-another',
     'upload-started',
     'upload-complete',
-    'create-placeholder'
+    'create-placeholder',
+    'set-load-ref'
   ],
   computed: {
     // Handle the local check state within this component.
@@ -129,10 +155,24 @@ export default {
         return this.checked;
       },
       set(val) {
-        this.$emit('update:checked', val);
+        this.$emit(
+          'update:checked',
+          this.relationshipField?.max === 1
+            ? [].concat(val.at(-1) || [])
+            : val
+        );
       }
     }
   },
+  watch: {
+    async isLastPage(val) {
+      await this.$nextTick();
+      this.$emit('set-load-ref', this.$refs.scrollLoad);
+    }
+  },
+  mounted() {
+    this.$emit('set-load-ref', this.$refs.scrollLoad);
+  },
   methods: {
     getPlaceholderStyles(item) {
       // Account for whether the refs have been set by the v-for or if on the
@@ -178,7 +218,12 @@ export default {
       event.target.classList.remove('apos-is-hovering');
     },
     idFor(item) {
-      return `${item._id}-${cuid()}`;
+      return `${item._id}-${createId()}`;
+    },
+    canSelect(id) {
+      return this.checked.includes(id) ||
+        this.relationshipField?.max === 1 ||
+        (this.relationshipField?.max && !this.maxReached);
     }
   }
 };
@@ -188,12 +233,13 @@ export default {
   .apos-media-manager-display__grid {
     display: grid;
     grid-auto-rows: 140px;
-    grid-template-columns: repeat(5, 17.1%);
-    gap: 2.4% 2.4%;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 15px;
+    padding: 20px 0;
 
     @include media-up(lap) {
-      grid-template-columns: repeat(7, 12.22%);
-      gap: 2.4% 2.4%;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 20px;
     }
   }
 
@@ -209,14 +255,6 @@ export default {
 
     &.apos-is-hidden { visibility: hidden; }
 
-    &::before {
-      content: '';
-      display: inline-block;
-      width: 1px;
-      height: 0;
-      padding-bottom: calc(100% / (1/1));
-    }
-
     &:hover,
     &.apos-is-selected,
     &:focus {
@@ -259,6 +297,7 @@ export default {
     @include apos-transition();
 
     display: flex;
+    box-sizing: border-box;
     align-items: center;
     justify-content: center;
     width: 100%;
@@ -291,4 +330,32 @@ export default {
       box-shadow: none;
     }
   }
+
+  .apos-media-manager-display__scroll-load {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--loading {
+      height: 80px;
+      margin-top: 15px;
+      background-color: var(--a-base-10);
+      margin-bottom: 10px;
+      border: 1px solid var(--a-base-8);
+      border-radius: 8px;
+    }
+
+    .apos-loading {
+      flex-grow: 1;
+    }
+  }
+
+  .apos-media-manager-display__end-reached {
+    @include type-label;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+  }
 </style>

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

@@ -112,7 +112,7 @@ import { klona } from 'klona';
 import dayjs from 'dayjs';
 import { isEqual } from 'lodash';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 
 dayjs.extend(advancedFormat);
 
@@ -125,12 +125,6 @@ export default {
         return {};
       }
     },
-    selected: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
     isModified: {
       type: Boolean,
       default: false
@@ -145,7 +139,7 @@ export default {
       }
     }
   },
-  emits: [ 'saved', 'back', 'modified' ],
+  emits: [ 'back', 'modified' ],
   data() {
     return {
       // Primarily use `activeMedia` to support hot-swapping image docs.
@@ -294,60 +288,63 @@ export default {
       });
       await this.cancel();
     },
-    save() {
+    async save() {
       this.triggerValidation = true;
       const route = `${this.moduleOptions.action}/${this.activeMedia._id}`;
       // Repopulate `attachment` since it was removed from the schema.
       this.docFields.data.attachment = this.activeMedia.attachment;
 
-      this.$nextTick(async () => {
-        if (this.docFields.hasErrors) {
-          this.triggerValidation = false;
-          await apos.notify('apostrophe:resolveErrorsBeforeSaving', {
-            type: 'warning',
-            icon: 'alert-circle-icon',
-            dismiss: true
-          });
-          return;
+      await this.$nextTick();
+
+      if (this.docFields.hasErrors) {
+        this.triggerValidation = false;
+        await apos.notify('apostrophe:resolveErrorsBeforeSaving', {
+          type: 'warning',
+          icon: 'alert-circle-icon',
+          dismiss: true
+        });
+        return;
+      }
+
+      let body = this.docFields.data;
+      this.addLockToRequest(body);
+      try {
+        const requestMethod = this.restoreOnly ? apos.http.patch : apos.http.put;
+        if (this.restoreOnly) {
+          body = {
+            archived: false
+          };
         }
+        const doc = await requestMethod(route, {
+          busy: true,
+          body,
+          draft: true
+        });
+        apos.bus.$emit('content-changed', {
+          doc,
+          action: 'update'
+        });
+        this.original = klona(this.docFields.data);
+      } catch (e) {
+        if (this.isLockedError(e)) {
+          await this.showLockedError(e);
+          this.lockNotAvailable();
+        } else {
+          const errorMessage = this.restoreOnly
+            ? this.$t('apostrophe:mediaManagerErrorRestoring')
+            : this.$t('apostrophe:mediaManagerErrorSaving');
 
-        let body = this.docFields.data;
-        this.addLockToRequest(body);
-        try {
-          const requestMethod = this.restoreOnly ? apos.http.patch : apos.http.put;
-          if (this.restoreOnly) {
-            body = {
-              archived: false
-            };
-          }
-          const doc = await requestMethod(route, {
-            busy: true,
-            body,
-            draft: true
-          });
-          apos.bus.$emit('content-changed', {
-            doc,
-            action: 'update'
+          await this.handleSaveError(e, {
+            fallback: `${errorMessage} ${this.moduleLabels.label}`
           });
-          this.original = klona(this.docFields.data);
-          this.$emit('modified', false);
-          this.$emit('saved');
-        } catch (e) {
-          if (this.isLockedError(e)) {
-            await this.showLockedError(e);
-            this.lockNotAvailable();
-          } else {
-            await this.handleSaveError(e, {
-              fallback: `Error ${this.restoreOnly ? 'Restoring' : 'Saving'} ${this.moduleLabels.label}`
-            });
-          }
-        } finally {
-          this.showReplace = false;
         }
-      });
+      } finally {
+        this.showReplace = false;
+
+      }
     },
     generateLipKey() {
-      this.lipKey = cuid();
+      this.lipKey = createId();
     },
     cancel() {
       this.showReplace = false;

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

@@ -84,6 +84,7 @@ export default {
 .apos-media-manager-selections {
   @include type-base;
 
+  box-sizing: border-box;
   height: 100%;
   padding: 20px;
 }

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

@@ -41,7 +41,7 @@
 const Passport = require('passport').Passport;
 const LocalStrategy = require('passport-local');
 const Promise = require('bluebird');
-const cuid = require('cuid');
+const { createId } = require('@paralleldrive/cuid2');
 const expressSession = require('express-session');
 
 const loginAttemptsNamespace = '@apostrophecms/loginAttempt';
@@ -774,7 +774,7 @@ module.exports = {
 
           const requirementsToVerify = Object.keys(lateRequirements);
           if (requirementsToVerify.length) {
-            const token = cuid();
+            const token = createId();
 
             await self.bearerTokens.insertOne({
               _id: token,
@@ -802,7 +802,7 @@ module.exports = {
             });
             return {};
           } else {
-            const token = cuid();
+            const token = createId();
             await self.bearerTokens.insertOne({
               _id: token,
               userId: user._id,

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

@@ -69,8 +69,9 @@
         :status="searchField.status"
         :model-value="searchField.value"
         :modifiers="['small']"
+        :no-blur-emit="true"
         @update:model-value="search"
-        @return="search($event, true)"
+        @return="search($event)"
       />
     </template>
   </AposModalToolbar>
@@ -257,16 +258,7 @@ export default {
         this.computeActiveOperations();
       }
     },
-    search(value, force) {
-      if ((force && !value) || value.data === '') {
-        value = {
-          data: '',
-          error: false
-        };
-      } else if (!value || value.error || (!force && value.data.length < 3)) {
-        return;
-      }
-
+    search(value) {
       this.$emit('search', value.data);
     },
     registerPageChange(pageNum) {

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

@@ -291,9 +291,9 @@ function close() {
     z-index: $z-index-modal;
     position: fixed;
     inset: $spacing-base $spacing-base $spacing-base $spacing-base;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    height: calc(100vh - #{$spacing-base * 2});
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - $spacing-base * 2);
     border-radius: var(--a-border-radius);
     background-color: var(--a-background-primary);
     border: 1px solid var(--a-base-9);
@@ -373,13 +373,9 @@ function close() {
     height: 100%;
   }
 
-  .apos-modal__header {
-    grid-row: 1 / 2;
-  }
-
   .apos-modal__main {
     display: grid;
-    grid-row: 2 / 3;
+    flex-grow: 1;
     overflow-y: auto;
   }
 
@@ -432,10 +428,6 @@ function close() {
     border-bottom: 1px solid var(--a-base-9);
   }
 
-  .apos-modal__footer {
-    grid-row: 3 / 4;
-  }
-
   .apos-modal__footer__inner {
     z-index: $z-index-default;
     position: relative;

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

@@ -1,10 +1,17 @@
 <template>
   <div class="apos-modal__body" :class="{ 'apos-modal__body--flex': hasSlot('footer') }">
     <div class="apos-modal__body-inner">
-      <div v-if="hasSlot('bodyHeader')" class="apos-modal__body-header">
+      <div
+        v-if="hasSlot('bodyHeader')"
+        ref="bodyHeader"
+        class="apos-modal__body-header"
+      >
         <slot name="bodyHeader" />
       </div>
-      <div class="apos-modal__body-main">
+      <div
+        class="apos-modal__body-main"
+        :style="{ height: `calc(100% - ${headerHeight}px)`}"
+      >
         <slot name="bodyMain" />
       </div>
     </div>
@@ -17,6 +24,17 @@
 <script>
 export default {
   name: 'AposModalBody',
+  data() {
+    return {
+      headerHeight: 0
+    };
+  },
+  async mounted() {
+    if (this.$refs.bodyHeader) {
+      await this.$nextTick();
+      this.headerHeight = this.$refs.bodyHeader.offsetHeight;
+    }
+  },
   methods: {
     hasSlot(name) {
       return !!this.$slots[name];
@@ -52,10 +70,6 @@ export default {
   padding: 20px;
 }
 
-.apos-modal__body-header {
-  margin-bottom: 20px;
-}
-
 .apos-modal__body-footer {
   display: flex;
   justify-content: space-between;

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

@@ -38,7 +38,7 @@ export default {
   },
   props: {
     label: {
-      default: 'Set a label',
+      default: 'apostrophe:modalBreadcrumbsDefaultLabel',
       type: String
     },
     modifier: {

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

@@ -322,6 +322,6 @@ export default {
   margin-top: $spacing-double;
   color: var(--a-primary);
   text-decoration: none;
-  font-weight: var(--a-weight-bold);;
+  font-weight: var(--a-weight-bold);
 }
 </style>

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

@@ -59,11 +59,9 @@ export default {
   },
   methods: {
     generateErrorLabel(errorCount) {
-      let label = 'Error';
-      if (errorCount > 1) {
-        label += 's';
-      }
-      return label;
+      return errorCount > 1
+        ? this.$t('apostrophe:modalTabsErrors')
+        : this.$t('apostrophe:modalTabsError');
     },
     selectTab: function (e) {
       const tab = e.target;

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

@@ -123,11 +123,9 @@ export default {
   },
   methods: {
     generateErrorLabel(errorCount) {
-      let label = 'Error';
-      if (errorCount > 1) {
-        label += 's';
-      }
-      return label;
+      return errorCount > 1
+        ? this.$t('apostrophe:modalTabsErrors')
+        : this.$t('apostrophe:modalTabsError');
     },
     selectTab: function (e) {
       const tab = e.target;

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

@@ -1,4 +1,4 @@
-import cuid from 'cuid';
+import { createId } from '@paralleldrive/cuid2';
 
 export default {
   data: () => ({
@@ -19,7 +19,7 @@ export default {
   },
   methods: {
     updateFieldErrors(fieldState) {
-      this.tabKey = cuid();
+      this.tabKey = createId();
       for (const key in this.groups) {
         this.groups[key].fields.forEach(field => {
           if (fieldState[field]) {