apostrophe 3.28.0 → 3.29.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## 3.29.0 (2022-10-03)
+
+### Adds
+
+* Areas now support an `expanded: true` option to display previews for widgets. The Expanded Widget Preview Menu also supports grouping and display columns for each group.
+* Add "showQuery" in piece-page-type in order to override the query for the "show" page as "indexQuery" does it for the index page
+
+### Fixes
+
+* Resolved a bug in which users making a password error in the presence of pre-login checks such as a CAPTCHA were unable to try again until they refreshed the page.
+
+## 3.28.1 (2022-09-15)
+
+### Fixes
+
+* `AposInputBoolean` can now be `required` and have the value `false`.
+* Schema fields containing boolean filters can now list both `yes` and `no` choices according to available values in the database.
+* Fix attachment `getHeight()` and `getWidth()` template helpers by changing the assignment of the `attachment._crop` property.
+* Change assignment of `attachment._focalPoint` for consistency.
+
 ## 3.28.0 (2022-08-31)
 
 ### Fixes
@@ -99,7 +119,7 @@ Hotfix: always waits for the DOM to be ready before initializing the Apostrophe
 
 ### Fixes
 
-* Fix a Webpack cache issue leading to modules symlinked in `node_modules` not being rebuilt. 
+* Fix a Webpack cache issue leading to modules symlinked in `node_modules` not being rebuilt.
 * Fixes login maximum attempts error message that wasn't showing the plural when lockoutMinutes is more than 1.
 * Fixes the text color of the current array item's slat label in the array editor modal.
 * Fixes the maximum width of an array item's slat label so as to not obscure the Remove button in narrow viewports.
@@ -113,13 +133,13 @@ Hotfix: always waits for the DOM to be ready before initializing the Apostrophe
 ### Fixes
 
 * Work around backwards compatibility break in `sass` module by pinning to `sass` `1.50.x` while we investigate. If you saw the error `RangeError: Invalid value: Not in inclusive range 0..145: -1` you can now fix that by upgrading with `npm update`. If it does not immediately clear up the issue in development, try `node app @apostrophecms/asset:clear-cache`.
- 
+
 ## 3.21.0 (2022-05-25)
 
 ### Adds
 
 * Trigger only the relevant build when in a watch mode (development). The build paths should not contain comma (`,`).
-* Adds an `unpublish` method, available for any doc-type.  
+* Adds an `unpublish` method, available for any doc-type.
 An _Unpublish_ option has also been added to the context menu of the modal when editing a piece or a page.
 * Allows developers to group fields in relationships the same way it's done for normal schemas.
 
@@ -196,9 +216,9 @@ An _Unpublish_ option has also been added to the context menu of the modal when
 * Adds possibility for modules to [add extra frontend bundles for scss and js](https://v3.docs.apostrophecms.org/guide/webpack.html). This is useful when the `ui/src` build would otherwise be very large due to code used on rarely accessed pages.
 * Loads the right bundles on the right pages depending on the page template and the loaded widgets. Logged-in users have all the bundles on every page, because they might introduce widgets at any time.
 * Fixes deprecation warnings displayed after running `npm install`, for dependencies that are directly included by this package.
-* Implement custom ETags emission when `etags` cache option is enabled. [See the documentation for more information](https://v3.docs.apostrophecms.org/guide/caching.html).  
-It allows caching of pages and pieces, using a cache invalidation mechanism that takes into account related (and reverse related) document updates, thanks to backlinks mentioned above.  
-Note that for now, only single pages and pieces benefit from the ETags caching system (pages' and pieces' `getOne` REST API route, and regular served pages).  
+* Implement custom ETags emission when `etags` cache option is enabled. [See the documentation for more information](https://v3.docs.apostrophecms.org/guide/caching.html).
+It allows caching of pages and pieces, using a cache invalidation mechanism that takes into account related (and reverse related) document updates, thanks to backlinks mentioned above.
+Note that for now, only single pages and pieces benefit from the ETags caching system (pages' and pieces' `getOne` REST API route, and regular served pages).
 The cache of an index page corresponding to the type of a piece that was just saved will automatically be invalidated. However, please consider that it won't be effective when a related piece is saved, therefore the cache will automatically be invalidated _after_ the cache lifetime set in `maxAge` cache option.
 
 ### Fixes

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

@@ -43,9 +43,10 @@ module.exports = {
             throw self.apos.error('invalid');
           }
 
-          let options = field.options && field.options.widgets && field.options.widgets[type];
+          const widgets = self.getWidgets(field.options);
+
+          const options = widgets[type] || {};
 
-          options = options || {};
           const manager = self.getWidgetManager(type);
           if (!manager) {
             self.warnMissingWidgetType(type);
@@ -96,6 +97,20 @@ module.exports = {
       setWidgetManager(name, manager) {
         self.widgetManagers[name] = manager;
       },
+      getWidgets(options) {
+        let widgets = options.widgets || {};
+
+        if (options.groups) {
+          for (const group of Object.keys(options.groups)) {
+            widgets = {
+              ...widgets,
+              ...options.groups[group].widgets
+            };
+          }
+        }
+
+        return widgets;
+      },
       // Get the manager object for the given widget type name.
       getWidgetManager(name) {
         return self.widgetManagers[name];
@@ -140,7 +155,12 @@ module.exports = {
             in an options property.
           `);
         }
-        _.each(options.widgets, function (options, name) {
+
+        const widgets = self.getWidgets(options);
+
+        options.widgets = widgets;
+
+        _.each(widgets, function (options, name) {
           const manager = self.widgetManagers[name];
           if (manager) {
             choices.push({
@@ -254,7 +274,8 @@ module.exports = {
         options = options || {};
         const result = [];
         const errors = [];
-        const widgetsOptions = options.widgets || {};
+        const widgetsOptions = self.getWidgets(options);
+
         for (let i = 0; i < items.length; i++) {
           const item = items[i];
           if ((item == null) || typeof item !== 'object' || typeof item.type !== 'string') {

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

@@ -0,0 +1,382 @@
+<template>
+  <div class="apos-area-menu" :class="{'apos-is-focused': groupIsFocused}">
+    <AposContextMenu
+      :disabled="isDisabled"
+      :button="buttonOptions"
+      v-bind="extendedContextMenuOptions"
+      @open="menuOpen"
+      @close="menuClose"
+      ref="contextMenu"
+      :popover-modifiers="inContext ? ['z-index-in-context'] : []"
+    >
+      <ul class="apos-area-menu__wrapper">
+        <li
+          class="apos-area-menu__item"
+          v-for="(item, itemIndex) in myMenu"
+          :key="item.type ? `${item.type}_${item.label}` : item.label"
+          :class="{'apos-has-group': item.items}"
+          :ref="`item-${itemIndex}`"
+        >
+          <dl v-if="item.items" class="apos-area-menu__group">
+            <dt>
+              <button
+                :for="item.label" class="apos-area-menu__group-label"
+                v-if="item.items" tabindex="0"
+                :id="`${menuId}-trigger-${itemIndex}`"
+                :aria-controls="`${menuId}-group-${itemIndex}`"
+                @focus="groupFocused"
+                @blur="groupBlurred"
+                @click="toggleGroup(itemIndex)"
+                @keydown.prevent.space="toggleGroup(itemIndex)"
+                @keydown.prevent.enter="toggleGroup(itemIndex)"
+                @keydown.prevent.arrow-down="switchGroup(itemIndex, 1)"
+                @keydown.prevent.arrow-up="switchGroup(itemIndex, -1)"
+                @keydown.prevent.home="switchGroup(itemIndex, 0)"
+                @keydown.prevent.end="switchGroup(itemIndex, null)"
+                ref="groupButton"
+              >
+                <span>{{ item.label }}</span>
+                <chevron-up-icon
+                  class="apos-area-menu__group-chevron"
+                  :class="{'apos-is-active': itemIndex === active}" :size="13"
+                />
+              </button>
+            </dt>
+            <dd class="apos-area-menu__group-list" role="region">
+              <ul
+                class="apos-area-menu__items apos-area-menu__items--accordion"
+                :class="{'apos-is-active': active === itemIndex}"
+                :id="`${menuId}-group-${itemIndex}`"
+                :aria-labelledby="`${menuId}-trigger-${itemIndex}`"
+                :aria-expanded="active === itemIndex ? 'true' : 'false'"
+              >
+                <li
+                  class="apos-area-menu__item"
+                  v-for="(child, childIndex) in item.items"
+                  :key="child.name"
+                  :ref="`child-${index}-${childIndex}`"
+                >
+                  <AposAreaMenuItem
+                    @click="add(child)"
+                    :item="child"
+                    :tabbable="itemIndex === active"
+                    @up="switchItem(`child-${itemIndex}-${childIndex - 1}`, -1)"
+                    @down="switchItem(`child-${itemIndex}-${childIndex + 1}`, 1)"
+                  />
+                </li>
+              </ul>
+            </dd>
+          </dl>
+          <AposAreaMenuItem
+            v-else
+            @click="add(item)"
+            :item="item"
+            @up="switchItem(`item-${itemIndex - 1}`, -1)"
+            @down="switchItem(`item-${itemIndex + 1}`, 1)"
+          />
+        </li>
+      </ul>
+    </AposContextMenu>
+  </div>
+</template>
+
+<script>
+import cuid from 'cuid';
+
+export default {
+  name: 'AposAreaContextualMenu',
+  props: {
+    buttonOptions: {
+      type: Object,
+      required: true
+    },
+    contextMenuOptions: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      default: 0
+    },
+    options: {
+      type: Object,
+      required: true
+    },
+    maxReached: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    // NOTE: Left for backwards compatibility.
+    // Should use options now instead.
+    widgetOptions: {
+      type: Object,
+      default: function() {
+        return {};
+      }
+    }
+  },
+  emits: [ 'menu-close', 'menu-open', 'add' ],
+  data() {
+    return {
+      active: 0,
+      groupIsFocused: false,
+      inContext: true
+    };
+  },
+  computed: {
+    moduleOptions() {
+      return window.apos.area;
+    },
+    isDisabled() {
+      let flag = this.disabled;
+      if (this.maxReached) {
+        flag = true;
+      }
+      return flag;
+    },
+    extendedContextMenuOptions() {
+      const modifiers = [ 'unpadded' ];
+      if (!this.groupedMenus) {
+        modifiers.push('tb-padded');
+      }
+      return {
+        menuPlacement: 'bottom',
+        menuOffset: 15,
+        ...this.contextMenuOptions,
+        modifiers
+      };
+    },
+    groupedMenus() {
+      let flag = false;
+      this.contextMenuOptions.menu.forEach((e) => {
+        if (e.items) {
+          flag = true;
+        }
+      });
+      return flag;
+    },
+    myMenu() {
+      const clipboard = apos.area.widgetClipboard.get();
+      const menu = [ ...this.contextMenuOptions.menu ];
+      if (clipboard) {
+        const widget = clipboard;
+        const matchingChoice = menu.find(option => option.name === widget.type);
+        if (matchingChoice) {
+          menu.unshift({
+            type: 'clipboard',
+            ...matchingChoice,
+            label: {
+              key: 'apostrophe:pasteWidget',
+              widget: this.$t(matchingChoice.label)
+            },
+            clipboard: widget
+          });
+        }
+      }
+      if (this.groupedMenus) {
+        return this.composeGroups(menu);
+      } else {
+        return menu;
+      }
+    },
+    menuId() {
+      return `areaMenu-${cuid()}`;
+    }
+  },
+  mounted() {
+    // if this area is not in-context then it is assumed in a schema's modal and we need to bump
+    // the z-index of menus above them
+    this.inContext = !apos.util.closest(this.$el, '[data-apos-schema-area]');
+  },
+  methods: {
+    menuClose(e) {
+      this.$emit('menu-close', e);
+    },
+    menuOpen(e) {
+      this.$emit('menu-open', e);
+    },
+    async add(item) {
+      // Potential TODO: If we find ourselves manually flipping these bits in other AposContextMenu overrides
+      // we should consider refactoring contextmenus to be able to self close when any click takes place within their el
+      // as it is often the logical experience (not always, see tag menus and filters)
+      this.$refs.contextMenu.isOpen = false;
+      this.$emit('add', {
+        ...item,
+        index: this.index
+      });
+    },
+    groupFocused() {
+      this.groupIsFocused = true;
+    },
+    groupBlurred() {
+      this.groupIsFocused = false;
+    },
+    composeGroups(menu) {
+      const ungrouped = {
+        label: 'apostrophe:ungroupedWidgets',
+        items: []
+      };
+      const myMenu = [];
+
+      menu.forEach((item) => {
+        if (!item.items) {
+          ungrouped.items.push(item);
+        } else {
+          myMenu.push(item);
+        }
+      });
+
+      if (ungrouped.items.length) {
+        myMenu.push(ungrouped);
+      }
+      return myMenu;
+    },
+
+    toggleGroup(index) {
+      if (this.active !== index) {
+        this.active = index;
+      } else {
+        this.active = null;
+      }
+    },
+
+    switchGroup(index, dir) {
+      let target;
+
+      if (dir > 0) {
+        target = index < this.$refs.groupButton.length - 1 ? index + 1 : 0;
+      }
+
+      if (dir < 0) {
+        target = index === 0 ? this.$refs.groupButton.length - 1 : index - 1;
+      }
+
+      if (dir === 0) {
+        target = 0;
+      }
+
+      if (!dir) {
+        target = this.$refs.groupButton.length - 1;
+      }
+
+      this.$nextTick(() => {
+        this.$refs.groupButton[target].focus();
+      });
+    },
+
+    switchItem(name, dir) {
+      if (this.$refs[name]) {
+        this.$refs[name][0].querySelector('button').focus();
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+
+.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__inner {
+  border: 1px solid var(--a-base-4);
+}
+
+.apos-area-menu.apos-is-focused ::v-deep .apos-context-menu__tip-outline {
+  stroke: var(--a-base-4);
+}
+
+.apos-area-menu__wrapper,
+.apos-area-menu__items,
+.apos-area-menu__group-list {
+  @include apos-list-reset();
+}
+
+.apos-area-menu__wrapper {
+  min-width: 250px;
+}
+
+.apos-area-menu__button {
+  @include apos-button-reset();
+  @include type-base;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 5px 20px;
+  color: var(--a-base-1);
+
+  &:hover,
+  &:focus {
+    & ::v-deep .apos-area-menu__item-icon {
+      color: var(--a-primary);
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    color: var(--a-text-primary);
+  }
+
+  &:focus {
+    outline: none;
+    color: var(--a-text-primary);
+  }
+
+  &:active {
+    color: var(--a-base-1);
+  }
+}
+
+.apos-area-menu__accordion-trigger {
+  z-index: $z-index-under;
+  opacity: 0;
+  position: absolute;
+}
+
+.apos-area-menu__group-label {
+  @include apos-button-reset();
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: 10px 20px;
+  &:hover {
+    cursor: pointer;
+  }
+
+  &:focus {
+    background-color: var(--a-base-10);
+    outline: 1px solid var(--a-base-4);
+  }
+}
+
+.apos-area-menu__group-chevron {
+  @include apos-transition();
+  transform: rotate(90deg);
+}
+
+.apos-area-menu__group-chevron.apos-is-active {
+  transform: rotate(180deg);
+}
+
+.apos-area-menu__group {
+  border-bottom: 1px solid var(--a-base-8);
+  padding-bottom: 10px;
+  margin: 10px 0;
+}
+.apos-area-menu__item:last-child.apos-has-group .apos-area-menu__group {
+  border-bottom: none;
+  margin-bottom: 0;
+}
+
+.apos-area-menu__items--accordion {
+  overflow: hidden;
+  max-height: 0;
+  @include apos-transition($duration:0.3s);
+}
+
+.apos-area-menu__items--accordion.apos-is-active {
+  transition-delay: 0.25s;
+  max-height: 20rem;
+}
+
+</style>

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

@@ -26,9 +26,10 @@
           :context-menu-options="contextMenuOptions"
           :empty="true"
           :index="0"
-          :widget-options="options.widgets"
+          :options="options"
           :max-reached="maxReached"
           :disabled="field && field.readOnly"
+          :widget-options="options.widgets"
         />
       </template>
     </div>
@@ -138,7 +139,8 @@ export default {
       contextMenuOptions: {
         menu: this.choices
       },
-      edited: {}
+      edited: {},
+      widgets: {}
     };
   },
   computed: {
@@ -164,7 +166,7 @@ export default {
       return window.apos.area;
     },
     types() {
-      return Object.keys(this.options.widgets);
+      return Object.keys(this.widgets);
     },
     maxReached() {
       return this.options.max && this.next.length >= this.options.max;
@@ -195,6 +197,16 @@ export default {
       this.next = this.getValidItems();
     }
   },
+  created() {
+    if (this.options.groups) {
+      for (const group of Object.keys(this.options.groups)) {
+        this.widgets = {
+          ...this.options.groups[group].widgets,
+          ...this.widgets
+        };
+      }
+    }
+  },
   mounted() {
     apos.bus.$on('area-updated', this.areaUpdatedHandler);
     apos.bus.$on('widget-hover', this.updateWidgetHovered);
@@ -433,7 +445,7 @@ export default {
         apos.area.activeEditor = this;
         const widget = await apos.modal.execute(componentName, {
           value: null,
-          options: this.options.widgets[name],
+          options: this.widgetOptionsByType(name),
           type: name,
           docId: this.docId
         });
@@ -446,6 +458,18 @@ export default {
         }
       }
     },
+    widgetOptionsByType(name) {
+      if (this.options.widgets) {
+        return this.options.widgets[name];
+      } else if (this.options.expanded) {
+        for (const info of Object.values(this.options.groups || {})) {
+          if (info?.widgets?.[name]) {
+            return info.widgets[name];
+          }
+        }
+      }
+      return null;
+    },
     contextualWidgetDefaultData(type) {
       return this.moduleOptions.contextualWidgetDefaultData[type];
     },