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

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 />
@@ -135,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,
@@ -154,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);
@@ -226,6 +228,11 @@ function guardedPointerdown(event) {
     onPointerdown(event);
   }
 }
+function guardedTouchstart(event) {
+  if (!disabled.value) {
+    onTouchstart(event);
+  }
+}
 function guardedClick(event) {
   if (!disabled.value) {
     onClick(event);
@@ -282,7 +289,6 @@ onUnmounted(() => {
   if (!mappedOptions.preventZoom) {
     resetMetaViewport();
   }
-  deleteState();
 });
 </script>
 
@@ -446,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/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>;

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[]>;
 };