@maas/vue-equipment 0.25.4 → 0.26.1

package/dist/nuxt/module.json

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

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/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/utils/css/transitions/clip.css

@@ -1,7 +1,7 @@
 .clip-enter-active {
-  animation: clip-in 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+  animation: clip-in var(--duration, 600ms) var(--easing, cubic-bezier(0.83, 0, 0.17, 1)) forwards;
 }
 
 .clip-leave-active {
-  animation: clip-out 0.6s cubic-bezier(0.83, 0, 0.17, 1) forwards;
+  animation: clip-out var(--duration, 600ms) var(--easing, cubic-bezier(0.83, 0, 0.17, 1)) forwards;
 }

package/dist/utils/css/transitions/fade-up.css

@@ -1,8 +1,7 @@
 .fade-up-enter-active {
-  animation: fade-up-in 300ms ease;
+  animation: fade-up-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .fade-up-leave-active {
-  animation: fade-up-out 300ms ease;
+  animation: fade-up-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
-

package/dist/utils/css/transitions/fade.css

@@ -1,8 +1,7 @@
 .fade-enter-active {
-  animation: fade-in 300ms ease;
+  animation: fade-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .fade-leave-active {
-  animation: fade-out 300ms ease;
+  animation: fade-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
-

package/dist/utils/css/transitions/slide-btt.css

@@ -1,8 +1,8 @@
 .slide-btt-enter-active {
-  animation: slide-btt-in 300ms ease;
+  animation: slide-btt-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .slide-btt-leave-active {
-  animation: slide-btt-out 300ms ease;
+  animation: slide-btt-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 

package/dist/utils/css/transitions/slide-ltr.css

@@ -1,7 +1,7 @@
 .slide-ltr-enter-active {
-  animation: slide-ltr-in 300ms ease;
+  animation: slide-ltr-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .slide-ltr-leave-active {
-  animation: slide-ltr-out 300ms ease;
-}
+  animation: slide-ltr-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
+}

package/dist/utils/css/transitions/slide-rtl.css

@@ -1,8 +1,7 @@
 .slide-rtl-enter-active {
-  animation: slide-rtl-in 300ms ease;
+  animation: slide-rtl-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .slide-rtl-leave-active {
-  animation: slide-rtl-out 300ms ease;
+  animation: slide-rtl-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
-

package/dist/utils/css/transitions/slide-ttb.css

@@ -1,9 +1,7 @@
 .slide-ttb-enter-active {
-  animation: slide-ttb-in 300ms ease;
+  animation: slide-ttb-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .slide-ttb-leave-active {
-  animation: slide-ttb-out 300ms ease;
+  animation: slide-ttb-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
-
-

package/dist/utils/css/transitions/zoom.css

@@ -1,7 +1,7 @@
 .zoom-enter-active {
-  animation: zoom-in 300ms ease;
+  animation: zoom-in var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
 }
 
 .zoom-leave-active {
-  animation: zoom-out 300ms ease;
-}
+  animation: zoom-out var(--duration, 300ms) var(--easing, cubic-bezier(0.45, 0, 0.55, 1));
+}

package/package.json

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