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

package/dist/plugins/MagicCommand/src/composables/useMagicCommand.mjs

@@ -1,7 +1,12 @@
 import { computed, nextTick } from "vue";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandState } from "./private/useCommandState.mjs";
 import { useCommandItem } from "./private/useCommandItem.mjs";
 import { useCommandView } from "./private/useCommandView.mjs";
+const { throwError } = useMagicError({
+  prefix: "MagicCommand",
+  source: "useMagicCommand"
+});
 export function useMagicCommand(id) {
   const { initializeState } = useCommandState(id);
   const state = initializeState();
@@ -20,10 +25,16 @@ export function useMagicCommand(id) {
   function selectItem(args) {
     const { id: id2, viewId } = args;
     if (!viewId) {
-      throw new Error("viewId is required to select an item");
+      throwError({
+        message: "viewId is required to select an item",
+        errorCode: "view_id_required"
+      });
     }
     if (!id2) {
-      throw new Error("id is required to select an item");
+      throwError({
+        message: "id is required to select an item",
+        errorCode: "id_required"
+      });
     }
     const { selectItem: selectItem2 } = useCommandItem({
       instanceId: id2,
@@ -34,10 +45,16 @@ export function useMagicCommand(id) {
   function unselectItem(args) {
     const { id: id2, viewId } = args;
     if (!viewId) {
-      throw new Error("viewId is required to select an item");
+      throwError({
+        message: "viewId is required to select an item",
+        errorCode: "view_id_required"
+      });
     }
     if (!id2) {
-      throw new Error("id is required to select an item");
+      throwError({
+        message: "id is required to select an item",
+        errorCode: "id_required"
+      });
     }
     const { unselectItem: unselectItem2 } = useCommandItem({
       instanceId: id2,

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

@@ -1,6 +1,7 @@
 <template>
   <div
     class="magic-cookie-item"
+    :data-id="mappedId"
     :data-optional="item.optional"
     :data-active="item.active"
   >
@@ -10,6 +11,9 @@
 
 <script setup>
 import { computed, inject, provide, onBeforeUnmount, useId } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieItem } from "../composables/private/useCookieItem";
 import {
   MagicCookieInstanceId,
@@ -21,10 +25,15 @@ const { id, optional, maxAge } = defineProps({
   optional: { type: Boolean, required: false },
   maxAge: { type: Number, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicCookie",
+  source: "MagicCookieItem"
+});
 const instanceId = inject(MagicCookieInstanceId, void 0);
-if (!instanceId) {
-  throw new Error("MagicCookieItem must be nested inside MagicCookieProvider");
-}
+magicError.assert(instanceId, {
+  message: "MagicCookieItem must be nested inside MagicCookieProvider",
+  errorCode: "missing_instance_id"
+});
 const mappedId = computed(() => id ?? `magic-cookie-item-${useId()}`);
 const mappedActive = computed(() => item.active);
 const { initializeItem, deleteItem } = useCookieItem({

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

@@ -24,17 +24,23 @@
 <script setup>
 import { inject } from "vue";
 import { AutoSize } from "@maas/vue-autosize";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieState } from "../composables/private/useCookieState";
 import { useCookieCallback } from "../composables/private/useCookieCallback";
 import { MagicCookieInstanceId } from "../symbols";
 import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
 import "@maas/vue-equipment/utils/css/keyframes/auto-size-out.css";
+const magicError = useMagicError({
+  prefix: "MagicCookie",
+  source: "MagicCookieView"
+});
 const instanceId = inject(MagicCookieInstanceId, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicCookiePreferences must be used within a MagicCookieProvider"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicCookieView must be used within a MagicCookieProvider",
+  errorCode: "missing_instance_id"
+});
 const { initializeState } = useCookieState(instanceId);
 const state = initializeState();
 const {

package/dist/plugins/MagicCookie/src/composables/private/useCookieItem.mjs

@@ -1,8 +1,13 @@
 import { reactive, toValue } from "vue";
 import { useCookies } from "@vueuse/integrations/useCookies";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCookieState } from "./useCookieState.mjs";
 export function useCookieItem(args) {
   const { instanceId } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicCookie",
+    source: "useCookieItem"
+  });
   const { initializeState } = useCookieState(instanceId);
   const state = initializeState();
   function getBrowserCookie(id) {
@@ -67,7 +72,7 @@ export function useCookieItem(args) {
   function setItemCookie(id) {
     const item = getItem(id);
     if (!item) {
-      console.warn(`Item ${id} not found. Cookie cannot be set.`);
+      logWarning(`Item ${id} not found. Cookie cannot be set.`);
       return;
     }
     useCookies([id]).set(toValue(id), item.active, {

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

@@ -26,6 +26,9 @@
 <script setup>
 import { useTemplateRef, computed, toValue, toRefs } from "vue";
 import { createDefu } from "defu";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableDrag } from "../composables/private/useDraggableDrag";
 import { useDraggableState } from "../composables/private/useDraggableState";
 import { defaultOptions } from "../utils/defaultOptions";
@@ -36,6 +39,10 @@ const { id, options = {} } = defineProps({
   id: { type: null, required: true },
   options: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicDraggable",
+  source: "MagicDraggable"
+});
 const customDefu = createDefu((obj, key, value) => {
   if (key === "snapPoints") {
     obj[key] = value;
@@ -45,7 +52,10 @@ const customDefu = createDefu((obj, key, value) => {
 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");
+  magicError.throwError({
+    message: "MagicDraggable must have at least one snap point set",
+    errorCode: "missing_snap_point"
+  });
 }
 const elRef = useTemplateRef("el");
 const wrapperRef = useTemplateRef("wrapper");

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

@@ -24,6 +24,7 @@ import {
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
@@ -38,6 +39,10 @@ export function useDraggableDrag(args) {
     animation,
     scrollLock
   } = args;
+  const { logWarning } = useMagicError({
+    prefix: "MagicDraggable",
+    source: "useDraggableDrag"
+  });
   const { initializeState } = useDraggableState(toValue(id));
   const state = initializeState();
   const {
@@ -127,11 +132,11 @@ export function useDraggableDrag(args) {
     const childRect = toValue(elRect);
     const parentRect = toValue(wrapperRect);
     if (!childRect || !parentRect) {
-      console.warn("MagicDraggable could not calculate sizing");
+      logWarning("Could not calculate sizing");
       return;
     }
     if (childRect.width > parentRect.width || childRect.height > parentRect.height) {
-      console.warn("MagicDraggable is too small for its content");
+      logWarning("Element is too small for its content");
       return;
     }
   }
@@ -350,7 +355,7 @@ export function useDraggableDrag(args) {
     if (elRect.value && wrapperRect.value) {
       emitter.on("snapTo", snapToCallback);
       if (elRect.value.width > wrapperRect.value.width || elRect.value.height > wrapperRect.value.height) {
-        console.warn("MagicDraggable is too small for its content");
+        logWarning("is too small for its content");
         return;
       }
     }

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,7 +201,7 @@ 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;

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/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.5.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/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/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/MagicMenuItem.vue

@@ -18,6 +18,9 @@
 
 <script setup>
 import { computed, inject, provide, onBeforeUnmount, watch, useId } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMenuItem } from "../composables/private/useMenuItem";
 import { useMenuState } from "../composables/private/useMenuState";
 import { useMenuView } from "../composables/private/useMenuView";
@@ -33,18 +36,25 @@ const { id, disabled } = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
+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("MagicMenuItem must be nested inside MagicMenuProvider");
-}
-if (!viewId) {
-  throw new Error("MagicMenuItem must be nested inside MagicMenuView");
-}
-if (!contentId) {
-  throw new Error("MagicMenuItem must be nested inside MagicMenuContent");
-}
+magicError.assert(instanceId, {
+  message: "MagicMenuItem must be nested inside MagicMenuProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicMenuItem must be nested inside MagicMenuView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(contentId, {
+  message: "MagicMenuItem must be nested inside MagicMenuContent",
+  errorCode: "missing_content_id"
+});
 const mappedId = computed(() => id ?? `magic-menu-item-${useId()}`);
 const mappedActive = computed(() => item.active);
 const { initializeItem, deleteItem, selectItem, unselectItem } = useMenuItem({