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

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

@@ -1,77 +1,43 @@
-<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 = { class: "magic-marquee__track" };
-import { ref, onMounted, onBeforeUnmount } from "vue";
+<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 }
-  },
-  setup(__props) {
-    const { deleteState, initializeState } = useMarqueeState(__props.id);
-    initializeState(__props.options);
-    const parentRef = ref(void 0);
-    const childRef = ref(void 0);
-    const { duplicates, initialize } = useMarqueeApi({
-      child: childRef,
-      parent: parentRef,
-      instanceId: __props.id
-    });
-    onMounted(() => {
-      initialize();
-    });
-    onBeforeUnmount(() => {
-      deleteState();
-    });
-    return (_ctx, _cache) => {
-      return _openBlock(), _createElementBlock(
-        "div",
-        {
-          ref_key: "parentRef",
-          ref: parentRef,
-          class: "magic-marquee"
-        },
-        [
-          _createElementVNode("div", _hoisted_1, [
-            _createElementVNode(
-              "div",
-              {
-                ref_key: "childRef",
-                ref: childRef,
-                class: "magic-marquee__content"
-              },
-              [
-                _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 */
-      );
-    };
-  }
+const { id, options } = defineProps({
+  id: { type: null, required: true },
+  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>
 

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

@@ -4,32 +4,21 @@ interface MagicMarqueeProps {
     id: MaybeRef<string>;
     options?: MagicMarqueeOptions;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        parentRef: HTMLDivElement;
-        childRef: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMarqueeProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMarqueeProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const duplicates: import("vue").ShallowRef<number, number>;
+declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = __VLS_PrettifyGlobal<__VLS_OmitStringIndex<typeof __VLS_ctx.$slots> & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMarqueeProps, {
+    duplicates: typeof duplicates;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & 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/MagicMarquee/src/composables/private/useMarqueeApi.d.ts

@@ -5,7 +5,7 @@ export type UseMarqueeApiParams = {
     instanceId: MaybeRef<string>;
 };
 export declare function useMarqueeApi({ child, parent, instanceId, }: UseMarqueeApiParams): {
-    duplicates: import("vue").Ref<number, number>;
+    duplicates: import("vue").ShallowRef<number, number>;
     play: () => void;
     pause: () => void;
     initialize: () => Promise<void>;

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeApi.mjs

@@ -1,4 +1,10 @@
-import { ref, computed, nextTick, watch, toValue } from "vue";
+import {
+  shallowRef,
+  computed,
+  nextTick,
+  watch,
+  toValue
+} from "vue";
 import { useElementBounding, useElementSize, useThrottleFn } from "@vueuse/core";
 import { useMarqueeState } from "./useMarqueeState.mjs";
 export function useMarqueeApi({
@@ -8,7 +14,7 @@ export function useMarqueeApi({
 }) {
   const { initializeState } = useMarqueeState(instanceId);
   const state = initializeState();
-  const duplicates = ref(1);
+  const duplicates = shallowRef(1);
   const childRect = useElementBounding(child);
   const parentRect = useElementBounding(parent);
   const { width } = useElementSize(parent);

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/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/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 = ["id", "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,77 +22,55 @@ 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 }
-  },
-  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 mappedActive = computed(() => channel.active);
-    const mappedTransition = computed(
-      () => __props.transition ?? state.options.transition.channel
-    );
-    const { initializeChannel } = useMenuChannel({
-      instanceId,
-      viewId
-    });
-    const channel = initializeChannel({
-      id: mappedId.value
-    });
-    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,
-            id: _ctx.id,
-            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"]);
-    };
+const { transition, id } = defineProps({
+  id: { type: String, required: true },
+  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>
 .magic-menu-channel-enter-active {
-  animation: fade-in 300ms ease;
+  animation: fade-in 225ms ease;
   &[data-initialized='true'] {
     position: absolute;
   }
 }
 
 .magic-menu-channel-leave-active {
-  animation: fade-out 300ms ease;
+  animation: fade-out 225ms ease;
   &[data-initialized='true'] {
     position: absolute;
   }

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

@@ -2,28 +2,25 @@ interface MagicMenuChannelProps {
     id: string;
     transition?: string;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<MagicMenuChannelProps>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+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/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> & {
+    default?: (props: typeof __VLS_5) => any;
+}>;
+declare const __VLS_self: import("vue").DefineComponent<MagicMenuChannelProps, {
+    state: typeof state;
+    mappedId: typeof mappedId;
+    mappedTransition: typeof mappedTransition;
+    channel: typeof channel;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuChannelProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<MagicMenuChannelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMenuChannelProps> & 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;
     };