@maas/vue-equipment 0.36.1 → 0.36.3

package/dist/nuxt/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment/nuxt",
   "configKey": "vueEquipment",
-  "version": "0.36.0",
+  "version": "0.36.2",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "unknown"

package/dist/plugins/MagicAccordion/src/components/MagicAccordionTrigger.vue.d.ts

@@ -23,16 +23,7 @@ declare function __VLS_template(): {
             };
         }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, {
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             asChild: boolean;
             as: import("@maas/vue-primitive").ElementOrComponent;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {

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

@@ -76,7 +76,7 @@ const disabled = computed(() => {
   }
 })
 
-const { snapPoints, animation, initial, threshold } = mappedOptions
+const { snapPoints, animation, initial, threshold, scrollLock } = mappedOptions
 
 const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
   id: props.id,
@@ -86,6 +86,7 @@ const { onPointerdown, onClick, style, hasDragged } = useDraggableDrag({
   snapPoints,
   animation,
   initial,
+  scrollLock,
 })
 
 // Public functions

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.d.ts

@@ -8,6 +8,7 @@ type UseDraggableDragArgs = {
     snapPoints: MaybeRef<DefaultOptions['snapPoints']>;
     animation: MaybeRef<DefaultOptions['animation']>;
     initial: MaybeRef<DefaultOptions['initial']>;
+    scrollLock: MaybeRef<DefaultOptions['scrollLock']>;
 };
 export declare function useDraggableDrag(args: UseDraggableDragArgs): {
     initialize: () => Promise<void>;

package/dist/plugins/MagicDraggable/src/composables/private/useDraggableDrag.mjs

@@ -27,7 +27,16 @@ import { useDraggableSnap } from "./useDraggableSnap.mjs";
 import { useDraggableState } from "./useDraggableState.mjs";
 import { useDraggableScrollLock } from "./useDraggableScrollLock.mjs";
 export function useDraggableDrag(args) {
-  const { id, elRef, wrapperRef, threshold, snapPoints, initial, animation } = args;
+  const {
+    id,
+    elRef,
+    wrapperRef,
+    threshold,
+    snapPoints,
+    initial,
+    animation,
+    scrollLock
+  } = args;
   const { initializeState } = useDraggableState(toValue(id));
   const {
     dragStart,
@@ -271,8 +280,13 @@ export function useDraggableDrag(args) {
       });
     }
     resetStateAndListeners();
-    unlockScroll();
-    removeScrollLockPadding();
+    const scrollLockValue = toValue(scrollLock);
+    if (scrollLockValue) {
+      unlockScroll();
+      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
+        removeScrollLockPadding();
+      }
+    }
     guardedReleasePointerCapture({ event: e, element: elRef.value });
   }
   function onPointermove(e) {
@@ -311,8 +325,13 @@ export function useDraggableDrag(args) {
     }
   }
   function onPointerdown(e) {
-    lockScroll();
-    addScrollLockPadding();
+    const scrollLockValue = toValue(scrollLock);
+    if (scrollLockValue) {
+      lockScroll();
+      if (typeof scrollLockValue === "object" && scrollLockValue.padding) {
+        addScrollLockPadding();
+      }
+    }
     if (dragging.value) {
       return;
     } else {

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

@@ -28,6 +28,9 @@ export interface MagicDraggableOptions {
         snapPoint?: DraggableSnapPoint;
     };
     snapPoints?: DraggableSnapPoint[];
+    scrollLock?: boolean | {
+        padding: boolean;
+    };
     disabled?: boolean;
 }
 export interface DraggableState {

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

@@ -17,6 +17,7 @@ const defaultOptions = {
     snapPoint: "center"
   },
   snapPoints: [],
-  disabled: false
+  disabled: false,
+  scrollLock: { padding: true }
 };
 export { defaultOptions };

package/dist/plugins/MagicMenu/src/components/MagicMenuTrigger.vue.d.ts

@@ -23,16 +23,7 @@ declare function __VLS_template(): {
             };
         }>>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
-        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-            asChild: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            as: {
-                type: import("vue").PropType<import("@maas/vue-primitive").ElementOrComponent>;
-                default: string;
-            };
-        }>>, {
+        }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
             asChild: boolean;
             as: import("@maas/vue-primitive").ElementOrComponent;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {

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

@@ -19,8 +19,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-import { useIntersectionObserver } from '@vueuse/core'
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import {
+  useElementVisibility,
+  useEventListener,
+  defaultWindow,
+} from '@vueuse/core'
 import { usePlayerVideoApi } from '../composables/private/usePlayerVideoApi'
 import { usePlayerMediaApi } from '../composables/private/usePlayerMediaApi'
 import { usePlayerRuntime } from '../composables/private/usePlayerRuntime'
@@ -47,6 +51,8 @@ const props = withDefaults(defineProps<MagicPlayerProps>(), {
 const playerRef = ref<HTMLDivElement | undefined>(undefined)
 const videoRef = ref<HTMLVideoElement | undefined>(undefined)
 
+const isVisible = useElementVisibility(playerRef)
+
 const { playing, muted } = usePlayerMediaApi({
   id: props.id,
   mediaRef: videoRef,
@@ -65,13 +71,23 @@ const { onMouseenter, onMouseleave, play, pause } = usePlayerVideoApi({
   playerRef: playerRef,
 })
 
-useIntersectionObserver(
-  playerRef,
-  ([{ isIntersecting }]) => {
-    if (!isIntersecting && playing.value) {
-      pause()
-    } else if (isIntersecting && !playing.value && props.autoplay) {
+function onWindowFocus() {
+  if (isVisible.value && !playing.value && props.autoplay) {
+    play()
+  }
+}
+
+// Auto play when window is focused
+useEventListener(defaultWindow, 'focus', onWindowFocus)
+
+// Auto play when element is visible
+watch(
+  isVisible,
+  (value) => {
+    if (value && !playing.value && props.autoplay) {
       play()
+    } else if (!value && playing.value) {
+      pause()
     }
   },
   {

package/dist/plugins/MagicPlayer/src/composables/private/usePlayerMediaApi.mjs

@@ -60,10 +60,8 @@ export function usePlayerMediaApi(args) {
       if (!el) return;
       if (isPlaying) {
         const playPromise = el.play();
-        if (playPromise !== void 0)
-          playPromise.catch((error) => {
-            console.warn("Playback error:", error);
-          });
+        if (playPromise !== void 0) playPromise.catch((error) => {
+        });
       } else {
         el.pause();
       }

package/package.json

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