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

package/lib/components/collapsible/UluAccordionGroup.vue

@@ -7,10 +7,23 @@
       @update:modelValue="(newValue) => handleToggle(index, newValue)"
       :trigger-text="item.title"
       :classes="item.classes"
+      :trigger-text-element="triggerTextElement"
+      :modifiers="modifiers"
+      :animate="animate"
     >
-      <slot name="item" :item="item" :index="index">
-        {{ item.content }}
-      </slot>
+      <template #trigger="{ isOpen }" v-if="$slots.trigger">
+        <slot name="trigger" :item="item" :index="index" :isOpen="isOpen"></slot>
+      </template>
+
+      <template #icon="{ isOpen }" v-if="$slots.icon">
+        <slot name="icon" :item="item" :index="index" :isOpen="isOpen"></slot>
+      </template>
+
+      <template #default="{ isOpen, toggle }">
+        <slot name="item" :item="item" :index="index" :isOpen="isOpen" :toggle="toggle">
+          {{ item.content }}
+        </slot>
+      </template>
     </UluAccordion>
   </div>
 </template>
@@ -27,7 +40,28 @@ const props = defineProps({
   items: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * If using summary text sets the inner element the text is wrapped in, usually a headline or strong
+   */
+  triggerTextElement: {
+    type: String,
+    default: "strong"
+  },
+  /**
+   * Class modifiers (ie. 'transparent', 'secondary', etc)
+   */
+  modifiers: [String, Array],
+  /**
+   * Enable or configure animations.
+   * - `false` (default) to disable all animations.
+   * - `true` to enable animations with default settings.
+   * - An object to provide custom options to auto-animate (e.g., { duration: 100, easing: 'linear' }).
+   */
+  animate: {
+    type: [Boolean, Object],
+    default: true
+  },
 });
 
 const internalItems = ref([]);
@@ -51,4 +85,4 @@ function handleToggle(selectedIndex, newValue) {
     internalItems.value[selectedIndex].isOpen = false;
   }
 }
-</script>
+</script>

package/lib/components/collapsible/UluModal.vue

@@ -216,14 +216,14 @@
       // Define the internal modifiers object as a computed property (so it can react to changes)
       const internalModifiers = computed(() => ({
         [props.position]: props.position, 
-        "resize": props.allowResize,
-        "no-resize": !props.allowResize,
-        "no-header": !hasHeader.value,
-        "body-fills": props.bodyFills,
-        "no-backdrop": props.noBackdrop,
-        "no-min-height": props.noMinHeight,
-        "non-modal": props.nonModal,
-        "resizer-active": resizerEnabled.value,
+        "resize" : props.allowResize,
+        "no-resize" : !props.allowResize,
+        "no-header" : !hasHeader.value,
+        "body-fills" : props.bodyFills,
+        "no-backdrop" : props.noBackdrop,
+        "no-min-height" : props.noMinHeight,
+        "non-modal" : props.nonModal,
+        "resizer-active" : resizerEnabled.value,
       }));
 
       const { resolvedModifiers } = useModifiers({ 

package/lib/components/elements/UluList.vue

@@ -13,7 +13,7 @@
     :style="{ 
       listStyleType: listStyleType
     }"
-    :reversed="reversed"
+    :reversed="isOrdered ? reversed : null"
     :start="start"
   >
     <li 
@@ -79,7 +79,6 @@
     listStyleType: String,
   });
 
-  const listElement = computed(() => {
-    return props.ordered || props.forceOrdered ? "ol" : "ul";
-  });
+  const isOrdered = computed(() => props.ordered || props.forceOrdered);
+  const listElement = computed(() => isOrdered.value ? "ol" : "ul");
 </script>

package/lib/components/elements/UluRule.vue

@@ -0,0 +1,49 @@
+<template>
+  <hr v-if="semantic" class="rule" :class="resolvedModifiers">
+  <div v-else class="rule" :class="resolvedModifiers"></div>
+</template>
+
+<script setup>
+  import { computed } from "vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Whether to use the actual <hr> vs superficial <div></div> for rule element
+     */
+    semantic: Boolean,
+    /**
+     * Use short modifier
+     */
+    short: Boolean,
+    /**
+     * Optional margin (keyword from your rule margins config in frontend)
+     */
+    margin: String,
+    /**
+     * Add light modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    light: Boolean,
+    /**
+     * Add large modifier (if set, usually exists, this is for convenience, use modifiers prop if you have custom naming)
+     */
+    large: Boolean,
+    /**
+     * Modifiers (to add any modifier classes based on base class [ie. 'tertiary'])
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    "short" : props.short,
+    "light" : props.light,
+    "large" : props.large,
+    [`margin-${ props.margin }`] : props.margin
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    baseClass: "rule",
+    internal: internalModifiers 
+  });
+</script>

package/lib/components/forms/UluFormRadio.vue

@@ -27,11 +27,11 @@ defineProps({
   /**
    * The value of the selected radio button in the group (for v-model).
    */
-  modelValue: String,
+  modelValue: [String, Number],
   /**
    * The value of this radio button.
    */
-  value: String,
+  value: [String, Number],
   /**
    * The name of the radio button group.
    */

package/lib/components/index.js

@@ -4,6 +4,7 @@
  * - Used in main plugin and bundle exports
  */
 export { default as UluAccordion } from './collapsible/UluAccordion.vue';
+export { default as UluAccordionGroup } from './collapsible/UluAccordionGroup.vue';
 export { default as UluCollapsible } from './collapsible/UluCollapsible.vue';
 export { default as UluDropdown } from './collapsible/UluDropdown.vue';
 export { default as UluModal } from './collapsible/UluModal.vue';
@@ -25,6 +26,7 @@ export { default as UluExternalLink } from './elements/UluExternalLink.vue';
 export { default as UluIcon } from './elements/UluIcon.vue';
 export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
+export { default as UluRule } from './elements/UluRule.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
 export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';
@@ -34,9 +36,19 @@ export { default as UluFormMessage } from './forms/UluFormMessage.vue';
 export { default as UluFormSelect } from './forms/UluFormSelect.vue';
 export { default as UluFormText } from './forms/UluFormText.vue';
 export { default as UluSearchForm } from './forms/UluSearchForm.vue';
+export { default as UluForm } from './forms/UluForm.vue';
+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 UluFormItemsInline } from './forms/UluFormItemsInline.vue';
+export { default as UluFormRadio } from './forms/UluFormRadio.vue';
+export { default as UluFormRequiredChar } from './forms/UluFormRequiredChar.vue';
+export { default as UluFormTextarea } from './forms/UluFormTextarea.vue';
 export { default as UluAdaptiveLayout } from './layout/UluAdaptiveLayout.vue';
 export { default as UluDataGrid } from './layout/UluDataGrid.vue';
 export { default as UluTitleRail } from './layout/UluTitleRail.vue';
+export { default as UluWhenBreakpoint } from './layout/UluWhenBreakpoint.vue';
 export { default as UluBreadcrumb } from './navigation/UluBreadcrumb.vue';
 export { default as UluMenu } from './navigation/UluMenu.vue';
 export { default as UluMenuStack } from './navigation/UluMenuStack.vue';

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/js/utils/dom.js";
+
+  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,19 @@
   };
 
   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 {
+            // HACK: The breakpoint.remove method is bugged, this is the correct implementation
+            if (breakpoint.directions[direction]) {
+              breakpoint.directions[direction].remove(handler);
+            }
+          } catch (error) {
+            console.error(error);
+          }
+        }
       });
     }
     handlers.value = [];
@@ -77,9 +87,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/facets/UluFacetsFilterSelects.vue

@@ -1,26 +1,40 @@
 <template>
-  <div class="facets-dropdown-filters">
+  <div class="facets-dropdown-filters" :class="classes.container">
     <div
       class="facets-dropdown-filters__group"
+      :class="classes.group"
       v-for="group in facets"
       :key="group.uid"
     >
-      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
-        {{ group.name }}
+      <label 
+        :for="`facet-dropdown-${ group.uid }`" 
+        class="facets-dropdown-filters__label"
+        :class="classes.label"
+      >
+        <slot name="label">
+          {{ group.name }}
+        </slot>
       </label>
       <select
         :id="`facet-dropdown-${group.uid}`"
         class="facets-dropdown-filters__select"
+        :class="classes.select"
         @change="onFilterChange(group, $event)"
       >
-        <option value="">All {{ group.name }}s</option>
+        <option value="">
+          <slot name="optionAll" :group="group">
+            All {{ group.name }}s
+          </slot>
+        </option>
         <option
-          v-for="option in group.children"
+          v-for="(option, index) in group.children"
           :key="option.uid"
           :value="option.uid"
           :selected="option.selected"
         >
-          {{ option.label }}
+          <slot name="option" :group="group" :option="option" :index="index">
+            {{ option.label }}
+          </slot>
         </option>
       </select>
     </div>
@@ -29,12 +43,25 @@
 
 <script setup>
 const props = defineProps({
+  /**
+   * Facets Array
+   */
   facets: {
     type: Array,
     default: () => []
-  }
+  },
+  /**
+   * Optional classes bindings for all elements { container, group, label, select }
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
 });
 
+console.log(props);
+
+
 const emit = defineEmits(['facet-change']);
 
 function onFilterChange(group, event) {

package/lib/components/systems/facets/UluFacetsSearch.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="facets-search">
-    <label :class="classes.searchLabel" :for="id">
+  <div class="facets-search" :class="classes.container">
+    <label :class="classes.label" :for="id">
       <strong>Search</strong>
     </label>
     <input 
       :id="id" 
-      :class="classes.searchInput" 
+      :class="classes.input" 
       v-model="localValue"
       type="text" 
       :placeholder="placeholder"

package/lib/components/systems/facets/UluFacetsSort.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="facets-sort" :class="classes.sortForm">
+  <div class="facets-sort" :class="classes.container">
     <label 
       :for="sortId" 
-      :class="classes.sortFormLabel"
+      :class="classes.label"
     >
       <slot>Sort:</slot>
     </label>
@@ -10,7 +10,7 @@
       :value="modelValue"
       @change="emit('update:modelValue', $event.target.value)"
       :id="sortId" 
-      :class="classes.sortFormSelect"
+      :class="classes.select"
     >
       <option v-for="(item, key) in sortTypes" :value="key" :key="key">
         {{ item.text }}

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>