@maas/vue-equipment 1.0.0-beta.34 → 1.0.0-beta.36

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

@@ -2,12 +2,17 @@ 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/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 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 { logWarning } = useMagicError({
+    prefix: "MagicDraggable",
+    source: "useDraggableSnap"
+  });
   const {
     lastDraggedX,
     lastDraggedY,
@@ -54,11 +59,11 @@ export function useDraggableSnap(args) {
   const emitter = useMagicEmitter();
   function mapSnapPoint(snapPoint) {
     if (!wrapperRect.value) {
-      console.warn("Wrapper rect is not defined");
+      logWarning("Wrapper rect is not defined");
       return void 0;
     }
     if (!elRect.value) {
-      console.warn("Element rect is not defined");
+      logWarning("Element rect is not defined");
       return void 0;
     }
     const mappedSnapPoint = typeof snapPoint === "string" ? [snapPoint] : snapPoint;

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

@@ -72,6 +72,7 @@ import {
 } from "vue";
 import { createDefu } from "defu";
 import { onKeyStroke, unrefElement } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMetaViewport } from "@maas/vue-equipment/composables/useMetaViewport";
 import { defaultOptions } from "./../utils/defaultOptions";
 import { useDrawerDOM } from "../composables/private/useDrawerDOM";
@@ -121,6 +122,10 @@ const {
   focusTrap: mappedOptions.focusTrap
 });
 const { isActive, open, close } = useMagicDrawer(id);
+const { logWarning } = useMagicError({
+  prefix: "MagicDrawer",
+  source: "MagicDrawer"
+});
 const overshoot = shallowRef(0);
 const {
   position,
@@ -196,12 +201,12 @@ function convertToPixels(value) {
   const regex = /^(\d*\.?\d+)\s*(rem|px)$/;
   const match = value.match(regex);
   if (!match) {
-    console.error(
+    logWarning(
       `--magic-drawer-drag-overshoot (${value}) needs to be specified in px or rem`
     );
     return 0;
   }
-  const numericValue = parseFloat(match[1]);
+  const numericValue = parseFloat(match[1] ?? "");
   const unit = match[2];
   const bodyFontSize = window.getComputedStyle(document.body).fontSize;
   const rootFontSize = parseFloat(bodyFontSize) || 16;

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

@@ -20,7 +20,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_37) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicDrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -38,7 +38,9 @@ export function useDrawerDOM(args) {
     }
   }
   function addScrollLockPadding() {
-    if (typeof window === "undefined") return;
+    if (typeof window === "undefined") {
+      return;
+    }
     const exclude = new RegExp(/magic-drawer(__backdrop)?/);
     document.body.style.setProperty(
       "--scrollbar-width",

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

@@ -23,6 +23,7 @@ import {
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useMagicDrawer } from "./../useMagicDrawer.mjs";
 import { useDrawerSnap } from "./useDrawerSnap.mjs";
 import { useDrawerGuards } from "./useDrawerGuards.mjs";
@@ -42,6 +43,10 @@ export function useDrawerDrag(args) {
     preventDragClose,
     disabled
   } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicDrawer",
+    source: "useDrawerDrag"
+  });
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState();
   const {
@@ -285,7 +290,7 @@ export function useDrawerDrag(args) {
   function snapToCallback(payload) {
     if (payload.id === toValue(id)) {
       if (!toValue(isActive)) {
-        console.warn("Cannot snap to point when drawer is not open");
+        logWarning("Cannot snap to point when drawer is not open");
         return;
       } else {
         snapTo({

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

@@ -36,13 +36,16 @@ export function useDrawerSnap(args) {
     () => toValue(snapPoints),
     () => {
       const extended = toValue(preventDragClose) ? toValue(snapPoints) : [...toValue(snapPoints), 0];
-      const mapped = extended.reduce((acc, current) => {
-        const key = mapSnapPoint(current);
-        if (key || key === 0) {
-          acc[key] = current;
-        }
-        return acc;
-      }, {});
+      const mapped = extended.reduce(
+        (acc, current) => {
+          const key = mapSnapPoint(current);
+          if (key || key === 0) {
+            acc[key] = current;
+          }
+          return acc;
+        },
+        {}
+      );
       return mapped;
     }
   );
@@ -104,30 +107,54 @@ export function useDrawerSnap(args) {
       switch (position) {
         case "bottom": {
           const rect = toValue(wrapperRect);
-          if (reversedSnapPoint === 1) return drawerHeight.value;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerHeight.value;
+          }
+          if (reversedSnapPoint === 0) {
+            return 0;
+          }
+          if (!rect) {
+            return 0;
+          }
           return vh * reversedSnapPoint - rect.top;
         }
         case "top": {
           const rect = toValue(wrapperRect);
-          if (reversedSnapPoint === 1) return drawerHeight.value * -1;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerHeight.value * -1;
+          }
+          if (reversedSnapPoint === 0) {
+            return 0;
+          }
+          if (!rect) {
+            return 0;
+          }
           return vh * reversedSnapPoint - rect.bottom;
         }
         case "right": {
           const rect = toValue(wrapperRect);
-          if (reversedSnapPoint === 1) return drawerWidth.value;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerWidth.value;
+          }
+          if (reversedSnapPoint === 0) {
+            return 0;
+          }
+          if (!rect) {
+            return 0;
+          }
           return vw * reversedSnapPoint - rect.left;
         }
         case "left": {
           const rect = toValue(wrapperRect);
-          if (reversedSnapPoint === 1) return drawerWidth.value * -1;
-          if (reversedSnapPoint === 0) return 0;
-          if (!rect) return 0;
+          if (reversedSnapPoint === 1) {
+            return drawerWidth.value * -1;
+          }
+          if (reversedSnapPoint === 0) {
+            return 0;
+          }
+          if (!rect) {
+            return 0;
+          }
           return vw * reversedSnapPoint - rect.right;
         }
         default:
@@ -159,7 +186,9 @@ export function useDrawerSnap(args) {
       case "top":
       case "bottom": {
         const mappedSnapPointY = mapSnapPoint(snapPoint);
-        if (!mappedSnapPointY && mappedSnapPointY !== 0) return;
+        if (!mappedSnapPointY && mappedSnapPointY !== 0) {
+          return;
+        }
         const closestY = findClosestSnapPoint({
           draggedX,
           draggedY: mappedSnapPointY
@@ -176,7 +205,9 @@ export function useDrawerSnap(args) {
       case "left":
       case "right": {
         const mappedSnapPointX = mapSnapPoint(toValue(snapPoint));
-        if (!mappedSnapPointX && mappedSnapPointX !== 0) return;
+        if (!mappedSnapPointX && mappedSnapPointX !== 0) {
+          return;
+        }
         const closestX = findClosestSnapPoint({
           draggedX: mappedSnapPointX,
           draggedY
@@ -200,6 +231,9 @@ export function useDrawerSnap(args) {
       easing
     } = args2;
     const snapPoint = snapPointsMap.value[to];
+    if (!snapPoint && snapPoint !== 0) {
+      return;
+    }
     emitter.emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {
       case "bottom":

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

@@ -38,7 +38,9 @@ export function useDrawerState(id) {
     let state = drawerStateStore.value.find((entry) => {
       return entry.id === id;
     });
-    if (!state) state = addState(toValue(id));
+    if (!state) {
+      state = addState(toValue(id));
+    }
     return state;
   }
   function deleteState() {

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

@@ -1,16 +1,29 @@
 export function useDrawerUtils() {
   function clamp(value, from, to) {
     if (from > to) {
-      if (value > from) return value;
-      if (value < to) return to;
-      else return value;
+      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;
+      if (value < from) {
+        return value;
+      }
+      if (value > to) {
+        return to;
+      } else {
+        return value;
+      }
     } else {
-      if (value < to) return to;
-      else return value;
+      if (value < to) {
+        return to;
+      } else {
+        return value;
+      }
     }
   }
   return {

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

@@ -5,9 +5,14 @@ import {
 } from "vue";
 import { unrefElement } from "@vueuse/core";
 import WheelGestures, {} from "wheel-gestures";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useDrawerState } from "./useDrawerState.mjs";
 export function useDrawerWheel(args) {
   const { id, elRef, position, disabled } = args;
+  const { logError } = useMagicError({
+    prefix: "MagicDrawer",
+    source: "useDrawerWheel"
+  });
   const { initializeState } = useDrawerState(toValue(id));
   const state = initializeState();
   const { dragging, wheeling } = toRefs(state);
@@ -56,7 +61,7 @@ export function useDrawerWheel(args) {
       dispatchEvent(startEvent);
       wheeling.value = true;
     } catch (e) {
-      console.error(e);
+      logError(String(e));
       return destroyWheelListener();
     }
   }

package/dist/plugins/MagicError/index.d.ts

@@ -0,0 +1,5 @@
+import { useMagicError } from './src/composables/useMagicError.js';
+import { MagicError } from './src/class/MagicError.js';
+import type { UseMagicErrorReturn } from './src/composables/useMagicError.js';
+export { useMagicError, MagicError };
+export type { UseMagicErrorReturn };

package/dist/plugins/MagicError/index.mjs

@@ -0,0 +1,3 @@
+import { useMagicError } from "./src/composables/useMagicError.mjs";
+import { MagicError } from "./src/class/MagicError.mjs";
+export { useMagicError, MagicError };

package/dist/plugins/MagicError/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
+export default _default;

package/dist/plugins/MagicError/nuxt.mjs

@@ -0,0 +1,12 @@
+import { defineNuxtModule, addImports } from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicError"
+  },
+  setup() {
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicError",
+      name: "useMagicError"
+    });
+  }
+});

package/dist/plugins/MagicError/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@maas/magic-error",
+  "version": "0.0.0",
+  "description": "Vue composable for centralized error handling with custom error classes",
+  "keywords": [
+    "vue",
+    "composable",
+    "error",
+    "error-handling",
+    "typescript"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "build:types": "tsup --dts-only",
+    "dev": "tsup --watch",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/tsconfig": "^0.8.1"
+  }
+}

package/dist/plugins/MagicError/src/class/MagicError.d.ts

@@ -0,0 +1,6 @@
+export declare class MagicError extends Error {
+    readonly errorCode: string | number;
+    readonly timestamp: number;
+    readonly source: string;
+    constructor(message: string, errorCode: string | number, source: string, options?: ErrorOptions);
+}

package/dist/plugins/MagicError/src/class/MagicError.mjs

@@ -0,0 +1,15 @@
+export class MagicError extends Error {
+  errorCode;
+  timestamp;
+  source;
+  constructor(message, errorCode, source, options) {
+    super(message, options);
+    this.name = "MagicError";
+    this.errorCode = errorCode;
+    this.timestamp = Date.now();
+    this.source = source;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, MagicError);
+    }
+  }
+}

package/dist/plugins/MagicError/src/composables/useMagicError.d.ts

@@ -0,0 +1,18 @@
+import { MagicError } from '../class/MagicError.js';
+export interface UseMagicErrorArgs {
+    prefix?: string;
+    source?: string;
+}
+export interface ThrowErrorArgs {
+    message: string;
+    errorCode: string | number;
+    cause?: unknown;
+}
+export interface UseMagicErrorReturn {
+    assert<T>(value: T, args: ThrowErrorArgs): asserts value is NonNullable<T>;
+    throwError(args: ThrowErrorArgs): never;
+    logError(message: string): void;
+    logWarning(message: string): void;
+    MagicError: typeof MagicError;
+}
+export declare function useMagicError(args?: UseMagicErrorArgs): UseMagicErrorReturn;

package/dist/plugins/MagicError/src/composables/useMagicError.mjs

@@ -0,0 +1,31 @@
+import { MagicError } from "../class/MagicError.mjs";
+export function useMagicError(args = {}) {
+  const { prefix = "MagicError", source = "vue-equipment" } = args;
+  function logError(message) {
+    console.error(`[${prefix}]:`, message);
+  }
+  function logWarning(message) {
+    console.warn(`[${prefix}]:`, message);
+  }
+  function throwError(args2) {
+    const { message, errorCode, cause } = args2;
+    const mappedMessage = `[${prefix}]: ${message}`;
+    const error = new MagicError(mappedMessage, errorCode, source, {
+      cause
+    });
+    logError(message);
+    throw error;
+  }
+  function assert(value, args2) {
+    if (value === void 0 || value === null) {
+      throwError(args2);
+    }
+  }
+  return {
+    assert,
+    throwError,
+    logError,
+    logWarning,
+    MagicError
+  };
+}

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

@@ -10,7 +10,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -13,6 +13,9 @@
 
 <script setup>
 import { computed, inject, provide } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuChannel } from "../composables/private/useMenuChannel";
 import {
   MagicMenuInstanceId,
@@ -26,23 +29,32 @@ const { transition, id } = defineProps({
   id: { type: String, required: true },
   transition: { type: String, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
 const contentId = inject(MagicMenuContentId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuChannel must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuChannel must be nested inside MagicMenuView");
-}
-if (!id) {
-  throw new Error("MagicMenuChannel requires an id");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuChannel must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuChannel must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(id, {
+  message: "MagicMenuChannel requires an id",
+  errorCode: "id_required"
+});
 const { initializeState } = useMenuState(instanceId);
 const state = initializeState();
 if (!contentId) {
   if (state.options.debug) {
-    console.warn("MagicMenuChannel is not nested inside MagicMenuContent");
+    magicError.logWarning(
+      "MagicMenuChannel is not nested inside MagicMenuContent"
+    );
   }
 }
 const mappedId = computed(() => `magic-menu-channel-${id}`);

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

@@ -6,7 +6,7 @@ declare var __VLS_6: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_6) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuChannelProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuChannelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuChannelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuChannelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -70,6 +70,9 @@ import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuCallback } from "../composables/private/useMenuCallback";
 import { useMenuDOM } from "../composables/private/useMenuDOM";
 import { useMenuCursor } from "../composables/private/useMenuCursor";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { ModeTransitions } from "../utils/modeTransitionDefaults";
 import { ModeDelayMouseleave } from "../utils/modeDelayDefaults";
 import {
@@ -88,14 +91,20 @@ const { arrow = void 0, transition } = defineProps({
   transition: { type: String, required: false },
   referenceEl: { type: null, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicMenu",
+  source: "MagicMenu"
+});
 const instanceId = inject(MagicMenuInstanceId, void 0);
 const viewId = inject(MagicMenuViewId, void 0);
-if (!instanceId) {
-  throw new Error("MagicMenuContent must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuContent must be nested inside MagicMenuView");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuContent must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuContent must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
 const { getView, unselectView } = useMenuView(instanceId);
 const view = getView(viewId);
 const { initializeState } = useMenuState(instanceId);

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

@@ -14,7 +14,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_28) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuContentProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -41,7 +41,7 @@ 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 },
+  placement: { type: String, required: false },
   middleware: { type: Array, required: false },
   arrow: { type: Boolean, required: false },
   referenceEl: { type: null, required: false }

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

@@ -1,7 +1,8 @@
 import { type MaybeRef, type ComponentPublicInstance } from 'vue';
-import { type Placement, type Middleware } from '@floating-ui/vue';
+import { type Middleware } from '@floating-ui/vue';
+import type { MenuPlacement } from '../types/index.js';
 interface MagicMenuFloatProps {
-    placement?: Placement;
+    placement?: MenuPlacement;
     middleware?: Middleware[];
     arrow?: boolean;
     referenceEl?: MaybeRef<HTMLElement | ComponentPublicInstance>;
@@ -12,7 +13,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_3) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicMenuFloatProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuFloatProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuFloatProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {