@maas/vue-equipment 0.24.5 → 0.24.7

package/dist/nuxt/module.json

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

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

@@ -12,7 +12,7 @@
         :class="[
           toValue(props.class),
           `-${mappedOptions.position}`,
-          { '-dragging': dragging },
+          { '-dragging': dragging, '-disabled': disabled },
         ]"
         aria-modal="true"
       >
@@ -23,7 +23,7 @@
           <div
             v-show="innerActive"
             class="magic-drawer__backdrop"
-            @click.self="closeIfAllowed"
+            @click.self="guardedClose"
           >
             <slot name="backdrop" />
           </div>
@@ -45,14 +45,14 @@
                 ref="elRef"
                 class="magic-drawer__drag"
                 :style="style"
-                @pointerdown="onPointerdown"
-                @click="onClick"
+                @pointerdown="guardedPointerdown"
+                @click="guardedClick"
               >
                 <component
                   v-if="component"
                   v-bind="props"
                   :is="component"
-                  @close="closeIfAllowed"
+                  @close="guardedClose"
                 />
                 <slot v-else />
                 <div v-if="hasDragged" class="magic-drawer__overlay" />
@@ -209,6 +209,15 @@ const contentTransition = computed(() => {
     : mappedOptions.transitions?.content
 })
 
+// Make sure this is reactive
+const disabled = computed(() => {
+  if (props.options.disabled === undefined) {
+    return defaultOptions.disabled
+  } else {
+    return props.options.disabled
+  }
+})
+
 // Private functions
 function convertToPixels(value: string) {
   const regex = /^(\d*\.?\d+)\s*(rem|px)$/
@@ -246,8 +255,20 @@ function onClose() {
 }
 
 // Public functions
-function closeIfAllowed() {
-  if (canClose) {
+function guardedPointerdown(event: PointerEvent) {
+  if (!disabled.value) {
+    onPointerdown(event)
+  }
+}
+
+function guardedClick(event: PointerEvent) {
+  if (!disabled.value) {
+    onClick(event)
+  }
+}
+
+function guardedClose() {
+  if (canClose && !disabled.value) {
     close()
   }
 }
@@ -297,5 +318,5 @@ onBeforeUnmount(() => {
 </script>
 
 <style>
-:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
+:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-z-index:999;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--magic-drawer-backdrop-color:rgba(0,0,0,.5);--magic-drawer-backdrop-filter:unset;--magic-drawer-content-overflow-x:hidden;--magic-drawer-content-overflow-y:hidden;--magic-drawer-enter-animation:slide-btt-in 300ms ease;--magic-drawer-leave-animation:slide-btt-out 300ms ease;--magic-drawer-drag-overshoot:4rem;--magic-drawer-padding:0px}.magic-drawer{--magic-drawer-drag-overshoot-x:0px;--magic-drawer-drag-overshoot-y:0px;align-items:var(--magic-drawer-align-items);background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:var(--magic-drawer-justify-content);padding:0;pointer-events:none;position:fixed;width:100%;z-index:var(--magic-drawer-z-index)}.magic-drawer.-bottom{--magic-drawer-drag-overshoot-y:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 0 var(--magic-drawer-drag-overshoot-y) 0}.magic-drawer.-bottom>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-top{--magic-drawer-enter-animation:slide-ttb-in 300ms ease;--magic-drawer-leave-animation:slide-ttb-out 300ms ease;--magic-drawer-align-items:flex-start;--magic-drawer-drag-overshoot-y:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:var(--magic-drawer-drag-overshoot-y) 0 0 0}.magic-drawer.-top>.magic-drawer__wrapper{height:calc(var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-right{--magic-drawer-enter-animation:slide-rtl-in 300ms ease;--magic-drawer-leave-animation:slide-rtl-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-end;--magic-drawer-drag-overshoot-x:var(--magic-drawer-drag-overshoot);--magic-drawer-padding:0 var(--magic-drawer-drag-overshoot-x) 0 0}.magic-drawer.-right>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer.-left{--magic-drawer-enter-animation:slide-ltr-in 300ms ease;--magic-drawer-leave-animation:slide-ltr-out 300ms ease;--magic-drawer-align-items:center;--magic-drawer-justify-content:flex-start;--magic-drawer-drag-overshoot-x:calc(var(--magic-drawer-drag-overshoot)*-1);--magic-drawer-padding:0 0 0 var(--magic-drawer-drag-overshoot-x)}.magic-drawer.-left>.magic-drawer__wrapper{width:calc(var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px))}.magic-drawer__wrapper{height:var(--magic-drawer-height);pointer-events:none;transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:var(--magic-drawer-width)}.magic-drawer__content{height:100%;max-height:100%;position:relative;width:100%}.magic-drawer__drag{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;height:100%;justify-content:var(--magic-drawer-justify-content);overflow-x:var(--magic-drawer-content-overflow-x);overflow-y:var(--magic-drawer-content-overflow-y);pointer-events:auto;position:relative;scroll-behavior:smooth;width:100%}dialog.magic-drawer__drag{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-drawer__drag::backdrop{background-color:transparent}.magic-drawer.-dragging .magic-drawer__drag{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.magic-drawer.-disabled .magic-drawer__drag{cursor:auto}.magic-drawer__drag>*{padding:var(--magic-drawer-padding)}.magic-drawer__overlay{inset:0;position:absolute;z-index:9999}.magic-drawer__backdrop{-webkit-backdrop-filter:var(--magic-drawer-backdrop-filter);backdrop-filter:var(--magic-drawer-backdrop-filter);background-color:var(--magic-drawer-backdrop-color);bottom:0;height:100%;left:0;pointer-events:auto;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-drawer.-disabled .magic-drawer__backdrop{pointer-events:none}.magic-drawer--content-enter-active{animation:var(--magic-drawer-enter-animation)}.magic-drawer--content-leave-active{animation:var(--magic-drawer-leave-animation)}.magic-drawer--backdrop-enter-active{animation:fade-in .3s ease}.magic-drawer--backdrop-leave-active{animation:fade-out .3s ease}
 </style>

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

@@ -283,7 +283,7 @@ export function useDrawerDrag(args) {
         snapTo({
           snapPoint: payload.snapPoint,
           interpolate: true,
-          duration: duration.value
+          duration: payload.duration || duration.value
         });
       }
     }

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

@@ -148,7 +148,7 @@ export function useDrawerSnap(args) {
     }
   }
   async function snapTo(args2) {
-    const { snapPoint, interpolate: interpolate2, duration = 200 } = args2;
+    const { snapPoint, interpolate: interpolate2, duration } = args2;
     await nextTick();
     switch (position) {
       case "top":
@@ -189,7 +189,7 @@ export function useDrawerSnap(args) {
     }
   }
   async function interpolateDragged(args2) {
-    const { to, duration = 200 } = args2;
+    const { to, duration = toValue(snap).duration } = args2;
     const snapPoint = snapPointsMap.value[to];
     useDrawerEmitter().emit("beforeSnap", { id: toValue(id), snapPoint });
     switch (position) {

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.d.ts

@@ -13,7 +13,7 @@ export declare function useDrawerApi(id?: MaybeRef<string>, options?: UseDrawerA
     }>;
     open: () => void;
     close: () => void;
-    snapTo: (snapPoint: SnapPoint) => void;
+    snapTo: (snapPoint: SnapPoint, duration: number) => void;
     trapFocus: () => void;
     releaseFocus: () => void;
     lockScroll: () => void;

package/dist/plugins/MagicDrawer/src/composables/useDrawerApi.mjs

@@ -37,8 +37,12 @@ export function useDrawerApi(id, options) {
   function close() {
     removeInstance(mappedId.value);
   }
-  function snapTo(snapPoint) {
-    useDrawerEmitter().emit("snapTo", { id: mappedId.value, snapPoint });
+  function snapTo(snapPoint, duration) {
+    useDrawerEmitter().emit("snapTo", {
+      id: mappedId.value,
+      snapPoint,
+      duration
+    });
   }
   function trapFocus() {
     if (focusTrap) {

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

@@ -32,6 +32,7 @@ export interface DrawerOptions {
         initial?: SnapPoint;
     };
     canClose?: boolean;
+    disabled?: boolean;
 }
 export type DrawerEvents = {
     beforeEnter: string;
@@ -47,6 +48,7 @@ export type DrawerEvents = {
     snapTo: {
         id: string;
         snapPoint: SnapPoint;
+        duration?: number;
     };
     afterSnap: {
         id: string;

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

@@ -3,7 +3,8 @@ const defaultOptions = {
   backdrop: true,
   focusTrap: {
     initialFocus: false,
-    setReturnFocus: false
+    setReturnFocus: false,
+    allowOutsideClick: true
   },
   scrollLock: true,
   scrollLockPadding: true,
@@ -32,6 +33,7 @@ const defaultOptions = {
     duration: 200,
     initial: 1
   },
-  canClose: true
+  canClose: true,
+  disabled: false
 };
 export { defaultOptions };

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

@@ -2,7 +2,8 @@ const defaultOptions = {
   backdrop: true,
   focusTrap: {
     initialFocus: false,
-    setReturnFocus: false
+    setReturnFocus: false,
+    allowOutsideClick: true
   },
   scrollLock: true,
   scrollLockPadding: true,

package/package.json

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