@maas/vue-equipment 0.14.1 → 0.14.3

package/dist/nuxt/module.json

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

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="[
@@ -77,7 +77,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 +111,8 @@ 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
@@ -201,7 +200,7 @@ function convertToPixels(value: string) {
 }
 
 function saveOvershoot() {
-  const element = unrefElement(drawer)
+  const element = unrefElement(drawerRef)
   const overshootVar = getComputedStyle(element!).getPropertyValue(
     '--magic-drawer-drag-overshoot'
   )

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

@@ -1,9 +1,9 @@
 import { type MaybeRef } from 'vue';
-import { defaultOptions } from '../../utils/defaultOptions.js';
+import { type DefaultOptions } from '../../utils/defaultOptions.js';
 type UseDrawerDragArgs = {
     elRef: MaybeRef<HTMLDivElement | undefined>;
-    position: MaybeRef<typeof defaultOptions.position>;
-    threshold: MaybeRef<typeof defaultOptions.threshold>;
+    position: MaybeRef<DefaultOptions['position']>;
+    threshold: MaybeRef<DefaultOptions['threshold']>;
     overshoot: MaybeRef<number>;
     close: () => void;
 };

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

@@ -114,6 +114,7 @@ export function useDrawerDrag(args) {
   }
   function resetStateAndListeners() {
     dragging.value = false;
+    shouldClose.value = false;
     cancelPointermove?.();
   }
   function resetDragged() {
@@ -126,7 +127,6 @@ export function useDrawerDrag(args) {
     }
   }
   function onPointerup(e) {
-    resetStateAndListeners();
     if (shouldClose.value) {
       close();
     } else {
@@ -155,6 +155,7 @@ export function useDrawerDrag(args) {
           break;
       }
     }
+    resetStateAndListeners();
     e.preventDefault();
   }
   function onPointermove(e) {

package/dist/plugins/MagicDrawer/src/utils/defaultOptions.d.ts

@@ -1,4 +1,5 @@
 import type { DrawerOptions } from '../types.js';
-import type { RequireAll } from '@maas/vue-equipment/utils';
-declare const defaultOptions: RequireAll<DrawerOptions>;
-export { defaultOptions };
+import type { RequireAllNested } from '@maas/vue-equipment/utils';
+declare const defaultOptions: RequireAllNested<DrawerOptions>;
+type DefaultOptions = typeof defaultOptions;
+export { defaultOptions, type 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)"
@@ -94,8 +94,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 {

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/dist/utils/index.d.mts

@@ -25,4 +25,8 @@ type RequireAll<T> = {
     [P in keyof T]-?: T[P];
 };
 
-export { type PickPartial, type RequireAll, type SlugifyOptions, clampValue, isIOS, mapValue, slugify, uniq, uuid };
+type RequireAllNested<T> = {
+    [P in keyof T]-?: RequireAllNested<T[P]>;
+};
+
+export { type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, isIOS, mapValue, slugify, uniq, uuid };

package/dist/utils/index.d.ts

@@ -25,4 +25,8 @@ type RequireAll<T> = {
     [P in keyof T]-?: T[P];
 };
 
-export { type PickPartial, type RequireAll, type SlugifyOptions, clampValue, isIOS, mapValue, slugify, uniq, uuid };
+type RequireAllNested<T> = {
+    [P in keyof T]-?: RequireAllNested<T[P]>;
+};
+
+export { type PickPartial, type RequireAll, type RequireAllNested, type SlugifyOptions, clampValue, isIOS, mapValue, slugify, uniq, uuid };

package/dist/utils/types/RequireAllNested.ts

@@ -0,0 +1,3 @@
+export type RequireAllNested<T> = {
+  [P in keyof T]-?: RequireAllNested<T[P]>
+}

package/dist/utils/types/index.ts

@@ -1,2 +1,3 @@
 export * from './PickPartial'
 export * from './RequireAll'
+export * from './RequireAllNested'

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