@maas/vue-equipment 0.25.2 → 0.25.4

package/dist/nuxt/module.json

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

package/dist/plugins/MagicCommand/src/components/MagicCommandDrawer.vue

@@ -31,12 +31,13 @@ function afterLeaveCallback() {
 }
 
 const { close, isActive } = useCommandApi(commandId)
+const drawerApi = useDrawerApi(commandId)
 
 watch(isActive, (value) => {
   if (value) {
-    useDrawerApi(commandId).open()
+    drawerApi.open()
   } else {
-    useDrawerApi(commandId).close()
+    drawerApi.close()
   }
 })
 

package/dist/plugins/MagicCommand/src/components/MagicCommandModal.vue

@@ -31,12 +31,13 @@ function afterLeaveCallback() {
 }
 
 const { close, isActive } = useCommandApi(commandId)
+const modalApi = useModalApi(commandId)
 
 watch(isActive, (value) => {
   if (value) {
-    useModalApi(commandId).open()
+    modalApi.open()
   } else {
-    useModalApi(commandId).close()
+    modalApi.close()
   }
 })
 

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

@@ -1,78 +1,75 @@
 <template>
-  <transition :duration="5000">
-    <teleport
-      v-if="wrapperActive"
-      :to="mappedOptions.teleport?.target"
-      :disabled="mappedOptions.teleport?.disabled"
+  <teleport
+    v-if="wrapperActive"
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <div
+      ref="drawerRef"
+      class="magic-drawer"
+      :id="toValue(id)"
+      :class="[
+        toValue(props.class),
+        `-${mappedOptions.position}`,
+        {
+          '-dragging': dragging,
+          '-wheeling': wheeling,
+          '-disabled': disabled,
+        },
+      ]"
+      aria-modal="true"
     >
-      <div
-        ref="drawerRef"
-        class="magic-drawer"
-        :id="toValue(id)"
-        :class="[
-          toValue(props.class),
-          `-${mappedOptions.position}`,
-          {
-            '-dragging': dragging,
-            '-wheeling': wheeling,
-            '-disabled': disabled,
-          },
-        ]"
-        aria-modal="true"
+      <transition
+        v-if="mappedOptions.backdrop || !!$slots.backdrop"
+        :name="backdropTransition"
       >
+        <div
+          v-show="innerActive"
+          class="magic-drawer__backdrop"
+          @click.self="guardedClose"
+        >
+          <slot name="backdrop" />
+        </div>
+      </transition>
+
+      <div class="magic-drawer__wrapper" ref="wrapperRef">
         <transition
-          v-if="mappedOptions.backdrop || !!$slots.backdrop"
-          :name="backdropTransition"
+          :name="contentTransition"
+          @before-leave="onBeforeLeave"
+          @leave="onLeave"
+          @after-leave="onAfterLeave"
+          @before-enter="onBeforeEnter"
+          @enter="onEnter"
+          @after-enter="onAfterEnter"
         >
-          <div
-            v-show="innerActive"
-            class="magic-drawer__backdrop"
-            @click.self="guardedClose"
-          >
-            <slot name="backdrop" />
+          <div v-show="innerActive" class="magic-drawer__content">
+            <component
+              :is="mappedOptions.tag"
+              ref="elRef"
+              class="magic-drawer__drag"
+              :style="style"
+              @pointerdown="guardedPointerdown"
+              @click="guardedClick"
+            >
+              <component
+                v-if="component"
+                v-bind="props"
+                :is="component"
+                @close="guardedClose"
+              />
+              <slot v-else />
+              <div v-if="hasDragged" class="magic-drawer__overlay" />
+            </component>
           </div>
         </transition>
-
-        <div class="magic-drawer__wrapper" ref="wrapperRef">
-          <transition
-            :name="contentTransition"
-            @before-leave="onBeforeLeave"
-            @leave="onLeave"
-            @after-leave="onAfterLeave"
-            @before-enter="onBeforeEnter"
-            @enter="onEnter"
-            @after-enter="onAfterEnter"
-          >
-            <div v-show="innerActive" class="magic-drawer__content">
-              <component
-                :is="mappedOptions.tag"
-                ref="elRef"
-                class="magic-drawer__drag"
-                :style="style"
-                @pointerdown="guardedPointerdown"
-                @click="guardedClick"
-              >
-                <component
-                  v-if="component"
-                  v-bind="props"
-                  :is="component"
-                  @close="guardedClose"
-                />
-                <slot v-else />
-                <div v-if="hasDragged" class="magic-drawer__overlay" />
-              </component>
-            </div>
-          </transition>
-        </div>
       </div>
-    </teleport>
-  </transition>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
 import {
   ref,
-  toRefs,
   watch,
   computed,
   nextTick,
@@ -309,8 +306,8 @@ function saveOvershoot() {
 if (mappedOptions.keys && canClose) {
   for (const key of mappedOptions.keys) {
     onKeyStroke(key, (e) => {
-      e.preventDefault()
       close()
+      e.preventDefault()
     })
   }
 }

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

@@ -152,30 +152,30 @@ export function useDrawerDrag(args) {
       case "bottom":
       case "top":
         if (velocityY > toValue(threshold).momentum) {
-          const snapPointB = findClosestSnapPoint({
+          const snapPointY = findClosestSnapPoint({
             draggedX: 0,
             draggedY,
             direction: relDirectionY.value
           });
-          if (snapPointB === drawerHeight.value) {
+          if (snapPointY === drawerHeight.value) {
             shouldClose.value = true;
           } else {
-            interpolateTo.value = snapPointB;
+            interpolateTo.value = snapPointY;
           }
         }
         break;
       case "right":
       case "left":
         if (velocityX > toValue(threshold).momentum) {
-          const snapPointR = findClosestSnapPoint({
+          const snapPointX = findClosestSnapPoint({
             draggedX,
             draggedY,
             direction: relDirectionX.value
           });
-          if (snapPointR === drawerWidth.value) {
+          if (snapPointX === drawerWidth.value) {
             shouldClose.value = true;
           } else {
-            interpolateTo.value = snapPointR;
+            interpolateTo.value = snapPointX;
           }
         }
         break;
@@ -185,21 +185,29 @@ export function useDrawerDrag(args) {
     switch (position) {
       case "bottom":
         const newDraggedB = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        if (newDraggedB === draggedY.value)
+          break;
         relDirectionY.value = newDraggedB < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedB;
         break;
       case "top":
         const newDraggedT = clamp(y - originY.value, 0, toValue(overshoot));
+        if (newDraggedT === draggedY.value)
+          break;
         relDirectionY.value = newDraggedT < draggedY.value ? "below" : "above";
         draggedY.value = newDraggedT;
         break;
       case "right":
         const newDraggedR = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        if (newDraggedR === draggedX.value)
+          break;
         relDirectionX.value = newDraggedR < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedR;
         break;
       case "left":
         const newDraggedL = clamp(x - originX.value, 0, toValue(overshoot));
+        if (newDraggedL === draggedX.value)
+          break;
         relDirectionX.value = newDraggedL < draggedX.value ? "below" : "above";
         draggedX.value = newDraggedL;
         break;
@@ -291,7 +299,7 @@ export function useDrawerDrag(args) {
           snappedX.value = interpolateTo.value;
           break;
       }
-    } else if (hasDragged.value) {
+    } else {
       switch (position) {
         case "bottom":
         case "top":

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

@@ -238,9 +238,7 @@ export function useDrawerSnap(args) {
     switch (position) {
       case "bottom":
       case "top":
-        if (!toValue(draggedY2)) {
-          break;
-        } else {
+        if (!!toValue(draggedY2) || toValue(draggedY2) === 0) {
           closest = findClosestNumber({
             number: toValue(draggedY2),
             numbers: mappedSnapPoints.value,
@@ -250,9 +248,7 @@ export function useDrawerSnap(args) {
         }
       case "right":
       case "left":
-        if (!toValue(draggedX2)) {
-          break;
-        } else {
+        if (!!toValue(draggedX2) || toValue(draggedX2) === 0) {
           closest = findClosestNumber({
             number: toValue(draggedX2),
             numbers: mappedSnapPoints.value,

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

@@ -1,58 +1,56 @@
 <template>
-  <transition :duration="5000">
-    <teleport
-      v-if="wrapperActive"
-      :to="mappedOptions.teleport?.target"
-      :disabled="mappedOptions.teleport?.disabled"
+  <teleport
+    v-if="wrapperActive"
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <div
+      :is="mappedOptions.tag"
+      ref="modalRef"
+      class="magic-modal"
+      :id="toValue(id)"
+      :class="toValue(props.class)"
+      @click.self="close"
+      aria-modal="true"
     >
-      <div
-        :is="mappedOptions.tag"
-        ref="modalRef"
-        class="magic-modal"
-        :id="toValue(id)"
-        :class="toValue(props.class)"
-        @click.self="close"
-        aria-modal="true"
+      <transition
+        v-if="mappedOptions.backdrop || !!$slots.backdrop"
+        :name="mappedOptions.transitions?.backdrop"
       >
-        <transition
-          v-if="mappedOptions.backdrop || !!$slots.backdrop"
-          :name="mappedOptions.transitions?.backdrop"
+        <div
+          v-show="innerActive"
+          class="magic-modal__backdrop"
+          @click.self="close"
         >
-          <div
-            v-show="innerActive"
-            class="magic-modal__backdrop"
-            @click.self="close"
-          >
-            <slot name="backdrop" />
-          </div>
-        </transition>
-        <transition
-          :name="mappedOptions.transitions?.content"
-          @before-leave="onBeforeLeave"
-          @leave="onLeave"
-          @after-leave="onAfterLeave"
-          @before-enter="onBeforeEnter"
-          @enter="onEnter"
-          @after-enter="onAfterEnter"
+          <slot name="backdrop" />
+        </div>
+      </transition>
+      <transition
+        :name="mappedOptions.transitions?.content"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+        @before-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+      >
+        <component
+          :is="mappedOptions.tag"
+          v-show="innerActive"
+          class="magic-modal__content"
+          @click.self="close"
         >
           <component
-            :is="mappedOptions.tag"
-            v-show="innerActive"
-            class="magic-modal__content"
-            @click.self="close"
-          >
-            <component
-              v-if="component"
-              v-bind="props"
-              :is="component"
-              @close="close"
-            />
-            <slot v-else />
-          </component>
-        </transition>
-      </div>
-    </teleport>
-  </transition>
+            v-if="component"
+            v-bind="props"
+            :is="component"
+            @close="close"
+          />
+          <slot v-else />
+        </component>
+      </transition>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
@@ -151,8 +149,8 @@ function onClose() {
 if (mappedOptions.keys) {
   for (const key of mappedOptions.keys) {
     onKeyStroke(key, (e) => {
-      e.preventDefault()
       close()
+      e.preventDefault()
     })
   }
 }

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

@@ -13,6 +13,7 @@
       playsinline
       disablePictureInPicture
       :loop="props.loop"
+      :muted="muted"
     />
     <slot />
   </div>

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

@@ -64,7 +64,15 @@ export function usePlayerMediaApi(args) {
       const el = toValue(mediaRef);
       if (!el)
         return;
-      isPlaying ? el.play() : el.pause();
+      if (isPlaying) {
+        const playPromise = el.play();
+        if (playPromise !== void 0)
+          playPromise.catch((error) => {
+            console.warn("Playback error:", error);
+          });
+      } else {
+        el.pause();
+      }
     }
   );
   useEventListener(mediaRef, "timeupdate", () => {

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