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

package/lib/components/layout/UluDataGrid.vue

@@ -16,26 +16,66 @@
 -->
 
 <template>
-  <div>
+  <component 
+    :is="element" 
+    :data-grid-init="initialized"
+    ref="rootElement" 
+  >
     <slot />
-  </div>
+  </component>
 </template>
 
-<script>
-  import { setPositionClasses } from "@ulu/frontend/js/utils/dom.js";
+<script setup>
+  import { ref, onMounted, onBeforeUnmount, watch } from "vue";
   import { debounce } from "@ulu/utils/performance.js";
-  export default {
-    name: "UluDataGrid",
-    async mounted() {
-      const setClasses = () => setPositionClasses(this.$el);
-      setClasses();
-      this.resizeHandler = debounce(setClasses, 200, false, this);
-      window.addEventListener("resize", this.resizeHandler);
+  import { setPositionClasses } from "@ulu/frontend";
+
+  const props = defineProps({
+    /**
+     * The element to use on data-grid container
+     */
+    element: {
+      type: String,
+      default: "div"
     },
-    beforeUnmount() {
-      if (this.resizeHandler) {
-        window.removeEventListener("resize", this.resizeHandler);
+    /**
+     * Tell the component when this grid is actually in a hidden container 
+     * - When value changes the component will properly update position classes
+     */
+    hidden: Boolean // New prop from SSR version
+  });
+
+  const rootElement = ref(null); // Ref for the template root element
+  const initialized = ref(null);
+  let setThisPositionClasses = null; // To store the setPositionClasses function
+  let resizeHandler = null; // To store the debounced resize handler
+
+  onMounted(async () => {
+    setThisPositionClasses = () => {
+      if (rootElement.value) {
+        setPositionClasses(rootElement.value);
       }
+    };
+    setThisPositionClasses(); // Initial call
+    initialized.value = true;
+    resizeHandler = debounce(setThisPositionClasses, 200, false); // `this` context is not needed in setup
+    window.addEventListener("resize", resizeHandler);
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeHandler) {
+      resizeHandler.cancel();
+      window.removeEventListener("resize", resizeHandler);
+      resizeHandler = null;
+      setThisPositionClasses = null; // Clear the function reference
+    }
+  });
+
+  // Watcher for the hidden prop
+  watch(() => props.hidden, (newVal, oldVal) => {
+    // Only run setClasses if it was hidden and now it's not, and the function exists
+    if (oldVal && !newVal && setThisPositionClasses) {
+      setThisPositionClasses();
     }
-  };
+  });
 </script>

package/lib/components/layout/UluWhenBreakpoint.vue

@@ -58,9 +58,16 @@
   };
 
   const tearDownHandlers = () => {
-    if (uluBreakpointManager) {
+    if (uluBreakpointManager.value) {
       handlers.value.forEach(({ name, direction, handler }) => {
-        uluBreakpointManager.at(name).remove(handler, direction);
+        const breakpoint = uluBreakpointManager.value.at(name);
+        if (breakpoint) {
+          try {
+            breakpoint.remove(handler, direction);
+          } catch (error) {
+            console.error(error);
+          }        
+        }
       });
     }
     handlers.value = [];
@@ -77,9 +84,9 @@
   // Watch all the props and update if they change
   // - Using array syntax to avoid "deep" flag
   watch([() => props.max, () => props.min, () => props.only], () => {
-    if (uluBreakpointManager && handlersSetup.value) {
+    if (uluBreakpointManager.value && handlersSetup.value) {
       tearDownHandlers();
-      setupHandlers(uluBreakpointManager);
+      setupHandlers(uluBreakpointManager.value);
     }
   });
 

package/lib/components/navigation/UluSkipLink.vue

@@ -1,5 +1,5 @@
 <template>
-  <a class="site-skip-link hidden-visually-focusable" href="#main-content">
+  <a class="skip-link hidden-visually-focusable" href="#main-content">
     Skip to main content
   </a>
 </template>

package/lib/components/systems/index.js

@@ -11,10 +11,14 @@ export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayo
 export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
 
+export { useScrollAnchors } from './scroll-anchors/useScrollAnchors.js';
+export { useScrollAnchorSection } from './scroll-anchors/useScrollAnchorSection.js';
+export { useScrollAnchorSections } from './scroll-anchors/useScrollAnchorSections.js';
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';
 export { default as UluScrollAnchorsNavAnimated } from './scroll-anchors/UluScrollAnchorsNavAnimated.vue';
 export { default as UluScrollAnchorsSection } from './scroll-anchors/UluScrollAnchorsSection.vue';
+export { default as UluScrollAnchorsHeadlessSection } from './scroll-anchors/UluScrollAnchorsHeadlessSection.vue';
 
 export { default as UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';

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

@@ -1,153 +1,54 @@
-<!-- Version: 0.0.2? (NEED to diff, unsure of changes) -->
 <template>
-  <div class="scroll-anchors">
+  <div class="scroll-anchors" ref="componentEl">
     <slot/>
   </div>
 </template>
 
-<script>
-  import { computed } from "vue";
-  import { SECTIONS, REGISTER, UNREGISTER } from "./symbols.js";
-  export default {
-    name: "ScrollAnchors",
-    emits: ["section-change"],
-    props: {
-      firstItemActive: Boolean,
-      /**
-       * Observe 
-       */
-      observerOptions: {
-        type: Object,
-        default: () => ({
-          root: null,
-          threshhold: [0,1],
-          rootMargin: "-25% 0px -55% 0px"
-          // root: null,
-          // threshhold: [0,1],
-          // rootMargin: "25% 0px 75% 0px"
-        })
-      }
-    },
-    data() {
-      return {
-        isMounted: false,
-        sections: [], // Child components will section themselves
-      };
-    },
+<script setup>
+  import { ref, computed, provide } from "vue";
+  import { useScrollAnchors } from "./useScrollAnchors.js";
+
+  const props = defineProps({
     /**
-     * Interface for chil components to register themselves
-     * - Uses symbols
+     * Make the first item active by default on load
      */
-    provide() {
-      return {
-        [SECTIONS]: computed(() => this.sections),
-        [REGISTER]: (instance) => {
-          const { titleId, title } = instance;
-          const { element } = instance.$refs;
-          this.sections.push({ 
-            instance, 
-            titleId, 
-            title,
-            element,
-            active: false 
-          });
-          this.update();
-        },
-        [UNREGISTER]: (instance) => {
-          const sections = this.sections;
-          const index = sections.findIndex(r => r.instance === instance);
-          if (index > -1) {
-            sections.splice(index, 1);
-          }
-          this.update();
-        },
-      };
-    },
-    methods: {
-      update() {
-        if (this.isMounted) {
-          this.observeItems();
-        }
-      },
-      getSectionIndex(el) {
-        return this.sections.findIndex(({ element }) => el === element);
-      },
-      /**
-       * Sets up a new observer to watch the section visibility
-       */
-      createObserver() {
-        const { observerOptions, sections, removeActive, firstItemActive } = this;
-        let lastY = 0;
-        // Observer callback, basically just sets active state for a given slide
-        // - isIntersecting will change when the element enters and leaves
-        const onObserve = (entries) => {
-          entries.forEach(({ target, isIntersecting }) => {
-            const index = this.getSectionIndex(target);
-            const y = target.offsetTop;
-            const section = sections[index];
-            const firstExiting = index === 0 && lastY > y;
-            const lastExiting = index === sections.length - 1 && lastY < y;
-            if (section) {
-              this.$nextTick(() => {
-                if (isIntersecting) {
-                  removeActive(section);
-                  section.active = true;
-                // Only allow first and last to 
-                } else if (firstExiting && !firstItemActive) {
-                  removeActive();
-                } else if (lastExiting && section.active) {
-                  removeActive();
-                }
-                this.$emit("section-change", { 
-                  section, 
-                  sections, 
-                  active: isIntersecting 
-                });
-              });
-            }
-          });
-        };
-        // Add non-reactive prop for removal and changes to targets
-        this.observer = new IntersectionObserver(onObserve, observerOptions);
-      },
-      /**
-       * Add all slide elements as targets in observer
-       */
-      observeItems() {
-        const { observer, sections } = this;
-        observer.disconnect();
-        sections.forEach(({ element }) => {
-          if (element) {
-            observer.observe(element);
-          }
-        });
-      },
-      removeActive(except = null) {
-        this.sections.forEach(s => {
-          if (s !== except) {
-            s.active = false;
-          }
-        });
-      },
-      /**
-       * Remove observer and it's internal DOM references (GC)
-       */
-      destroyObserver() {
-        this.observer.disconnect();
-        this.observer = null;
-      },
-    },
-    mounted() {
-      const first = this.sections[0];
-      if (this.firstItemActive && first) {
-        first.active = true;
-      }
-      this.createObserver();
-      this.observeItems();
-      this.isMounted = true;
-    },
-    unmounted() {
-      this.destroyObserver();
+    firstItemActive: Boolean,
+    /**
+     * IntersectionObserver options
+     * - Defaults: { root: null, threshold: 0, rootMargin: "-25% 0px -55% 0px" }
+     * See: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver
+     */
+    observerOptions: {
+      type: Object,
+      default: () => ({
+        root: null,
+        threshold: 0,
+        rootMargin: "-25% 0px -55% 0px"
+      })
     },
-  };
-</script>
+    /**
+     * Enable debug logging for the IntersectionObserver
+     */
+    debug: Boolean
+  });
+
+  const emit = defineEmits(["section-change"]);
+
+  const sections = ref([]);
+  const componentEl = ref(null);
+
+  useScrollAnchors({ sections, props, emit, componentElRef: componentEl });
+
+  provide('uluScrollAnchorsSections', computed(() => sections.value));
+
+  provide('uluScrollAnchorsRegister', (section) => {
+    sections.value.push(section);
+  });
+
+  provide('uluScrollAnchorsUnregister', (sectionId) => {
+    const index = sections.value.findIndex(r => r.id === sectionId);
+    if (index > -1) {
+      sections.value.splice(index, 1);
+    }
+  });
+</script>

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

@@ -0,0 +1,50 @@
+<template>
+  <component
+    :is="element"
+    :class="[
+      'scroll-anchors__section',
+      { 'is-active': isActive }
+    ]"
+    :data-scrollpoint-state="sectionState"
+    ref="sectionRef"
+  >
+    <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({
+    /**
+     * The title of the section, used for navigation and generating a default ID
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * A custom ID to use for the section anchor, overriding the auto-generated one
+     */
+    customTitleId: String,
+    /**
+     * Element to use
+     */
+    element: {
+      type: String,
+      default: "div"
+    }
+  });
+
+  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/UluScrollAnchorsNav.vue

@@ -1,6 +1,6 @@
 <template>
   <component 
-    v-if="sections.length" 
+    v-if="sections && sections.length" 
     :is="element"
     class="scroll-anchors__nav"
   >
@@ -13,25 +13,27 @@
           :class="{ 'is-active' : item.active }"
           :href="`#${ item.titleId }`" 
         >
-          {{ item.title }}
+          <slot :item="item" :index="index">
+            {{ item.title }}
+          </slot>
         </a>
       </li>
     </ul>
   </component>
 </template>
 
-<script>
-  import { SECTIONS } from "./symbols.js";
-  export default {
-    name: "ScrollAnchorsNav",
-    inject: {
-      sections: { from: SECTIONS }
-    },
-    props: {
-      element: {
-        type: String,
-        default: "nav"
-      }
+<script setup>
+  import { useScrollAnchorSections } from "./useScrollAnchorSections.js";
+
+  defineProps({
+    /**
+     * The HTML element to use for the navigation root
+     */
+    element: {
+      type: String,
+      default: "nav"
     }
-  };
-</script>
+  });
+
+  const sections = useScrollAnchorSections();
+</script>

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

@@ -1,16 +1,11 @@
-<!-- 
-Version: 0.0.2
-Changes: 
-  - 0.0.2 | Added transition initial state/class so the indicator 
-            doesn't transition at first
--->
 <template>
   <component 
-    v-if="sections.length" 
+    v-if="sections && sections.length" 
     :is="element"
-    class="scroll-anchors__nav scroll-anchors__nav--animated"
+    class="scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated"
+    :style="{ '--ulu-sa-nav-rail-width': `${ railWidth }px` }"
   >
-    <ul class="scroll-anchors__rail">
+    <ul class="scroll-anchors-nav-animated__rail">
       <li 
         v-for="(item, index) in sections" :key="index"
         :class="{ 'is-active' : item.active }"
@@ -20,105 +15,121 @@ Changes:
           :ref="(el) => addLinkRef(index, el)"
           :href="`#${ item.titleId }`" 
         >
-          {{ item.title }}
+          <slot :item="item" :index="index">
+            {{ item.title }}
+          </slot>
         </a>
       </li>
     </ul>
     <div 
-      class="scroll-anchors__indicator"
+      class="scroll-anchors-nav-animated__indicator"
       :class="{
-        'scroll-anchors__indicator--can-transition' : indicatorAnimReady
+        'scroll-anchors-nav-animated__indicator--can-transition' : indicatorAnimReady
       }"
       ref="indicator"
-      :style="{ 
+      :style="{
         opacity: indicatorStyles ? '1' : '0',
-        transform: `translateY(${ indicatorStyles.y }px)`,
-        height: `${ indicatorStyles.height }px`,
+        transform: `translateY(${ indicatorStyles ? indicatorStyles.y : 0 }px)`,
+        height: `${ indicatorStyles ? indicatorStyles.height : 0 }px`,
+        width: `${ indicatorStyles ? indicatorStyles.width : 0 }px`
       }"
     ></div>
   </component>
 </template>
 
-<script>
+<script setup>
+  import { ref, computed, watch } from 'vue';
   import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
-  import { SECTIONS } from "./symbols.js";
-  export default {
-    name: "ScrollAnchorsNavAnimated",
-    inject: {
-      sections: { from: SECTIONS }
+  import { useScrollAnchorSections } from './useScrollAnchorSections.js';
+
+  const props = defineProps({
+    /**
+     * The HTML element to use for the navigation root
+     */
+    element: {
+      type: String,
+      default: "nav"
     },
-    props: {
-      /**
-       * Element to use for container
-       */
-      element: {
-        type: String,
-        default: "nav"
-      },
+    /**
+     * The width of the navigation rail
+     */
+    railWidth: {
+      type: Number,
+      default: 3
     },
-    data() {
-      return {
-        linkRefs: {},
-        indicatorAnimReady: false
-      };
+    /**
+     * The width of the indicator, defaults to railWidth
+     */
+    indicatorWidth: {
+      type: Number,
+      default: null
     },
-    computed: {
-      indicatorStyles() {
-        const { sections, linkRefs } = this;
-        const linkCount = Object.keys(linkRefs).length;
-        // Checking for sections and link refs incase 
-        // we were waiting for the components to mount, etc
-        if (!sections || !linkCount) {
-          return false;
-        }
-        const activeIndex = sections.findIndex(s => s.active);
-        if (activeIndex === -1) {
-          return false;
-        }
-        const link = this.linkRefs[activeIndex];
-        const { offsetTop, offsetHeight } = link;
-        return {
-          y: offsetTop,
-          height: offsetHeight,
-          initial: this.inidica
-        };
-      }
+    /**
+     * If set, creates a static height, centered indicator
+     */
+    indicatorHeight: {
+      type: Number,
+      default: null
     },
-    watch: {
-      indicatorStyles(val) {
-        if (val && !this.indicatorAnimReady) {
-          runAfterFramePaint(() => {
-            this.indicatorAnimReady = true;
-          });
-        }
-      }
+    /**
+     * Vertical alignment of the indicator relative to the link
+     */
+    indicatorAlignment: {
+      type: String,
+      default: 'center' // options: center, top
     },
-    methods: {
-      addLinkRef(index, el) {
-        this.linkRefs[index] = el;
-      }
+    /**
+     * Pixel offset for the indicator's vertical alignment
+     */
+    indicatorAlignmentOffset: {
+      type: Number,
+      default: 0
     }
-  };
-</script>
+  });
 
-<style lang="scss">
-  // User can override these styles
-  // - Think this is better than props/etc 
-  //   - Refactored from props to just plain css to be overridden
-  .scroll-anchors__rail {
-    border-left: 3px solid rgb(220, 220, 220);
-    padding-left: 1rem;
-  }
-  .scroll-anchors__indicator {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 3px;
-    background-color: black;
-  }
-  .scroll-anchors__indicator--can-transition {
-    transition-property: height, transform;
-    transition-timing-function: ease-in-out;
-    transition-duration: 250ms;
+  const sections = useScrollAnchorSections();
+
+  const linkRefs = ref({});
+  const indicatorAnimReady = ref(false);
+  const indicator = ref(null);
+
+  const indicatorStyles = computed(() => {
+    if (!sections || !sections.value || !sections.value.length) {
+      return false;
+    }
+    const activeIndex = sections.value.findIndex(s => s.active);
+    if (activeIndex === -1) {
+      return false;
+    }
+    const link = linkRefs.value[activeIndex];
+    if (!link) return false; // Link might not be rendered yet
+
+    const { offsetTop, offsetHeight } = link;
+    const isStatic = props.indicatorHeight != null;
+    const width = props.indicatorWidth ?? props.railWidth;
+    const height = isStatic ? props.indicatorHeight : offsetHeight;
+
+    let y = offsetTop; // Default to 'top' alignment
+    if (props.indicatorAlignment === 'center') {
+      y = offsetTop + (offsetHeight / 2) - (height / 2);
+    }
+
+    y += props.indicatorAlignmentOffset;
+
+    return { y, height, width };
+  });
+
+  watch(indicatorStyles, (val) => {
+    if (val && !indicatorAnimReady.value) {
+      runAfterFramePaint(() => {
+        indicatorAnimReady.value = true;
+      });
+    }
+  });
+
+  function addLinkRef(index, el) {
+    if (el) {
+      linkRefs.value[index] = el;
+    }
   }
-</style>
+</script>