apostrophe 3.63.3 → 4.1.0

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

@@ -1,175 +1,250 @@
 <template>
   <div class="apos-context-menu">
     <slot name="prebutton" />
-    <v-popover
-      @hide="hide"
-      @show="show"
-      :offset="menuOffset"
-      trigger="manual"
-      :placement="menuPlacement"
-      :open="isOpen"
-      :delay="{ show: 0, hide: 0 }"
-      :popover-class="popoverClass"
-      popover-wrapper-class="apos-popover__wrapper"
-      popover-inner-class="apos-popover__inner"
+    <div
+      ref="dropdown"
+      class="apos-popover__btn apos-context-menu__dropdown"
     >
-      <!-- TODO refactor buttons to take a single config obj -->
       <AposButton
+        v-bind="button"
+        ref="button"
         class="apos-context-menu__btn"
         data-apos-test="contextMenuTrigger"
-        @click.stop="buttonClicked($event)"
-        v-bind="button"
+        role="button"
         :state="buttonState"
-        ref="button"
         :disabled="disabled"
         :tooltip="tooltip"
-        role="button"
         :attrs="{
           'aria-haspopup': 'menu',
           'aria-expanded': isOpen ? true : false
         }"
+        @click.stop="buttonClicked($event)"
       />
-      <template #popover class="apos-popover__slot">
-        <AposContextMenuDialog
-          :menu-placement="menuPlacement"
-          :class-list="classList"
-          :menu="menu"
-          @item-clicked="menuItemClicked"
+      <Teleport to="body">
+        <div
+          v-if="isOpen"
+          ref="dropdownContent"
+          v-click-outside-element="hide"
+          class="apos-context-menu__dropdown-content"
+          :class="popoverClass"
+          data-apos-menu
+          :style="dropdownContentStyle"
+          :aria-hidden="!isOpen"
         >
-          <slot />
-        </AposContextMenuDialog>
-      </template>
-    </v-popover>
+          <AposContextMenuDialog
+            :menu-placement="placement"
+            :class-list="classList"
+            :menu="menu"
+            @item-clicked="menuItemClicked"
+            @set-arrow="setArrow"
+          >
+            <slot />
+          </AposContextMenuDialog>
+        </div>
+      </Teleport>
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
+import {
+  ref, computed, watch, onMounted, onBeforeUnmount
+} from 'vue';
 import {
-  VPopover
-} from 'v-tooltip';
-import AposThemeMixin from 'Modules/@apostrophecms/ui/mixins/AposThemeMixin';
+  computePosition, offset, shift, flip, arrow
+} from '@floating-ui/dom';
+import { useAposTheme } from 'Modules/@apostrophecms/ui/composables/AposTheme';
+import cuid from 'cuid';
 
-export default {
-  name: 'AposContextMenu',
-  components: {
-    'v-popover': VPopover
-  },
-  mixins: [ AposThemeMixin ],
-  props: {
-    menu: {
-      type: Array,
-      default: null
-    },
-    unpadded: {
-      type: Boolean,
-      default: false
-    },
-    modifiers: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    button: {
-      type: Object,
-      default() {
-        return {
-          label: 'Context Menu Label',
-          iconOnly: true,
-          icon: 'label-icon',
-          type: 'outline'
-        };
-      }
-    },
-    menuPlacement: {
-      type: String,
-      default: 'bottom'
-    },
-    menuOffset: {
-      type: [ Number, String ],
-      default: 15
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    tooltip: {
-      type: [ String, Boolean ],
-      default: false
-    },
-    popoverModifiers: {
-      type: Array,
-      default() {
-        return [];
-      }
-    }
+const props = defineProps({
+  menu: {
+    type: Array,
+    default: null
   },
-  emits: [ 'open', 'close', 'item-clicked' ],
-  data() {
-    return {
-      isOpen: false,
-      position: '',
-      event: null
-    };
+  unpadded: {
+    type: Boolean,
+    default: false
   },
-  computed: {
-    popoverClass() {
-      const classes = [ 'apos-popover' ].concat(this.themeClass);
-      this.popoverModifiers.forEach(m => {
-        classes.push(`apos-popover--${m}`);
-      });
-      return classes;
-    },
-    classList() {
-      const classes = [];
-      const baseClass = 'apos-context-menu__popup';
-      classes.push(`${baseClass}--tip-alignment-${this.menuPlacement}`);
-      if (this.modifiers) {
-        this.modifiers.forEach((m) => {
-          classes.push(`${baseClass}--${m}`);
-        });
-      }
-      if (this.menu || this.unpadded) {
-        classes.push(`${baseClass}--unpadded`);
-      }
-      return classes.join(' ');
-    },
-    buttonState() {
-      return this.open ? [ 'active' ] : null;
+  modifiers: {
+    type: Array,
+    default() {
+      return [];
     }
   },
-  watch: {
-    isOpen(newVal, oldVal) {
-      if (newVal) {
-        this.$emit('open', this.event);
-      } else {
-        this.$emit('close', this.event);
-      }
+  button: {
+    type: Object,
+    default() {
+      return {
+        label: 'Context Menu Label',
+        iconOnly: true,
+        icon: 'label-icon',
+        type: 'outline'
+      };
     }
   },
-  methods: {
-    show() {
-      this.isOpen = true;
-    },
-    hide() {
-      this.isOpen = false;
-    },
-    buttonClicked(e) {
-      this.isOpen = !this.isOpen;
-      this.event = e;
-    },
-    menuItemClicked(name) {
-      this.$emit('item-clicked', name);
-      this.hide();
+  menuPlacement: {
+    type: String,
+    default: 'bottom'
+  },
+  menuOffset: {
+    type: [ Number, String ],
+    default: 15
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  tooltip: {
+    type: [ String, Boolean ],
+    default: false
+  },
+  popoverModifiers: {
+    type: Array,
+    default() {
+      return [];
     }
   }
-};
+});
+
+const emit = defineEmits([ 'open', 'close', 'item-clicked' ]);
+
+const menuId = ref(cuid());
+const isOpen = ref(false);
+const placement = ref(props.menuPlacement);
+const event = ref(null);
+const dropdown = ref();
+const dropdownContent = ref();
+const dropdownContentStyle = ref({});
+const arrowEl = ref();
+
+defineExpose({
+  hide
+});
+
+const popoverClass = computed(() => {
+  const classes = [ 'apos-popover' ].concat(themeClass.value);
+  props.popoverModifiers.forEach(m => {
+    classes.push(`apos-popover--${m}`);
+  });
+  return classes;
+});
+
+const classList = computed(() => {
+  const classes = [];
+  const baseClass = 'apos-context-menu__popup';
+  classes.push(`${baseClass}--tip-alignment-${props.menuPlacement}`);
+  if (props.modifiers) {
+    props.modifiers.forEach((m) => {
+      classes.push(`${baseClass}--${m}`);
+    });
+  }
+  if (props.menu || props.unpadded) {
+    classes.push(`${baseClass}--unpadded`);
+  }
+  return classes.join(' ');
+});
+
+const buttonState = computed(() => {
+  return isOpen.value ? [ 'active' ] : null;
+});
+
+watch(isOpen, (newVal) => {
+  emit(newVal ? 'open' : 'close', event.value);
+  if (newVal) {
+    window.addEventListener('resize', setDropdownPosition);
+    window.addEventListener('scroll', setDropdownPosition);
+    setDropdownPosition();
+  } else {
+    window.removeEventListener('resize', setDropdownPosition);
+    window.removeEventListener('scroll', setDropdownPosition);
+  }
+}, { flush: 'post' });
+
+const { themeClass } = useAposTheme();
+
+onMounted(() => {
+  apos.bus.$on('context-menu-opened', hideWhenOtherOpen);
+  apos.bus.$on('widget-focus', hide);
+});
+
+onBeforeUnmount(() => {
+  apos.bus.$off('context-menu-opened', hideWhenOtherOpen);
+  apos.bus.$off('widget-focus', hide);
+});
+
+function hideWhenOtherOpen(id) {
+  if (menuId.value !== id) {
+    hide();
+  }
+}
+
+function hide() {
+  isOpen.value = false;
+}
+
+function buttonClicked(e) {
+  apos.bus.$emit('context-menu-opened', menuId.value);
+  isOpen.value = !isOpen.value;
+  event.value = e;
+}
+
+function setArrow(el) {
+  arrowEl.value = el;
+}
+
+function menuItemClicked(name) {
+  emit('item-clicked', name);
+  hide();
+}
+
+async function setDropdownPosition() {
+  if (!dropdown.value || !dropdownContent.value) {
+    return;
+  }
+  const {
+    x, y, middlewareData, placement: dropdownPlacement
+  } = await computePosition(dropdown.value, dropdownContent.value, {
+    placement: props.menuPlacement,
+    middleware: [
+      offset(15),
+      shift({ padding: 5 }),
+      flip(),
+      arrow({
+        element: arrowEl.value,
+        padding: 5
+      })
+    ]
+  });
+
+  placement.value = dropdownPlacement;
+  dropdownContentStyle.value = {
+    left: `${x}px`,
+    top: `${y}px`
+  };
+
+  const { x: arrowX, y: arrowY } = middlewareData.arrow;
+  Object.assign(arrowEl.value.style, {
+    ...arrowX && { left: `${arrowX}px` },
+    ...arrowY && { top: `${arrowY}px` }
+  });
+}
 </script>
 
 <style lang="scss">
+.apos-context-menu__dropdown-content {
+  z-index: $z-index-notifications;
+  position: absolute;
+  width: max-content;
 
-.apos-context-menu {
-  position: relative;
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 .apos-context-menu__popup--unpadded .apos-context-menu__pane  {
@@ -216,56 +291,4 @@ export default {
   margin-block-end: 0;
   padding: 10px 0;
 }
-
-.apos-context-menu {
-  & ::v-deep .apos-popover__wrapper,
-  & ::v-deep div:not([class]),
-  & ::v-deep .apos-context-menu__dialog,
-  & ::v-deep .apos-popover,
-  & ::v-deep .apos-popover__inner {
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.apos-popover {
-  z-index: $z-index-modal;
-  display: block;
-
-  .tooltip-arrow {
-    display: none;
-  }
-
-  &[x-placement^='top'] {
-    margin-bottom: 5px;
-  }
-
-  &[x-placement^='bottom'] {
-    margin-top: 5px;
-  }
-
-  &[x-placement$='end'] {
-    margin-right: -15px;
-  }
-
-  &[x-placement$='start'] {
-    margin-left: -15px;
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
-.apos-popover--z-index-in-context {
-  z-index: $z-index-widget-focused-controls;
-}
-
 </style>

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

@@ -6,23 +6,25 @@
   >
     <AposContextMenuTip
       v-if="hasTip"
+      class="apos-context-menu__tip"
       :align="tipAlignment"
-      :origin="menuOrigin"
-      x-placement="bottom"
+      :x-placement="placementSide"
+      @set-arrow="emitSetArrow"
     />
     <div class="apos-context-menu__pane">
       <slot>
         <ul
           v-if="menu"
-          class="apos-context-menu__items" role="menu"
+          class="apos-context-menu__items"
+          role="menu"
         >
           <AposContextMenuItem
             v-for="item in menu"
             :key="item.action"
             :data-apos-test-context-menu-item="item.action"
             :menu-item="item"
-            @clicked="menuItemClicked"
             :open="isOpen"
+            @clicked="menuItemClicked"
           />
         </ul>
       </slot>
@@ -30,71 +32,71 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'AposContextMenuDialog',
-  props: {
-    menuPlacement: {
-      type: String,
-      required: true
-    },
-    menu: {
-      type: Array,
-      default: null
-    },
-    classList: {
-      type: String,
-      default: ''
-    },
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    modifiers: {
-      type: Array,
-      default() {
-        return [];
-      }
-    },
-    hasTip: {
-      type: Boolean,
-      default: true
-    }
+<script setup>
+import {
+  computed
+} from 'vue';
+
+const props = defineProps({
+  menuPlacement: {
+    type: String,
+    required: true
   },
-  emits: [ 'item-clicked' ],
-  data() {
-    return {
-    };
+  menu: {
+    type: Array,
+    default: null
   },
-  computed: {
-    menuPositions () {
-      return this.menuPlacement.split('-');
-    },
-    menuOrigin() {
-      return this.menuPositions[0];
-    },
-    tipAlignment() {
-      if (!this.menuPositions[1]) {
-        return 'center';
-      } else {
-        return this.menuPositions[1];
-      }
-    },
-    classes() {
-      const classes = this.classList.split(' ');
-      this.modifiers.forEach(c => {
-        classes.push(`apos-context-menu__dialog--${c}`);
-      });
-      return classes.join(' ');
-    }
+  classList: {
+    type: String,
+    default: ''
   },
-  methods: {
-    menuItemClicked(action) {
-      this.$emit('item-clicked', action);
+  isOpen: {
+    type: Boolean,
+    default: false
+  },
+  modifiers: {
+    type: Array,
+    default() {
+      return [];
     }
+  },
+  hasTip: {
+    type: Boolean,
+    default: true
   }
-};
+});
+
+const emit = defineEmits([ 'item-clicked', 'set-arrow' ]);
+
+const menuPositions = computed(() => {
+  return props.menuPlacement.split('-');
+});
+
+const placementSide = computed(() => {
+  return menuPositions.value[0];
+});
+
+const tipAlignment = computed(() => {
+  return !menuPositions.value[1]
+    ? 'center'
+    : menuPositions.value[1];
+});
+
+const classes = computed(() => {
+  const classes = props.classList.split(' ');
+  props.modifiers.forEach(c => {
+    classes.push(`apos-context-menu__dialog--${c}`);
+  });
+  return classes.join(' ');
+});
+
+function menuItemClicked(action) {
+  emit('item-clicked', action);
+}
+
+function emitSetArrow(arrowEl) {
+  emit('set-arrow', arrowEl);
+}
 </script>
 
 <style lang="scss">
@@ -141,11 +143,21 @@ export default {
   padding: 10px 0;
 }
 
-.apos-context-menu__dialog ::v-deep .apos-schema .apos-field {
+.apos-context-menu__dialog :deep(.apos-schema .apos-field) {
   margin-bottom: 20px;
   .apos-field__help {
     margin-top: 5px;
   }
 }
 
+.apos-context-menu__tip[x-placement^='bottom'] {
+  top: -10px;
+  bottom: auto;
+}
+
+.apos-context-menu__tip[x-placement^='top'] {
+  top: auto;
+  bottom: -10px;
+  transform: rotate(180deg);
+}
 </style>

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

@@ -3,8 +3,8 @@
     <button
       class="apos-context-menu__button"
       :class="modifiers"
-      @click="click"
       :tabindex="tabindex"
+      @click="click"
     >
       {{ $t(label) }}
     </button>