@maas/vue-equipment 0.4.2 → 0.5.0

package/dist/nuxt/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@maas/vue-equipment",
   "configKey": "vueEquipment",
-  "version": "0.4.1"
+  "version": "0.4.2"
 }

package/dist/nuxt/module.mjs

@@ -15,6 +15,13 @@ const packages = {
 	}
 };
 const functions = [
+	{
+		name: "MagicMarquee",
+		"package": "plugins",
+		lastUpdated: 1691658148000,
+		docs: "https://maas.egineering/vue-equipment/plugins/MagicMarquee/",
+		description: "marquee"
+	},
 	{
 		name: "MagicModal",
 		"package": "plugins",

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

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vue';
+declare const MagicMarquee: Plugin;
+export { MagicMarquee };

package/dist/plugins/MagicMarquee/index.mjs

@@ -0,0 +1,7 @@
+import MagicMarqueeComponent from "./src/components/MagicMarquee.vue";
+const MagicMarquee = {
+  install: (app) => {
+    app.component("MagicMarquee", MagicMarqueeComponent);
+  }
+};
+export { MagicMarquee };

package/dist/plugins/MagicMarquee/nuxt.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>>;
+export default _default;

package/dist/plugins/MagicMarquee/nuxt.mjs

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from "nuxt/app";
+import { MagicMarquee } from "./index.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(MagicMarquee);
+});

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

@@ -0,0 +1,105 @@
+<template>
+  <div class="magic-marquee">
+    <div class="magic-marquee__track" ref="parentRef">
+      <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, reactive, computed, watch } from 'vue'
+import { useMarquee } from '../composables/useMarquee'
+
+interface Props {
+  direction?: 'reverse' | 'normal'
+  speed?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: 'normal',
+  speed: 1,
+})
+
+const parentRef = ref<HTMLElement | undefined>(undefined)
+const childRef = ref<HTMLElement | undefined>(undefined)
+
+const { duplicates, playing, play, pause } = useMarquee({
+  child: childRef,
+  parent: parentRef,
+  options: {
+    speed: computed(() => props.speed),
+    direction: computed(() => props.direction),
+  },
+})
+
+defineExpose({
+  playing,
+  play,
+  pause,
+})
+</script>
+
+<style lang="css">
+:root {
+  --magic-marquee-gap: 1rem;
+  --magic-marquee-content-width: unset;
+  --magic-marquee-transform-target-x: -100%;
+}
+
+@keyframes magicMarqueeScrollX {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes magicMarqueeScrollY {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+  100% {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.magic-marquee {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  user-select: none;
+}
+
+.magic-marquee__track {
+  position: relative;
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+}
+
+.magic-marquee__content {
+  white-space: nowrap;
+  backface-visibility: hidden;
+  padding-right: var(--magic-marquee-gap);
+  width: var(--magic-marquee-content-width);
+  animation-name: var(--magic-marquee-animation-name);
+  animation-duration: var(--magic-marquee-animation-duration);
+  animation-play-state: var(--magic-marquee-animation-play-state, running);
+  animation-direction: var(--magic-marquee-animation-direction, normal);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-delay: 0;
+  flex-shrink: 0;
+  flex-grow: 0;
+}
+</style>

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

@@ -0,0 +1,34 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    direction: {
+        type: import("vue").PropType<"reverse" | "normal">;
+        default: string;
+    };
+    speed: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {
+    playing: import("vue").Ref<boolean>;
+    play: () => void;
+    pause: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: import("vue").PropType<"reverse" | "normal">;
+        default: string;
+    };
+    speed: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>>, {
+    direction: "reverse" | "normal";
+    speed: number;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,84 @@
+import { ref, onMounted, computed, nextTick, watch } from "vue";
+import {
+  useElementBounding,
+  useResizeObserver,
+  toValue
+} from "@vueuse/core";
+export function useMarquee({ child, parent, options }) {
+  const duplicates = ref(1);
+  const childRect = useElementBounding(child);
+  const parentRect = useElementBounding(parent);
+  const duration = computed(
+    () => (childRect.width.value / toValue(speed) / 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;
+    if (childWidth && parentWidth) {
+      duplicates.value = Math.ceil(parentWidth / childWidth * 2);
+    }
+  }
+  function setCssVariables() {
+    toValue(parent)?.style.setProperty(
+      "--magic-marquee-animation-duration",
+      `${toValue(duration)}s`
+    );
+    toValue(parent)?.style.setProperty(
+      "--magic-marquee-animation-name",
+      `magicMarqueeScrollX`
+    );
+    toValue(parent)?.style.setProperty(
+      "--magic-marquee-animation-direction",
+      `${toValue(options?.direction) || "normal"}`
+    );
+  }
+  function pause() {
+    playing.value = false;
+    toValue(parent)?.style.setProperty(
+      "--magic-marquee-animation-play-state",
+      "paused"
+    );
+  }
+  function play() {
+    playing.value = true;
+    toValue(parent)?.style.setProperty(
+      "--magic-marquee-animation-play-state",
+      "running"
+    );
+  }
+  onMounted(() => {
+    calculateDuplicates();
+    nextTick();
+    setCssVariables();
+  });
+  useResizeObserver(parent, () => {
+    childRect.update();
+    parentRect.update();
+    calculateDuplicates();
+    nextTick();
+    setCssVariables();
+  });
+  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)}`
+    );
+  });
+  return {
+    duplicates,
+    playing,
+    play,
+    pause
+  };
+}

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

@@ -51,8 +51,7 @@
 <script setup lang="ts">
 import { ref, watch, nextTick } from 'vue'
 import { useModalApi } from './../composables/useModalApi'
-import { onKeyStroke } from '@vueuse/core'
-import { toValue } from '@vueuse/shared'
+import { onKeyStroke, toValue } from '@vueuse/core'
 import { defaultOptions } from './../utils/defaultOptions'
 import { useModalEmitter } from './../composables/useModalEmitter'
 

package/dist/plugins/MagicPlayer/src/composables/useControlsApi.mjs

@@ -1,6 +1,6 @@
 import { ref, computed, watch } from "vue";
-import { toValue } from "@vueuse/shared";
 import {
+  toValue,
   useResizeObserver,
   useEventListener,
   defaultWindow

package/dist/plugins/MagicPlayer/src/composables/useMediaApi.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef } from '@vueuse/shared';
+import type { MaybeRef } from '@vueuse/core';
 export declare function useMediaApi(target: MaybeRef<HTMLMediaElement | null | undefined>): {
     currentTime: import("vue").Ref<number>;
     duration: import("vue").Ref<number>;

package/dist/plugins/MagicPlayer/src/composables/useMediaApi.mjs

@@ -1,6 +1,5 @@
 import { ref, watch, unref } from "vue";
-import { toValue, watchIgnorable } from "@vueuse/shared";
-import { useEventListener } from "@vueuse/core";
+import { useEventListener, toValue, watchIgnorable } from "@vueuse/core";
 export function useMediaApi(target) {
   const currentTime = ref(0);
   const duration = ref(0);

package/dist/plugins/MagicPlayer/src/composables/useRuntimeSourceProvider.mjs

@@ -1,4 +1,4 @@
-import { toValue } from "@vueuse/shared";
+import { toValue } from "@vueuse/core";
 import { ref, onMounted, onUnmounted } from "vue";
 export function useRuntimeSourceProvider(args) {
   let hls;

package/dist/plugins/MagicScroll/src/components/MagicScrollCollision.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { ref, inject, computed, onMounted } from 'vue'
-import { toValue } from '@vueuse/shared'
+import { toValue } from '@vueuse/core'
 import { useCollisionDetect } from '../composables/useCollisionDetect'
 import { ScrollPositionKey } from '../types'
 

package/dist/plugins/MagicScroll/src/composables/useProgress.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/shared';
+import type { MaybeRef, MaybeRefOrGetter } from '@vueuse/core';
 import type { FromTo } from '../types.js';
 type UseProgressParams = {
     child: MaybeRef<HTMLElement | null | undefined>;

package/dist/plugins/MagicScroll/src/composables/useProgress.mjs

@@ -1,6 +1,6 @@
 import { ref, inject } from "vue";
 import { useElementBounding, useWindowSize } from "@vueuse/core";
-import { toValue } from "@vueuse/shared";
+import { toValue } from "@vueuse/core";
 import { ScrollPositionKey } from "../types/index.mjs";
 import { clampValue } from "../utils/index.mjs";
 export function useProgress(params) {

package/dist/plugins/MagicScroll/src/types/injectionKeys.d.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue';
-import type { MaybeRefOrGetter } from '@vueuse/shared';
+import type { MaybeRefOrGetter } from '@vueuse/core';
 declare const ScrollParentKey: InjectionKey<MaybeRefOrGetter<HTMLElement | undefined>>;
 declare const ScrollPositionKey: InjectionKey<{
     x: import("vue").WritableComputedRef<number>;

package/dist/plugins/index.d.ts

@@ -1,3 +1,4 @@
 export * from './MagicModal.js';
 export * from './MagicPlayer.js';
 export * from './MagicScroll.js';
+export * from './MagicMarquee.js';

package/dist/plugins/index.mjs

@@ -1,3 +1,4 @@
 export * from "./MagicModal/index.mjs";
 export * from "./MagicPlayer/index.mjs";
 export * from "./MagicScroll/index.mjs";
+export * from "./MagicMarquee/index.mjs";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",
@@ -56,7 +56,6 @@
   "peerDependencies": {
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
-    "@vueuse/shared": "^10.3.0",
     "focus-trap": "^7.5.2",
     "hls.js": "^1.4.10",
     "mitt": "^3.0.1",
@@ -65,25 +64,22 @@
   },
   "peerDependenciesMeta": {
     "@vueuse/core": {
-      "optional": true
+      "optional": false
     },
     "@vueuse/integrations": {
-      "optional": true
-    },
-    "@vueuse/shared": {
-      "optional": true
+      "optional": false
     },
     "hls.js": {
-      "optional": true
+      "optional": false
     },
     "mitt": {
-      "optional": true
+      "optional": false
     },
     "nuxt": {
-      "optional": true
+      "optional": false
     },
     "uuid": {
-      "optional": true
+      "optional": false
     }
   },
   "scripts": {