apostrophe 3.50.0 → 3.51.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 3.51.0 (2023-06-21)
+
+### Adds
+
+* Items can now be added to the user's personal menu in the
+admin bar, alongside the "Log Out" option. To do so, specify
+the `user: true` option when calling `self.apos.adminBar.add`.
+This should be reserved for items that manage personal settings.
+* When duplicating another document, the `_id` properties of
+array items, widgets and areas are still regenerated to ensure
+uniqueness across documents. However, an `_originalId` property
+is now available for reference while the document remains in memory.
+This facilitates change detection within array items in
+`beforeSave` handlers and the like.
+* Adds the possibility to add custom admin bars via the `addBar()` method from the `admin-bar` module.
+* Adds support for conditional fields within `array` and `object` field schema. See the [documentation](https://v3.docs.apostrophecms.org/guide/conditional-fields/) for more information.
+
+### Fixes
+
+* Uses `findForEditing` method in the page put route.
+* The "Duplicate" option in the page or piece manager now correctly duplicates the
+entire document. This was a regression introduced in 3.48.0. The "Duplicate" option
+in the editor dialog box always worked correctly.
+
+### Changes
+
+* Browser URL now changes to reflect the slug of the document according to the mode that is being viewed.
+
 ## 3.50.0 (2023-06-09)
 
 ### Adds
@@ -15,6 +43,7 @@ be needed in normal circumstances.
 ## 3.49.0 (2023-06-08)
 
 ### Changes
+
 * Updates area UX to not display Add Content controls when a widget is focused.
 * Updates area UX to unfocus widget on esc key.
 * Updates widget UI to use dashed outlines instead of borders to indicate bounds.
@@ -27,6 +56,7 @@ we encourage you to consider replacing your `script` tag with the new version, w
 available in your project.
 
 ### Adds
+
 * Adds keyboard accessibility to Insert menu.
 * Adds regex pattern feature for string fields.
 * Adds `pnpm` support. Introduces new optional Apostrophe root configuration `pnpm` to force opt-in/out when auto detection fails. See the [documentation](https://v3.docs.apostrophecms.org/guide/using-pnpm.html) for more details.
@@ -45,6 +75,7 @@ order to guarantee it. This implicitly sets `singleton: true` as well. This is n
 internally by `@apostrophecms/global` as well as the optional `@apostrophecms-pro/palette` module.
 
 ### Fixes
+
 * Fix 404 error when viewing/editing a doc which draft has a different version of the slug than the published one.
 * Fixed a bug where multiple home pages can potentially be inserted into the database if the
 default locale is renamed. Introduced the `async apos.doc.bestAposDocId(criteria)` method to

package/modules/@apostrophecms/admin-bar/index.js

@@ -91,6 +91,7 @@ module.exports = {
     self.items = [];
     self.groups = [];
     self.groupLabels = {};
+    self.bars = [];
     self.enableBrowserData();
   },
   handlers(self) {
@@ -142,6 +143,10 @@ module.exports = {
       // for screenreaders only. The contextUtility functionality is typically used for
       // experiences that temporarily change the current editing context.
       //
+      // If `options.user` is true, the menu bar item will appear
+      // on the user's personal dropdown, where "Log Out" appears. Such items
+      // cannot be grouped further.
+
       // If an `options.when` function is provided, it will be invoked with
       // `req` to test whether this admin bar item should be displayed or not.
 
@@ -349,8 +354,35 @@ module.exports = {
           contextId: context && context._id,
           tabId: cuid(),
           contextEditorName,
-          pageTree: self.options.pageTree && self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type', 'draft')
+          pageTree: self.options.pageTree && self.apos.permission.can(req, 'edit', '@apostrophecms/any-page-type', 'draft'),
+          bars: self.bars
         };
+      },
+
+      // Add custom bars and place the ones
+      // that have `last: true` at the end
+      // of the list so that they will be
+      // displayed below the others.
+      //
+      // Example:
+      //
+      // ```js
+      // self.addBar({
+      //   id: 'template',
+      //   componentName: 'TheAposTemplateBar',
+      //   props: { content: 'Some content' },
+      //   last: true
+      // });
+      // ```
+      addBar(bar) {
+        self.bars.push(bar);
+
+        self.bars.sort((a, b) => {
+          if (a.last === true && b.last === true) {
+            return 0;
+          }
+          return b.last === true ? -1 : 1;
+        });
       }
     };
   }

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBar.vue

@@ -8,11 +8,21 @@
     <nav class="apos-admin-bar" ref="adminBar">
       <div class="apos-admin-bar__row">
         <AposLogoPadless class="apos-admin-bar__logo" />
-        <TheAposAdminBarMenu :items="items" />
+        <TheAposAdminBarMenu :items="menuItems" />
         <TheAposAdminBarLocale v-if="hasLocales()" />
-        <TheAposAdminBarUser data-apos-test="authenticatedUserMenuTrigger" class="apos-admin-bar__user" />
+        <TheAposAdminBarUser
+          data-apos-test="authenticatedUserMenuTrigger"
+          class="apos-admin-bar__user"
+          :items="userItems"
+        />
       </div>
       <TheAposContextBar @mounted="setSpacer" />
+      <component
+        v-for="bar in bars"
+        v-bind="bar.props || {}"
+        :key="bar.id"
+        :is="bar.componentName"
+      />
     </nav>
   </div>
 </template>
@@ -31,6 +41,20 @@ export default {
       }
     }
   },
+  computed: {
+    menuItems() {
+      return this.items.filter(item => !item.options?.user);
+    },
+    userItems() {
+      return this.items.filter(item => item.options?.user);
+    },
+    moduleOptions() {
+      return window.apos.adminBar;
+    },
+    bars() {
+      return this.moduleOptions.bars;
+    }
+  },
   async mounted() {
     this.setSpacer();
   },

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarMenu.vue

@@ -54,10 +54,11 @@
         <Component
           v-if="item.options.component"
           :is="item.options.component"
-          :key="item.name"
+          :key="`${item.name}.component`"
         />
         <AposButton
-          v-else :key="item.name"
+          v-else
+          :key="`${item.name}.fallback`"
           type="subtle" :modifiers="['small', 'no-motion']"
           :tooltip="trayItemTooltip(item)" class="apos-admin-bar__context-button"
           :icon="item.options.icon" :icon-only="true"

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposAdminBarUser.vue

@@ -2,7 +2,7 @@
   <AposContextMenu
     class="apos-admin-user"
     :button="button"
-    :menu="menu"
+    :menu="items"
     menu-placement="bottom-end"
     @item-clicked="emitEvent"
   >
@@ -19,16 +19,11 @@
 
 export default {
   name: 'TheAposAdminBarUser',
-  data() {
-    return {
-      menu: [
-        {
-          label: 'apostrophe:logOut',
-          name: 'logOut',
-          action: 'user-logout'
-        }
-      ]
-    };
+  props: {
+    items: {
+      type: Array,
+      required: true
+    }
   },
   computed: {
     button() {
@@ -47,10 +42,8 @@ export default {
     }
   },
   methods: {
-    emitEvent(e) {
-      if (e === 'user-logout') {
-        apos.bus.$emit('admin-menu-click', '@apostrophecms/login-logout');
-      }
+    emitEvent(name) {
+      apos.bus.$emit('admin-menu-click', name);
     }
   }
 };

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextBar.vue

@@ -525,6 +525,19 @@ export default {
         return;
       }
 
+      const { action } = window.apos.modules[this.context.type];
+      const doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
+        qs: {
+          aposMode: this.draftMode,
+          project: { _url: 1 }
+        }
+      });
+
+      if (this.urlDiffers(doc._url)) {
+        // Slug changed, change browser URL to reflect the actual url of the doc
+        history.replaceState(null, '', doc._url);
+      }
+
       const qs = {
         ...apos.http.parseQuery(window.location.search),
         aposRefresh: '1',
@@ -534,16 +547,7 @@ export default {
         } : {})
       };
 
-      const { action } = window.apos.modules[this.context.type];
-      const doc = await apos.http.get(`${action}/${this.context.aposDocId}`, {
-        qs: {
-          aposMode: this.draftMode,
-          project: { _url: 1 }
-        }
-      });
-
-      const url = apos.http.addQueryToUrl(doc._url, qs);
-      const content = await apos.http.get(url, {
+      const content = await apos.http.get(doc._url, {
         qs,
         headers: {
           'Cache-Control': 'no-cache'

package/modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextTitle.vue

@@ -33,8 +33,9 @@
       />
       <AposLabel
         v-else
-        label="apostrophe:draft" :modifiers="['apos-is-warning', 'apos-is-filled']"
-        tooltip="apostrophe:notYetPublished"
+        :label="unpublishedLabel"
+        :tooltip="unpublishedTooltip"
+        :modifiers="['apos-is-warning', 'apos-is-filled']"
       />
     </span>
   </transition-group>
@@ -105,6 +106,15 @@ export default {
     },
     canTogglePublishDraftMode() {
       return !this.isUnpublished && !this.hasCustomUi;
+    },
+    moduleOptions() {
+      return window.apos.adminBar;
+    },
+    unpublishedLabel() {
+      return this.moduleOptions.unpublishedLabel || 'apostrophe:draft';
+    },
+    unpublishedTooltip() {
+      return this.moduleOptions.unpublishedTooltip || 'apostrophe:notYetPublished';
     }
   },
   mounted() {

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

@@ -61,7 +61,6 @@ export default {
     buttonOptions() {
       return {
         label: 'apostrophe:addContent',
-        iconOnly: this.empty === false,
         icon: 'plus-icon',
         type: 'primary',
         modifiers: this.empty ? [] : [ 'round', 'tiny' ],

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

@@ -20,10 +20,14 @@
         :class="ui.labels"
       >
         <ol class="apos-area-widget__breadcrumbs">
+          <li class="apos-area-widget__breadcrumb apos-area-widget__breadcrumb--widget-icon">
+            <AposIndicator :icon="widgetIcon" :icon-size="13" />
+          </li>
           <li
-            v-for="item in breadcrumbs.list"
+            v-for="(item, index) in breadcrumbs.list"
             :key="item.id"
             class="apos-area-widget__breadcrumb"
+            :data-apos-widget-breadcrumb="breadcrumbs.list.length - index"
           >
             <AposButton
               type="quiet"
@@ -34,7 +38,7 @@
               :modifiers="['icon-right', 'no-motion']"
             />
           </li>
-          <li class="apos-area-widget__breadcrumb">
+          <li class="apos-area-widget__breadcrumb" data-apos-widget-breadcrumb="0">
             <AposButton
               type="quiet"
               @click="foreign ? $emit('edit', i) : false"
@@ -267,6 +271,9 @@ export default {
         menuPlacement: 'top'
       };
     },
+    widgetIcon() {
+      return this.contextMenuOptions.menu.filter(item => item.name === this.widget.type)[0]?.icon || 'shape-icon';
+    },
     widgetLabel() {
       const moduleName = `${this.widget.type}-widget`;
       const module = window.apos.modules[moduleName];
@@ -587,32 +594,92 @@ export default {
     }
   }
 
-  // TODO commented code awaiting the triumphant return of the canvas -SR
-
   .apos-area-widget-controls--modify {
     right: 0;
-    // transform: translate3d(calc(100% + 5px), 0, 0);
-    // @media (max-width: ($a-canvas-max + 100px)) { // include extra space for tools
-    // transform: translate3d(-10px, 30px, 0);
     transform: translate3d(-10px, 30px, 0);
-    // }
+    ::v-deep .apos-button-group__inner {
+      border: 1px solid var(--a-primary-transparent-25);
+      box-shadow: var(--a-box-shadow);
+    }
+    ::v-deep .apos-button-group .apos-button {
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: none;
+      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);
+      }
+    }
   }
 
-  // .apos-area-widget-inner .apos-area-widget-inner .apos-area-widget-controls--modify {
-  // right: auto;
-  // left: 0;
-  // transform: translate3d(calc(-100% - 5px), 0, 0);
-  // @media (max-width: ($a-canvas-max + 100px)) { // include extra space for tools
-  // transform: translate3d(5px, 30px, 0);
-  // }
-  // }
-
   .apos-area-widget-controls--add {
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
   }
 
+  .apos-area-widget-controls--add ::v-deep {
+
+    .apos-button__wrapper {
+      padding: 8px;
+
+      &:hover .apos-button:not([disabled]) {
+        transform: scale(1.15);
+        background-size: 150% 100%;
+        border-radius: 10px;
+        transition-duration: 0.5s;
+
+        /* stylelint-disable-next-line max-nesting-depth */
+        .apos-button__label {
+          max-width: 100px;
+          max-height: 100px;
+          transition-duration: 0.5s;
+          padding: 0 5px 0 0;
+        }
+
+        /* stylelint-disable-next-line max-nesting-depth */
+        .apos-button__icon {
+          margin-right: 5px;
+        }
+      }
+    }
+
+    .apos-button__icon {
+      margin-right: 0;
+    }
+
+    .apos-button__label {
+      display: inline-block;
+      overflow: hidden;
+      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);
+    }
+
+    .apos-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      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;
+    }
+  }
+
   .apos-area-widget-controls--add--bottom {
     top: auto;
     bottom: 0;
@@ -627,7 +694,7 @@ export default {
 
   .apos-area-widget__label {
     position: absolute;
-    top: 1px;
+    top: -8px;
     right: 0;
     display: flex;
     transform: translateY(-100%);
@@ -643,9 +710,10 @@ export default {
     display: flex;
     align-items: center;
     margin: 0;
-    padding: 2px;
+    padding: 4px 6px;
     background-color: var(--a-background-primary);
-    border: 1px solid var(--a-primary-dark-10);
+    border: 1px solid var(--a-primary-transparent-50);
+    border-radius: 8px;
   }
 
   .apos-area-widget-wrapper--foreign .apos-area-widget-inner .apos-area-widget__breadcrumbs {
@@ -660,13 +728,34 @@ export default {
     @include type-help;
     padding: 2px;
     white-space: nowrap;
+    color: var(--a-base-1);
+    transition: background-color 0.3s var(--a-transition-timing-bounce);
     &:hover {
       cursor: pointer;
     }
   }
 
+  .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb,
+  .apos-area-widget__breadcrumbs:hover .apos-area-widget__breadcrumb ::v-deep .apos-button__content {
+    color: var(--a-text-primary);
+  }
+
+  .apos-area-widget__breadcrumb--widget-icon {
+    padding: 3px 2px 2px;
+    background-color: var(--a-primary-transparent-10);
+    color: var(--a-primary);
+    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 {
+    background-color: var(--a-primary-transparent-25);
+  }
+
   .apos-area-widget__breadcrumb--icon {
     padding: 2px;
+    color: var(--a-text-primary);
   }
 
   .apos-area-widget__breadcrumb ::v-deep .apos-button {

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

@@ -8,20 +8,32 @@
         v-bind="upButton"
         :disabled="first || disabled"
         @click="$emit('up')"
-        :tooltip="(!disabled && !first) ? 'apostrophe:nudgeUp' : null"
+        :tooltip="{
+          content: (!disabled && !first) ? 'apostrophe:nudgeUp' : null,
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
       <AposButton
         v-bind="editButton"
         :disabled="disabled"
         v-if="!foreign && !options.contextual"
         @click="$emit('edit')"
-        tooltip="apostrophe:editWidget"
+        :tooltip="{
+          content: 'apostrophe:editWidget',
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
       <AposButton
         v-bind="cutButton"
         v-if="!foreign"
         @click="$emit('cut')"
-        tooltip="apostrophe:cut"
+        :tooltip="{
+          content: 'apostrophe:cut',
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
       <!-- <AposButton
         v-bind="copyButton"
@@ -34,21 +46,33 @@
         :disabled="disabled || maxReached"
         v-bind="cloneButton"
         @click="$emit('clone')"
-        tooltip="apostrophe:duplicate"
+        :tooltip="{
+          content: 'apostrophe:duplicate',
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
       <AposButton
         v-if="!foreign"
         :disabled="disabled"
         v-bind="removeButton"
         @click="$emit('remove')"
-        tooltip="apostrophe:delete"
+        :tooltip="{
+          content: 'apostrophe:delete',
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
       <AposButton
         v-if="!foreign"
         v-bind="downButton"
         :disabled="last || disabled"
         @click="$emit('down')"
-        :tooltip="(!disabled && !last) ? 'apostrophe:nudgeDown' : null"
+        :tooltip="{
+          content: (!disabled && !last) ? 'apostrophe:nudgeDown' : null,
+          placement: 'left'
+        }"
+        :modifiers="[ 'inline' ]"
       />
     </AposButtonGroup>
   </div>
@@ -161,3 +185,58 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+$z-index-button-background: 1;
+$z-index-button-foreground: 2;
+
+.apos-area-modify-controls ::v-deep {
+  .apos-button__content {
+    z-index: $z-index-button-foreground;
+    position: relative;
+  }
+  .apos-button__icon {
+    transition: all 0.3s var(--a-transition-timing-bounce);
+  }
+  .apos-button {
+    background-color: transparent;
+
+    &: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 {
+      background-color: var(--a-primary-transparent-25);
+    }
+    &:after,
+    &:not([disabled]):hover:after,
+    &:not([disabled]):active:after,
+    &:not([disabled]):focus:after {
+      opacity: 1;
+      transform: scale(1.15) translateY(0);
+    }
+    &:after {
+      content: '';
+      z-index: $z-index-button-background;
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: block;
+      width: 100%;
+      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: 0;
+      transform: scale(0.3) translateY(-4px);
+    }
+  }
+}
+</style>

package/modules/@apostrophecms/asset/lib/globalIcons.js

@@ -52,6 +52,7 @@ module.exports = {
   'format-align-left-icon': 'FormatAlignLeft',
   'format-align-right-icon': 'FormatAlignRight',
   'format-bold-icon': 'FormatBold',
+  'format-font-icon': 'FormatFont',
   'format-italic-icon': 'FormatItalic',
   'format-list-bulleted-icon': 'FormatListBulleted',
   'format-list-numbered-icon': 'FormatListNumbered',
@@ -59,6 +60,7 @@ module.exports = {
   'format-strikethrough-variant-icon': 'FormatStrikethroughVariant',
   'format-superscript-icon': 'FormatSuperscript',
   'format-subscript-icon': 'FormatSubscript',
+  'format-text-icon': 'FormatText',
   'format-underline-icon': 'FormatUnderline',
   'help-circle-icon': 'HelpCircle',
   'image-edit-outline': 'ImageEditOutline',
@@ -101,6 +103,7 @@ module.exports = {
   'plus-icon': 'Plus',
   'redo-icon': 'RedoVariant',
   'refresh-icon': 'Refresh',
+  'shape-icon': 'Shape',
   'sign-text-icon': 'SignText',
   'tag-icon': 'Tag',
   'text-box-icon': 'TextBox',

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

@@ -390,6 +390,13 @@ export default {
           this.$emit('close', doc);
         }
       }
+      // Because the page or piece manager might give us just a projected,
+      // minimum number of properties otherwise
+      const complete = await apos.http.get(`${this.moduleOptions.action}/${doc._id}`, {
+        busy: true
+      });
+      Object.assign(doc, complete);
+
       apos.bus.$emit('admin-menu-click', {
         itemName: `${this.moduleName}:editor`,
         props: {

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

@@ -74,6 +74,7 @@ module.exports = {
     }
     self.enableBrowserData();
     await self.enableBearerTokens();
+    self.addToAdminBar();
   },
   handlers(self) {
     return {
@@ -850,7 +851,20 @@ module.exports = {
           namespace,
           key: username
         });
+      },
+
+      addToAdminBar() {
+        self.apos.adminBar.add(
+          `${self.__meta.name}-logout`,
+          'apostrophe:logOut',
+          false,
+          {
+            user: true,
+            last: true
+          }
+        );
       }
+
     };
   },