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

package/dist/nuxt/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.17",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
+    "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"
   }
 }

package/dist/nuxt/types.d.mts

@@ -1,7 +1,3 @@
-import type { NuxtModule } from '@nuxt/schema'
+export { default } from './module.mjs'
 
-import type { default as Module } from './module.js'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module.js'
+export { type ModuleOptions } from './module.mjs'

package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue

@@ -39,18 +39,9 @@ import "@maas/vue-equipment/utils/css/animations/fade-in.css";
 import "@maas/vue-equipment/utils/css/animations/auto-size-out.css";
 import "@maas/vue-equipment/utils/css/easings.css";
 const { transition, animation } = defineProps({
-  asChild: {
-    type: Boolean,
-    required: false
-  },
-  transition: {
-    type: String,
-    required: false
-  },
-  animation: {
-    type: Object,
-    required: false
-  }
+  asChild: { type: Boolean, required: false },
+  transition: { type: String, required: false },
+  animation: { type: Object, required: false }
 });
 const instanceId = inject(MagicAccordionInstanceId, void 0);
 const viewId = inject(MagicAccordionViewId, void 0);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionProvider.vue

@@ -10,18 +10,9 @@ import { Primitive } from "@maas/vue-primitive";
 import { MagicAccordionInstanceId } from "../symbols";
 import { useAccordionState } from "../composables/private/useAccordionState";
 const { id, asChild, 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 { deleteState, initializeState } = useAccordionState(id);
 initializeState(options);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue

@@ -27,22 +27,10 @@ const {
   trigger = "click",
   asChild = false
 } = defineProps({
-  viewId: {
-    type: String,
-    required: false
-  },
-  disabled: {
-    type: null,
-    required: false
-  },
-  trigger: {
-    type: String,
-    required: false
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  }
+  viewId: { type: String, required: false },
+  disabled: { type: null, required: false },
+  trigger: { type: String, required: false },
+  asChild: { type: Boolean, required: false }
 });
 const elRef = useTemplateRef("el");
 const instanceId = inject(MagicAccordionInstanceId, void 0);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue

@@ -19,18 +19,9 @@ import {
 } from "../symbols";
 import { useAccordionView } from "../composables/private/useAccordionView";
 const { id, active } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  },
-  active: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  asChild: { type: Boolean, required: false },
+  active: { type: Boolean, required: false }
 });
 const instanceId = inject(MagicAccordionInstanceId, void 0);
 if (!instanceId) {

package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue

@@ -21,10 +21,7 @@ defineOptions({
   inheritAttrs: false
 });
 defineProps({
-  options: {
-    type: null,
-    required: false
-  }
+  options: { type: null, required: false }
 });
 const instanceId = inject(MagicCommandInstanceId, "");
 const emitter = useMagicEmitter();

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue

@@ -39,18 +39,9 @@ const {
   initial = false,
   disabled = false
 } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  initial: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  initial: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
 const instanceId = inject(MagicCommandInstanceId, void 0);

package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue

@@ -21,10 +21,7 @@ defineOptions({
   inheritAttrs: false
 });
 defineProps({
-  options: {
-    type: null,
-    required: false
-  }
+  options: { type: null, required: false }
 });
 const instanceId = inject(MagicCommandInstanceId, "");
 const emitter = useMagicEmitter();

package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue

@@ -14,18 +14,9 @@ import { useMagicCommand } from "../composables/useMagicCommand";
 import { defaultOptions } from "../utils/defaultOptions";
 import { MagicCommandInstanceId, MagicCommandProviderOptions } from "../symbols";
 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 customDefu = createDefu((obj, key, value) => {
   if (key === "open" || key === "close" || key === "next" || key === "prev") {

package/dist/plugins/MagicCommand/src/components/MagicCommandTrigger.vue

@@ -33,30 +33,12 @@ const {
   action = "open",
   trigger = ["click"]
 } = defineProps({
-  viewId: {
-    type: String,
-    required: false
-  },
-  active: {
-    type: Boolean,
-    required: false
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  },
-  action: {
-    type: String,
-    required: false
-  },
-  trigger: {
-    type: Array,
-    required: false
-  },
-  asChild: {
-    type: Boolean,
-    required: false
-  }
+  viewId: { type: String, required: false },
+  active: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  action: { type: String, required: false },
+  trigger: { type: Array, required: false },
+  asChild: { type: Boolean, required: false }
 });
 const elRef = useTemplateRef("el");
 const instanceId = inject(MagicCommandInstanceId, void 0);

package/dist/plugins/MagicCommand/src/components/MagicCommandView.vue

@@ -15,14 +15,8 @@ import {
   MagicCommandViewActive
 } from "../symbols";
 const { id, initial = false } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  initial: {
-    type: Boolean,
-    required: false
-  }
+  id: { type: String, required: false },
+  initial: { type: Boolean, required: false }
 });
 const parentTree = inject(MagicCommandParentTree, []);
 const instanceId = inject(MagicCommandInstanceId, void 0);

package/dist/plugins/MagicCookie/src/components/MagicCookieItem.vue

@@ -17,18 +17,9 @@ import {
   MagicCookieItemActive
 } from "../symbols";
 const { id, optional, maxAge } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  optional: {
-    type: Boolean,
-    required: false
-  },
-  maxAge: {
-    type: Number,
-    required: false
-  }
+  id: { type: String, required: false },
+  optional: { type: Boolean, required: false },
+  maxAge: { type: Number, required: false }
 });
 const instanceId = inject(MagicCookieInstanceId, void 0);
 if (!instanceId) {

package/dist/plugins/MagicCookie/src/components/MagicCookieProvider.vue

@@ -16,14 +16,8 @@ defineOptions({
   inheritAttrs: false
 });
 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 mappedOptions = defu(options, defaultOptions);
 const { initializeState } = useCookieState(id);

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

@@ -24,7 +24,7 @@
 
 <script setup>
 import { useTemplateRef, computed, toValue, toRefs } from "vue";
-import { defu } from "defu";
+import { createDefu } from "defu";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
 import { defaultOptions } from "../utils/defaultOptions";
@@ -32,17 +32,20 @@ defineOptions({
   inheritAttrs: false
 });
 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 customDefu = createDefu((obj, key, value) => {
+  if (key === "snapPoints") {
+    obj[key] = value;
+    return true;
   }
 });
-const mappedOptions = defu(options, defaultOptions);
+const mappedOptions = customDefu(options, defaultOptions);
 const mappedId = toValue(id);
+if (!mappedOptions.snapPoints.length) {
+  throw new Error("MagicDraggable must have at least one snap point set");
+}
 const elRef = useTemplateRef("el");
 const wrapperRef = useTemplateRef("wrapper");
 const { initializeState } = useDraggableState(id);

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

@@ -68,10 +68,10 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
             easing?: (t: number) => number;
         };
     });
-    tag: "div" | "dialog";
     scrollLock: boolean | {
         padding: boolean;
     };
+    tag: "div" | "dialog";
     snapPoints: import("../types/index.js").DraggableSnapPoint[];
     initial: {
         snapPoint?: import("../types/index.js").DraggableSnapPoint;

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

@@ -53,7 +53,8 @@ export function useDraggableDrag(args) {
     draggedX,
     draggedY,
     elRect,
-    wrapperRect
+    wrapperRect,
+    activeSnapPoint
   } = toRefs(state);
   let cancelPointerup = void 0;
   let cancelPointermove = void 0;
@@ -78,21 +79,15 @@ export function useDraggableDrag(args) {
   });
   const {
     snapTo,
-    activeSnapPoint,
+    mappedActiveSnapPoint,
     mapSnapPoint,
     mappedSnapPoints,
     snapPointsMap,
     interpolateDragged
   } = useDraggableSnap({
     id,
-    elRect,
-    wrapperRect,
     animation,
-    snapPoints,
-    draggedX,
-    draggedY,
-    lastDraggedX,
-    lastDraggedY
+    snapPoints
   });
   const emitter = useMagicEmitter();
   const {
@@ -101,10 +96,9 @@ export function useDraggableDrag(args) {
     addScrollLockPadding,
     removeScrollLockPadding
   } = useDraggableScrollLock();
-  async function getSizes() {
+  function getSizes() {
     elRect.value = unrefElement(elRef)?.getBoundingClientRect();
     wrapperRect.value = unrefElement(wrapperRef)?.getBoundingClientRect();
-    await nextTick();
   }
   function setDragged({ x, y }) {
     draggedX.value = x - originX.value;
@@ -128,33 +122,18 @@ export function useDraggableDrag(args) {
       });
     }
   }
-  function detectCollision() {
+  async function checkSizes() {
+    getSizes();
     const childRect = toValue(elRect);
     const parentRect = toValue(wrapperRect);
     if (!childRect || !parentRect) {
+      console.warn("MagicDraggable could not calculate sizing");
       return;
     }
     if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
       console.warn("MagicDraggable is too small for its content");
       return;
     }
-    interpolateTo.value = { x: draggedX.value, y: draggedY.value };
-    if (childRect.top < parentRect.top) {
-      interpolateTo.value = { x: interpolateTo.value?.x, y: 0 };
-    } else if (childRect.bottom > parentRect.bottom) {
-      interpolateTo.value = {
-        x: interpolateTo.value?.x,
-        y: parentRect.height - childRect.height
-      };
-    }
-    if (childRect.left < parentRect.left) {
-      interpolateTo.value = { x: 0, y: interpolateTo.value?.y };
-    } else if (childRect.right > parentRect.right) {
-      interpolateTo.value = {
-        x: parentRect.width - childRect.width,
-        y: interpolateTo.value?.y
-      };
-    }
   }
   function vectorBetweenCoordinates(a, b) {
     const dx = b.x - a.x;
@@ -255,9 +234,18 @@ export function useDraggableDrag(args) {
     const draggedCoords = { x: draggedX.value, y: draggedY.value };
     const closestSnapPoint = mappedSnapPoints.value.reduce((a, b) => {
       return calculateDistance(a, draggedCoords) < calculateDistance(b, draggedCoords) ? a : b;
-    });
+    }, mappedSnapPoints.value[0]);
     return closestSnapPoint;
   }
+  function onIdle() {
+    interpolateTo.value = findClosestSnapPoint();
+    if (distanceThresholdReached.value && momentumThresholdReached.value) {
+      intermediateDraggedX.value = draggedX.value;
+      intermediateDraggedY.value = draggedY.value;
+      distanceThresholdReached.value = false;
+      momentumThresholdReached.value = false;
+    }
+  }
   function onPointerup(e) {
     if (!momentumThresholdReached.value && distanceThresholdReached.value) {
       interpolateTo.value = findClosestSnapPoint();
@@ -265,9 +253,7 @@ export function useDraggableDrag(args) {
     const { x, y } = interpolateTo.value || {};
     if (x !== void 0 && y !== void 0) {
       interpolateDragged({ x, y });
-    }
-    if (interpolateTo.value) {
-      const key = `x${interpolateTo.value.x}y${interpolateTo.value.y}`;
+      const key = `x${x}y${y}`;
       activeSnapPoint.value = snapPointsMap.value[key];
     }
     if (intermediateDraggedX.value === draggedX.value && intermediateDraggedY.value === draggedY.value) {
@@ -293,13 +279,11 @@ export function useDraggableDrag(args) {
     }
     guardedReleasePointerCapture({ event: e, element: elRef.value });
   }
-  function onPointermove(e) {
+  async function onPointermove(e) {
     if (!e.isPrimary) {
       return;
     }
     setDragged({ x: e.screenX, y: e.screenY });
-    getSizes();
-    detectCollision();
     if (!distanceThresholdReached.value) {
       checkDistance();
     }
@@ -307,27 +291,20 @@ export function useDraggableDrag(args) {
       checkMomentum();
     }
     if (!distanceThresholdReached.value && !momentumThresholdReached.value) {
-      interpolateTo.value = { x: lastDraggedX.value, y: lastDraggedY.value };
+      const { x, y } = mappedActiveSnapPoint.value ?? {};
+      if (x !== void 0 && y !== void 0) {
+        interpolateTo.value = { x, y };
+        console.log("G", interpolateTo.value);
+      }
       return;
     }
-    if (toValue(snapPoints).length) {
-      findSnapPointByVector();
-    }
+    findSnapPointByVector();
     emitter.emit("drag", {
       id: toValue(id),
       x: draggedX.value,
       y: draggedY.value
     });
   }
-  function onIdle() {
-    interpolateTo.value = findClosestSnapPoint();
-    if (distanceThresholdReached.value && momentumThresholdReached.value) {
-      intermediateDraggedX.value = draggedX.value;
-      intermediateDraggedY.value = draggedY.value;
-      distanceThresholdReached.value = false;
-      momentumThresholdReached.value = false;
-    }
-  }
   function onPointerdown(e) {
     const scrollLockValue = toValue(scrollLock);
     if (scrollLockValue) {
@@ -338,19 +315,21 @@ export function useDraggableDrag(args) {
     }
     if (dragging.value) {
       return;
-    } else {
-      guardedSetPointerCapture({ event: e, element: elRef.value });
-      dragging.value = true;
-      emitter.emit("beforeDrag", {
-        id: toValue(id),
-        x: draggedX.value,
-        y: draggedY.value
-      });
     }
+    checkSizes();
+    guardedSetPointerCapture({ event: e, element: elRef.value });
+    dragging.value = true;
+    emitter.emit("beforeDrag", {
+      id: toValue(id),
+      x: draggedX.value,
+      y: draggedY.value
+    });
     intermediateDraggedX.value = draggedX.value;
     intermediateDraggedY.value = draggedY.value;
     lastDraggedX.value = draggedX.value;
     lastDraggedY.value = draggedY.value;
+    originX.value = e.screenX - draggedX.value;
+    originY.value = e.screenY - draggedY.value;
     cancelPointerup = useEventListener(document, "pointerup", onPointerup);
     cancelPointermove = useEventListener(
       document,
@@ -359,8 +338,6 @@ export function useDraggableDrag(args) {
       { passive: false }
     );
     cancelTouchend = isIOS() ? useEventListener(document, "touchend", onPointerup) : void 0;
-    originX.value = e.screenX - draggedX.value;
-    originY.value = e.screenY - draggedY.value;
     dragStart.value = /* @__PURE__ */ new Date();
     onPointermove(e);
   }
@@ -396,7 +373,7 @@ export function useDraggableDrag(args) {
   });
   useResizeObserver(wrapperRef, async () => {
     useThrottleFn(async () => {
-      await getSizes();
+      getSizes();
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();
@@ -406,7 +383,7 @@ export function useDraggableDrag(args) {
   });
   useResizeObserver(elRef, async () => {
     useThrottleFn(async () => {
-      await getSizes();
+      getSizes();
       if (activeSnapPoint.value) {
         await snapTo({ snapPoint: activeSnapPoint.value, interpolate: false });
         snapPointsMap.trigger();

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;