@maas/vue-equipment 0.19.0 → 0.19.1

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.18.1"
+  "version": "0.19.0"
 }

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

@@ -55,6 +55,7 @@
                   @close="closeIfAllowed"
                 />
                 <slot v-else />
+                <div v-if="hasDragged" class="magic-drawer__overlay" />
               </div>
             </div>
           </transition>
@@ -141,7 +142,7 @@ const {
   removeScrollLockPadding,
 } = drawerApi
 
-const { onPointerdown, onClick, dragging, style } = useDrawerDrag({
+const { onPointerdown, onClick, dragging, hasDragged, style } = useDrawerDrag({
   id: props.id,
   isActive,
   elRef,
@@ -290,5 +291,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0rem;--magic-drawer-drag-overshoot-y:0rem;--magic-drawer-padding:0rem}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot-y));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:calc(var(--magic-drawer-width) + var(--magic-drawer-drag-overshoot-x))}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
+:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-drag-overshoot-x:0rem;--magic-drawer-drag-overshoot-y:0rem;--magic-drawer-padding:0rem}.magic-drawer{align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer__wrapper{height:calc(var(--magic-drawer-height) + var(--magic-drawer-drag-overshoot-y));pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:calc(var(--magic-drawer-width) + var(--magic-drawer-drag-overshoot-x))}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

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

@@ -1,6 +1,5 @@
 import { type Ref, type MaybeRef } from 'vue';
 import { type DefaultOptions } from '../../utils/defaultOptions.js';
-import type { CustomMouseEvent } from '../../types.js';
 type UseDrawerDragArgs = {
     id: MaybeRef<string>;
     isActive: MaybeRef<boolean>;
@@ -18,7 +17,8 @@ export declare function useDrawerDrag(args: UseDrawerDragArgs): {
     draggedX: Ref<number>;
     draggedY: Ref<number>;
     dragging: Ref<boolean>;
+    hasDragged: import("vue").ComputedRef<boolean>;
     onPointerdown: (e: PointerEvent) => void;
-    onClick: (e: CustomMouseEvent) => Promise<void>;
+    onClick: (e: MouseEvent) => Promise<void>;
 };
 export {};

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

@@ -17,7 +17,6 @@ import {
 import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
-import { useDrawerEventHandler } from "./useDrawerEventHandler.mjs";
 import { isIOS } from "@maas/vue-equipment/utils";
 export function useDrawerDrag(args) {
   const {
@@ -44,6 +43,8 @@ export function useDrawerDrag(args) {
   const originY = ref(0);
   const pointerdownX = ref(0);
   const pointerdownY = ref(0);
+  const lastDraggedX = ref(0);
+  const lastDraggedY = ref(0);
   const relDirectionY = ref("absolute");
   const relDirectionX = ref("absolute");
   const absDirectionY = ref(void 0);
@@ -53,8 +54,9 @@ export function useDrawerDrag(args) {
   const duration = computed(() => toValue(snap)?.duration);
   const draggedX = ref(0);
   const draggedY = ref(0);
-  const lastDraggedX = ref(0);
-  const lastDraggedY = ref(0);
+  const hasDragged = computed(() => {
+    return lastDraggedX.value !== draggedX.value || lastDraggedY.value !== draggedY.value;
+  });
   const style = computed(
     () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
   );
@@ -85,7 +87,6 @@ export function useDrawerDrag(args) {
     position,
     activeSnapPoint
   });
-  const { clickEvent, dispatchEvent } = useDrawerEventHandler();
   async function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
@@ -242,6 +243,8 @@ export function useDrawerDrag(args) {
   function resetDragged() {
     draggedX.value = 0;
     draggedY.value = 0;
+    lastDraggedX.value = 0;
+    lastDraggedY.value = 0;
   }
   function resetSnapped() {
     snappedX.value = 0;
@@ -307,6 +310,9 @@ export function useDrawerDrag(args) {
     }
     resetStateAndListeners();
     resetScrollLock();
+    if (hasDragged.value) {
+      e.preventDefault();
+    }
   }
   function onPointermove(e) {
     shouldClose.value = false;
@@ -326,10 +332,6 @@ export function useDrawerDrag(args) {
     checkPosition({ x: e.screenX, y: e.screenY });
   }
   function onPointerdown(e) {
-    const tag = e.target.tagName;
-    if (tag === "A") {
-      e.preventDefault();
-    }
     if (dragging.value) {
       return;
     } else {
@@ -337,7 +339,6 @@ export function useDrawerDrag(args) {
     }
     lastDraggedX.value = draggedX.value;
     lastDraggedY.value = draggedY.value;
-    e.target.setPointerCapture(e.pointerId);
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
     cancelPointermove = useEventListener(document, "pointermove", onPointermove);
     cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
@@ -349,16 +350,9 @@ export function useDrawerDrag(args) {
     onPointermove(e);
   }
   async function onClick(e) {
-    if (e.custom === "magic-drawer-clone") {
-      clickEvent.value = void 0;
-      return;
-    } else {
-      clickEvent.value = e;
+    if (hasDragged.value) {
       e.preventDefault();
     }
-    if (lastDraggedX.value === draggedX.value && lastDraggedY.value === draggedY.value) {
-      dispatchEvent(clickEvent.value);
-    }
   }
   onMounted(async () => {
     await getSizes();
@@ -372,6 +366,12 @@ export function useDrawerDrag(args) {
       snapTo({ snapPoint, interpolate: false });
     }
   );
+  watch(snappedX, (value) => {
+    lastDraggedX.value = value;
+  });
+  watch(snappedY, (value) => {
+    lastDraggedY.value = value;
+  });
   useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
       await getSizes();
@@ -389,6 +389,7 @@ export function useDrawerDrag(args) {
     draggedX,
     draggedY,
     dragging,
+    hasDragged,
     onPointerdown,
     onClick
   };

package/package.json

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

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

@@ -1,68 +0,0 @@
-export declare function useDrawerEventHandler(): {
-    clickEvent: import("vue").Ref<{
-        readonly altKey: boolean;
-        readonly button: number;
-        readonly buttons: number;
-        readonly clientX: number;
-        readonly clientY: number;
-        readonly ctrlKey: boolean;
-        readonly metaKey: boolean;
-        readonly movementX: number;
-        readonly movementY: number;
-        readonly offsetX: number;
-        readonly offsetY: number;
-        readonly pageX: number;
-        readonly pageY: number;
-        readonly relatedTarget: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions | undefined) => void;
-        } | null;
-        readonly screenX: number;
-        readonly screenY: number;
-        readonly shiftKey: boolean;
-        readonly x: number;
-        readonly y: number;
-        getModifierState: (keyArg: string) => boolean;
-        initMouseEvent: (typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, viewArg: Window, detailArg: number, screenXArg: number, screenYArg: number, clientXArg: number, clientYArg: number, ctrlKeyArg: boolean, altKeyArg: boolean, shiftKeyArg: boolean, metaKeyArg: boolean, buttonArg: number, relatedTargetArg: EventTarget | null) => void;
-        readonly detail: number;
-        readonly view: Window | null;
-        readonly which: number;
-        initUIEvent: (typeArg: string, bubblesArg?: boolean | undefined, cancelableArg?: boolean | undefined, viewArg?: Window | null | undefined, detailArg?: number | undefined) => void;
-        readonly bubbles: boolean;
-        cancelBubble: boolean;
-        readonly cancelable: boolean;
-        readonly composed: boolean;
-        readonly currentTarget: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions | undefined) => void;
-        } | null;
-        readonly defaultPrevented: boolean;
-        readonly eventPhase: number;
-        readonly isTrusted: boolean;
-        returnValue: boolean;
-        readonly srcElement: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions | undefined) => void;
-        } | null;
-        readonly target: {
-            addEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined) => void;
-            dispatchEvent: (event: Event) => boolean;
-            removeEventListener: (type: string, callback: EventListenerOrEventListenerObject | null, options?: boolean | EventListenerOptions | undefined) => void;
-        } | null;
-        readonly timeStamp: number;
-        readonly type: string;
-        composedPath: () => EventTarget[];
-        initEvent: (type: string, bubbles?: boolean | undefined, cancelable?: boolean | undefined) => void;
-        preventDefault: () => void;
-        stopImmediatePropagation: () => void;
-        stopPropagation: () => void;
-        readonly NONE: 0;
-        readonly CAPTURING_PHASE: 1;
-        readonly AT_TARGET: 2;
-        readonly BUBBLING_PHASE: 3;
-    } | undefined>;
-    dispatchEvent: (e: MouseEvent | PointerEvent) => void;
-};

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

@@ -1,14 +0,0 @@
-import { ref } from "vue";
-export function useDrawerEventHandler() {
-  const clickEvent = ref(void 0);
-  function dispatchEvent(e) {
-    const target = e.target;
-    const clone = new e.constructor(e.type, e);
-    clone.custom = "magic-drawer-clone";
-    target.dispatchEvent(clone);
-  }
-  return {
-    clickEvent,
-    dispatchEvent
-  };
-}