@maas/vue-equipment 0.3.0 → 0.4.0

package/dist/nuxt/module.json

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

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

@@ -8,6 +8,7 @@
       <dialog
         ref="modal"
         class="magic-modal"
+        :id="toValue(id)"
         @click.self="close"
         aria-modal="true"
       >
@@ -162,9 +163,10 @@ watch(isActive, async (value) => {
 </script>
 
 <style lang="postcss">
-* {
-  transition-duration: 0s;
-  animation-duration: 0s;
+:root {
+  --magic-modal-z-index: 999;
+  --magic-modal-backdrop-color: rgba(0, 0, 0, 0.5);
+  --magic-modal-backdrop-filter: unset;
 }
 
 .magic-modal {
@@ -175,7 +177,7 @@ watch(isActive, async (value) => {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 999;
+  z-index: var(--magic-modal-z-index);
   background: transparent;
   color: inherit;
   padding: 0;
@@ -201,7 +203,8 @@ watch(isActive, async (value) => {
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
+  background-color: var(--magic-modal-backdrop-color);
+  backdrop-filter: var(--magic-modal-backdrop-filter);
   z-index: -1;
 }
 

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

@@ -8,7 +8,7 @@
 import { ref, inject, computed, onMounted } from 'vue'
 import { toValue } from '@vueuse/shared'
 import { useCollisionDetect } from '../composables/useCollisionDetect'
-import { WindowDimensionsKey, WindowScrollKey } from '../types'
+import { ScrollPositionKey } from '../types'
 
 import type { CollisionEntry } from '../types'
 
@@ -20,16 +20,14 @@ 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)
+const scrollPosition = inject(ScrollPositionKey, undefined)
+const pageYOffset = computed(() => toValue(scrollPosition?.y) || 0)
 
 onMounted(() => {
   colDetect.value = useCollisionDetect(
     pageYOffset,
-    windowDimensions,
     props.collisionEntries,
-    toValue(targetRef.value)
+    toValue(targetRef.value),
   )
 })
 </script>

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

@@ -1,34 +1,35 @@
 <template>
-  <div ref="el" class="magic-scroll-provider">
+  <div 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'
+import { provide, computed } from 'vue'
+import { useScroll } from '@vueuse/core'
+import { ScrollPositionKey, ScrollParentKey } from '../types'
 
 interface Props {
-  hasScrollListener?: Boolean
+  active?: Boolean
+  el?: HTMLElement
 }
 const props = withDefaults(defineProps<Props>(), {
-  hasScrollListener: () => true,
+  active: () => true,
 })
 
-const el = ref()
-
-const scrollPosition = props.hasScrollListener
-  ? useWindowScroll()
-  : { x: 0, y: 0 }
-const { width, height } = useWindowSize()
+// computed is used to avoid reactivity issues
+const mappedEl = computed(() => {
+  if (props.el) return props.el
+  return window
+})
 
-const windowscrollDefault = reactive(scrollPosition)
-const windowDimensionsDefault = reactive({
-  vw: toValue(width),
-  vh: toValue(height),
+const mappedParent = computed(() => {
+  if (props.el) return props.el
+  return undefined
 })
 
-provide(WindowScrollKey, readonly(windowscrollDefault))
-provide(WindowDimensionsKey, readonly(windowDimensionsDefault))
+const scrollPosition = useScroll(mappedEl)
+
+provide(ScrollPositionKey, scrollPosition)
+provide(ScrollParentKey, mappedParent)
 </script>

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

@@ -1,15 +1,21 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    hasScrollListener: {
+    el: {
+        type: import("vue").PropType<HTMLElement>;
+    };
+    active: {
         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: {
+    el: {
+        type: import("vue").PropType<HTMLElement>;
+    };
+    active: {
         type: import("vue").PropType<Boolean>;
         default: () => true;
     };
 }>>, {
-    hasScrollListener: Boolean;
+    active: Boolean;
 }, {}>, {
     default?(_: {}): any;
 }>;

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

@@ -9,7 +9,6 @@ import {
   ref,
   provide,
   inject,
-  computed,
   onMounted,
   watch,
   nextTick,
@@ -19,7 +18,7 @@ import {
 import { useIntersectionObserver } from '@vueuse/core'
 import { mapValue } from '../utils'
 import { useProgress } from '../composables/useProgress'
-import { WindowScrollKey, ScrollProgressKey } from '../types'
+import { ScrollPositionKey, ScrollParentKey, ScrollProgressKey } from '../types'
 
 import type { FromTo } from '../types'
 
@@ -33,17 +32,18 @@ const props = withDefaults(defineProps<Props>(), {
   to: 'bottom-top',
 })
 
-const scrollPosition = inject(WindowScrollKey, { x: 0, y: 0 })
-const pageYOffset = computed(() => scrollPosition.y)
+const scrollPosition = inject(ScrollPositionKey, undefined)
+const scrollParent = inject(ScrollParentKey)
 
 const sceneRef = ref<HTMLElement | undefined>(undefined)
 const progress = ref(0)
 
-const { getCalculations, getProgress } = useProgress(
-  sceneRef,
-  props.from,
-  props.to
-)
+const { getCalculations, getProgress } = useProgress({
+  child: sceneRef,
+  parent: scrollParent,
+  from: props.from,
+  to: props.to,
+})
 
 const calculate = () => {
   getCalculations()
@@ -57,12 +57,12 @@ onMounted(() => {
 })
 
 watch(
-  () => pageYOffset.value,
+  () => scrollPosition?.y.value,
   () => {
     if (intersecting.value) {
       calculate()
     }
-  }
+  },
 )
 
 const intersecting = ref()
@@ -72,7 +72,7 @@ useIntersectionObserver(
   ([{ isIntersecting }]) => {
     intersecting.value = isIntersecting
   },
-  { rootMargin: '150% 0px 150% 0px' }
+  { rootMargin: '150% 0px 150% 0px' },
 )
 
 provide('mapValue', mapValue)

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

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

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

@@ -1,7 +1,7 @@
 import { ref, watch, unref, computed } from "vue";
-import { useIntersectionObserver } from "@vueuse/core";
+import { useIntersectionObserver, useWindowSize } from "@vueuse/core";
 import { useCollisionEmitter } from "./useCollisionEmitter.mjs";
-export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntries, parent) {
+export function useCollisionDetect(pageYOffset, collisionEntries, parent) {
   const scrolled = ref(0);
   const intersecting = ref();
   const scrollDirection = ref();
@@ -9,10 +9,11 @@ export function useCollisionDetect(pageYOffset, windowDimensions, collisionEntri
   const oppositeScrollDirection = computed(
     () => scrollDirection.value === "up" ? "down" : "up"
   );
+  const windowDimensions = useWindowSize();
   function getOffset(value) {
     return typeof value === "function" ? value({
-      vh: unref(windowDimensions.vh),
-      vw: unref(windowDimensions.vw)
+      vh: unref(windowDimensions.height),
+      vw: unref(windowDimensions.width)
     }) : value || 0;
   }
   function initialize() {

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

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

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

@@ -1,58 +1,72 @@
 import { ref, inject } from "vue";
+import { useElementBounding, useWindowSize } from "@vueuse/core";
 import { toValue } from "@vueuse/shared";
-import { WindowDimensionsKey, WindowScrollKey } from "../types/index.mjs";
+import { ScrollPositionKey } 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();
+export function useProgress(params) {
+  const { child, parent, from, to } = params;
+  const scrollPosition = inject(ScrollPositionKey, void 0);
+  const childRect = ref();
+  const parentRect = 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]
+      child: location.match(/^[a-z]+/)[0],
+      parent: location.match(/[a-z]+$/)[0]
     };
   };
   const getOffsetTop = (points) => {
     let y = 0;
-    if (!targetRect.value)
+    if (!childRect.value)
       return y;
-    switch (points.el) {
+    const scrollY = toValue(scrollPosition?.y) || 0;
+    if (parent)
+      console.log("scrollY:", scrollY);
+    switch (points.child) {
       case "top":
-        y += targetRect.value.top + scrollPosition.y;
+        y += childRect.value.top + scrollY;
         break;
       case "center":
-        y += targetRect.value.top + targetRect.value.height / 2 + scrollPosition.y;
+        y += childRect.value.top + childRect.value.height / 2 + scrollY;
         break;
       case "bottom":
-        y += targetRect.value.top + targetRect.value.height + scrollPosition.y;
+        y += childRect.value.top + childRect.value.height + scrollY;
         break;
     }
-    switch (points.vp) {
+    if (!parentRect.value)
+      return y;
+    const dimensions = {
+      width: toValue(parentRect.value.width),
+      height: toValue(parentRect.value.height),
+      top: toValue(parentRect.value.top)
+    };
+    switch (points.parent) {
       case "top":
-        y -= 0;
+        y -= dimensions.top;
         break;
       case "center":
-        y -= dimensions.vh / 2;
+        y -= dimensions.top + dimensions.height / 2;
         break;
       case "bottom":
-        y -= dimensions.vh;
+        y -= dimensions.top + dimensions.height;
         break;
       case "initial":
-        y -= targetRect.value.top + scrollPosition.y;
+        y -= childRect.value.top + scrollY;
         break;
     }
     return y;
   };
   const getCalculations = () => {
-    targetRect.value = toValue(target)?.getBoundingClientRect();
+    childRect.value = toValue(child)?.getBoundingClientRect();
+    parentRect.value = toValue(parent) ? useElementBounding(parent) : { ...useWindowSize(), top: 0 };
     start.value = getOffsetTop(splitLocation(from));
     end.value = getOffsetTop(splitLocation(to));
   };
   const getProgress = () => {
+    const scrollY = toValue(scrollPosition?.y) || 0;
     const total = Math.abs(end.value - start.value);
-    const current = scrollPosition.y - start.value;
+    const current = scrollY - start.value;
     return clampValue(current / total, 0, 1);
   };
   return { getCalculations, getProgress };

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

@@ -25,10 +25,10 @@ interface CollisionMappedEntry extends Omit<CollisionEntry, 'element'> {
     };
     element: HTMLElement;
 }
-type WindowDimensions = {
-    vw: number;
-    vh: number;
+type Dimensions = {
+    width: number;
+    height: 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, };
+export type { FromTo, CollisionEvents, CollisionEntry, CollisionMappedEntry, Dimensions, };

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

@@ -1,12 +1,26 @@
 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;
-}>;
+import type { MaybeRefOrGetter } from '@vueuse/shared';
+declare const ScrollParentKey: InjectionKey<MaybeRefOrGetter<HTMLElement | undefined>>;
+declare const ScrollPositionKey: InjectionKey<{
+    x: import("vue").WritableComputedRef<number>;
+    y: import("vue").WritableComputedRef<number>;
+    isScrolling: Ref<boolean>;
+    arrivedState: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+    directions: {
+        left: boolean;
+        right: boolean;
+        top: boolean;
+        bottom: boolean;
+    };
+    measure(): void;
+} | undefined>;
 declare const ScrollProgressKey: InjectionKey<Ref<number>>;
 declare const StoreKey: InjectionKey<{
     isNavigating: boolean;
 }>;
-export { WindowDimensionsKey, WindowScrollKey, ScrollProgressKey, StoreKey };
+export { ScrollParentKey, ScrollPositionKey, ScrollProgressKey, StoreKey };

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

@@ -1,5 +1,5 @@
-const WindowDimensionsKey = Symbol();
-const WindowScrollKey = Symbol();
+const ScrollParentKey = Symbol();
+const ScrollPositionKey = Symbol();
 const ScrollProgressKey = Symbol();
 const StoreKey = Symbol();
-export { WindowDimensionsKey, WindowScrollKey, ScrollProgressKey, StoreKey };
+export { ScrollParentKey, ScrollPositionKey, ScrollProgressKey, StoreKey };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maas/vue-equipment",
   "description": "A magic collection of Vue composables, plugins, components and directives",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": "Robin Scholz <https://github.com/robinscholz>, Christoph Jeworutzki <https://github.com/ChristophJeworutzki>",
   "devDependencies": {
     "@antfu/ni": "^0.21.5",

package/dist/plugins/MagicModal/src/composables/store/modals.d.ts

@@ -1,4 +0,0 @@
-declare let modalsStore: import("vue").ShallowReactive<string[]>;
-declare function addIdToStore(id: string): void;
-declare function removeIdFromStore(id: string): void;
-export { modalsStore, addIdToStore, removeIdFromStore };

package/dist/plugins/MagicModal/src/composables/store/modals.mjs

@@ -1,9 +0,0 @@
-import { shallowReactive } from "vue";
-let modalsStore = shallowReactive([]);
-function addIdToStore(id) {
-  modalsStore.push(id);
-}
-function removeIdFromStore(id) {
-  modalsStore = modalsStore.filter((x) => x !== id);
-}
-export { modalsStore, addIdToStore, removeIdFromStore };