@maas/vue-equipment 1.0.0-beta.76 → 1.0.0-beta.78

package/dist/plugins/MagicTray/src/composables/private/useTrayDrag.d.ts

@@ -1,13 +1,13 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { TraySide } from '../../types/index.js';
+import type { MagicTraySide } from '../../types/index.js';
 type UseTrayDragArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | null>;
 };
 export declare function useTrayDrag(args: UseTrayDragArgs): {
-    draggableSides: import("vue").ComputedRef<TraySide[]>;
+    draggableSides: import("vue").ComputedRef<MagicTraySide[]>;
     clipPath: import("vue").ComputedRef<string>;
-    handleStyle: (side: TraySide) => {
+    handleStyle: (side: MagicTraySide) => {
         top: string;
         left: string;
         right: string;
@@ -33,8 +33,9 @@ export declare function useTrayDrag(args: UseTrayDragArgs): {
         left?: undefined;
     };
     hasDragged: import("vue").ComputedRef<boolean>;
-    dimension: (side: TraySide) => number;
-    onHandlePointerdown: (side: TraySide, e: PointerEvent) => void;
-    onHandleTouchstart: (side: TraySide, e: TouchEvent) => void;
+    dimension: (side: MagicTraySide) => number;
+    onHandlePointerdown: (side: MagicTraySide, e: PointerEvent) => void;
+    onHandleTouchstart: (side: MagicTraySide, e: TouchEvent) => void;
+    onHandleClick: (e: MouseEvent) => void;
 };
 export {};

package/dist/plugins/MagicTray/src/composables/private/useTrayDrag.mjs

@@ -65,6 +65,7 @@ export function useTrayDrag(args) {
     return points.length ? snapPointsMap(side)[points[0]] : void 0;
   }
   let lastPendingTarget = void 0;
+  let suppressClick = false;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
   let cancelPointercancel = void 0;
@@ -79,12 +80,12 @@ export function useTrayDrag(args) {
   const threshold = computed(() => state.options.threshold);
   const disabled = computed(() => state.options.disabled);
   const snapMode = computed(() => state.options.snap.mode);
-  const instant = computed(() => state.options.snap.instant);
+  const dragMode = computed(() => state.options.drag.mode);
   function snapReference(side) {
     return snapMode.value === "step" ? state.lastDragged[side] : state.dragged[side];
   }
-  function isInstant(side) {
-    return typeof instant.value === "boolean" ? instant.value : instant.value?.[side] ?? false;
+  function isSnapDrag(side) {
+    return typeof dragMode.value === "string" ? dragMode.value === "snap" : (dragMode.value?.[side] ?? "free") === "snap";
   }
   const hasDragged = computed(() => {
     const side = state.draggingSide;
@@ -203,7 +204,7 @@ export function useTrayDrag(args) {
     state.relDirection[side] = newInset < prev ? "below" : "above";
     state.dragged[side] = newInset;
   }
-  function setInstant(side, coord) {
+  function snapDragged(side, coord) {
     const inset = computeInset(side, coord);
     const target = findClosestSnapPoint({ side, value: inset });
     if (target === void 0 || target === state.snapped[side]) {
@@ -297,8 +298,8 @@ export function useTrayDrag(args) {
     e.stopImmediatePropagation();
     e.stopPropagation();
     const coord = isVertical(side) ? e.clientY : e.clientX;
-    if (isInstant(side)) {
-      setInstant(side, coord);
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
     } else {
       setDragged(side, coord);
       checkMomentum(side);
@@ -314,8 +315,8 @@ export function useTrayDrag(args) {
   function onPointerup(e) {
     const side = state.draggingSide;
     if (side) {
-      const isStaticClick = !hasDragged.value;
-      if (!isInstant(side)) {
+      suppressClick = hasDragged.value;
+      if (!isSnapDrag(side)) {
         settle(side);
       }
       emitter.emit("afterDrag", {
@@ -323,13 +324,6 @@ export function useTrayDrag(args) {
         side,
         value: state.dragged[side]
       });
-      if (isStaticClick) {
-        emitter.emit("staticClick", {
-          id: toValue(id),
-          side,
-          value: state.dragged[side]
-        });
-      }
     }
     resetDragState();
     resetListeners();
@@ -350,8 +344,8 @@ export function useTrayDrag(args) {
       e.preventDefault();
     }
     const coord = isVertical(side) ? firstTouch.clientY : firstTouch.clientX;
-    if (isInstant(side)) {
-      setInstant(side, coord);
+    if (isSnapDrag(side)) {
+      snapDragged(side, coord);
     } else {
       setDragged(side, coord);
       checkMomentum(side);
@@ -367,8 +361,8 @@ export function useTrayDrag(args) {
   function onTouchend() {
     const side = state.draggingSide;
     if (side) {
-      const isStaticClick = !hasDragged.value;
-      if (!isInstant(side)) {
+      suppressClick = hasDragged.value;
+      if (!isSnapDrag(side)) {
         settle(side);
       }
       emitter.emit("afterDrag", {
@@ -376,13 +370,6 @@ export function useTrayDrag(args) {
         side,
         value: state.dragged[side]
       });
-      if (isStaticClick) {
-        emitter.emit("staticClick", {
-          id: toValue(id),
-          side,
-          value: state.dragged[side]
-        });
-      }
     }
     resetDragState();
     resetListeners();
@@ -395,6 +382,7 @@ export function useTrayDrag(args) {
     state.magnetic[side] = 0;
     state.lastDragged[side] = state.dragged[side];
     lastPendingTarget = void 0;
+    suppressClick = false;
     pointerdownTarget = target;
     switch (side) {
       case "top":
@@ -464,6 +452,13 @@ export function useTrayDrag(args) {
     cancelTouchcancel = useEventListener(document, "touchcancel", onTouchend);
     onTouchmove(e);
   }
+  function onHandleClick(e) {
+    if (suppressClick) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+    suppressClick = false;
+  }
   async function snapToCallback(payload) {
     const { snapPoint } = payload;
     if (payload.id !== toValue(id) || typeof snapPoint !== "object" || Array.isArray(snapPoint)) {
@@ -567,6 +562,7 @@ export function useTrayDrag(args) {
     hasDragged,
     dimension,
     onHandlePointerdown,
-    onHandleTouchstart
+    onHandleTouchstart,
+    onHandleClick
   };
 }

package/dist/plugins/MagicTray/src/composables/private/useTrayMagnetism.d.ts

@@ -1,9 +1,9 @@
 import { type Ref, type ShallowRef, type MaybeRef, type ComponentPublicInstance } from 'vue';
-import type { TrayState, TraySide } from '../../types/index.js';
+import type { TrayState, MagicTraySide } from '../../types/index.js';
 type UseTrayMagnetismArgs = {
     id: MaybeRef<string>;
     elRef: Ref<HTMLElement | null>;
-    handleRefs: Record<TraySide, Readonly<ShallowRef<ComponentPublicInstance[] | null>>>;
+    handleRefs: Record<MagicTraySide, Readonly<ShallowRef<ComponentPublicInstance[] | null>>>;
     state: TrayState;
 };
 export declare function useTrayMagnetism(args: UseTrayMagnetismArgs): {};

package/dist/plugins/MagicTray/src/composables/private/useTraySnap.d.ts

@@ -1,34 +1,34 @@
 import { type MaybeRef } from 'vue';
-import type { TrayState, TraySide, TraySnapPoint } from '../../types/index.js';
+import type { TrayState, MagicTraySide, MagicTraySnapPoint } from '../../types/index.js';
 type UseTraySnapArgs = {
     id: MaybeRef<string>;
     state: TrayState;
 };
 type SnapToArgs = {
-    side: TraySide;
-    snapPoint: TraySnapPoint;
+    side: MagicTraySide;
+    snapPoint: MagicTraySnapPoint;
     interpolate: boolean;
     duration?: number;
 };
 type InterpolateDraggedArgs = {
-    side: TraySide;
+    side: MagicTraySide;
     to: number;
     duration?: number;
     easing?: (t: number) => number;
 };
 type FindClosestSnapPointArgs = {
-    side: TraySide;
+    side: MagicTraySide;
     value: number;
     direction?: 'below' | 'above' | 'absolute';
 };
 export declare function useTraySnap(args: UseTraySnapArgs): {
-    dimension: (side: TraySide) => number;
-    padding: (side: TraySide) => number;
-    contentExtent: (side: TraySide) => number;
-    maxInset: (side: TraySide) => number;
-    mapSnapPoint: (side: TraySide, snapPoint: TraySnapPoint) => number | undefined;
-    mappedSnapPoints: (side: TraySide) => any[];
-    snapPointsMap: (side: TraySide) => Record<number, TraySnapPoint>;
+    dimension: (side: MagicTraySide) => number;
+    padding: (side: MagicTraySide) => number;
+    contentExtent: (side: MagicTraySide) => number;
+    maxInset: (side: MagicTraySide) => number;
+    mapSnapPoint: (side: MagicTraySide, snapPoint: MagicTraySnapPoint) => number | undefined;
+    mappedSnapPoints: (side: MagicTraySide) => any[];
+    snapPointsMap: (side: MagicTraySide) => Record<number, MagicTraySnapPoint>;
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;
     snapTo: (args: SnapToArgs) => Promise<void>;

package/dist/plugins/MagicTray/src/composables/private/useTrayUtils.d.ts

@@ -1,6 +1,6 @@
-import type { TraySide } from '../../types/index.js';
+import type { MagicTraySide } from '../../types/index.js';
 export declare function useTrayUtils(): {
     clampWithOvershoot: (value: number, min: number, max: number, outer: number, inner: number) => number;
-    isVertical: (side: TraySide) => side is "top" | "bottom";
-    oppositeSide: (side: TraySide) => TraySide;
+    isVertical: (side: MagicTraySide) => side is "top" | "bottom";
+    oppositeSide: (side: MagicTraySide) => MagicTraySide;
 };

package/dist/plugins/MagicTray/src/composables/useMagicTray.d.ts

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
-import type { TraySide, TraySnapPoint, MagicTrayOptions } from '../types/index.js';
+import type { MagicTraySide, MagicTraySnapPoint, MagicTrayOptions } from '../types/index.js';
 export declare function useMagicTray(id: MaybeRef<string>, options?: MagicTrayOptions): {
     progress: import("vue").Ref<import("../types/index.js").TraySideRecord<number>, import("../types/index.js").TraySideRecord<number>>;
-    activeSnapPoint: import("vue").Ref<Partial<Record<TraySide, TraySnapPoint>>, Partial<Record<TraySide, TraySnapPoint>>>;
+    activeSnapPoint: import("vue").Ref<Partial<Record<MagicTraySide, MagicTraySnapPoint>>, Partial<Record<MagicTraySide, MagicTraySnapPoint>>>;
     state: import("../types/index.js").TrayState;
-    snapTo: (side: TraySide, snapPoint: TraySnapPoint, duration?: number) => void;
+    snapTo: (side: MagicTraySide, snapPoint: MagicTraySnapPoint, duration?: number) => void;
 };
 export type UseMagicTrayReturn = ReturnType<typeof useMagicTray>;

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

@@ -1,20 +1,21 @@
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
 import type { EasingKey } from '@maas/vue-equipment/composables/useEasings';
-export type TraySide = 'top' | 'right' | 'bottom' | 'left';
-export type TraySnapPoint = number | `${number}px`;
-export interface TraySnapPointPayload {
-    side: TraySide;
-    point: TraySnapPoint;
+export type MagicTraySide = 'top' | 'right' | 'bottom' | 'left';
+export type MagicTraySnapPoint = number | `${number}px`;
+export interface MagicTraySnapPointPayload {
+    side: MagicTraySide;
+    point: MagicTraySnapPoint;
 }
-export interface TraySidePayload {
-    side: TraySide;
+export interface MagicTraySidePayload {
+    side: MagicTraySide;
     value: number;
 }
-export type TraySnapMode = 'closest' | 'step';
-export type TraySnapPoints = Partial<Record<TraySide, TraySnapPoint[]>>;
+export type MagicTraySnapMode = 'closest' | 'step';
+export type MagicTrayDragMode = 'free' | 'snap';
+export type TraySnapPoints = Partial<Record<MagicTraySide, MagicTraySnapPoint[]>>;
 export type TrayMagneticDirection = 'inner' | 'outer' | 'both';
-export type TrayMagneticSide = Partial<Record<TraySnapPoint, TrayMagneticDirection>>;
-export type TrayMagneticSides = false | Partial<Record<TraySide, TrayMagneticSide>>;
+export type TrayMagneticSide = Partial<Record<MagicTraySnapPoint, TrayMagneticDirection>>;
+export type TrayMagneticSides = false | Partial<Record<MagicTraySide, TrayMagneticSide>>;
 export type TrayMagneticRadius = number | {
     start?: number;
     stop?: number;
@@ -26,16 +27,18 @@ export interface TrayMagnetism {
     easing?: EasingKey;
     virtual?: boolean;
 }
-export type TraySideRecord<T> = Record<TraySide, T>;
-export type TrayTransformAxis = 'both' | 'x' | 'y';
+export type TraySideRecord<T> = Record<MagicTraySide, T>;
+export type MagicTrayTransformAxis = 'both' | 'x' | 'y';
 export interface MagicTrayOptions {
     tag?: 'div' | 'dialog' | 'main' | 'section' | 'article' | 'aside' | 'nav';
     snapPoints?: TraySnapPoints;
     snap?: {
-        mode?: TraySnapMode;
-        instant?: boolean | Partial<Record<TraySide, boolean>>;
+        mode?: MagicTraySnapMode;
     };
-    handles?: boolean | Partial<Record<TraySide, boolean>>;
+    drag?: {
+        mode?: MagicTrayDragMode | Partial<Record<MagicTraySide, MagicTrayDragMode>>;
+    };
+    handles?: boolean | Partial<Record<MagicTraySide, boolean>>;
     magnetism?: TrayMagnetism;
     threshold?: {
         lock?: number;
@@ -49,7 +52,7 @@ export interface MagicTrayOptions {
         };
     };
     initial?: {
-        snapPoints?: Partial<Record<TraySide, TraySnapPoint>>;
+        snapPoints?: Partial<Record<MagicTraySide, MagicTraySnapPoint>>;
         transition?: boolean;
     };
     disabled?: boolean;
@@ -57,6 +60,7 @@ export interface MagicTrayOptions {
 }
 export type RequiredMagicTrayOptions = Required<MagicTrayOptions> & {
     snap: Required<MagicTrayOptions['snap']>;
+    drag: Required<MagicTrayOptions['drag']>;
     magnetism: Required<TrayMagnetism>;
     threshold: Required<MagicTrayOptions['threshold']>;
     animation: RequireAllNested<NonNullable<MagicTrayOptions['animation']>>;
@@ -66,7 +70,7 @@ export interface TrayState {
     refCount: number;
     dragStart: Date | undefined;
     dragging: boolean;
-    draggingSide: TraySide | undefined;
+    draggingSide: MagicTraySide | undefined;
     interpolateTo: number | undefined;
     origin: number;
     dragged: TraySideRecord<number>;
@@ -74,7 +78,7 @@ export interface TrayState {
     snapped: TraySideRecord<number>;
     lastDragged: TraySideRecord<number>;
     relDirection: TraySideRecord<'below' | 'above' | 'absolute'>;
-    activeSnapPoint: Partial<Record<TraySide, TraySnapPoint>>;
+    activeSnapPoint: Partial<Record<MagicTraySide, MagicTraySnapPoint>>;
     progress: TraySideRecord<number>;
     overshoot: {
         outer: TraySideRecord<number>;
@@ -83,42 +87,39 @@ export interface TrayState {
     elRect: DOMRect | undefined;
     options: RequiredMagicTrayOptions;
 }
-export interface TrayWillSnapToPayload {
+export interface MagicTrayWillSnapToPayload {
     id: string;
-    side: TraySide;
-    snapPoint: TraySnapPoint;
+    side: MagicTraySide;
+    snapPoint: MagicTraySnapPoint;
 }
 export type TrayEvents = {
     beforeSnap: {
         id: string;
-        snapPoint: TraySnapPointPayload;
+        snapPoint: MagicTraySnapPointPayload;
     };
     snapTo: {
         id: string;
-        snapPoint: TraySnapPointPayload;
+        snapPoint: MagicTraySnapPointPayload;
         duration?: number;
     };
     afterSnap: {
         id: string;
-        snapPoint: TraySnapPointPayload;
+        snapPoint: MagicTraySnapPointPayload;
     };
     beforeDrag: {
         id: string;
-    } & TraySidePayload;
+    } & MagicTraySidePayload;
     drag: {
         id: string;
-    } & TraySidePayload;
+    } & MagicTraySidePayload;
     afterDrag: {
         id: string;
-    } & TraySidePayload;
-    staticClick: {
-        id: string;
-    } & TraySidePayload;
+    } & MagicTraySidePayload;
     progress: {
         id: string;
-    } & TraySidePayload;
+    } & MagicTraySidePayload;
     magnet: {
         id: string;
-    } & TraySidePayload;
-    willSnapTo: TrayWillSnapToPayload;
+    } & MagicTraySidePayload;
+    willSnapTo: MagicTrayWillSnapToPayload;
 };

package/dist/plugins/MagicTray/src/utils/defaultOptions.mjs

@@ -5,8 +5,10 @@ const defaultOptions = {
     bottom: [0, 0.5, 1]
   },
   snap: {
-    mode: "closest",
-    instant: false
+    mode: "closest"
+  },
+  drag: {
+    mode: "free"
   },
   handles: true,
   magnetism: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.78",
   "contributors": [
     {
       "name": "Robin Scholz",