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

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/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/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/src/components/MagicModal.vue

@@ -1,9 +1,10 @@
 <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"];
+const _hoisted_1 = ["data-id"];
 import {
-  ref,
+  useTemplateRef,
+  shallowRef,
   watch,
   nextTick,
   toValue,
@@ -36,7 +37,7 @@ export default /* @__PURE__ */ _defineComponent({
       }
     });
     const mappedOptions = customDefu(__props.options, defaultOptions);
-    const modalRef = ref(void 0);
+    const modalRef = useTemplateRef("modal");
     const {
       trapFocus,
       releaseFocus,
@@ -49,8 +50,8 @@ export default /* @__PURE__ */ _defineComponent({
       focusTrap: mappedOptions.focusTrap
     });
     const { isActive, close } = useMagicModal(__props.id);
-    const innerActive = ref(false);
-    const wrapperActive = ref(false);
+    const innerActive = shallowRef(false);
+    const wrapperActive = shallowRef(false);
     const {
       onBeforeEnter,
       onEnter,
@@ -113,10 +114,9 @@ export default /* @__PURE__ */ _defineComponent({
         disabled: _unref(mappedOptions).teleport?.disabled
       }, [
         _createElementVNode("div", _mergeProps({
-          id: toValue(_ctx.id),
-          ref_key: "modalRef",
-          ref: modalRef,
-          class: "magic-modal"
+          ref: "modal",
+          class: "magic-modal",
+          "data-id": toValue(_ctx.id)
         }, _ctx.$attrs, {
           "aria-modal": "true",
           onClick: _cache[1] || (_cache[1] = _withModifiers(

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

@@ -1,4 +1,4 @@
-import { type MaybeRef } from 'vue';
+import { toValue, 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';
@@ -7,31 +7,53 @@ interface MagicModalProps {
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        backdrop?(_: {}): any;
-        default?(_: {}): any;
+declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
+    transition: {
+        content?: string;
+        backdrop?: string;
     };
-    refs: {
-        modalRef: HTMLDivElement;
+    backdrop: boolean;
+    tag: "div" | "dialog";
+    focusTrap: boolean | import("focus-trap").Options;
+    scrollLock: boolean | {
+        padding: boolean;
     };
-    rootEl: 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"]>;
-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;
+    teleport: {
+        target?: string;
+        disabled?: boolean;
+    };
+    keyListener: {
+        close?: string[] | false;
     };
 };
-type __VLS_WithTemplateSlots<T, S> = T & {
+declare const close: () => void;
+declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
+declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
+declare const onBeforeEnter: () => void, onEnter: () => void, onAfterEnter: () => Promise<void>, onBeforeLeave: () => void, onLeave: () => void, onAfterLeave: () => void;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_9: {}, __VLS_32: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    backdrop?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_32) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicModalProps, {
+    toValue: typeof toValue;
+    mappedOptions: typeof mappedOptions;
+    close: typeof close;
+    innerActive: typeof innerActive;
+    wrapperActive: typeof wrapperActive;
+    onBeforeEnter: typeof onBeforeEnter;
+    onEnter: typeof onEnter;
+    onAfterEnter: typeof onAfterEnter;
+    onBeforeLeave: typeof onBeforeLeave;
+    onLeave: typeof onLeave;
+    onAfterLeave: typeof onAfterLeave;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicModalProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+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_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/MagicNoise/src/components/MagicNoise.vue

@@ -3,7 +3,15 @@ import { defineComponent as _defineComponent } from "vue";
 import { unref as _unref, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
 const _hoisted_1 = ["data-loading"];
 const _hoisted_2 = { class: "magic-noise__inner" };
-import { onMounted, onUnmounted, watch, shallowRef } from "vue";
+const _hoisted_3 = {
+  ref: "canvas",
+  class: "magic-noise__canvas"
+};
+const _hoisted_4 = {
+  ref: "offCanvas",
+  class: "magic-noise__off-canvas"
+};
+import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
 export default /* @__PURE__ */ _defineComponent({
@@ -13,8 +21,8 @@ export default /* @__PURE__ */ _defineComponent({
     pause: { type: Boolean, required: false, default: false }
   },
   setup(__props) {
-    const canvasRef = shallowRef(void 0);
-    const offCanvasRef = shallowRef(void 0);
+    const canvasRef = useTemplateRef("canvas");
+    const offCanvasRef = useTemplateRef("offCanvas");
     const noiseApi = useNoiseApi({
       canvasRef,
       offCanvasRef,
@@ -58,22 +66,14 @@ export default /* @__PURE__ */ _defineComponent({
         _createElementVNode("div", _hoisted_2, [
           _createElementVNode(
             "canvas",
-            {
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "magic-noise__canvas"
-            },
+            _hoisted_3,
             null,
             512
             /* NEED_PATCH */
           ),
           _createElementVNode(
             "canvas",
-            {
-              ref_key: "offCanvasRef",
-              ref: offCanvasRef,
-              class: "magic-noise__off-canvas"
-            },
+            _hoisted_4,
             null,
             512
             /* NEED_PATCH */
@@ -94,7 +94,7 @@ export default /* @__PURE__ */ _defineComponent({
   position: relative;
   user-select: none;
   transition: var(--magic-noise-loading-transition);
-  background: var(--magic-noise-background, transparent);
+  background: var(--magic-noise-background, #000);
   &[data-loading='true'] {
     background: var(--magic-noise-loading-background, #000);
     & > .magic-noise__inner {

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

@@ -3,14 +3,5 @@ interface MagicNoiseProps {
     options?: MagicNoiseOptions;
     pause?: boolean;
 }
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicNoiseProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicNoiseProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: import("vue").DefineComponent<MagicNoiseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicNoiseProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 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;
-    };
-};

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.d.ts

@@ -1,8 +1,8 @@
 import { type Ref, type MaybeRef } from 'vue';
 import type { MagicNoiseOptions, RafControls } from '../../types/index.js';
 type UseNoiseApiArgs = {
-    canvasRef: Ref<HTMLCanvasElement | undefined>;
-    offCanvasRef: Ref<HTMLCanvasElement | undefined>;
+    canvasRef: Ref<HTMLCanvasElement | null>;
+    offCanvasRef: Ref<HTMLCanvasElement | null>;
     options?: MaybeRef<MagicNoiseOptions>;
 };
 export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNoiseApiArgs): {
@@ -11,7 +11,7 @@ export declare function useNoiseApi({ canvasRef, offCanvasRef, options, }: UseNo
     rotateAndTransfer: () => void;
     throttledDraw: () => void;
     throttledRotateAndTransfer: () => void;
-    isReady: Ref<boolean, boolean>;
+    isReady: import("vue").ShallowRef<boolean, boolean>;
     drawControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
     transferControls: import("vue").ShallowRef<RafControls | undefined, RafControls | undefined>;
 };

package/dist/plugins/MagicNoise/src/composables/private/useNoiseApi.mjs

@@ -1,4 +1,4 @@
-import { shallowRef, ref, reactive } from "vue";
+import { shallowRef, reactive } from "vue";
 import { defu } from "defu";
 import {
   useElementSize,
@@ -14,7 +14,7 @@ export function useNoiseApi({
 }) {
   const tiles = shallowRef([]);
   const pixels = shallowRef([]);
-  const isReady = ref(false);
+  const isReady = shallowRef(false);
   const context = shallowRef(null);
   const offContext = shallowRef(null);
   const { width, height } = useElementSize(canvasRef);

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

@@ -0,0 +1,7 @@
+import MagicPie from './src/components/MagicPie.vue.js';
+import { useMagicPie } from './src/composables/useMagicPie.js';
+import type { Plugin } from 'vue';
+import type { MagicPieOptions } from './src/types/index.js';
+declare const MagicPiePlugin: Plugin;
+export { MagicPiePlugin, MagicPie, useMagicPie };
+export type { MagicPieOptions };

package/dist/plugins/MagicPie/index.mjs

@@ -0,0 +1,8 @@
+import MagicPie from "./src/components/MagicPie.vue";
+import { useMagicPie } from "./src/composables/useMagicPie.mjs";
+const MagicPiePlugin = {
+  install: (app) => {
+    app.component("MagicPie", MagicPie);
+  }
+};
+export { MagicPiePlugin, MagicPie, useMagicPie };

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

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

package/dist/plugins/MagicPie/nuxt.mjs

@@ -0,0 +1,23 @@
+import {
+  defineNuxtModule,
+  createResolver,
+  addComponent,
+  addImports
+} from "@nuxt/kit";
+export default defineNuxtModule({
+  meta: {
+    name: "@maas/vue-equipment/nuxt/MagicPie"
+  },
+  setup() {
+    const resolver = createResolver(import.meta.url);
+    addComponent({
+      filePath: resolver.resolve("src/components/MagicPie.vue"),
+      name: "MagicPie",
+      global: true
+    });
+    addImports({
+      from: "@maas/vue-equipment/plugins/MagicPie",
+      name: "useMagicPie"
+    });
+  }
+});