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

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

@@ -76,9 +76,6 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
             easing?: (t: number) => number;
         };
     });
-    backdrop: boolean;
-    tag: "div" | "dialog";
-    focusTrap: boolean | import("focus-trap").Options;
     scrollLock: {
         padding: boolean;
     } | ((boolean | {
@@ -110,10 +107,6 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     } & true, "padding"> & {
         padding: boolean;
     });
-    teleport: {
-        target?: string;
-        disabled?: boolean;
-    };
     keyListener: ({
         close?: string[] | false;
     } & import("../../../../utils/index.js").RequireAll<{
@@ -127,8 +120,15 @@ declare const mappedOptions: Omit<MagicDrawerOptions, keyof MagicDrawerOptions>
     }>, "close"> & {
         close: (false | string[] | undefined) & (false | string[]);
     });
-    position: "right" | "left" | "top" | "bottom";
+    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/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/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/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/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);

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

@@ -12,19 +12,19 @@ declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> &
         content?: string;
         backdrop?: string;
     };
-    backdrop: boolean;
-    tag: "div" | "dialog";
-    focusTrap: boolean | import("focus-trap").Options;
     scrollLock: boolean | {
         padding: boolean;
     };
+    keyListener: {
+        close?: string[] | false;
+    };
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
     teleport: {
         target?: string;
         disabled?: boolean;
     };
-    keyListener: {
-        close?: string[] | false;
-    };
 };
 declare const mappedId: string;
 declare const close: () => void;

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

@@ -12,14 +12,8 @@ import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
 const { pause = false, options } = defineProps({
-  options: {
-    type: Object,
-    required: false
-  },
-  pause: {
-    type: Boolean,
-    required: false
-  }
+  options: { type: Object, required: false },
+  pause: { type: Boolean, required: false }
 });
 const canvasRef = useTemplateRef("canvas");
 const offCanvasRef = useTemplateRef("offCanvas");

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

@@ -20,14 +20,8 @@
 import { computed, toRefs, onBeforeUnmount } from "vue";
 import { usePieState } from "../composables/private/usePieState";
 const { id, options } = defineProps({
-  id: {
-    type: String,
-    required: true
-  },
-  options: {
-    type: Object,
-    required: false
-  }
+  id: { type: String, required: true },
+  options: { type: Object, required: false }
 });
 const { initializeState, deleteState } = usePieState(id);
 const state = initializeState();

package/dist/plugins/MagicPlayer/src/components/MagicPlayerAudioControls.vue

@@ -73,10 +73,7 @@ import {
   MagicPlayerBarRef
 } from "../symbols";
 const { instanceId } = defineProps({
-  instanceId: {
-    type: String,
-    required: false
-  }
+  instanceId: { type: String, required: false }
 });
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const mappedInstanceId = computed(() => instanceId ?? injectedInstanceId);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerDisplayTime.vue

@@ -10,10 +10,7 @@ import { formatTime } from "@maas/vue-equipment/utils";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId } from "../symbols";
 const { type = "current" } = defineProps({
-  type: {
-    type: String,
-    required: false
-  }
+  type: { type: String, required: false }
 });
 const instanceId = inject(MagicPlayerInstanceId);
 if (!instanceId) {

package/dist/plugins/MagicPlayer/src/components/MagicPlayerMuxPopover.vue

@@ -28,10 +28,7 @@ import { useDevicePixelRatio } from "@vueuse/core";
 import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 const { playbackId } = defineProps({
-  playbackId: {
-    type: String,
-    required: false
-  }
+  playbackId: { type: String, required: false }
 });
 const instanceId = inject(MagicPlayerInstanceId, void 0);
 const injectedOptions = inject(MagicPlayerOptionsKey, void 0);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerProvider.vue

@@ -25,14 +25,8 @@ import { usePlayerState } from "../composables/private/usePlayerState";
 import { MagicPlayerInstanceId, MagicPlayerOptionsKey } from "../symbols";
 import { defaultOptions } from "../utils/defaultOptions";
 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, deleteState } = usePlayerState(id);

package/dist/plugins/MagicPlayer/src/components/MagicPlayerVideoControls.vue

@@ -108,18 +108,9 @@ const {
   standalone = false,
   transition
 } = defineProps({
-  id: {
-    type: String,
-    required: false
-  },
-  standalone: {
-    type: Boolean,
-    required: false
-  },
-  transition: {
-    type: String,
-    required: false
-  }
+  id: { type: String, required: false },
+  standalone: { type: Boolean, required: false },
+  transition: { type: String, required: false }
 });
 const injectedInstanceId = inject(MagicPlayerInstanceId, void 0);
 const mappedInstanceId = computed(() => id ?? injectedInstanceId);

package/dist/plugins/MagicPlayer/src/composables/useMagicPlayer.d.ts

@@ -14,6 +14,7 @@ export declare function useMagicPlayer(id: MaybeRef<string>): {
     touched: import("vue").Ref<boolean, boolean>;
     dragging: import("vue").Ref<boolean, boolean>;
     isFullscreen: import("vue").Ref<boolean, boolean>;
+    currentTime: import("vue").Ref<number, number>;
     seekedTime: import("vue").Ref<number, number>;
     seekedPercentage: import("vue").Ref<number, number>;
     scrubbedPercentage: import("vue").Ref<number, number>;