@maas/vue-equipment 0.13.1 → 0.14.1

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -8,6 +8,13 @@ const functions$1 = [
 		docs: "https://maas.egineering/vue-equipment/plugins/MagicConsent/",
 		description: "consent"
 	},
+	{
+		name: "MagicDrawer",
+		"package": "plugins",
+		lastUpdated: 1704735337000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicDrawer/",
+		description: "drawer"
+	},
 	{
 		name: "MagicMarquee",
 		"package": "plugins",

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

@@ -0,0 +1,6 @@
+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';
+declare const MagicDrawerPlugin: Plugin;
+export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };

package/dist/plugins/MagicDrawer/index.mjs

@@ -0,0 +1,9 @@
+import MagicDrawer from "./src/components/MagicDrawer.vue";
+import { useDrawerApi } from "./src/composables/useDrawerApi.mjs";
+import { useDrawerEmitter } from "./src/composables/useDrawerEmitter.mjs";
+const MagicDrawerPlugin = {
+  install: (app) => {
+    app.component("MagicDrawer", MagicDrawer);
+  }
+};
+export { MagicDrawerPlugin, MagicDrawer, useDrawerApi, useDrawerEmitter };

package/dist/plugins/MagicDrawer/nuxt.mjs

@@ -0,0 +1,27 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponentsDir,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicDrawer"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("src/components"),
+      global: true,
+      pathPrefix: false
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicDrawer",
+      name: "useDrawerApi"
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicDrawer",
+      name: "useDrawerEmitter"
+    });
+  }
+});

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

@@ -0,0 +1,237 @@
+<template>
+  <transition :duration="5000">
+    <teleport
+      v-if="wrapperActive"
+      :to="mappedOptions.teleport?.target"
+      :disabled="mappedOptions.teleport?.disabled"
+    >
+      <component
+        :is="mappedOptions.tag"
+        ref="drawer"
+        class="magic-drawer"
+        :id="toValue(id)"
+        :class="[
+          toValue(props.class),
+          `-${mappedOptions.position}`,
+          { '-dragging': dragging },
+        ]"
+        aria-modal="true"
+      >
+        <transition
+          v-if="mappedOptions.backdrop || !!$slots.backdrop"
+          :name="mappedOptions.transitions?.backdrop"
+        >
+          <div
+            v-show="innerActive"
+            class="magic-drawer__backdrop"
+            @click.self="close"
+          >
+            <slot name="backdrop" />
+          </div>
+        </transition>
+        <div class="magic-drawer__wrapper">
+          <transition
+            :name="mappedOptions.transitions?.content"
+            @before-leave="onBeforeLeave"
+            @leave="onLeave"
+            @after-leave="onAfterLeave"
+            @before-enter="onBeforeEnter"
+            @enter="onEnter"
+            @after-enter="onAfterEnter"
+          >
+            <div
+              ref="elRef"
+              v-show="innerActive"
+              class="magic-drawer__content"
+              @pointerdown="onPointerdown"
+              :style="style"
+            >
+              <component
+                v-if="component"
+                v-bind="props"
+                :is="component"
+                @close="close"
+              />
+              <slot v-else />
+            </div>
+          </transition>
+        </div>
+      </component>
+    </teleport>
+  </transition>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  watch,
+  nextTick,
+  toValue,
+  type Component,
+  type MaybeRef,
+} from 'vue'
+import { createDefu } from 'defu'
+import { onKeyStroke, unrefElement } from '@vueuse/core'
+import { defaultOptions } from './../utils/defaultOptions'
+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'
+import '@maas/vue-equipment/utils/css/animations/fade-out.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css'
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css'
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css'
+import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css'
+
+// Prevent keys array from being merged with default
+const customDefu = createDefu((obj, key, value) => {
+  if (key === 'keys') {
+    obj[key] = value
+    return true
+  }
+})
+
+interface MagicDrawerProps {
+  id: MaybeRef<string>
+  class?: MaybeRef<string>
+  component?: Component
+  props?: Record<string, unknown>
+  options?: DrawerOptions
+}
+
+const props = withDefaults(defineProps<MagicDrawerProps>(), {
+  options: () => defaultOptions,
+})
+
+const elRef = ref<HTMLDivElement | undefined>(undefined)
+const drawer = ref<HTMLElement | undefined>(undefined)
+const drawerApi = useDrawerApi(props.id, { focusTarget: drawer })
+const mappedOptions: typeof defaultOptions = customDefu(
+  props.options,
+  defaultOptions
+)
+
+const overshoot = ref(0)
+const { position, threshold } = mappedOptions
+
+const {
+  isActive,
+  close,
+  trapFocus,
+  releaseFocus,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+} = drawerApi
+
+const { onPointerdown, dragging, style } = useDrawerDrag({
+  position,
+  threshold,
+  overshoot,
+  elRef,
+  close,
+})
+
+// Split isActive into two values to animate drawer smoothly
+const innerActive = ref(false)
+const wrapperActive = ref(false)
+
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave,
+} = useDrawerCallback({
+  id: props.id,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive,
+})
+
+// Handle state
+async function onOpen() {
+  wrapperActive.value = true
+  await nextTick()
+  innerActive.value = true
+}
+
+function onClose() {
+  innerActive.value = false
+}
+
+function convertToPixels(value: string) {
+  const regex = /^(\d*\.?\d+)\s*(rem|px)$/
+
+  const match = value.match(regex)
+
+  if (!match) {
+    console.error(
+      `--magic-drawer-drag-overshoot (${value}) needs to be specified in px or rem`
+    )
+    return 0
+  }
+
+  const numericValue = parseFloat(match[1])
+  const unit = match[2]
+  const bodyFontSize = window.getComputedStyle(document.body).fontSize
+  const rootFontSize = parseFloat(bodyFontSize) || 16
+
+  switch (unit) {
+    case 'rem':
+      return numericValue * rootFontSize
+    case 'px':
+      return numericValue
+  }
+}
+
+function saveOvershoot() {
+  const element = unrefElement(drawer)
+  const overshootVar = getComputedStyle(element!).getPropertyValue(
+    '--magic-drawer-drag-overshoot'
+  )
+
+  overshoot.value = convertToPixels(overshootVar) || 0
+}
+
+if (mappedOptions.keys) {
+  for (const key of mappedOptions.keys) {
+    onKeyStroke(key, (e) => {
+      e.preventDefault()
+      close()
+    })
+  }
+}
+
+watch(isActive, async (value) => {
+  if (value) {
+    await onOpen()
+  } else {
+    onClose()
+  }
+})
+
+// Save overshoot, as soon as drawer apepars in in DOM
+watch(innerActive, () => {
+  saveOvershoot()
+})
+</script>
+
+<style>
+:root{--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-y:auto;--magic-drawer-handle-wrapper-height:2rem;--magic-drawer-handle-width:3rem;--magic-drawer-handle-height:0.375rem;--magic-drawer-handle-color:#d4d4d8;--magic-drawer-handle-border-radius:0.25rem;--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-drag-overshoot-x:0;--magic-drawer-drag-overshoot-y:0}.magic-drawer{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;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.-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.-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.-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__wrapper{transform:translate(var(--magic-drawer-drag-overshoot-x),var(--magic-drawer-drag-overshoot-y));width:100%}.magic-drawer__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-drawer-align-items);cursor:grab;display:flex;justify-content:var(--magic-drawer-justify-content);max-height:100%;overflow-y:var(--magic-drawer-content-overflow-y);position:relative;scroll-behavior:smooth;width:100%}.magic-drawer.-dragging .magic-drawer__content{cursor:grabbing}.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;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}
+</style>

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

@@ -0,0 +1,52 @@
+import { type Component, type MaybeRef } from 'vue';
+import type { DrawerOptions } from './../types/index';
+import '@maas/vue-equipment/utils/css/animations/fade-in.css';
+import '@maas/vue-equipment/utils/css/animations/fade-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-btt-in.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ltr-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-rtl-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-ttb-out.css';
+import '@maas/vue-equipment/utils/css/animations/slide-btt-out.css';
+interface MagicDrawerProps {
+    id: MaybeRef<string>;
+    class?: MaybeRef<string>;
+    component?: Component;
+    props?: Record<string, unknown>;
+    options?: DrawerOptions;
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicDrawerProps>, {
+    options: () => DrawerOptions;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicDrawerProps>, {
+    options: () => DrawerOptions;
+}>>>, {
+    options: DrawerOptions;
+}, {}>, {
+    backdrop?(_: {}): any;
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,22 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { DrawerOptions } from '../../types.js';
+type UseDrawerCallbackArgs = {
+    id: MaybeRef<string>;
+    mappedOptions: DrawerOptions;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    wrapperActive: Ref<boolean>;
+};
+export declare function useDrawerCallback(args: UseDrawerCallbackArgs): {
+    onBeforeEnter: (_el: Element) => void;
+    onEnter: (_el: Element) => void;
+    onAfterEnter: (_el: Element) => Promise<void>;
+    onBeforeLeave: (_el: Element) => void;
+    onLeave: (_el: Element) => void;
+    onAfterLeave: (_el: Element) => void;
+};
+export {};

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

@@ -0,0 +1,61 @@
+import { toValue, nextTick } from "vue";
+import { useDrawerEmitter } from "./../useDrawerEmitter.mjs";
+export function useDrawerCallback(args) {
+  const {
+    id,
+    mappedOptions,
+    addScrollLockPadding,
+    removeScrollLockPadding,
+    lockScroll,
+    unlockScroll,
+    trapFocus,
+    releaseFocus,
+    wrapperActive
+  } = args;
+  function onBeforeEnter(_el) {
+    useDrawerEmitter().emit("beforeEnter", toValue(id));
+  }
+  function onEnter(_el) {
+    useDrawerEmitter().emit("enter", toValue(id));
+  }
+  async function onAfterEnter(_el) {
+    useDrawerEmitter().emit("afterEnter", toValue(id));
+    if (mappedOptions.scrollLock) {
+      if (mappedOptions.scrollLockPadding) {
+        addScrollLockPadding();
+      }
+      lockScroll();
+    }
+    if (mappedOptions.focusTrap) {
+      await nextTick();
+      trapFocus();
+    }
+  }
+  function onBeforeLeave(_el) {
+    useDrawerEmitter().emit("beforeLeave", toValue(id));
+  }
+  function onLeave(_el) {
+    useDrawerEmitter().emit("leave", toValue(id));
+  }
+  function onAfterLeave(_el) {
+    useDrawerEmitter().emit("afterLeave", toValue(id));
+    if (mappedOptions.scrollLock) {
+      unlockScroll();
+      if (mappedOptions.scrollLockPadding) {
+        removeScrollLockPadding();
+      }
+    }
+    if (mappedOptions.focusTrap) {
+      releaseFocus();
+    }
+    wrapperActive.value = false;
+  }
+  return {
+    onBeforeEnter,
+    onEnter,
+    onAfterEnter,
+    onBeforeLeave,
+    onLeave,
+    onAfterLeave
+  };
+}

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

@@ -0,0 +1,15 @@
+import { type MaybeRef } from 'vue';
+import { defaultOptions } from '../../utils/defaultOptions.js';
+type UseDrawerDragArgs = {
+    elRef: MaybeRef<HTMLDivElement | undefined>;
+    position: MaybeRef<typeof defaultOptions.position>;
+    threshold: MaybeRef<typeof defaultOptions.threshold>;
+    overshoot: MaybeRef<number>;
+    close: () => void;
+};
+export declare function useDrawerDrag(args: UseDrawerDragArgs): {
+    style: import("vue").ComputedRef<string>;
+    dragging: import("vue").Ref<boolean>;
+    onPointerdown: (e: PointerEvent) => void;
+};
+export {};

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

@@ -0,0 +1,201 @@
+import {
+  ref,
+  computed,
+  onMounted,
+  watch,
+  onBeforeUnmount,
+  toValue
+} from "vue";
+import { useEventListener, unrefElement } from "@vueuse/core";
+import { interpolate } from "@maas/vue-equipment/utils";
+import { useDrawerEmitter } from "../useDrawerEmitter.mjs";
+export function useDrawerDrag(args) {
+  const { elRef, position, overshoot, threshold, close } = args;
+  const dragStart = ref(void 0);
+  const originX = ref(0);
+  const originY = ref(0);
+  const dragging = ref(false);
+  const shouldClose = ref(false);
+  const elRect = ref(void 0);
+  let cancelPointermove = void 0;
+  const draggedX = ref(0);
+  const draggedY = ref(0);
+  const style = computed(
+    () => `transform: translate(${draggedX.value}px, ${draggedY.value}px)`
+  );
+  function getSizes() {
+    elRect.value = unrefElement(elRef)?.getBoundingClientRect();
+  }
+  function checkPosition() {
+    switch (position) {
+      case "bottom":
+        if (draggedY.value > toValue(threshold).distance) {
+          shouldClose.value = true;
+        }
+        break;
+      case "top":
+        if (draggedY.value < toValue(threshold).distance * -1) {
+          shouldClose.value = true;
+        }
+        break;
+      case "right":
+        if (draggedX.value > toValue(threshold).distance) {
+          shouldClose.value = true;
+        }
+        break;
+      case "left":
+        if (draggedX.value < toValue(threshold).distance * -1) {
+          shouldClose.value = true;
+        }
+        break;
+    }
+  }
+  function checkMomentum({ x, y }) {
+    const elapsed = Date.now() - dragStart.value.getTime();
+    const velocityX = (x - originX.value) / elapsed;
+    const velocityY = (y - originY.value) / elapsed;
+    switch (position) {
+      case "bottom":
+        if (velocityY > toValue(threshold).momentum) {
+          shouldClose.value = true;
+        }
+        break;
+      case "top":
+        if (velocityY < toValue(threshold).momentum * -1) {
+          shouldClose.value = true;
+        }
+        break;
+      case "right":
+        if (velocityX > toValue(threshold).momentum) {
+          shouldClose.value = true;
+        }
+        break;
+      case "left":
+        if (velocityX < toValue(threshold).momentum * -1) {
+          shouldClose.value = true;
+        }
+        break;
+    }
+  }
+  function clamp(value, from, to) {
+    if (from > to) {
+      if (value > from)
+        return value;
+      if (value < to)
+        return to;
+      else
+        return value;
+    } else if (from < to) {
+      if (value < from)
+        return value;
+      if (value > to)
+        return to;
+      else
+        return value;
+    } else {
+      return value;
+    }
+  }
+  function setDragged({ x, y }) {
+    switch (position) {
+      case "bottom":
+        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot) * -1);
+        break;
+      case "top":
+        draggedY.value = clamp(y - originY.value, 0, toValue(overshoot));
+        break;
+      case "right":
+        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot) * -1);
+        break;
+      case "left":
+        draggedX.value = clamp(x - originX.value, 0, toValue(overshoot));
+        break;
+    }
+  }
+  function resetStateAndListeners() {
+    dragging.value = false;
+    cancelPointermove?.();
+  }
+  function resetDragged() {
+    draggedX.value = 0;
+    draggedY.value = 0;
+  }
+  function emitterCallback(event, _payload) {
+    if (event === "afterLeave") {
+      resetDragged();
+    }
+  }
+  function onPointerup(e) {
+    resetStateAndListeners();
+    if (shouldClose.value) {
+      close();
+    } else {
+      switch (position) {
+        case "bottom":
+        case "top":
+          interpolate({
+            from: draggedY.value,
+            to: 0,
+            duration: 50,
+            callback: (value) => {
+              draggedY.value = value;
+            }
+          });
+          break;
+        case "right":
+        case "left":
+          interpolate({
+            from: draggedX.value,
+            to: 0,
+            duration: 50,
+            callback: (value) => {
+              draggedX.value = value;
+            }
+          });
+          break;
+      }
+    }
+    e.preventDefault();
+  }
+  function onPointermove(e) {
+    shouldClose.value = false;
+    checkMomentum({ x: e.screenX, y: e.screenY });
+    setDragged({ x: e.screenX, y: e.screenY });
+    checkPosition();
+    e.preventDefault();
+  }
+  function onPointerdown(e) {
+    if (dragging.value) {
+      return;
+    } else {
+      dragging.value = true;
+    }
+    ;
+    e.target.setPointerCapture(e.pointerId);
+    useEventListener(document, "pointerup", onPointerup);
+    cancelPointermove = useEventListener(document, "pointermove", onPointermove);
+    originX.value = e.screenX;
+    originY.value = e.screenY;
+    dragStart.value = /* @__PURE__ */ new Date();
+    onPointermove(e);
+    e.preventDefault();
+  }
+  onMounted(() => {
+    getSizes();
+    useDrawerEmitter().on("*", emitterCallback);
+  });
+  watch(
+    () => unrefElement(elRef),
+    () => {
+      getSizes();
+    }
+  );
+  onBeforeUnmount(() => {
+    useDrawerEmitter().off("*", emitterCallback);
+  });
+  return {
+    style,
+    dragging,
+    onPointerdown
+  };
+}

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

@@ -0,0 +1,5 @@
+export declare function useDrawerStore(): {
+    drawerStore: import("vue").Ref<string[]>;
+    addInstance: (id: string) => void;
+    removeInstance: (id: string) => void;
+};

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

@@ -0,0 +1,15 @@
+import { ref } from "vue";
+let drawerStore = ref([]);
+export function useDrawerStore() {
+  function addInstance(id) {
+    drawerStore.value.push(id);
+  }
+  function removeInstance(id) {
+    drawerStore.value = drawerStore.value.filter((x) => x !== id);
+  }
+  return {
+    drawerStore,
+    addInstance,
+    removeInstance
+  };
+}

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

@@ -0,0 +1,19 @@
+import { type MaybeRef } from 'vue';
+import type { DrawerOptions } from '../types/index.js';
+import type { MaybeElementRef } from '@vueuse/core';
+export type useDrawerApiOptions = Pick<DrawerOptions, 'scrollLock'> & {
+    focusTarget: MaybeElementRef;
+};
+export declare function useDrawerApi(id?: MaybeRef<string>, options?: useDrawerApiOptions): {
+    id: import("vue").ComputedRef<string>;
+    isActive: import("vue").ComputedRef<boolean>;
+    open: () => void;
+    close: () => void;
+    trapFocus: () => void;
+    releaseFocus: () => void;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    addScrollLockPadding: () => void;
+    removeScrollLockPadding: () => void;
+};
+export type UseDrawerApiReturn = ReturnType<typeof useDrawerApi>;

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

@@ -0,0 +1,75 @@
+import { uuid } from "@maas/vue-equipment/utils";
+import { ref, computed, toValue } from "vue";
+import { defu } from "defu";
+import { useScrollLock } from "@vueuse/core";
+import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
+import { useDrawerStore } from "./private/useDrawerStore.mjs";
+const defaultOptions = {
+  focusTarget: void 0,
+  scrollLock: true
+};
+export function useDrawerApi(id, options) {
+  const positionFixedElements = ref([]);
+  const mappedId = computed(() => toValue(id) || uuid());
+  const mappedOptions = defu(options, defaultOptions);
+  const focusTrap = mappedOptions.focusTarget ? useFocusTrap(mappedOptions.focusTarget) : void 0;
+  const scrollLock = mappedOptions.scrollLock && typeof window !== "undefined" ? useScrollLock(document.body) : ref(false);
+  const { drawerStore, addInstance, removeInstance } = useDrawerStore();
+  const isActive = computed(() => drawerStore.value.includes(mappedId.value));
+  function open() {
+    addInstance(mappedId.value);
+  }
+  function close() {
+    removeInstance(mappedId.value);
+  }
+  function trapFocus() {
+    if (focusTrap) {
+      focusTrap.activate();
+    }
+  }
+  function releaseFocus() {
+    if (focusTrap) {
+      focusTrap.deactivate();
+    }
+  }
+  function lockScroll() {
+    scrollLock.value = true;
+  }
+  function unlockScroll() {
+    scrollLock.value = false;
+  }
+  function addScrollLockPadding() {
+    if (typeof window === "undefined")
+      return;
+    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
+    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+    document.body.style.paddingRight = "var(--scrollbar-width)";
+    positionFixedElements.value = [
+      ...document.body.getElementsByTagName("*")
+    ].filter(
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed"
+    );
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+    );
+  }
+  function removeScrollLockPadding() {
+    document.body.style.paddingRight = "";
+    document.body.style.removeProperty("--scrollbar-width");
+    positionFixedElements.value.forEach(
+      (elem) => elem.style.paddingRight = ""
+    );
+  }
+  return {
+    id: mappedId,
+    isActive,
+    open,
+    close,
+    trapFocus,
+    releaseFocus,
+    lockScroll,
+    unlockScroll,
+    addScrollLockPadding,
+    removeScrollLockPadding
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { DrawerEvents } from '../types.js';
+export declare function useDrawerEmitter(): {
+    on: {
+        <Key extends keyof DrawerEvents>(type: Key, handler: import("mitt").Handler<DrawerEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<DrawerEvents>): void;
+    };
+    off: {
+        <Key_1 extends keyof DrawerEvents>(type: Key_1, handler?: import("mitt").Handler<DrawerEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<DrawerEvents>): void;
+    };
+    emit: {
+        <Key_2 extends keyof DrawerEvents>(type: Key_2, event: DrawerEvents[Key_2]): void;
+        <Key_3 extends keyof DrawerEvents>(type: undefined extends DrawerEvents[Key_3] ? Key_3 : never): void;
+    };
+};

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

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useDrawerEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

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

@@ -0,0 +1,29 @@
+export type DrawerOptions = {
+    position?: 'top' | 'right' | 'bottom' | 'left';
+    backdrop?: boolean;
+    focusTrap?: boolean;
+    scrollLock?: boolean;
+    scrollLockPadding?: boolean;
+    teleport?: {
+        target?: string;
+        disabled?: boolean;
+    };
+    transitions?: {
+        content?: string;
+        backdrop?: string;
+    };
+    threshold?: {
+        distance?: number;
+        momentum?: number;
+    };
+    tag?: 'dialog' | 'div';
+    keys?: string[] | false;
+};
+export type DrawerEvents = {
+    beforeEnter: string;
+    enter: string;
+    afterEnter: string;
+    beforeLeave: string;
+    leave: string;
+    afterLeave: string;
+};

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

@@ -0,0 +1,4 @@
+import type { DrawerOptions } from '../types.js';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+declare const defaultOptions: RequireAll<DrawerOptions>;
+export { defaultOptions };

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

@@ -0,0 +1,22 @@
+const defaultOptions = {
+  position: "bottom",
+  backdrop: true,
+  focusTrap: true,
+  scrollLock: true,
+  scrollLockPadding: true,
+  teleport: {
+    target: "body",
+    disabled: false
+  },
+  transitions: {
+    content: "magic-drawer--content",
+    backdrop: "magic-drawer--backdrop"
+  },
+  threshold: {
+    distance: 150,
+    momentum: 1
+  },
+  tag: "dialog",
+  keys: ["Escape"]
+};
+export { defaultOptions };

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

@@ -10,9 +10,9 @@ interface MagicModalProps {
     options?: ModalOptions;
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
-    options: () => import("../../../../../packages/utils").RequireAll<ModalOptions>;
+    options: () => ModalOptions;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MagicModalProps>, {
-    options: () => import("../../../../../packages/utils").RequireAll<ModalOptions>;
+    options: () => ModalOptions;
 }>>>, {
     options: ModalOptions;
 }, {}>, {

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { ModalOptions } from '../../types.js';
-type Args = {
+type UseModalCallbackArgs = {
     id: MaybeRef<string>;
     mappedOptions: ModalOptions;
     addScrollLockPadding: () => void;
@@ -11,12 +11,12 @@ type Args = {
     releaseFocus: () => void;
     wrapperActive: Ref<boolean>;
 };
-export declare function useModalCallback({ id, mappedOptions, addScrollLockPadding, removeScrollLockPadding, lockScroll, unlockScroll, trapFocus, releaseFocus, wrapperActive, }: Args): {
+export declare function useModalCallback(args: UseModalCallbackArgs): {
     onBeforeEnter: (_el: Element) => void;
     onEnter: (_el: Element) => void;
-    onAfterEnter: (el: Element) => Promise<void>;
+    onAfterEnter: (_el: Element) => Promise<void>;
     onBeforeLeave: (_el: Element) => void;
-    onLeave: (el: Element) => void;
+    onLeave: (_el: Element) => void;
     onAfterLeave: (_el: Element) => void;
 };
 export {};

package/dist/plugins/MagicModal/src/composables/private/useModalCallback.mjs

@@ -1,23 +1,24 @@
 import { toValue, nextTick } from "vue";
 import { useModalEmitter } from "./../useModalEmitter.mjs";
-export function useModalCallback({
-  id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive
-}) {
+export function useModalCallback(args) {
+  const {
+    id,
+    mappedOptions,
+    addScrollLockPadding,
+    removeScrollLockPadding,
+    lockScroll,
+    unlockScroll,
+    trapFocus,
+    releaseFocus,
+    wrapperActive
+  } = args;
   function onBeforeEnter(_el) {
     useModalEmitter().emit("beforeEnter", toValue(id));
   }
   function onEnter(_el) {
     useModalEmitter().emit("enter", toValue(id));
   }
-  async function onAfterEnter(el) {
+  async function onAfterEnter(_el) {
     useModalEmitter().emit("afterEnter", toValue(id));
     if (mappedOptions.scrollLock) {
       if (mappedOptions.scrollLockPadding) {
@@ -33,7 +34,7 @@ export function useModalCallback({
   function onBeforeLeave(_el) {
     useModalEmitter().emit("beforeLeave", toValue(id));
   }
-  function onLeave(el) {
+  function onLeave(_el) {
     useModalEmitter().emit("leave", toValue(id));
   }
   function onAfterLeave(_el) {

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

@@ -1,4 +1,4 @@
-import type { ModalOptions } from '../types/index.js';
+import type { ModalOptions } from '../types.js';
 import type { RequireAll } from '@maas/vue-equipment/utils';
 declare const defaultOptions: RequireAll<ModalOptions>;
 export { defaultOptions };

package/dist/plugins/index.d.ts

@@ -1,4 +1,5 @@
 export * from './MagicConsent/index.js';
+export * from './MagicDrawer/index.js';
 export * from './MagicMarquee/index.js';
 export * from './MagicModal/index.js';
 export * from './MagicNoise/index.js';

package/dist/plugins/index.mjs

@@ -1,4 +1,5 @@
 export * from "./MagicConsent/index.mjs";
+export * from "./MagicDrawer/index.mjs";
 export * from "./MagicMarquee/index.mjs";
 export * from "./MagicModal/index.mjs";
 export * from "./MagicNoise/index.mjs";

package/dist/utils/css/animations/slide-btt-out.css

@@ -1,8 +1,5 @@
 
 @keyframes slide-btt-out {
-  0% {
-    transform: translateY(0);
-  }
   100% {
     transform: translateY(100%);
   }

package/dist/utils/css/animations/slide-ltr-out.css

@@ -1,7 +1,4 @@
 @keyframes slide-ltr-out {
-  0% {
-    transform: translateX(0);
-  }
   100% {
     transform: translateX(-100%);
   }

package/dist/utils/css/animations/slide-rtl-out.css

@@ -1,7 +1,4 @@
 @keyframes slide-rtl-out {
-  0% {
-    transform: translateX(0);
-  }
   100% {
     transform: translateX(100%);
   }

package/dist/utils/css/animations/slide-ttb-out.css

@@ -1,7 +1,4 @@
 @keyframes slide-ttb-out {
-  0% {
-    transform: translateY(0);
-  }
   100% {
     transform: translateY(-100%);
   }

package/dist/utils/index.js

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var utils_exports = {};
 __export(utils_exports, {
   clampValue: () => clampValue,
+  interpolate: () => interpolate,
   isIOS: () => isIOS,
   mapValue: () => mapValue,
   slugify: () => slugify,
@@ -34,6 +35,30 @@ function clampValue(value, min, max) {
   return value <= min ? min : value >= max ? max : value;
 }
 
+// src/functions/interpolate.ts
+function interpolate(args) {
+  const {
+    from,
+    to,
+    duration,
+    callback,
+    easing = (t) => t * (2 - t),
+    interval = 1
+  } = args;
+  const steps = Math.ceil(duration / interval);
+  const stepSize = 1 / steps;
+  let currentStep = 0;
+  const intervalId = setInterval(() => {
+    const progress = currentStep * stepSize;
+    const value = from + (to - from) * easing(progress);
+    callback(value);
+    currentStep++;
+    if (currentStep >= steps) {
+      clearInterval(intervalId);
+    }
+  }, interval);
+}
+
 // src/functions/isIOS.ts
 function isIOS() {
   if (typeof window === "undefined")
@@ -98,6 +123,7 @@ function slugify(string, options) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   clampValue,
+  interpolate,
   isIOS,
   mapValue,
   slugify,

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACFO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/index.ts","../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export * from './src/functions/clampValue'\nexport * from './src/functions/interpolate'\nexport * from './src/functions/isIOS'\nexport * from './src/functions/mapValue'\nexport * from './src/functions/uuid'\nexport * from './src/functions/uniq'\nexport * from './src/functions/slugify'\n\nexport type * from './src/types'\n","export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const {\n    from,\n    to,\n    duration,\n    callback,\n    easing = (t: number) => t * (2 - t),\n    interval = 1,\n  } = args\n\n  const steps = Math.ceil(duration / interval)\n  const stepSize = 1 / steps\n\n  let currentStep = 0\n\n  const intervalId = setInterval(() => {\n    const progress = currentStep * stepSize\n    const value = from + (to - from) * easing(progress)\n\n    callback(value)\n    currentStep++\n\n    if (currentStep >= steps) {\n      clearInterval(intervalId)\n    }\n  }, interval)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAc,KAAK,IAAI;AAAA,IACjC,WAAW;AAAA,EACb,IAAI;AAEJ,QAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ;AAC3C,QAAM,WAAW,IAAI;AAErB,MAAI,cAAc;AAElB,QAAM,aAAa,YAAY,MAAM;AACnC,UAAM,WAAW,cAAc;AAC/B,UAAM,QAAQ,QAAQ,KAAK,QAAQ,OAAO,QAAQ;AAElD,aAAS,KAAK;AACd;AAEA,QAAI,eAAe,OAAO;AACxB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,QAAQ;AACb;;;ACnCO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}

package/dist/utils/index.mjs

@@ -3,6 +3,30 @@ function clampValue(value, min, max) {
   return value <= min ? min : value >= max ? max : value;
 }
 
+// src/functions/interpolate.ts
+function interpolate(args) {
+  const {
+    from,
+    to,
+    duration,
+    callback,
+    easing = (t) => t * (2 - t),
+    interval = 1
+  } = args;
+  const steps = Math.ceil(duration / interval);
+  const stepSize = 1 / steps;
+  let currentStep = 0;
+  const intervalId = setInterval(() => {
+    const progress = currentStep * stepSize;
+    const value = from + (to - from) * easing(progress);
+    callback(value);
+    currentStep++;
+    if (currentStep >= steps) {
+      clearInterval(intervalId);
+    }
+  }, interval);
+}
+
 // src/functions/isIOS.ts
 function isIOS() {
   if (typeof window === "undefined")
@@ -66,6 +90,7 @@ function slugify(string, options) {
 }
 export {
   clampValue,
+  interpolate,
   isIOS,
   mapValue,
   slugify,

package/dist/utils/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACFO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../packages/utils/src/functions/clampValue.ts","../../packages/utils/src/functions/interpolate.ts","../../packages/utils/src/functions/isIOS.ts","../../packages/utils/src/functions/mapValue.ts","../../packages/utils/src/functions/uuid.ts","../../packages/utils/src/functions/uniq.ts","../../packages/utils/src/functions/slugify.ts"],"sourcesContent":["export function clampValue(value: number, min: number, max: number) {\n  return value <= min ? min : value >= max ? max : value\n}\n","export type InterpolateArgs = {\n  from: number\n  to: number\n  duration: number\n  interval?: number\n  easing?: (t: number) => number\n  callback: (result: number) => void\n}\n\nexport function interpolate(args: InterpolateArgs) {\n  const {\n    from,\n    to,\n    duration,\n    callback,\n    easing = (t: number) => t * (2 - t),\n    interval = 1,\n  } = args\n\n  const steps = Math.ceil(duration / interval)\n  const stepSize = 1 / steps\n\n  let currentStep = 0\n\n  const intervalId = setInterval(() => {\n    const progress = currentStep * stepSize\n    const value = from + (to - from) * easing(progress)\n\n    callback(value)\n    currentStep++\n\n    if (currentStep >= steps) {\n      clearInterval(intervalId)\n    }\n  }, interval)\n}\n","export function isIOS() {\n  if (typeof window === 'undefined') return false\n  return /iPad|iPhone|iPod/.test(navigator?.userAgent)\n}\n","export function mapValue(\n  value: number,\n  inMin: number,\n  inMax: number,\n  outMin: number,\n  outMax: number,\n) {\n  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin\n}\n","// This implementation is meant for internal use only.\n// It is only used to generate a unique IDs for the `key` props.\n// It should not replace crypto.randomUUID() or window.crypto.randomUUID().\n\nexport function uuid() {\n  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'\n    .split('')\n    .reduce(\n      (c, i) =>\n        c +\n        (i === 'x'\n          ? Math.floor(Math.random() * 0xf).toString(16)\n          : i === 'y'\n          ? Math.floor(Math.random() * 4 + 8).toString(16)\n          : i),\n      '',\n    )\n}\n","export function uniq<T extends any[]>(a: T) {\n  return Array.from(new Set(a))\n}\n","export interface SlugifyOptions {\n  separator?: string\n  trim?: boolean\n  remove?: RegExp\n  strict?: boolean\n  lowercase?: boolean\n}\n\nconst defaultOptions: SlugifyOptions = {\n  separator: '-',\n  trim: true,\n  remove: undefined,\n  strict: true,\n  lowercase: true,\n}\n\nexport function slugify(string: string, options?: SlugifyOptions): string {\n  if (typeof string !== 'string') {\n    throw new Error('slugify: string argument expected')\n  }\n\n  // Merge provided options with default options\n  const _options = { ...defaultOptions, ...options }\n\n  const charMap: { [key: string]: string } = {}\n\n  let slug = string\n    .normalize()\n    .split('')\n    .reduce(function (result, ch) {\n      let appendChar = charMap[ch]\n      if (appendChar === undefined) appendChar = ch\n      if (appendChar === _options?.separator) appendChar = ' '\n      return (\n        result +\n        appendChar.replace(_options?.remove || /[^\\w\\s$*_+~.()'\"!\\-:@]+/g, '')\n      )\n    }, '')\n\n  if (_options.strict) {\n    slug = slug.replace(/[^A-Za-z0-9\\s]/g, '')\n  }\n\n  if (_options.trim) {\n    slug = slug.trim()\n  }\n\n  if (_options.separator) {\n    slug = slug.replace(/ +/g, _options.separator)\n  }\n\n  if (_options.lowercase) {\n    slug = slug.toLocaleLowerCase()\n  }\n\n  return slug\n}\n"],"mappings":";AAAO,SAAS,WAAW,OAAe,KAAa,KAAa;AAClE,SAAO,SAAS,MAAM,MAAM,SAAS,MAAM,MAAM;AACnD;;;ACOO,SAAS,YAAY,MAAuB;AACjD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,CAAC,MAAc,KAAK,IAAI;AAAA,IACjC,WAAW;AAAA,EACb,IAAI;AAEJ,QAAM,QAAQ,KAAK,KAAK,WAAW,QAAQ;AAC3C,QAAM,WAAW,IAAI;AAErB,MAAI,cAAc;AAElB,QAAM,aAAa,YAAY,MAAM;AACnC,UAAM,WAAW,cAAc;AAC/B,UAAM,QAAQ,QAAQ,KAAK,QAAQ,OAAO,QAAQ;AAElD,aAAS,KAAK;AACd;AAEA,QAAI,eAAe,OAAO;AACxB,oBAAc,UAAU;AAAA,IAC1B;AAAA,EACF,GAAG,QAAQ;AACb;;;ACnCO,SAAS,QAAQ;AACtB,MAAI,OAAO,WAAW;AAAa,WAAO;AAC1C,SAAO,mBAAmB,KAAK,uCAAW,SAAS;AACrD;;;ACHO,SAAS,SACd,OACA,OACA,OACA,QACA,QACA;AACA,UAAS,QAAQ,UAAU,SAAS,WAAY,QAAQ,SAAS;AACnE;;;ACJO,SAAS,OAAO;AACrB,SAAO,uCACJ,MAAM,EAAE,EACR;AAAA,IACC,CAAC,GAAG,MACF,KACC,MAAM,MACH,KAAK,MAAM,KAAK,OAAO,IAAI,EAAG,EAAE,SAAS,EAAE,IAC3C,MAAM,MACN,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,EAAE,SAAS,EAAE,IAC7C;AAAA,IACN;AAAA,EACF;AACJ;;;ACjBO,SAAS,KAAsB,GAAM;AAC1C,SAAO,MAAM,KAAK,IAAI,IAAI,CAAC,CAAC;AAC9B;;;ACMA,IAAM,iBAAiC;AAAA,EACrC,WAAW;AAAA,EACX,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,WAAW;AACb;AAEO,SAAS,QAAQ,QAAgB,SAAkC;AACxE,MAAI,OAAO,WAAW,UAAU;AAC9B,UAAM,IAAI,MAAM,mCAAmC;AAAA,EACrD;AAGA,QAAM,WAAW,EAAE,GAAG,gBAAgB,GAAG,QAAQ;AAEjD,QAAM,UAAqC,CAAC;AAE5C,MAAI,OAAO,OACR,UAAU,EACV,MAAM,EAAE,EACR,OAAO,SAAU,QAAQ,IAAI;AAC5B,QAAI,aAAa,QAAQ,EAAE;AAC3B,QAAI,eAAe;AAAW,mBAAa;AAC3C,QAAI,gBAAe,qCAAU;AAAW,mBAAa;AACrD,WACE,SACA,WAAW,SAAQ,qCAAU,WAAU,4BAA4B,EAAE;AAAA,EAEzE,GAAG,EAAE;AAEP,MAAI,SAAS,QAAQ;AACnB,WAAO,KAAK,QAAQ,mBAAmB,EAAE;AAAA,EAC3C;AAEA,MAAI,SAAS,MAAM;AACjB,WAAO,KAAK,KAAK;AAAA,EACnB;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,QAAQ,OAAO,SAAS,SAAS;AAAA,EAC/C;AAEA,MAAI,SAAS,WAAW;AACtB,WAAO,KAAK,kBAAkB;AAAA,EAChC;AAEA,SAAO;AACT;","names":[]}

package/package.json

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