@maas/vue-equipment 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -11,7 +11,7 @@ const functions$1 = [
 	{
 		name: "MagicCommand",
 		"package": "plugins",
-		lastUpdated: 1739184559000,
+		lastUpdated: 1780493065000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicCommand/",
 		description: "MagicCommand is a flexible collection of components intended to build command palette style menus"
 	},

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

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import { provide } from "vue";
+import { provide, watch } from "vue";
 import { VuePrimitive } from "@maas/vue-primitive";
 import { useAccordionState } from "../composables/private/useAccordionState";
 import { MagicAccordionInstanceId } from "../symbols";
@@ -20,5 +20,12 @@ const { id, asChild, options } = defineProps({
 });
 const { initializeState } = useAccordionState(id);
 initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 provide(MagicAccordionInstanceId, id);
 </script>

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

@@ -1,7 +1,9 @@
+import { MagicModalProvider, MagicModalTeleport, MagicModalContent } from '@maas/vue-equipment/plugins/MagicModal';
+import { MagicDrawerProvider, MagicDrawerTeleport, MagicDrawerContent } from '@maas/vue-equipment/plugins/MagicDrawer';
 import { useMagicCommand } from './src/composables/useMagicCommand.js';
 import { MagicCommandInstanceId, MagicCommandProviderOptions } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
 import type { MagicCommandOptions, MagicCommandDrawerOptions, MagicCommandModalOptions } from './src/types/index.js';
 declare const MagicCommandPlugin: Plugin;
-export { MagicCommandPlugin, useMagicCommand, MagicCommandInstanceId, MagicCommandProviderOptions, };
+export { MagicCommandPlugin, useMagicCommand, MagicCommandInstanceId, MagicCommandProviderOptions, MagicModalProvider, MagicModalTeleport, MagicModalContent, MagicDrawerProvider, MagicDrawerTeleport, MagicDrawerContent, };
 export type { MagicCommandOptions, MagicCommandDrawerOptions, MagicCommandModalOptions, };

package/dist/plugins/MagicCommand/index.mjs

@@ -1,3 +1,13 @@
+import {
+  MagicModalProvider,
+  MagicModalTeleport,
+  MagicModalContent
+} from "@maas/vue-equipment/plugins/MagicModal";
+import {
+  MagicDrawerProvider,
+  MagicDrawerTeleport,
+  MagicDrawerContent
+} from "@maas/vue-equipment/plugins/MagicDrawer";
 import MagicCommandDrawer from "./src/components/MagicCommandDrawer.vue";
 import MagicCommandItem from "./src/components/MagicCommandItem.vue";
 import MagicCommandModal from "./src/components/MagicCommandModal.vue";
@@ -21,11 +31,23 @@ const MagicCommandPlugin = {
     app.component("MagicCommandItem", MagicCommandItem);
     app.component("MagicCommandDrawer", MagicCommandDrawer);
     app.component("MagicCommandModal", MagicCommandModal);
+    app.component("MagicModalProvider", MagicModalProvider);
+    app.component("MagicModalTeleport", MagicModalTeleport);
+    app.component("MagicModalContent", MagicModalContent);
+    app.component("MagicDrawerProvider", MagicDrawerProvider);
+    app.component("MagicDrawerTeleport", MagicDrawerTeleport);
+    app.component("MagicDrawerContent", MagicDrawerContent);
   }
 };
 export {
   MagicCommandPlugin,
   useMagicCommand,
   MagicCommandInstanceId,
-  MagicCommandProviderOptions
+  MagicCommandProviderOptions,
+  MagicModalProvider,
+  MagicModalTeleport,
+  MagicModalContent,
+  MagicDrawerProvider,
+  MagicDrawerTeleport,
+  MagicDrawerContent
 };

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

@@ -36,9 +36,7 @@ import {
   useTemplateRef
 } from "vue";
 import { useMagicKeys } from "@vueuse/core";
-import {
-  useMagicError
-} from "@maas/vue-equipment/plugins/MagicError";
+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";

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

@@ -2,9 +2,11 @@ import type { MagicCommandDrawerOptions } from '../types/index.js';
 interface MagicCommandDrawerProps {
     options?: MagicCommandDrawerOptions;
 }
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    layout?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,23 +1,21 @@
 <template>
-  <magic-drawer
-    :id="instanceId"
-    class="magic-command-drawer"
-    :options="options"
-    v-bind="$attrs"
-  >
-    <slot />
-  </magic-drawer>
+  <magic-drawer-provider :id="instanceId" :options="options">
+    <slot name="layout">
+      <magic-drawer-teleport>
+        <magic-drawer-backdrop />
+        <magic-drawer-content v-bind="$attrs">
+          <slot />
+        </magic-drawer-content>
+      </magic-drawer-teleport>
+    </slot>
+  </magic-drawer-provider>
 </template>
 
 <script setup>
 import { inject, watch, onBeforeUnmount } from "vue";
 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 { 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({

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

@@ -2,9 +2,11 @@ import type { MagicCommandDrawerOptions } from '../types/index.js';
 interface MagicCommandDrawerProps {
     options?: MagicCommandDrawerOptions;
 }
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    layout?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -24,9 +24,8 @@ import {
   useId,
   onMounted
 } from "vue";
-import {
-  useMagicError
-} from "@maas/vue-equipment/plugins/MagicError";
+import { onKeyStroke } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandItem } from "../composables/private/useCommandItem";
 import { useCommandState } from "../composables/private/useCommandState";
 import {
@@ -37,7 +36,6 @@ import {
   MagicCommandItemActive,
   MagicCommandItemDisabled
 } from "../symbols";
-import { onKeyStroke } from "@vueuse/core";
 const {
   id,
   initial = false,

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

@@ -2,9 +2,11 @@ import type { MagicCommandModalOptions } from '../types/index.js';
 interface MagicCommandProps {
     options?: MagicCommandModalOptions;
 }
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    layout?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,20 +1,20 @@
 <template>
-  <magic-modal
-    :id="instanceId"
-    class="magic-command-modal"
-    :options="options"
-    v-bind="$attrs"
-  >
-    <slot />
-  </magic-modal>
+  <magic-modal-provider :id="instanceId" :options="options">
+    <slot name="layout">
+      <magic-modal-teleport>
+        <magic-modal-backdrop />
+        <magic-modal-content v-bind="$attrs">
+          <slot />
+        </magic-modal-content>
+      </magic-modal-teleport>
+    </slot>
+  </magic-modal-provider>
 </template>
 
 <script setup>
 import { inject, watch, onBeforeUnmount } from "vue";
 import { useMagicModal } from "@maas/vue-equipment/plugins/MagicModal";
-import {
-  useMagicEmitter
-} from "@maas/vue-equipment/plugins/MagicEmitter";
+import { useMagicEmitter } from "@maas/vue-equipment/plugins/MagicEmitter";
 import { useMagicCommand } from "../composables/useMagicCommand";
 import { MagicCommandInstanceId } from "../symbols";
 defineOptions({

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

@@ -2,9 +2,11 @@ import type { MagicCommandModalOptions } from '../types/index.js';
 interface MagicCommandProps {
     options?: MagicCommandModalOptions;
 }
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_24: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_7) => any;
+    layout?: (props: typeof __VLS_7) => any;
+} & {
+    default?: (props: typeof __VLS_24) => any;
 };
 declare const __VLS_base: 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 __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 import type { MagicCommandOptions } from '../types/index.js';
 interface MagicCommandProviderProps {
     id: MaybeRef<string>;

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

@@ -23,6 +23,13 @@ const { id, options = {} } = defineProps({
 });
 const { initializeState } = useCommandState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
 const { x, y } = usePointer();

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

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 import type { MagicCommandOptions } from '../types/index.js';
 interface MagicCommandProviderProps {
     id: MaybeRef<string>;

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

@@ -4,12 +4,8 @@
 
 <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 { 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({

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

@@ -16,9 +16,8 @@
 <script setup>
 import { computed, inject, useTemplateRef, toValue, watch } from "vue";
 import { VuePrimitive } from "@maas/vue-primitive";
-import {
-  useMagicError
-} from "@maas/vue-equipment/plugins/MagicError";
+import { useMagicKeys } from "@vueuse/core";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandView } from "../composables/private/useCommandView";
 import { useCommandTrigger } from "../composables/private/useCommandTrigger";
 import {
@@ -28,7 +27,6 @@ import {
   MagicCommandItemDisabled,
   MagicCommandProviderOptions
 } from "../symbols";
-import { useMagicKeys } from "@vueuse/core";
 const {
   viewId,
   disabled = void 0,

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

@@ -6,9 +6,7 @@
 
 <script setup>
 import { computed, inject, onBeforeUnmount, provide, useId, watch } from "vue";
-import {
-  useMagicError
-} from "@maas/vue-equipment/plugins/MagicError";
+import { useMagicError } from "@maas/vue-equipment/plugins/MagicError";
 import { useCommandView } from "../composables/private/useCommandView";
 import {
   MagicCommandInstanceId,

package/dist/plugins/MagicCommand/src/composables/private/useCommandCallback.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 type UseCommandCallbackArgs = {
     instanceId: MaybeRef<string>;
     viewId: string;

package/dist/plugins/MagicCommand/src/composables/private/useCommandItem.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 import type { CommandItem } from '../../types/index.js';
 type UseCommandItemArgs = {
     instanceId: MaybeRef<string>;

package/dist/plugins/MagicCommand/src/composables/private/useCommandState.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 import type { CommandState, MagicCommandOptions } from '../../types/index.js';
 export declare function useCommandState(instanceId: MaybeRef<string>): {
     initializeState: (options?: MagicCommandOptions) => CommandState;

package/dist/plugins/MagicCommand/src/composables/private/useCommandState.mjs

@@ -1,5 +1,5 @@
-import { reactive, toValue, onScopeDispose } from "vue";
 import { createDefu } from "defu";
+import { reactive, toValue, onScopeDispose } from "vue";
 import { createStateStore } from "@maas/vue-equipment/utils";
 import { defaultOptions } from "../../utils/defaultOptions.mjs";
 const getCommandStateStore = createStateStore(

package/dist/plugins/MagicCommand/src/composables/private/useCommandTrigger.d.ts

@@ -1,5 +1,5 @@
-import { type ComputedRef, type MaybeRef, type Ref } from 'vue';
 import { VuePrimitive } from '@maas/vue-primitive';
+import type { ComputedRef, MaybeRef, Ref } from 'vue';
 import type { Action, Interaction } from '../../types/index.js';
 type UseCommandTriggerArgs = {
     instanceId: MaybeRef<string>;

package/dist/plugins/MagicCommand/src/composables/private/useCommandView.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 import type { CommandView } from '../../types/index.js';
 type InitializeViewArgs = Pick<CommandView, 'id' | 'parent' | 'initial'>;
 export declare function useCommandView(id: MaybeRef<string>): {

package/dist/plugins/MagicCommand/src/composables/useMagicCommand.d.ts

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import type { MaybeRef } from 'vue';
 interface SelectItemArgs {
     id: string;
     viewId: string;

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

@@ -1,6 +1,6 @@
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
 import type { MagicModalOptions } from '../../../MagicModal/index.js';
 import type { MagicDrawerOptions } from '../../../MagicDrawer/index.js';
-import type { RequireAllNested } from '@maas/vue-equipment/utils';
 export interface MagicCommandOptions {
     debug?: boolean;
     transition?: {

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

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { provide } from "vue";
+import { provide, watch } from "vue";
 import { useCookieState } from "../composables/private/useCookieState";
 import { MagicCookieInstanceId } from "../symbols";
 const { id, options } = defineProps({
@@ -14,5 +14,12 @@ const { id, options } = defineProps({
 });
 const { initializeState } = useCookieState(id);
 initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 provide(MagicCookieInstanceId, id);
 </script>

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

@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { useTemplateRef, computed, toValue, toRefs } from "vue";
+import { useTemplateRef, computed, toValue, toRefs, watch } from "vue";
 import {
   useMagicError
 } from "@maas/vue-equipment/plugins/MagicError";
@@ -47,6 +47,13 @@ const elRef = useTemplateRef("el");
 const wrapperRef = useTemplateRef("wrapper");
 const { initializeState } = useDraggableState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 if (!state.options.snapPoints.length) {
   magicError.throwError({
     message: "MagicDraggable must have at least one snap point set",

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

@@ -20,6 +20,13 @@ const { options = {}, id } = defineProps({
 });
 const { initializeState } = useDrawerState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 function open() {
   state.active = true;
 }

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

@@ -17,7 +17,7 @@
 </template>
 
 <script setup>
-import { useTemplateRef, onMounted } from "vue";
+import { useTemplateRef, onMounted, watch } from "vue";
 import { useMarqueeApi } from "../composables/private/useMarqueeApi";
 import { useMarqueeState } from "../composables/private/useMarqueeState";
 const { id, options } = defineProps({
@@ -26,6 +26,13 @@ const { id, options } = defineProps({
 });
 const { initializeState } = useMarqueeState(id);
 initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 const parentRef = useTemplateRef("parent");
 const childRef = useTemplateRef("child");
 const { duplicates, initialize } = useMarqueeApi({

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

@@ -31,6 +31,13 @@ const { id, options } = defineProps({
 const elRef = useTemplateRef("el");
 const { initializeState } = useMenuState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 const lastX = shallowRef(0);
 const lastY = shallowRef(0);
 const { x, y } = usePointer();

package/dist/plugins/MagicModal/src/components/MagicModalProvider.vue

@@ -19,6 +19,13 @@ const { options = {}, id } = defineProps({
 });
 const { initializeState } = useModalState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 function close() {
   state.active = false;
 }

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

@@ -45,6 +45,13 @@ const { id, options } = defineProps({
 });
 const { initializeState } = usePlayerState(id);
 const state = initializeState(options);
+watch(
+  () => options,
+  (value) => {
+    initializeState(value);
+  },
+  { deep: true }
+);
 const {
   playing,
   paused,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "Our Frontend Toolkit, Free and Open Source",
-  "version": "1.0.0-beta.60",
+  "version": "1.0.0-beta.62",
   "contributors": [
     {
       "name": "Robin Scholz",