@maas/vue-equipment 0.26.0 → 0.26.2

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.25.4"
+  "version": "0.26.1"
 }

package/dist/nuxt/module.mjs

@@ -4,7 +4,7 @@ const functions$1 = [
 	{
 		name: "MagicCommand",
 		"package": "plugins",
-		lastUpdated: 1708958249000,
+		lastUpdated: 1713883907000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicCommand/",
 		description: "command"
 	},
@@ -53,7 +53,7 @@ const functions$1 = [
 	{
 		name: "MagicScroll",
 		"package": "plugins",
-		lastUpdated: 1707310473000,
+		lastUpdated: 1713883907000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicScroll/",
 		description: "scroll"
 	},

package/dist/plugins/MagicCommand/demo/DefaultView.vue.d.ts

@@ -4,6 +4,7 @@ interface Props {
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<Props>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<Props>>>, {}, {}>;
 export default _default;
+
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToOption<T> = {
     [K in keyof T]-?: {} extends Pick<T, K> ? {

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

@@ -1,6 +1,6 @@
 import { useCommandApi } from './src/composables/useCommandApi.js';
 import { useCommandEmitter } from './src/composables/useCommandEmitter.js';
-import { CommandInstanceId, CommandOptionsKey } from './src/symbols.js';
+import { CommandInstanceId, CommandOptionsKey } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
 import type { CommandEvents } from './src/types/index.js';
 declare const MagicCommandPlugin: Plugin;

package/dist/plugins/MagicDrawer/nuxt.mjs

@@ -8,8 +8,9 @@ export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicDrawer"
   },
-  setup() {
+  setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    nuxt.options.build.transpile.push("wheel-gestures");
     addComponentsDir({
       path: resolver.resolve("src/components"),
       global: true,

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

@@ -75,12 +75,15 @@ import {
   nextTick,
   toValue,
   onBeforeMount,
+  onMounted,
   onBeforeUnmount,
+  onUnmounted,
   type Component,
   type MaybeRef,
 } from 'vue'
 import { createDefu } from 'defu'
 import { onKeyStroke, unrefElement } from '@vueuse/core'
+import { useMetaViewport } from '@maas/vue-equipment/composables'
 import { defaultOptions } from './../utils/defaultOptions'
 import { useDrawerApi } from './../composables/useDrawerApi'
 import { useDrawerCallback } from '../composables/private/useDrawerCallback'
@@ -149,6 +152,8 @@ const {
   unlockScroll,
   addScrollLockPadding,
   removeScrollLockPadding,
+  initialize,
+  destroy,
 } = drawerApi
 
 // Make sure this is reactive
@@ -210,6 +215,8 @@ const {
 
 useDrawerProgress({ id: props.id, elRef, drawerRef, position, overshoot })
 
+const { resetMetaViewport } = useMetaViewport()
+
 // Prevent animation on initial mount if the options call for it
 // To achieve this, the transition names are set to undefined
 const preventTransition = computed(() => {
@@ -332,10 +339,33 @@ onBeforeMount(async () => {
   }
 })
 
+onMounted(() => {
+  initialize()
+})
+
 // Reset state on unmount
 onBeforeUnmount(() => {
   close()
 })
+
+onUnmounted(() => {
+  if (mappedOptions.scrollLock) {
+    unlockScroll()
+    if (mappedOptions.scrollLockPadding) {
+      removeScrollLockPadding()
+    }
+  }
+
+  if (mappedOptions.focusTrap) {
+    releaseFocus()
+  }
+
+  if (mappedOptions.preventZoom) {
+    resetMetaViewport()
+  }
+
+  destroy()
+})
 </script>
 
 <style>

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

@@ -13,11 +13,11 @@ type UseDrawerCallbackArgs = {
     wasActive: Ref<boolean>;
 };
 export declare function useDrawerCallback(args: UseDrawerCallbackArgs): {
-    onBeforeEnter: (_el: Element) => void;
-    onEnter: (_el: Element) => void;
-    onAfterEnter: (_el: Element) => Promise<void>;
-    onBeforeLeave: (_el: Element) => void;
+    onBeforeEnter: (_el?: Element) => void;
+    onEnter: (_el?: Element) => void;
+    onAfterEnter: (_el?: Element) => Promise<void>;
+    onBeforeLeave: (_el?: Element) => void;
     onLeave: (_el: Element) => void;
-    onAfterLeave: (_el: Element) => void;
+    onAfterLeave: (_el?: Element) => void;
 };
 export {};

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts

@@ -20,5 +20,7 @@ export declare function useDrawerApi(id?: MaybeRef<string>, options?: UseDrawerA
     unlockScroll: () => void;
     addScrollLockPadding: () => void;
     removeScrollLockPadding: () => void;
+    initialize: () => void;
+    destroy: () => void;
 };
 export type UseDrawerApiReturn = ReturnType<typeof useDrawerApi>;

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.mjs

@@ -1,10 +1,4 @@
-import {
-  ref,
-  computed,
-  toValue,
-  onMounted,
-  onBeforeUnmount
-} from "vue";
+import { ref, computed, toValue } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
@@ -86,12 +80,12 @@ export function useDrawerApi(id, options) {
       (elem) => elem.style.paddingRight = ""
     );
   }
-  onMounted(() => {
+  function initialize() {
     useDrawerEmitter().on("progress", progressCallback);
-  });
-  onBeforeUnmount(() => {
+  }
+  function destroy() {
     useDrawerEmitter().off("progress", progressCallback);
-  });
+  }
   return {
     id: mappedId,
     isActive,
@@ -104,6 +98,8 @@ export function useDrawerApi(id, options) {
     lockScroll,
     unlockScroll,
     addScrollLockPadding,
-    removeScrollLockPadding
+    removeScrollLockPadding,
+    initialize,
+    destroy
   };
 }

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

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useMarqueeApi } from '../composables/useMarqueeApi'
 
 interface Props {
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
 const parentRef = ref<HTMLElement | undefined>(undefined)
 const childRef = ref<HTMLElement | undefined>(undefined)
 
-const { duplicates, playing, play, pause } = useMarqueeApi({
+const { duplicates, playing, play, pause, initialize } = useMarqueeApi({
   child: childRef,
   parent: parentRef,
   options: {
@@ -41,6 +41,10 @@ const { duplicates, playing, play, pause } = useMarqueeApi({
   },
 })
 
+onMounted(() => {
+  initialize()
+})
+
 defineExpose({
   playing,
   play,

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

@@ -17,6 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     speed: number;
 }, {}>, {
     default?(_: {}): any;
+    default?(_: {}): any;
 }>;
 export default _default;
 type __VLS_WithDefaults<P, D> = {

package/dist/plugins/MagicMarquee/src/composables/useMarqueeApi.d.ts

@@ -12,4 +12,5 @@ export declare function useMarqueeApi({ child, parent, options }: UseMarqueeApiP
     playing: import("vue").Ref<boolean>;
     play: () => void;
     pause: () => void;
+    initialize: () => Promise<void>;
 };

package/dist/plugins/MagicMarquee/src/composables/useMarqueeApi.mjs

@@ -1,4 +1,4 @@
-import { ref, onMounted, computed, nextTick, watch } from "vue";
+import { ref, computed, nextTick, watch } from "vue";
 import {
   useElementBounding,
   useElementSize,
@@ -51,11 +51,11 @@ export function useMarqueeApi({ child, parent, options }) {
       "running"
     );
   }
-  onMounted(() => {
+  async function initialize() {
     calculateDuplicates();
-    nextTick();
+    await nextTick();
     setCssVariables();
-  });
+  }
   watch(
     width,
     useThrottleFn(() => {
@@ -84,6 +84,7 @@ export function useMarqueeApi({ child, parent, options }) {
     duplicates,
     playing,
     play,
-    pause
+    pause,
+    initialize
   };
 }

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

@@ -60,6 +60,7 @@ import {
   nextTick,
   toValue,
   onBeforeUnmount,
+  onUnmounted,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -167,6 +168,19 @@ watch(isActive, async (value) => {
 onBeforeUnmount(() => {
   close()
 })
+
+onUnmounted(() => {
+  if (mappedOptions.scrollLock) {
+    unlockScroll()
+    if (mappedOptions.scrollLockPadding) {
+      removeScrollLockPadding()
+    }
+  }
+
+  if (mappedOptions.focusTrap) {
+    releaseFocus()
+  }
+})
 </script>
 
 <style>

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.d.ts

@@ -12,11 +12,11 @@ type UseModalCallbackArgs = {
     wrapperActive: Ref<boolean>;
 };
 export declare function useModalCallback(args: UseModalCallbackArgs): {
-    onBeforeEnter: (_el: Element) => void;
-    onEnter: (_el: Element) => void;
-    onAfterEnter: (_el: Element) => Promise<void>;
-    onBeforeLeave: (_el: Element) => void;
-    onLeave: (_el: Element) => void;
-    onAfterLeave: (_el: Element) => void;
+    onBeforeEnter: (_el?: Element) => void;
+    onEnter: (_el?: Element) => void;
+    onAfterEnter: (_el?: Element) => Promise<void>;
+    onBeforeLeave: (_el?: Element) => void;
+    onLeave: (_el?: Element) => void;
+    onAfterLeave: (_el?: Element) => void;
 };
 export {};

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

@@ -6,9 +6,9 @@ import MagicScrollCollision from './src/components/MagicScrollCollision.vue.js';
 import { useCollisionEmitter } from './src/composables/useCollisionEmitter.js';
 import { useScrollApi } from './src/composables/useScrollApi.js';
 import { useCollisionDetect } from './src/composables/useCollisionDetect.js';
-import { ScrollParentKey, ScrollPositionKey, ScrollProgressKey } from './src/symbols.js';
+import { ScrollParentKey, ScrollPositionKey, ScrollProgressKey } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
 declare const MagicScrollPlugin: Plugin;
 export { MagicScrollPlugin, MagicScrollProvider, MagicScrollScene, MagicScrollTransform, MagicScrollMotion, MagicScrollCollision, useCollisionEmitter, useScrollApi, useCollisionDetect, ScrollParentKey, ScrollPositionKey, ScrollProgressKey, };
-export * from './src/symbols.js';
+export * from './src/symbols/index.js';
 export type * from './src/types/index';

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

@@ -43,10 +43,17 @@
 </template>
 
 <script setup lang="ts">
-import { uuid } from '@maas/vue-equipment/utils'
+import {
+  toValue,
+  ref,
+  watch,
+  onBeforeMount,
+  onUnmounted,
+  type MaybeRef,
+} from 'vue'
 import { defu } from 'defu'
-import { toValue, ref, watch, type MaybeRef } from 'vue'
 import { onClickOutside, type MaybeElement } from '@vueuse/core'
+import { uuid } from '@maas/vue-equipment/utils'
 import { defaultOptions } from './../utils/defaultOptions'
 import { useToastApi } from './../composables/useToastApi'
 import { useToastCallback } from './../composables/private/useToastCallback'
@@ -69,7 +76,7 @@ interface MagicToastProps {
 
 const props = defineProps<MagicToastProps>()
 
-const { toasts, count, oldest } = useToastApi(props.id)
+const { toasts, count, oldest, initialize, destroy } = useToastApi(props.id)
 
 const mappedOptions = defu(props.options, defaultOptions)
 const isExpanded = ref(mappedOptions.layout?.expand === true)
@@ -111,10 +118,20 @@ function outsideClickCallback() {
 }
 
 onClickOutside(listRef, outsideClickCallback)
+
+// Lifecycle hooks and listeners
 watch(
   () => props.id,
   () => (teleportKey.value = uuid())
 )
+
+onBeforeMount(() => {
+  initialize()
+})
+
+onUnmounted(() => {
+  destroy(toValue(props.id))
+})
 </script>
 
 <style>

package/dist/plugins/MagicToast/src/composables/useToastApi.d.ts

@@ -7,5 +7,7 @@ export declare function useToastApi(id?: MaybeRef<string>): {
     add: (options: AddArgs) => Promise<string | undefined>;
     remove: (id: string) => void;
     clear: () => void;
+    initialize: () => import("./../types").ToastInstance | undefined;
+    destroy: (id: string) => void;
 };
 export type UseToastApiReturn = ReturnType<typeof useToastApi>;

package/dist/plugins/MagicToast/src/composables/useToastApi.mjs

@@ -1,11 +1,5 @@
 import { uuid } from "@maas/vue-equipment/utils";
-import {
-  computed,
-  onUnmounted,
-  onBeforeMount,
-  toValue,
-  markRaw
-} from "vue";
+import { computed, toValue, markRaw } from "vue";
 import { useToastStore } from "./private/useToastStore.mjs";
 export function useToastApi(id) {
   const { findInstance, addInstance, removeInstance } = useToastStore();
@@ -43,18 +37,14 @@ export function useToastApi(id) {
       return;
     instance.value.toasts = [];
   }
-  onBeforeMount(() => {
-    initialize();
-  });
-  onUnmounted(() => {
-    destroy(toValue(mappedId));
-  });
   return {
     toasts,
     count,
     oldest,
     add,
     remove,
-    clear
+    clear,
+    initialize,
+    destroy
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.26.0",
+  "version": "0.26.2",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",