@maas/vue-equipment 0.1.2 → 0.2.0

package/dist/plugins/MagicScroll/index.mjs

@@ -0,0 +1,19 @@
+import MagicScrollProvider from "./src/components/MagicScrollProvider.vue";
+import MagicScrollScene from "./src/components/MagicScrollScene.vue";
+import MagicScrollTransform from "./src/components/MagicScrollTransform.vue";
+import MagicScrollCollision from "./src/components/MagicScrollCollision.vue";
+import { magicScrollStore } from "./src/store/index.mjs";
+import { useEmitter } from "./src/composables/useEmitter.mjs";
+import { useProgress } from "./src/composables/useProgress.mjs";
+import { useCollisionDetect } from "./src/composables/useCollisionDetect.mjs";
+import { StoreKey } from "./src/types/index.mjs";
+const MagicScroll = {
+  install: (app) => {
+    app.component("MagicScrollProvider", MagicScrollProvider);
+    app.component("MagicScrollScene", MagicScrollScene);
+    app.component("MagicScrollTransform", MagicScrollTransform);
+    app.component("MagicScrollCollision", MagicScrollCollision);
+    app.provide(StoreKey, magicScrollStore);
+  }
+};
+export { MagicScroll, useEmitter, useProgress, useCollisionDetect };

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

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

package/dist/plugins/MagicScroll/nuxt.mjs

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

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

@@ -0,0 +1,35 @@
+<template>
+  <div ref="targetRef" :style="{ display: 'contents' }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed, onMounted } from 'vue'
+import { toValue } from '@vueuse/shared'
+import { useCollisionDetect } from '../composables/useCollisionDetect'
+import { WindowDimensionsKey, WindowScrollKey } from '../types'
+
+import type { CollisionEntry } from '../types'
+
+interface Props {
+  collisionEntries: CollisionEntry[]
+}
+
+const props = defineProps<Props>()
+const targetRef = ref<HTMLElement | undefined>(undefined)
+const colDetect = ref()
+
+const scrollPosition = inject(WindowScrollKey, { x: 0, y: 0 })
+const windowDimensions = inject(WindowDimensionsKey, { vh: 0, vw: 0 })
+const pageYOffset = computed(() => scrollPosition.y)
+
+onMounted(() => {
+  colDetect.value = useCollisionDetect(
+    pageYOffset,
+    windowDimensions,
+    props.collisionEntries,
+    toValue(targetRef.value)
+  )
+})
+</script>

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

@@ -0,0 +1,20 @@
+import type { CollisionEntry } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    collisionEntries: {
+        type: import("vue").PropType<CollisionEntry[]>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    collisionEntries: {
+        type: import("vue").PropType<CollisionEntry[]>;
+        required: true;
+    };
+}>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,34 @@
+<template>
+  <div ref="el" class="magic-scroll-provider">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, provide, reactive, readonly } from 'vue'
+import { useWindowScroll, useWindowSize, toValue } from '@vueuse/core'
+import { WindowScrollKey, WindowDimensionsKey } from '../types'
+
+interface Props {
+  hasScrollListener?: Boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  hasScrollListener: () => true,
+})
+
+const el = ref()
+
+const scrollPosition = props.hasScrollListener
+  ? useWindowScroll()
+  : { x: 0, y: 0 }
+const { width, height } = useWindowSize()
+
+const windowscrollDefault = reactive(scrollPosition)
+const windowDimensionsDefault = reactive({
+  vw: toValue(width),
+  vh: toValue(height),
+})
+
+provide(WindowScrollKey, readonly(windowscrollDefault))
+provide(WindowDimensionsKey, readonly(windowDimensionsDefault))
+</script>

package/dist/plugins/MagicScroll/src/components/MagicScrollProvider.vue.d.ts

@@ -0,0 +1,21 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    hasScrollListener: {
+        type: import("vue").PropType<Boolean>;
+        default: () => true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    hasScrollListener: {
+        type: import("vue").PropType<Boolean>;
+        default: () => true;
+    };
+}>>, {
+    hasScrollListener: Boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,80 @@
+<template>
+  <div ref="sceneRef" class="magic-scroll-scene">
+    <slot :map-value="mapValue" :progress="progress" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  provide,
+  inject,
+  computed,
+  onMounted,
+  watch,
+  nextTick,
+  toRaw,
+  readonly,
+} from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
+import { mapValue } from '../utils'
+import { useProgress } from '../composables/useProgress'
+import { WindowScrollKey, ScrollProgressKey } from '../types'
+
+import type { FromTo } from '../types'
+
+interface Props {
+  from?: FromTo
+  to?: FromTo
+  debug?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  from: 'top-bottom',
+  to: 'bottom-top',
+})
+
+const scrollPosition = inject(WindowScrollKey, { x: 0, y: 0 })
+const pageYOffset = computed(() => scrollPosition.y)
+
+const sceneRef = ref<HTMLElement | undefined>(undefined)
+const progress = ref(0)
+
+const { getCalculations, getProgress } = useProgress(
+  sceneRef,
+  props.from,
+  props.to
+)
+
+const calculate = () => {
+  getCalculations()
+  nextTick(() => {
+    progress.value = getProgress()
+  })
+}
+
+onMounted(() => {
+  calculate()
+})
+
+watch(
+  () => pageYOffset.value,
+  () => {
+    if (intersecting.value) {
+      calculate()
+    }
+  }
+)
+
+const intersecting = ref()
+
+useIntersectionObserver(
+  toRaw(sceneRef),
+  ([{ isIntersecting }]) => {
+    intersecting.value = isIntersecting
+  },
+  { rootMargin: '150% 0px 150% 0px' }
+)
+
+provide('mapValue', mapValue)
+provide(ScrollProgressKey, readonly(progress))
+</script>

package/dist/plugins/MagicScroll/src/components/MagicScrollScene.vue.d.ts

@@ -0,0 +1,41 @@
+import { mapValue } from '../utils';
+import type { FromTo } from '../types';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    to: {
+        type: import("vue").PropType<FromTo>;
+        default: string;
+    };
+    from: {
+        type: import("vue").PropType<FromTo>;
+        default: string;
+    };
+    debug: {
+        type: import("vue").PropType<boolean>;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    to: {
+        type: import("vue").PropType<FromTo>;
+        default: string;
+    };
+    from: {
+        type: import("vue").PropType<FromTo>;
+        default: string;
+    };
+    debug: {
+        type: import("vue").PropType<boolean>;
+    };
+}>>, {
+    to: FromTo;
+    from: FromTo;
+}, {}>, {
+    default?(_: {
+        mapValue: typeof mapValue;
+        progress: number;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,42 @@
+<template>
+  <component :is="as" :style="computedStyle" v-bind="$attrs">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  as?: string
+  scale?: number
+  scaleX?: number
+  scaleY?: number
+  skewX?: number
+  skewY?: number
+  translateX?: number
+  translateY?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'div',
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  skewX: 0,
+  skewY: 0,
+  translateX: 0,
+  translateY: 0,
+})
+
+const computedStyle = computed(() => {
+  return {
+    willChange: 'transform',
+    transform: `matrix(${props.scale || props.scaleX}, ${props.skewY}, ${
+      props.skewX
+    },  ${props.scale || props.scaleY}, ${props.translateX}, ${
+      props.translateY
+    })`,
+  }
+})
+</script>

package/dist/plugins/MagicScroll/src/components/MagicScrollTransform.vue.d.ts

@@ -0,0 +1,84 @@
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    scale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    scaleX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    scaleY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skewX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skewY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    translateX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    translateY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    scale: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    as: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    scaleX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    scaleY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skewX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skewY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    translateX: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    translateY: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+}>>, {
+    scale: number;
+    as: string;
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+    translateX: number;
+    translateY: number;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,6 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { CollisionEntry, CollisionMappedEntry, WindowDimensions } from '../types.js';
+export declare function useCollisionDetect(pageYOffset: ComputedRef<number>, windowDimensions: WindowDimensions, collisionEntries: CollisionEntry[], parent: HTMLElement | undefined): {
+    collisionMappedEntries: Ref<CollisionMappedEntry[]>;
+};
+export type UseCollisionDetectReturn = ReturnType<typeof useCollisionDetect>;

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

@@ -0,0 +1,116 @@
+import { ref, watch, unref, computed } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { useEmitter } from "./useEmitter.mjs";
+export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntries, parent) {
+  const scrolled = ref(0);
+  const intersecting = ref();
+  const scrollDirection = ref();
+  const collisionMappedEntries = ref([]);
+  const oppositeScrollDirection = computed(
+    () => scrollDirection.value === "up" ? "down" : "up"
+  );
+  function getOffset(value) {
+    return typeof value === "function" ? value({
+      vh: unref(windowDimensions.vh),
+      vw: unref(windowDimensions.vw)
+    }) : value || 0;
+  }
+  function initialize() {
+    if (!parent)
+      return;
+    collisionMappedEntries.value = collisionEntries.map((entry) => {
+      const alerted = {
+        up: {
+          top: false,
+          bottom: false
+        },
+        down: {
+          top: false,
+          bottom: false
+        }
+      };
+      const offset = { top: 0, bottom: 0, ...entry.offset };
+      const element = entry.element ? parent?.querySelector(entry.element) : parent;
+      return { ...entry, offset, element, alerted };
+    });
+    useIntersectionObserver(
+      parent.querySelector("*"),
+      ([{ isIntersecting }]) => {
+        intersecting.value = isIntersecting;
+      },
+      { rootMargin: "50% 0px 50% 0px", threshold: 0.01 }
+    );
+    observeAll();
+  }
+  function observeAll() {
+    if (!scrolled.value) {
+      scrolled.value = pageYOffset.value;
+      resetAll();
+      return;
+    }
+    scrollDirection.value = scrolled.value <= pageYOffset.value ? "down" : "up";
+    scrolled.value = pageYOffset.value;
+    let i = collisionMappedEntries.value.length;
+    while (i--) {
+      const entry = collisionMappedEntries.value[i];
+      if (!entry.element)
+        return;
+      const boundingRect = entry.element.getBoundingClientRect();
+      if (scrollDirection.value) {
+        observeEntry("top", scrollDirection.value, boundingRect, entry);
+        observeEntry("bottom", scrollDirection.value, boundingRect, entry);
+        resetEntry("top", oppositeScrollDirection.value, boundingRect, entry);
+        resetEntry("bottom", oppositeScrollDirection.value, boundingRect, entry);
+      }
+    }
+  }
+  function resetAll() {
+    collisionMappedEntries.value = collisionMappedEntries.value.map((entry) => {
+      const alerted = {
+        up: {
+          top: false,
+          bottom: false
+        },
+        down: {
+          top: false,
+          bottom: false
+        }
+      };
+      return { ...entry, alerted };
+    });
+  }
+  function observeEntry(pos, dir, boundingRect, entry) {
+    const offset = getOffset(entry.offset[pos] || 0);
+    if (entry.alerted[dir][pos])
+      return;
+    if (dir === "down" && boundingRect[pos] <= offset || dir === "up" && boundingRect[pos] >= offset) {
+      entry.alerted[dir][pos] = true;
+      useEmitter().emit("magic-scroll:collision", {
+        dir,
+        pos,
+        el: entry.element,
+        data: entry.data
+      });
+    }
+  }
+  function resetEntry(pos, dir, boundingRect, entry) {
+    const offset = getOffset(entry.offset[pos] || 0);
+    if (!entry.alerted[dir][pos])
+      return;
+    if (dir === "down" && boundingRect[pos] >= offset || dir === "up" && boundingRect[pos] <= offset) {
+      entry.alerted[dir][pos] = false;
+    }
+  }
+  initialize();
+  watch(
+    () => pageYOffset.value,
+    () => {
+      if (intersecting.value) {
+        observeAll();
+      }
+    }
+  );
+  return {
+    collisionMappedEntries
+  };
+}

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

@@ -0,0 +1,15 @@
+import type { CollisionEvents } from '../types.js';
+export declare function useEmitter(): {
+    on: {
+        <Key extends "magic-scroll:collision">(type: Key, handler: import("mitt").Handler<CollisionEvents[Key]>): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
+    };
+    off: {
+        <Key_1 extends "magic-scroll:collision">(type: Key_1, handler?: import("mitt").Handler<CollisionEvents[Key_1]> | undefined): void;
+        (type: "*", handler: import("mitt").WildcardHandler<CollisionEvents>): void;
+    };
+    emit: {
+        <Key_2 extends "magic-scroll:collision">(type: Key_2, event: CollisionEvents[Key_2]): void;
+        <Key_3 extends "magic-scroll:collision">(type: undefined extends CollisionEvents[Key_3] ? Key_3 : never): void;
+    };
+};

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

@@ -0,0 +1,9 @@
+import mitt from "mitt";
+const emitter = mitt();
+export function useEmitter() {
+  return {
+    on: emitter.on,
+    off: emitter.off,
+    emit: emitter.emit
+  };
+}

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

@@ -0,0 +1,7 @@
+import type { MaybeRef } from '@vueuse/shared';
+import type { FromTo } from '../types.js';
+export declare function useProgress(target: MaybeRef<HTMLElement | null | undefined>, from: FromTo, to: FromTo): {
+    getCalculations: () => void;
+    getProgress: () => number;
+};
+export type UseProgressReturn = ReturnType<typeof useProgress>;

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

@@ -0,0 +1,59 @@
+import { ref, inject } from "vue";
+import { toValue } from "@vueuse/shared";
+import { WindowDimensionsKey, WindowScrollKey } from "../types/index.mjs";
+import { clampValue } from "../utils/index.mjs";
+export function useProgress(target, from, to) {
+  const dimensions = inject(WindowDimensionsKey, { vw: 0, vh: 0 });
+  const scrollPosition = inject(WindowScrollKey, { x: 0, y: 0 });
+  const targetRect = ref();
+  const start = ref(0);
+  const end = ref(0);
+  const splitLocation = (location) => {
+    return {
+      el: location.match(/^[a-z]+/)[0],
+      vp: location.match(/[a-z]+$/)[0]
+    };
+  };
+  const getOffsetTop = (points) => {
+    let y = 0;
+    if (!targetRect.value)
+      return y;
+    switch (points.el) {
+      case "top":
+        y += targetRect.value.top + scrollPosition.y;
+        break;
+      case "center":
+        y += targetRect.value.top + targetRect.value.height / 2 + scrollPosition.y;
+        break;
+      case "bottom":
+        y += targetRect.value.top + targetRect.value.height + scrollPosition.y;
+        break;
+    }
+    switch (points.vp) {
+      case "top":
+        y -= 0;
+        break;
+      case "center":
+        y -= dimensions.vh / 2;
+        break;
+      case "bottom":
+        y -= dimensions.vh;
+        break;
+      case "initial":
+        y -= targetRect.value.top + scrollPosition.y;
+        break;
+    }
+    return y;
+  };
+  const getCalculations = () => {
+    targetRect.value = toValue(target)?.getBoundingClientRect();
+    start.value = getOffsetTop(splitLocation(from));
+    end.value = getOffsetTop(splitLocation(to));
+  };
+  const getProgress = () => {
+    const total = Math.abs(end.value - start.value);
+    const current = scrollPosition.y - start.value;
+    return clampValue(current / total, 0, 1);
+  };
+  return { getCalculations, getProgress };
+}

package/dist/plugins/MagicScroll/src/store/index.d.ts

@@ -0,0 +1,4 @@
+declare const magicScrollStore: {
+    isNavigating: boolean;
+};
+export { magicScrollStore };

package/dist/plugins/MagicScroll/src/store/index.mjs

@@ -0,0 +1,5 @@
+import { reactive } from "vue";
+const magicScrollStore = reactive({
+  isNavigating: false
+});
+export { magicScrollStore };

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

@@ -0,0 +1,34 @@
+type AlertPositions = {
+    top: boolean;
+    bottom: boolean;
+};
+type CollisionEvents = {
+    'magic-scroll:collision': {
+        dir: 'up' | 'down';
+        pos: 'top' | 'bottom';
+        el: HTMLElement;
+        data?: Record<string, any>;
+    };
+};
+interface CollisionEntry {
+    offset?: {
+        top: number | (() => number);
+        bottom: number | (() => number);
+    };
+    element?: string;
+    data: Record<string, any>;
+}
+interface CollisionMappedEntry extends Omit<CollisionEntry, 'element'> {
+    alerted: {
+        up: AlertPositions;
+        down: AlertPositions;
+    };
+    element: HTMLElement;
+}
+type WindowDimensions = {
+    vw: number;
+    vh: number;
+};
+type FromTo = 'top-top' | 'top-center' | 'top-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'bottom-top' | 'bottom-center' | 'bottom-bottom';
+export * from './injectionKeys.js';
+export type { FromTo, CollisionEvents, CollisionEntry, CollisionMappedEntry, WindowDimensions, };

package/dist/plugins/MagicScroll/src/types/index.mjs

@@ -0,0 +1 @@
+export * from "./injectionKeys.mjs";

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

@@ -0,0 +1,12 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { WindowDimensions } from './index.js';
+declare const WindowDimensionsKey: InjectionKey<WindowDimensions>;
+declare const WindowScrollKey: InjectionKey<{
+    x: number;
+    y: number;
+}>;
+declare const ScrollProgressKey: InjectionKey<Ref<number>>;
+declare const StoreKey: InjectionKey<{
+    isNavigating: boolean;
+}>;
+export { WindowDimensionsKey, WindowScrollKey, ScrollProgressKey, StoreKey };