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

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

@@ -1,78 +1,50 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { renderSlot as _renderSlot, createElementVNode as _createElementVNode, unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-const _hoisted_1 = {
-  ref: "parent",
-  class: "magic-marquee"
-};
-const _hoisted_2 = { class: "magic-marquee__track" };
-const _hoisted_3 = {
-  ref: "child",
-  class: "magic-marquee__content"
-};
+<template>
+  <div ref="parent" class="magic-marquee">
+    <div class="magic-marquee__track">
+      <div ref="child" class="magic-marquee__content">
+        <slot />
+      </div>
+      <div
+        v-for="duplicate in duplicates"
+        :key="duplicate"
+        class="magic-marquee__content"
+        :aria-hidden="true"
+      >
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
 import { useTemplateRef, onMounted, onBeforeUnmount } from "vue";
 import { useMarqueeApi } from "../composables/private/useMarqueeApi";
 import { useMarqueeState } from "../composables/private/useMarqueeState";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMarquee",
-  props: {
-    id: { type: null, required: true },
-    options: { type: Object, required: false }
+const { id, options } = defineProps({
+  id: {
+    type: null,
+    required: true
   },
-  setup(__props) {
-    const { deleteState, initializeState } = useMarqueeState(__props.id);
-    initializeState(__props.options);
-    const parentRef = useTemplateRef("parent");
-    const childRef = useTemplateRef("child");
-    const { duplicates, initialize } = useMarqueeApi({
-      child: childRef,
-      parent: parentRef,
-      instanceId: __props.id
-    });
-    onMounted(() => {
-      initialize();
-    });
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          _createElementVNode("div", _hoisted_2, [
-            _createElementVNode(
-              "div",
-              _hoisted_3,
-              [
-                _renderSlot(_ctx.$slots, "default")
-              ],
-              512
-              /* NEED_PATCH */
-            ),
-            (_openBlock(true), _createElementBlock(
-              _Fragment,
-              null,
-              _renderList(_unref(duplicates), (duplicate) => {
-                return _openBlock(), _createElementBlock("div", {
-                  key: duplicate,
-                  class: "magic-marquee__content",
-                  "aria-hidden": true
-                }, [
-                  _renderSlot(_ctx.$slots, "default")
-                ]);
-              }),
-              128
-              /* KEYED_FRAGMENT */
-            ))
-          ])
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
+  options: {
+    type: Object,
+    required: false
   }
 });
+const { deleteState, initializeState } = useMarqueeState(id);
+initializeState(options);
+const parentRef = useTemplateRef("parent");
+const childRef = useTemplateRef("child");
+const { duplicates, initialize } = useMarqueeApi({
+  child: childRef,
+  parent: parentRef,
+  instanceId: id
+});
+onMounted(() => {
+  initialize();
+});
+onBeforeUnmount(() => {
+  deleteState();
+});
 </script>
 
 <style>

package/dist/plugins/MagicMarquee/src/composables/useMagicMarquee.d.ts

@@ -1,6 +1,6 @@
 import { type MaybeRef } from 'vue';
 export declare function useMagicMarquee(id: MaybeRef<string>): {
-    state: import("../types").MarqueeState;
+    state: import("../types/index.js").MarqueeState;
     isPlaying: import("vue").ComputedRef<boolean>;
     play: () => void;
     pause: () => void;

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

@@ -1,7 +1,17 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
-const _hoisted_1 = ["data-initialized", "data-id"];
+<template>
+  <transition :name="mappedTransition">
+    <div
+      v-if="channel.active"
+      class="magic-menu-channel"
+      :data-initialized="state.active"
+      :data-id="mappedId"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script setup>
 import { computed, inject, provide } from "vue";
 import { useMenuChannel } from "../composables/private/useMenuChannel";
 import {
@@ -12,64 +22,49 @@ import {
   MagicMenuChannelActive
 } from "../symbols";
 import { useMenuState } from "../composables/private/useMenuState";
-export default /* @__PURE__ */ _defineComponent({
-  __name: "MagicMenuChannel",
-  props: {
-    id: { type: String, required: true },
-    transition: { type: String, required: false }
+const { transition, id } = defineProps({
+  id: {
+    type: String,
+    required: true
   },
-  setup(__props) {
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    const contentId = inject(MagicMenuContentId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicMenuChannel must be nested inside MagicMenuProvider");
-    }
-    if (!viewId) {
-      throw new Error("MagicMenuChannel must be nested inside MagicMenuView");
-    }
-    if (!__props.id) {
-      throw new Error("MagicMenuChannel requires an id");
-    }
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    if (!contentId) {
-      if (state.options.debug) {
-        console.warn("MagicMenuChannel is not nested inside MagicMenuContent");
-      }
-    }
-    const mappedId = computed(() => `magic-menu-channel-${__props.id}`);
-    const mappedTransition = computed(
-      () => __props.transition ?? state.options.transition.channel
-    );
-    const { initializeChannel } = useMenuChannel({
-      instanceId,
-      viewId
-    });
-    const channel = initializeChannel({
-      id: mappedId.value
-    });
-    const mappedActive = computed(() => channel.active);
-    provide(MagicMenuChannelId, mappedId.value);
-    provide(MagicMenuChannelActive, mappedActive);
-    return (_ctx, _cache) => {
-      return _openBlock(), _createBlock(_Transition, { name: mappedTransition.value }, {
-        default: _withCtx(() => [
-          _unref(channel).active ? (_openBlock(), _createElementBlock("div", {
-            key: 0,
-            class: "magic-menu-channel",
-            "data-initialized": _unref(state).active,
-            "data-id": mappedId.value
-          }, [
-            _renderSlot(_ctx.$slots, "default")
-          ], 8, _hoisted_1)) : _createCommentVNode("v-if", true)
-        ]),
-        _: 3
-        /* FORWARDED */
-      }, 8, ["name"]);
-    };
+  transition: {
+    type: String,
+    required: false
+  }
+});
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const viewId = inject(MagicMenuViewId, void 0);
+const contentId = inject(MagicMenuContentId, void 0);
+if (!instanceId) {
+  throw new Error("MagicMenuChannel must be nested inside MagicMenuProvider");
+}
+if (!viewId) {
+  throw new Error("MagicMenuChannel must be nested inside MagicMenuView");
+}
+if (!id) {
+  throw new Error("MagicMenuChannel requires an id");
+}
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+if (!contentId) {
+  if (state.options.debug) {
+    console.warn("MagicMenuChannel is not nested inside MagicMenuContent");
   }
+}
+const mappedId = computed(() => `magic-menu-channel-${id}`);
+const mappedTransition = computed(
+  () => transition ?? state.options.transition.channel
+);
+const { initializeChannel } = useMenuChannel({
+  instanceId,
+  viewId
+});
+const channel = initializeChannel({
+  id: mappedId.value
 });
+const mappedActive = computed(() => channel.active);
+provide(MagicMenuChannelId, mappedId.value);
+provide(MagicMenuChannelActive, mappedActive);
 </script>
 
 <style>

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

@@ -2,10 +2,10 @@ interface MagicMenuChannelProps {
     id: string;
     transition?: string;
 }
-declare const state: import("../types").MenuState;
+declare const state: import("../types/index.js").MenuState;
 declare const mappedId: import("vue").ComputedRef<string>;
 declare const mappedTransition: import("vue").ComputedRef<string>;
-declare const channel: import("../types").MenuChannel;
+declare const channel: import("../types/index.js").MenuChannel;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
 declare var __VLS_5: {};
 type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {

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

@@ -1,8 +1,61 @@
-<script>
-import { defineComponent as _defineComponent } from "vue";
-import { unref as _unref, renderSlot as _renderSlot, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, renderList as _renderList, Fragment as _Fragment, normalizeStyle as _normalizeStyle, Teleport as _Teleport, createBlock as _createBlock } from "vue";
-const _hoisted_1 = ["data-id"];
-const _hoisted_2 = ["data-pointer-disabled"];
+<template>
+  <teleport v-if="wrapperActive" to="body">
+    <transition
+      :name="mappedTransition"
+      :on-before-enter="onBeforeEnter"
+      :on-enter="onEnter"
+      :on-after-enter="onAfterEnter"
+      :on-before-leave="onBeforeLeave"
+      :on-leave="onLeave"
+      :on-after-leave="onAfterLeave"
+    >
+      <div
+        v-if="innerActive"
+        class="magic-menu-content"
+        :data-id="`${viewId}-content`"
+        v-bind="$attrs"
+      >
+        <magic-menu-float
+          :placement="view?.placement"
+          :middleware="middleware"
+          :arrow="arrow"
+          :reference-el="referenceEl"
+        >
+          <template v-if="$slots.arrow && arrow" #arrow>
+            <slot name="arrow" />
+          </template>
+          <template #default>
+            <div
+              class="magic-menu-content__inner"
+              :data-pointer-disabled="pointerDisabled"
+            >
+              <slot />
+            </div>
+          </template>
+        </magic-menu-float>
+      </div>
+    </transition>
+    <template v-if="state.options.debug">
+      <span
+        v-for="point in coords"
+        :key="`${point.x}${point.y}`"
+        :style="{
+  background: 'red',
+  position: 'fixed',
+  top: point.y + 'px',
+  left: point.x + 'px',
+  width: '4px',
+  height: '4px',
+  zIndex: 1e3,
+  pointerEvents: 'none',
+  transform: 'translate(-50%, -50%)'
+}"
+      />
+    </template>
+  </teleport>
+</template>
+
+<script setup>
 import {
   shallowRef,
   inject,
@@ -26,215 +79,142 @@ import {
 } from "../symbols";
 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 { arrow = void 0, transition } = defineProps({
+  arrow: {
+    type: Boolean,
+    required: false,
+    skipCheck: true
   },
-  __name: "MagicMenuContent",
-  props: {
-    arrow: { type: Boolean, required: false, skipCheck: true, default: () => void 0 },
-    middleware: { type: Array, required: false },
-    transition: { type: String, required: false },
-    referenceEl: { type: null, required: false }
+  middleware: {
+    type: Array,
+    required: false
   },
-  setup(__props) {
-    const instanceId = inject(MagicMenuInstanceId, void 0);
-    const viewId = inject(MagicMenuViewId, void 0);
-    if (!instanceId) {
-      throw new Error("MagicMenuContent must be nested inside MagicMenuProvider");
-    }
-    if (!viewId) {
-      throw new Error("MagicMenuContent must be nested inside MagicMenuView");
-    }
-    const { getView, unselectView } = useMenuView(instanceId);
-    const view = getView(viewId);
-    const { initializeState } = useMenuState(instanceId);
-    const state = initializeState();
-    const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
-    const mappedTransition = computed(() => {
-      switch (true) {
-        case !!__props.transition:
-          return __props.transition;
-        case !!view?.parent.item:
-          return state.options.transition.content.nested;
-        case !!state.options.transition.content.default:
-          return state.options.transition.content.default;
-        default:
-          return ModeTransitions[state.options.mode];
-      }
-    });
-    const innerActive = shallowRef(false);
-    const wrapperActive = shallowRef(false);
-    const {
-      lockScroll,
-      unlockScroll,
-      addScrollLockPadding,
-      removeScrollLockPadding
-    } = useMenuDOM();
-    const {
-      onBeforeEnter,
-      onEnter,
-      onAfterEnter,
-      onBeforeLeave,
-      onLeave,
-      onAfterLeave
-    } = useMenuCallback({
-      state,
-      instanceId,
-      viewId,
-      innerActive,
-      wrapperActive,
-      lockScroll,
-      unlockScroll,
-      addScrollLockPadding,
-      removeScrollLockPadding
-    });
-    async function onOpen() {
-      wrapperActive.value = true;
-      await nextTick();
-      innerActive.value = true;
-      await nextTick();
-      initialize();
-    }
-    function onClose() {
-      destroy();
-      innerActive.value = false;
-    }
-    watch(
-      () => view?.active,
-      async (value) => {
-        if (value) {
-          await onOpen();
-        } else {
-          onClose();
-        }
-      }
-    );
-    const {
-      coords,
-      destroy,
-      initialize,
-      isInsideTriangle,
-      isInsideTo,
-      isInsideFrom
-    } = useMenuCursor(view, state.options.debug);
-    function disableCursor() {
-      state.input.disabled = [...state.input.disabled, "pointer"];
+  transition: {
+    type: String,
+    required: false
+  },
+  referenceEl: {
+    type: null,
+    required: false
+  }
+});
+const instanceId = inject(MagicMenuInstanceId, void 0);
+const viewId = inject(MagicMenuViewId, void 0);
+if (!instanceId) {
+  throw new Error("MagicMenuContent must be nested inside MagicMenuProvider");
+}
+if (!viewId) {
+  throw new Error("MagicMenuContent must be nested inside MagicMenuView");
+}
+const { getView, unselectView } = useMenuView(instanceId);
+const view = getView(viewId);
+const { initializeState } = useMenuState(instanceId);
+const state = initializeState();
+const pointerDisabled = computed(() => state.input.disabled.includes("pointer"));
+const mappedTransition = computed(() => {
+  switch (true) {
+    case !!transition:
+      return transition;
+    case !!view?.parent.item:
+      return state.options.transition.content.nested;
+    case !!state.options.transition.content.default:
+      return state.options.transition.content.default;
+    default:
+      return ModeTransitions[state.options.mode];
+  }
+});
+const innerActive = shallowRef(false);
+const wrapperActive = shallowRef(false);
+const {
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding
+} = useMenuDOM();
+const {
+  onBeforeEnter,
+  onEnter,
+  onAfterEnter,
+  onBeforeLeave,
+  onLeave,
+  onAfterLeave
+} = useMenuCallback({
+  state,
+  instanceId,
+  viewId,
+  innerActive,
+  wrapperActive,
+  lockScroll,
+  unlockScroll,
+  addScrollLockPadding,
+  removeScrollLockPadding
+});
+async function onOpen() {
+  wrapperActive.value = true;
+  await nextTick();
+  innerActive.value = true;
+  await nextTick();
+  initialize();
+}
+function onClose() {
+  destroy();
+  innerActive.value = false;
+}
+watch(
+  () => view?.active,
+  async (value) => {
+    if (value) {
+      await onOpen();
+    } else {
+      onClose();
     }
-    function enableCursor() {
-      state.input.disabled = state.input.disabled.filter((x) => x !== "pointer");
+  }
+);
+const {
+  coords,
+  destroy,
+  initialize,
+  isInsideTriangle,
+  isInsideTo,
+  isInsideFrom
+} = useMenuCursor(view, state.options.debug);
+function disableCursor() {
+  state.input.disabled = [...state.input.disabled, "pointer"];
+}
+function enableCursor() {
+  state.input.disabled = state.input.disabled.filter((x) => x !== "pointer");
+}
+watch(isInsideTriangle, (value) => {
+  if (value) {
+    disableCursor();
+  } else {
+    enableCursor();
+  }
+});
+watch(isInsideTo, (value) => {
+  if (value) {
+    enableCursor();
+  }
+});
+const isOutside = computed(
+  () => !isInsideTo.value && !isInsideFrom.value && !isInsideTriangle.value
+);
+watch(isOutside, (value, oldValue) => {
+  if (value && !oldValue) {
+    switch (state.options.mode) {
+      case "navigation":
+        const delay = state.options.delay?.mouseleave ?? ModeDelayMouseleave.navigation;
+        unselectView(viewId, delay);
     }
-    watch(isInsideTriangle, (value) => {
-      if (value) {
-        disableCursor();
-      } else {
-        enableCursor();
-      }
-    });
-    watch(isInsideTo, (value) => {
-      if (value) {
-        enableCursor();
-      }
-    });
-    const isOutside = computed(
-      () => !isInsideTo.value && !isInsideFrom.value && !isInsideTriangle.value
-    );
-    watch(isOutside, (value, oldValue) => {
-      if (value && !oldValue) {
-        switch (state.options.mode) {
-          case "navigation":
-            const delay = state.options.delay?.mouseleave ?? ModeDelayMouseleave.navigation;
-            unselectView(viewId, delay);
-        }
-      }
-    });
-    onBeforeUnmount(() => {
-      destroy();
-    });
-    provide(MagicMenuContentId, `${viewId}-content`);
-    return (_ctx, _cache) => {
-      const _component_magic_menu_float = _resolveComponent("magic-menu-float");
-      return wrapperActive.value ? (_openBlock(), _createBlock(_Teleport, {
-        key: 0,
-        to: "body"
-      }, [
-        _createVNode(_Transition, {
-          name: mappedTransition.value,
-          "on-before-enter": _unref(onBeforeEnter),
-          "on-enter": _unref(onEnter),
-          "on-after-enter": _unref(onAfterEnter),
-          "on-before-leave": _unref(onBeforeLeave),
-          "on-leave": _unref(onLeave),
-          "on-after-leave": _unref(onAfterLeave)
-        }, {
-          default: _withCtx(() => [
-            innerActive.value ? (_openBlock(), _createElementBlock("div", _mergeProps({
-              key: 0,
-              class: "magic-menu-content",
-              "data-id": `${_unref(viewId)}-content`
-            }, _ctx.$attrs), [
-              _createVNode(_component_magic_menu_float, {
-                placement: _unref(view)?.placement,
-                middleware: _ctx.middleware,
-                arrow: _ctx.arrow,
-                "reference-el": _ctx.referenceEl
-              }, _createSlots({
-                default: _withCtx(() => [
-                  _createElementVNode("div", {
-                    class: "magic-menu-content__inner",
-                    "data-pointer-disabled": pointerDisabled.value
-                  }, [
-                    _renderSlot(_ctx.$slots, "default")
-                  ], 8, _hoisted_2)
-                ]),
-                _: 2
-                /* DYNAMIC */
-              }, [
-                _ctx.$slots.arrow && _ctx.arrow ? {
-                  name: "arrow",
-                  fn: _withCtx(() => [
-                    _renderSlot(_ctx.$slots, "arrow")
-                  ]),
-                  key: "0"
-                } : void 0
-              ]), 1032, ["placement", "middleware", "arrow", "reference-el"])
-            ], 16, _hoisted_1)) : _createCommentVNode("v-if", true)
-          ]),
-          _: 3
-          /* FORWARDED */
-        }, 8, ["name", "on-before-enter", "on-enter", "on-after-enter", "on-before-leave", "on-leave", "on-after-leave"]),
-        _unref(state).options.debug ? (_openBlock(true), _createElementBlock(
-          _Fragment,
-          { key: 0 },
-          _renderList(_unref(coords), (point) => {
-            return _openBlock(), _createElementBlock(
-              "span",
-              {
-                key: `${point.x}${point.y}`,
-                style: _normalizeStyle({
-                  background: "red",
-                  position: "fixed",
-                  top: point.y + "px",
-                  left: point.x + "px",
-                  width: "4px",
-                  height: "4px",
-                  zIndex: 1e3,
-                  pointerEvents: "none",
-                  transform: "translate(-50%, -50%)"
-                })
-              },
-              null,
-              4
-              /* STYLE */
-            );
-          }),
-          128
-          /* KEYED_FRAGMENT */
-        )) : _createCommentVNode("v-if", true)
-      ])) : _createCommentVNode("v-if", true);
-    };
   }
 });
+onBeforeUnmount(() => {
+  destroy();
+});
+provide(MagicMenuContentId, `${viewId}-content`);
 </script>
 
 <style>