@ulu/frontend-vue 0.1.1-beta.1 → 0.1.1-beta.10

package/lib/components/forms/UluSelectableMenu.vue

@@ -1,7 +1,10 @@
 <template>
   <div 
     class="menu-stack form-theme" 
-    :class="{ 'menu-stack--hide-inputs' : hideInputs }"
+    :class="{ 
+      'menu-stack--hide-inputs' : hideInputs,
+      'menu-stack--compact' : compact
+    }"
     :role="groupRole" 
     :aria-labelledby="legendId"
   >
@@ -40,6 +43,10 @@ const props = defineProps({
    * 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').
    */

package/lib/components/navigation/UluMenu.vue

@@ -17,13 +17,15 @@
       <component
         :is="item.to || item.path ? 'router-link' : item.click ? 'button' : 'a'"
         v-bind="{
-          ...(item.to || item.path ? { to: item.to || item.path } : {}),
+          ...(item.to || item.path ? {
+            to: item.to || item.path,
+            activeClass: classes.linkActive || null,
+            exactActiveClass: classes.linkExactActive || null
+          } : {}),
           ...(item.href ? { 'href' : item.href || '#' } : {}),
         }"
         @click="(event) => { handleItemClick(event, item) }"
         :class="[classes.link, item?.classes?.link]"
-        :activeClass="classes.linkActive"
-        :exactActiveClass="classes.linkExactActive"
         :aria-label="iconOnly ? item.title : null"
         :id="item.id"
         v-ulu-tooltip="iconOnly ? item.title : item.tooltip || null" 

package/lib/components/navigation/UluMenuStack.vue

@@ -1,10 +1,8 @@
 <template>
-  <nav 
+  <component
     class="menu-stack"
-    :class="{
-      'menu-stack--hanging' : hanging,
-      'menu-stack--compact' : compact
-    }"
+    :is="containerElement" 
+    :class="resolvedModifiers"
   >
     <UluMenu 
       :items="items" 
@@ -19,33 +17,52 @@
       }" 
       :noChildren="noChildren"
     />
-  </nav>
+  </component>
 </template>
 
-<script>
+<script setup>
+  import { computed } from "vue";
   import UluMenu from "./UluMenu.vue";
-  export default {
-    name: "UluMenuStack",
-    components: {
-      UluMenu
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
+    /**
+     * Menu item (see UluMenu)
+     */
+    items: Array,
+    /**
+    * The HTML element to use as the container (e.g., 'nav', 'div', 'aside').
+     */
+    containerElement: {
+      type: String,
+      default: "nav"
     },
-    props: {
-      /**
-       * Menu item (see UluMenu)
-       */
-      items: Array,
-      /**
-       * Hanging style menu
-       */
-      hanging: Boolean,
-      /**
-       * Compact style menu
-       */
-      compact: Boolean,
-      /**
-       * Don't include children of menu
-       */
-      noChildren: Boolean
-    }
-  };
+    /**
+     * Hanging style menu
+     */
+    hanging: Boolean,
+    /**
+     * Compact style menu
+     */
+    compact: Boolean,
+    /**
+     * Don't include children of menu
+     */
+    noChildren: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
+  });
+
+  const internalModifiers = computed(() => ({
+    'hanging' : props.hanging,
+    'compact' : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "menu-stack"
+  });
 </script>

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

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="activeFilters.length" class="ulu-facets-active-filters">
+    <slot name="label">
+      <strong class="ulu-facets-active-filters__label">Active Filters:</strong>
+    </slot>
+    <div class="ulu-facets-active-filters__items">
+      <UluButton
+        v-for="filter in activeFilters"
+        :key="`${filter.groupUid}-${filter.uid}`"
+        class="button--sm"
+        @click="removeFilter(filter)"
+      >
+        {{ filter.label }}
+        <UluIcon icon="type:close" />
+      </UluButton>
+    </div>
+    <button @click="clearFilters" class="button button--link">Clear All</button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import UluButton from '../../elements/UluButton.vue';
+import UluIcon from '../../elements/UluIcon.vue';
+
+const props = defineProps({
+  /**
+   * The selectedFacets array from the useFacets composable.
+   */
+  selectedFacets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['facet-change', 'clear-filters']);
+
+const activeFilters = computed(() => {
+  const filters = [];
+  props.selectedFacets.forEach(group => {
+    group.children.forEach(child => {
+      filters.push({
+        ...child,
+        groupUid: group.uid
+      });
+    });
+  });
+  return filters;
+});
+
+function removeFilter(filter) {
+  emit('facet-change', {
+    groupUid: filter.groupUid,
+    facetUid: filter.uid,
+    selected: false
+  });
+}
+
+function clearFilters() {
+  emit('clear-filters');
+}
+</script>
+
+<style lang="scss">
+.ulu-facets-active-filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #eee;
+
+  &__label {
+    margin-right: 0.5rem;
+  }
+
+  &__items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+}
+</style>

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

@@ -22,6 +22,7 @@
           :groupUid="group.uid"
           :groupName="group.name"
           :type="group.multiple ? 'checkbox' : 'radio'"
+          :compact="compact"
           :model-value="selectedUids(group)"
           @facet-change="emit('facet-change', $event)"
         />
@@ -42,6 +43,7 @@
               :groupUid="group.uid"
               :groupName="group.name"
               :type="group.multiple ? 'checkbox' : 'radio'"
+              :compact="compact"
               :model-value="selectedUids(group)"
               @facet-change="emit('facet-change', $event)"
             />
@@ -77,7 +79,11 @@
     facets: {
       type: Array,
       default: () => []
-    }
+    },
+    /**
+     * Whether to use compact modifier on selectable menu
+     */
+    compact: Boolean,
   });
 
   const emit = defineEmits(['facet-change']);

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

@@ -4,6 +4,7 @@
     :legend="groupUid"
     :type="type"
     :options="menuOptions"
+    :compact="compact"
     :model-value="modelValue"
     @update:model-value="handleChange"
   >
@@ -25,6 +26,7 @@ const props = defineProps({
     type: String,
     default: 'checkbox',
   },
+  compact: Boolean,
   modelValue: [String, Array],
 });
 

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

@@ -1,21 +1,23 @@
 <template>
   <div 
-    class="facets-sidebar-layout" 
-    :class="{ 'facets-sidebar-layout--filters-hidden' : isMobile }"
+    class="facets-sidebar" 
+    :class="{ 'facets-sidebar--filters-hidden' : isMobile }"
   >
-    <div class="facets-sidebar-layout__header">
+    <div class="facets-sidebar__header">
       <slot name="header"></slot>
     </div>
 
-    <div v-show="isMobile" class="facets-sidebar-layout__mobile-controls">
-      <button class="button" @click="showMobileFilters = true">Filters & Sort</button>
+    <div v-show="isMobile" class="facets-sidebar__mobile-controls">
+      <button :class="classes.mobileButton" @click="showMobileFilters = true">
+        {{ mobileButtonText }}
+      </button>
     </div>
 
-    <div class="facets-sidebar-layout__body">
+    <div class="facets-sidebar__body">
       <!-- Desktop container for the sidebar -->
-      <div v-show="!isMobile" class="facets-sidebar-layout__sidebar" ref="desktopTarget"></div>
+      <div v-show="!isMobile" class="facets-sidebar__sidebar" ref="desktopTarget"></div>
       
-      <div class="facets-sidebar-layout__main">
+      <div class="facets-sidebar__main">
         <slot name="main"></slot>
       </div>
     </div>
@@ -28,7 +30,7 @@
       allowResize
     >
       <!-- Mobile container for the sidebar -->
-      <div class="facets-sidebar-layout__sidebar" ref="mobileTarget"></div>
+      <div class="facets-sidebar__sidebar" ref="mobileTarget"></div>
     </UluModal>
 
     <teleport :to="teleportTarget" v-if="teleportTarget">
@@ -41,6 +43,24 @@
   import { ref, inject, computed } from 'vue';
   import UluModal from '../../collapsible/UluModal.vue';
 
+  defineProps({
+    mobileButtonText: {
+      type: String,
+      default: "Filters & Sort"
+    },
+    /**
+     * Classes for elements. See UluCollapsible for all available class keys (toggle, content, etc).
+     * The 'icon' key is also available for the icon span.
+     * - Any valid class binding value per element
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        mobileButton: 'button'
+      })
+    }
+  })
+
   const showMobileFilters = ref(false);
   const isMobile = inject("uluIsMobile");
 
@@ -57,13 +77,13 @@
 </script>
 
 <style lang="scss">
-  .facets-sidebar-layout__body {
+  .facets-sidebar__body {
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 2rem;
   }
-  .facets-sidebar-layout--filters-hidden {
-    .facets-sidebar-layout__body {
+  .facets-sidebar--filters-hidden {
+    .facets-sidebar__body {
       grid-template-columns: 1fr;
     }
   }

package/lib/components/systems/facets/useFacets.js

@@ -1,6 +1,74 @@
 import { ref, computed, watch } from 'vue';
 import Fuse from 'fuse.js';
 
+/**
+ * Helper function to create a union of multiple Sets.
+ * @param {Array<Set>} sets - An array of sets to unify.
+ * @returns {Set} A new set containing all unique items from the input sets.
+ */
+function unionSets(sets) {
+  const union = new Set();
+  for (const set of sets) {
+    for (const item of set) {
+      union.add(item);
+    }
+  }
+  return union;
+}
+
+/**
+ * Helper function to create an intersection of multiple Sets.
+ * @param {Array<Set>} sets - An array of sets to intersect.
+ * @returns {Set} A new set containing only the items present in all input sets.
+ */
+function intersectSets(sets) {
+  if (!sets || sets.length === 0) return new Set();
+  // Start with a copy of the first set, which is an optimization if it's the smallest.
+  // For better performance, sort sets by size and start with the smallest.
+  const sortedSets = sets.sort((a, b) => a.size - b.size);
+  const intersection = new Set(sortedSets[0]);
+  for (let i = 1; i < sortedSets.length; i++) {
+    for (const item of intersection) {
+      if (!sortedSets[i].has(item)) {
+        intersection.delete(item);
+      }
+    }
+    // If intersection becomes empty, no need to continue.
+    if (intersection.size === 0) break;
+  }
+  return intersection;
+}
+
+/**
+ * Calculates the final set of item indices based on selected facets using the pre-built index.
+ * @param {Array<Object>} selected - The array of selected facet groups.
+ * @param {Map<String, Set>} index - The inverted index.
+ * @param {Set<number>} allItemsSet - A set of all possible item indices.
+ * @returns {Set} A set of indices for the items that match the filters.
+ */
+function getFilteredSetFromIndex(selected, index, allItemsSet) {
+  if (!selected || selected.length === 0) {
+    return allItemsSet;
+  }
+
+  const groupSets = selected.map(group => {
+    const childSets = group.children.map(child => {
+      const key = `${group.uid}:${child.uid}`;
+      return index.get(key) || new Set();
+    });
+
+    // For 'all' (AND), intersect the sets within the group.
+    if (group.match === 'all') {
+      return intersectSets(childSets);
+    }
+    // For 'some' (OR), union the sets within the group.
+    return unionSets(childSets);
+  });
+
+  // Intersect the results from each group.
+  return intersectSets(groupSets);
+}
+
 /**
  * Generates facet groups and their possible values from a list of items.
  * @param {Array<Object>} allItems - The full list of items.
@@ -54,6 +122,7 @@ function generateInitialFacets(allItems, facetFields) {
  * @param {Object} [options.searchOptions={}] - Configuration options for Fuse.js.
  * @param {Function} [options.getItemFacet] - A function to retrieve facet information from an item. Should always return an array of values.
  * @param {Function} [options.getSortValue] - A function to get the value to sort by from an item.
+ * @param {String} [options.countMode='none'] - The mode for calculating facet counts. Can be 'none', 'simple', or 'intuitive'.
  */
 export function useFacets(allItems, options = {}) {
   const defaultGetItemFacet = (item, uid) => {
@@ -120,6 +189,37 @@ export function useFacets(allItems, options = {}) {
     ...extraSortTypes
   }));
 
+  const facetIndex = computed(() => {
+    const index = new Map();
+    // Depend on searchedItems to re-build when search changes.
+    const items = searchedItems.value;
+    if (!items || !facetFields) return index;
+
+    // Create a map of getters for efficiency inside the loop.
+    const getters = new Map(facetFields.map(group => {
+      const getValue = group.getValue || (item => item[group.uid]);
+      return [group.uid, getValue];
+    }));
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      for (const group of facetFields) {
+        const getValue = getters.get(group.uid);
+        const value = getValue(item);
+        const values = Array.isArray(value) ? value : (value ? [value] : []);
+
+        for (const v of values) {
+          const key = `${group.uid}:${v}`;
+          if (!index.has(key)) {
+            index.set(key, new Set());
+          }
+          index.get(key).add(i);
+        }
+      }
+    }
+    return index;
+  });
+
   const searchOptions = computed(() => ({
     shouldSort: true,
     keys: ["title", "label", "description", "author"],
@@ -138,7 +238,6 @@ export function useFacets(allItems, options = {}) {
     const selected = [];
     facets.value.forEach((group) => {
       const selectedChildren = group.children.filter(child => child.selected);
-      group.selectedCount = selectedChildren.length;
       if (selectedChildren.length > 0) {
         selected.push({ ...group, children: selectedChildren });
       }
@@ -147,7 +246,23 @@ export function useFacets(allItems, options = {}) {
   });
 
   const filteredItems = computed(() => {
-    return getFilteredItems(searchedItems.value, selectedFacets.value);
+    if (!selectedFacets.value.length) {
+      return searchedItems.value;
+    }
+    const index = facetIndex.value;
+    // This check is important because the index might not be ready on the first render.
+    if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
+      return [];
+    }
+    const allItemsSet = new Set(searchedItems.value.map((_, i) => i));
+    const filteredIndexSet = getFilteredSetFromIndex(selectedFacets.value, index, allItemsSet);
+    
+    const result = [];
+    // Using a direct loop for performance.
+    for (const i of filteredIndexSet) {
+      result.push(searchedItems.value[i]);
+    }
+    return result;
   });
 
   const displayItems = computed(() => {
@@ -159,27 +274,12 @@ export function useFacets(allItems, options = {}) {
   });
 
   // --- Methods ---
-  function getFilteredItems(items, selected) {
-    if (!selected.length) return items;
-    return items.filter(item => {
-      return selected.every(group => {
-        const itemFacetValues = getItemFacet(item, group.uid);
-        if (itemFacetValues && itemFacetValues.length) {
-          if (group.match === 'all') {
-            return group.children.every(facet => itemFacetValues.includes(facet.uid));
-          }
-          return group.children.some(facet => itemFacetValues.includes(facet.uid));
-        }
-        return false;
-      });
-    });
-  }
-
   function clearFilters() {
     facets.value.forEach(group => {
       if (group.children) {
         group.children.forEach(child => child.selected = false);
       }
+      group.selectedCount = 0;
     });
   }
 
@@ -197,12 +297,19 @@ export function useFacets(allItems, options = {}) {
       if (facet) {
         facet.selected = selected;
       }
+      // Recalculate selectedCount for the group
+      group.selectedCount = group.children.filter(c => c.selected).length;
     }
   }
 
   // --- Watchers ---
   watch(generatedFacets, (newGeneratedFacets) => {
-    facets.value = createFacets(initialFacets || newGeneratedFacets);
+    const newFacets = createFacets(initialFacets || newGeneratedFacets);
+    // Calculate initial counts
+    newFacets.forEach(group => {
+      group.selectedCount = group.children.filter(c => c.selected).length;
+    });
+    facets.value = newFacets;
   }, { immediate: true });
 
   watch([selectedFacets, searchedItems], ([currentSelected, currentSearchedItems], [prevSelected, prevSearchedItems]) => {
@@ -223,33 +330,52 @@ export function useFacets(allItems, options = {}) {
         });
       });
     } else if (countMode === 'intuitive') {
+      const index = facetIndex.value;
+      if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
+        // Index might not be ready yet.
+        return;
+      }
+      const allItemsSet = new Set(searchedItems.value.map((_, i) => i));
+      const currentFilteredSet = getFilteredSetFromIndex(currentSelected, index, allItemsSet);
+
       facets.value.forEach(group => {
         group.children.forEach(child => {
-          const tempFacets = JSON.parse(JSON.stringify(facets.value));
-          const tempGroup = tempFacets.find(g => g.uid === group.uid);
-          const tempChild = tempGroup.children.find(c => c.uid === child.uid);
-
-          if (tempGroup.multiple) {
-            if (tempChild.selected) {
-              child.count = filteredItems.value.filter(item => {
-                const itemValues = getItemFacet(item, group.uid);
-                return itemValues.includes(child.uid);
-              }).length;
-              return;
+          const key = `${group.uid}:${child.uid}`;
+          const childSet = index.get(key) || new Set();
+
+          if (child.selected) {
+            // --- Logic for already-selected facets (now performant) ---
+            if (group.multiple) {
+              // This is the intersection of currently filtered items and items with this facet value.
+              const intersection = intersectSets([currentFilteredSet, childSet]);
+              child.count = intersection.size;
+            } else {
+              // For single-select, the count is just the total number of filtered items.
+              child.count = currentFilteredSet.size;
             }
-            tempChild.selected = true;
           } else {
-            if (tempChild.selected) {
-              child.count = filteredItems.value.length;
-              return;
+            // --- Logic for un-selected facets (now without deep clone) ---
+            const tempSelected = [];
+            for (const g of currentSelected) {
+              tempSelected.push({ ...g, children: [...g.children] });
+            }
+      
+            let groupInTemp = tempSelected.find(g => g.uid === group.uid);
+      
+            if (!groupInTemp) {
+              groupInTemp = { ...group, children: [] };
+              tempSelected.push(groupInTemp);
+            }
+      
+            if (group.multiple) {
+              groupInTemp.children.push(child);
+            } else {
+              groupInTemp.children = [child];
             }
-            tempGroup.children.forEach(f => { f.selected = false; });
-            tempChild.selected = true;
+            
+            const finalSet = getFilteredSetFromIndex(tempSelected, index, allItemsSet);
+            child.count = finalSet.size;
           }
-          
-          const tempSelected = tempFacets.map(g => ({...g, children: g.children.filter(c => c.selected)})).filter(g => g.children.length > 0);
-          const resultItems = getFilteredItems(currentSearchedItems, tempSelected);
-          child.count = resultItems.length;
         });
       });
     }

package/lib/components/systems/index.js

@@ -1,4 +1,5 @@
 export { useFacets } from './facets/useFacets.js';
+export { default as UluFacetsActiveFilters } from './facets/UluFacetsActiveFilters.vue';
 export { default as UluFacetsFilterLists } from './facets/UluFacetsFilterLists.vue';
 export { default as UluFacetsFilterPopovers } from './facets/UluFacetsFilterPopovers.vue';
 export { default as UluFacetsFilterSelects } from './facets/UluFacetsFilterSelects.vue';

package/lib/components/systems/slider/UluSlideShow.vue

@@ -50,7 +50,7 @@
             @click="previous"
             :disabled="!canScrollLeft"
           >
-            <UluIcon class="slideshow__control-icon" icon="type:next"/>
+            <UluIcon class="slideshow__control-icon" icon="type:previous"/>
           </button>
         </li>
         <li class="slideshow__controls-item slideshow__controls-item--next">
@@ -60,7 +60,7 @@
             @click="next"
             :disabled="!canScrollRight"
           >
-            <UluIcon class="slideshow__control-icon" icon="type:previous" />
+            <UluIcon class="slideshow__control-icon" icon="type:next" />
           </button>
         </li>
       </ul>