@maas/vue-equipment 0.14.3 → 0.14.4

package/dist/nuxt/module.json

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

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

@@ -19,7 +19,7 @@
       >
         <transition
           v-if="mappedOptions.backdrop || !!$slots.backdrop"
-          :name="mappedOptions.transitions?.backdrop"
+          :name="backdropTransition"
         >
           <div
             v-show="innerActive"
@@ -29,9 +29,10 @@
             <slot name="backdrop" />
           </div>
         </transition>
+
         <div class="magic-drawer__wrapper">
           <transition
-            :name="mappedOptions.transitions?.content"
+            :name="contentTransition"
             @before-leave="onBeforeLeave"
             @leave="onLeave"
             @after-leave="onAfterLeave"
@@ -65,8 +66,11 @@
 import {
   ref,
   watch,
+  computed,
   nextTick,
   toValue,
+  onBeforeMount,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -113,6 +117,7 @@ const props = withDefaults(defineProps<MagicDrawerProps>(), {
 const elRef = ref<HTMLDivElement | undefined>(undefined)
 const drawerRef = ref<HTMLElement | undefined>(undefined)
 const drawerApi = useDrawerApi(props.id, { focusTarget: drawerRef })
+
 const mappedOptions: typeof defaultOptions = customDefu(
   props.options,
   defaultOptions
@@ -123,6 +128,7 @@ const { position, threshold } = mappedOptions
 
 const {
   isActive,
+  open,
   close,
   trapFocus,
   releaseFocus,
@@ -143,6 +149,7 @@ const { onPointerdown, dragging, style } = useDrawerDrag({
 // Split isActive into two values to animate drawer smoothly
 const innerActive = ref(false)
 const wrapperActive = ref(false)
+const wasActive = ref(false)
 
 const {
   onBeforeEnter,
@@ -161,6 +168,29 @@ const {
   trapFocus,
   releaseFocus,
   wrapperActive,
+  wasActive,
+})
+
+// Surpress animation on initial mount if the options call for it
+// To achive this, the transition names are set to undefined
+const surpressTransition = computed(() => {
+  return (
+    mappedOptions.beforeMount.open &&
+    !mappedOptions.beforeMount.animate &&
+    !wasActive.value
+  )
+})
+
+const backdropTransition = computed(() => {
+  return surpressTransition.value
+    ? undefined
+    : mappedOptions.transitions?.backdrop
+})
+
+const contentTransition = computed(() => {
+  return surpressTransition.value
+    ? undefined
+    : mappedOptions.transitions?.content
 })
 
 // Handle state
@@ -229,6 +259,17 @@ watch(isActive, async (value) => {
 watch(innerActive, () => {
   saveOvershoot()
 })
+
+onBeforeMount(() => {
+  if (mappedOptions.beforeMount.open) {
+    open()
+  }
+})
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
 </script>
 
 <style>

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

@@ -10,6 +10,7 @@ type UseDrawerCallbackArgs = {
     trapFocus: () => void;
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;
+    wasActive: Ref<boolean>;
 };
 export declare function useDrawerCallback(args: UseDrawerCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;

package/dist/plugins/MagicDrawer/src/composables/private/useDrawerCallback.mjs

@@ -10,7 +10,8 @@ export function useDrawerCallback(args) {
     unlockScroll,
     trapFocus,
     releaseFocus,
-    wrapperActive
+    wrapperActive,
+    wasActive
   } = args;
   function onBeforeEnter(_el) {
     useDrawerEmitter().emit("beforeEnter", toValue(id));
@@ -30,6 +31,7 @@ export function useDrawerCallback(args) {
       await nextTick();
       trapFocus();
     }
+    wasActive.value = true;
   }
   function onBeforeLeave(_el) {
     useDrawerEmitter().emit("beforeLeave", toValue(id));

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

@@ -18,6 +18,10 @@ export type DrawerOptions = {
     };
     tag?: 'dialog' | 'div';
     keys?: string[] | false;
+    beforeMount?: {
+        open: boolean;
+        animate: boolean;
+    };
 };
 export type DrawerEvents = {
     beforeEnter: string;

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.mjs

@@ -17,6 +17,10 @@ const defaultOptions = {
     momentum: 1
   },
   tag: "dialog",
-  keys: ["Escape"]
+  keys: ["Escape"],
+  beforeMount: {
+    open: false,
+    animate: false
+  }
 };
 export { defaultOptions };

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

@@ -60,6 +60,7 @@ import {
   watch,
   nextTick,
   toValue,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -159,6 +160,11 @@ watch(isActive, async (value) => {
     onClose()
   }
 })
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
 </script>
 
 <style>

package/package.json

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