apostrophe 4.6.0 → 4.6.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 4.6.1 (2024-08-26)
+
+### Fixes
+
+* Registering duplicate icon is no longer breaking the build.
+* Fix widget focus state so that the in-context Add Content menu stays visible during animation.
+* Fix UI of areas in schemas so that their context menus are layered overtop sibling schema fields UI.
+
 ## 4.6.0 (2024-08-08)
 
 ### Adds

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

@@ -6,6 +6,7 @@
       :disabled="isDisabled"
       :button="buttonOptions"
       :popover-modifiers="inContext ? ['z-index-in-context'] : []"
+      :menu-id="menuId"
     >
       <ul class="apos-area-menu__wrapper">
         <li
@@ -117,6 +118,12 @@ export default {
       default: function() {
         return {};
       }
+    },
+    menuId: {
+      type: String,
+      default() {
+        return `areaMenu-${createId()}`;
+      }
     }
   },
   emits: [ 'add' ],
@@ -182,9 +189,6 @@ export default {
       } else {
         return menu;
       }
-    },
-    menuId() {
-      return `areaMenu-${createId()}`;
     }
   },
   mounted() {

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

@@ -16,6 +16,7 @@
     :options="options"
     :max-reached="maxReached"
     :disabled="disabled"
+    :menu-id="menuId"
     @add="$emit('add', $event);"
   />
 </template>
@@ -58,6 +59,10 @@ export default {
     tabbable: {
       type: Boolean,
       default: false
+    },
+    menuId: {
+      type: String,
+      default: null
     }
   },
   emits: [ 'add' ],

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

@@ -75,6 +75,8 @@
           :options="options"
           :disabled="disabled"
           :tabbable="isHovered || isFocused"
+          :menu-id="`${widget._id}-widget-menu-top`"
+          :class="{[classes.open]: menuOpen === 'top'}"
           @add="$emit('add', $event);"
         />
       </div>
@@ -148,6 +150,8 @@
           :options="options"
           :disabled="disabled"
           :tabbable="isHovered || isFocused"
+          :menu-id="`${widget._id}-widget-menu-bottom`"
+          :class="{[classes.open]: menuOpen === 'bottom'}"
           @add="$emit('add', $event)"
         />
       </div>
@@ -251,6 +255,7 @@ export default {
     return {
       mounted: false, // hack around needing DOM to be rendered for computed classes
       isSuppressed: false,
+      menuOpen: null,
       classes: {
         show: 'apos-is-visible',
         open: 'apos-is-open',
@@ -345,7 +350,8 @@ export default {
     },
     addClasses() {
       return {
-        [this.classes.show]: this.isHovered || this.isFocused
+        [this.classes.show]: this.isHovered || this.isFocused,
+        [`${this.classes.open}--menu-${this.menuOpen}`]: !!this.menuOpen
       };
     },
     foreign() {
@@ -358,6 +364,7 @@ export default {
       if (newVal) {
         this.$refs.wrapper.addEventListener('keydown', this.handleKeyboardUnfocus);
       } else {
+        this.menuOpen = null;
         this.$refs.wrapper.removeEventListener('keydown', this.handleKeyboardUnfocus);
       }
     }
@@ -377,6 +384,7 @@ export default {
     // AposAreaEditor is listening for keyboard input that triggers
     // a 'focus my parent' plea
     apos.bus.$on('widget-focus-parent', this.focusParent);
+    apos.bus.$on('context-menu-toggled', this.getFocusForMenu);
 
     this.breadcrumbs.$lastEl = this.$el;
 
@@ -395,6 +403,22 @@ export default {
   },
   methods: {
 
+    getFocusForMenu({ menuId, isOpen }) {
+      if (
+        (
+          menuId === `${this.widget._id}-widget-menu-top` ||
+          menuId === `${this.widget._id}-widget-menu-bottom`
+        ) &&
+        isOpen
+      ) {
+        const whichMenu = menuId.split('-')[menuId.split('-').length - 1];
+        this.menuOpen = whichMenu;
+        this.getFocus(null, this.widget._id);
+      } else {
+        this.menuOpen = null;
+      }
+    },
+
     // Determine whether or not we should adjust the label based on its position to the admin bar
     adjustUi() {
       const { height: labelHeight } = this.$refs.label.getBoundingClientRect();
@@ -427,7 +451,9 @@ export default {
 
     // Ask the parent AposAreaEditor to make us focused
     getFocus(e, id) {
-      e.stopPropagation();
+      if (e) {
+        e.stopPropagation();
+      }
       this.isSuppressed = false;
       apos.bus.$emit('widget-focus', id);
     },
@@ -515,6 +541,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@mixin showButton() {
+  transform: scale(1.15);
+  background-size: 150% 100%;
+  border-radius: 10px;
+  transition-duration: 500ms;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  .apos-button__label {
+    max-width: 100px;
+    max-height: 100px;
+    transition-duration: 500ms;
+    padding: 0 5px 0 0;
+  }
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  .apos-button__icon {
+    margin-right: 5px;
+  }
+}
+
   .apos-area-widget-guard {
     position: absolute;
     top: 0;
@@ -657,6 +703,22 @@ export default {
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
+
+    &.apos-area-widget-controls--add--top.apos-is-open--menu-top,
+    &.apos-area-widget-controls--add--bottom.apos-is-open--menu-bottom {
+      z-index: $z-index-area-schema-ui;
+    }
+  }
+
+  .apos-area-widget-controls--add {
+    &.apos-area-widget-controls--add--top.apos-is-open--menu-top,
+    &.apos-area-widget-controls--add--bottom.apos-is-open--menu-bottom {
+
+      /* stylelint-disable-next-line max-nesting-depth */
+      :deep(.apos-button__wrapper .apos-button:not([disabled])) {
+        @include showButton;
+      }
+    }
   }
 
   .apos-area-widget-controls--add {
@@ -664,23 +726,7 @@ export default {
       padding: 8px;
 
       &:hover .apos-button:not([disabled]) {
-        transform: scale(1.15);
-        background-size: 150% 100%;
-        border-radius: 10px;
-        transition-duration: 500ms;
-
-        /* stylelint-disable-next-line max-nesting-depth */
-        .apos-button__label {
-          max-width: 100px;
-          max-height: 100px;
-          transition-duration: 500ms;
-          padding: 0 5px 0 0;
-        }
-
-        /* stylelint-disable-next-line max-nesting-depth */
-        .apos-button__icon {
-          margin-right: 5px;
-        }
+        @include showButton;
       }
     }
 

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

@@ -572,11 +572,15 @@ module.exports = {
               registerCode: 'window.apos.iconComponents = window.apos.iconComponents || {};\n'
             };
 
+            const importIndex = [];
             for (const [ registerAs, importFrom ] of Object.entries(self.iconMap)) {
-              if (importFrom.substring(0, 1) === '~') {
-                output.importCode += `import ${importFrom}Icon from '${importFrom.substring(1)}';\n`;
-              } else {
-                output.importCode += `import ${importFrom}Icon from '@apostrophecms/vue-material-design-icons/${importFrom}.vue';\n`;
+              if (!importIndex.includes(importFrom)) {
+                if (importFrom.substring(0, 1) === '~') {
+                  output.importCode += `import ${importFrom}Icon from '${importFrom.substring(1)}';\n`;
+                } else {
+                  output.importCode += `import ${importFrom}Icon from '@apostrophecms/vue-material-design-icons/${importFrom}.vue';\n`;
+                }
+                importIndex.push(importFrom);
               }
               output.registerCode += `window.apos.iconComponents['${registerAs}'] = ${importFrom}Icon;\n`;
             }

package/modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -326,6 +326,8 @@ export default {
         if (this.pending) {
           this.emitWidgetUpdate();
         }
+      } else {
+        apos.bus.$emit('close-context-menus');
       }
     },
     isShowingInsert(newVal) {

package/modules/@apostrophecms/ui/ui/apos/components/AposContextMenu.vue

@@ -106,12 +106,17 @@ const props = defineProps({
     default() {
       return [];
     }
+  },
+  menuId: {
+    type: String,
+    default() {
+      return createId();
+    }
   }
 });
 
 const emit = defineEmits([ 'open', 'close', 'item-clicked' ]);
 
-const menuId = ref(createId());
 const isOpen = ref(false);
 const placement = ref(props.menuPlacement);
 const event = ref(null);
@@ -172,13 +177,13 @@ watch(isOpen, (newVal) => {
 const { themeClass } = useAposTheme();
 
 onMounted(() => {
-  apos.bus.$on('context-menu-opened', hideWhenOtherOpen);
-  apos.bus.$on('widget-focus', hide);
+  apos.bus.$on('context-menu-toggled', hideWhenOtherOpen);
+  apos.bus.$on('close-context-menus', hide);
 });
 
 onBeforeUnmount(() => {
-  apos.bus.$off('context-menu-opened', hideWhenOtherOpen);
-  apos.bus.$off('widget-focus', hide);
+  apos.bus.$off('context-menu-toggled', hideWhenOtherOpen);
+  apos.bus.$off('close-context-menus', hide);
 });
 
 function getMenuOffset() {
@@ -188,8 +193,8 @@ function getMenuOffset() {
   };
 }
 
-function hideWhenOtherOpen(id) {
-  if (menuId.value !== id) {
+function hideWhenOtherOpen({ menuId }) {
+  if (props.menuId !== menuId) {
     hide();
   }
 }
@@ -199,8 +204,11 @@ function hide() {
 }
 
 function buttonClicked(e) {
-  apos.bus.$emit('context-menu-opened', menuId.value);
   isOpen.value = !isOpen.value;
+  apos.bus.$emit('context-menu-toggled', {
+    menuId: props.menuId,
+    isOpen: isOpen.value
+  });
   event.value = e;
 }
 

package/modules/@apostrophecms/ui/ui/apos/scss/mixins/_zindex.scss

@@ -12,6 +12,7 @@ $z-index-widget-label: 2;
 $z-index-widget-controls: 3;
 $z-index-manager-toolbar: 3;
 $z-index-widget-focused-controls: 4;
+$z-index-area-schema-ui: 5;
 $z-index-admin-bar: 1000;
 $z-index-modal: 2000;
 $z-index-notifications: 2003;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apostrophe",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {