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

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

@@ -1,192 +1,292 @@
-<template>
-  <teleport
-    v-if="wrapperActive"
-    :to="mappedOptions.teleport?.target"
-    :disabled="mappedOptions.teleport?.disabled"
-  >
-    <div
-      ref="modalRef"
-      class="magic-modal"
-      :id="toValue(id)"
-      v-bind="$attrs"
-      @click.self="close"
-      aria-modal="true"
-    >
-      <transition
-        v-if="mappedOptions.backdrop || !!$slots.backdrop"
-        :name="mappedOptions.transition?.backdrop"
-      >
-        <div
-          v-show="innerActive"
-          class="magic-modal__backdrop"
-          @click.self="close"
-        >
-          <slot name="backdrop" />
-        </div>
-      </transition>
-      <transition
-        :name="mappedOptions.transition?.content"
-        @before-leave="onBeforeLeave"
-        @leave="onLeave"
-        @after-leave="onAfterLeave"
-        @before-enter="onBeforeEnter"
-        @enter="onEnter"
-        @after-enter="onAfterEnter"
-      >
-        <component
-          :is="mappedOptions.tag"
-          v-show="innerActive"
-          class="magic-modal__content"
-          @click.self="close"
-        >
-          <component
-            v-if="component"
-            v-bind="props"
-            :is="component"
-            @close="close"
-          />
-          <slot v-else />
-        </component>
-      </transition>
-    </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, resolveDynamicComponent as _resolveDynamicComponent, createVNode as _createVNode, mergeProps as _mergeProps, Teleport as _Teleport } from "vue";
+const _hoisted_1 = ["id"];
 import {
   ref,
   watch,
   nextTick,
   toValue,
   onBeforeUnmount,
-  onUnmounted,
-  type Component,
-  type MaybeRef,
-} from 'vue'
-import { createDefu } from 'defu'
-import { onKeyStroke } from '@vueuse/core'
-import { defaultOptions } from './../utils/defaultOptions'
-import { useModalDOM } from '../composables/private/useModalDOM'
-import { useModalCallback } from '../composables/private/useModalCallback'
-import { useMagicModal } from '../composables/useMagicModal'
-
-import type { MagicModalOptions } from './../types/index'
-
-import '@maas/vue-equipment/utils/css/animations/fade-in.css'
-import '@maas/vue-equipment/utils/css/animations/fade-out.css'
-
-defineOptions({
-  inheritAttrs: false,
-})
-
-// Prevent keyListener array from being merged with default
-const customDefu = createDefu((obj, key, value) => {
-  if (key === 'close') {
-    obj[key] = value
-    return true
+  onUnmounted
+} from "vue";
+import { createDefu } from "defu";
+import { onKeyStroke } from "@vueuse/core";
+import { defaultOptions } from "./../utils/defaultOptions";
+import { useModalDOM } from "../composables/private/useModalDOM";
+import { useModalCallback } from "../composables/private/useModalCallback";
+import { useMagicModal } from "../composables/useMagicModal";
+import "@maas/vue-equipment/utils/css/animations/fade-in.css";
+import "@maas/vue-equipment/utils/css/animations/fade-out.css";
+export default /* @__PURE__ */ _defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "MagicModal",
+  props: {
+    id: { type: null, required: true },
+    props: { type: Object, required: false },
+    options: { type: Object, required: false, default: () => ({}) }
+  },
+  setup(__props) {
+    const customDefu = createDefu((obj, key, value) => {
+      if (key === "close") {
+        obj[key] = value;
+        return true;
+      }
+    });
+    const mappedOptions = customDefu(__props.options, defaultOptions);
+    const modalRef = ref(void 0);
+    const {
+      trapFocus,
+      releaseFocus,
+      lockScroll,
+      unlockScroll,
+      addScrollLockPadding,
+      removeScrollLockPadding
+    } = useModalDOM({
+      focusTarget: modalRef,
+      focusTrap: mappedOptions.focusTrap
+    });
+    const { isActive, close } = useMagicModal(__props.id);
+    const innerActive = ref(false);
+    const wrapperActive = ref(false);
+    const {
+      onBeforeEnter,
+      onEnter,
+      onAfterEnter,
+      onBeforeLeave,
+      onLeave,
+      onAfterLeave
+    } = useModalCallback({
+      id: __props.id,
+      mappedOptions,
+      addScrollLockPadding,
+      removeScrollLockPadding,
+      lockScroll,
+      unlockScroll,
+      trapFocus,
+      releaseFocus,
+      wrapperActive
+    });
+    async function onOpen() {
+      wrapperActive.value = true;
+      await nextTick();
+      innerActive.value = true;
+    }
+    function onClose() {
+      innerActive.value = false;
+    }
+    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();
+      }
+    });
+    onBeforeUnmount(() => {
+      close();
+    });
+    onUnmounted(() => {
+      if (mappedOptions.scrollLock) {
+        unlockScroll();
+        if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
+          removeScrollLockPadding();
+        }
+      }
+      if (mappedOptions.focusTrap) {
+        releaseFocus();
+      }
+    });
+    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: "modalRef",
+          ref: modalRef,
+          class: "magic-modal"
+        }, _ctx.$attrs, {
+          "aria-modal": "true",
+          onClick: _cache[1] || (_cache[1] = _withModifiers(
+            //@ts-ignore
+            (...args) => _unref(close) && _unref(close)(...args),
+            ["self"]
+          ))
+        }), [
+          _unref(mappedOptions).backdrop || !!_ctx.$slots.backdrop ? (_openBlock(), _createBlock(_Transition, {
+            key: 0,
+            name: _unref(mappedOptions).transition?.backdrop,
+            persisted: ""
+          }, {
+            default: _withCtx(() => [
+              _withDirectives(_createElementVNode(
+                "div",
+                {
+                  class: "magic-modal__backdrop",
+                  onClick: _cache[0] || (_cache[0] = _withModifiers(
+                    //@ts-ignore
+                    (...args) => _unref(close) && _unref(close)(...args),
+                    ["self"]
+                  ))
+                },
+                [
+                  _renderSlot(_ctx.$slots, "backdrop")
+                ],
+                512
+                /* NEED_PATCH */
+              ), [
+                [_vShow, innerActive.value]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name"])) : _createCommentVNode("v-if", true),
+          _createVNode(_Transition, {
+            name: _unref(mappedOptions).transition?.content,
+            onBeforeLeave: _unref(onBeforeLeave),
+            onLeave: _unref(onLeave),
+            onAfterLeave: _unref(onAfterLeave),
+            onBeforeEnter: _unref(onBeforeEnter),
+            onEnter: _unref(onEnter),
+            onAfterEnter: _unref(onAfterEnter),
+            persisted: ""
+          }, {
+            default: _withCtx(() => [
+              _withDirectives((_openBlock(), _createBlock(_resolveDynamicComponent(_unref(mappedOptions).tag), {
+                class: "magic-modal__content",
+                onClick: _withModifiers(_unref(close), ["self"])
+              }, {
+                default: _withCtx(() => [
+                  _renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+                /* FORWARDED */
+              }, 8, ["onClick"])), [
+                [_vShow, innerActive.value]
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 8, ["name", "onBeforeLeave", "onLeave", "onAfterLeave", "onBeforeEnter", "onEnter", "onAfterEnter"])
+        ], 16, _hoisted_1)
+      ], 8, ["to", "disabled"])) : _createCommentVNode("v-if", true);
+    };
   }
-})
+});
+</script>
 
-interface MagicModalProps {
-  id: MaybeRef<string>
-  component?: Component
-  props?: Record<string, unknown>
-  options?: MagicModalOptions
+<style>
+@keyframes mm-content-enter {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, 2rem, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
-const props = withDefaults(defineProps<MagicModalProps>(), {
-  options: () => defaultOptions,
-})
+@keyframes mm-content-leave {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.02);
+  }
+}
 
-const mappedOptions = customDefu(props.options, defaultOptions)
-const modalRef = ref<HTMLElement | undefined>(undefined)
-const {
-  trapFocus,
-  releaseFocus,
-  lockScroll,
-  unlockScroll,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-} = useModalDOM({
-  focusTarget: modalRef,
-  focusTrap: mappedOptions.focusTrap,
-})
+.magic-modal {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--magic-modal-z-index, 999);
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  border: none;
+}
 
-const { isActive, close } = useMagicModal(props.id)
+.magic-modal__content {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+  max-height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: var(--magic-modal-content-align-items, center);
+  justify-content: var(--magic-modal-content-justify-content, center);
+  overflow-y: var(--magic-modal-content-overflow-y, auto);
+}
 
-// Split isActive into two values to animate modal smoothly
-const innerActive = ref(false)
-const wrapperActive = ref(false)
+/* Reset default dialog styles */
+dialog.magic-modal__content {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: 0;
+}
 
-const {
-  onBeforeEnter,
-  onEnter,
-  onAfterEnter,
-  onBeforeLeave,
-  onLeave,
-  onAfterLeave,
-} = useModalCallback({
-  id: props.id,
-  mappedOptions,
-  addScrollLockPadding,
-  removeScrollLockPadding,
-  lockScroll,
-  unlockScroll,
-  trapFocus,
-  releaseFocus,
-  wrapperActive,
-})
+dialog.magic-modal__content::backdrop {
+  background-color: transparent;
+}
 
-// Handle state
-async function onOpen() {
-  wrapperActive.value = true
-  await nextTick()
-  innerActive.value = true
+.magic-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--magic-modal-backdrop-color, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--magic-modal-backdrop-filter, unset);
+  z-index: -1;
 }
 
-function onClose() {
-  innerActive.value = false
+/* Content */
+.magic-modal-content-enter-active {
+  animation: mm-content-enter 175ms ease;
 }
 
-if (mappedOptions.keyListener?.close) {
-  for (const key of mappedOptions.keyListener.close) {
-    onKeyStroke(key, (e) => {
-      close()
-      e.preventDefault()
-    })
-  }
+.magic-modal-content-leave-active {
+  animation: mm-content-leave 175ms ease;
 }
 
-watch(isActive, async (value) => {
-  if (value) {
-    await onOpen()
-  } else {
-    onClose()
+@media (prefers-reduced-motion) {
+  .magic-modal-content-enter-active {
+    animation: fade-in 175ms ease;
   }
-})
-
-// Reset state on unmount
-onBeforeUnmount(() => {
-  close()
-})
 
-onUnmounted(() => {
-  if (mappedOptions.scrollLock) {
-    unlockScroll()
-    if (
-      typeof mappedOptions.scrollLock === 'object' &&
-      mappedOptions.scrollLock.padding
-    ) {
-      removeScrollLockPadding()
-    }
+  .magic-modal-content-leave-active {
+    animation: fade-out 175ms ease;
   }
+}
 
-  if (mappedOptions.focusTrap) {
-    releaseFocus()
-  }
-})
-</script>
+/* Backdrop */
+.magic-modal-backdrop-enter-active {
+  animation: fade-in 175ms ease;
+}
 
-<style>
-@keyframes magic-modal-content-enter{0%{opacity:0;transform:translate3d(0,2rem,0)}to{opacity:1;transform:translateZ(0)}}@keyframes magic-modal-content-leave{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.02)}}.magic-modal{align-items:center;background:transparent;border:none;color:inherit;display:flex;height:100%;inset:0;justify-content:center;padding:0;position:fixed;width:100%;z-index:var(--magic-modal-z-index,999)}.magic-modal__content{-webkit-overflow-scrolling:touch;align-items:var(--magic-modal-content-align-items,center);display:flex;justify-content:var(--magic-modal-content-justify-content,center);max-height:100%;overflow-y:var(--magic-modal-content-overflow-y,auto);scroll-behavior:smooth;width:100%}dialog.magic-modal__content{background:transparent;border:0;margin:0;outline:0;padding:0}dialog.magic-modal__content::backdrop{background-color:transparent}.magic-modal__backdrop{-webkit-backdrop-filter:var(--magic-modal-backdrop-filter,unset);backdrop-filter:var(--magic-modal-backdrop-filter,unset);background-color:var(--magic-modal-backdrop-color,rgba(0,0,0,.5));bottom:0;height:100%;left:0;position:fixed;right:0;top:0;width:100%;z-index:-1}.magic-modal--content-enter-active{animation:magic-modal-content-enter .3s ease}.magic-modal--content-leave-active{animation:magic-modal-content-leave .3s ease}@media (prefers-reduced-motion){.magic-modal--content-enter-active{animation:fade-in .3s ease}.magic-modal--content-leave-active{animation:fade-out .3s ease}}.magic-modal--backdrop-enter-active{animation:fade-in .3s ease}.magic-modal--backdrop-leave-active{animation:fade-out .3s ease}
+.magic-modal-backdrop-leave-active {
+  animation: fade-out 175ms ease;
+}
 </style>

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

@@ -1,10 +1,9 @@
-import { type Component, type MaybeRef } from 'vue';
-import type { MagicModalOptions } from './../types/index';
+import { type MaybeRef } from 'vue';
+import type { MagicModalOptions } from './../types/index.js';
 import '@maas/vue-equipment/utils/css/animations/fade-in.css';
 import '@maas/vue-equipment/utils/css/animations/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
-    component?: Component;
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
@@ -20,11 +19,18 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {
-    options: MagicModalOptions;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicModalProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicModalProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<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_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -12,11 +12,11 @@ type UseModalCallbackArgs = {
     wrapperActive: Ref<boolean>;
 };
 export declare function useModalCallback(args: UseModalCallbackArgs): {
-    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;
+    onBeforeEnter: () => void;
+    onEnter: () => void;
+    onAfterEnter: () => Promise<void>;
+    onBeforeLeave: () => void;
+    onLeave: () => void;
+    onAfterLeave: () => void;
 };
 export {};

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

@@ -13,7 +13,7 @@ export function useModalCallback(args) {
     wrapperActive
   } = args;
   const emitter = useMagicEmitter();
-  function onBeforeEnter(_el) {
+  function onBeforeEnter() {
     emitter.emit("beforeEnter", toValue(id));
     if (mappedOptions.scrollLock) {
       if (typeof mappedOptions.scrollLock === "object" && mappedOptions.scrollLock.padding) {
@@ -22,23 +22,23 @@ export function useModalCallback(args) {
       lockScroll();
     }
   }
-  function onEnter(_el) {
+  function onEnter() {
     emitter.emit("enter", toValue(id));
   }
-  async function onAfterEnter(_el) {
+  async function onAfterEnter() {
     emitter.emit("afterEnter", toValue(id));
     if (mappedOptions.focusTrap) {
       await nextTick();
       trapFocus();
     }
   }
-  function onBeforeLeave(_el) {
+  function onBeforeLeave() {
     emitter.emit("beforeLeave", toValue(id));
   }
-  function onLeave(_el) {
+  function onLeave() {
     emitter.emit("leave", toValue(id));
   }
-  function onAfterLeave(_el) {
+  function onAfterLeave() {
     emitter.emit("afterLeave", toValue(id));
     if (mappedOptions.scrollLock) {
       unlockScroll();

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

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-let modalStore = ref([]);
+const modalStore = ref([]);
 export function useModalStore() {
   function addInstance(id) {
     modalStore.value.push(id);

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

@@ -1,8 +1,8 @@
-import { type Options } from 'focus-trap';
+import { type Options as FocusTrapOptions } from 'focus-trap';
 export interface MagicModalOptions {
     backdrop?: boolean;
     tag?: 'dialog' | 'div';
-    focusTrap?: boolean | Options;
+    focusTrap?: boolean | FocusTrapOptions;
     scrollLock?: boolean | {
         padding: boolean;
     };

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

@@ -12,8 +12,8 @@ const defaultOptions = {
     disabled: false
   },
   transition: {
-    content: "magic-modal--content",
-    backdrop: "magic-modal--backdrop"
+    content: "magic-modal-content",
+    backdrop: "magic-modal-backdrop"
   },
   keyListener: {
     close: ["Escape"]

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

@@ -1,4 +1,6 @@
-import type { Plugin } from 'vue';
 import MagicNoise from './src/components/MagicNoise.vue.js';
+import type { Plugin } from 'vue';
+import type { MagicNoiseOptions } from './src/types/index.js';
 declare const MagicNoisePlugin: Plugin;
 export { MagicNoisePlugin, MagicNoise };
+export type { MagicNoiseOptions };