apostrophe 3.28.1 → 3.29.0

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

@@ -0,0 +1,264 @@
+<template>
+  <AposModal
+    class="apos-area-menu--expanded"
+    :modal="modal"
+    modal-title="apostrophe:addContent"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @esc="close"
+    @no-modal="$emit('safe-close')"
+  >
+    <template #main>
+      <AposModalBody>
+        <template #bodyMain>
+          <div
+            v-for="(group, groupIndex) in groups"
+            :key="groupIndex"
+            class="apos-widget-group"
+          >
+            <h2 class="apos-widget-group__label" v-if="group.label">{{ group.label }}</h2>
+            <div
+              :class="[
+                `apos-widget-group--${group.columns}-column${
+                  group.columns > 1 ? 's' : ''
+                }`
+              ]"
+            >
+              <div
+                v-for="(item, itemIndex) in group.widgets"
+                :key="itemIndex"
+                class="apos-widget"
+                @click="add(item)"
+              >
+                <div class="apos-widget__preview">
+                  <plus-icon
+                    :size="20"
+                    class="apos-icon--add"
+                  />
+                  <img
+                    v-if="item.previewImage"
+                    :src="previewUrl(item)"
+                    :alt="`${item.name} preview`"
+                    class="apos-widget__preview-image"
+                  >
+                  <component
+                    v-else-if="hasIcon(item)"
+                    :size="25"
+                    class="apos-widget__preview--icon"
+                    :is="item.previewIcon || item.icon"
+                  />
+                </div>
+                <p class="apos-widget__label">
+                  {{ $t(item.label) }}
+                </p>
+                <p v-if="item.description" class="apos-widget__help">
+                  {{ $t(item.description) }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </template>
+      </AposModalBody>
+    </template>
+  </AposModal>
+</template>
+
+<script>
+export default {
+  name: 'AposAreaExpandedMenu',
+  props: {
+    options: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: [ 'expanded-menu-close', 'safe-close', 'modal-result' ],
+  data() {
+    return {
+      modal: {
+        active: false,
+        type: 'slide',
+        origin: 'left',
+        showModal: false,
+        width: 'one-third'
+      },
+      groups: []
+    };
+  },
+  async mounted() {
+    this.modal.active = true;
+
+    if (this.options.groups) {
+      for (const item of Object.keys(this.options.groups)) {
+        if (!this.isValidColumn(item.columns)) {
+          console.warn(
+            `apos.expanded-menu: The specified number of columns for the group ${item.label} is not between the allowed range of 1-4.`
+          );
+        }
+
+        const group = this.createGroup(this.options.groups[item]);
+        this.groups.push(group);
+      }
+    } else if (this.options.widgets) {
+      if (!this.isValidColumn(this.options.columns)) {
+        console.warn(
+          'apos.expanded-menu: The specified number of columns for the area is not between the allowed range of 1-4.'
+        );
+      }
+
+      const group = this.createGroup(this.options);
+      this.groups.push(group);
+    } else {
+      console.warn(
+        'apos.expanded-menu: No groups or widgets defined. Please, either add a groups or widgets property to your area configuration.'
+      );
+    }
+  },
+  methods: {
+    isValidColumn(count) {
+      return count ? +count > 1 && +count < 4 : true;
+    },
+    createGroup(config) {
+      const group = {
+        columns: +config.columns || 3,
+        widgets: []
+      };
+
+      if (config.label) {
+        group.label = config.label;
+      }
+
+      for (const item of Object.keys(config.widgets)) {
+        group.widgets.push(apos.modules[`${item}-widget`]);
+      }
+
+      return group;
+    },
+    hasIcon(widget) {
+      return widget.previewIcon || widget.icon;
+    },
+    previewUrl(widget) {
+      return widget.previewImage ? apos.util.assetUrl(`/modules/${widget.name}-widget/preview.${widget.previewImage}`) : '';
+    },
+    close() {
+      this.modal.showModal = false;
+    },
+    async add(item) {
+      const data = {
+        ...item,
+        index: this.index
+      };
+      this.$emit('modal-result', data);
+      this.modal.showModal = false;
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-area-menu--expanded {
+  @include type-base;
+}
+
+.apos-widget-group {
+  &:not(:last-of-type) {
+    margin-bottom: 30px;
+  }
+
+  .apos-widget__preview {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 135px;
+    border: 1px solid var(--a-base-7);
+    border-radius: var(--a-border-radius);
+    background-color: var(--a-base-10);
+  }
+
+  &--2-columns {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px;
+  }
+
+  &--3-columns {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 10px;
+    .apos-widget__preview {
+      height: 89px;
+    }
+  }
+
+  &--4-columns {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5px;
+    .apos-widget__preview {
+      height: 66px;
+    }
+  }
+}
+
+.apos-widget {
+  .apos-widget__preview {
+    transition: opacity 250ms ease-in-out;
+    .apos-icon--add {
+      z-index: $z-index-default;
+      position: absolute;
+      // Center in the parent element
+      align-self: center;
+      justify-self: center;
+      // Center the child content
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 27px;
+      height: 27px;
+      border-radius: 50%;
+      background-color: var(--a-primary);
+      opacity: 0;
+      color: var(--a-white);
+    }
+    &::after {
+      transition: all 250ms ease-in-out;
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 100%;
+      background-color: var(--a-primary);
+      opacity: 0;
+    }
+  }
+  &:hover {
+    cursor: pointer;
+    // stylelint-disable max-nesting-depth
+    .apos-widget__preview {
+      .apos-icon--add {
+        opacity: 1;
+      }
+      &::after {
+        opacity: 0.4;
+      }
+    }
+    // stylelint-enable max-nesting-depth
+  }
+}
+
+.apos-widget__preview-image {
+  width: 100%;
+}
+
+.apos-widget-group__label,
+.apos-widget__help {
+  @include type-base;
+  line-height: var(--a-line-tall);
+  color: var(--a-base-4);
+  text-align: left;
+}
+</style>

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

@@ -1,91 +1,33 @@
 <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>
+  <AposButton
+    v-if="options.expanded"
+    :disabled="disabled"
+    v-bind="buttonOptions"
+    @click="openExpandedMenu(index)"
+    role="button"
+  />
+  <AposAreaContextualMenu
+    v-else
+    @add="$emit('add', $event);"
+    :button-options="buttonOptions"
+    :context-menu-options="contextMenuOptions"
+    :empty="true"
+    :index="index"
+    :widget-options="options.widgets"
+    :options="options"
+    :max-reached="maxReached"
+    :disabled="disabled"
+  />
 </template>
 
 <script>
-
-import cuid from 'cuid';
-
 export default {
+  name: 'AposAreaMenu',
   props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     empty: {
       type: Boolean,
       default: false
@@ -98,30 +40,24 @@ export default {
       type: Number,
       default: 0
     },
-    widgetOptions: {
+    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
-    };
-  },
+  emits: [ 'add' ],
   computed: {
-    moduleOptions() {
-      return window.apos.area;
-    },
     buttonOptions() {
       return {
         label: 'apostrophe:addContent',
@@ -131,147 +67,18 @@ export default {
         modifiers: this.empty ? [] : [ 'round', 'tiny' ],
         iconSize: this.empty ? 20 : 11
       };
-    },
-    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);
-        }
+    async openExpandedMenu(index) {
+      const data = await apos.modal.execute('AposAreaExpandedMenu', {
+        field: this.field,
+        options: this.options,
+        index
       });
 
-      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();
+      if (data) {
+        this.$emit('add', data);
       }
     }
   }

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

@@ -60,7 +60,8 @@
           @menu-close="toggleMenuFocus($event, 'top', false)"
           :context-menu-options="contextMenuOptions"
           :index="i"
-          :widget-options="options.widgets"
+          :widget-options="widgets"
+          :options="options"
           :disabled="disabled"
         />
       </div>
@@ -96,10 +97,10 @@
       <component
         v-if="isContextual && !foreign"
         :is="widgetEditorComponent(widget.type)"
+        :options="widgetOptions"
+        :type="widget.type"
         :value="widget"
         @update="$emit('update', $event)"
-        :options="options.widgets[widget.type]"
-        :type="widget.type"
         :doc-id="docId"
         :focused="focused"
         :key="generation"
@@ -107,7 +108,7 @@
       <component
         v-else
         :is="widgetComponent(widget.type)"
-        :options="options.widgets[widget.type]"
+        :options="widgetOptions"
         :type="widget.type"
         :id="widget._id"
         :area-field-id="fieldId"
@@ -128,7 +129,8 @@
           @add="$emit('add', $event)"
           :context-menu-options="bottomContextMenuOptions"
           :index="i + 1"
-          :widget-options="options.widgets"
+          :widget-options="widgets"
+          :options="options"
           :disabled="disabled"
           @menu-open="toggleMenuFocus($event, 'bottom', true)"
           @menu-close="toggleMenuFocus($event, 'bottom', false)"
@@ -139,7 +141,6 @@
 </template>
 
 <script>
-
 import { klona } from 'klona';
 import AposIndicator from '../../../../ui/ui/apos/components/AposIndicator.vue';
 
@@ -249,7 +250,8 @@ export default {
       breadcrumbs: {
         $lastEl: null,
         list: []
-      }
+      },
+      widgets: this.options.widgets || {}
     };
   },
   computed: {
@@ -262,6 +264,9 @@ export default {
     widgetLabel() {
       return window.apos.modules[`${this.widget.type}-widget`].label;
     },
+    widgetOptions() {
+      return this.widgets[this.widget.type];
+    },
     isContextual() {
       return this.moduleOptions.widgetIsContextual[this.widget.type];
     },
@@ -334,6 +339,16 @@ export default {
       }
     }
   },
+  created() {
+    if (this.options.groups) {
+      for (const group of Object.keys(this.options.groups)) {
+        this.widgets = {
+          ...this.options.groups[group].widgets,
+          ...this.widgets
+        };
+      }
+    }
+  },
   mounted() {
     // AposAreaEditor is listening for keyboard input that triggers
     // a 'focus my parent' plea

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

@@ -232,16 +232,17 @@ export default {
       } catch (e) {
         this.error = e.message || 'An error occurred. Please try again.';
         this.phase = 'beforeSubmit';
-        this.requirements = getRequirements();
       } finally {
         this.busy = false;
       }
     },
     getInitialSubmitRequirementsData() {
-      return Object.fromEntries(this.requirements.filter(r => r.phase !== 'afterPasswordVerified').map(r => ([
-        r.name,
-        r.value
-      ])));
+      return Object.fromEntries(this.requirements
+        .filter(r => r.phase !== 'afterPasswordVerified' || !r.done)
+        .map(r => ([
+          r.name,
+          r.value
+        ])));
     },
     async invokeFinalLoginApi() {
       try {
@@ -257,7 +258,6 @@ export default {
         this.redirectAfterLogin();
       } catch (e) {
         this.error = e.message || 'An error occurred. Please try again.';
-        this.requirements = getRequirements();
         this.phase = 'beforeSubmit';
       } finally {
         this.busy = false;