@maas/vue-equipment 1.0.0-beta.77 → 1.0.0-beta.79

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.78",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/nuxt/module.mjs

@@ -32,7 +32,7 @@ const functions$1 = [
 	{
 		name: "MagicDrawer",
 		"package": "plugins",
-		lastUpdated: 1780407194000,
+		lastUpdated: 1784022545000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicDrawer/",
 		description: "MagicDrawer is a flexible"
 	},
@@ -102,14 +102,14 @@ const functions$1 = [
 	{
 		name: "MagicToast",
 		"package": "plugins",
-		lastUpdated: 1739184559000,
+		lastUpdated: 1784022567000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicToast/",
 		description: "MagicToast let’s you trigger and display toasts from anywhere"
 	},
 	{
 		name: "MagicTray",
 		"package": "plugins",
-		lastUpdated: 1782999583000,
+		lastUpdated: 1784022556000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicTray/",
 		description: "MagicTray is a flexible"
 	},
@@ -175,6 +175,10 @@ const module$1 = defineNuxtModule({
     nuxt.options.build.transpile.push("@maas/vue-equipment");
     const packages = ["plugins", "composables", "utils"];
     nuxt.options.alias = nuxt.options.alias ?? {};
+    for (const plugin of plugins) {
+      const alias = `@maas/vue-equipment/plugins/${plugin.name}/css`;
+      nuxt.options.alias[alias] = nuxt.options.alias[alias] ?? resolver.resolve(`../plugins/${plugin.name}/src/css`);
+    }
     for (const pkg of packages) {
       nuxt.options.alias[`@maas/vue-equipment/${pkg}`] = nuxt.options.alias[`@maas/vue-equipment/${pkg}`] ?? resolver.resolve(`../${pkg}`);
     }

package/dist/plugins/MagicDrawer/index.d.ts

@@ -6,7 +6,7 @@ import MagicDrawerContent from './src/components/MagicDrawerContent.vue.js';
 import MagicDrawerTrigger from './src/components/MagicDrawerTrigger.vue.js';
 import { useMagicDrawer } from './src/composables/useMagicDrawer.js';
 import type { Plugin } from 'vue';
-import type { MagicDrawerOptions } from './src/types/index.js';
+import type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerWillSnapToPayload } from './src/types/index.js';
 declare const MagicDrawerPlugin: Plugin;
 export { MagicDrawerPlugin, MagicDrawer, MagicDrawerProvider, MagicDrawerTeleport, MagicDrawerBackdrop, MagicDrawerContent, MagicDrawerTrigger, useMagicDrawer, };
-export type { MagicDrawerOptions };
+export type { MagicDrawerOptions, MagicDrawerSnapPoint, MagicDrawerWillSnapToPayload, };

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

@@ -72,6 +72,7 @@ export function useDrawerDrag(args) {
     wrapperRect
   } = toRefs(state);
   const { isActive, close } = useMagicDrawer(id);
+  let lastPendingTarget = void 0;
   let pointerdownTarget = void 0;
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
@@ -220,6 +221,24 @@ export function useDrawerDrag(args) {
       }
     }
   }
+  function emitWillSnapTo() {
+    const target = interpolateTo.value || interpolateTo.value === 0 ? interpolateTo.value : position === "top" || position === "bottom" ? snappedY.value : snappedX.value;
+    if (shouldClose.value) {
+      return;
+    }
+    if (target === lastPendingTarget) {
+      return;
+    }
+    lastPendingTarget = target;
+    const snapPoint = snapPointsMap.value[target];
+    if (!snapPoint && snapPoint !== 0) {
+      return;
+    }
+    emitter.emit("willSnapTo", {
+      id: toValue(id),
+      snapPoint
+    });
+  }
   function setDragged({ x, y }) {
     const os = toValue(overshoot);
     switch (position) {
@@ -387,6 +406,7 @@ export function useDrawerDrag(args) {
     setDragged({ x: e.clientX, y: e.clientY });
     checkMomentum();
     checkPosition();
+    emitWillSnapTo();
     emitter.emit("drag", {
       id: toValue(id),
       x: draggedX.value,
@@ -470,6 +490,7 @@ export function useDrawerDrag(args) {
     setDragged({ x: firstTouch.clientX, y: firstTouch.clientY });
     checkMomentum();
     checkPosition();
+    emitWillSnapTo();
     emitter.emit("drag", {
       id: toValue(id),
       x: draggedX.value,
@@ -535,6 +556,7 @@ export function useDrawerDrag(args) {
         return;
       }
       dragging.value = true;
+      lastPendingTarget = void 0;
       pointerdownTarget = e.target;
       guardedSetPointerCapture({
         event: e,
@@ -587,6 +609,7 @@ export function useDrawerDrag(args) {
       e.stopImmediatePropagation();
       e.stopPropagation();
       dragging.value = true;
+      lastPendingTarget = void 0;
       pointerdownTarget = e.target;
       emitter.emit("beforeDrag", {
         id: toValue(id),

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

@@ -1,11 +1,11 @@
 import { type Ref, type MaybeRef } from 'vue';
-import type { DrawerSnapPoint, RequiredMagicDrawerOptions } from '../../types/index.js';
+import type { MagicDrawerSnapPoint, RequiredMagicDrawerOptions } from '../../types/index.js';
 interface UseDrawerGuardsArgs {
     elRef: Ref<HTMLElement | null>;
     absDirectionX: MaybeRef<'with' | 'against' | undefined>;
     absDirectionY: MaybeRef<'with' | 'against' | undefined>;
     position: MaybeRef<RequiredMagicDrawerOptions['position']>;
-    activeSnapPoint: MaybeRef<DrawerSnapPoint | undefined>;
+    activeSnapPoint: MaybeRef<MagicDrawerSnapPoint | undefined>;
 }
 export declare function useDrawerGuards(args: UseDrawerGuardsArgs): {
     canDrag: (el: EventTarget) => boolean;

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

@@ -1,5 +1,5 @@
 import { type MaybeRef, type Ref } from 'vue';
-import type { DrawerSnapPoint, RequiredMagicDrawerOptions } from '../../types/index.js';
+import type { MagicDrawerSnapPoint, RequiredMagicDrawerOptions } from '../../types/index.js';
 type UseDrawerSnapArgs = {
     id: MaybeRef<string>;
     wrapperRect: Ref<DOMRect | undefined>;
@@ -17,7 +17,7 @@ type FindClosestSnapPointArgs = {
     direction?: 'below' | 'above' | 'absolute';
 };
 type SnapToArgs = {
-    snapPoint: DrawerSnapPoint;
+    snapPoint: MagicDrawerSnapPoint;
     interpolate: boolean;
     duration?: number;
 };
@@ -29,11 +29,11 @@ type InterpolateDraggedArgs = {
 export declare function useDrawerSnap(args: UseDrawerSnapArgs): {
     snappedY: import("vue").ShallowRef<number, number>;
     snappedX: import("vue").ShallowRef<number, number>;
-    activeSnapPoint: import("vue").ShallowRef<DrawerSnapPoint | undefined, DrawerSnapPoint | undefined>;
+    activeSnapPoint: import("vue").ShallowRef<MagicDrawerSnapPoint | undefined, MagicDrawerSnapPoint | undefined>;
     snapTo: (args: SnapToArgs) => Promise<void>;
     findClosestSnapPoint: (args: FindClosestSnapPointArgs) => number | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;
-    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, DrawerSnapPoint>>;
+    snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<number, MagicDrawerSnapPoint>>;
     drawerHeight: import("vue").ComputedRef<number>;
     drawerWidth: import("vue").ComputedRef<number>;
 };

package/dist/plugins/MagicDrawer/src/composables/useMagicDrawer.d.ts

@@ -1,5 +1,5 @@
 import { type MaybeRef } from 'vue';
-import type { DrawerSnapPoint, MagicDrawerOptions } from '../types/index.js';
+import type { MagicDrawerSnapPoint, MagicDrawerOptions } from '../types/index.js';
 export declare function useMagicDrawer(id: MaybeRef<string>, options?: MagicDrawerOptions): {
     isActive: import("vue").ComputedRef<boolean>;
     progress: import("vue").Ref<{
@@ -12,6 +12,6 @@ export declare function useMagicDrawer(id: MaybeRef<string>, options?: MagicDraw
     state: import("../types/index.js").DrawerState;
     open: () => void;
     close: () => void;
-    snapTo: (snapPoint: DrawerSnapPoint, duration?: number) => void;
+    snapTo: (snapPoint: MagicDrawerSnapPoint, duration?: number) => void;
 };
 export type UseMagicDrawerReturn = ReturnType<typeof useMagicDrawer>;

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

@@ -1,6 +1,6 @@
 import { type Options as FocusTrapOptions } from 'focus-trap';
 import type { RequireAllNested } from '@maas/vue-equipment/utils';
-export type DrawerSnapPoint = number | `${number}px`;
+export type MagicDrawerSnapPoint = number | `${number}px`;
 export type DrawerSnapMode = 'closest' | 'step';
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
@@ -9,7 +9,7 @@ export interface MagicDrawerOptions {
     scrollLock?: boolean | {
         padding: boolean;
     };
-    snapPoints?: DrawerSnapPoint[];
+    snapPoints?: MagicDrawerSnapPoint[];
     snap?: {
         mode?: DrawerSnapMode;
     };
@@ -35,7 +35,7 @@ export interface MagicDrawerOptions {
     initial?: {
         open?: boolean;
         transition?: boolean;
-        snapPoint?: DrawerSnapPoint;
+        snapPoint?: MagicDrawerSnapPoint;
     };
     keyListener?: {
         close?: string[] | false;
@@ -79,6 +79,10 @@ export interface DrawerState {
     wrapperRect: DOMRect | undefined;
     options: RequiredMagicDrawerOptions;
 }
+export interface MagicDrawerWillSnapToPayload {
+    id: string;
+    snapPoint: MagicDrawerSnapPoint;
+}
 export type DrawerEvents = {
     beforeEnter: string;
     enter: string;
@@ -88,16 +92,16 @@ export type DrawerEvents = {
     afterLeave: string;
     beforeSnap: {
         id: string;
-        snapPoint: DrawerSnapPoint;
+        snapPoint: MagicDrawerSnapPoint;
     };
     snapTo: {
         id: string;
-        snapPoint: DrawerSnapPoint;
+        snapPoint: MagicDrawerSnapPoint;
         duration?: number;
     };
     afterSnap: {
         id: string;
-        snapPoint: DrawerSnapPoint;
+        snapPoint: MagicDrawerSnapPoint;
     };
     beforeDrag: {
         id: string;
@@ -119,6 +123,7 @@ export type DrawerEvents = {
         x: number;
         y: number;
     };
+    willSnapTo: MagicDrawerWillSnapToPayload;
 };
 export interface DrawerActive {
     innerActive: boolean;