@maas/vue-equipment 1.0.0-beta.65 → 1.0.0-beta.66

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -106,6 +106,14 @@ const functions$1 = [
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicToast/",
 		description: "MagicToast let’s you trigger and display toasts from anywhere"
 	},
+	{
+		name: "MagicTray",
+		"package": "plugins",
+		lastUpdated: 0,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicTray/",
+		description: "MagicTray is a flexible",
+		soon: true
+	},
 	{
 		name: "useCountdown",
 		"package": "composables",

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

@@ -141,8 +141,8 @@ export function useDraggableSnap(args) {
     const {
       x,
       y,
-      duration = toValue(animation)?.snap?.duration || 300,
-      easing = toValue(animation).snap?.easing
+      duration = toValue(animation).snap.duration,
+      easing = toValue(animation).snap.easing
     } = args2;
     const snapPoint = snapPointsMap.value[`x${x}y${y}`];
     if (!snapPoint) {

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

@@ -1,3 +1,4 @@
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
 type Position = 'top-left' | 'top' | 'top-right' | 'left' | 'center' | 'right' | 'bottom-left' | 'bottom' | 'bottom-right';
 export type Coordinates = {
     x: number;
@@ -35,7 +36,7 @@ export interface MagicDraggableOptions {
 }
 export type RequiredMagicDraggableOptions = Required<MagicDraggableOptions> & {
     threshold: Required<MagicDraggableOptions['threshold']>;
-    animation: Required<MagicDraggableOptions['animation']>;
+    animation: RequireAllNested<NonNullable<MagicDraggableOptions['animation']>>;
 };
 export interface DraggableState {
     id: string;

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

@@ -53,6 +53,7 @@ import {
   toRefs
 } from "vue";
 import { unrefElement } from "@vueuse/core";
+import { convertToPixels } from "@maas/vue-equipment/utils";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -166,26 +167,6 @@ watch(
     }
   }
 );
-function convertToPixels(value) {
-  const regex = /^(\d*\.?\d+)\s*(rem|px)$/;
-  const match = value.match(regex);
-  if (!match) {
-    logWarning(
-      `--magic-drawer-drag-overshoot (${value}) needs to be specified in px or rem`
-    );
-    return 0;
-  }
-  const numericValue = parseFloat(match[1] ?? "");
-  const unit = match[2];
-  const bodyFontSize = window.getComputedStyle(document.body).fontSize;
-  const rootFontSize = parseFloat(bodyFontSize) || 16;
-  switch (unit) {
-    case "rem":
-      return numericValue * rootFontSize;
-    case "px":
-      return numericValue;
-  }
-}
 function saveOvershoot() {
   const element = unrefElement(drawerRef);
   if (!element) {
@@ -194,7 +175,13 @@ function saveOvershoot() {
   const overshootVar = getComputedStyle(element, null).getPropertyValue(
     "--magic-drawer-drag-overshoot"
   );
-  overshoot.value = convertToPixels(overshootVar) || 0;
+  const pixels = convertToPixels(overshootVar);
+  if (pixels === void 0) {
+    logWarning(
+      `--magic-drawer-drag-overshoot (${overshootVar}) needs to be specified in px or rem`
+    );
+  }
+  overshoot.value = pixels ?? 0;
 }
 function guardedPointerdown(event) {
   if (!disabled.value) {

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

@@ -1,6 +1,6 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { MagicDrawerOptions } from '../../types/index.js';
-import type { DrawerActive } from '../../symbols/index.js';
+import type { DrawerActive } from '../../types/index.js';
 type UseDrawerCallbackArgs = {
     id: MaybeRef<string>;
     options: MagicDrawerOptions;

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

@@ -3,14 +3,7 @@ import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport
 import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useDrawerDOM } from "./useDrawerDOM.mjs";
 export function useDrawerCallback(args) {
-  const {
-    id,
-    options,
-    trapFocus,
-    releaseFocus,
-    active,
-    wasActive
-  } = args;
+  const { id, options, trapFocus, releaseFocus, active, wasActive } = args;
   const { lockScroll, unlockScroll } = useDrawerDOM();
   const { setMetaViewport, resetMetaViewport } = useMetaViewport();
   const emitter = useMagicEmitter();

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

@@ -227,8 +227,8 @@ export function useDrawerSnap(args) {
   function interpolateDragged(args2) {
     const {
       to,
-      duration = toValue(animation)?.snap?.duration || 300,
-      easing
+      duration = toValue(animation).snap.duration,
+      easing = toValue(animation).snap.easing
     } = args2;
     const snapPoint = snapPointsMap.value[to];
     if (!snapPoint && snapPoint !== 0) {

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

@@ -1,7 +1,7 @@
 import { reactive, toValue, onScopeDispose } from "vue";
 import { createStateStore } from "@maas/vue-equipment/utils";
-import { defaultOptions } from "../../utils/defaultOptions.mjs";
 import { createDefu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
 const getDrawerStateStore = createStateStore(
   "MagicDrawer",
   () => []

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

@@ -1,32 +1,13 @@
+import { rubberband } from "@maas/vue-equipment/utils";
 export function useDrawerUtils() {
   function clamp(value, from, to, flip) {
-    if (from > to) {
-      if (value > from) {
-        return value;
-      }
-      if (value < to) {
-        return to;
-      } else {
-        return value;
-      }
-    } else if (from < to) {
-      if (value < from) {
-        return value;
-      }
-      if (value > to) {
-        return to;
-      } else {
-        return value;
-      }
+    const overshoot = Math.abs(to);
+    if (to < from) {
+      return value < from ? from - rubberband(from - value, overshoot) : value;
+    } else if (to > from) {
+      return value > from ? from + rubberband(value - from, overshoot) : value;
     } else {
-      switch (flip) {
-        case true:
-          return value > to ? to : value;
-        case false:
-          return value < to ? to : value;
-        default:
-          return value < to ? to : value;
-      }
+      return flip ? Math.min(value, to) : Math.max(value, to);
     }
   }
   return {

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

@@ -1,7 +1,5 @@
 import type { InjectionKey, MaybeRef } from 'vue';
+import type { DrawerActive } from '../types/index.js';
 declare const MagicDrawerInstanceId: InjectionKey<MaybeRef<string>>;
-declare const MagicDrawerActiveKey: InjectionKey<{
-    innerActive: boolean;
-    wrapperActive: boolean;
-}>;
+declare const MagicDrawerActiveKey: InjectionKey<DrawerActive>;
 export { MagicDrawerInstanceId, MagicDrawerActiveKey };

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

@@ -1,4 +1,5 @@
 import { type Options as FocusTrapOptions } from 'focus-trap';
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
 export type DrawerSnapPoint = number | `${number}px`;
 export interface MagicDrawerOptions {
     position?: 'top' | 'right' | 'bottom' | 'left';
@@ -43,7 +44,7 @@ export interface MagicDrawerOptions {
 export type RequiredMagicDrawerOptions = Required<MagicDrawerOptions> & {
     scrollLock: Required<MagicDrawerOptions['scrollLock']>;
     threshold: Required<MagicDrawerOptions['threshold']>;
-    animation: Required<MagicDrawerOptions['animation']>;
+    animation: RequireAllNested<NonNullable<MagicDrawerOptions['animation']>>;
     keyListener: Required<MagicDrawerOptions['keyListener']>;
 };
 export interface DrawerState {
@@ -114,3 +115,7 @@ export type DrawerEvents = {
         y: number;
     };
 };
+export interface DrawerActive {
+    innerActive: boolean;
+    wrapperActive: boolean;
+}

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -1,3 +1,4 @@
+import { easeOutQuad } from "@maas/vue-equipment/utils";
 const defaultOptions = {
   position: "bottom",
   tag: "dialog",
@@ -23,7 +24,8 @@ const defaultOptions = {
   },
   animation: {
     snap: {
-      duration: 300
+      duration: 300,
+      easing: easeOutQuad
     }
   },
   initial: {