@maas/vue-equipment 0.40.0 → 1.0.0-beta.10

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

@@ -1,75 +1,19 @@
-<template>
-  <teleport
-    v-if="wrapperActive"
-    :to="mappedOptions.teleport?.target"
-    :disabled="mappedOptions.teleport?.disabled"
-  >
-    <div
-      ref="drawerRef"
-      :id="toValue(id)"
-      :class="[
-        'magic-drawer',
-        `-${mappedOptions.position}`,
-        {
-          '-dragging': dragging,
-          '-wheeling': wheeling,
-          '-disabled': disabled,
-        },
-      ]"
-      v-bind="$attrs"
-      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
-          :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>
-</template>
-
-<script setup lang="ts">
+<script>
+import { defineComponent as _defineComponent } from "vue";
+import { unref as _unref, renderSlot as _renderSlot, vShow as _vShow, withModifiers as _withModifiers, createElementVNode as _createElementVNode, withDirectives as _withDirectives, Transition as _Transition, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementBlock as _createElementBlock, resolveDynamicComponent as _resolveDynamicComponent, normalizeStyle as _normalizeStyle, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
+const _hoisted_1 = ["data-id", "data-dragging", "data-wheeling", "data-disabled", "data-position"];
+const _hoisted_2 = {
+  ref: "wrapper",
+  class: "magic-drawer__wrapper"
+};
+const _hoisted_3 = { class: "magic-drawer__content" };
+const _hoisted_4 = {
+  key: 0,
+  class: "magic-drawer__overlay"
+};
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   computed,
   nextTick,
@@ -77,307 +21,527 @@ import {
   onBeforeMount,
   onBeforeUnmount,
   onUnmounted,
-  type Component,
-  type MaybeRef,
-} from 'vue'
-import { createDefu } from 'defu'
-import { onKeyStroke, unrefElement } from '@vueuse/core'
-import { useMetaViewport } from '@maas/vue-equipment/composables'
-import { defaultOptions } from './../utils/defaultOptions'
-import { useDrawerDOM } from '../composables/private/useDrawerDOM'
-import { useDrawerCallback } from '../composables/private/useDrawerCallback'
-import { useDrawerProgress } from '../composables/private/useDrawerProgress'
-import { useDrawerDrag } from '../composables/private/useDrawerDrag'
-import { useDrawerWheel } from '../composables/private/useDrawerWheel'
-import { useDrawerState } from '../composables/private/useDrawerState'
-import { useMagicDrawer } from '../composables/useMagicDrawer'
-
-import type { MagicDrawerOptions } 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'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-// Prevent deep merge of certain options
-// In this case, don’t merge the `close` and `points` options
-const customDefu = createDefu((obj, key, value) => {
-  if (key === 'close' || key === 'snapPoints') {
-    obj[key] = value
-    return true
+  toRefs
+} from "vue";
+import { createDefu } from "defu";
+import { onKeyStroke, unrefElement } from "@vueuse/core";
+import { useMetaViewport } from "@maas/vue-equipment/composables";
+import { defaultOptions } from "./../utils/defaultOptions";
+import { useDrawerDOM } from "../composables/private/useDrawerDOM";
+import { useDrawerCallback } from "../composables/private/useDrawerCallback";
+import { useDrawerProgress } from "../composables/private/useDrawerProgress";
+import { useDrawerDrag } from "../composables/private/useDrawerDrag";
+import { useDrawerWheel } from "../composables/private/useDrawerWheel";
+import { useDrawerState } from "../composables/private/useDrawerState";
+import { useMagicDrawer } from "../composables/useMagicDrawer";
+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";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicDrawer",
+  props: {
+    id: { type: null, required: true },
+    options: { type: Object, required: false, default: () => ({}) }
+  },
+  setup(__props) {
+    const customDefu = createDefu((obj, key, value) => {
+      if (key === "close" || key === "snapPoints") {
+        obj[key] = value;
+        return true;
+      }
+    });
+    const mappedOptions = customDefu(__props.options, defaultOptions);
+    const elRef = useTemplateRef("el");
+    const drawerRef = useTemplateRef("drawer");
+    const wrapperRef = useTemplateRef("wrapper");
+    const {
+      trapFocus,
+      releaseFocus,
+      lockScroll,
+      unlockScroll,
+      addScrollLockPadding,
+      removeScrollLockPadding
+    } = useDrawerDOM({
+      focusTarget: drawerRef,
+      focusTrap: mappedOptions.focusTrap
+    });
+    const { isActive, open, close } = useMagicDrawer(__props.id);
+    const overshoot = shallowRef(0);
+    const {
+      position,
+      snapPoints,
+      threshold,
+      animation,
+      preventDragClose,
+      initial
+    } = mappedOptions;
+    const disabled = computed(() => {
+      if (__props.options.disabled === void 0) {
+        return defaultOptions.disabled;
+      } else {
+        return __props.options.disabled;
+      }
+    });
+    const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
+      id: __props.id,
+      elRef,
+      wrapperRef,
+      position,
+      snapPoints,
+      threshold,
+      overshoot,
+      animation,
+      initial,
+      preventDragClose,
+      disabled
+    });
+    const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
+      id: __props.id,
+      elRef,
+      position,
+      disabled
+    });
+    const { initializeState, deleteState } = useDrawerState(__props.id);
+    const state = initializeState();
+    const { dragging, wheeling } = toRefs(state);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
+    const wasActive = shallowRef(false);
+    const {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useDrawerCallback({
+      id: __props.id,
+      mappedOptions,
+      addScrollLockPadding,
+      removeScrollLockPadding,
+      lockScroll,
+      unlockScroll,
+      trapFocus,
+      releaseFocus,
+      wrapperActive,
+      wasActive
+    });
+    useDrawerProgress({ id: __props.id, elRef, drawerRef, position, overshoot });
+    const { resetMetaViewport } = useMetaViewport();
+    const preventTransition = computed(() => {
+      return mappedOptions.initial.open && !mappedOptions.initial.transition && !wasActive.value;
+    });
+    const backdropTransition = computed(() => {
+      return preventTransition.value ? void 0 : mappedOptions.transition?.backdrop;
+    });
+    const contentTransition = computed(() => {
+      return preventTransition.value ? void 0 : mappedOptions.transition?.content;
+    });
+    function convertToPixels(value) {
+      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;
+      }
+    }
+    async function onOpen() {
+      wrapperActive.value = true;
+      await nextTick();
+      innerActive.value = true;
+      await nextTick();
+      if (mappedOptions.enableMousewheel) {
+        initializeWheelListener();
+      }
+    }
+    function onClose() {
+      innerActive.value = false;
+      if (mappedOptions.enableMousewheel) {
+        destroyWheelListener();
+      }
+    }
+    function guardedPointerdown(event) {
+      if (!disabled.value) {
+        onPointerdown(event);
+      }
+    }
+    function guardedClick(event) {
+      if (!disabled.value) {
+        onClick(event);
+      }
+    }
+    function guardedClose() {
+      if (!disabled.value) {
+        close();
+      }
+    }
+    function saveOvershoot() {
+      const element = unrefElement(drawerRef);
+      if (!element) {
+        return;
+      }
+      const overshootVar = getComputedStyle(element, null).getPropertyValue(
+        "--magic-drawer-drag-overshoot"
+      );
+      overshoot.value = convertToPixels(overshootVar) || 0;
+    }
+    if (mappedOptions.keyListener.close) {
+      for (const key of mappedOptions.keyListener.close) {
+        onKeyStroke(key, (e) => {
+          close();
+          e.preventDefault();
+        });
+      }
+    }
+    watch(isActive, async (value) => {
+      if (value) {
+        await onOpen();
+      } else {
+        onClose();
+      }
+    });
+    watch(innerActive, () => {
+      saveOvershoot();
+    });
+    onBeforeMount(async () => {
+      if (mappedOptions.initial.open) {
+        open();
+      }
+    });
+    onBeforeUnmount(() => {
+      close();
+    });
+    onUnmounted(() => {
+      if (mappedOptions.scrollLock) {
+        unlockScroll();
+        if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
+          removeScrollLockPadding();
+        }
+      }
+      if (mappedOptions.focusTrap) {
+        releaseFocus();
+      }
+      if (!mappedOptions.preventZoom) {
+        resetMetaViewport();
+      }
+      deleteState();
+    });
+    return (_ctx, _cache) => {
+      return wrapperActive.value ? (_openBlock(), _createBlock(_Teleport, {
+        key: 0,
+        to: _unref(mappedOptions).teleport?.target,
+        disabled: _unref(mappedOptions).teleport?.disabled
+      }, [
+        _createElementVNode("div", _mergeProps({
+          ref: "drawer",
+          class: "magic-drawer",
+          "data-id": toValue(_ctx.id),
+          "data-dragging": _unref(dragging),
+          "data-wheeling": _unref(wheeling),
+          "data-disabled": disabled.value,
+          "data-position": _unref(mappedOptions).position
+        }, _ctx.$attrs, { "aria-modal": "true" }), [
+          _unref(mappedOptions).backdrop || !!_ctx.$slots.backdrop ? (_openBlock(), _createBlock(_Transition, {
+            key: 0,
+            name: backdropTransition.value,
+            persisted: ""
+          }, {
+            default: _withCtx(() => [
+              _withDirectives(_createElementVNode(
+                "div",
+                {
+                  class: "magic-drawer__backdrop",
+                  onClick: _withModifiers(guardedClose, ["self"])
+                },
+                [
+                  _renderSlot(_ctx.$slots, "backdrop")
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [_vShow, innerActive.value]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"])) : _createCommentVNode("v-if", true),
+          _createElementVNode(
+            "div",
+            _hoisted_2,
+            [
+              _createVNode(_Transition, {
+                name: contentTransition.value,
+                onBeforeLeave: _unref(onBeforeLeave),
+                onLeave: _unref(onLeave),
+                onAfterLeave: _unref(onAfterLeave),
+                onBeforeEnter: _unref(onBeforeEnter),
+                onEnter: _unref(onEnter),
+                onAfterEnter: _unref(onAfterEnter),
+                persisted: ""
+              }, {
+                default: _withCtx(() => [
+                  _withDirectives(_createElementVNode(
+                    "div",
+                    _hoisted_3,
+                    [
+                      (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
+                        ref: "el",
+                        class: "magic-drawer__drag",
+                        style: _normalizeStyle(_unref(style)),
+                        onPointerdown: guardedPointerdown,
+                        onClick: guardedClick
+                      }, {
+                        default: _withCtx(() => [
+                          _renderSlot(_ctx.$slots, "default"),
+                          _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_4)) : _createCommentVNode("v-if", true)
+                        ]),
+                        _: 3
+                        /* FORWARDED */
+                      }, 40, ["style"]))
+                    ],
+                    512
+                    /* NEED_PATCH */
+                  ), [
+                    [_vShow, innerActive.value]
+                  ])
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["name", "onBeforeLeave", "onLeave", "onAfterLeave", "onBeforeEnter", "onEnter", "onAfterEnter"])
+            ],
+            512
+            /* NEED_PATCH */
+          )
+        ], 16, _hoisted_1)
+      ], 8, ["to", "disabled"])) : _createCommentVNode("v-if", true);
+    };
   }
-})
+});
+</script>
 
-interface MagicDrawerProps {
-  id: MaybeRef<string>
-  component?: Component
-  options?: MagicDrawerOptions
+<style>
+:root {
+  --magic-drawer-height: 75svh;
+  --magic-drawer-max-height: none;
+  --magic-drawer-width: 100%;
+  --magic-drawer-max-width: none;
+  --magic-drawer-justify-content: center;
+  --magic-drawer-align-items: flex-end;
+  --magic-drawer-enter-animation: slide-btt-in 300ms ease;
+  --magic-drawer-leave-animation: slide-btt-out 300ms ease;
+  --magic-drawer-drag-overshoot: 4rem;
 }
 
-const props = withDefaults(defineProps<MagicDrawerProps>(), {
-  options: () => defaultOptions,
-})
-
-const mappedOptions: typeof defaultOptions = customDefu(
-  props.options,
-  defaultOptions
-)
-
-const elRef = ref<HTMLElement | undefined>(undefined)
-const drawerRef = ref<HTMLDivElement | undefined>(undefined)
-const wrapperRef = ref<HTMLDivElement | undefined>(undefined)
-
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-} = useDrawerDOM({
-  focusTarget: drawerRef,
-  focusTrap: mappedOptions.focusTrap,
-})
-
-const { isActive, open, close } = useMagicDrawer(props.id)
-
-const overshoot = ref(0)
-const {
-  position,
-  snapPoints,
-  threshold,
-  animation,
-  preventDragClose,
-  initial,
-} = mappedOptions
-
-// Make sure this is reactive
-const disabled = computed(() => {
-  if (props.options.disabled === undefined) {
-    return defaultOptions.disabled
-  } else {
-    return props.options.disabled
-  }
-})
-
-const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
-  id: props.id,
-  isActive,
-  elRef,
-  wrapperRef,
-  position,
-  snapPoints,
-  threshold,
-  overshoot,
-  animation,
-  initial,
-  preventDragClose,
-  disabled,
-  close,
-})
-
-const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
-  id: props.id,
-  elRef,
-  position,
-  disabled,
-})
-
-const { initializeState, deleteState } = useDrawerState(props.id)
-const { dragging, wheeling } = initializeState()
-
-// Split isActive into two values to animate drawer smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
-const wasActive = ref(false)
-
-const {
-  onBeforeEnter,
-  onEnter,
-  onAfterEnter,
-  onBeforeLeave,
-  onLeave,
-  onAfterLeave,
-} = useDrawerCallback({
-  id: props.id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive,
-  wasActive,
-})
-
-useDrawerProgress({ id: props.id, elRef, drawerRef, position, overshoot })
-
-const { resetMetaViewport } = useMetaViewport()
-
-// Prevent animation on initial mount if the options call for it
-// To achieve this, the transition names are set to undefined
-const preventTransition = computed(() => {
-  return (
-    mappedOptions.initial.open &&
-    !mappedOptions.initial.transition &&
-    !wasActive.value
-  )
-})
-
-const backdropTransition = computed(() => {
-  return preventTransition.value
-    ? undefined
-    : mappedOptions.transition?.backdrop
-})
-
-const contentTransition = computed(() => {
-  return preventTransition.value ? undefined : mappedOptions.transition?.content
-})
-
-// Private functions
-function convertToPixels(value: string) {
-  const regex = /^(\d*\.?\d+)\s*(rem|px)$/
+.magic-drawer {
+  --magic-drawer-padding: 0px;
+  --magic-drawer-drag-overshoot-x: 0px;
+  --magic-drawer-drag-overshoot-y: 0px;
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  pointer-events: none;
+  justify-content: var(--magic-drawer-justify-content);
+  align-items: var(--magic-drawer-align-items);
+  z-index: var(--magic-drawer-z-index, 999);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
+}
 
-  const match = value.match(regex)
+.magic-drawer[data-position='bottom'] {
+  --magic-drawer-drag-overshoot-y: var(--magic-drawer-drag-overshoot);
+  --magic-drawer-padding: 0 0 var(--magic-drawer-drag-overshoot-y) 0;
 
-  if (!match) {
-    console.error(
-      `--magic-drawer-drag-overshoot (${value}) needs to be specified in px or rem`
-    )
-    return 0
+  & > .magic-drawer__wrapper {
+    height: calc(
+      var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px)
+    );
   }
+}
 
-  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
+.magic-drawer[data-position='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__wrapper {
+    height: calc(
+      var(--magic-drawer-height, 0px) + var(--magic-drawer-drag-overshoot, 0px)
+    );
   }
 }
 
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
-  await nextTick()
-  if (mappedOptions.enableMousewheel) {
-    initializeWheelListener()
+.magic-drawer[data-position='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__wrapper {
+    width: calc(
+      var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px)
+    );
   }
 }
 
-function onClose() {
-  innerActive.value = false
-  if (mappedOptions.enableMousewheel) {
-    destroyWheelListener()
+.magic-drawer[data-position='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__wrapper {
+    width: calc(
+      var(--magic-drawer-width, 0px) + var(--magic-drawer-drag-overshoot, 0px)
+    );
   }
 }
 
-// Public functions
-function guardedPointerdown(event: PointerEvent) {
-  if (!disabled.value) {
-    onPointerdown(event)
-  }
+.magic-drawer__wrapper {
+  height: var(--magic-drawer-height);
+  max-height: calc(
+    var(--magic-drawer-max-height) + var(--magic-drawer-drag-overshoot-y)
+  );
+  width: var(--magic-drawer-width);
+  max-width: calc(
+    var(--magic-drawer-max-width) + var(--magic-drawer-drag-overshoot-x)
+  );
+  transform: translate(
+    var(--magic-drawer-drag-overshoot-x),
+    var(--magic-drawer-drag-overshoot-y)
+  );
+  pointer-events: none;
+  display: flex;
+  min-height: 0;
 }
 
-function guardedClick(event: PointerEvent) {
-  if (!disabled.value) {
-    onClick(event)
-  }
+.magic-drawer__content {
+  width: 100%;
+  max-height: 100%;
+  height: var(--magic-drawer-content-height, 100%);
+  position: relative;
 }
 
-function guardedClose() {
-  if (!disabled.value) {
-    close()
-  }
+.magic-drawer__drag {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  touch-action: none;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+  pointer-events: auto;
+  align-items: var(--magic-drawer-align-items);
+  justify-content: var(--magic-drawer-justify-content);
+  overflow-x: var(--magic-drawer-content-overflow-x, hidden);
+  overflow-y: var(--magic-drawer-content-overflow-y, hidden);
+  cursor: grab;
 }
 
-function saveOvershoot() {
-  const element = unrefElement(drawerRef)
+/* Reset default dialog styles */
+dialog.magic-drawer__drag {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: 0;
+}
 
-  if (!element) {
-    return
-  }
+dialog.magic-drawer__drag::backdrop {
+  background-color: transparent;
+}
 
-  const overshootVar = getComputedStyle(element, null).getPropertyValue(
-    '--magic-drawer-drag-overshoot'
-  )
-  overshoot.value = convertToPixels(overshootVar) || 0
+.magic-drawer[data-dragging='true'] .magic-drawer__drag {
+  cursor: grabbing;
+  user-select: none;
 }
 
-// Lifecycle hooks and listeners
-if (mappedOptions.keyListener.close) {
-  for (const key of mappedOptions.keyListener.close) {
-    onKeyStroke(key, (e) => {
-      close()
-      e.preventDefault()
-    })
-  }
+.magic-drawer[data-wheeling='true'] .magic-drawer__drag {
+  cursor: auto;
 }
 
-watch(isActive, async (value) => {
-  if (value) {
-    await onOpen()
-  } else {
-    onClose()
-  }
-})
+.magic-drawer[data-disabled='true'] .magic-drawer__drag {
+  cursor: auto;
+}
 
-// Save overshoot, as soon as drawer apepars in the DOM
-watch(innerActive, () => {
-  saveOvershoot()
-})
+.magic-drawer__drag > * {
+  padding: var(--magic-drawer-padding);
+}
 
-onBeforeMount(async () => {
-  // Force open
-  if (mappedOptions.initial.open) {
-    open()
-  }
-})
+.magic-drawer__overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+}
 
-// Reset state on unmount
-onBeforeUnmount(() => {
-  close()
-})
+.magic-drawer__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: auto;
+  background-color: var(--magic-drawer-backdrop-color, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--magic-drawer-backdrop-filter, unset);
+  z-index: -1;
+}
 
-onUnmounted(() => {
-  if (mappedOptions.scrollLock) {
-    unlockScroll()
-    if (
-      typeof mappedOptions.scrollLock === 'object' &&
-      mappedOptions.scrollLock.padding
-    ) {
-      removeScrollLockPadding()
-    }
-  }
+.magic-drawer[data-disabled='true'] .magic-drawer__backdrop {
+  pointer-events: none;
+}
 
-  if (mappedOptions.focusTrap) {
-    releaseFocus()
-  }
+/* Content */
+.magic-drawer--content-enter-active {
+  animation: var(--magic-drawer-enter-animation);
+}
 
-  if (!mappedOptions.preventZoom) {
-    resetMetaViewport()
-  }
+.magic-drawer--content-leave-active {
+  animation: var(--magic-drawer-leave-animation);
+}
 
-  deleteState()
-})
-</script>
+/* Backdrop */
+.magic-drawer--backdrop-enter-active {
+  animation: fade-in 300ms ease;
+}
 
-<style>
-:root{--magic-drawer-height:75svh;--magic-drawer-width:100%;--magic-drawer-justify-content:center;--magic-drawer-align-items:flex-end;--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,999)}.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,hidden);overflow-y:var(--magic-drawer-content-overflow-y,hidden);pointer-events:auto;position:relative;scroll-behavior:smooth;touch-action:none;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,.magic-drawer.-wheeling .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,unset);backdrop-filter:var(--magic-drawer-backdrop-filter,unset);background-color:var(--magic-drawer-backdrop-color,rgba(0,0,0,.5));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}
+.magic-drawer--backdrop-leave-active {
+  animation: fade-out 300ms ease;
+}
 </style>