@ulu/frontend-vue 0.5.15 → 0.6.0

package/lib/components/forms/UluSearchForm.vue

@@ -1,32 +1,80 @@
 <template>
-  <div class="form-theme search-form type-small">
-    <div class="search-form__field">
-      <label class="hidden-visually">Search</label>
-      <input 
-        class="search-form__input"
-        type="text" 
-        id="example-input" 
-        :placeholder="placeholder"
-      >
+  <form class="form-theme" @submit.prevent="onSubmit">
+    <div class="input-group input-group--joined">
+      <div class="input-group__item input-group__item--field">
+        <label :for="inputId" class="hidden-visually">{{ label }}</label>
+        <input 
+          type="search" 
+          :id="inputId" 
+          class="input-group__input"
+          :placeholder="placeholder"
+          :value="modelValue"
+          @input="$emit('update:modelValue', $event.target.value)"
+        >
+      </div>
+      <div class="input-group__item">
+        <slot name="submit">
+          <UluButton 
+            class="input-group__button"
+            v-bind="submitButtonProps"
+          />
+        </slot>
+      </div>
     </div>
-    <button 
-      class="search-form__submit button button--primary"
-      aria-label="Submit Search"
-    >
-      <UluIcon icon="type:search" />
-    </button>
-  </div>
+  </form>
 </template>
 
 <script setup>
-  import UluIcon from "../elements/UluIcon.vue";
-  defineProps({
+  import { computed } from "vue";
+  import { newId } from "../../utils/dom.js";
+  import UluButton from "../elements/UluButton.vue";
+
+  const props = defineProps({    
+    /**
+     * The search input value (for v-model).
+     */
+    modelValue: {
+      type: String,
+      default: ""
+    },
     /**
      * The placeholder text for the search input.
      */
     placeholder: {
       type: String,
       default: "Titles, keyword…"
-    }
+    },
+    /**
+     * The visually hidden label for the search input.
+     */
+    label: {
+      type: String,
+      default: "Search"
+    },
+    /**
+     * Props to pass to the default UluButton component (used for submit button)
+     * - Alternately use 'submit' slot
+     */
+    submitButtonProps: {
+      type: Object,
+      default: () => ({
+        type: "submit",
+        primary: true,
+        icon: "type:search",
+        ariaLabel: "Submit Search"
+      })
+    },
+    /**
+     * Optional ID for the input element. If not provided, a unique ID is generated.
+     */
+    id: String
   });
+
+  const emit = defineEmits(["update:modelValue", "submit"]);
+
+  const inputId = computed(() => props.id || newId());
+
+  const onSubmit = () => {
+    emit("submit", props.modelValue);
+  };
 </script>

package/lib/components/forms/UluSelectableMenu.vue

@@ -32,75 +32,75 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
+  import { computed } from 'vue';
 
-const props = defineProps({
-  /**
-   * The legend for the menu.
-   */
-  legend: String,
-  /**
-   * An array of options for the menu.
-   */
-  options: Array,
-  /**
-   * Use compact modifier on menu stack
-   */
-  compact: Boolean,
-  /**
-   * The type of input to use ('checkbox' or 'radio').
-   */
-  type: {
-    type: String,
-    default: 'checkbox',
-  },
-  /**
-   * The value of the menu (for v-model).
-   */
-  modelValue: [String, Array],
-  /**
-   * If true, the input elements will be visually hidden.
-   */
-  hideInputs: Boolean
-});
+  const props = defineProps({
+    /**
+     * The legend for the menu.
+     */
+    legend: String,
+    /**
+     * An array of options for the menu.
+     */
+    options: Array,
+    /**
+     * Use compact modifier on menu stack
+     */
+    compact: Boolean,
+    /**
+     * The type of input to use ('checkbox' or 'radio').
+     */
+    type: {
+      type: String,
+      default: 'checkbox',
+    },
+    /**
+     * The value of the menu (for v-model).
+     */
+    modelValue: [String, Array],
+    /**
+     * If true, the input elements will be visually hidden.
+     */
+    hideInputs: Boolean
+  });
 
-const emit = defineEmits(['update:modelValue']);
+  const emit = defineEmits(['update:modelValue']);
 
-const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
-const legendId = computed(() => name.value ? `${name.value}-legend` : null);
-const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
+  const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${ Math.random().toString(36).substring(7) }`);
+  const legendId = computed(() => name.value ? `${name.value}-legend` : null);
+  const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
 
-const getId = (option) => `${name.value}-${option.uid}`;
+  const getId = (option) => `${name.value}-${option.uid}`;
 
-const isChecked = (option) => {
-  if (props.type === 'radio') {
-    return props.modelValue === option.uid;
-  }
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.includes(option.uid);
-  }
-  if (props.type === 'checkbox') {
-    return option.checked || false;
-  }
-  return false;
-};
-
-const handleChange = (option, event) => {
-  if (props.type === 'radio') {
-    emit('update:modelValue', option.uid);
-  } else {
+  const isChecked = (option) => {
+    if (props.type === 'radio') {
+      return props.modelValue === option.uid;
+    }
     if (Array.isArray(props.modelValue)) {
-      const newValue = [...props.modelValue];
-      const index = newValue.indexOf(option.uid);
-      if (index > -1) {
-        newValue.splice(index, 1);
+      return props.modelValue.includes(option.uid);
+    }
+    if (props.type === 'checkbox') {
+      return option.checked || false;
+    }
+    return false;
+  };
+
+  const handleChange = (option, event) => {
+    if (props.type === 'radio') {
+      emit('update:modelValue', option.uid);
+    } else {
+      if (Array.isArray(props.modelValue)) {
+        const newValue = [...props.modelValue];
+        const index = newValue.indexOf(option.uid);
+        if (index > -1) {
+          newValue.splice(index, 1);
+        } else {
+          newValue.push(option.uid);
+        }
+        emit('update:modelValue', newValue);
       } else {
-        newValue.push(option.uid);
+        option.checked = event.target.checked;
       }
-      emit('update:modelValue', newValue);
-    } else {
-      option.checked = event.target.checked;
     }
-  }
-};
+  };
 </script>

package/lib/components/index.js

@@ -56,6 +56,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/lib/components/systems/facets/UluFacetsFilterSelects.vue

@@ -59,9 +59,6 @@ const props = defineProps({
   },
 });
 
-console.log(props);
-
-
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {
@@ -84,15 +81,15 @@ function onFilterChange(group, event) {
 </script>
 
 <style lang="scss">
-.facets-dropdown-filters {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.facets-dropdown-filters__group {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
+  .facets-dropdown-filters {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .facets-dropdown-filters__group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
 </style>

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

@@ -39,7 +39,15 @@
     /**
      * 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: false
+    }
   });
 
   const emit = defineEmits(["section-change"]);

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

@@ -5,7 +5,7 @@
     class="scroll-anchors__nav scroll-anchors__nav--animated scroll-anchors-nav-animated"
     :style="{ '--ulu-sa-nav-rail-width': `${ railWidth }px` }"
   >
-    <ul class="scroll-anchors-nav-animated__rail">
+    <ul class="scroll-anchors-nav-animated__rail" ref="listRef" :style="railStyles">
       <li 
         v-for="(item, index) in sections" :key="index"
         :class="{ 'is-active' : item.active }"
@@ -26,7 +26,6 @@
       :class="{
         'scroll-anchors-nav-animated__indicator--can-transition' : indicatorAnimReady
       }"
-      ref="indicator"
       :style="{
         opacity: indicatorStyles ? '1' : '0',
         transform: `translateY(${ indicatorStyles ? indicatorStyles.y : 0 }px)`,
@@ -38,9 +37,9 @@
 </template>
 
 <script setup>
-  import { ref, computed, watch } from 'vue';
+  import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
   import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
-  import { useScrollAnchorSections } from './useScrollAnchorSections.js';
+  import { useScrollAnchorSections } from "./useScrollAnchorSections.js";
 
   const props = defineProps({
     /**
@@ -57,6 +56,26 @@
       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
      */
@@ -76,7 +95,7 @@
      */
     indicatorAlignment: {
       type: String,
-      default: 'center' // options: center, top
+      default: "center" // options: center, top
     },
     /**
      * Pixel offset for the indicator's vertical alignment
@@ -87,22 +106,42 @@
     }
   });
 
+  // State from the scroll anchor system
   const sections = useScrollAnchorSections();
 
+  // Template refs for the list and individual links
+  const listRef = ref(null);
   const linkRefs = ref({});
+
+  // Flag to enable CSS transitions only after initial placement
   const indicatorAnimReady = ref(false);
-  const indicator = ref(null);
 
-  const indicatorStyles = computed(() => {
-    if (!sections || !sections.value || !sections.value.length) {
-      return false;
+  // Resize observer to recalculate metrics on layout shifts
+  const resizeTrigger = ref(0);
+  let resizeObserver = null;
+
+  onMounted(() => {
+    if (listRef.value) {
+      resizeObserver = new ResizeObserver(() => {
+        resizeTrigger.value++;
+      });
+      resizeObserver.observe(listRef.value);
     }
-    const activeIndex = sections.value.findIndex(s => s.active);
-    if (activeIndex === -1) {
-      return false;
+  });
+
+  onBeforeUnmount(() => {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
     }
-    const link = linkRefs.value[activeIndex];
-    if (!link) return false; // Link might not be rendered yet
+  });
+
+  /**
+   * Helper to calculate the target position/size of the indicator for a specific item
+   */
+  function getIndicatorMetrics(index) {
+    const link = linkRefs.value[index];
+    if (!link) return null;
 
     const { offsetTop, offsetHeight } = link;
     const isStatic = props.indicatorHeight != null;
@@ -110,15 +149,54 @@
     const height = isStatic ? props.indicatorHeight : offsetHeight;
 
     let y = offsetTop; // Default to 'top' alignment
-    if (props.indicatorAlignment === 'center') {
+    if (props.indicatorAlignment === "center") {
       y = offsetTop + (offsetHeight / 2) - (height / 2);
     }
 
     y += props.indicatorAlignmentOffset;
 
     return { y, height, width };
+  }
+
+  // Active indicator styles
+  const indicatorStyles = computed(() => {
+    resizeTrigger.value; // Re-evaluate on resize
+    if (!sections || !sections.value || !sections.value.length) {
+      return false;
+    }
+    const activeIndex = sections.value.findIndex(s => s.active);
+    if (activeIndex === -1) {
+      return false;
+    }
+    return getIndicatorMetrics(activeIndex) || false;
+  });
+
+  // Background rail styles (trimmed to start/end of indicators)
+  const railStyles = computed(() => {
+    resizeTrigger.value; // Re-evaluate on resize
+    if (!props.trimRailToCenters) return {};
+    if (!sections || !sections.value || sections.value.length < 1) return {};
+
+    const firstMetrics = getIndicatorMetrics(0);
+    const lastMetrics = getIndicatorMetrics(sections.value.length - 1);
+
+    if (!firstMetrics || !lastMetrics) return {};
+
+    let top = firstMetrics.y + (firstMetrics.height / 2);
+    let bottom = lastMetrics.y + (lastMetrics.height / 2);
+
+    top += props.railStartOffset;
+    bottom += props.railEndOffset;
+
+    const height = Math.max(0, bottom - top);
+
+    return {
+      "--ulu-sa-nav-rail-top": `${top}px`,
+      "--ulu-sa-nav-rail-height": `${height}px`
+    };
   });
 
+  // Allow transition after initial styles are applied
   watch(indicatorStyles, (val) => {
     if (val && !indicatorAnimReady.value) {
       runAfterFramePaint(() => {
@@ -127,9 +205,10 @@
     }
   });
 
+  // Helper to store link template refs
   function addLinkRef(index, el) {
     if (el) {
       linkRefs.value[index] = el;
     }
   }
-</script>
+</script>

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

@@ -49,8 +49,18 @@ $config: (
     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");
+
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: var(--ulu-sa-nav-rail-top, 0);
+      height: var(--ulu-sa-nav-rail-height, 100%);
+      width: var(--ulu-sa-nav-rail-width, 3px);
+      background-color: color.get(get("rail-border-color"));
+      z-index: 0;
+    }
   }
   #{ $prefix }__indicator {
     position: absolute;
@@ -58,6 +68,7 @@ $config: (
     left: 0;
     background-color: color.get(get("indicator-color"));
     clip-path: get("indicator-clip-path");
+    z-index: 1;
   }
   #{ $prefix }__indicator--can-transition {
     transition-property: height, transform, width;