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

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

@@ -1,57 +1,128 @@
-<template>
-  <div class="magic-marquee" ref="parentRef">
-    <div class="magic-marquee__track">
-      <div class="magic-marquee__content" ref="childRef">
-        <slot />
-      </div>
-      <div
-        v-for="_duplicate in duplicates"
-        class="magic-marquee__content"
-        :aria-hidden="true"
-      >
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
-import { useMarqueeApi } from '../composables/private/useMarqueeApi'
+<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";
+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 */
+      );
+    };
+  }
+});
+</script>
 
-interface MagicMarqueeProps {
-  direction?: 'reverse' | 'normal'
-  speed?: number
+<style>
+@keyframes mm-scroll-x {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
 }
 
-const props = withDefaults(defineProps<MagicMarqueeProps>(), {
-  direction: 'normal',
-  speed: 1,
-})
-
-const parentRef = ref<HTMLElement | undefined>(undefined)
-const childRef = ref<HTMLElement | undefined>(undefined)
-
-const { duplicates, playing, play, pause, initialize } = useMarqueeApi({
-  child: childRef,
-  parent: parentRef,
-  options: {
-    speed: computed(() => props.speed),
-    direction: computed(() => props.direction),
-  },
-})
+@keyframes mm-scroll-y {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
 
-onMounted(() => {
-  initialize()
-})
+.magic-marquee {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+}
 
-defineExpose({
-  playing,
-  play,
-  pause,
-})
-</script>
+.magic-marquee__track {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: var(--magic-marquee-justify-content, flex-start);
+  align-items: var(--magic-marquee-align-items, baseline);
+}
 
-<style>
-@keyframes magicMarqueeScrollX{0%{transform:translateZ(0)}to{transform:translate3d(-100%,0,0)}}@keyframes magicMarqueeScrollY{0%{transform:translateZ(0)}to{transform:translate3d(0,-100%,0)}}.magic-marquee{overflow:hidden;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.magic-marquee__track{align-items:var(--magic-marquee-align-items,baseline);display:flex;justify-content:var(--magic-marquee-jusrify-content,flex-start);position:relative;width:100%}.magic-marquee__content{animation-direction:var(--magic-marquee-animation-direction,normal);animation-duration:var(--magic-marquee-animation-duration);animation-iteration-count:infinite;animation-name:var(--magic-marquee-animation-name);animation-play-state:var(--magic-marquee-animation-play-state,running);animation-timing-function:linear;backface-visibility:hidden;display:flex;flex-grow:0;flex-shrink:0;gap:var(--magic-marquee-gap,1rem);padding-right:var(--magic-marquee-gap,1rem);white-space:nowrap;width:var(--magic-marquee-content-width,unset)}
+.magic-marquee__content {
+  white-space: nowrap;
+  backface-visibility: hidden;
+  padding-right: var(--magic-marquee-gap, 1rem);
+  width: var(--magic-marquee-content-width, unset);
+  animation-name: var(--mm-animation-name, 'mm-scroll-x');
+  animation-duration: var(--mm-animation-duration);
+  animation-play-state: var(--mm-animation-play-state, running);
+  animation-direction: var(--mm-animation-direction, normal);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  display: flex;
+  gap: var(--magic-marquee-gap, 1rem);
+  flex-shrink: 0;
+  flex-grow: 0;
+}
 </style>

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

@@ -1,6 +1,8 @@
+import { type MaybeRef } from 'vue';
+import type { MagicMarqueeOptions } from '../types/index.js';
 interface MagicMarqueeProps {
-    direction?: 'reverse' | 'normal';
-    speed?: number;
+    id: MaybeRef<string>;
+    options?: MagicMarqueeOptions;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -15,16 +17,18 @@ declare function __VLS_template(): {
     rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import("vue").DefineComponent<MagicMarqueeProps, {
-    playing: import("vue").Ref<boolean, boolean>;
-    play: () => void;
-    pause: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MagicMarqueeProps> & Readonly<{}>, {
-    direction: "reverse" | "normal";
-    speed: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;
+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"]>;
 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 & {
     new (): {
         $slots: S;

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): {
+export declare function useMarqueeApi({ child, parent, instanceId, }: UseMarqueeApiParams): {
     duplicates: import("vue").Ref<number, number>;
-    playing: import("vue").Ref<boolean, boolean>;
     play: () => void;
     pause: () => void;
     initialize: () => Promise<void>;

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

@@ -1,21 +1,22 @@
-import { ref, computed, nextTick, watch } from "vue";
-import {
-  useElementBounding,
-  useElementSize,
-  useThrottleFn,
-  toValue
-} from "@vueuse/core";
-export function useMarqueeApi({ child, parent, options }) {
+import { ref, computed, nextTick, watch, toValue } 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 = ref(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 +26,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 +56,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"),