apostrophe 4.3.2 → 4.4.0

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

@@ -80,6 +80,9 @@ export default {
     // of a piece (i.e. AposMediaManager)
     isModified() {
       return this.relationshipIsModified();
+    },
+    manuallyPublished() {
+      return this.moduleOptions.localized && !this.moduleOptions.autopublish;
     }
   },
   mounted() {
@@ -108,34 +111,56 @@ export default {
           doc._fields = this.subfields[doc._id];
         }
       }
-    },
-    checked() {
-      this.updateCheckedDocs();
     }
   },
   methods: {
-    findDocById(docs, id) {
-      return docs.find(p => p._id === id);
+    addCheckedDoc(docOrId) {
+      this.concatCheckedDocs([ docOrId ]);
+    },
+    setCheckedDocs(docsOrIds) {
+      const docs = this.getDocs(docsOrIds);
+
+      this.checked = docs.map(item => item._id);
+      this.checkedDocs = docs;
+    },
+    concatCheckedDocs(docsOrIds) {
+      const docs = this.getDocs(docsOrIds);
+
+      this.checked = [ ...this.checked, ...docs.map(({ _id }) => _id) ];
+      this.checkedDocs = [ ...this.checkedDocs, ...docs ];
+    },
+    removeCheckedDoc(id) {
+      this.checked = this.checked.filter((checkedId) => checkedId !== id);
+      this.checkedDocs = this.checkedDocs.filter((doc) => doc.id !== id);
+    },
+    getDocs(docsOrIds) {
+      const items = this.moduleOptions.name === '@apostrophecms/page'
+        ? this.pagesFlat
+        : this.items;
+
+      return docsOrIds.map(docOrId => {
+        return docOrId._id
+          ? docOrId
+          : items.find(item => item._id === docOrId);
+      });
     },
     // It would have been nice for this to be computed, however
     // AposMediaManagerDisplay does not re-render when it is
     // a computed prop rather than a method call in the template.
     maxReached() {
       // Reaching max and exceeding it are different things
-      const result = this.relationshipField.max && this.checked.length >= this.relationshipField.max;
-      return result;
+      return this.relationshipField.max &&
+        this.checked.length >= this.relationshipField.max;
     },
     selectAll() {
       if (!this.checked.length) {
         this.items.forEach((item) => {
-          const relationshipsMaxedOrUnpublished = this.relationshipField &&
-          (this.maxReached() || !item.lastPublishedAt);
-
-          if (relationshipsMaxedOrUnpublished) {
+          const notPublished = this.manuallyPublished && !item.lastPublishedAt;
+          if (this.relationshipField && (this.maxReached() || notPublished)) {
             return;
           }
 
-          this.checked.push(item._id);
+          this.addCheckedDoc(item);
         });
 
         return;
@@ -145,7 +170,7 @@ export default {
         this.allPiecesSelection.isSelected = false;
       }
 
-      this.checked = [];
+      this.setCheckedDocs([]);
     },
     iconSize(header) {
       if (header.icon) {
@@ -212,29 +237,6 @@ export default {
         }
       }
     },
-    // update this.checkedDocs based on this.checked. The default
-    // implementation is suitable for paginated lists. Can be overridden
-    // for other cases.
-    updateCheckedDocs() {
-      // Keep `checkedDocs` in sync with `checked`, first removing from
-      // `checkedDocs` if no longer in `checked`
-      this.checkedDocs = this.checkedDocs.filter(doc => {
-        return this.checked.includes(doc._id);
-      });
-      // then adding to `checkedDocs` if not there yet. These should be in
-      // `items` which is assumed to contain a flat list of items currently
-      // visible.
-      //
-      // TODO: Once we have the option to select all docs of a type even if not
-      // currently visible in the manager this will need to make calls to the
-      // database.
-      this.checked.forEach(id => {
-        if (this.checkedDocs.findIndex(doc => doc._id === id) === -1) {
-          const found = this.items.find(item => item._id === id);
-          found && this.checkedDocs.push(found);
-        }
-      });
-    },
     docsManagerAddEventHandlers() {
       apos.bus.$on('content-changed', this.docsManagerOnContentChanged);
     },

package/modules/@apostrophecms/notification/ui/apos/components/AposNotification.vue

@@ -212,21 +212,24 @@ export default {
 <style lang="scss" scoped>
   .apos-notification {
     @include apos-transition();
-    pointer-events: auto;
+
     position: relative;
     display: inline-flex;
     overflow: hidden;
-    min-width: 200px;
-    max-width: 500px;
+    align-items: center;
     padding: 8px 35px 8px 8px;
     color: var(--a-text-inverted);
     background: var(--a-background-inverted);
+    pointer-events: auto;
+    min-width: 200px;
+    max-width: 500px;
     border-radius: 200px;
     box-shadow: var(--a-box-shadow);
-    align-items: center;
+
     & + .apos-notification {
       margin-top: 8px;
     }
+
     &:hover {
       transform: translateY(-1px);
     }
@@ -266,17 +269,18 @@ export default {
   }
 
   .apos-notification__button {
+    @include apos-transition(all);
+
     position: absolute;
     right: 2px;
     display: flex;
-    align-items: center;
     box-sizing: border-box;
+    align-items: center;
     height: 100%;
     padding: 20px 10px;
     border: none;
-    background-color: transparent;
     color: var(--a-text-inverted);
-    @include apos-transition(all);
+    background-color: transparent;
 
     &:hover {
       cursor: pointer;
@@ -290,12 +294,14 @@ export default {
   .apos-notification__label,
   .apos-notification__progress-value {
     @include type-base;
+
     color: var(--a-text-inverted);
     line-height: var(--a-line-tallest);
   }
 
   .apos-notification__label :deep(button) {
     @include apos-button-reset();
+
     text-decoration: underline;
     text-decoration-color: var(--a-success);
     text-underline-offset: 3px;
@@ -304,8 +310,8 @@ export default {
 
   .apos-notification__progress {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
+    align-items: center;
   }
 
   .apos-notification__progress-bar {
@@ -320,7 +326,7 @@ export default {
     height: 100%;
     background-color: var(--a-brand-green);
     background-image: linear-gradient(46deg, var(--a-brand-gold) 0%, var(--a-brand-red) 26%, var(--a-brand-magenta) 47%, var(--a-brand-blue) 76%, var(--a-brand-green) 100%);
-    transition: width 0.5s ease-out;
+    transition: width 500ms ease-out;
   }
 
   .apos-notification__progress-value {

package/modules/@apostrophecms/notification/ui/apos/components/TheAposNotifications.vue

@@ -116,13 +116,13 @@ export default {
 <style lang="scss" scoped>
   .apos-notifications {
     z-index: $z-index-notifications;
-    pointer-events: none;
     position: fixed;
     bottom: 20px;
     display: flex;
-    width: 100%;
     flex-direction: column;
     align-items: center;
+    width: 100%;
+    pointer-events: none;
   }
 
   .list-enter-active,

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

@@ -77,7 +77,7 @@ module.exports = {
       modal: {
         [`${self.__meta.name}:manager`]: {
           '@apostrophecms/command-menu:manager': {
-            label: '',
+            label: 'apostrophe:commandMenuManager',
             commands: [
               `${self.__meta.name}:create-new`,
               `${self.__meta.name}:exit-manager`
@@ -1276,11 +1276,14 @@ database.`);
             if (parent._id !== oldParent._id) {
               const matchOldParentSlugPrefix = new RegExp('^' + self.apos.util.regExpQuote(self.apos.util.addSlashIfNeeded(oldParent.slug)));
               if (moved.slug.match(matchOldParentSlugPrefix)) {
-                let slugStem = parent.slug;
-                if (slugStem !== '/') {
-                  slugStem += '/';
-                }
-                moved.slug = moved.slug.replace(matchOldParentSlugPrefix, self.apos.util.addSlashIfNeeded(parent.slug));
+                const movedSlugCandidate = moved.slug
+                  .split('/')
+                  .slice(0, -1)
+                  .join('/');
+
+                moved.slug = parent.slug.endsWith(movedSlugCandidate)
+                  ? parent.slug.replace(movedSlugCandidate, '').concat(moved.slug)
+                  : moved.slug.replace(matchOldParentSlugPrefix, self.apos.util.addSlashIfNeeded(parent.slug));
                 changed.push({
                   _id: moved._id,
                   slug: moved.slug

package/modules/@apostrophecms/page/ui/apos/components/AposPagesManager.vue

@@ -3,7 +3,6 @@
     :modal="modal"
     modal-title="apostrophe:managePages"
     @esc="confirmAndCancel"
-    @no-modal="$emit('safe-close')"
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
   >
@@ -80,12 +79,13 @@
         </template>
         <template #bodyMain>
           <AposTree
-            v-model:checked="checked"
+            :checked="checked"
             :items="items"
             :headers="headers"
             :icons="icons"
             :options="treeOptions"
             :module-options="moduleOptions"
+            @update:checked="setCheckedDocs"
             @update="update"
           />
         </template>
@@ -101,9 +101,8 @@ export default {
   name: 'AposPagesManager',
   mixins: [ AposPagesManagerLogic ],
   // Keep it for linting
-  emits: [ 'archive', 'search', 'safe-close', 'modal-result' ]
+  emits: [ 'archive', 'search', 'modal-result' ]
 };
-// TODO: check when child page is created and with what perm
 </script>
 
 <style lang="scss" scoped>

package/modules/@apostrophecms/page/ui/apos/logic/AposPagesManager.js

@@ -9,7 +9,7 @@ import { klona } from 'klona';
 export default {
   name: 'AposPagesManager',
   mixins: [ AposModifiedMixin, AposDocsManagerMixin, AposArchiveMixin, AposPublishMixin ],
-  emits: [ 'archive', 'search', 'safe-close', 'modal-result' ],
+  emits: [ 'archive', 'search', 'modal-result' ],
   data() {
 
     return {
@@ -49,7 +49,8 @@ export default {
       treeOptions: {
         bulkSelect: !!this.relationshipField,
         draggable: true,
-        ghostUnpublished: true
+        ghostUnpublished: true,
+        max: this.relationshipField.max || null
       },
       moreMenu: [
         {
@@ -252,9 +253,9 @@ export default {
     },
     toggleRowCheck(id) {
       if (this.checked.includes(id)) {
-        this.checked = this.checked.filter(item => item !== id);
+        this.removeCheckedDoc(id);
       } else {
-        this.checked.push(id);
+        this.addCheckedDoc(id);
       }
     },
     selectAll(event) {
@@ -287,12 +288,6 @@ export default {
         this.checkedDocs.push(doc);
         this.checked.push(doc._id);
       }
-    },
-    setCheckedDocs(checkedDocs) {
-      this.checked = checkedDocs.map(doc => doc._id);
-    },
-    updateCheckedDocs() {
-      this.checkedDocs = this.checked.map(_id => this.pagesFlat.find(page => page._id === _id));
     }
   }
 };

package/modules/@apostrophecms/page/views/notFound.html

@@ -36,10 +36,10 @@
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      transition: opacity 0.3s ease;
-      transition-delay: 0.5s;
-      animation: fadeIn 1s;
-      -webkit-animation: fadeIn 1s;
+      transition: opacity 300ms ease;
+      transition-delay: 500ms;
+      animation: fadeIn 1000ms;
+      -webkit-animation: fadeIn 1000ms;
     }
 
     .apos-not-found__home-link {
@@ -93,4 +93,4 @@
       100% {opacity:1;}
     }
   </style>
-{% endblock %}
+{% endblock %}

package/modules/@apostrophecms/permission/ui/apos/components/AposPermissionGrid.vue

@@ -132,6 +132,7 @@ export default {
 <style lang="scss" scoped>
   .apos-input__role__permission-grid {
     @include type-base;
+
     display: grid;
     margin-top: $spacing-triple;
     grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
@@ -140,20 +141,23 @@ export default {
   .apos-input__role__permission-grid__row {
     display: flex;
     align-items: center;
-    padding-bottom: $spacing-three-quarters;
     margin-bottom: $spacing-three-quarters;
+    padding-bottom: $spacing-three-quarters;
     border-bottom: 1px solid var(--a-base-9);
   }
+
   .apos-input__role__permission-grid__list {
     margin-top: 0;
   }
+
   .apos-input__role__permission-grid__set {
-    padding: 0 $spacing-base;
     margin-bottom: $spacing-double;
+    padding: 0 $spacing-base;
   }
 
   .apos-input__role__permission-grid__set-name {
     @include type-title;
+
     display: inline-flex;
     margin: 0 0 $spacing-double;
   }

package/modules/@apostrophecms/piece-page-type/index.js

@@ -250,6 +250,7 @@ module.exports = {
           const parentPage = self.chooseParentPage(req.aposParentPageCache[pieceName], piece);
           if (parentPage) {
             piece._url = self.buildUrl(req, parentPage, piece);
+            piece._parent = parentPage;
             piece._parentUrl = parentPage._url;
             piece._parentSlug = parentPage.slug;
           }

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManager.vue

@@ -4,7 +4,6 @@
     :modal="modal"
     :modal-title="modalTitle"
     @esc="confirmAndCancel"
-    @no-modal="$emit('safe-close')"
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
   >
@@ -103,7 +102,7 @@
         <template #bodyMain>
           <AposDocsManagerDisplay
             v-if="items.length > 0"
-            v-model:checked="checked"
+            :checked="checked"
             :items="items"
             :headers="headers"
             :options="{
@@ -112,6 +111,7 @@
               disableUnpublished: disableUnpublished,
               manuallyPublished: manuallyPublished
             }"
+            @update:checked="setCheckedDocs"
             @open="edit"
           />
           <div v-else class="apos-pieces-manager__empty">
@@ -124,9 +124,11 @@
 </template>
 
 <script>
+import { mapState } from 'pinia';
 import AposDocsManagerMixin from 'Modules/@apostrophecms/modal/mixins/AposDocsManagerMixin';
 import AposModifiedMixin from 'Modules/@apostrophecms/ui/mixins/AposModifiedMixin';
 import AposPublishMixin from 'Modules/@apostrophecms/ui/mixins/AposPublishMixin';
+import { useModalStore } from 'Modules/@apostrophecms/ui/stores/modal';
 import { debounce } from 'Modules/@apostrophecms/ui/utils';
 
 export default {
@@ -140,7 +142,7 @@ export default {
       required: true
     }
   },
-  emits: [ 'archive', 'safe-close' ],
+  emits: [ 'archive' ],
   data() {
     return {
       modal: {
@@ -167,6 +169,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useModalStore, [ 'activeModal' ]),
     moduleOptions() {
       return window.apos.modules[this.moduleName];
     },
@@ -252,12 +255,6 @@ export default {
     apos.bus.$off('command-menu-manager-close', this.confirmAndCancel);
   },
   methods: {
-    setCheckedDocs(checked) {
-      this.checkedDocs = checked;
-      this.checked = this.checkedDocs.map(item => {
-        return item._id;
-      });
-    },
     async create() {
       await this.edit(null);
     },
@@ -405,11 +402,10 @@ export default {
     },
     shortcutNew(event) {
       const interesting = event.keyCode === 78; // N(ew)
-      const topModalId = apos.modal.stack.at(-1)?.id;
       if (
         interesting &&
         document.activeElement.tagName !== 'INPUT' &&
-        this.$refs.modal.id === topModalId
+        this.$refs.modal.id === this.activeModal?.id
       ) {
         this.create();
       }
@@ -490,8 +486,8 @@ export default {
   // `apos-media-manager__empty`. We should combine somehow.
   .apos-pieces-manager__empty {
     display: flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
     width: 100%;
     height: 100%;
     margin-top: 130px;

package/modules/@apostrophecms/piece-type/ui/apos/components/AposDocsManagerSelectBox.vue

@@ -115,10 +115,10 @@ export default {
 </script>
 <style lang='scss' scoped>
   .apos-select-box {
-    box-sizing: border-box;
     overflow: hidden;
-    max-height: 65px;
+    box-sizing: border-box;
     transition: max-height 200ms ease-in;
+    max-height: 65px;
 
     &.collapse-enter, &.collapse-leave-to {
       max-height: 0;

package/modules/@apostrophecms/piece-type/ui/apos/components/AposRelationshipEditor.vue

@@ -6,7 +6,6 @@
     @inactive="modal.active = false"
     @show-modal="modal.showModal = true"
     @esc="confirmAndCancel"
-    @no-modal="$emit('safe-close')"
   >
     <template #secondaryControls>
       <AposButton
@@ -93,7 +92,7 @@ export default {
       required: true
     }
   },
-  emits: [ 'modal-result', 'safe-close' ],
+  emits: [ 'modal-result' ],
   data() {
     return {
       docReady: false,