@maas/vue-equipment 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/plugins/MagicMenu/src/composables/private/useMenuTrigger.mjs

@@ -1,3 +1,5 @@
+import {} from "vue";
+import { Primitive } from "@maas/vue-primitive";
 import { useMagicKeys, useFocus } from "@vueuse/core";
 import { useMenuView } from "./useMenuView.mjs";
 import { useMenuState } from "./useMenuState.mjs";
@@ -32,7 +34,7 @@ export function useMenuTrigger(args) {
         unselectView(viewId);
     }
   }
-  function onEnter(e) {
+  function onKeypress(e) {
     if (focused.value && !mappedDisabled.value && !view?.active) {
       e.preventDefault();
       e.stopPropagation();
@@ -95,6 +97,6 @@ export function useMenuTrigger(args) {
   return {
     onMouseenter,
     onClick,
-    onEnter
+    onKeypress
   };
 }

package/dist/plugins/MagicMenu/src/composables/private/useMenuView.mjs

@@ -68,7 +68,9 @@ export function useMenuView(instanceId) {
   }
   function getRelativeViewIndex(id) {
     const view = getView(id);
-    if (!view) return -1;
+    if (!view) {
+      return -1;
+    }
     const nestingLevel = view.parent.views.length;
     return state.views.findIndex(
       (v) => v.parent.views.length === nestingLevel && v.id === id
@@ -90,25 +92,33 @@ export function useMenuView(instanceId) {
   }
   function getParentView(id) {
     const view = getView(id);
-    if (!view) return void 0;
+    if (!view) {
+      return void 0;
+    }
     const parentId = view.parent.views[view.parent.views.length - 1];
     return parentId ? getView(parentId) : void 0;
   }
   function getUnrelatedViews(id) {
     const view = getView(id);
-    if (!view) return [];
+    if (!view) {
+      return [];
+    }
     const parentViewsSet = new Set(view.parent.views);
     return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
   }
   function getDescendingViews(id) {
     const view = getView(id);
-    if (!view) return [];
+    if (!view) {
+      return [];
+    }
     const parentViewsSet = new Set(view.parent.views);
     return state.views.filter((v) => v.id !== id && !parentViewsSet.has(v.id));
   }
   async function selectView(id, delayMs = 0) {
     const view = getView(id);
-    if (!view) return;
+    if (!view) {
+      return;
+    }
     if (view.state.unselectAbortController) {
       view.state.unselectAbortController.abort();
     }
@@ -128,7 +138,9 @@ export function useMenuView(instanceId) {
   }
   async function unselectView(id, delayMs = 0) {
     const view = getView(id);
-    if (!view) return;
+    if (!view) {
+      return;
+    }
     if (view.state.selectAbortController) {
       view.state.selectAbortController.abort();
     }

package/dist/plugins/MagicMenu/src/composables/useMagicMenu.mjs

@@ -1,3 +1,4 @@
+import {} from "vue";
 import { useMenuView } from "./private/useMenuView.mjs";
 import { useMenuChannel } from "./private/useMenuChannel.mjs";
 export function useMagicMenu(args) {

package/dist/plugins/MagicMenu/src/symbols/index.d.ts

@@ -1,11 +1,11 @@
-import type { InjectionKey, MaybeRef } from 'vue';
+import type { InjectionKey, MaybeRef, Ref } from 'vue';
 declare const MagicMenuInstanceId: InjectionKey<MaybeRef<string>>;
 declare const MagicMenuParentTree: InjectionKey<string[]>;
 declare const MagicMenuViewId: InjectionKey<string>;
-declare const MagicMenuViewActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuViewActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuContentId: InjectionKey<string>;
 declare const MagicMenuItemId: InjectionKey<string>;
-declare const MagicMenuItemActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuItemActive: InjectionKey<Ref<boolean>>;
 declare const MagicMenuChannelId: InjectionKey<string>;
-declare const MagicMenuChannelActive: InjectionKey<MaybeRef<boolean>>;
+declare const MagicMenuChannelActive: InjectionKey<Ref<boolean>>;
 export { MagicMenuInstanceId, MagicMenuParentTree, MagicMenuViewId, MagicMenuViewActive, MagicMenuContentId, MagicMenuItemId, MagicMenuItemActive, MagicMenuChannelId, MagicMenuChannelActive, };

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

@@ -77,7 +77,7 @@ export interface MenuState {
         view: string | undefined;
     };
 }
-export type MenuEvents = {
+export interface MenuEvents {
     beforeEnter: {
         id: string;
         viewId: string;
@@ -102,5 +102,5 @@ export type MenuEvents = {
         id: string;
         viewId: string;
     };
-};
+}
 export {};

package/dist/plugins/MagicMenu/src/utils/modeDelayDefaults.d.ts

@@ -2,10 +2,10 @@ export declare enum ModeDelayMouseenter {
     menubar = 0,
     dropdown = 0,
     context = 0,
-    navigation = 50
+    navigation = 0
 }
 export declare enum ModeDelayMouseleave {
-    navigation = 200
+    navigation = 100
 }
 export declare enum ModeDelayClick {
     menubar = 0,

package/dist/plugins/MagicMenu/src/utils/modeDelayDefaults.mjs

@@ -2,11 +2,11 @@ export var ModeDelayMouseenter = /* @__PURE__ */ ((ModeDelayMouseenter2) => {
   ModeDelayMouseenter2[ModeDelayMouseenter2["menubar"] = 0] = "menubar";
   ModeDelayMouseenter2[ModeDelayMouseenter2["dropdown"] = 0] = "dropdown";
   ModeDelayMouseenter2[ModeDelayMouseenter2["context"] = 0] = "context";
-  ModeDelayMouseenter2[ModeDelayMouseenter2["navigation"] = 50] = "navigation";
+  ModeDelayMouseenter2[ModeDelayMouseenter2["navigation"] = 0] = "navigation";
   return ModeDelayMouseenter2;
 })(ModeDelayMouseenter || {});
 export var ModeDelayMouseleave = /* @__PURE__ */ ((ModeDelayMouseleave2) => {
-  ModeDelayMouseleave2[ModeDelayMouseleave2["navigation"] = 200] = "navigation";
+  ModeDelayMouseleave2[ModeDelayMouseleave2["navigation"] = 100] = "navigation";
   return ModeDelayMouseleave2;
 })(ModeDelayMouseleave || {});
 export var ModeDelayClick = /* @__PURE__ */ ((ModeDelayClick2) => {

package/dist/plugins/MagicModal/nuxt.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
 export default _default;

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

@@ -1,9 +1,55 @@
-<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"];
+<template>
+  <teleport
+    v-if="wrapperActive"
+    :to="mappedOptions.teleport?.target"
+    :disabled="mappedOptions.teleport?.disabled"
+  >
+    <div
+      ref="modal"
+      class="magic-modal"
+      :data-id="mappedId"
+      v-bind="$attrs"
+      aria-modal="true"
+      @click.self="close"
+    >
+      <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-enter="onBeforeEnter"
+        @enter="onEnter"
+        @after-enter="onAfterEnter"
+        @before-leave="onBeforeLeave"
+        @leave="onLeave"
+        @after-leave="onAfterLeave"
+      >
+        <component
+          :is="mappedOptions.tag"
+          v-show="innerActive"
+          class="magic-modal__content"
+          @click.self="close"
+        >
+          <slot />
+        </component>
+      </transition>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   nextTick,
   toValue,
@@ -16,173 +62,90 @@ 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();
-        });
-      }
+import "@maas/vue-equipment/utils/css/keyframes/fade-in.css";
+import "@maas/vue-equipment/utils/css/keyframes/fade-out.css";
+defineOptions({
+  inheritAttrs: false
+});
+const customDefu = createDefu((obj, key, value) => {
+  if (key === "close") {
+    obj[key] = value;
+    return true;
+  }
+});
+const { id, options = {} } = defineProps({
+  id: { type: null, required: true },
+  props: { type: Object, required: false },
+  options: { type: Object, required: false }
+});
+const mappedOptions = customDefu(options, defaultOptions);
+const mappedId = toValue(id);
+const modalRef = useTemplateRef("modal");
+const {
+  trapFocus,
+  releaseFocus,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding
+} = useModalDOM({
+  focusTarget: modalRef,
+  focusTrap: mappedOptions.focusTrap
+});
+const { isActive, close } = useMagicModal(id);
+const innerActive = shallowRef(false);
+const wrapperActive = shallowRef(false);
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave
+} = useModalCallback({
+  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) {
+  onKeyStroke(mappedOptions.keyListener.close, (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();
     }
-    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);
-    };
+  }
+  if (mappedOptions.focusTrap) {
+    releaseFocus();
   }
 });
 </script>

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

@@ -1,37 +1,22 @@
 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';
+import '@maas/vue-equipment/utils/css/keyframes/fade-in.css';
+import '@maas/vue-equipment/utils/css/keyframes/fade-out.css';
 interface MagicModalProps {
     id: MaybeRef<string>;
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        modalRef: any;
-    };
-    rootEl: any;
+declare var __VLS_9: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-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"]>;
+declare const __VLS_component: import("vue").DefineComponent<MagicModalProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_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 & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };

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

@@ -1,14 +1,18 @@
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { defu } from "defu";
 import { useScrollLock } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
-import { matchClass } from "@maas/vue-equipment/utils";
+import {
+  matchClass,
+  scrollbarGutterSupport,
+  scrollbarWidth
+} from "@maas/vue-equipment/utils";
 const defaultOptions = {
   focusTrap: false,
   focusTarget: void 0,
   scrollLock: true
 };
-const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : ref(false);
+const scrollLock = typeof window !== "undefined" ? useScrollLock(document?.documentElement) : shallowRef(false);
 export function useModalDOM(args) {
   const positionFixedElements = ref([]);
   const mappedOptions = defu(args, defaultOptions);
@@ -36,24 +40,40 @@ export function useModalDOM(args) {
   function addScrollLockPadding() {
     if (typeof window === "undefined") return;
     const exclude = new RegExp(/magic-modal(__backdrop)?/);
-    const scrollbarWidth = window.innerWidth - document.body.offsetWidth;
-    document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
-    document.body.style.paddingRight = "var(--scrollbar-width)";
+    document.body.style.setProperty(
+      "--scrollbar-width",
+      `${scrollbarWidth()}px`
+    );
     positionFixedElements.value = [
       ...document.body.getElementsByTagName("*")
     ].filter(
-      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && !matchClass(x, exclude)
-    );
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+      (x) => getComputedStyle(x, null).getPropertyValue("position") === "fixed" && getComputedStyle(x, null).getPropertyValue("right") === "0px" && !matchClass(x, exclude)
     );
+    switch (scrollbarGutterSupport()) {
+      case true:
+        document.documentElement.style.scrollbarGutter = "stable";
+        positionFixedElements.value.forEach((elem) => {
+          elem.style.scrollbarGutter = "stable";
+          elem.style.overflow = "auto";
+        });
+        break;
+      case false:
+        document.body.style.paddingRight = "var(--scrollbar-width)";
+        positionFixedElements.value.forEach(
+          (elem) => elem.style.paddingRight = "var(--scrollbar-width)"
+        );
+        break;
+    }
   }
   function removeScrollLockPadding() {
-    document.body.style.paddingRight = "";
+    document.documentElement.style.scrollbarGutter = "";
     document.body.style.removeProperty("--scrollbar-width");
-    positionFixedElements.value.forEach(
-      (elem) => elem.style.paddingRight = ""
-    );
+    document.body.style.paddingRight = "";
+    positionFixedElements.value.forEach((elem) => {
+      elem.style.paddingRight = "";
+      elem.style.scrollbarGutter = "";
+      elem.style.overflow = "";
+    });
   }
   return {
     trapFocus,

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

@@ -18,11 +18,11 @@ export interface MagicModalOptions {
         close?: string[] | false;
     };
 }
-export type ModalEvents = {
+export interface ModalEvents {
     beforeEnter: string;
     enter: string;
     afterEnter: string;
     beforeLeave: string;
     leave: string;
     afterLeave: string;
-};
+}

package/dist/plugins/MagicModal/src/types/index.mjs

@@ -0,0 +1 @@
+import {} from "focus-trap";

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

@@ -1,2 +1,2 @@
-declare const _default: import("@nuxt/schema").NuxtModule<import("@nuxt/schema").ModuleOptions, import("@nuxt/schema").ModuleOptions, false>;
+declare const _default: import("nuxt/schema").NuxtModule<import("nuxt/schema").ModuleOptions, import("nuxt/schema").ModuleOptions, false>;
 export default _default;