@maas/vue-equipment 1.0.0-beta.2 → 1.0.0-beta.20

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

@@ -1,14 +1,66 @@
-<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 = ["id", "data-dragging", "data-wheeling", "data-disabled", "data-position"];
-const _hoisted_2 = { class: "magic-drawer__content" };
-const _hoisted_3 = {
-  key: 0,
-  class: "magic-drawer__overlay"
-};
+<template>
+  <teleport
+    v-if="wrapperActive"
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <div
+      ref="drawer"
+      class="magic-drawer"
+      :data-id="mappedId"
+      :data-dragging="dragging"
+      :data-wheeling="wheeling"
+      :data-disabled="disabled"
+      :data-position="mappedOptions.position"
+      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 ref="wrapper" class="magic-drawer__wrapper">
+        <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="el"
+              class="magic-drawer__drag"
+              :style="style"
+              @pointerdown="guardedPointerdown"
+              @click="guardedClick"
+            >
+              <slot />
+              <div v-if="hasDragged" class="magic-drawer__overlay" />
+            </component>
+          </div>
+        </transition>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   computed,
   nextTick,
@@ -39,313 +91,216 @@ 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 = ref(void 0);
-    const drawerRef = ref(void 0);
-    const wrapperRef = ref(void 0);
-    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;
-    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 = 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();
-    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(() => {
+defineOptions({
+  inheritAttrs: false
+});
+const customDefu = createDefu((obj, key, value) => {
+  if (key === "close" || key === "snapPoints") {
+    obj[key] = value;
+    return true;
+  }
+});
+const { options = {}, id } = defineProps({
+  id: { type: null, required: true },
+  options: { type: Object, required: false }
+});
+const mappedOptions = customDefu(options, defaultOptions);
+const mappedId = toValue(id);
+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(id);
+const overshoot = shallowRef(0);
+const {
+  position,
+  snapPoints,
+  threshold,
+  animation,
+  preventDragClose,
+  initial
+} = mappedOptions;
+const disabled = computed(() => {
+  if (options.disabled === void 0) {
+    return defaultOptions.disabled;
+  } else {
+    return options.disabled;
+  }
+});
+const { onPointerdown, onClick, style, hasDragged } = useDrawerDrag({
+  id,
+  elRef,
+  wrapperRef,
+  position,
+  snapPoints,
+  threshold,
+  overshoot,
+  animation,
+  initial,
+  preventDragClose,
+  disabled
+});
+const { initializeWheelListener, destroyWheelListener } = useDrawerWheel({
+  id,
+  elRef,
+  position,
+  disabled
+});
+const { initializeState, deleteState } = useDrawerState(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,
+  mappedOptions,
+  addScrollLockPadding,
+  removeScrollLockPadding,
+  lockScroll,
+  unlockScroll,
+  trapFocus,
+  releaseFocus,
+  wrapperActive,
+  wasActive
+});
+useDrawerProgress({ 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();
     });
-    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({
-          id: toValue(_ctx.id),
-          ref_key: "drawerRef",
-          ref: drawerRef,
-          class: "magic-drawer",
-          "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",
-            {
-              ref_key: "wrapperRef",
-              ref: wrapperRef,
-              class: "magic-drawer__wrapper"
-            },
-            [
-              _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_2,
-                    [
-                      (_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
-                        ref_key: "elRef",
-                        ref: elRef,
-                        class: "magic-drawer__drag",
-                        style: _normalizeStyle(_unref(style)),
-                        onPointerdown: guardedPointerdown,
-                        onClick: guardedClick
-                      }, {
-                        default: _withCtx(() => [
-                          _renderSlot(_ctx.$slots, "default"),
-                          _unref(hasDragged) ? (_openBlock(), _createElementBlock("div", _hoisted_3)) : _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);
-    };
   }
+}
+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();
 });
 </script>
 
 <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;
@@ -433,18 +388,26 @@ export default /* @__PURE__ */ _defineComponent({
 
 .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;
 }
 
 .magic-drawer__content {
   width: 100%;
-  height: 100%;
   max-height: 100%;
+  height: var(--magic-drawer-content-height, 100%);
   position: relative;
 }