@maas/vue-equipment 1.0.0-beta.42 → 1.0.0-beta.44

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDrag.mjs

@@ -2,10 +2,11 @@ import {
   computed,
   onMounted,
   watch,
-  onBeforeUnmount,
   toValue,
   toRefs,
-  nextTick
+  nextTick,
+  onScopeDispose,
+  markRaw
 } from "vue";
 import {
   useEventListener,
@@ -17,6 +18,7 @@ import {
 import {
   guardedReleasePointerCapture,
   guardedSetPointerCapture,
+  isAndroid,
   isIOS,
   isWithinRange
 } from "@maas/vue-equipment/utils";
@@ -72,8 +74,12 @@ export function useDrawerDrag(args) {
   let pointerdownTarget = void 0;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
+  let cancelPointercancel = void 0;
+  let cancelTouchmove = void 0;
   let cancelTouchend = void 0;
+  let cancelTouchcancel = void 0;
   let scrollLock = void 0;
+  let resizeObserverEl = null;
   const hasDragged = computed(() => {
     const hasDraggedX = !isWithinRange({
       input: draggedX.value,
@@ -121,8 +127,10 @@ export function useDrawerDrag(args) {
   const { clamp } = useDrawerUtils();
   const emitter = useMagicEmitter();
   async function getSizes() {
-    elRect.value = unrefElement(elRef)?.getBoundingClientRect();
-    wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
+    const el = unrefElement(elRef);
+    const wrapper = unrefElement(wrapperRef);
+    elRect.value = el ? markRaw(el.getBoundingClientRect()) : void 0;
+    wrapperRect.value = wrapper ? markRaw(wrapper.getBoundingClientRect()) : void 0;
     await nextTick();
   }
   function checkPosition() {
@@ -252,13 +260,13 @@ export function useDrawerDrag(args) {
         break;
     }
   }
-  function resetStateAndListeners() {
-    dragging.value = false;
-    shouldClose.value = false;
-    interpolateTo.value = void 0;
+  function resetListeners() {
+    cancelTouchmove?.();
     cancelTouchend?.();
+    cancelTouchcancel?.();
     cancelPointerup?.();
     cancelPointermove?.();
+    cancelPointercancel?.();
   }
   function resetScrollLock() {
     if (scrollLock?.value) {
@@ -266,7 +274,12 @@ export function useDrawerDrag(args) {
     }
     scrollLock = void 0;
   }
-  function resetState() {
+  function resetDragState() {
+    dragging.value = false;
+    shouldClose.value = false;
+    interpolateTo.value = void 0;
+  }
+  function resetCalcState() {
     draggedX.value = 0;
     draggedY.value = 0;
     lastDraggedX.value = 0;
@@ -276,15 +289,15 @@ export function useDrawerDrag(args) {
     elRect.value = void 0;
     wrapperRect.value = void 0;
   }
-  function resetSnapped() {
+  function resetSnapState() {
     snappedX.value = 0;
     snappedY.value = 0;
     activeSnapPoint.value = void 0;
   }
   function afterLeaveCallback(payload) {
     if (payload === toValue(id)) {
-      resetState();
-      resetSnapped();
+      resetCalcState();
+      resetSnapState();
     }
   }
   function snapToCallback(payload) {
@@ -309,6 +322,9 @@ export function useDrawerDrag(args) {
   function destroy() {
     emitter.off("snapTo", snapToCallback);
     emitter.off("afterLeave", afterLeaveCallback);
+    resizeObserverEl?.stop();
+    resetDragState();
+    resetListeners();
   }
   function onCancel() {
     switch (position) {
@@ -325,9 +341,41 @@ export function useDrawerDrag(args) {
         });
         break;
     }
-    resetStateAndListeners();
+    resetDragState();
+    resetListeners();
     resetScrollLock();
   }
+  function onPointermove(e) {
+    if (e.isTrusted && wheeling.value) {
+      return;
+    }
+    if (e.isTrusted && !e.isPrimary) {
+      return;
+    }
+    e.stopImmediatePropagation();
+    e.stopPropagation();
+    shouldClose.value = false;
+    checkDirection({ x: e.screenX, y: e.screenY });
+    if (!scrollLock) {
+      const scrollLockTarget = lockScroll(e.target);
+      if (scrollLockTarget) {
+        scrollLock = useScrollLock(scrollLockTarget);
+        scrollLock.value = true;
+      }
+    }
+    const dragTarget = pointerdownTarget ?? e.target;
+    if (!canDrag(dragTarget)) {
+      return;
+    }
+    setDragged({ x: e.screenX, y: e.screenY });
+    checkMomentum();
+    checkPosition();
+    emitter.emit("drag", {
+      id: toValue(id),
+      x: draggedX.value,
+      y: draggedY.value
+    });
+  }
   function onPointerup(e) {
     if (shouldClose.value) {
       close();
@@ -369,35 +417,40 @@ export function useDrawerDrag(args) {
       x: draggedX.value,
       y: draggedY.value
     });
-    resetStateAndListeners();
+    resetDragState();
+    resetListeners();
     resetScrollLock();
     if (hasDragged.value) {
       e.preventDefault();
     }
     guardedReleasePointerCapture({ event: e, element: pointerdownTarget });
   }
-  function onPointermove(e) {
-    if (e.isTrusted && wheeling.value) {
-      return;
-    }
-    if (e.isTrusted && !e.isPrimary) {
-      return;
-    }
+  function onTouchmove(e) {
     e.stopImmediatePropagation();
     e.stopPropagation();
     shouldClose.value = false;
-    checkDirection({ x: e.screenX, y: e.screenY });
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    checkDirection({ x: firstTouch.screenX, y: firstTouch.screenY });
+    shouldClose.value = false;
+    checkDirection({ x: firstTouch.screenX, y: firstTouch.screenY });
     if (!scrollLock) {
-      const scrollLockTarget = lockScroll(e.target);
+      const scrollLockTarget = lockScroll(firstTouch.target);
       if (scrollLockTarget) {
         scrollLock = useScrollLock(scrollLockTarget);
         scrollLock.value = true;
       }
     }
-    if (!canDrag(e.target)) {
+    const dragTarget = pointerdownTarget ?? e.target;
+    if (!canDrag(dragTarget)) {
       return;
     }
-    setDragged({ x: e.screenX, y: e.screenY });
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
+    setDragged({ x: firstTouch.screenX, y: firstTouch.screenY });
     checkMomentum();
     checkPosition();
     emitter.emit("drag", {
@@ -406,6 +459,54 @@ export function useDrawerDrag(args) {
       y: draggedY.value
     });
   }
+  function onTouchend(e) {
+    if (shouldClose.value) {
+      close();
+    } else if (interpolateTo.value || interpolateTo.value === 0) {
+      if (scrollLock && scrollLock.value || canInterpolate(e.target)) {
+        interpolateDragged({
+          to: interpolateTo.value
+        });
+      }
+      activeSnapPoint.value = snapPointsMap.value[interpolateTo.value];
+      switch (position) {
+        case "bottom":
+        case "top":
+          snappedY.value = interpolateTo.value;
+          break;
+        case "right":
+        case "left":
+          snappedX.value = interpolateTo.value;
+          break;
+      }
+    } else {
+      switch (position) {
+        case "bottom":
+        case "top":
+          interpolateDragged({
+            to: snappedY.value
+          });
+          break;
+        case "right":
+        case "left":
+          interpolateDragged({
+            to: snappedX.value
+          });
+          break;
+      }
+    }
+    emitter.emit("afterDrag", {
+      id: toValue(id),
+      x: draggedX.value,
+      y: draggedY.value
+    });
+    resetDragState();
+    resetListeners();
+    resetScrollLock();
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
+  }
   function onPointerdown(e) {
     if (dragging.value) {
       return;
@@ -420,7 +521,7 @@ export function useDrawerDrag(args) {
       pointerdownTarget = e.target;
       guardedSetPointerCapture({
         event: e,
-        element: e.target
+        element: pointerdownTarget
       });
       emitter.emit("beforeDrag", {
         id: toValue(id),
@@ -430,19 +531,71 @@ export function useDrawerDrag(args) {
     }
     lastDraggedX.value = draggedX.value;
     lastDraggedY.value = draggedY.value;
+    resetListeners();
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
+    cancelPointercancel = useEventListener(
+      document,
+      "pointercancel",
+      onPointerup
+    );
     cancelPointermove = useEventListener(
       document,
       "pointermove",
       onPointermove,
       { passive: false }
     );
-    cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
+    cancelTouchmove = isAndroid() ? useEventListener(document, "touchmove", onTouchmove, {
+      passive: false
+    }) : void 0;
+    cancelTouchend = isIOS() || isAndroid() ? useEventListener(document, "touchend", onTouchend) : void 0;
+    cancelTouchcancel = isIOS() || isAndroid() ? useEventListener(document, "touchcancel", onTouchend) : void 0;
     originX.value = e.screenX - draggedX.value;
     originY.value = e.screenY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
+  function onTouchstart(e) {
+    if (!isAndroid()) {
+      return;
+    }
+    if (dragging.value) {
+      return;
+    } else {
+      const isSelect = ["SELECT", "OPTION"].includes(
+        e.target.tagName
+      );
+      if (isSelect) {
+        return;
+      }
+      e.stopImmediatePropagation();
+      e.stopPropagation();
+      dragging.value = true;
+      pointerdownTarget = e.target;
+      emitter.emit("beforeDrag", {
+        id: toValue(id),
+        x: draggedX.value,
+        y: draggedY.value
+      });
+    }
+    cancelTouchmove?.();
+    cancelTouchmove = useEventListener(document, "touchmove", onTouchmove, {
+      passive: false
+    });
+    cancelTouchend?.();
+    cancelTouchend = useEventListener(document, "touchend", onTouchend, {
+      passive: false
+    });
+    cancelTouchcancel?.();
+    cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
+    const firstTouch = e.touches[0];
+    if (!firstTouch) {
+      return;
+    }
+    originX.value = firstTouch.screenX - draggedX.value;
+    originY.value = firstTouch.screenY - draggedY.value;
+    dragStart.value = /* @__PURE__ */ new Date();
+    onTouchmove(e);
+  }
   function onClick(e) {
     if (hasDragged.value) {
       e.preventDefault();
@@ -473,7 +626,7 @@ export function useDrawerDrag(args) {
       }
     }
   );
-  useResizeObserver(elRef, async () => {
+  resizeObserverEl = useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
       await getSizes();
       if (activeSnapPoint.value) {
@@ -482,11 +635,13 @@ export function useDrawerDrag(args) {
       }
     }, 100)();
   });
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     destroy();
   });
   return {
     onPointerdown,
+    onTouchstart,
+    onTouchmove,
     onClick,
     style,
     hasDragged

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { DrawerState } from '../../types/index.js';
 export declare function useDrawerState(id: MaybeRef<string>): {
     initializeState: () => DrawerState;
-    deleteState: () => void;
-    drawerStateStore: Ref<DrawerState[], DrawerState[]>;
+    drawerStateStore: import("vue").Ref<DrawerState[], DrawerState[]>;
 };

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerState.mjs

@@ -1,9 +1,16 @@
-import { ref, reactive, toValue } from "vue";
-const drawerStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getDrawerStateStore = createStateStore(
+  "MagicDrawer",
+  () => []
+);
 export function useDrawerState(id) {
+  const drawerStateStore = getDrawerStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       active: false,
       dragStart: void 0,
       dragging: false,
@@ -34,21 +41,39 @@ export function useDrawerState(id) {
     drawerStateStore.value = [...drawerStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(id);
+    drawerStateStore.value = drawerStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState() {
-    let state = drawerStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
+    const currentId = toValue(id);
+    let state = drawerStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(id));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     return state;
   }
-  function deleteState() {
-    drawerStateStore.value = drawerStateStore.value.filter((x) => x.id !== id);
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = drawerStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     drawerStateStore
   };
 }

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.mjs

@@ -5,6 +5,7 @@ export function useMagicDrawer(id) {
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState();
   const { progress, active } = toRefs(state);
+  const emitter = useMagicEmitter();
   const isActive = computed(() => active.value);
   function open() {
     active.value = true;
@@ -13,7 +14,7 @@ export function useMagicDrawer(id) {
     active.value = false;
   }
   function snapTo(snapPoint, duration) {
-    useMagicEmitter().emit("snapTo", {
+    emitter.emit("snapTo", {
       id: toValue(id),
       snapPoint,
       duration

package/dist/plugins/MagicDrawer/src/types/index.d.ts

@@ -50,6 +50,7 @@ export type DrawerDefaultOptions = RequireAll<MagicDrawerOptions> & {
 };
 export interface DrawerState {
     id: string;
+    refCount: number;
     active: boolean;
     dragStart: Date | undefined;
     dragging: boolean;

package/dist/plugins/MagicEmitter/src/composables/useMagicEmitter.mjs

@@ -1,9 +1,14 @@
-import mitt from "mitt";
-const emitter = mitt();
+import mitt, {} from "mitt";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getEmitter = createStateStore(
+  "MagicEmitter",
+  () => mitt()
+);
 export function useMagicEmitter() {
+  const emitter = getEmitter();
   return {
-    on: emitter.on,
-    off: emitter.off,
-    emit: emitter.emit
+    on: emitter.value.on,
+    off: emitter.value.off,
+    emit: emitter.value.emit
   };
 }

package/dist/plugins/MagicMarquee/src/components/MagicMarquee.vue

@@ -17,14 +17,14 @@
 </template>
 
 <script setup>
-import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
+import { useTemplateRef, onMounted } from "vue";
 import { useMarqueeApi } from "../composables/private/useMarqueeApi";
 import { useMarqueeState } from "../composables/private/useMarqueeState";
 const { id, options } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
-const { deleteState, initializeState } = useMarqueeState(id);
+const { initializeState } = useMarqueeState(id);
 initializeState(options);
 const parentRef = useTemplateRef("parent");
 const childRef = useTemplateRef("child");
@@ -36,9 +36,6 @@ const { duplicates, initialize } = useMarqueeApi({
 onMounted(() => {
   initialize();
 });
-onBeforeUnmount(() => {
-  deleteState();
-});
 </script>
 
 <style>

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeState.d.ts

@@ -1,7 +1,6 @@
-import { type Ref, type MaybeRef } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { MarqueeState, MagicMarqueeOptions } from '../../types/index.js';
 export declare function useMarqueeState(instanceId: MaybeRef<string>): {
     initializeState: (options?: MagicMarqueeOptions) => MarqueeState;
-    deleteState: () => void;
-    marqueeStateStore: Ref<MarqueeState[], MarqueeState[]>;
+    marqueeStateStore: import("vue").Ref<MarqueeState[], MarqueeState[]>;
 };

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeState.mjs

@@ -1,11 +1,18 @@
-import { ref, reactive, toValue } from "vue";
+import { reactive, toValue, onScopeDispose } from "vue";
 import { defu } from "defu";
+import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
-const marqueeStateStore = ref([]);
+const getMarqueeStateStore = createStateStore(
+  "MagicMarquee",
+  () => []
+);
 export function useMarqueeState(instanceId) {
+  const marqueeStateStore = getMarqueeStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       playing: true
     };
@@ -16,12 +23,21 @@ export function useMarqueeState(instanceId) {
     marqueeStateStore.value = [...marqueeStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    marqueeStateStore.value = marqueeStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = marqueeStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = marqueeStateStore.value.find((entry) => entry.id === currentId);
     if (!state) {
-      state = addState(toValue(instanceId));
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
     }
     if (options) {
       const mappedOptions = defu(options, defaultOptions);
@@ -29,14 +45,23 @@ export function useMarqueeState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    marqueeStateStore.value = marqueeStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = marqueeStateStore.value.find(
+      (entry) => entry.id === currentId
     );
-  }
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     marqueeStateStore
   };
 }

package/dist/plugins/MagicMarquee/src/types/index.d.ts

@@ -4,6 +4,7 @@ export interface MagicMarqueeOptions {
 }
 export interface MarqueeState {
     id: string;
+    refCount: number;
     options: MagicMarqueeOptions;
     playing: boolean;
 }

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

@@ -68,7 +68,6 @@ import {
 import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuCallback } from "../composables/private/useMenuCallback";
-import { useMenuDOM } from "../composables/private/useMenuDOM";
 import { useMenuCursor } from "../composables/private/useMenuCursor";
 import {
   useMagicError
@@ -78,7 +77,8 @@ import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
-  MagicMenuContentId
+  MagicMenuContentId,
+  MagicMenuParentTree
 } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
@@ -95,6 +95,7 @@ const magicError = useMagicError({
   prefix: "MagicMenu",
   source: "MagicMenu"
 });
+const parentTree = inject(MagicMenuParentTree, []);
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 magicError.assert(instanceId, {
@@ -124,12 +125,6 @@ const mappedTransition = computed(() => {
 });
 const innerActive = shallowRef(false);
 const wrapperActive = shallowRef(false);
-const {
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useMenuDOM();
 const {
   onBeforeEnter,
   onEnter,
@@ -143,10 +138,7 @@ const {
   viewId,
   innerActive,
   wrapperActive,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
+  parentTree
 });
 async function onOpen() {
   wrapperActive.value = true;

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

@@ -15,8 +15,7 @@ import {
   shallowRef,
   provide,
   watch,
-  toValue,
-  onBeforeUnmount
+  toValue
 } from "vue";
 import { onClickOutside, onKeyStroke, usePointer } from "@vueuse/core";
 import { VuePrimitive } from "@maas/vue-primitive";
@@ -33,7 +32,7 @@ const { id, options } = defineProps({
 });
 const elRef = useTemplateRef("el");
 const mappedOptions = defu(options, defaultOptions);
-const { initializeState, deleteState } = useMenuState(id);
+const { initializeState } = useMenuState(id);
 const state = initializeState(mappedOptions);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
@@ -87,9 +86,6 @@ onClickOutside(
     ]
   }
 );
-onBeforeUnmount(() => {
-  deleteState();
-});
 provide(MagicMenuInstanceId, id);
 </script>