@ulu/frontend-vue 0.5.10 → 0.5.11

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

@@ -5,13 +5,8 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     $emit: (event: "section-change", ...args: any[]) => void;
-    observerOptions: Record<string, any>;
-    firstItemActive: boolean;
-    debug: boolean;
     $props: {
-        readonly observerOptions?: Record<string, any> | undefined;
-        readonly firstItemActive?: boolean | undefined;
-        readonly debug?: boolean | undefined;
+        readonly [x: string]: any;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     componentEl: HTMLDivElement;

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

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchors.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchors.vue"],"names":[],"mappings":"AAKA;wBAiKqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;;;;;;mBAUG"}
+{"version":3,"file":"UluScrollAnchors.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchors.vue"],"names":[],"mappings":"AAKA;wBAqLqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAbjC;;;;;;;mBAUG"}

package/dist/components/systems/scroll-anchors/UluScrollAnchors.vue.js

@@ -1,4 +1,4 @@
-import { ref as n, provide as r, computed as a, createElementBlock as m, openBlock as d, renderSlot as f } from "vue";
+import { ref as s, provide as n, computed as p, createElementBlock as f, openBlock as m, renderSlot as d } from "vue";
 import { useScrollAnchors as h } from "./useScrollAnchors.js";
 const A = {
   __name: "UluScrollAnchors",
@@ -8,17 +8,27 @@ const A = {
      */
     firstItemActive: Boolean,
     /**
-     * IntersectionObserver options
-     * - Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
+     * Custom IntersectionObserver options to completely override internal defaults.
+     * Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
      * See: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+     * @type {Object|null}
      */
     observerOptions: {
       type: Object,
-      default: () => ({
-        root: null,
-        threshold: 0,
-        rootMargin: "-25% 0px -55% 0px"
-      })
+      default: null
+    },
+    /**
+     * Creates a strict 1% horizontal observation line to trigger active states.
+     * - Accepts a number representing the percentage down from the top of the screen (e.g., 20 for 20%).
+     * - If you pass true it will default to 20%
+     * - Optional not enabled by default
+     * - You can control this yourself with observerOptions
+     * @type {Number|Boolean}
+     * @default false
+     */
+    snapOffset: {
+      type: [Number, Boolean],
+      default: !1
     },
     /**
      * Enable debug logging for the IntersectionObserver
@@ -26,19 +36,19 @@ const A = {
     debug: Boolean
   },
   emits: ["section-change"],
-  setup(c, { emit: s }) {
-    const u = c, i = s, e = n([]), t = n(null);
-    return h({ sections: e, props: u, emit: i, componentElRef: t }), r("uluScrollAnchorsSections", a(() => e.value)), r("uluScrollAnchorsRegister", (o) => {
+  setup(r, { emit: c }) {
+    const u = r, a = c, e = s([]), t = s(null);
+    return h({ sections: e, props: u, emit: a, componentElRef: t }), n("uluScrollAnchorsSections", p(() => e.value)), n("uluScrollAnchorsRegister", (o) => {
       e.value.push(o);
-    }), r("uluScrollAnchorsUnregister", (o) => {
-      const l = e.value.findIndex((p) => p.id === o);
+    }), n("uluScrollAnchorsUnregister", (o) => {
+      const l = e.value.findIndex((i) => i.id === o);
       l > -1 && e.value.splice(l, 1);
-    }), (o, l) => (d(), m("div", {
+    }), (o, l) => (m(), f("div", {
       class: "scroll-anchors",
       ref_key: "componentEl",
       ref: t
     }, [
-      f(o.$slots, "default")
+      d(o.$slots, "default")
     ], 512));
   }
 };

package/dist/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,QAqJnF"}
+{"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,QA0KnF"}

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

@@ -1,44 +1,44 @@
-import { onMounted as y, onUnmounted as T, watch as Y, nextTick as m } from "vue";
+import { onMounted as T, onUnmounted as Y, watch as F, nextTick as O } from "vue";
 import { getScrollParent as C } from "@ulu/utils/browser/dom.js";
 function D({ sections: i, props: e, emit: h, componentElRef: I }) {
   let r = null;
   function v(t) {
     return i.value.findIndex(({ element: l }) => t === l);
   }
-  function O(t = null, l = "down") {
+  function w(t = null, l = "down") {
     i.value.forEach((c) => {
       c !== t && (c.active && (c.inactiveFrom = l === "down" ? "forward" : "reverse", c.activeFrom = null), c.active = !1);
     });
   }
-  function E() {
+  function A() {
     let t = 0, l = !0;
-    const c = (d) => {
-      const { root: A } = r, f = A ? A.scrollTop : document.documentElement.scrollTop || window.scrollY;
-      if (e.debug && (console.group("useScrollAnchors: onObserve"), console.log("Observer:", r), console.log("Last/Current Y:", `${t}/${f}`), console.log("Entries:", d.map((n) => ({ el: n.target, is: n.isIntersecting })))), l && e.firstItemActive) {
-        e.debug && console.log("Initial observation, respecting `firstItemActive`."), l = !1, t = f, e.debug && console.groupEnd();
+    const c = (a) => {
+      const { root: S } = r, d = S ? S.scrollTop : document.documentElement.scrollTop || window.scrollY;
+      if (e.debug && (console.group("useScrollAnchors: onObserve"), console.log("Observer:", r), console.log("Last/Current Y:", `${t}/${d}`), console.log("Entries:", a.map((n) => ({ el: n.target, is: n.isIntersecting })))), l && e.firstItemActive) {
+        e.debug && console.log("Initial observation, respecting `firstItemActive`."), l = !1, t = d, e.debug && console.groupEnd();
         return;
       }
       l = !1;
-      const s = f > t ? "down" : "up";
-      t = f, e.debug && console.log(`Scroll direction: ${s}`);
-      const a = d.filter((n) => n.isIntersecting);
-      if (e.debug && console.log("Intersecting entries:", a.map((n) => n.target)), a.length > 0) {
-        a.sort((u, b) => v(u.target) - v(b.target));
-        const n = s === "down" ? a[a.length - 1] : a[0];
+      const s = d > t ? "down" : "up";
+      t = d, e.debug && console.log(`Scroll direction: ${s}`);
+      const f = a.filter((n) => n.isIntersecting);
+      if (e.debug && console.log("Intersecting entries:", f.map((n) => n.target)), f.length > 0) {
+        f.sort((u, m) => v(u.target) - v(m.target));
+        const n = s === "down" ? f[f.length - 1] : f[0];
         e.debug && console.log("Chosen target entry:", n.target);
         const o = i.value[v(n.target)];
-        o && !o.active && (e.debug && console.log("Activating section:", o.title), m(() => {
-          O(o, s), o.active = !0, o.inactiveFrom = null, o.activeFrom = s === "down" ? "forward" : "reverse", h("section-change", { section: o, sections: i.value, active: !0 });
+        o && !o.active && (e.debug && console.log("Activating section:", o.title), O(() => {
+          w(o, s), o.active = !0, o.inactiveFrom = null, o.activeFrom = s === "down" ? "forward" : "reverse", h("section-change", { section: o, sections: i.value, active: !0 });
         }));
       } else {
         e.debug && console.log("No intersecting entries. Checking edge cases.");
         const n = i.value.find((o) => o.active);
         if (n) {
-          const o = d.find((u) => u.target === n.element);
+          const o = a.find((u) => u.target === n.element);
           if (o && !o.isIntersecting) {
-            const u = v(o.target), b = u === 0, x = u === i.value.length - 1;
-            (b && s === "up" && !e.firstItemActive || x && s === "down") && (e.debug && console.log("Deactivating section at edge:", n.title), m(() => {
-              O(null, s), h("section-change", { section: n, sections: i.value, active: !1 });
+            const u = v(o.target), m = u === 0, y = u === i.value.length - 1;
+            (m && s === "up" && !e.firstItemActive || y && s === "down") && (e.debug && console.log("Deactivating section at edge:", n.title), O(() => {
+              w(null, s), h("section-change", { section: n, sections: i.value, active: !1 });
             }));
           }
         }
@@ -46,34 +46,49 @@ function D({ sections: i, props: e, emit: h, componentElRef: I }) {
       e.debug && console.groupEnd();
     };
     let g = null;
-    e.observerOptions && e.observerOptions.root ? g = e.observerOptions.root : I.value && (g = C(I.value), g === document.scrollingElement && (g = null));
-    const F = {
-      ...e.observerOptions,
+    e.observerOptions && e.observerOptions.root !== void 0 ? g = e.observerOptions.root : I.value && (g = C(I.value), g === document.scrollingElement && (g = null));
+    let E = {
+      rootMargin: "-25% 0px -55% 0px",
+      threshold: 0
+    };
+    if (e.snapOffset !== !1 && e.snapOffset !== void 0) {
+      const a = e.snapOffset === !0 ? 20 : Number(e.snapOffset);
+      E.rootMargin = `-${a}% 0px -${99 - a}% 0px`;
+    }
+    const $ = {
+      ...E,
+      ...e.observerOptions || {},
       root: g
     };
-    r = new IntersectionObserver(c, F);
+    r = new IntersectionObserver(c, $);
   }
-  function w() {
+  function b() {
     r && (r.disconnect(), i.value.forEach(({ element: t }) => {
       t && r.observe(t);
     }));
   }
-  function S() {
+  function x() {
     r && (r.disconnect(), r = null);
   }
-  y(() => {
+  T(() => {
     if (e.firstItemActive && i.value.length > 0) {
       const t = i.value[0];
       t && (t.active = !0);
     }
-    E(), w();
-  }), T(() => {
-    S();
-  }), Y(() => i.value.length, () => {
-    m(() => {
-      w();
+    A(), b();
+  }), Y(() => {
+    x();
+  }), F(() => i.value.length, () => {
+    O(() => {
+      b();
     });
-  });
+  }), F(
+    () => [e.snapOffset, e.observerOptions],
+    () => {
+      x(), A(), b();
+    },
+    { deep: !0 }
+  );
 }
 export {
   D as useScrollAnchors

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

@@ -14,17 +14,27 @@
      */
     firstItemActive: Boolean,
     /**
-     * IntersectionObserver options
-     * - Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
+     * Custom IntersectionObserver options to completely override internal defaults.
+     * Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
      * See: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+     * @type {Object|null}
      */
     observerOptions: {
       type: Object,
-      default: () => ({
-        root: null,
-        threshold: 0,
-        rootMargin: "-25% 0px -55% 0px"
-      })
+      default: null
+    },
+    /**
+     * Creates a strict 1% horizontal observation line to trigger active states.
+     * - Accepts a number representing the percentage down from the top of the screen (e.g., 20 for 20%).
+     * - If you pass true it will default to 20%
+     * - Optional not enabled by default
+     * - You can control this yourself with observerOptions
+     * @type {Number|Boolean}
+     * @default false
+     */
+    snapOffset: {
+      type: [Number, Boolean],
+      default: false
     },
     /**
      * Enable debug logging for the IntersectionObserver

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

@@ -101,7 +101,7 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
     };
 
     let root = null;
-    if (props.observerOptions && props.observerOptions.root) {
+    if (props.observerOptions && props.observerOptions.root !== undefined) {
       root = props.observerOptions.root;
     } else if (componentElRef.value) {
       root = getScrollParent(componentElRef.value);
@@ -110,11 +110,22 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
       }
     }
 
+    let defaultOptions = {
+      rootMargin: "-25% 0px -55% 0px",
+      threshold: 0
+    };
+
+    if (props.snapOffset !== false && props.snapOffset !== undefined) {
+      const offset = props.snapOffset === true ? 20 : Number(props.snapOffset);
+      defaultOptions.rootMargin = `-${offset}% 0px -${99 - offset}% 0px`;
+    }
+
     const finalObserverOptions = {
-      ...props.observerOptions,
+      ...defaultOptions,
+      ...(props.observerOptions || {}),
       root
     };
-
+    
     observer = new IntersectionObserver(onObserve, finalObserverOptions);
   }
 
@@ -155,4 +166,14 @@ export function useScrollAnchors({ sections, props, emit, componentElRef }) {
       observeItems();
     });
   });
+
+  watch(
+    () => [props.snapOffset, props.observerOptions],
+    () => {
+      destroyObserver();
+      createObserver();
+      observeItems();
+    },
+    { deep: true }
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.5.10",
+  "version": "0.5.11",
   "description": "A modular, tree-shakeable Vue 3 component library for the Ulu Frontend theming system, plus general utilities for Vue development",
   "type": "module",
   "files": [