@ulu/frontend-vue 0.1.3-beta.15 → 0.1.3-beta.16

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.d.ts

@@ -14,6 +14,9 @@ type __VLS_Slots = {
         isActive: any;
         titleId: any;
         section: any;
+        inactiveFrom: any;
+        activeFrom: any;
+        sectionState: string | null;
     }) => any) | undefined;
 };
 declare const props: {

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsHeadlessSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue"],"names":[],"mappings":"wBAgIqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAErC;;;;;;;;AAvFD;;;;EAmBG"}
+{"version":3,"file":"UluScrollAnchorsHeadlessSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue"],"names":[],"mappings":"wBAsKqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;2OAErC;;;;;;;;;;;AA9GD;;;;EAmBG"}

package/dist/types/components/systems/scroll-anchors/UluScrollAnchorsSection.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"wBAuMqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAErC;;;;;;;;AAhID;;;;;;;;EA4CG"}
+{"version":3,"file":"UluScrollAnchorsSection.vue.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue"],"names":[],"mappings":"wBA+NqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;2OAErC;;;;;;;;AA5ID;;;;;;;;EA4CG"}

package/dist/types/components/systems/scroll-anchors/useScrollAnchorSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnchorSection.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchorSection.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,8CAHW,MAAM,GACJ,MAAM,CA+ClB"}
+{"version":3,"file":"useScrollAnchorSection.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchorSection.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,8CAHW,MAAM,GACJ,MAAM,CAmDlB"}

package/dist/types/components/systems/scroll-anchors/useScrollAnchors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QA+InF"}
+{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QAqJnF"}

package/lib/components/systems/scroll-anchors/UluScrollAnchorsHeadlessSection.vue

@@ -1,14 +1,19 @@
 <template>
-  <component 
-    :is="element" 
-    :class="['scroll-anchors__section', { 'is-active': isActive }]"
-    ref="sectionRef" 
+  <component
+    :is="element"
+    :class="[
+      'scroll-anchors__section',
+      { 'is-active': isActive }
+    ]"
+    :data-scrollpoint-state="sectionState"
+    ref="sectionRef"
   >
-    <slot :isActive="isActive" :titleId="titleId" :section="section" />
+    <slot :isActive="isActive" :titleId="titleId" :section="section" :inactiveFrom="inactiveFrom" :activeFrom="activeFrom" :sectionState="sectionState" />
   </component>
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { useScrollAnchorSection } from "./useScrollAnchorSection";
 
   const props = defineProps({
@@ -24,7 +29,7 @@
      */
     customTitleId: String,
     /**
-     * Element to use 
+     * Element to use
      */
     element: {
       type: String,
@@ -32,5 +37,14 @@
     }
   });
 
-  const { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);
+  const { sectionRef, titleId, isActive, inactiveFrom, activeFrom, section } = useScrollAnchorSection(props);
+
+  const sectionState = computed(() => {
+    if (isActive.value) {
+      if (activeFrom.value) return `enter-${activeFrom.value}`;
+    } else {
+      if (inactiveFrom.value) return `exit-${inactiveFrom.value}`;
+    }
+    return null;
+  });
 </script>

package/lib/components/systems/scroll-anchors/UluScrollAnchorsSection.vue

@@ -1,7 +1,8 @@
 <template>
-  <component 
-    :is="element" 
-    :class="[wrapperClass, { [activeClass] : activeClass && isActive }]" 
+  <component
+    :is="element"
+    :class="[wrapperClass, { [activeClass]: activeClass && isActive }]"
+    :data-scrollpoint-state="sectionState"
     ref="sectionRef"
   >
     <component :is="titleElement" :class="titleClass" :id="titleId">
@@ -14,6 +15,7 @@
 </template>
 
 <script setup>
+  import { computed } from "vue";
   import { useScrollAnchorSection } from "./useScrollAnchorSection";
 
   const props = defineProps({
@@ -62,5 +64,14 @@
     }
   });
 
-  const { sectionRef, titleId, isActive, section } = useScrollAnchorSection(props);
+  const { sectionRef, titleId, isActive, inactiveFrom, activeFrom, section } = useScrollAnchorSection(props);
+
+  const sectionState = computed(() => {
+    if (isActive.value) {
+      if (activeFrom.value) return `enter-${activeFrom.value}`;
+    } else {
+      if (inactiveFrom.value) return `exit-${inactiveFrom.value}`;
+    }
+    return null;
+  });
 </script>

package/lib/components/systems/scroll-anchors/useScrollAnchorSection.js

@@ -22,7 +22,9 @@ export function useScrollAnchorSection(props) {
     title: props.title,
     titleId: titleId.value,
     element: null, // will be set on mount
-    active: false
+    active: false,
+    inactiveFrom: null,
+    activeFrom: null
   });
   
   // Keep title and titleId in sync with props
@@ -51,6 +53,8 @@ export function useScrollAnchorSection(props) {
     sectionRef, // the ref for the user to attach
     titleId,
     isActive: computed(() => section.active),
+    inactiveFrom: computed(() => section.inactiveFrom),
+    activeFrom: computed(() => section.activeFrom),
     section
   };
 }

package/lib/components/systems/scroll-anchors/useScrollAnchors.js

@@ -15,9 +15,13 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
     return sections.value.findIndex(({ element }) => el === element);
   }
 
-  function removeActive(except = null) {
+  function removeActive(except = null, scrollDirection = 'down') {
     sections.value.forEach(s => {
       if (s !== except) {
+        if (s.active) {
+          s.inactiveFrom = scrollDirection === 'down' ? 'above' : 'below';
+          s.activeFrom = null;
+        }
         s.active = false;
       }
     });
@@ -67,8 +71,10 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
         if (sectionToActivate && !sectionToActivate.active) {
           if (props.debug) console.log("Activating section:", sectionToActivate.title);
           nextTick(() => {
-            removeActive(sectionToActivate);
+            removeActive(sectionToActivate, scrollDirection);
             sectionToActivate.active = true;
+            sectionToActivate.inactiveFrom = null;
+            sectionToActivate.activeFrom = scrollDirection === 'down' ? 'below' : 'above';
             emit("section-change", { section: sectionToActivate, sections: sections.value, active: true });
           });
         }
@@ -84,7 +90,7 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
             if ((isFirst && scrollDirection === 'up' && !props.firstItemActive) || (isLast && scrollDirection === 'down')) {
               if (props.debug) console.log("Deactivating section at edge:", activeSection.title);
               nextTick(() => {
-                removeActive();
+                removeActive(null, scrollDirection);
                 emit("section-change", { section: activeSection, sections: sections.value, active: false });
               });
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.15",
+  "version": "0.1.3-beta.16",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [