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

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

@@ -6,10 +6,7 @@ type UseMenuCallbackArgs = {
     viewId: string;
     innerActive: Ref<boolean>;
     wrapperActive: Ref<boolean>;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    parentTree: string[];
 };
 export declare function useMenuCallback(args: UseMenuCallbackArgs): {
     onBeforeEnter: () => void;

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

@@ -1,19 +1,11 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMenuDOM } from "./useMenuDOM.mjs";
 import { ModeScrollLock } from "../../utils/modeScrollLockDefaults.mjs";
 export function useMenuCallback(args) {
-  const {
-    state,
-    instanceId,
-    viewId,
-    innerActive,
-    wrapperActive,
-    lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
-  } = args;
+  const { state, instanceId, viewId, innerActive, wrapperActive, parentTree } = args;
   const emitter = useMagicEmitter();
+  const { lockScroll, unlockScroll } = useMenuDOM();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", { id: toValue(instanceId), viewId });
   }
@@ -23,11 +15,8 @@ export function useMenuCallback(args) {
   function onAfterEnter() {
     emitter.emit("afterEnter", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+    if (scrollLock && parentTree.length === 2) {
+      lockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
   }
   function onBeforeLeave() {
@@ -39,11 +28,8 @@ export function useMenuCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", { id: toValue(instanceId), viewId });
     const scrollLock = state.options.scrollLock ?? ModeScrollLock[state.options.mode].value;
-    if (scrollLock) {
-      unlockScroll();
-      if (typeof scrollLock === "object" && scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+    if (scrollLock && parentTree.length === 2) {
+      unlockScroll(typeof scrollLock === "object" && scrollLock.padding);
     }
     if (!innerActive.value) {
       wrapperActive.value = false;

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

@@ -1,4 +1,4 @@
-import { ref, shallowRef } from "vue";
+import { onScopeDispose, ref, shallowRef } from "vue";
 import { useEventListener } from "@vueuse/core";
 export function useMenuCursor(view, debug = false) {
   let cancelListener = new AbortController();
@@ -116,6 +116,9 @@ export function useMenuCursor(view, debug = false) {
         break;
       }
     }
+    if (!sidePoints[0] || !sidePoints[1]) {
+      return [];
+    }
     const [a, b, c] = extendTriangle(
       [centerPoint, sidePoints[0], sidePoints[1]],
       16
@@ -124,6 +127,9 @@ export function useMenuCursor(view, debug = false) {
   }
   function triangleOverlap(cursor, fromBounding, toBounding) {
     const [a, b, c] = getTriangle(fromBounding, toBounding);
+    if (!a || !b || !c) {
+      return false;
+    }
     return isPointInTriangle({
       p: cursor,
       a,
@@ -167,6 +173,9 @@ export function useMenuCursor(view, debug = false) {
         from.forEach((trigger) => {
           const fromBounding = trigger.getBoundingClientRect();
           const [a, b, c] = getTriangle(fromBounding, toBounding);
+          if (!a || !b || !c) {
+            return;
+          }
           allCoords.push(a, b, c);
         });
         coords.value = allCoords;
@@ -187,6 +196,9 @@ export function useMenuCursor(view, debug = false) {
     isInsideTriangle.value = false;
     cancelListener.abort();
   }
+  onScopeDispose(() => {
+    destroy();
+  });
   return {
     coords,
     isInsideFrom,

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

@@ -1,6 +1,4 @@
 export declare function useMenuDOM(): {
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

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

@@ -1,63 +1,25 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-menu/
+});
 export function useMenuDOM() {
-  const positionFixedElements = ref([]);
-  function lockScroll() {
+  function lockScroll(padding) {
+    if (padding) {
+      add();
+    }
     scrollLock.value = true;
   }
-  function unlockScroll() {
+  function unlockScroll(padding) {
     scrollLock.value = false;
-  }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
+    if (padding) {
+      remove();
     }
-    const exclude = new RegExp(/magic-menu/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
   }
   return {
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

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

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

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

@@ -1,11 +1,15 @@
-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 menuStateStore = ref([]);
+const getMenuStateStore = createStateStore("MagicMenu", () => []);
 export function useMenuState(instanceId) {
+  const menuStateStore = getMenuStateStore();
+  let scopeCounted = false;
   function createState(id) {
     const state = {
       id,
+      refCount: 0,
       options: { ...defaultOptions },
       views: [],
       active: false,
@@ -22,12 +26,21 @@ export function useMenuState(instanceId) {
     menuStateStore.value = [...menuStateStore.value, state];
     return state;
   }
+  function deleteState() {
+    const currentId = toValue(instanceId);
+    menuStateStore.value = menuStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
   function initializeState(options) {
-    let state = menuStateStore.value.find((entry) => {
-      return entry.id === toValue(instanceId);
-    });
+    const currentId = toValue(instanceId);
+    let state = menuStateStore.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);
@@ -35,14 +48,21 @@ export function useMenuState(instanceId) {
     }
     return state;
   }
-  function deleteState() {
-    menuStateStore.value = menuStateStore.value.filter(
-      (x) => x.id !== toValue(instanceId)
-    );
-  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(instanceId);
+    const state = menuStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState,
     menuStateStore
   };
 }

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

@@ -80,7 +80,7 @@ export function useMenuTrigger(args) {
     if (mappedTrigger.value.includes("right-click") && viewId) {
       e.preventDefault();
       e.stopPropagation();
-      if (control.value || shift.value) {
+      if (control?.value || shift?.value) {
         onRightClick(
           new MouseEvent(e.type, {
             ...e,

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

@@ -68,6 +68,7 @@ export interface MenuView {
 }
 export interface MenuState {
     id: string;
+    refCount: number;
     active: boolean;
     views: MenuView[];
     options: CombinedMagicMenuOptions;

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

@@ -81,14 +81,7 @@ const { id, options = {} } = defineProps({
 const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);
 const modalRef = useTemplateRef("modal");
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useModalDOM({
+const { trapFocus, releaseFocus, unlockScroll } = useModalDOM({
   focusTarget: modalRef,
   focusTrap: mappedOptions.focusTrap
 });
@@ -105,10 +98,6 @@ const {
 } = useModalCallback({
   id,
   mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
   trapFocus,
   releaseFocus,
   wrapperActive
@@ -139,10 +128,9 @@ onBeforeUnmount(() => {
 });
 onUnmounted(() => {
   if (mappedOptions.scrollLock) {
-    unlockScroll();
-    if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-      removeScrollLockPadding();
-    }
+    unlockScroll(
+      typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+    );
   }
   if (mappedOptions.focusTrap) {
     releaseFocus();

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.d.ts

@@ -3,10 +3,6 @@ import type { MagicModalOptions } from '../../types/index.js';
 type UseModalCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: MagicModalOptions;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
     trapFocus: () => void;
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs

@@ -1,25 +1,16 @@
 import { toValue, nextTick } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useModalDOM } from "./useModalDOM.mjs";
 export function useModalCallback(args) {
-  const {
-    id,
-    mappedOptions,
-    addScrollLockPadding,
-    removeScrollLockPadding,
-    lockScroll,
-    unlockScroll,
-    trapFocus,
-    releaseFocus,
-    wrapperActive
-  } = args;
+  const { id, mappedOptions, trapFocus, releaseFocus, wrapperActive } = args;
   const emitter = useMagicEmitter();
+  const { lockScroll, unlockScroll } = useModalDOM();
   function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        addScrollLockPadding();
-      }
-      lockScroll();
+      lockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
   }
   function onEnter() {
@@ -41,10 +32,9 @@ export function useModalCallback(args) {
   function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
-      unlockScroll();
-      if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
-        removeScrollLockPadding();
-      }
+      unlockScroll(
+        typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding
+      );
     }
     if (mappedOptions.focusTrap) {
       releaseFocus();

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.d.ts

@@ -6,8 +6,6 @@ export type useModalDOMArgs = Pick<MagicModalOptions, 'scrollLock' | 'focusTrap'
 export declare function useModalDOM(args?: useModalDOMArgs): {
     trapFocus: () => void;
     releaseFocus: () => void;
-    lockScroll: () => void;
-    unlockScroll: () => void;
-    addScrollLockPadding: () => void;
-    removeScrollLockPadding: () => void;
+    lockScroll: (padding?: boolean) => void;
+    unlockScroll: (padding?: boolean) => void;
 };

package/dist/plugins/MagicModal/src/composables/private/useModalDOM.mjs

@@ -1,20 +1,17 @@
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import {
-  matchClass,
-  scrollbarGutterSupport,
-  scrollbarWidth
-} from "@maas/vue-equipment/utils";
+import { useScrollLockPadding } from "@maas/vue-equipment/composables/useScrollLockPadding";
 const defaultOptions = {
   focusTrap: false,
-  focusTarget: void 0,
-  scrollLock: true
+  focusTarget: void 0
 };
 const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
+const { add, remove } = useScrollLockPadding({
+  exclude: /magic-modal(__backdrop)?/
+});
 export function useModalDOM(args) {
-  const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
   const focusTrap = mappedOptions.focusTarget ? typeof mappedOptions.focusTrap === "boolean" ? useFocusTrap(mappedOptions.focusTarget) : useFocusTrap(mappedOptions.focusTarget, mappedOptions.focusTrap) : void 0;
   function trapFocus() {
@@ -27,62 +24,22 @@ export function useModalDOM(args) {
       focusTrap.deactivate();
     }
   }
-  function lockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = true;
+  function lockScroll(padding) {
+    if (padding) {
+      add();
     }
+    scrollLock.value = true;
   }
-  function unlockScroll() {
-    if (mappedOptions.scrollLock) {
-      scrollLock.value = false;
+  function unlockScroll(padding) {
+    scrollLock.value = false;
+    if (padding) {
+      remove();
     }
   }
-  function addScrollLockPadding() {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    document.body.style.setProperty(
-      "--scrollbar-width",
-      `${scrollbarWidth()}px`
-    );
-    positionFixedElements.value = [
-      ...document.body.getElementsByTagName("*")
-    ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
-    );
-    switch (scrollbarGutterSupport()) {
-      case true:
-        document.documentElement.style.scrollbarGutter = "stable";
-        positionFixedElements.value.forEach((elem) => {
-          elem.style.scrollbarGutter = "stable";
-          elem.style.overflow = "auto";
-        });
-        break;
-      case false:
-        document.body.style.paddingRight = "var(--scrollbar-width)";
-        positionFixedElements.value.forEach(
-          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
-        );
-        break;
-    }
-  }
-  function removeScrollLockPadding() {
-    document.documentElement.style.scrollbarGutter = "";
-    document.body.style.removeProperty("--scrollbar-width");
-    document.body.style.paddingRight = "";
-    positionFixedElements.value.forEach((elem) => {
-      elem.style.paddingRight = "";
-      elem.style.scrollbarGutter = "";
-      elem.style.overflow = "";
-    });
-  }
   return {
     trapFocus,
     releaseFocus,
     lockScroll,
-    unlockScroll,
-    addScrollLockPadding,
-    removeScrollLockPadding
+    unlockScroll
   };
 }

package/dist/plugins/MagicModal/src/composables/private/useModalState.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRef } from 'vue';
+import type { ModalState } from '../../types/index.js';
+export declare function useModalState(id: MaybeRef<string>): {
+    initializeState: () => ModalState;
+    modalStateStore: import("vue").Ref<ModalState[], ModalState[]>;
+};

package/dist/plugins/MagicModal/src/composables/private/useModalState.mjs

@@ -0,0 +1,58 @@
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getModalStateStore = createStateStore(
+  "MagicModal",
+  () => []
+);
+export function useModalState(id) {
+  const modalStateStore = getModalStateStore();
+  let scopeCounted = false;
+  function createState(id2) {
+    const state = {
+      id: id2,
+      refCount: 0,
+      active: false
+    };
+    return reactive(state);
+  }
+  function addState(id2) {
+    const state = createState(id2);
+    modalStateStore.value = [...modalStateStore.value, state];
+    return state;
+  }
+  function deleteState() {
+    const currentId = toValue(id);
+    modalStateStore.value = modalStateStore.value.filter(
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState() {
+    const currentId = toValue(id);
+    let state = modalStateStore.value.find((entry) => entry.id === currentId);
+    if (!state) {
+      state = addState(currentId);
+    }
+    if (!scopeCounted) {
+      state.refCount++;
+      scopeCounted = true;
+    }
+    return state;
+  }
+  onScopeDispose(() => {
+    if (!scopeCounted) {
+      return;
+    }
+    const currentId = toValue(id);
+    const state = modalStateStore.value.find((entry) => entry.id === currentId);
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
+  return {
+    initializeState,
+    modalStateStore
+  };
+}

package/dist/plugins/MagicModal/src/composables/private/useModalStore.d.ts

@@ -1,5 +1 @@
-export declare function useModalStore(): {
-    modalStore: import("vue").Ref<string[], string[]>;
-    addInstance: (id: string) => void;
-    removeInstance: (id: string) => void;
-};
+export { useModalState } from './useModalState.js';

package/dist/plugins/MagicModal/src/composables/private/useModalStore.mjs

@@ -1,15 +1 @@
-import { ref } from "vue";
-const modalStore = ref([]);
-export function useModalStore() {
-  function addInstance(id) {
-    modalStore.value.push(id);
-  }
-  function removeInstance(id) {
-    modalStore.value = modalStore.value.filter((x) => x !== id);
-  }
-  return {
-    modalStore,
-    addInstance,
-    removeInstance
-  };
-}
+export { useModalState } from "./useModalState.mjs";

package/dist/plugins/MagicModal/src/composables/useMagicModal.mjs

@@ -1,13 +1,14 @@
-import { computed, toValue } from "vue";
-import { useModalStore } from "./private/useModalStore.mjs";
+import { computed } from "vue";
+import { useModalState } from "./private/useModalState.mjs";
 export function useMagicModal(id) {
-  const { modalStore, addInstance, removeInstance } = useModalStore();
-  const isActive = computed(() => modalStore.value.includes(toValue(id)));
+  const { initializeState } = useModalState(id);
+  const state = initializeState();
+  const isActive = computed(() => state.active);
   function open() {
-    addInstance(toValue(id));
+    state.active = true;
   }
   function close() {
-    removeInstance(toValue(id));
+    state.active = false;
   }
   return {
     isActive,

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

@@ -26,3 +26,8 @@ export interface ModalEvents {
     leave: string;
     afterLeave: string;
 }
+export interface ModalState {
+    id: string;
+    refCount: number;
+    active: boolean;
+}

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

@@ -8,7 +8,13 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
+import {
+  onMounted,
+  onUnmounted,
+  watch,
+  useTemplateRef,
+  onBeforeUnmount
+} from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
 const { pause = false, options } = defineProps({
@@ -30,7 +36,10 @@ const {
   throttledRotateAndTransfer,
   isReady
 } = noiseApi;
-useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
+const resizeObserver = useResizeObserver(
+  canvasRef,
+  useDebounceFn(initialize, 100)
+);
 watch(
   () => pause,
   (pause2) => {
@@ -47,6 +56,9 @@ onMounted(() => {
   throttledDraw();
   throttledRotateAndTransfer();
 });
+onBeforeUnmount(() => {
+  resizeObserver.stop();
+});
 onUnmounted(() => {
   isReady.value = false;
   transferControls.value?.pause();