@maas/vue-equipment 0.13.0 → 0.14.0

package/dist/nuxt/module.json

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

package/dist/nuxt/module.mjs

@@ -1,20 +1,6 @@
 import { defineNuxtModule, createResolver, extendViteConfig, installModule, addImportsSources } from '@nuxt/kit';
 
-const packages = {
-	composables: {
-		name: "composables",
-		display: "Vue Equipment Composables",
-		description: "A magic collection of Vue composables",
-		dir: "packages/composables"
-	},
-	plugins: {
-		name: "plugins",
-		display: "Vue Equipment Plugins",
-		description: "A magic collection of Vue plugins",
-		dir: "packages/plugins"
-	}
-};
-const functions = [
+const functions$1 = [
 	{
 		name: "MagicConsent",
 		"package": "plugins",
@@ -22,6 +8,13 @@ const functions = [
 		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",
@@ -100,10 +93,11 @@ const functions = [
 		description: "attach viewport dimensions as css variables to the document"
 	}
 ];
-const metadata = {
-	packages: packages,
-	functions: functions
-};
+
+const functions = functions$1;
+functions.map((f) => f.name);
+const plugins = functions.filter((p) => p.package === "plugins");
+const composables = functions.filter((p) => p.package === "composables");
 
 const module = defineNuxtModule({
   meta: {
@@ -115,8 +109,8 @@ const module = defineNuxtModule({
     composables: true
   },
   async setup(options, nuxt) {
-    let plugins;
-    let composables;
+    let mappedPlugins;
+    let mappedComposables;
     const resolver = createResolver(import.meta.url);
     nuxt.options.build.transpile.push("@maas/vue-equipment");
     extendViteConfig((config) => {
@@ -130,24 +124,24 @@ const module = defineNuxtModule({
       nuxt.options.alias[`@maas/vue-equipment/${pkg}`] = nuxt.options.alias[`@maas/vue-equipment/${pkg}`] || resolver.resolve(`../${pkg}`);
     });
     if (options.plugins === true) {
-      plugins = metadata.functions.filter((fn) => fn.package === "plugins").map((fn) => fn.name);
+      mappedPlugins = plugins.map((fn) => fn.name);
     } else {
-      plugins = options.plugins || [];
+      mappedPlugins = options.plugins || [];
     }
-    for (const plugin of plugins) {
+    for (const plugin of mappedPlugins) {
       const nuxtPlugin = await resolver.resolvePath(
         `@maas/vue-equipment/plugins/${plugin}/nuxt`
       );
       await installModule(nuxtPlugin);
     }
     if (options.composables === true) {
-      composables = metadata.functions.filter((fn) => fn.package === "composables").map((fn) => fn.name);
+      mappedComposables = composables.map((fn) => fn.name);
     } else {
-      composables = options.composables || [];
+      mappedComposables = options.composables || [];
     }
     addImportsSources({
-      from: "composables",
-      imports: composables
+      from: "@maas/vue-equipment/composables",
+      imports: mappedComposables
     });
   }
 });

package/dist/plugins/MagicConsent/src/composables/private/defineConsentApi.mjs

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { slugify } from "utils";
+import { slugify } from "@maas/vue-equipment/utils";
 export const globalApiState = ref({
   cookies: {},
   maxAge: void 0

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 {};