@ulu/frontend-vue 0.1.3-beta.9 → 0.2.0-beta.1

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

@@ -1,63 +1,77 @@
 <template>
-  <div :class="[wrapperClass, { [activeClass] : activeClass && section?.active }]" ref="element">
+  <component
+    :is="element"
+    :class="[wrapperClass, { [activeClass]: activeClass && isActive }]"
+    :data-scrollpoint-state="sectionState"
+    ref="sectionRef"
+  >
     <component :is="titleElement" :class="titleClass" :id="titleId">
-      {{ title }}
+      <slot name="title">
+        {{ title }}
+      </slot>
     </component>
     <slot :section="section"></slot>
-  </div>
+  </component>
 </template>
 
-<script>
+<script setup>
   import { computed } from "vue";
-  import { urlize } from "@ulu/utils/string.js";
-  import { REGISTER, UNREGISTER, SECTIONS } from "./symbols.js";
-  export default {
-    name: "ScrollAnchorsSection",
-    props: {
-      title: String,
-      titleElement: {
-        type: String,
-        default: "h2"
-      },
-      titleClass: {
-        type: String,
-        default: "h2"
-      },
-      anchorId: String,
-      wrapperClass: {
-        type: String,
-        default: "scroll-anchors__section"
-      },
-      activeClass: {
-        type: String,
-        default: 'is-active'
-      }
-    },
-    inject: {
-      register: { from: REGISTER }, 
-      unregister: { from: UNREGISTER },
-      sections: { from: SECTIONS, default: () => computed(() => []) }
+  import { useScrollAnchorSection } from "./useScrollAnchorSection";
+
+  const props = defineProps({
+    /**
+     * The title of the section, used for navigation and generating a default ID
+     */
+    title: String,
+    /**
+     * The HTML element to use for the title
+     */
+    titleElement: {
+      type: String,
+      default: "h2"
     },
-    data() {
-      const { anchorId, title } = this;
-      return {
-        titleId: anchorId || `sas-title-${ urlize(title) }`
-      };
+    /**
+     * The class to apply to the title element
+     */
+    titleClass: {
+      type: String,
+      default: "h2"
     },
-    computed: {
-      section() {
-        return this.sections.find(s => s.instance === this);
-      }
+    /**
+     * A custom ID to use for the section anchor, overriding the auto-generated one
+     */
+    customTitleId: String,
+    /**
+     * The class to apply to the section's wrapper div
+     */
+    wrapperClass: {
+      type: String,
+      default: "scroll-anchors__section"
     },
-    mounted() {
-      if (this.register) {
-        this.register(this);
-      }
+    /**
+     * The class to apply to the wrapper div when the section is active
+     */
+    activeClass: {
+      type: String,
+      default: 'is-active'
     },
-    unmounted() {
-      if (this.unregister) {
-        this.unregister(this);
-      }
+    /**
+     * The HTML element to use for the section root
+     */
+    element: {
+      type: String,
+      default: 'section'
+    }
+  });
+
+  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}`;
     }
-  };
-</script>
+    return null;
+  });
+</script>

package/lib/components/systems/scroll-anchors/_scroll-anchors-nav-animated.scss

@@ -0,0 +1,67 @@
+////
+/// @group scroll-anchors-nav-animated
+/// For use with UluScrollAnchorsNavAnimated vue component.
+////
+
+@use "sass:map";
+@use "sass:meta";
+
+@use "@ulu/frontend/scss/selector";
+@use "@ulu/frontend/scss/utils";
+@use "@ulu/frontend/scss/color";
+
+// Used for function fallback
+$-fallbacks: () !default;
+
+/// Module Settings
+/// @type Map
+$config: (
+  "rail-border-color": #dcdcdc,
+  "rail-padding": 1rem,
+  "indicator-color": #000,
+  "indicator-clip-path": null,
+  "transition-duration": 250ms,
+  "transition-timing-function": ease-in-out
+) !default;
+
+/// Change modules $config
+/// @param {Map} $changes Map of changes
+@mixin set($changes) {
+  $config: map.merge($config, $changes) !global;
+}
+
+/// Get a config option
+/// @param {Map} $name Name of property
+@function get($name) {
+  $value: utils.require-map-get($config, $name, "scroll-anchors-nav-animated [config]");
+  @return utils.function-fallback($name, $value, $-fallbacks);
+}
+
+/// Prints component styles
+/// @demo scroll-anchors-nav-animated
+/// @example scss
+///  @include ulu.component-scroll-anchors-nav-animated-styles();
+
+@mixin styles {
+  $prefix: selector.class("scroll-anchors-nav-animated");
+
+  #{ $prefix } {
+    position: relative;
+  }
+  #{ $prefix }__rail {
+    border-left: var(--ulu-sa-nav-rail-width, 3px) solid color.get(get("rail-border-color"));
+    padding-left: get("rail-padding");
+  }
+  #{ $prefix }__indicator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: color.get(get("indicator-color"));
+    clip-path: get("indicator-clip-path");
+  }
+  #{ $prefix }__indicator--can-transition {
+    transition-property: height, transform, width;
+    transition-timing-function: get("transition-timing-function");
+    transition-duration: get("transition-duration");
+  }
+}

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

@@ -0,0 +1,60 @@
+import { ref, onMounted, onUnmounted, inject, computed, reactive, watch } from 'vue';
+import { urlize } from '@ulu/utils/string.js';
+
+/**
+ * Composable for a component that acts as a section within the Scroll Anchors system.
+ * It handles registering the section with the parent `UluScrollAnchors` component,
+ * manages its active state, and provides reactive properties for use in the template.
+ * @param {object} props The component props, requires `title` and optional `customTitleId`.
+ * @returns {object} An object with reactive properties for the section: `sectionRef` (the ref to bind), `titleId`, `isActive`, and the raw `section` object.
+ */
+export function useScrollAnchorSection(props) {
+  const sectionRef = ref(null); // for the user to bind to their root element
+
+  const register = inject('uluScrollAnchorsRegister');
+  const unregister = inject('uluScrollAnchorsUnregister');
+  const newId = title => `ulu-sa-${ urlize(title) }`;
+
+  const titleId = computed(() => props.customTitleId || newId(props.title));
+  
+  const section = reactive({
+    id: Symbol('section-id'),
+    title: props.title,
+    titleId: titleId.value,
+    element: null, // will be set on mount
+    active: false,
+    inactiveFrom: null,
+    activeFrom: null
+  });
+  
+  // Keep title and titleId in sync with props
+  watch(() => props.title, (newTitle) => {
+    section.title = newTitle;
+    section.titleId = props.customTitleId || newId(newTitle);
+  });
+  watch(() => props.customTitleId, (newTitleId) => {
+    section.titleId = newTitleId || newId(props.title);
+  });
+
+  onMounted(() => {
+    if (register && sectionRef.value) {
+      section.element = sectionRef.value;
+      register(section);
+    }
+  });
+
+  onUnmounted(() => {
+    if (unregister) {
+      unregister(section.id);
+    }
+  });
+
+  return {
+    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/useScrollAnchorSections.js

@@ -0,0 +1,15 @@
+import { inject } from 'vue';
+
+/**
+ * Composable that provides a reactive list of all registered scroll anchor sections.
+ * This is the recommended way to access section data for building custom navigation.
+ * Must be used within a component that is a descendant of `UluScrollAnchors`.
+ * @returns {object} A reactive ref containing an array of section objects.
+ */
+export function useScrollAnchorSections() {
+  const sections = inject('uluScrollAnchorsSections');
+  if (!sections) {
+    console.warn('useScrollAnchorSections() must be used within an UluScrollAnchors component provider.');
+  }
+  return sections;
+}

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/composables/useBreakpointManager.js

@@ -28,7 +28,7 @@ const defaults = {
  * @param {Function} [options.onReady] - A callback function that receives the `BreakpointManager` instance once it's initialized.
  * @param {object} [options.plugin] - Options to pass directly to the underlying `BreakpointManager` library.
  * @returns {{
- *   breakpointManager: import('vue').Ref<import('@ulu/frontend/js/ui/breakpoints.js').BreakpointManager | null>,
+ *   breakpointManager: import('vue').Ref<import('@ulu/frontend').BreakpointManager | null>,
  *   breakpointActive: import('vue').Ref<string | null>,
  *   breakpointDirection: import('vue').Ref<string | null>
  * }} An object containing reactive refs for:
@@ -55,7 +55,7 @@ export function useBreakpointManager(options) {
       }
     });
 
-    const mod = await import("@ulu/frontend/js/ui/breakpoints.js");
+    const mod = await import("@ulu/frontend");
     const { BreakpointManager } = mod;
     const manager = markRaw(new BreakpointManager(config.plugin));
     

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.3-beta.9",
+  "version": "0.2.0-beta.1",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -30,7 +30,7 @@
     "build": "vite build",
     "types": "vue-tsc",
     "deploy": "rm -rf dist && npm run types && npm run build && npm run docs:build",
-    "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .ctx/frontend/"
+    "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/lib/scss node_modules/@ulu/frontend/lib/js .ctx/frontend/"
   },
   "keywords": [
     "vue",
@@ -52,7 +52,7 @@
   "peerDependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.123",
+    "@ulu/frontend": "^0.2.0-beta.3",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -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": {
@@ -77,7 +77,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.123",
+    "@ulu/frontend": "^0.2.0-beta.3",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

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();