@maas/vue-equipment 1.0.0-beta.13 → 1.0.0-beta.15

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue

@@ -1,7 +1,10 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = ["data-id"];
+<template>
+  <div :data-id="mappedId" class="magic-menu-view">
+    <slot :view-active="view.active" />
+  </div>
+</template>
+
+<script setup>
 import { computed, inject, onBeforeUnmount, provide, useId } from "vue";
 import { useMenuView } from "../composables/private/useMenuView";
 import {
@@ -12,63 +15,54 @@ import {
   MagicMenuViewActive
 } from "../symbols";
 import { useMenuState } from "../composables/private/useMenuState";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuView",
-  props: {
-    id: { type: String, required: false },
-    placement: { type: null, required: false }
+const { id, placement } = defineProps({
+  id: {
+    type: String,
+    required: false
   },
-  setup(__props) {
-    const parentTree = inject(MagicMenuParentTree, []);
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const itemId = inject(MagicMenuItemId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicMenuView must be nested inside MagicMenuProvider");
-    }
-    const mappedId = computed(() => __props.id ?? `magic-menu-view-${useId()}`);
-    const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
-    const mappedActive = computed(() => view.active);
-    const { initializeView, deleteView } = useMenuView(instanceId);
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    const mappedPlacement = computed(() => {
-      if (__props.placement) {
-        return __props.placement;
-      }
-      switch (state.options.mode) {
-        case "navigation":
-          return "bottom";
-        case "menubar":
-          return !itemId ? "bottom-start" : "right-start";
-        case "dropdown":
-          return !itemId ? "bottom" : "right-start";
-        case "context":
-          return "right-start";
-        default:
-          return void 0;
-      }
-    });
-    const view = initializeView({
-      id: mappedId.value,
-      parent: { views: parentTree, item: itemId ?? "" },
-      placement: mappedPlacement.value ?? "bottom"
-    });
-    provide(MagicMenuParentTree, mappedParentTree.value);
-    provide(MagicMenuViewId, mappedId.value);
-    provide(MagicMenuViewActive, mappedActive);
-    onBeforeUnmount(() => {
-      deleteView(mappedId.value);
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        "data-id": mappedId.value,
-        class: "magic-menu-view"
-      }, [
-        _renderSlot(_ctx.$slots, "default", {
-          viewActive: _unref(view).active
-        })
-      ], 8, _hoisted_1);
-    };
+  placement: {
+    type: null,
+    required: false
   }
 });
+const parentTree = inject(MagicMenuParentTree, []);
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const itemId = inject(MagicMenuItemId, void 0);
+if (!instanceId) {
+  throw new Error("MagicMenuView must be nested inside MagicMenuProvider");
+}
+const mappedId = computed(() => id ?? `magic-menu-view-${useId()}`);
+const mappedParentTree = computed(() => [...parentTree, mappedId.value]);
+const mappedActive = computed(() => view.active);
+const { initializeView, deleteView } = useMenuView(instanceId);
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+const mappedPlacement = computed(() => {
+  if (placement) {
+    return placement;
+  }
+  switch (state.options.mode) {
+    case "navigation":
+      return "bottom";
+    case "menubar":
+      return !itemId ? "bottom-start" : "right-start";
+    case "dropdown":
+      return !itemId ? "bottom" : "right-start";
+    case "context":
+      return "right-start";
+    default:
+      return void 0;
+  }
+});
+const view = initializeView({
+  id: mappedId.value,
+  parent: { views: parentTree, item: itemId ?? "" },
+  placement: mappedPlacement.value ?? "bottom"
+});
+provide(MagicMenuParentTree, mappedParentTree.value);
+provide(MagicMenuViewId, mappedId.value);
+provide(MagicMenuViewActive, mappedActive);
+onBeforeUnmount(() => {
+  deleteView(mappedId.value);
+});
 </script>

package/dist/plugins/MagicMenu/src/components/MagicMenuView.vue.d.ts

@@ -4,7 +4,7 @@ interface MagicMenuViewProps {
     placement?: Placement;
 }
 declare const mappedId: import("vue").ComputedRef<string>;
-declare const view: import("../types").MenuView;
+declare const view: import("../types/index.js").MenuView;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_1: {
     viewActive: boolean;

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

@@ -1,7 +1,52 @@
-<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 = ["data-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-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"
+        >
+          <slot />
+        </component>
+      </transition>
+    </div>
+  </teleport>
+</template>
+
+<script setup>
 import {
   useTemplateRef,
   shallowRef,
@@ -19,170 +64,99 @@ 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
+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
   },
-  __name: "MagicModal",
   props: {
-    id: { type: null, required: true },
-    props: { type: Object, required: false },
-    options: { type: Object, required: false, default: () => ({}) }
+    type: Object,
+    required: false
   },
-  setup(__props) {
-    const customDefu = createDefu((obj, key, value) => {
-      if (key === "close") {
-        obj[key] = value;
-        return true;
-      }
-    });
-    const mappedOptions = customDefu(__props.options, defaultOptions);
-    const modalRef = useTemplateRef("modal");
-    const {
-      trapFocus,
-      releaseFocus,
-      lockScroll,
-      unlockScroll,
-      addScrollLockPadding,
-      removeScrollLockPadding
-    } = useModalDOM({
-      focusTarget: modalRef,
-      focusTrap: mappedOptions.focusTrap
-    });
-    const { isActive, close } = useMagicModal(__props.id);
-    const innerActive = shallowRef(false);
-    const wrapperActive = shallowRef(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(() => {
+  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) {
+  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();
-      }
-    });
-    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: "modal",
-          class: "magic-modal",
-          "data-id": toValue(_ctx.id)
-        }, _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);
-    };
+  }
+}
+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();
   }
 });
 </script>

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

@@ -1,4 +1,4 @@
-import { toValue, type MaybeRef } from 'vue';
+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';
@@ -7,13 +7,9 @@ interface MagicModalProps {
     props?: Record<string, unknown>;
     options?: MagicModalOptions;
 }
-declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
-    transition: {
-        content?: string;
-        backdrop?: string;
-    };
+declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> & Omit<import("../../../../utils/index.js").RequireAll<MagicModalOptions>, keyof MagicModalOptions> & {
     backdrop: boolean;
-    tag: "div" | "dialog";
+    tag: "dialog" | "div";
     focusTrap: boolean | import("focus-trap").Options;
     scrollLock: boolean | {
         padding: boolean;
@@ -22,10 +18,15 @@ declare const mappedOptions: Omit<MagicModalOptions, keyof MagicModalOptions> &
         target?: string;
         disabled?: boolean;
     };
+    transition: {
+        content?: string;
+        backdrop?: string;
+    };
     keyListener: {
         close?: string[] | false;
     };
 };
+declare const mappedId: string;
 declare const close: () => void;
 declare const innerActive: import("vue").ShallowRef<boolean, boolean>;
 declare const wrapperActive: import("vue").ShallowRef<boolean, boolean>;
@@ -38,8 +39,8 @@ type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$
     default?: (props: typeof __VLS_32) => any;
 }>;
 declare const __VLS_self: import("vue").DefineComponent<MagicModalProps, {
-    toValue: typeof toValue;
     mappedOptions: typeof mappedOptions;
+    mappedId: typeof mappedId;
     close: typeof close;
     innerActive: typeof innerActive;
     wrapperActive: typeof wrapperActive;

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

@@ -1,87 +1,62 @@
-<script>
-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" };
-const _hoisted_3 = {
-  ref: "canvas",
-  class: "magic-noise__canvas"
-};
-const _hoisted_4 = {
-  ref: "offCanvas",
-  class: "magic-noise__off-canvas"
-};
+<template>
+  <div class="magic-noise" :data-loading="!isReady">
+    <div class="magic-noise__inner">
+      <canvas ref="canvas" class="magic-noise__canvas" />
+      <canvas ref="offCanvas" class="magic-noise__off-canvas" />
+    </div>
+  </div>
+</template>
+
+<script setup>
 import { onMounted, onUnmounted, watch, useTemplateRef } from "vue";
 import { useResizeObserver, useDebounceFn } from "@vueuse/core";
 import { useNoiseApi } from "../composables/private/useNoiseApi";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicNoise",
-  props: {
-    options: { type: Object, required: false },
-    pause: { type: Boolean, required: false, default: false }
+const { pause = false, options } = defineProps({
+  options: {
+    type: Object,
+    required: false
   },
-  setup(__props) {
-    const canvasRef = useTemplateRef("canvas");
-    const offCanvasRef = useTemplateRef("offCanvas");
-    const noiseApi = useNoiseApi({
-      canvasRef,
-      offCanvasRef,
-      options: __props.options
-    });
-    const {
-      initialize,
-      drawControls,
-      transferControls,
-      throttledDraw,
-      throttledRotateAndTransfer,
-      isReady
-    } = noiseApi;
-    useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
-    watch(
-      () => __props.pause,
-      (pause) => {
-        if (pause) {
-          drawControls.value?.pause();
-          transferControls.value?.pause();
-        } else {
-          drawControls.value?.resume();
-          transferControls.value?.resume();
-        }
-      }
-    );
-    onMounted(() => {
-      throttledDraw();
-      throttledRotateAndTransfer();
-    });
-    onUnmounted(() => {
-      isReady.value = false;
-      transferControls.value?.pause();
+  pause: {
+    type: Boolean,
+    required: false
+  }
+});
+const canvasRef = useTemplateRef("canvas");
+const offCanvasRef = useTemplateRef("offCanvas");
+const noiseApi = useNoiseApi({
+  canvasRef,
+  offCanvasRef,
+  options
+});
+const {
+  initialize,
+  drawControls,
+  transferControls,
+  throttledDraw,
+  throttledRotateAndTransfer,
+  isReady
+} = noiseApi;
+useResizeObserver(canvasRef, useDebounceFn(initialize, 100));
+watch(
+  () => pause,
+  (pause2) => {
+    if (pause2) {
       drawControls.value?.pause();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock("div", {
-        class: "magic-noise",
-        "data-loading": !_unref(isReady)
-      }, [
-        _createElementVNode("div", _hoisted_2, [
-          _createElementVNode(
-            "canvas",
-            _hoisted_3,
-            null,
-            512
-            /* NEED_PATCH */
-          ),
-          _createElementVNode(
-            "canvas",
-            _hoisted_4,
-            null,
-            512
-            /* NEED_PATCH */
-          )
-        ])
-      ], 8, _hoisted_1);
-    };
+      transferControls.value?.pause();
+    } else {
+      drawControls.value?.resume();
+      transferControls.value?.resume();
+    }
   }
+);
+onMounted(() => {
+  throttledDraw();
+  throttledRotateAndTransfer();
+});
+onUnmounted(() => {
+  isReady.value = false;
+  transferControls.value?.pause();
+  drawControls.value?.pause();
 });
 </script>