@maas/vue-equipment 0.30.2 → 0.30.3

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "builder": {
     "@nuxt/module-builder": "0.8.0",
     "unbuild": "unknown"

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue

@@ -19,8 +19,8 @@ import {
   onMounted,
   onUnmounted,
 } from 'vue'
-import { useEventListener, onKeyStroke } from '@vueuse/core'
 import { uuid } from '@maas/vue-equipment/utils'
+import { useEventListener, onKeyStroke } from '@vueuse/core'
 import { useCommandStore } from '../composables/private/useCommandStore'
 import { useCommandItem } from '../composables/private/useCommandItem'
 import { MagicCommandInstanceId } from '../symbols'
@@ -43,7 +43,7 @@ const commandId = inject(MagicCommandInstanceId, '')
 const { selectItem, activeItem } = useCommandItem(commandId)
 
 const mappedId = computed(() => {
-  return props.id || uuid()
+  return props.id ?? uuid()
 })
 
 const isActive = computed(() => {

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue

@@ -34,7 +34,7 @@ const elRef = ref<HTMLElement | undefined>(undefined)
 const { activeView, selectView } = useCommandView()
 
 const mappedId = computed(() => {
-  return props.id || uuid()
+  return props.id ?? uuid()
 })
 
 const isActive = computed(() => {

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -31,6 +31,20 @@
         </magic-menu-float>
       </div>
     </transition>
+    <span
+      v-for="point in coords"
+      :style="{
+        background: 'red',
+        position: 'fixed',
+        top: point.y + 'px',
+        left: point.x + 'px',
+        width: '4px',
+        height: '4px',
+        zIndex: 1000,
+        pointerEvents: 'none',
+        transform: 'translate(-50%, -50%)',
+      }"
+    />
   </teleport>
 </template>
 
@@ -124,20 +138,6 @@ const {
   wrapperActive,
 })
 
-// Handle cursor
-const mappedClick = computed(() => view?.click)
-const mappedPlacement = computed(() => view?.placement ?? 'bottom')
-const mappedTrigger = computed(
-  () => document.querySelector(`[data-id="${viewId}-trigger"]`) as HTMLElement
-)
-
-const { destroy, initialize, isInsideTriangle, isInsideTo } = useMenuCursor({
-  from: mappedTrigger,
-  to: contentRef,
-  placement: mappedPlacement,
-  click: mappedClick,
-})
-
 // Handle state
 async function onOpen() {
   wrapperActive.value = true
@@ -152,14 +152,6 @@ function onClose() {
   innerActive.value = false
 }
 
-function disableCursor() {
-  state.input.disabled = [...state.input.disabled, 'pointer']
-}
-
-function enableCursor() {
-  state.input.disabled = state.input.disabled.filter((x) => x !== 'pointer')
-}
-
 watch(
   () => view?.active,
   async (value) => {
@@ -171,6 +163,24 @@ watch(
   }
 )
 
+// Handle cursor
+const {
+  coords,
+  destroy,
+  initialize,
+  isInsideTriangle,
+  isInsideTo,
+  isInsideFrom,
+} = useMenuCursor(view!)
+
+function disableCursor() {
+  state.input.disabled = [...state.input.disabled, 'pointer']
+}
+
+function enableCursor() {
+  state.input.disabled = state.input.disabled.filter((x) => x !== 'pointer')
+}
+
 watch(isInsideTriangle, (value) => {
   if (value) {
     disableCursor()
@@ -182,17 +192,23 @@ watch(isInsideTriangle, (value) => {
 watch(isInsideTo, (value) => {
   if (value) {
     enableCursor()
-  } else {
+  }
+})
+
+const isOutside = computed(
+  () => !isInsideTo.value && !isInsideFrom.value && !isInsideTriangle.value
+)
+
+watch(isOutside, (value, oldValue) => {
+  if (value && !oldValue) {
     switch (state.options.mode) {
       case 'navigation':
-        if (!isInsideTriangle.value) {
-          view!.active = false
-        }
+        view!.active = false
     }
   }
 })
 
-onBeforeUnmount(async () => {
+onBeforeUnmount(() => {
   destroy()
 })
 

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue

@@ -53,7 +53,6 @@ if (!viewId) {
 if (!contentId) {
   throw new Error('MagicMenuItem must be nested inside MagicMenuContent')
 }
-
 const mappedId = computed(() => props.id ?? `magic-menu-item-${uuid()}`)
 
 // Register item

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -8,7 +8,6 @@
 import { computed, inject, onBeforeUnmount, provide } from 'vue'
 import { uuid } from '@maas/vue-equipment/utils'
 import { useMenuView } from '../composables/private/useMenuView'
-
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.d.ts

@@ -1,13 +1,5 @@
-import { type MaybeRef } from 'vue';
-import type { Coordinates } from '../../types.js';
-import type { Placement } from '@floating-ui/vue';
-interface UseMenuCursorArgs {
-    from: MaybeRef<HTMLElement | undefined>;
-    to: MaybeRef<HTMLElement | undefined>;
-    placement: MaybeRef<Placement>;
-    click: MaybeRef<Coordinates | undefined>;
-}
-export declare function useMenuCursor(args: UseMenuCursorArgs): {
+import type { MenuView } from '../../types.js';
+export declare function useMenuCursor(view: MenuView): {
     coords: import("vue").Ref<{
         x: number;
         y: number;
@@ -18,4 +10,3 @@ export declare function useMenuCursor(args: UseMenuCursorArgs): {
     initialize: () => void;
     destroy: () => void;
 };
-export {};

package/dist/plugins/MagicMenu/src/composables/private/useMenuCursor.mjs

@@ -1,14 +1,7 @@
-import { ref, toValue } from "vue";
-import {
-  useEventListener,
-  useElementBounding,
-  useResizeObserver,
-  usePointer
-} from "@vueuse/core";
-export function useMenuCursor(args) {
-  const cancelListener = ref(new AbortController());
-  const { x, y } = usePointer();
-  const { from, to, placement, click } = args;
+import { ref } from "vue";
+import { useEventListener } from "@vueuse/core";
+export function useMenuCursor(view) {
+  let cancelListener = new AbortController();
   const coords = ref([
     { x: 0, y: 0 },
     { x: 0, y: 0 },
@@ -19,7 +12,7 @@ export function useMenuCursor(args) {
   const isInsideTriangle = ref(false);
   function extendTriangle(vertices, pixelAmount) {
     const [a, b, c] = vertices;
-    switch (toValue(placement)) {
+    switch (view?.placement) {
       case "bottom":
       case "bottom-start":
       case "bottom-end":
@@ -66,8 +59,8 @@ export function useMenuCursor(args) {
     coords.value = [a, b, c];
     return [a, b, c];
   }
-  function isPointInTriangle(args2) {
-    const { p, a, b, c } = args2;
+  function isPointInTriangle(args) {
+    const { p, a, b, c } = args;
     const v0 = { x: c.x - a.x, y: c.y - a.y };
     const v1 = { x: b.x - a.x, y: b.y - a.y };
     const v2 = { x: p.x - a.x, y: p.y - a.y };
@@ -81,37 +74,29 @@ export function useMenuCursor(args) {
     const v = (dot00 * dot12 - dot01 * dot02) * invDenom;
     return u >= 0 && v >= 0 && u + v <= 1;
   }
-  function isPointInRectangle(args2) {
-    const { p, top, left, bottom, right } = args2;
+  function isPointInRectangle(args) {
+    const { p, top, left, bottom, right } = args;
     return p.x >= left && p.x <= right && p.y >= top && p.y <= bottom;
   }
-  function triangleOverlap(cursor, from2, to2) {
-    const fromBounding = useElementBounding(from2, {
-      windowScroll: false,
-      windowResize: false
-    });
-    const toBounding = useElementBounding(to2, {
-      windowScroll: false,
-      windowResize: false
-    });
+  function triangleOverlap(cursor, fromBounding, toBounding) {
     const { top, left, bottom, right } = toBounding;
-    const centerPoint = toValue(click) ?? {
-      x: (fromBounding.left.value + fromBounding.right.value) / 2,
-      y: (fromBounding.top.value + fromBounding.bottom.value) / 2
+    const centerPoint = view.click ? view.click : {
+      x: (fromBounding.left + fromBounding.right) / 2,
+      y: (fromBounding.top + fromBounding.bottom) / 2
     };
     const sidePoints = [];
-    switch (toValue(placement)) {
+    switch (view.placement) {
       case "top":
       case "top-start":
       case "top-end":
       case "bottom":
       case "bottom-start":
       case "bottom-end":
-        const topDist = Math.abs(top.value - centerPoint.y);
-        const bottomDist = Math.abs(bottom.value - centerPoint.y);
+        const topDist = Math.abs(top - centerPoint.y);
+        const bottomDist = Math.abs(bottom - centerPoint.y);
         const mappedY = topDist < bottomDist ? top : bottom;
-        sidePoints.push({ x: left.value, y: mappedY.value });
-        sidePoints.push({ x: right.value, y: mappedY.value });
+        sidePoints.push({ x: left, y: mappedY });
+        sidePoints.push({ x: right, y: mappedY });
         break;
       case "right":
       case "right-start":
@@ -119,11 +104,11 @@ export function useMenuCursor(args) {
       case "left":
       case "left-start":
       case "left-end":
-        const rightDist = Math.abs(right.value - centerPoint.x);
-        const leftDist = Math.abs(left.value - centerPoint.x);
+        const rightDist = Math.abs(right - centerPoint.x);
+        const leftDist = Math.abs(left - centerPoint.x);
         const mappedX = rightDist < leftDist ? right : left;
-        sidePoints.push({ x: mappedX.value, y: top.value });
-        sidePoints.push({ x: mappedX.value, y: bottom.value });
+        sidePoints.push({ x: mappedX, y: top });
+        sidePoints.push({ x: mappedX, y: bottom });
         break;
     }
     const [a, b, c] = extendTriangle(
@@ -137,69 +122,45 @@ export function useMenuCursor(args) {
       c
     });
   }
-  function elementOverlap(cursor, element) {
-    const { top, left, bottom, right } = useElementBounding(element, {
-      windowScroll: false,
-      windowResize: false
-    });
+  function elementOverlap(cursor, bounding) {
+    const { top, left, bottom, right } = bounding;
     return isPointInRectangle({
       p: cursor,
-      top: top.value,
-      left: left.value,
-      bottom: bottom.value,
-      right: right.value
+      top,
+      left,
+      bottom,
+      right
     });
   }
   function onMousemove(e) {
-    const cursor = { x: e.clientX, y: e.clientY };
-    isInsideFrom.value = elementOverlap(cursor, from);
-    isInsideTo.value = elementOverlap(cursor, to);
-    isInsideTriangle.value = triangleOverlap(cursor, from, to);
-  }
-  function fromMouseenter() {
-    isInsideFrom.value = true;
-  }
-  function fromMouseleave() {
-    isInsideFrom.value = false;
-  }
-  function toMouseenter() {
-    isInsideTo.value = true;
-  }
-  function toMouseleave(e) {
-    isInsideTo.value = false;
-  }
-  function onResize() {
-    const cursor = { x: x.value, y: y.value };
-    isInsideFrom.value = elementOverlap(cursor, from);
-    isInsideTo.value = elementOverlap(cursor, to);
-    isInsideTriangle.value = triangleOverlap(cursor, from, to);
+    const from = document.querySelector(
+      `[data-id="${view?.id}-trigger"]`
+    );
+    const to = document.querySelector(
+      `[data-id="${view?.id}-content"] .magic-menu-content__inner`
+    );
+    if (from && to) {
+      const cursor = { x: e.clientX, y: e.clientY };
+      const fromBounding = from.getBoundingClientRect();
+      const toBounding = to.getBoundingClientRect();
+      isInsideFrom.value = elementOverlap(cursor, fromBounding);
+      isInsideTo.value = elementOverlap(cursor, toBounding);
+      isInsideTriangle.value = triangleOverlap(cursor, fromBounding, toBounding);
+    }
   }
   function initialize() {
-    cancelListener.value.abort();
-    cancelListener.value = new AbortController();
-    useEventListener(from, "mouseenter", fromMouseenter, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(from, "mouseleave", fromMouseleave, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(to, "mouseenter", toMouseenter, {
-      signal: cancelListener.value.signal
-    });
-    useEventListener(to, "mouseleave", toMouseleave, {
-      signal: cancelListener.value.signal
-    });
+    cancelListener.abort();
+    cancelListener = new AbortController();
     useEventListener(document, "mousemove", onMousemove, {
-      signal: cancelListener.value.signal
+      signal: cancelListener.signal
     });
-    useResizeObserver(to, onResize);
   }
   function destroy() {
     coords.value = [];
     isInsideFrom.value = false;
     isInsideTo.value = false;
     isInsideTriangle.value = false;
-    cancelListener.value.abort();
+    cancelListener.abort();
   }
   return {
     coords,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.30.2",
+  "version": "0.30.3",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",