@ulu/frontend-vue 0.5.15 → 0.6.0

package/dist/components/index.d.ts

@@ -47,6 +47,7 @@ export { default as UluFormActions } from './forms/UluFormActions.vue';
 export { default as UluFormCheckbox } from './forms/UluFormCheckbox.vue';
 export { default as UluFormFieldset } from './forms/UluFormFieldset.vue';
 export { default as UluFormItem } from './forms/UluFormItem.vue';
+export { default as UluFormLabel } from './forms/UluFormLabel.vue';
 export { default as UluFormItemsInline } from './forms/UluFormItemsInline.vue';
 export { default as UluFormRadio } from './forms/UluFormRadio.vue';
 export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';

package/dist/components/systems/facets/UluFacetsFilterSelects.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":"AA0CA;wBA+OqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;sPASG"}
+{"version":3,"file":"UluFacetsFilterSelects.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsFilterSelects.vue"],"names":[],"mappings":"AA0CA;wBAyOqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAZjC;;;;;;;;sPASG"}

package/dist/components/systems/facets/UluFacetsFilterSelects.vue.js

@@ -1,6 +1,6 @@
-import { createElementBlock as n, openBlock as d, normalizeClass as a, Fragment as m, renderList as y, createElementVNode as o, renderSlot as i, createTextVNode as r, toDisplayString as u } from "vue";
+import { createElementBlock as d, openBlock as n, normalizeClass as a, Fragment as m, renderList as _, createElementVNode as i, renderSlot as r, createTextVNode as o, toDisplayString as u } from "vue";
 /* empty css                            */
-const v = ["for"], w = ["id", "onChange"], S = { value: "" }, $ = ["value", "selected"], F = {
+const w = ["for"], S = ["id", "onChange"], $ = { value: "" }, k = ["value", "selected"], F = {
   __name: "UluFacetsFilterSelects",
   props: {
     /**
@@ -19,10 +19,9 @@ const v = ["for"], w = ["id", "onChange"], S = { value: "" }, $ = ["value", "sel
     }
   },
   emits: ["facet-change"],
-  setup(c, { emit: _ }) {
-    console.log(c);
-    const b = _;
-    function p(l, f) {
+  setup(c, { emit: y }) {
+    const b = y;
+    function v(l, f) {
       const e = f.target.value;
       l.children.find((s) => s.selected)?.uid !== e && l.children.forEach((s) => {
         const h = s.uid === e;
@@ -33,45 +32,45 @@ const v = ["for"], w = ["id", "onChange"], S = { value: "" }, $ = ["value", "sel
         });
       });
     }
-    return (l, f) => (d(), n("div", {
+    return (l, f) => (n(), d("div", {
       class: a(["facets-dropdown-filters", c.classes.container])
     }, [
-      (d(!0), n(m, null, y(c.facets, (e) => (d(), n("div", {
+      (n(!0), d(m, null, _(c.facets, (e) => (n(), d("div", {
         class: a(["facets-dropdown-filters__group", c.classes.group]),
         key: e.uid
       }, [
-        o("label", {
+        i("label", {
           for: `facet-dropdown-${e.uid}`,
           class: a(["facets-dropdown-filters__label", c.classes.label])
         }, [
-          i(l.$slots, "label", {}, () => [
-            r(u(e.name), 1)
+          r(l.$slots, "label", {}, () => [
+            o(u(e.name), 1)
           ])
-        ], 10, v),
-        o("select", {
+        ], 10, w),
+        i("select", {
           id: `facet-dropdown-${e.uid}`,
           class: a(["facets-dropdown-filters__select", c.classes.select]),
-          onChange: (t) => p(e, t)
+          onChange: (t) => v(e, t)
         }, [
-          o("option", S, [
-            i(l.$slots, "optionAll", { group: e }, () => [
-              r(" All " + u(e.name) + "s ", 1)
+          i("option", $, [
+            r(l.$slots, "optionAll", { group: e }, () => [
+              o(" All " + u(e.name) + "s ", 1)
             ])
           ]),
-          (d(!0), n(m, null, y(e.children, (t, s) => (d(), n("option", {
+          (n(!0), d(m, null, _(e.children, (t, s) => (n(), d("option", {
             key: t.uid,
             value: t.uid,
             selected: t.selected
           }, [
-            i(l.$slots, "option", {
+            r(l.$slots, "option", {
               group: e,
               option: t,
               index: s
             }, () => [
-              r(u(t.label), 1)
+              o(u(t.label), 1)
             ])
-          ], 8, $))), 128))
-        ], 42, w)
+          ], 8, k))), 128))
+        ], 42, S)
       ], 2))), 128))
     ], 2));
   }

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;wBAqLqB,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;wBAqMqB,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 s, provide as n, computed as p, createElementBlock as f, openBlock as m, renderSlot as d } from "vue";
+import { ref as s, provide as l, 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",
@@ -33,20 +33,28 @@ const A = {
     /**
      * Enable debug logging for the IntersectionObserver
      */
-    debug: Boolean
+    debug: Boolean,
+    /**
+     * If true, the last section will deactivate when scrolling past its bounding box.
+     * By default, the last section remains active until the user scrolls back up.
+     */
+    deactivateLastItem: {
+      type: Boolean,
+      default: !1
+    }
   },
   emits: ["section-change"],
-  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) => {
+  setup(c, { emit: r }) {
+    const a = c, u = r, e = s([]), n = s(null);
+    return h({ sections: e, props: a, emit: u, componentElRef: n }), l("uluScrollAnchorsSections", p(() => e.value)), l("uluScrollAnchorsRegister", (o) => {
       e.value.push(o);
-    }), n("uluScrollAnchorsUnregister", (o) => {
-      const l = e.value.findIndex((i) => i.id === o);
-      l > -1 && e.value.splice(l, 1);
-    }), (o, l) => (m(), f("div", {
+    }), l("uluScrollAnchorsUnregister", (o) => {
+      const t = e.value.findIndex((i) => i.id === o);
+      t > -1 && e.value.splice(t, 1);
+    }), (o, t) => (m(), f("div", {
       class: "scroll-anchors",
       ref_key: "componentEl",
-      ref: t
+      ref: n
     }, [
       d(o.$slots, "default")
     ], 512));

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

@@ -6,6 +6,9 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     element: string;
     railWidth: number;
+    trimRailToCenters: boolean;
+    railStartOffset: number;
+    railEndOffset: number;
     indicatorWidth: number;
     indicatorHeight: number;
     indicatorAlignment: string;
@@ -13,13 +16,16 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     $props: {
         readonly element?: string | undefined;
         readonly railWidth?: number | undefined;
+        readonly trimRailToCenters?: boolean | undefined;
+        readonly railStartOffset?: number | undefined;
+        readonly railEndOffset?: number | undefined;
         readonly indicatorWidth?: number | undefined;
         readonly indicatorHeight?: number | undefined;
         readonly indicatorAlignment?: string | undefined;
         readonly indicatorAlignmentOffset?: number | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
-    indicator: HTMLDivElement;
+    listRef: HTMLUListElement;
 }, any>;
 type __VLS_TemplateResult = {
     attrs: Partial<{}>;
@@ -30,7 +36,7 @@ type __VLS_TemplateResult = {
         }): any;
     };
     refs: {
-        indicator: HTMLDivElement;
+        listRef: HTMLUListElement;
     };
     rootEl: any;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":"AAsCA;wBA4UqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;QAQG"}
+{"version":3,"file":"UluScrollAnchorsNavAnimated.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/UluScrollAnchorsNavAnimated.vue"],"names":[],"mappings":"AAqCA;wBA4eqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;QAQG"}

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

@@ -1,7 +1,7 @@
-import { ref as d, computed as N, watch as w, createBlock as $, createCommentVNode as W, unref as f, openBlock as h, resolveDynamicComponent as b, normalizeStyle as _, withCtx as C, createElementVNode as m, createElementBlock as g, Fragment as H, renderList as B, normalizeClass as v, renderSlot as I, createTextVNode as R, toDisplayString as V } from "vue";
-import { runAfterFramePaint as z } from "@ulu/utils/browser/performance.js";
-import { useScrollAnchorSections as D } from "./useScrollAnchorSections.js";
-const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
+import { ref as c, onMounted as $, onBeforeUnmount as w, computed as N, watch as C, createBlock as z, createCommentVNode as B, unref as p, openBlock as y, resolveDynamicComponent as M, normalizeStyle as g, withCtx as T, createElementVNode as _, createElementBlock as k, Fragment as W, renderList as E, normalizeClass as S, renderSlot as H, createTextVNode as I, toDisplayString as V } from "vue";
+import { runAfterFramePaint as D } from "@ulu/utils/browser/performance.js";
+import { useScrollAnchorSections as F } from "./useScrollAnchorSections.js";
+const L = ["href"], j = {
   __name: "UluScrollAnchorsNavAnimated",
   props: {
     /**
@@ -18,6 +18,26 @@ const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
       type: Number,
       default: 3
     },
+    /**
+     * Dynamically trims the rail to span exactly from the center of the first indicator to the center of the last indicator. Disabled by default
+     */
+    trimRailToCenters: {
+      type: Boolean
+    },
+    /**
+     * Pixel offset for the start (top) of the dynamic rail.
+     */
+    railStartOffset: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * Pixel offset for the end (bottom) of the dynamic rail.
+     */
+    railEndOffset: {
+      type: Number,
+      default: 0
+    },
     /**
      * The width of the indicator, defaults to railWidth
      */
@@ -48,71 +68,96 @@ const E = { class: "scroll-anchors-nav-animated__rail" }, F = ["href"], P = {
       default: 0
     }
   },
-  setup(o) {
-    const i = o, n = D(), p = d({}), c = d(!1), S = d(null), e = N(() => {
-      if (!n || !n.value || !n.value.length)
-        return !1;
-      const t = n.value.findIndex((x) => x.active);
-      if (t === -1)
+  setup(u) {
+    const l = u, a = F(), f = c(null), x = c({}), d = c(!1), h = c(0);
+    let s = null;
+    $(() => {
+      f.value && (s = new ResizeObserver(() => {
+        h.value++;
+      }), s.observe(f.value));
+    }), w(() => {
+      s && (s.disconnect(), s = null);
+    });
+    function v(e) {
+      const t = x.value[e];
+      if (!t) return null;
+      const { offsetTop: n, offsetHeight: r } = t, o = l.indicatorHeight != null, R = l.indicatorWidth ?? l.railWidth, b = o ? l.indicatorHeight : r;
+      let m = n;
+      return l.indicatorAlignment === "center" && (m = n + r / 2 - b / 2), m += l.indicatorAlignmentOffset, { y: m, height: b, width: R };
+    }
+    const i = N(() => {
+      if (h.value, !a || !a.value || !a.value.length)
         return !1;
-      const l = p.value[t];
-      if (!l) return !1;
-      const { offsetTop: a, offsetHeight: r } = l, s = i.indicatorHeight != null, A = i.indicatorWidth ?? i.railWidth, y = s ? i.indicatorHeight : r;
-      let u = a;
-      return i.indicatorAlignment === "center" && (u = a + r / 2 - y / 2), u += i.indicatorAlignmentOffset, { y: u, height: y, width: A };
+      const e = a.value.findIndex((t) => t.active);
+      return e === -1 ? !1 : v(e) || !1;
+    }), A = N(() => {
+      if (h.value, !l.trimRailToCenters) return {};
+      if (!a || !a.value || a.value.length < 1) return {};
+      const e = v(0), t = v(a.value.length - 1);
+      if (!e || !t) return {};
+      let n = e.y + e.height / 2, r = t.y + t.height / 2;
+      n += l.railStartOffset, r += l.railEndOffset;
+      const o = Math.max(0, r - n);
+      return {
+        "--ulu-sa-nav-rail-top": `${n}px`,
+        "--ulu-sa-nav-rail-height": `${o}px`
+      };
     });
-    w(e, (t) => {
-      t && !c.value && z(() => {
-        c.value = !0;
+    C(i, (e) => {
+      e && !d.value && D(() => {
+        d.value = !0;
       });
     });
-    function k(t, l) {
-      l && (p.value[t] = l);
+    function O(e, t) {
+      t && (x.value[e] = t);
     }
-    return (t, l) => f(n) && f(n).length ? (h(), $(b(o.element), {
+    return (e, t) => p(a) && p(a).length ? (y(), z(M(u.element), {
       key: 0,
       class: "scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated",
-      style: _({ "--ulu-sa-nav-rail-width": `${o.railWidth}px` })
+      style: g({ "--ulu-sa-nav-rail-width": `${u.railWidth}px` })
     }, {
-      default: C(() => [
-        m("ul", E, [
-          (h(!0), g(H, null, B(f(n), (a, r) => (h(), g("li", {
+      default: T(() => [
+        _("ul", {
+          class: "scroll-anchors-nav-animated__rail",
+          ref_key: "listRef",
+          ref: f,
+          style: g(A.value)
+        }, [
+          (y(!0), k(W, null, E(p(a), (n, r) => (y(), k("li", {
             key: r,
-            class: v({ "is-active": a.active })
+            class: S({ "is-active": n.active })
           }, [
-            m("a", {
-              class: v({ "is-active": a.active }),
+            _("a", {
+              class: S({ "is-active": n.active }),
               ref_for: !0,
-              ref: (s) => k(r, s),
-              href: `#${a.titleId}`
+              ref: (o) => O(r, o),
+              href: `#${n.titleId}`
             }, [
-              I(t.$slots, "default", {
-                item: a,
+              H(e.$slots, "default", {
+                item: n,
                 index: r
               }, () => [
-                R(V(a.title), 1)
+                I(V(n.title), 1)
               ])
-            ], 10, F)
+            ], 10, L)
           ], 2))), 128))
-        ]),
-        m("div", {
-          class: v(["scroll-anchors-nav-animated__indicator", {
-            "scroll-anchors-nav-animated__indicator--can-transition": c.value
+        ], 4),
+        _("div", {
+          class: S(["scroll-anchors-nav-animated__indicator", {
+            "scroll-anchors-nav-animated__indicator--can-transition": d.value
           }]),
-          ref_key: "indicator",
-          ref: S,
-          style: _({
-            opacity: e.value ? "1" : "0",
-            transform: `translateY(${e.value ? e.value.y : 0}px)`,
-            height: `${e.value ? e.value.height : 0}px`,
-            width: `${e.value ? e.value.width : 0}px`
+          style: g({
+            opacity: i.value ? "1" : "0",
+            transform: `translateY(${i.value ? i.value.y : 0}px)`,
+            height: `${i.value ? i.value.height : 0}px`,
+            width: `${i.value ? i.value.width : 0}px`
           })
         }, null, 6)
       ]),
       _: 3
-    }, 8, ["style"])) : W("", !0);
+    }, 8, ["style"])) : B("", !0);
   }
 };
 export {
-  P as default
+  j as default
 };

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,QA0KnF"}
+{"version":3,"file":"useScrollAnchors.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/scroll-anchors/useScrollAnchors.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,4EAFW;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,WAAW;IAAC,cAAc,EAAE,MAAM,CAAA;CAAC,QAsTnF"}

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

@@ -1,95 +1,138 @@
-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);
+import { onMounted as P, onUnmounted as U, watch as Y, nextTick as L } from "vue";
+import { getScrollParent as M } from "@ulu/utils/browser/dom.js";
+import { debounce as j } from "@ulu/utils/performance.js";
+function J({ sections: r, props: t, emit: T, componentElRef: m }) {
+  let a = null, O = 0, k = "down", d = null, x = !0;
+  function g(e) {
+    return r.value.findIndex(({ element: n }) => e === n);
   }
-  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 B(e, n, s = "down") {
+    if (!e) return;
+    const v = s === "down" ? "forward" : "reverse";
+    n ? (e.active = !0, e.inactiveFrom = null, e.activeFrom = v) : (e.active && (e.inactiveFrom = v, e.activeFrom = null), e.active = !1);
+  }
+  function $(e = null, n = "down") {
+    r.value.forEach((s) => {
+      s !== e && B(s, !1, n);
     });
   }
-  function A() {
-    let t = 0, l = !0;
-    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 = 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), 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 });
-        }));
+  function h(e, n) {
+    e && !e.active && (t.debug && console.log("Activate:", e.title), L(() => {
+      $(e, n), B(e, !0, n), T("section-change", { section: e, sections: r.value, active: !0 });
+    }));
+  }
+  function I(e, n) {
+    const s = r.value.find((v) => v.active);
+    s && (t.debug && n && console.log(n, s.title), L(() => {
+      $(null, e), T("section-change", { section: s, sections: r.value, active: !1 });
+    }));
+  }
+  function y() {
+    let e = null;
+    return t.observerOptions && t.observerOptions.root !== void 0 ? e = t.observerOptions.root : m.value && (e = M(m.value), e === document.scrollingElement && (e = null)), e || window;
+  }
+  const A = j(() => {
+    t.debug && console.log("New Observer (debounced/check)"), a && (a.disconnect(), a = null), E(), w();
+  }, 100);
+  function C() {
+    D(), d = y(), d && d.addEventListener("scroll", A, { passive: !0 });
+  }
+  function D() {
+    d && (d.removeEventListener("scroll", A), d = null);
+  }
+  function E() {
+    x = !0;
+    const e = (u) => {
+      const { root: R } = a, S = R ? R.scrollTop : document.documentElement.scrollTop || window.scrollY;
+      let i = k;
+      S > O ? i = "down" : S < O && (i = "up"), t.debug && (console.groupCollapsed(`Scroll: ${O} -> ${S} (${i})`), console.table(u.map((o) => ({
+        el: o.target.id || o.target.tagName,
+        int: o.isIntersecting,
+        ratio: o.intersectionRatio.toFixed(2)
+      })))), O = S, k = i;
+      const b = u.filter((o) => o.isIntersecting);
+      if (b.length > 0) {
+        b.sort((c, f) => g(c.target) - g(f.target));
+        const o = i === "down" ? b[b.length - 1] : b[0];
+        t.debug && console.log("Target:", o.target.id || o.target.tagName);
+        const l = r.value[g(o.target)];
+        h(l, i);
+      } else if (x) {
+        t.debug && console.log("Fallback: bounds");
+        let o = -1;
+        if (u.forEach((l) => {
+          const c = l.rootBounds ? l.rootBounds.top : 0;
+          if (l.boundingClientRect.top <= c + 1) {
+            const f = g(l.target);
+            f > o && (o = f);
+          }
+        }), o > -1) {
+          const l = o === r.value.length - 1, c = r.value[o];
+          if (l && t.deactivateLastItem) {
+            const f = u.find((H) => H.target === c.element), F = f.rootBounds ? f.rootBounds.bottom : window.innerHeight;
+            f && f.boundingClientRect.bottom < F ? I(i, "Deactivate (last):") : h(c, i);
+          } else
+            h(c, i);
+        } else if (t.debug && console.log("Fallback: top"), !t.firstItemActive)
+          I(i, "Deactivate (top):");
+        else {
+          const l = r.value[0];
+          h(l, i);
+        }
       } else {
-        e.debug && console.log("No intersecting entries. Checking edge cases.");
-        const n = i.value.find((o) => o.active);
-        if (n) {
-          const o = a.find((u) => u.target === n.element);
-          if (o && !o.isIntersecting) {
-            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 });
-            }));
+        t.debug && console.log("Check edges");
+        const o = r.value.find((l) => l.active);
+        if (o) {
+          const l = u.find((c) => c.target === o.element);
+          if (l && !l.isIntersecting) {
+            const c = g(l.target), f = c === 0, F = c === r.value.length - 1;
+            (f && i === "up" && !t.firstItemActive || F && i === "down" && t.deactivateLastItem) && I(i, "Deactivate (edge):");
           }
         }
       }
-      e.debug && console.groupEnd();
+      x = !1, t.debug && console.groupEnd();
     };
-    let g = null;
-    e.observerOptions && e.observerOptions.root !== void 0 ? g = e.observerOptions.root : I.value && (g = C(I.value), g === document.scrollingElement && (g = null));
-    let E = {
+    let n = null;
+    t.observerOptions && t.observerOptions.root !== void 0 ? n = t.observerOptions.root : m.value && (n = M(m.value), n === document.scrollingElement && (n = null));
+    let s = {
       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`;
+    if (t.snapOffset !== !1 && t.snapOffset !== void 0) {
+      const u = t.snapOffset === !0 ? 20 : Number(t.snapOffset);
+      s.rootMargin = `-${u}% 0px -${99 - u}% 0px`;
     }
-    const $ = {
-      ...E,
-      ...e.observerOptions || {},
-      root: g
+    const v = {
+      ...s,
+      ...t.observerOptions || {},
+      root: n
     };
-    r = new IntersectionObserver(c, $);
+    a = new IntersectionObserver(e, v);
   }
-  function b() {
-    r && (r.disconnect(), i.value.forEach(({ element: t }) => {
-      t && r.observe(t);
+  function w() {
+    a && (a.disconnect(), r.value.forEach(({ element: e }) => {
+      e && a.observe(e);
     }));
   }
-  function x() {
-    r && (r.disconnect(), r = null);
+  function N() {
+    a && (a.disconnect(), a = null);
   }
-  T(() => {
-    if (e.firstItemActive && i.value.length > 0) {
-      const t = i.value[0];
-      t && (t.active = !0);
-    }
-    A(), b();
-  }), Y(() => {
-    x();
-  }), F(() => i.value.length, () => {
-    O(() => {
-      b();
+  P(() => {
+    E(), w(), C();
+  }), U(() => {
+    N(), D(), A.cancel();
+  }), Y(() => r.value.length, () => {
+    L(() => {
+      w();
     });
-  }), F(
-    () => [e.snapOffset, e.observerOptions],
+  }), Y(
+    () => [t.snapOffset, t.observerOptions],
     () => {
-      x(), A(), b();
+      N(), E(), w(), C();
     },
     { deep: !0 }
   );
 }
 export {
-  D as useScrollAnchors
+  J as useScrollAnchors
 };

package/dist/components/utils/UluAction.vue.d.ts

@@ -4,6 +4,7 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
+    type?: string | undefined;
     activeClass?: string | undefined;
     to?: string | Record<string, any> | undefined;
     target?: string | undefined;
@@ -14,6 +15,7 @@ declare const __VLS_component: import('vue').DefineComponent<{}, {
     exactActiveClass?: string | undefined;
     click?: Function | undefined;
     $props: {
+        readonly type?: string | undefined;
         readonly activeClass?: string | undefined;
         readonly to?: string | Record<string, any> | undefined;
         readonly target?: string | undefined;

package/dist/components/utils/UluAction.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluAction.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluAction.vue"],"names":[],"mappings":"AAQA;wBAqNqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;2OAQG"}
+{"version":3,"file":"UluAction.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/utils/UluAction.vue"],"names":[],"mappings":"AAQA;wBA6NqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAXjC;;;;;;;;;;;;;;;;;;;;;;;2OAQG"}