@ulu/frontend-vue 0.1.3-beta.2 → 0.1.3-beta.20

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

@@ -0,0 +1,158 @@
+import { onMounted, onUnmounted, nextTick, watch } from "vue";
+import { getScrollParent } from "@ulu/utils/browser/dom.js";
+
+/**
+ * The main composable that contains the core "engine" for the Scroll Anchors system.
+ * It encapsulates the IntersectionObserver logic to track sections and manage their active state.
+ * This is intended for advanced use cases where a developer needs to build a custom provider
+ * component instead of using the default `UluScrollAnchors`.
+ * @param {{sections: object, props: object, emit: Function, componentElRef: object}} options
+ */
+export function useScrollAnchors({ sections, props, emit, componentElRef }) {
+  let observer = null;
+
+  function getSectionIndex(el) {
+    return sections.value.findIndex(({ element }) => el === element);
+  }
+
+  function removeActive(except = null, scrollDirection = 'down') {
+    sections.value.forEach(s => {
+      if (s !== except) {
+        if (s.active) {
+          s.inactiveFrom = scrollDirection === 'down' ? 'forward' : 'reverse';
+          s.activeFrom = null;
+        }
+        s.active = false;
+      }
+    });
+  }
+
+  function createObserver() {
+    let lastScrollY = 0;
+    let isInitialObservation = true;
+
+    const onObserve = (entries) => {
+      const { root } = observer;
+      const currentScrollY = root ? root.scrollTop : document.documentElement.scrollTop || window.scrollY;
+
+      if (props.debug) {
+        console.group("useScrollAnchors: onObserve");
+        console.log("Observer:", observer);
+        console.log("Last/Current Y:", `${ lastScrollY }/${ currentScrollY }`);
+        console.log("Entries:", entries.map(e => ({ el: e.target, is: e.isIntersecting })));
+      }
+      
+      if (isInitialObservation && props.firstItemActive) {
+        if (props.debug) console.log("Initial observation, respecting `firstItemActive`.");
+        isInitialObservation = false;
+        lastScrollY = currentScrollY;
+        if (props.debug) console.groupEnd();
+        return;
+      }
+      isInitialObservation = false;
+
+      const scrollDirection = currentScrollY > lastScrollY ? 'down' : 'up';
+      lastScrollY = currentScrollY;
+      if (props.debug) console.log(`Scroll direction: ${scrollDirection}`);
+
+      const intersectingEntries = entries.filter(entry => entry.isIntersecting);
+      if (props.debug) console.log("Intersecting entries:", intersectingEntries.map(e => e.target));
+
+      if (intersectingEntries.length > 0) {
+        intersectingEntries.sort((a, b) => getSectionIndex(a.target) - getSectionIndex(b.target));
+        
+        const targetEntry = scrollDirection === 'down'
+          ? intersectingEntries[intersectingEntries.length - 1]
+          : intersectingEntries[0];
+        if (props.debug) console.log("Chosen target entry:", targetEntry.target);
+
+        const sectionToActivate = sections.value[getSectionIndex(targetEntry.target)];
+
+        if (sectionToActivate && !sectionToActivate.active) {
+          if (props.debug) console.log("Activating section:", sectionToActivate.title);
+          nextTick(() => {
+            removeActive(sectionToActivate, scrollDirection);
+            sectionToActivate.active = true;
+            sectionToActivate.inactiveFrom = null;
+            sectionToActivate.activeFrom = scrollDirection === 'down' ? 'forward' : 'reverse';
+            emit("section-change", { section: sectionToActivate, sections: sections.value, active: true });
+          });
+        }
+      } else {
+        if (props.debug) console.log("No intersecting entries. Checking edge cases.");
+        const activeSection = sections.value.find(s => s.active);
+        if (activeSection) {
+          const entryForActive = entries.find(e => e.target === activeSection.element);
+          if (entryForActive && !entryForActive.isIntersecting) {
+            const index = getSectionIndex(entryForActive.target);
+            const isFirst = index === 0;
+            const isLast = index === sections.value.length - 1;
+            if ((isFirst && scrollDirection === 'up' && !props.firstItemActive) || (isLast && scrollDirection === 'down')) {
+              if (props.debug) console.log("Deactivating section at edge:", activeSection.title);
+              nextTick(() => {
+                removeActive(null, scrollDirection);
+                emit("section-change", { section: activeSection, sections: sections.value, active: false });
+              });
+            }
+          }
+        }
+      }
+      if (props.debug) console.groupEnd();
+    };
+
+    let root = null;
+    if (props.observerOptions && props.observerOptions.root) {
+      root = props.observerOptions.root;
+    } else if (componentElRef.value) {
+      root = getScrollParent(componentElRef.value);
+      if (root === document.scrollingElement) {
+        root = null;
+      }
+    }
+
+    const finalObserverOptions = {
+      ...props.observerOptions,
+      root
+    };
+
+    observer = new IntersectionObserver(onObserve, finalObserverOptions);
+  }
+
+  function observeItems() {
+    if (!observer) return;
+    observer.disconnect();
+    sections.value.forEach(({ element }) => {
+      if (element) {
+        observer.observe(element);
+      }
+    });
+  }
+
+  function destroyObserver() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+
+  onMounted(() => {
+    if (props.firstItemActive && sections.value.length > 0) {
+      const first = sections.value[0];
+      if (first) {
+        first.active = true;
+      }
+    }
+    createObserver();
+    observeItems();
+  });
+
+  onUnmounted(() => {
+    destroyObserver();
+  });
+
+  watch(() => sections.value.length, () => {
+    nextTick(() => {
+      observeItems();
+    });
+  });
+}

package/lib/plugins/popovers/defaults.js

@@ -9,16 +9,7 @@ export default {
      * @type {String}
      */
     directiveName: "ulu-tooltip",
-    /**
-     * The element that the tooltip should be rendered within
-     * - Default bottom of the body (on top of everything)
-     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
-     *   content displayed within them should be hidden for assistive devices, 
-     *   they are not visible to assistive devices
-     * @type {String}
-     */    
-    tooltipTeleportTo: "body",
-  },
+    },
   /**
    * Default Popover Options
    */
@@ -59,6 +50,15 @@ export default {
    * @type {Object}
    */
   tooltip: {
+    /**
+     * The element that the tooltip should be rendered within
+     * - Default bottom of the body if this is unset
+     * - Doesn't need to be inline for accessibility since tooltips are just an enhancement
+     *   content displayed within them should be hidden for assistive devices, 
+     *   they are not visible to assistive devices
+     * @type {String}
+     */    
+    teleportTo: null,
     /**
      * Optional class binding for tooltip element
      * @type {String|Object|Array}

package/lib/plugins/popovers/index.js

@@ -70,6 +70,15 @@ export default function install(app, userOptions = {}) {
     config: {},
   });
   const showTooltip = (triggerEl, configObj) => {
+    // If a teleport target isn't already specified in the config,
+    // try to find a parent dialog to teleport to automatically.
+    if (triggerEl && !configObj.teleportTo) {
+      const dialog = triggerEl.closest("dialog");
+      if (dialog) {
+        configObj.teleportTo = dialog;
+      }
+    }
+    
     // If a tooltip is already active for a different element, remove its attribute.
     if (tooltipState.trigger && tooltipState.trigger !== triggerEl) {
       if (tooltipState.trigger?.removeAttribute) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.2",
+  "version": "0.1.3-beta.20",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@ulu/utils": "^0.0.30",
+    "@ulu/utils": "^0.0.33",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {

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

@@ -1,7 +0,0 @@
-/**
- * Symbol for register provide/inject
- */
-export const REGISTER: unique symbol;
-export const UNREGISTER: unique symbol;
-export const SECTIONS: unique symbol;
-//# sourceMappingURL=symbols.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"symbols.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/scroll-anchors/symbols.js"],"names":[],"mappings":"AAAA;;GAEG;AACH,qCAAiC;AACjC,uCAAmC;AACnC,qCAAiC"}

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

@@ -1,6 +0,0 @@
-/**
- * Symbol for register provide/inject
- */
-export const REGISTER = Symbol();
-export const UNREGISTER = Symbol();
-export const SECTIONS = Symbol();