@maas/vue-equipment 1.0.0-beta.17 → 1.0.0-beta.18

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

@@ -1,13 +1,7 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type MaybeRef } from 'vue';
 import type { DraggableSnapPoint, Coordinates, DraggableDefaultOptions } from '../../types/index.js';
 type UseDraggableSnapArgs = {
     id: MaybeRef<string>;
-    elRect: Ref<DOMRect | undefined>;
-    wrapperRect: Ref<DOMRect | undefined>;
-    draggedX: Ref<number>;
-    draggedY: Ref<number>;
-    lastDraggedX: Ref<number>;
-    lastDraggedY: Ref<number>;
     animation: MaybeRef<DraggableDefaultOptions['animation']>;
     snapPoints: MaybeRef<DraggableDefaultOptions['snapPoints']>;
 };
@@ -23,17 +17,8 @@ type SnapToArgs = {
     duration?: number;
 };
 export declare function useDraggableSnap(args: UseDraggableSnapArgs): {
+    mappedActiveSnapPoint: import("vue").ComputedRef<Coordinates | undefined>;
     mappedSnapPoints: import("@vueuse/core").ComputedRefWithControl<Coordinates[]>;
-    activeSnapPoint: Ref<("center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
-        x?: number | undefined;
-        y?: number | undefined;
-    } | undefined] | undefined, "center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
-        x?: number;
-        y?: number;
-    } | undefined] | ["center" | "right" | "left" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right", offset?: {
-        x?: number | undefined;
-        y?: number | undefined;
-    } | undefined] | undefined>;
     snapPointsMap: import("@vueuse/core").ComputedRefWithControl<Record<string, DraggableSnapPoint>>;
     mapSnapPoint: (snapPoint: DraggableSnapPoint) => Coordinates | undefined;
     interpolateDragged: (args: InterpolateDraggedArgs) => void;

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

@@ -1,30 +1,43 @@
-import { ref, toValue, nextTick } from "vue";
+import {
+  ref,
+  toRefs,
+  computed,
+  toValue,
+  nextTick
+} from "vue";
 import { computedWithControl } from "@vueuse/core";
 import { interpolate } from "@maas/vue-equipment/utils";
 import { useMagicEmitter } from "@maas/vue-equipment/plugins";
 import { defu } from "defu";
+import { useDraggableState } from "./useDraggableState.mjs";
 export function useDraggableSnap(args) {
+  const { id, animation, snapPoints } = args;
+  const { initializeState } = useDraggableState(toValue(id));
+  const state = initializeState();
   const {
-    id,
-    draggedX,
-    draggedY,
     lastDraggedX,
     lastDraggedY,
+    draggedX,
+    draggedY,
     elRect,
     wrapperRect,
-    animation,
-    snapPoints
-  } = args;
+    activeSnapPoint
+  } = toRefs(state);
   const interpolationIdX = ref(void 0);
   const interpolationIdY = ref(void 0);
-  const activeSnapPoint = ref(void 0);
+  const mappedActiveSnapPoint = computed(() => {
+    if (!activeSnapPoint.value) {
+      return void 0;
+    }
+    return mapSnapPoint(activeSnapPoint.value);
+  });
   const mappedSnapPoints = computedWithControl(
     () => toValue(wrapperRect),
     () => {
       const mapped = toValue(snapPoints).map((snapPoint) => {
         return mapSnapPoint(snapPoint);
       }).filter((snapPoint) => snapPoint !== void 0);
-      return mapped;
+      return mapped ?? [];
     }
   );
   const snapPointsMap = computedWithControl(
@@ -54,60 +67,65 @@ export function useDraggableSnap(args) {
     const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;
     const [position, offset] = mappedSnapPoint;
     const mappedOffset = defu(offset, { x: 0, y: 0 });
+    let x = 0;
+    let y = 0;
     switch (position) {
-      case "top-left":
-        return {
-          x: mappedOffset.x,
-          y: mappedOffset.y
-        };
-      case "top":
-        return {
-          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
-          y: mappedOffset.y
-        };
-      case "top-right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: mappedOffset.y
-        };
-      case "left":
-        return {
-          x: mappedOffset.x,
-          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
-        };
-      case "center":
-        return {
-          x: wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x,
-          y: wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y
-        };
-      case "right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2
-        };
-      case "bottom-left":
-        return {
-          x: mappedOffset.x,
-          y: wrapperRect.value.height + mappedOffset.y - elRect.value.height
-        };
-      case "bottom":
-        return {
-          x: wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2,
-          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
-        };
-      case "bottom-right":
-        return {
-          x: wrapperRect.value.width - mappedOffset.x - elRect.value.width,
-          y: wrapperRect.value.height - mappedOffset.y - elRect.value.height
-        };
+      case "top-left": {
+        x = mappedOffset.x;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = mappedOffset.y;
+        break;
+      }
+      case "top-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = mappedOffset.y;
+        break;
+      }
+      case "left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "center": {
+        x = wrapperRect.value.width / 2 - elRect.value.width / 2 + mappedOffset.x;
+        y = wrapperRect.value.height / 2 - elRect.value.height / 2 + mappedOffset.y;
+        break;
+      }
+      case "right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height / 2 + mappedOffset.y - elRect.value.height / 2;
+        break;
+      }
+      case "bottom-left": {
+        x = mappedOffset.x;
+        y = wrapperRect.value.height + mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom": {
+        x = wrapperRect.value.width / 2 + mappedOffset.x - elRect.value.width / 2;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
+      case "bottom-right": {
+        x = wrapperRect.value.width - mappedOffset.x - elRect.value.width;
+        y = wrapperRect.value.height - mappedOffset.y - elRect.value.height;
+        break;
+      }
     }
+    return { x: Math.round(x), y: Math.round(y) };
   }
   function cancelInterpolation() {
     if (interpolationIdY.value) {
       cancelAnimationFrame(interpolationIdY.value);
+      interpolationIdY.value = void 0;
     }
     if (interpolationIdX.value) {
       cancelAnimationFrame(interpolationIdX.value);
+      interpolationIdX.value = void 0;
     }
   }
   function interpolateDragged(args2) {
@@ -131,8 +149,8 @@ export function useDraggableSnap(args) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
         if (draggedY.value === y) {
-          lastDraggedX.value = draggedX.value;
-          lastDraggedY.value = draggedY.value;
+          lastDraggedY.value = y;
+          interpolationIdY.value = void 0;
         }
       },
       interpolationIdCallback(id2) {
@@ -150,8 +168,8 @@ export function useDraggableSnap(args) {
           emitter.emit("afterSnap", { id: toValue(id), snapPoint });
         }
         if (draggedX.value === x) {
-          lastDraggedX.value = draggedX.value;
-          lastDraggedY.value = draggedY.value;
+          lastDraggedX.value = x;
+          interpolationIdX.value = void 0;
         }
       },
       interpolationIdCallback(id2) {
@@ -181,8 +199,8 @@ export function useDraggableSnap(args) {
     activeSnapPoint.value = snapPoint;
   }
   return {
+    mappedActiveSnapPoint,
     mappedSnapPoints,
-    activeSnapPoint,
     snapPointsMap,
     mapSnapPoint,
     interpolateDragged,

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

@@ -16,7 +16,8 @@ export function useDraggableState(id) {
       draggedX: 0,
       draggedY: 0,
       elRect: void 0,
-      wrapperRect: void 0
+      wrapperRect: void 0,
+      activeSnapPoint: void 0
     };
     return reactive(state);
   }

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

@@ -53,6 +53,7 @@ export interface DraggableState {
     draggedY: number;
     elRect: DOMRect | undefined;
     wrapperRect: DOMRect | undefined;
+    activeSnapPoint: DraggableSnapPoint | undefined;
 }
 export type DraggableEvents = {
     beforeSnap: {

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

@@ -101,14 +101,8 @@ const customDefu = createDefu((obj, key, value) => {
   }
 });
 const { options = {}, id } = defineProps({
-  id: {
-    type: null,
-    required: true
-  },
-  options: {
-    type: Object,
-    required: false
-  }
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
 });
 const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);

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

@@ -40,9 +40,42 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
         distance: number;
         momentum: number;
     });
-    backdrop: boolean;
-    tag: "dialog" | "div";
-    focusTrap: boolean | import("focus-trap").Options;
+    transition: {
+        content?: string;
+        backdrop?: string;
+    };
+    disabled: boolean;
+    animation: ({
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils/index.js").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>) | (Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }, "snap"> & Omit<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    } & import("../../../../utils/index.js").RequireAll<{
+        snap?: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    }>, "snap"> & {
+        snap: {
+            duration?: number;
+            easing?: (t: number) => number;
+        };
+    });
     scrollLock: {
         padding: boolean;
     } | ((boolean | {
@@ -74,14 +107,6 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     } & true, "padding"> & {
         padding: boolean;
     });
-    teleport: {
-        target?: string;
-        disabled?: boolean;
-    };
-    transition: {
-        content?: string;
-        backdrop?: string;
-    };
     keyListener: ({
         close?: string[] | false;
     } & import("../../../../utils/index.js").RequireAll<{
@@ -95,40 +120,15 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     }>, "close"> & {
         close: (false | string[] | undefined) & (false | string[]);
     });
-    position: "right" | "left" | "top" | "bottom";
-    disabled: boolean;
-    animation: ({
-        snap?: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    } & import("../../../../utils/index.js").RequireAll<{
-        snap?: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    }>) | (Omit<{
-        snap?: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    }, "snap"> & Omit<{
-        snap?: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    } & import("../../../../utils/index.js").RequireAll<{
-        snap?: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    }>, "snap"> & {
-        snap: {
-            duration?: number;
-            easing?: (t: number) => number;
-        };
-    });
+    position: "left" | "top" | "right" | "bottom";
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
     snapPoints: import("../types/index.js").DrawerSnapPoint[];
+    teleport: {
+        target?: string;
+        disabled?: boolean;
+    };
     initial: {
         open?: boolean;
         transition?: boolean;

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

@@ -21,14 +21,8 @@ import { useTemplateRef, onMounted, onBeforeUnmount } 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
-  }
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
 });
 const { deleteState, initializeState } = useMarqueeState(id);
 initializeState(options);

package/dist/plugins/MagicMenu/src/components/MagicMenuChannel.vue

@@ -23,14 +23,8 @@ import {
 } from "../symbols";
 import { useMenuState } from "../composables/private/useMenuState";
 const { transition, id } = defineProps({
-  id: {
-    type: String,
-    required: true
-  },
-  transition: {
-    type: String,
-    required: false
-  }
+  id: { type: String, required: true },
+  transition: { type: String, required: false }
 });
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);

package/dist/plugins/MagicMenu/src/components/MagicMenuContent.vue

@@ -83,23 +83,10 @@ defineOptions({
   inheritAttrs: false
 });
 const { arrow = void 0, transition } = defineProps({
-  arrow: {
-    type: Boolean,
-    required: false,
-    skipCheck: true
-  },
-  middleware: {
-    type: Array,
-    required: false
-  },
-  transition: {
-    type: String,
-    required: false
-  },
-  referenceEl: {
-    type: null,
-    required: false
-  }
+  arrow: { type: Boolean, required: false, skipCheck: true },
+  middleware: { type: Array, required: false },
+  transition: { type: String, required: false },
+  referenceEl: { type: null, required: false }
 });
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);

package/dist/plugins/MagicMenu/src/components/MagicMenuFloat.vue

@@ -41,22 +41,10 @@ import { useMenuView } from "../composables/private/useMenuView";
 import { useMenuState } from "../composables/private/useMenuState";
 import { ModeFloatingStrategy } from "../utils/modeFloatingStrategyDefaults";
 const { placement, middleware, arrow, referenceEl } = defineProps({
-  placement: {
-    type: null,
-    required: false
-  },
-  middleware: {
-    type: Array,
-    required: false
-  },
-  arrow: {
-    type: Boolean,
-    required: false
-  },
-  referenceEl: {
-    type: null,
-    required: false
-  }
+  placement: { type: null, required: false },
+  middleware: { type: Array, required: false },
+  arrow: { type: Boolean, required: false },
+  referenceEl: { type: null, required: false }
 });
 const elRef = useTemplateRef("el");
 const arrowRef = useTemplateRef("arrow");

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue

@@ -29,14 +29,8 @@ import {
   MagicMenuItemActive
 } from "../symbols";
 const { id, disabled } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
 const instanceId = inject(MagicMenuInstanceId, void 0);

package/dist/plugins/MagicMenu/src/components/MagicMenuItem.vue.d.ts

@@ -10,7 +10,7 @@ declare function guardedUnselect(): void;
 declare function onClick(event: MouseEvent): void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
-    itemActive: boolean;
+    itemActive: any;
     itemDisabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {

package/dist/plugins/MagicMenu/src/components/MagicMenuProvider.vue

@@ -27,18 +27,9 @@ import { useMenuKeyListener } from "../composables/private/useMenuKeyListener";
 import { MagicMenuInstanceId } from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
 const { id, options } = defineProps({
-  id: {
-    type: null,
-    required: true
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  },
-  options: {
-    type: Object,
-    required: false
-  }
+  id: { type: null, required: true },
+  asChild: { type: Boolean, required: false },
+  options: { type: Object, required: false }
 });
 const elRef = useTemplateRef("el");
 const mappedOptions = defu(options, defaultOptions);

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue

@@ -20,30 +20,12 @@ import { useMenuChannel } from "../composables/private/useMenuChannel";
 import { MagicMenuInstanceId, MagicMenuViewId } from "../symbols";
 import { useMenuRemote } from "../composables/private/useMenuRemote";
 const { disabled, channelId, instanceId, viewId, trigger } = defineProps({
-  channelId: {
-    type: String,
-    required: true
-  },
-  viewId: {
-    type: String,
-    required: false
-  },
-  instanceId: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  trigger: {
-    type: Array,
-    required: false
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  }
+  channelId: { type: String, required: true },
+  viewId: { type: String, required: false },
+  instanceId: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  trigger: { type: Array, required: false },
+  asChild: { type: Boolean, required: false }
 });
 const injectedInstanceId = inject(MagicMenuInstanceId, instanceId);
 const injectedViewId = inject(MagicMenuViewId, viewId);

package/dist/plugins/MagicMenu/src/components/MagicMenuRemote.vue.d.ts

@@ -12,7 +12,7 @@ declare const onClick: () => void, onMouseenter: () => void;
 declare let channel: import("../types/index.js").MenuChannel;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_11: {
-    channelActive: boolean;
+    channelActive: any;
     remoteDisabled: boolean;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue

@@ -29,26 +29,11 @@ import {
 } from "../symbols";
 import { onKeyStroke } from "@vueuse/core";
 const { instanceId, viewId, disabled, trigger } = defineProps({
-  instanceId: {
-    type: String,
-    required: false
-  },
-  viewId: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  trigger: {
-    type: Array,
-    required: false
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  }
+  instanceId: { type: String, required: false },
+  viewId: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  trigger: { type: Array, required: false },
+  asChild: { type: Boolean, required: false }
 });
 const elRef = useTemplateRef("el");
 const injectedInstanceId = inject(MagicMenuInstanceId, void 0);

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -14,8 +14,8 @@ declare const mappedTabindex: import("vue").ComputedRef<0 | undefined>;
 declare const onMouseenter: () => void, onClick: (e: MouseEvent) => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_13: {
-    viewActive: boolean | undefined;
-    triggerDisabled: boolean;
+    viewActive: any;
+    triggerDisabled: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_13) => any;

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -16,14 +16,8 @@ import {
 } from "../symbols";
 import { useMenuState } from "../composables/private/useMenuState";
 const { id, placement } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  placement: {
-    type: null,
-    required: false
-  }
+  id: { type: String, required: false },
+  placement: { type: null, required: false }
 });
 const parentTree = inject(MagicMenuParentTree, []);
 const instanceId = inject(MagicMenuInstanceId, void 0);

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -7,7 +7,7 @@ declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types/index.js").MenuView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
-    viewActive: boolean;
+    viewActive: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_1) => any;

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

@@ -74,18 +74,9 @@ const customDefu = createDefu((obj, key, value) => {
   }
 });
 const { id, options = {} } = defineProps({
-  id: {
-    type: null,
-    required: true
-  },
-  props: {
-    type: Object,
-    required: false
-  },
-  options: {
-    type: Object,
-    required: false
-  }
+  id: { type: null, required: true },
+  props: { type: Object, required: false },
+  options: { type: Object, required: false }
 });
 const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);