@maas/vue-equipment 1.0.0-beta.17 → 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.16",
+  "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/MagicAccordionContent.vue.d.ts

@@ -21,7 +21,7 @@ declare const mappedAnimation: import("vue").ComputedRef<{
 declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_13: {
-    viewActive: boolean | undefined;
+    viewActive: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_13) => any;

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/MagicAccordionTrigger.vue.d.ts

@@ -13,7 +13,7 @@ declare const mappedDisabled: import("vue").ComputedRef<boolean | undefined>;
 declare const onMouseenter: () => void, onClick: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_12: {
-    viewActive: boolean | undefined;
+    viewActive: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_12) => any;

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/MagicAccordion/src/components/MagicAccordionView.vue.d.ts

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

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/MagicCommandItem.vue.d.ts

@@ -10,7 +10,7 @@ declare function guardedSelect(): 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/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/MagicCommandTrigger.vue.d.ts

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

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/MagicCommand/src/components/MagicCommandView.vue.d.ts

@@ -6,7 +6,7 @@ declare const mappedId: import("vue").ComputedRef<string>;
 declare const view: import("../types/index.js").CommandView;
 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/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/MagicCookieItem.vue.d.ts

@@ -6,7 +6,7 @@ interface MagicCookieItemProps {
 declare const item: import("../types/index.js").CookieItem;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
-    item: import("../types/index.js").CookieItem;
+    item: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_1) => any;

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/MagicCookie/src/components/MagicCookieView.vue.d.ts

@@ -5,7 +5,7 @@ declare const state: import("../types/index.js").CookieState;
 declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_18: {
-    viewActive: boolean;
+    viewActive: any;
 };
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
     default?: (props: typeof __VLS_18) => any;

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

@@ -36,10 +36,6 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
         momentum: number;
         idle: number;
     });
-    tag: "dialog" | "div";
-    scrollLock: boolean | {
-        padding: boolean;
-    };
     disabled: boolean;
     animation: ({
         snap?: {
@@ -72,6 +68,10 @@ declare const mappedOptions: Omit<MagicDraggableOptions, keyof MagicDraggableOpt
             easing?: (t: number) => number;
         };
     });
+    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();