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

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableScrollLock.mjs

@@ -1,63 +1,23 @@
-import { shallowRef, ref } from "vue";
+import { shallowRef } from "vue";
 import { useScrollLock } from "@vueuse/core";
-import {
-  matchClass,
-  scrollbarWidth,
-  scrollbarGutterSupport
-} 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-draggable/ });
 export function useDraggableScrollLock() {
-  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-draggable/);
-    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/MagicDraggable/src/composables/private/useDraggableSnap.mjs

@@ -1,4 +1,11 @@
-import { ref, toRefs, computed, toValue, nextTick } from "vue";
+import {
+  ref,
+  toRefs,
+  computed,
+  toValue,
+  nextTick,
+  onScopeDispose
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
@@ -203,6 +210,9 @@ export function useDraggableSnap(args) {
     }
     activeSnapPoint.value = snapPoint;
   }
+  onScopeDispose(() => {
+    cancelInterpolation();
+  });
   return {
     mappedActiveSnapPoint,
     mappedSnapPoints,

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.d.ts

@@ -2,5 +2,5 @@ import { type MaybeRef } from 'vue';
 import type { DraggableState } from '../../types/index.js';
 export declare function useDraggableState(id: MaybeRef<string>): {
     initializeState: () => DraggableState;
-    deleteState: () => void;
+    draggableStateStore: import("vue").Ref<DraggableState[], DraggableState[]>;
 };

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableState.mjs

@@ -1,9 +1,16 @@
-import { ref, reactive, toValue } from "vue";
-const draggableStateStore = ref([]);
+import { reactive, toValue, onScopeDispose } from "vue";
+import { createStateStore } from "@maas/vue-equipment/utils";
+const getDraggableStateStore = createStateStore(
+  "MagicDraggable",
+  () => []
+);
 export function useDraggableState(id) {
+  const draggableStateStore = getDraggableStateStore();
+  let scopeCounted = false;
   function createState(id2) {
     const state = {
       id: id2,
+      refCount: 0,
       dragStart: void 0,
       dragging: false,
       interpolateTo: void 0,
@@ -26,20 +33,43 @@ export function useDraggableState(id) {
     draggableStateStore.value = [...draggableStateStore.value, state];
     return state;
   }
-  function initializeState() {
-    let state = draggableStateStore.value.find((entry) => {
-      return entry.id === id;
-    });
-    if (!state) state = addState(toValue(id));
-    return state;
-  }
   function deleteState() {
+    const currentId = toValue(id);
     draggableStateStore.value = draggableStateStore.value.filter(
-      (x) => x.id !== id
+      (x) => x.id !== currentId
+    );
+  }
+  function initializeState() {
+    const currentId = toValue(id);
+    let state = draggableStateStore.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 = draggableStateStore.value.find(
+      (entry) => entry.id === currentId
+    );
+    if (state) {
+      state.refCount--;
+      if (state.refCount <= 0) {
+        deleteState();
+      }
+    }
+  });
   return {
     initializeState,
-    deleteState
+    draggableStateStore
   };
 }

package/dist/plugins/MagicDraggable/src/composables/useMagicDraggable.mjs

@@ -1,8 +1,9 @@
 import { toValue } from "vue";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 export function useMagicDraggable(id) {
+  const emitter = useMagicEmitter();
   function snapTo(snapPoint, duration) {
-    useMagicEmitter().emit("snapTo", {
+    emitter.emit("snapTo", {
       id: toValue(id),
       snapPoint,
       duration

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

@@ -40,6 +40,7 @@ export type DraggableDefaultOptions = RequireAll<MagicDraggableOptions> & {
 };
 export interface DraggableState {
     id: string;
+    refCount: number;
     dragStart: Date | undefined;
     dragging: boolean;
     interpolateTo: Coordinates | undefined;

package/dist/plugins/MagicDrawer/src/components/MagicDrawer.d.vue.ts

@@ -14,11 +14,11 @@ interface MagicDrawerProps {
     id: MaybeRef<string>;
     options?: MagicDrawerOptions;
 }
-declare var __VLS_11: {}, __VLS_37: {};
+declare var __VLS_11: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
     backdrop?: (props: typeof __VLS_11) => any;
 } & {
-    default?: (props: typeof __VLS_37) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -9,6 +9,7 @@
       class="magic-drawer"
       :data-id="mappedId"
       :data-dragging="dragging"
+      :data-dragged="hasDragged"
       :data-wheeling="wheeling"
       :data-disabled="disabled"
       :data-position="mappedOptions.position"
@@ -45,6 +46,7 @@
               class="magic-drawer__drag"
               :style="style"
               @pointerdown="guardedPointerdown"
+              @touchstart="guardedTouchstart"
               @click="guardedClick"
             >
               <slot />
@@ -110,14 +112,7 @@ const mappedId = toValue(id);
 const elRef = useTemplateRef("el");
 const drawerRef = useTemplateRef("drawer");
 const wrapperRef = useTemplateRef("wrapper");
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding
-} = useDrawerDOM({
+const { trapFocus, releaseFocus, unlockScroll } = useDrawerDOM({
   focusTarget: drawerRef,
   focusTrap: mappedOptions.focusTrap
 });
@@ -142,7 +137,7 @@ const disabled = computed(() => {
     return options.disabled;
   }
 });
-const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
+const { onPointerdown, onTouchstart, onClick, style, hasDragged } = useDrawerDrag({
   id,
   elRef,
   wrapperRef,
@@ -161,7 +156,7 @@ const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
   position,
   disabled
 });
-const { initializeState, deleteState } = useDrawerState(id);
+const { initializeState } = useDrawerState(id);
 const state = initializeState();
 const { dragging, wheeling } = toRefs(state);
 const innerActive = shallowRef(false);
@@ -177,10 +172,6 @@ const {
 } = useDrawerCallback({
   id,
   mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
   trapFocus,
   releaseFocus,
   wrapperActive,
@@ -237,6 +228,11 @@ function guardedPointerdown(event) {
     onPointerdown(event);
   }
 }
+function guardedTouchstart(event) {
+  if (!disabled.value) {
+    onTouchstart(event);
+  }
+}
 function guardedClick(event) {
   if (!disabled.value) {
     onClick(event);
@@ -283,10 +279,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();
@@ -294,7 +289,6 @@ onUnmounted(() => {
   if (!mappedOptions.preventZoom) {
     resetMetaViewport();
   }
-  deleteState();
 });
 </script>
 
@@ -458,6 +452,8 @@ dialog.magic-drawer__drag::backdrop {
 
 .magic-drawer__drag > * {
   padding: var(--magic-drawer-padding);
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
 }
 
 .magic-drawer__overlay {

package/dist/plugins/MagicDrawer/src/components/MagicDrawer.vue.d.ts

@@ -14,11 +14,11 @@ interface MagicDrawerProps {
     id: MaybeRef<string>;
     options?: MagicDrawerOptions;
 }
-declare var __VLS_11: {}, __VLS_37: {};
+declare var __VLS_11: {}, __VLS_38: {};
 type __VLS_Slots = {} & {
     backdrop?: (props: typeof __VLS_11) => any;
 } & {
-    default?: (props: typeof __VLS_37) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

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

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

@@ -1,28 +1,25 @@
 import { toValue, nextTick } from "vue";
 import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useDrawerDOM } from "./useDrawerDOM.mjs";
 export function useDrawerCallback(args) {
   const {
     id,
     mappedOptions,
-    addScrollLockPadding,
-    removeScrollLockPadding,
-    lockScroll,
-    unlockScroll,
     trapFocus,
     releaseFocus,
     wrapperActive,
     wasActive
   } = args;
+  const { lockScroll, unlockScroll } = useDrawerDOM();
   const { setMetaViewport, resetMetaViewport } = useMetaViewport();
   const emitter = useMagicEmitter();
   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
+      );
     }
     if (mappedOptions.preventZoom) {
       setMetaViewport();
@@ -48,10 +45,9 @@ export function useDrawerCallback(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/MagicDrawer/src/composables/private/useDrawerDOM.d.ts

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

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerDOM.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-drawer(__backdrop)?/
+});
 export function useDrawerDOM(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 useDrawerDOM(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-drawer(__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/MagicDrawer/src/composables/private/useDrawerDrag.d.ts

@@ -15,6 +15,8 @@ type UseDrawerDragArgs = {
 };
 export declare function useDrawerDrag(args: UseDrawerDragArgs): {
     onPointerdown: (e: PointerEvent) => void;
+    onTouchstart: (e: TouchEvent) => void;
+    onTouchmove: (e: TouchEvent) => void;
     onClick: (e: MouseEvent) => void;
     style: import("vue").ComputedRef<string>;
     hasDragged: import("vue").ComputedRef<boolean>;