@maas/vue-equipment 0.14.2 → 0.14.4

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -4,14 +4,14 @@ const functions$1 = [
 	{
 		name: "MagicConsent",
 		"package": "plugins",
-		lastUpdated: 1696320008000,
+		lastUpdated: 1705422905000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicConsent/",
 		description: "consent"
 	},
 	{
 		name: "MagicDrawer",
 		"package": "plugins",
-		lastUpdated: 1704735337000,
+		lastUpdated: 1705422905000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicDrawer/",
 		description: "drawer"
 	},
@@ -25,7 +25,7 @@ const functions$1 = [
 	{
 		name: "MagicModal",
 		"package": "plugins",
-		lastUpdated: 1695042962000,
+		lastUpdated: 1705422905000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicModal/",
 		description: "modal"
 	},
@@ -53,7 +53,7 @@ const functions$1 = [
 	{
 		name: "MagicToast",
 		"package": "plugins",
-		lastUpdated: 1695042962000,
+		lastUpdated: 1705422905000,
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicToast/",
 		description: "toast"
 	},

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

@@ -2,5 +2,7 @@ import type { Plugin } from 'vue';
 import MagicConsent from './src/components/MagicConsent.vue.js';
 import { useConsentApi } from './src/composables/useConsentApi.js';
 import { useConsentEmitter } from './src/composables/useConsentEmitter.js';
+import type { ConsentEvents } from './src/types.js';
 declare const MagicConsentPlugin: Plugin;
 export { MagicConsentPlugin, MagicConsent, useConsentApi, useConsentEmitter };
+export type { ConsentEvents };

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

@@ -2,5 +2,7 @@ import MagicDrawer from './src/components/MagicDrawer.vue.js';
 import { useDrawerApi } from './src/composables/useDrawerApi.js';
 import { useDrawerEmitter } from './src/composables/useDrawerEmitter.js';
 import type { Plugin } from 'vue';
+import type { DrawerEvents } from './src/types.js';
 declare const MagicDrawerPlugin: Plugin;
 export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };
+export type { DrawerEvents };

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

@@ -7,7 +7,7 @@
     >
       <component
         :is="mappedOptions.tag"
-        ref="drawer"
+        ref="drawerRef"
         class="magic-drawer"
         :id="toValue(id)"
         :class="[
@@ -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'
@@ -77,7 +81,6 @@ import { useDrawerApi } from './../composables/useDrawerApi'
 import { useDrawerCallback } from '../composables/private/useDrawerCallback'
 import { useDrawerDrag } from '../composables/private/useDrawerDrag'
 
-import type { RequireAll } from '@maas/vue-equipment/utils'
 import type { DrawerOptions } from './../types/index'
 
 import '@maas/vue-equipment/utils/css/animations/fade-in.css'
@@ -112,8 +115,9 @@ const props = withDefaults(defineProps<MagicDrawerProps>(), {
 })
 
 const elRef = ref<HTMLDivElement | undefined>(undefined)
-const drawer = ref<HTMLElement | undefined>(undefined)
-const drawerApi = useDrawerApi(props.id, { focusTarget: drawer })
+const drawerRef = ref<HTMLElement | undefined>(undefined)
+const drawerApi = useDrawerApi(props.id, { focusTarget: drawerRef })
+
 const mappedOptions: typeof defaultOptions = customDefu(
   props.options,
   defaultOptions
@@ -124,6 +128,7 @@ const { position, threshold } = mappedOptions
 
 const {
   isActive,
+  open,
   close,
   trapFocus,
   releaseFocus,
@@ -144,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,
@@ -162,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
@@ -201,7 +230,7 @@ function convertToPixels(value: string) {
 }
 
 function saveOvershoot() {
-  const element = unrefElement(drawer)
+  const element = unrefElement(drawerRef)
   const overshootVar = getComputedStyle(element!).getPropertyValue(
     '--magic-drawer-drag-overshoot'
   )
@@ -230,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/index.d.ts

@@ -2,5 +2,7 @@ import MagicModal from './src/components/MagicModal.vue.js';
 import { useModalApi } from './src/composables/useModalApi.js';
 import { useModalEmitter } from './src/composables/useModalEmitter.js';
 import type { Plugin } from 'vue';
+import type { ModalEvents } from './src/types.js';
 declare const MagicModalPlugin: Plugin;
 export { MagicModalPlugin, MagicModal, useModalEmitter, useModalApi };
+export type { ModalEvents };

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

@@ -7,7 +7,7 @@
     >
       <component
         :is="mappedOptions.tag"
-        ref="modal"
+        ref="modalRef"
         class="magic-modal"
         :id="toValue(id)"
         :class="toValue(props.class)"
@@ -60,6 +60,7 @@ import {
   watch,
   nextTick,
   toValue,
+  onBeforeUnmount,
   type Component,
   type MaybeRef,
 } from 'vue'
@@ -94,8 +95,8 @@ const props = withDefaults(defineProps<MagicModalProps>(), {
   options: () => defaultOptions,
 })
 
-const modal = ref<HTMLElement | undefined>(undefined)
-const modalApi = useModalApi(props.id, { focusTarget: modal })
+const modalRef = ref<HTMLElement | undefined>(undefined)
+const modalApi = useModalApi(props.id, { focusTarget: modalRef })
 const mappedOptions = customDefu(props.options, defaultOptions)
 
 const {
@@ -159,6 +160,11 @@ watch(isActive, async (value) => {
     onClose()
   }
 })
+
+// Reset state on unmount
+onBeforeUnmount(() => {
+  close()
+})
 </script>
 
 <style>

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

@@ -7,7 +7,7 @@
     class="magic-player-mux-popover"
   >
     <canvas
-      ref="canvas"
+      ref="canvasRef"
       :width="storyboard?.tile_width"
       :height="storyboard?.tile_height"
     />
@@ -42,7 +42,7 @@ const { instance } = usePlayerApi(props.id)
 const { seekedTime } = instance.value.controlsApi
 const { pixelRatio } = useDevicePixelRatio()
 
-const canvas = shallowRef() as Ref<HTMLCanvasElement>
+const canvasRef = shallowRef() as Ref<HTMLCanvasElement>
 const storyboard = shallowRef<MuxStoryboard | undefined>()
 let context: CanvasRenderingContext2D | undefined = undefined
 let image: HTMLImageElement | undefined = undefined
@@ -62,7 +62,7 @@ async function init() {
 
   try {
     storyboard.value = await fetch(
-      `https://image.mux.com/${props.playbackId}/storyboard.json`,
+      `https://image.mux.com/${props.playbackId}/storyboard.json`
     ).then((res) => res.json())
 
     if (!storyboard.value) throw new Error()
@@ -71,7 +71,7 @@ async function init() {
     image.src = storyboard.value.url
     await image.decode()
 
-    context = canvas.value.getContext('2d')!
+    context = canvasRef.value.getContext('2d')!
     context.drawImage(image, 0, 0)
   } catch (e: any) {
     console.error('Can not initialize timeine preview.', e)
@@ -107,7 +107,7 @@ function drawFrame(time: number) {
     0,
     0,
     tile_width,
-    tile_height,
+    tile_height
   )
 }
 

package/dist/plugins/MagicScroll/src/components/MagicScrollMotion.vue

@@ -1,11 +1,12 @@
 <template>
-  <div ref="el" class="m-scroll-motion">
+  <div ref="elRef" class="magic-scroll-motion">
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, inject, computed, onMounted, toRaw, watch } from 'vue'
+import { unrefElement } from '@vueuse/core'
 import { animate, type Easing } from 'motion'
 import { ScrollProgressKey } from '../symbols'
 
@@ -22,16 +23,16 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const animation = ref()
-const el = ref()
+const elRef = ref()
 
 const progress = inject(
   ScrollProgressKey,
-  computed(() => 0),
+  computed(() => 0)
 )
 
 function createAnimation(currentTime: number = 0) {
   if (!props.keyframes) return
-  animation.value = animate(toRaw(el.value), props.keyframes, {
+  animation.value = animate(unrefElement(elRef), props.keyframes, {
     duration: 1,
     easing: props.easing || 'linear',
     offset: props.offset,
@@ -53,6 +54,6 @@ watch(
   () => props.keyframes,
   () => {
     createAnimation(progress.value)
-  },
+  }
 )
 </script>

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue

@@ -1,21 +1,12 @@
 <template>
-  <div ref="sceneRef" class="magic-scroll-scene">
+  <div ref="elRef" class="magic-scroll-scene">
     <slot :map-value="mapValue" :progress="progress" />
   </div>
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  provide,
-  inject,
-  onMounted,
-  watch,
-  nextTick,
-  toRaw,
-  readonly,
-} from 'vue'
-import { useIntersectionObserver } from '@vueuse/core'
+import { ref, provide, inject, onMounted, watch, nextTick, readonly } from 'vue'
+import { unrefElement, useIntersectionObserver } from '@vueuse/core'
 import { mapValue } from '@maas/vue-equipment/utils'
 import { useScrollApi } from '../composables/useScrollApi'
 import {
@@ -39,12 +30,12 @@ const props = withDefaults(defineProps<Props>(), {
 const scrollPosition = inject(ScrollPositionKey, undefined)
 const scrollParent = inject(ScrollParentKey)
 
-const intersecting = ref()
-const sceneRef = ref<HTMLElement | undefined>(undefined)
+const elRef = ref<HTMLElement | undefined>(undefined)
 const progress = ref(0)
+const intersecting = ref()
 
 const { getCalculations, getProgress } = useScrollApi({
-  child: sceneRef,
+  child: elRef,
   parent: scrollParent,
   from: props.from,
   to: props.to,
@@ -70,7 +61,7 @@ watch(
 )
 
 useIntersectionObserver(
-  toRaw(sceneRef),
+  elRef,
   ([{ isIntersecting }]) => {
     intersecting.value = isIntersecting
     if (isIntersecting) {

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

@@ -2,5 +2,7 @@ import MagicToast from './src/components/MagicToast.vue.js';
 import { useToastApi } from './src/composables/useToastApi.js';
 import { useToastEmitter } from './src/composables/useToastEmitter.js';
 import type { Plugin } from 'vue';
+import type { ToastEvents } from './src/types.js';
 declare const MagicToastPlugin: Plugin;
 export { MagicToastPlugin, MagicToast, useToastApi, useToastEmitter };
+export type { ToastEvents };

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.2",
+  "version": "0.14.4",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.12",