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

package/dist/composables/useScrollTo/index.js

@@ -111,9 +111,13 @@ function useScrollTo() {
     easing = easeOutQuad
   }) {
     const parentEl = unwrapParent(parent);
-    if (!parentEl) return;
+    if (!parentEl) {
+      return;
+    }
     const targetEl = unwrapTarget(target, parentEl);
-    if (!targetEl) return;
+    if (!targetEl) {
+      return;
+    }
     disableScrollSnap(parentEl);
     const mappedOffset = { x: 0, y: 0, ...offset };
     const distance = getDistance(targetEl, parentEl);

package/dist/composables/useScrollTo/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../packages/composables/useScrollTo/index.ts"],"sourcesContent":["import {\n  unrefElement,\n  type MaybeComputedElementRef,\n  type MaybeElement,\n} from '@vueuse/core'\nimport { easeOutQuad } from '@maas/vue-equipment/utils'\n\nexport type ScrollToTarget =\n  | string\n  | Element\n  | MaybeElement\n  | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n  parent?: Element | Window\n  left: number\n  top: number\n  duration?: { x?: number; y?: number }\n  easing?: (t: number) => number\n  callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n  parent: Element | Window\n  left: number\n  top: number\n  speed: number\n}\n\nexport type scrollToTargetParams = {\n  target: ScrollToTarget\n  parent?: ScrollToParent\n  offset?: {\n    x?: number\n    y?: number\n  }\n  speed?: number\n  easing?: (t: number) => number\n}\n\n// Private functions\nfunction min(a: number, b: number) {\n  return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n  if (parent === window) {\n    return parent\n  } else if (typeof parent === 'string') {\n    return document.querySelector(parent) || document.documentElement\n  } else {\n    return (\n      unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n      document.documentElement\n    )\n  }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n  if (typeof target === 'string') {\n    const queryTarget = parentEl === window ? document : (parentEl as Element)\n    return queryTarget.querySelector(target)\n  } else {\n    return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n  }\n}\n\nfunction isHtmlElement(\n  parentEl: Window | SVGElement | Element\n): parentEl is HTMLElement {\n  return parentEl instanceof HTMLElement\n}\n\nfunction disableScrollSnap(parentEl: Window | SVGElement | Element) {\n  if (isHtmlElement(parentEl)) {\n    parentEl.style.scrollSnapType = 'none'\n  }\n}\n\nfunction reenableScrollSnap(parentEl: Window | SVGElement | Element) {\n  if (isHtmlElement(parentEl)) {\n    parentEl.style.scrollSnapType = ''\n  }\n}\n\n// Public composable\nexport function useScrollTo() {\n  function getScrollPosition(element: Element | Window): {\n    x: number\n    y: number\n  } {\n    if (element === window) {\n      return { x: window.scrollX, y: window.scrollY }\n    } else if (element instanceof Element) {\n      return { x: element.scrollLeft, y: element.scrollTop }\n    } else {\n      return { x: 0, y: 0 }\n    }\n  }\n\n  function getDistance(\n    target: Element,\n    parent?: Element | Window\n  ): { top: number; left: number } {\n    const rect = target.getBoundingClientRect()\n    const scrollEl =\n      parent || document.scrollingElement || document.documentElement\n\n    const scrollTop = scrollEl instanceof Window ? 0 : scrollEl.scrollTop\n    const scrollLeft = scrollEl instanceof Window ? 0 : scrollEl.scrollLeft\n\n    return {\n      top: rect.top + scrollTop,\n      left: rect.left + scrollLeft,\n    }\n  }\n\n  function getScrollDuration({\n    parent = document.documentElement || document.body,\n    left = 0,\n    top = 0,\n    speed = 500,\n  }: getScrollDurationParams) {\n    const currentPos = getScrollPosition(parent)\n    const distanceX = currentPos.x - left\n    const distanceY = currentPos.y - top\n    const durationX = Math.abs((distanceX / speed) * 100)\n    const durationY = Math.abs((distanceY / speed) * 100)\n\n    return { x: durationX, y: durationY }\n  }\n\n  function scrollTo({\n    parent = document.documentElement || document.body,\n    top,\n    left,\n    duration = {},\n    easing = easeOutQuad,\n    callback,\n  }: ScrollToParams) {\n    const startTime = Date.now()\n    const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n    if (fromX === top && fromY === left) {\n      if (callback) callback()\n      return\n    }\n\n    const mappedDuration = { x: 500, y: 500, ...duration }\n\n    const scroll = () => {\n      const currentTime = Date.now()\n\n      const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n      const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n      const easedTimeX = easing(timeX)\n      const easedTimeY = easing(timeY)\n\n      // We use the min of the two times to make sure we scroll at the same speed\n      const minTime = Math.min(easedTimeX, easedTimeY)\n\n      parent.scroll({\n        left: minTime * (left - fromX) + fromX,\n        top: minTime * (top - fromY) + fromY,\n      })\n\n      if (easedTimeX < 1 || easedTimeY < 1) {\n        requestAnimationFrame(scroll)\n      } else if (callback) {\n        callback()\n      }\n    }\n\n    requestAnimationFrame(scroll)\n  }\n\n  function scrollToTarget({\n    target,\n    parent = document.documentElement || document.body,\n    offset = {},\n    speed = 500,\n    easing = easeOutQuad,\n  }: scrollToTargetParams) {\n    const parentEl = unwrapParent(parent)\n    if (!parentEl) return\n    const targetEl = unwrapTarget(target, parentEl)\n    if (!targetEl) return\n\n    disableScrollSnap(parentEl)\n\n    const mappedOffset = { x: 0, y: 0, ...offset }\n    const distance = getDistance(targetEl, parentEl)\n    const leftDistance = distance.left - mappedOffset.x\n    const topDistance = distance.top - mappedOffset.y\n\n    const scrollDuration = getScrollDuration({\n      parent: parentEl,\n      left: leftDistance,\n      top: topDistance,\n      speed: speed,\n    })\n\n    scrollTo({\n      parent: parentEl,\n      left: leftDistance,\n      top: topDistance,\n      duration: scrollDuration,\n      easing: easing,\n      callback: () => reenableScrollSnap(parentEl),\n    })\n  }\n\n  return {\n    getScrollPosition,\n    getDistance,\n    getScrollDuration,\n    scrollTo,\n    scrollToTarget,\n  }\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,OAGK;AACP,SAAS,mBAAmB;AAsC5B,SAAS,IAAI,GAAW,GAAW;AACjC,SAAO,IAAI,IAAI,IAAI;AACrB;AAEA,SAAS,aAAa,QAAwB;AAC5C,MAAI,WAAW,QAAQ;AACrB,WAAO;AAAA,EACT,WAAW,OAAO,WAAW,UAAU;AACrC,WAAO,SAAS,cAAc,MAAM,KAAK,SAAS;AAAA,EACpD,OAAO;AACL,WACE,aAAa,MAA+C,KAC5D,SAAS;AAAA,EAEb;AACF;AAEA,SAAS,aAAa,QAAwB,UAA4B;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,cAAc,aAAa,SAAS,WAAY;AACtD,WAAO,YAAY,cAAc,MAAM;AAAA,EACzC,OAAO;AACL,WAAO,aAAa,MAA+C;AAAA,EACrE;AACF;AAEA,SAAS,cACP,UACyB;AACzB,SAAO,oBAAoB;AAC7B;AAEA,SAAS,kBAAkB,UAAyC;AAClE,MAAI,cAAc,QAAQ,GAAG;AAC3B,aAAS,MAAM,iBAAiB;AAAA,EAClC;AACF;AAEA,SAAS,mBAAmB,UAAyC;AACnE,MAAI,cAAc,QAAQ,GAAG;AAC3B,aAAS,MAAM,iBAAiB;AAAA,EAClC;AACF;AAGO,SAAS,cAAc;AAC5B,WAAS,kBAAkB,SAGzB;AACA,QAAI,YAAY,QAAQ;AACtB,aAAO,EAAE,GAAG,OAAO,SAAS,GAAG,OAAO,QAAQ;AAAA,IAChD,WAAW,mBAAmB,SAAS;AACrC,aAAO,EAAE,GAAG,QAAQ,YAAY,GAAG,QAAQ,UAAU;AAAA,IACvD,OAAO;AACL,aAAO,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,IACtB;AAAA,EACF;AAEA,WAAS,YACP,QACA,QAC+B;AAC/B,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WACJ,UAAU,SAAS,oBAAoB,SAAS;AAElD,UAAM,YAAY,oBAAoB,SAAS,IAAI,SAAS;AAC5D,UAAM,aAAa,oBAAoB,SAAS,IAAI,SAAS;AAE7D,WAAO;AAAA,MACL,KAAK,KAAK,MAAM;AAAA,MAChB,MAAM,KAAK,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,WAAS,kBAAkB;AAAA,IACzB,SAAS,SAAS,mBAAmB,SAAS;AAAA,IAC9C,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,EACV,GAA4B;AAC1B,UAAM,aAAa,kBAAkB,MAAM;AAC3C,UAAM,YAAY,WAAW,IAAI;AACjC,UAAM,YAAY,WAAW,IAAI;AACjC,UAAM,YAAY,KAAK,IAAK,YAAY,QAAS,GAAG;AACpD,UAAM,YAAY,KAAK,IAAK,YAAY,QAAS,GAAG;AAEpD,WAAO,EAAE,GAAG,WAAW,GAAG,UAAU;AAAA,EACtC;AAEA,WAAS,SAAS;AAAA,IAChB,SAAS,SAAS,mBAAmB,SAAS;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,WAAW,CAAC;AAAA,IACZ,SAAS;AAAA,IACT;AAAA,EACF,GAAmB;AACjB,UAAM,YAAY,KAAK,IAAI;AAC3B,UAAM,EAAE,GAAG,OAAO,GAAG,MAAM,IAAI,kBAAkB,MAAM;AAEvD,QAAI,UAAU,OAAO,UAAU,MAAM;AACnC,UAAI,SAAU,UAAS;AACvB;AAAA,IACF;AAEA,UAAM,iBAAiB,EAAE,GAAG,KAAK,GAAG,KAAK,GAAG,SAAS;AAErD,UAAM,SAAS,MAAM;AACnB,YAAM,cAAc,KAAK,IAAI;AAE7B,YAAM,QAAQ,IAAI,IAAI,cAAc,aAAa,eAAe,CAAC;AACjE,YAAM,QAAQ,IAAI,IAAI,cAAc,aAAa,eAAe,CAAC;AACjE,YAAM,aAAa,OAAO,KAAK;AAC/B,YAAM,aAAa,OAAO,KAAK;AAG/B,YAAM,UAAU,KAAK,IAAI,YAAY,UAAU;AAE/C,aAAO,OAAO;AAAA,QACZ,MAAM,WAAW,OAAO,SAAS;AAAA,QACjC,KAAK,WAAW,MAAM,SAAS;AAAA,MACjC,CAAC;AAED,UAAI,aAAa,KAAK,aAAa,GAAG;AACpC,8BAAsB,MAAM;AAAA,MAC9B,WAAW,UAAU;AACnB,iBAAS;AAAA,MACX;AAAA,IACF;AAEA,0BAAsB,MAAM;AAAA,EAC9B;AAEA,WAAS,eAAe;AAAA,IACtB;AAAA,IACA,SAAS,SAAS,mBAAmB,SAAS;AAAA,IAC9C,SAAS,CAAC;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,EACX,GAAyB;AACvB,UAAM,WAAW,aAAa,MAAM;AACpC,QAAI,CAAC,SAAU;AACf,UAAM,WAAW,aAAa,QAAQ,QAAQ;AAC9C,QAAI,CAAC,SAAU;AAEf,sBAAkB,QAAQ;AAE1B,UAAM,eAAe,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,OAAO;AAC7C,UAAM,WAAW,YAAY,UAAU,QAAQ;AAC/C,UAAM,eAAe,SAAS,OAAO,aAAa;AAClD,UAAM,cAAc,SAAS,MAAM,aAAa;AAEhD,UAAM,iBAAiB,kBAAkB;AAAA,MACvC,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAED,aAAS;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,KAAK;AAAA,MACL,UAAU;AAAA,MACV;AAAA,MACA,UAAU,MAAM,mBAAmB,QAAQ;AAAA,IAC7C,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../packages/composables/useScrollTo/index.ts"],"sourcesContent":["import {\n  unrefElement,\n  type MaybeComputedElementRef,\n  type MaybeElement,\n} from '@vueuse/core'\nimport { easeOutQuad } from '@maas/vue-equipment/utils'\n\nexport type ScrollToTarget =\n  | string\n  | Element\n  | MaybeElement\n  | MaybeComputedElementRef\n\nexport type ScrollToParent = ScrollToTarget | Window\n\nexport type ScrollToParams = {\n  parent?: Element | Window\n  left: number\n  top: number\n  duration?: { x?: number; y?: number }\n  easing?: (t: number) => number\n  callback?: () => void\n}\n\nexport type getScrollDurationParams = {\n  parent: Element | Window\n  left: number\n  top: number\n  speed: number\n}\n\nexport type scrollToTargetParams = {\n  target: ScrollToTarget\n  parent?: ScrollToParent\n  offset?: {\n    x?: number\n    y?: number\n  }\n  speed?: number\n  easing?: (t: number) => number\n}\n\n// Private functions\nfunction min(a: number, b: number) {\n  return a < b ? a : b\n}\n\nfunction unwrapParent(parent: ScrollToParent) {\n  if (parent === window) {\n    return parent\n  } else if (typeof parent === 'string') {\n    return document.querySelector(parent) || document.documentElement\n  } else {\n    return (\n      unrefElement(parent as MaybeComputedElementRef<MaybeElement>) ||\n      document.documentElement\n    )\n  }\n}\n\nfunction unwrapTarget(target: ScrollToTarget, parentEl: Element | Window) {\n  if (typeof target === 'string') {\n    const queryTarget = parentEl === window ? document : (parentEl as Element)\n    return queryTarget.querySelector(target)\n  } else {\n    return unrefElement(target as MaybeComputedElementRef<MaybeElement>)\n  }\n}\n\nfunction isHtmlElement(\n  parentEl: Window | SVGElement | Element\n): parentEl is HTMLElement {\n  return parentEl instanceof HTMLElement\n}\n\nfunction disableScrollSnap(parentEl: Window | SVGElement | Element) {\n  if (isHtmlElement(parentEl)) {\n    parentEl.style.scrollSnapType = 'none'\n  }\n}\n\nfunction reenableScrollSnap(parentEl: Window | SVGElement | Element) {\n  if (isHtmlElement(parentEl)) {\n    parentEl.style.scrollSnapType = ''\n  }\n}\n\n// Public composable\nexport function useScrollTo() {\n  function getScrollPosition(element: Element | Window): {\n    x: number\n    y: number\n  } {\n    if (element === window) {\n      return { x: window.scrollX, y: window.scrollY }\n    } else if (element instanceof Element) {\n      return { x: element.scrollLeft, y: element.scrollTop }\n    } else {\n      return { x: 0, y: 0 }\n    }\n  }\n\n  function getDistance(\n    target: Element,\n    parent?: Element | Window\n  ): { top: number; left: number } {\n    const rect = target.getBoundingClientRect()\n    const scrollEl =\n      parent || document.scrollingElement || document.documentElement\n\n    const scrollTop = scrollEl instanceof Window ? 0 : scrollEl.scrollTop\n    const scrollLeft = scrollEl instanceof Window ? 0 : scrollEl.scrollLeft\n\n    return {\n      top: rect.top + scrollTop,\n      left: rect.left + scrollLeft,\n    }\n  }\n\n  function getScrollDuration({\n    parent = document.documentElement || document.body,\n    left = 0,\n    top = 0,\n    speed = 500,\n  }: getScrollDurationParams) {\n    const currentPos = getScrollPosition(parent)\n    const distanceX = currentPos.x - left\n    const distanceY = currentPos.y - top\n    const durationX = Math.abs((distanceX / speed) * 100)\n    const durationY = Math.abs((distanceY / speed) * 100)\n\n    return { x: durationX, y: durationY }\n  }\n\n  function scrollTo({\n    parent = document.documentElement || document.body,\n    top,\n    left,\n    duration = {},\n    easing = easeOutQuad,\n    callback,\n  }: ScrollToParams) {\n    const startTime = Date.now()\n    const { x: fromX, y: fromY } = getScrollPosition(parent)\n\n    if (fromX === top && fromY === left) {\n      if (callback) callback()\n      return\n    }\n\n    const mappedDuration = { x: 500, y: 500, ...duration }\n\n    const scroll = () => {\n      const currentTime = Date.now()\n\n      const timeX = min(1, (currentTime - startTime) / mappedDuration.x)\n      const timeY = min(1, (currentTime - startTime) / mappedDuration.y)\n      const easedTimeX = easing(timeX)\n      const easedTimeY = easing(timeY)\n\n      // We use the min of the two times to make sure we scroll at the same speed\n      const minTime = Math.min(easedTimeX, easedTimeY)\n\n      parent.scroll({\n        left: minTime * (left - fromX) + fromX,\n        top: minTime * (top - fromY) + fromY,\n      })\n\n      if (easedTimeX < 1 || easedTimeY < 1) {\n        requestAnimationFrame(scroll)\n      } else if (callback) {\n        callback()\n      }\n    }\n\n    requestAnimationFrame(scroll)\n  }\n\n  function scrollToTarget({\n    target,\n    parent = document.documentElement || document.body,\n    offset = {},\n    speed = 500,\n    easing = easeOutQuad,\n  }: scrollToTargetParams) {\n    const parentEl = unwrapParent(parent)\n    if (!parentEl) {\n      return\n    }\n    const targetEl = unwrapTarget(target, parentEl)\n    if (!targetEl) {\n      return\n    }\n\n    disableScrollSnap(parentEl)\n\n    const mappedOffset = { x: 0, y: 0, ...offset }\n    const distance = getDistance(targetEl, parentEl)\n    const leftDistance = distance.left - mappedOffset.x\n    const topDistance = distance.top - mappedOffset.y\n\n    const scrollDuration = getScrollDuration({\n      parent: parentEl,\n      left: leftDistance,\n      top: topDistance,\n      speed: speed,\n    })\n\n    scrollTo({\n      parent: parentEl,\n      left: leftDistance,\n      top: topDistance,\n      duration: scrollDuration,\n      easing: easing,\n      callback: () => reenableScrollSnap(parentEl),\n    })\n  }\n\n  return {\n    getScrollPosition,\n    getDistance,\n    getScrollDuration,\n    scrollTo,\n    scrollToTarget,\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/nuxt/module.d.mts

@@ -1,10 +1,10 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import * as nuxt_schema from 'nuxt/schema';
 
 interface ModuleOptions {
     plugins?: string[] | boolean;
     composables?: string[] | boolean;
 }
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };
 export type { ModuleOptions };

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -43,6 +43,13 @@ const functions$1 = [
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicEmitter/",
 		description: "MagicEmitter is a wrapper around [mitt](https://github.com/developit/mitt)"
 	},
+	{
+		name: "MagicError",
+		"package": "plugins",
+		lastUpdated: 1754925604000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicError/",
+		description: "MagicError is a composable and a class used throughout Vue Equipment for error handling and logging"
+	},
 	{
 		name: "MagicMarquee",
 		"package": "plugins",
@@ -123,7 +130,7 @@ const functions$1 = [
 	{
 		name: "useScrollTo",
 		"package": "composables",
-		lastUpdated: 1734018465000,
+		lastUpdated: 1757314730000,
 		docs: "https://maas.egineering/vue-equipment/composables/useScrollTo/",
 		description: "Scroll to an element with consistent speed"
 	}

package/dist/plugins/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
 
 > plugins@1.0.0-beta.32 lint /Users/robinscholz/Repositories/@maas/vue-equipment/packages/plugins
-> eslint .
+> eslint . --fix
 

package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue

@@ -32,6 +32,9 @@ import { inject, computed } from "vue";
 import { defu } from "defu";
 import { AutoSize } from "@maas/vue-autosize";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useAccordionView } from "../composables/private/useAccordionView";
 import { useAccordionState } from "../composables/private/useAccordionState";
 import { useAccordionCallback } from "../composables/private/useAccordionCallback";
@@ -44,14 +47,20 @@ const { transition, animation } = defineProps({
   transition: { type: String, required: false },
   animation: { type: Object, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicAccordion",
+  source: "MagicAccordionContent"
+});
 const instanceId = inject(MagicAccordionInstanceId, void 0);
 const viewId = inject(MagicAccordionViewId, 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: "MagicAccordionContent must be nested inside MagicAccordionProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicAccordionContent must be nested inside MagicAccordionView",
+  errorCode: "missing_view_id"
+});
 const { initializeState } = useAccordionState(instanceId);
 const state = initializeState();
 const { getView } = useAccordionView(instanceId);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionContent.vue.d.ts

@@ -15,7 +15,7 @@ declare var __VLS_24: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_24) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicAccordionContentProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionContentProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAccordionContentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionContentProps> & 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/MagicAccordion/src/components/MagicAccordionProvider.vue.d.ts

@@ -9,7 +9,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicAccordionProviderProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAccordionProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionProviderProps> & 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/MagicAccordion/src/components/MagicAccordionTrigger.vue

@@ -17,6 +17,9 @@
 import { useTemplateRef, inject, computed, toValue } from "vue";
 import { Primitive } from "@maas/vue-primitive";
 import { onKeyStroke } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useAccordionTrigger } from "../composables/private/useAccordionTrigger";
 import { useAccordionState } from "../composables/private/useAccordionState";
 import { useAccordionView } from "../composables/private/useAccordionView";
@@ -32,32 +35,34 @@ const {
   trigger: { type: String, required: false },
   asChild: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicAccordion",
+  source: "MagicAccordion"
+});
 const elRef = useTemplateRef("el");
 const instanceId = inject(MagicAccordionInstanceId, void 0);
 const injectedViewId = inject(MagicAccordionViewId, void 0);
 const mappedViewId = computed(() => viewId ?? injectedViewId);
-if (!instanceId) {
-  throw new Error(
-    "MagicAccordionTrigger must be nested inside MagicAccordionProvider"
-  );
-}
-if (!mappedViewId.value) {
-  throw new Error(
-    "MagicAccordionTrigger must be nested inside MagicAccordionView or a viewId must be provided"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicAccordionTrigger must be nested inside MagicAccordionProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(mappedViewId.value, {
+  message: "MagicAccordionTrigger must be nested inside MagicAccordionView or a viewId must be provided",
+  errorCode: "missing_view_id"
+});
 const { initializeState } = useAccordionState(instanceId);
 const state = initializeState();
 const { getView } = useAccordionView(instanceId);
 const view = getView(mappedViewId.value);
 const mappedDisabled = computed(
-  () => toValue(disabled) || state.options.disabled
+  () => (toValue(disabled) || state.options.disabled) ?? false
 );
 const { onMouseenter, onClick, onKeypress } = useAccordionTrigger({
   elRef,
   instanceId,
+  mappedDisabled,
   viewId: mappedViewId.value,
-  disabled,
   trigger
 });
 onKeyStroke("Enter", onKeypress);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue.d.ts

@@ -12,7 +12,7 @@ declare var __VLS_12: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_12) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicAccordionTriggerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionTriggerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAccordionTriggerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionTriggerProps> & 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/MagicAccordion/src/components/MagicAccordionView.vue

@@ -12,6 +12,9 @@
 <script setup>
 import { computed, inject, onBeforeUnmount, provide, useId } from "vue";
 import { Primitive } from "@maas/vue-primitive";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import {
   MagicAccordionInstanceId,
   MagicAccordionViewActive,
@@ -23,12 +26,15 @@ const { id, active } = defineProps({
   asChild: { type: Boolean, required: false },
   active: { type: Boolean, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicAccordion",
+  source: "MagicAccordionView"
+});
 const instanceId = inject(MagicAccordionInstanceId, void 0);
-if (!instanceId) {
-  throw new Error(
-    "MagicAccordionView must be nested inside MagicAccordionProvider"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicAccordionView must be nested inside MagicAccordionProvider",
+  errorCode: "missing_instance_id"
+});
 const mappedId = computed(() => id ?? `magic-accordion-view-${useId()}`);
 const mappedActive = computed(() => view.active);
 const { initializeView, deleteView } = useAccordionView(instanceId);

package/dist/plugins/MagicAccordion/src/components/MagicAccordionView.vue.d.ts

@@ -9,7 +9,7 @@ declare var __VLS_7: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicAccordionViewProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionViewProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicAccordionViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicAccordionViewProps> & 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/MagicAccordion/src/composables/private/useAccordionTrigger.d.ts

@@ -1,11 +1,11 @@
-import { type MaybeRef, type Ref } from 'vue';
+import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
 import { Primitive } from '@maas/vue-primitive';
 import type { Interaction } from '../../types/index.js';
 interface UseAccordionTriggerArgs {
     instanceId: MaybeRef<string>;
     viewId: string;
     trigger: Interaction;
-    disabled: MaybeRef<boolean>;
+    mappedDisabled: ComputedRef<boolean>;
     elRef: Ref<InstanceType<typeof Primitive> | null>;
 }
 export declare function useAccordionTrigger(args: UseAccordionTriggerArgs): {

package/dist/plugins/MagicAccordion/src/composables/private/useAccordionTrigger.mjs

@@ -1,19 +1,19 @@
-import { toValue } from "vue";
+import {} from "vue";
 import { Primitive } from "@maas/vue-primitive";
 import { useFocus } from "@vueuse/core";
 import { useAccordionView } from "./useAccordionView.mjs";
 export function useAccordionTrigger(args) {
-  const { instanceId, viewId, elRef, disabled, trigger } = args;
+  const { instanceId, viewId, elRef, mappedDisabled, trigger } = args;
   const { selectView, unselectView, getView } = useAccordionView(instanceId);
   const view = getView(viewId);
   const { focused } = useFocus(elRef);
   function onMouseenter() {
-    if (!toValue(disabled) && trigger === "mouseenter") {
+    if (!mappedDisabled.value && trigger === "mouseenter") {
       selectView(viewId);
     }
   }
   function onClick() {
-    if (!toValue(disabled) && trigger === "click") {
+    if (!mappedDisabled.value && trigger === "click") {
       if (view?.active) {
         unselectView(viewId);
       } else {
@@ -22,7 +22,7 @@ export function useAccordionTrigger(args) {
     }
   }
   function onKeypress(e) {
-    if (focused.value && !toValue(disabled) && !view?.active) {
+    if (focused.value && !mappedDisabled.value && !view?.active) {
       e.preventDefault();
       e.stopPropagation();
       if (view?.active) {

package/dist/plugins/MagicCommand/src/components/MagicCommandContent.vue

@@ -36,6 +36,9 @@ import {
   useTemplateRef
 } from "vue";
 import { useMagicKeys } from "@vueuse/core";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandItem } from "../composables/private/useCommandItem";
 import { useCommandScroll } from "../composables/private/useCommandScroll";
 import { useCommandCallback } from "../composables/private/useCommandCallback";
@@ -52,17 +55,21 @@ import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
 defineOptions({
   inheritAttrs: false
 });
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandContent"
+});
 const instanceId = inject(MagicCommandInstanceId, void 0);
 const viewId = inject(MagicCommandViewId, void 0);
 const elRef = useTemplateRef("el");
-if (!instanceId) {
-  throw new Error(
-    "MagicCommandContent must be nested inside MagicCommandProvider"
-  );
-}
-if (!viewId) {
-  throw new Error("MagicCommandContent must be nested inside MagicCommandView");
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandContent must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicCommandContent must be nested inside MagicCommandView",
+  errorCode: "missing_view_id"
+});
 const { getView } = useCommandView(instanceId);
 const view = getView(viewId);
 const { initializeState } = useCommandState(instanceId);
@@ -94,13 +101,19 @@ const {
   scrollInFromTop
 } = useCommandScroll(elRef);
 const keys = useMagicKeys();
+const { logWarning } = magicError;
 const nextTimeout = ref(void 0);
 const prevTimeout = ref(void 0);
 const nextInterval = ref(void 0);
 const prevInterval = ref(void 0);
 if (options?.keyListener?.next) {
   for (const key of options.keyListener.next) {
-    watch(keys[key], (value) => {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
       if (isIdle.value) {
         return;
       }
@@ -121,7 +134,12 @@ if (options?.keyListener?.next) {
 }
 if (options?.keyListener?.prev) {
   for (const key of options.keyListener.prev) {
-    watch(keys[key], (value) => {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
       if (isIdle.value) {
         return;
       }

package/dist/plugins/MagicCommand/src/components/MagicCommandContent.vue.d.ts

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

package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue

@@ -15,6 +15,9 @@ import { useMagicDrawer } from "@maas/vue-equipment/plugins/MagicDrawer";
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins/MagicEmitter";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useMagicCommand } from "../composables/useMagicCommand";
 import { MagicCommandInstanceId } from "../symbols";
 defineOptions({
@@ -23,13 +26,16 @@ defineOptions({
 defineProps({
   options: { type: null, required: false }
 });
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandDrawer"
+});
 const instanceId = inject(MagicCommandInstanceId, "");
 const emitter = useMagicEmitter();
-if (!instanceId) {
-  throw new Error(
-    "MagicCommandDrawer must be nested inside MagicCommandProvider"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandDrawer must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
 function afterLeaveCallback(payload) {
   if (typeof payload === "string" && payload === instanceId) {
     close();

package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue.d.ts

@@ -6,7 +6,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandDrawerProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandDrawerProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandDrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandDrawerProps> & 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/MagicCommand/src/components/MagicCommandItem.vue

@@ -24,6 +24,9 @@ import {
   useId,
   onMounted
 } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandItem } from "../composables/private/useCommandItem";
 import { useCommandState } from "../composables/private/useCommandState";
 import {
@@ -44,18 +47,25 @@ const {
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommand"
+});
 const instanceId = inject(MagicCommandInstanceId, void 0);
 const viewId = inject(MagicCommandViewId, void 0);
 const contentId = inject(MagicCommandContentId, void 0);
-if (!instanceId) {
-  throw new Error("MagicCommandItem must be nested inside MagicCommandProvider");
-}
-if (!viewId) {
-  throw new Error("MagicCommandItem must be nested inside MagicCommandView");
-}
-if (!contentId) {
-  throw new Error("MagicCommandItem must be nested inside MagicCommandContent");
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandItem must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
+magicError.assert(viewId, {
+  message: "MagicCommandItem must be nested inside MagicCommandView",
+  errorCode: "missing_view_id"
+});
+magicError.assert(contentId, {
+  message: "MagicCommandItem must be nested inside MagicCommandContent",
+  errorCode: "missing_content_id"
+});
 const mappedId = computed(() => id ?? `magic-command-item-${useId()}`);
 const { initializeItem, deleteItem, selectItem } = useCommandItem({
   instanceId,

package/dist/plugins/MagicCommand/src/components/MagicCommandItem.vue.d.ts

@@ -10,7 +10,7 @@ declare var __VLS_1: {
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandItemProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<MagicCommandItemProps> & Readonly<{
     onClick?: ((event: MouseEvent) => any) | undefined;

package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue.d.ts

@@ -6,7 +6,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProps> & 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/MagicCommand/src/components/MagicCommandProvider.vue

@@ -8,6 +8,7 @@
 import { shallowRef, provide, watch, onBeforeUnmount } from "vue";
 import { useMagicKeys, usePointer } from "@vueuse/core";
 import { Primitive } from "@maas/vue-primitive";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { createDefu } from "defu";
 import { useCommandState } from "../composables/private/useCommandState";
 import { useMagicCommand } from "../composables/useMagicCommand";
@@ -49,9 +50,18 @@ watch([x, y], ([x2, y2]) => {
 const keys = useMagicKeys();
 const commandApi = useMagicCommand(id);
 const { open, close } = commandApi;
+const { logWarning } = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommandProvider"
+});
 if (mappedOptions.keyListener?.open) {
   for (const key of mappedOptions.keyListener.open) {
-    watch(keys[key], (value) => {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
       if (value) {
         open();
       }
@@ -60,7 +70,12 @@ if (mappedOptions.keyListener?.open) {
 }
 if (mappedOptions.keyListener?.close) {
   for (const key of mappedOptions.keyListener.close) {
-    watch(keys[key], (value) => {
+    const mappedKey = keys[key];
+    if (!mappedKey) {
+      logWarning(`The key \u201C${key}\u201D is not supported by MagicCommand`);
+      continue;
+    }
+    watch(mappedKey, (value) => {
       if (value) {
         close();
       }

package/dist/plugins/MagicCommand/src/components/MagicCommandProvider.vue.d.ts

@@ -9,7 +9,7 @@ declare var __VLS_7: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<MagicCommandProviderProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicCommandProviderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicCommandProviderProps> & 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/MagicCommand/src/components/MagicCommandRenderer.vue

@@ -4,18 +4,24 @@
 
 <script setup>
 import { inject, onBeforeUnmount, useTemplateRef } from "vue";
+import {
+  useMagicError
+} from "@maas/vue-equipment/plugins/MagicError";
 import {
   useMagicEmitter
 } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { MagicCommandInstanceId } from "./../symbols";
 import { useCommandState } from "../composables/private/useCommandState";
+const magicError = useMagicError({
+  prefix: "MagicCommand",
+  source: "MagicCommand"
+});
 const instanceId = inject(MagicCommandInstanceId, "");
 const emitter = useMagicEmitter();
-if (!instanceId) {
-  throw new Error(
-    "MagicCommandRenderer must be nested inside MagicCommandProvider"
-  );
-}
+magicError.assert(instanceId, {
+  message: "MagicCommandRenderer must be nested inside MagicCommandProvider",
+  errorCode: "missing_instance_id"
+});
 const elRef = useTemplateRef("el");
 const { initializeState } = useCommandState(instanceId);
 const state = initializeState();

package/dist/plugins/MagicCommand/src/components/MagicCommandRenderer.vue.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;