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

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeApi.d.ts

@@ -1,15 +1,11 @@
-import { type MaybeRef } from '@vueuse/core';
+import { type MaybeRef } from 'vue';
 export type UseMarqueeApiParams = {
     child: MaybeRef<HTMLElement | null | undefined>;
     parent: MaybeRef<HTMLElement | null | undefined>;
-    options?: {
-        speed?: MaybeRef<number>;
-        direction?: MaybeRef<'reverse' | 'normal'>;
-    };
+    instanceId: MaybeRef<string>;
 };
-export declare function useMarqueeApi({ child, parent, options }: UseMarqueeApiParams): {
-    duplicates: import("vue").Ref<number, number>;
-    playing: import("vue").Ref<boolean, boolean>;
+export declare function useMarqueeApi({ child, parent, instanceId, }: UseMarqueeApiParams): {
+    duplicates: import("vue").ShallowRef<number, number>;
     play: () => void;
     pause: () => void;
     initialize: () => Promise<void>;

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

@@ -1,21 +1,28 @@
-import { ref, computed, nextTick, watch } from "vue";
 import {
-  useElementBounding,
-  useElementSize,
-  useThrottleFn,
+  shallowRef,
+  computed,
+  nextTick,
+  watch,
   toValue
-} from "@vueuse/core";
-export function useMarqueeApi({ child, parent, options }) {
-  const duplicates = ref(1);
+} from "vue";
+import { useElementBounding, useElementSize, useThrottleFn } from "@vueuse/core";
+import { useMarqueeState } from "./useMarqueeState.mjs";
+export function useMarqueeApi({
+  child,
+  parent,
+  instanceId
+}) {
+  const { initializeState } = useMarqueeState(instanceId);
+  const state = initializeState();
+  const duplicates = shallowRef(1);
   const childRect = useElementBounding(child);
   const parentRect = useElementBounding(parent);
   const { width } = useElementSize(parent);
   const duration = computed(
-    () => (childRect.width.value / toValue(speed) / 50).toFixed(2)
+    () => (childRect.width.value / (toValue(state.options.speed) ?? 1) / 50).toFixed(
+      2
+    )
   );
-  const playing = ref(true);
-  const speed = computed(() => toValue(options?.speed) || 1);
-  const direction = computed(() => toValue(options?.direction) || "normal");
   function calculateDuplicates() {
     const childWidth = childRect?.width.value;
     const parentWidth = parentRect?.width.value;
@@ -25,31 +32,20 @@ export function useMarqueeApi({ child, parent, options }) {
   }
   function setCssVariables() {
     toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-duration",
+      "--mm-animation-duration",
       `${toValue(duration)}s`
     );
+    toValue(parent)?.style.setProperty("--mm-animation-name", "mm-scroll-x");
     toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-name",
-      `magicMarqueeScrollX`
-    );
-    toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-direction",
-      `${toValue(options?.direction) || "normal"}`
+      "--mm-animation-direction",
+      `${toValue(state.options?.direction) || "normal"}`
     );
   }
   function pause() {
-    playing.value = false;
-    toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-play-state",
-      "paused"
-    );
+    toValue(parent)?.style.setProperty("--mm-animation-play-state", "paused");
   }
   function play() {
-    playing.value = true;
-    toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-play-state",
-      "running"
-    );
+    toValue(parent)?.style.setProperty("--mm-animation-play-state", "running");
   }
   async function initialize() {
     calculateDuplicates();
@@ -66,23 +62,41 @@ export function useMarqueeApi({ child, parent, options }) {
       setCssVariables();
     }, 100)
   );
-  watch(speed, () => {
-    nextTick();
-    toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-duration",
-      `${toValue(duration)}s`
-    );
-  });
-  watch(direction, (dir) => {
-    nextTick();
-    toValue(parent)?.style.setProperty(
-      "--magic-marquee-animation-direction",
-      `${toValue(dir)}`
-    );
-  });
+  watch(
+    () => state.options.speed,
+    () => {
+      nextTick();
+      toValue(parent)?.style.setProperty(
+        "--mm-animation-duration",
+        `${toValue(duration)}s`
+      );
+    }
+  );
+  watch(
+    () => state.options.direction,
+    (dir) => {
+      nextTick();
+      toValue(parent)?.style.setProperty(
+        "--mm-animation-direction",
+        `${toValue(dir)}`
+      );
+    }
+  );
+  watch(
+    () => state.playing,
+    (value) => {
+      switch (value) {
+        case true:
+          play();
+          break;
+        case false:
+          pause();
+          break;
+      }
+    }
+  );
   return {
     duplicates,
-    playing,
     play,
     pause,
     initialize

package/dist/plugins/MagicMarquee/src/composables/private/useMarqueeState.d.ts

@@ -0,0 +1,7 @@
+import { type Ref, type MaybeRef } from 'vue';
+import type { MarqueeState, MagicMarqueeOptions } from '../../types/index.js';
+export declare function useMarqueeState(instanceId: MaybeRef<string>): {
+    initializeState: (options?: MagicMarqueeOptions) => MarqueeState;
+    deleteState: () => void;
+    marqueeStateStore: Ref<MarqueeState[], MarqueeState[]>;
+};

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

@@ -0,0 +1,42 @@
+import { ref, reactive, toValue } from "vue";
+import { defu } from "defu";
+import { defaultOptions } from "../../utils/defaultOptions.mjs";
+const marqueeStateStore = ref([]);
+export function useMarqueeState(instanceId) {
+  function createState(id) {
+    const state = {
+      id,
+      options: { ...defaultOptions },
+      playing: true
+    };
+    return reactive(state);
+  }
+  function addState(id) {
+    const state = createState(id);
+    marqueeStateStore.value = [...marqueeStateStore.value, state];
+    return state;
+  }
+  function initializeState(options) {
+    let state = marqueeStateStore.value.find((entry) => {
+      return entry.id === toValue(instanceId);
+    });
+    if (!state) {
+      state = addState(toValue(instanceId));
+    }
+    if (options) {
+      const mappedOptions = defu(options, defaultOptions);
+      state.options = mappedOptions;
+    }
+    return state;
+  }
+  function deleteState() {
+    marqueeStateStore.value = marqueeStateStore.value.filter(
+      (x) => x.id !== toValue(instanceId)
+    );
+  }
+  return {
+    initializeState,
+    deleteState,
+    marqueeStateStore
+  };
+}

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

@@ -0,0 +1,11 @@
+import { type MaybeRef } from 'vue';
+export declare function useMagicMarquee(id: MaybeRef<string>): {
+    state: import("../types").MarqueeState;
+    isPlaying: import("vue").ComputedRef<boolean>;
+    play: () => void;
+    pause: () => void;
+    increaseSpeed: (factor?: number) => void;
+    decreaseSpeed: (factor?: number) => void;
+    reverse: () => void;
+};
+export type UseMagicMarqueeReturn = ReturnType<typeof useMagicMarquee>;

package/dist/plugins/MagicMarquee/src/composables/useMagicMarquee.mjs

@@ -0,0 +1,45 @@
+import { computed } from "vue";
+import { useMarqueeState } from "./private/useMarqueeState.mjs";
+export function useMagicMarquee(id) {
+  const { initializeState } = useMarqueeState(id);
+  const state = initializeState();
+  const isPlaying = computed(() => state.playing);
+  function play() {
+    state.playing = true;
+  }
+  function pause() {
+    state.playing = false;
+  }
+  function increaseSpeed(factor = 1) {
+    if (state.options.speed === void 0) {
+      return;
+    }
+    state.options.speed += factor;
+  }
+  function decreaseSpeed(factor = 1) {
+    if (state.options.speed === void 0) {
+      return;
+    }
+    state.options.speed -= factor;
+    state.options.speed = Math.max(0, state.options.speed);
+  }
+  function reverse() {
+    switch (state.options.direction) {
+      case "reverse":
+        state.options.direction = "normal";
+        break;
+      case "normal":
+        state.options.direction = "reverse";
+        break;
+    }
+  }
+  return {
+    state,
+    isPlaying,
+    play,
+    pause,
+    increaseSpeed,
+    decreaseSpeed,
+    reverse
+  };
+}

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

@@ -0,0 +1,9 @@
+export interface MagicMarqueeOptions {
+    direction?: 'reverse' | 'normal';
+    speed?: number;
+}
+export interface MarqueeState {
+    id: string;
+    options: MagicMarqueeOptions;
+    playing: boolean;
+}

package/dist/plugins/MagicMarquee/src/utils/defaultOptions.d.ts

@@ -0,0 +1,4 @@
+import type { MagicMarqueeOptions } from '../types/index.js';
+import type { RequireAll } from '@maas/vue-equipment/utils';
+declare const defaultOptions: RequireAll<MagicMarqueeOptions>;
+export { defaultOptions };

package/dist/plugins/MagicMarquee/src/utils/defaultOptions.mjs

@@ -0,0 +1,5 @@
+const defaultOptions = {
+  direction: "normal",
+  speed: 1
+};
+export { defaultOptions };

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

@@ -1,5 +1,7 @@
 import { useMagicMenu } from './src/composables/useMagicMenu.js';
 import { MagicMenuInstanceId, MagicMenuViewId, MagicMenuViewActive, MagicMenuItemId, MagicMenuItemActive, MagicMenuParentTree, MagicMenuChannelId, MagicMenuChannelActive, MagicMenuContentId } from './src/symbols/index.js';
 import type { Plugin } from 'vue';
+import type { MagicMenuOptions } from './src/types/index.js';
 declare const MagicMenuPlugin: Plugin;
 export { MagicMenuPlugin, useMagicMenu, MagicMenuInstanceId, MagicMenuViewId, MagicMenuViewActive, MagicMenuItemId, MagicMenuItemActive, MagicMenuParentTree, MagicMenuChannelId, MagicMenuChannelActive, MagicMenuContentId, };
+export type { MagicMenuOptions };

package/dist/plugins/MagicMenu/nuxt.mjs

@@ -8,7 +8,7 @@ export default defineNuxtModule({
   meta: {
     name: "@maas/vue-equipment/nuxt/MagicMenu"
   },
-  setup(_options, _nuxt) {
+  setup() {
     const resolver = createResolver(import.meta.url);
     addComponentsDir({
       path: resolver.resolve("src/components"),

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

@@ -1,80 +1,89 @@
-<template>
-  <transition :name="mappedTransition">
-    <div
-      :class="['magic-menu-channel', { '-initialized': state.active }]"
-      v-if="channel.active"
-      :data-id="mappedId"
-      :id="id"
-    >
-      <slot />
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, provide } from 'vue'
-import { useMenuChannel } from '../composables/private/useMenuChannel'
+<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"];
+import { computed, inject, provide } from "vue";
+import { useMenuChannel } from "../composables/private/useMenuChannel";
 import {
   MagicMenuInstanceId,
   MagicMenuViewId,
   MagicMenuContentId,
   MagicMenuChannelId,
-  MagicMenuChannelActive,
-} from '../symbols'
-import { useMenuState } from '../composables/private/useMenuState'
-
-interface MagicMenuChannelProps {
-  id: string
-  transition?: string
-}
-
-const { transition, id } = defineProps<MagicMenuChannelProps>()
-
-const instanceId = inject(MagicMenuInstanceId, undefined)
-const viewId = inject(MagicMenuViewId, undefined)
-const contentId = inject(MagicMenuContentId, undefined)
-
-if (!instanceId) {
-  throw new Error('MagicMenuChannel must be nested inside MagicMenuProvider')
-}
-
-if (!viewId) {
-  throw new Error('MagicMenuChannel must be nested inside MagicMenuView')
-}
+  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 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"]);
+    };
+  }
+});
+</script>
 
-if (!id) {
-  throw new Error('MagicMenuChannel requires an id')
+<style>
+.magic-menu-channel-enter-active {
+  animation: fade-in 225ms ease;
+  &[data-initialized='true'] {
+    position: absolute;
+  }
 }
 
-const { initializeState } = useMenuState(instanceId)
-const state = initializeState()
-
-if (!contentId) {
-  if (state.options.debug) {
-    console.warn('MagicMenuChannel is not nested inside MagicMenuContent')
+.magic-menu-channel-leave-active {
+  animation: fade-out 225ms ease;
+  &[data-initialized='true'] {
+    position: absolute;
   }
 }
-
-const mappedId = computed(() => `magic-menu-channel-${id}`)
-const mappedTransition = computed(
-  () => transition ?? state.options.transition.channel
-)
-
-// Register channel
-const { initializeChannel } = useMenuChannel({
-  instanceId,
-  viewId,
-})
-
-const channel = initializeChannel({
-  id: mappedId.value,
-})
-
-// Pass id and active state to children
-provide(MagicMenuChannelId, mappedId.value)
-provide(MagicMenuChannelActive, channel.active)
-</script>
-
-<style>
-.magic-menu-channel-enter-active{animation:fade-in .3s ease}.magic-menu-channel-enter-active.-initialized{position:absolute}.magic-menu-channel-leave-active{animation:fade-out .3s ease}.magic-menu-channel-leave-active.-initialized{position:absolute}
 </style>

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

@@ -2,19 +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 state: import("../types").MenuState;
+declare const mappedId: import("vue").ComputedRef<string>;
+declare const mappedTransition: import("vue").ComputedRef<string>;
+declare const channel: import("../types").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_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };