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

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>

package/lib/components/visualizations/UluProgressBar.vue

@@ -1,13 +1,26 @@
 <template>
   <div :class="componentClasses">
-    <div v-if="label || $slots.icon" class="progress-bar__header">
-      <strong
+    <div 
+      v-if="label || $slots.label || $slots.icon || amountInHeader" 
+      class="progress-bar__header"
+    >
+      <component
         v-if="label"
+        :is="labelElement"
         class="progress-bar__label"
-        :class="{ 'hidden-visually': labelHidden }"
+        :class="[classes.label, { 'hidden-visually': labelHidden }]"
       >
-        {{ label }}
-      </strong>
+        <slot name="label">
+          {{ label }}
+        </slot>
+      </component>
+      <div 
+        v-if="amountInHeader"  
+        class="progress-bar__value progress-bar__value--amount"
+      >
+        <strong class="hidden-visually">Amount:</strong>
+        <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
+      </div>
       <div v-if="$slots.icon" class="progress-bar__icon">
         <slot name="icon" />
       </div>
@@ -20,21 +33,21 @@
         :style="{ width: deficitBarWidth }"
       ></div>
     </div>
-    <div v-if="!loader && !indeterminate" class="progress-bar__values">
+    <div 
+      v-if="!noValues && !amountInHeader && (!loader && !indeterminate)" 
+      class="progress-bar__values"
+    >
       <div class="progress-bar__value progress-bar__value--amount">
         <strong class="hidden-visually">Amount:</strong>
-        {{ amount }}
+        <slot name="valueAmount" :value="amount">{{ formatValue(amount, 'amount') }}</slot>
       </div>
-      <div
-        v-if="deficit > 0"
-        class="progress-bar__value progress-bar__value--deficit"
-      >
+      <div v-if="deficit > 0" class="progress-bar__value progress-bar__value--deficit">
         <strong class="hidden-visually">Deficit: </strong>
-        -{{ deficit }}
+        <slot name="valueDeficit" :value="deficit">-{{ formatValue(deficit, 'deficit') }}</slot>
       </div>
       <div class="progress-bar__value progress-bar__value--total">
         <strong class="hidden-visually">Total:</strong>
-        {{ total }}
+        <slot name="valueTotal" :value="total">{{ formatValue(total, 'total') }}</slot>
       </div>
     </div>
   </div>
@@ -49,13 +62,27 @@ import { computed } from "vue";
  */
 const props = defineProps({
   /**
-   * The label to display above the progress bar.
+   * The label to display above the progress bar. (or use label slot)
    */
   label: String,
   /**
    * Hides the label visually, but keeps it for screen readers.
    */
   labelHidden: Boolean,
+  /**
+   * Optional classes object (currently only allowing { label } class)
+   */
+  classes: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * Element to use for label
+   */
+  labelElement: {
+    type: String,
+    default: "strong"
+  },
   /**
    * The current amount of progress.
    */
@@ -97,6 +124,22 @@ const props = defineProps({
    * Applies an indeterminate animation for unknown progress.
    */
   indeterminate: Boolean,
+  /**
+   * Omit values from output (the numbers below the progress bar)
+   */
+  noValues: Boolean,
+  /**
+   * A function to format the numerical values (amount, deficit, total).
+   * Takes the value and type ('amount', 'deficit', 'total') as input and should return a string.
+   */
+  formatValue: {
+    type: Function,
+    default: (value, type) => value,
+  },
+  /**
+   * Will put the amount only in header (there is a headerValue slot it you want to format)
+   */
+  amountInHeader: Boolean
 });
 
 const getCssPercentage = (amount, total) => {

package/lib/components/visualizations/UluProgressCircle.vue

@@ -23,124 +23,137 @@
           cy="16" 
         />
       </svg>
-      <strong v-if="!showValueOutside" class="progress-circle__chart-value">
-        {{ percentage }}%
+      <strong v-if="!showValueOutside && !noValue" class="progress-circle__chart-value">
+        <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
       </strong>
     </div>
-    <strong v-if="showValueOutside" class="progress-circle__value type-small-x">
-      {{ percentage }}%
+    <strong v-if="showValueOutside && !noValue" class="progress-circle__value type-small-x">
+      <slot name="value" :value="percentage">{{ formatValue(percentage) }}</slot>
     </strong>
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue';
+
+/**
+ * A circular progress indicator component.
+ * @slot value - The value display. Overrides the `formatValue` prop.
+ */
+const props = defineProps({
+  /**
+   * The label for accessibility (visually hidden).
+   */
+  label: {
+    type: String,
+    default: "Progress"
+  },
+  /**
+   * The progress percentage (0-100).
+   */
+  percentage: {
+    type: Number,
+    default: 0
+  },
+  /**
+   * A function to format the percentage value.
+   * Takes the number as input and should return a string.
+   */
+  formatValue: {
+    type: Function,
+    default: (value) => `${ value }%`,
+  },
+  /**
+   * Hides the percentage value display.
+   */
+  noValue: Boolean,
+  /**
+   * Renders a smaller version of the component.
+   */
+  small: Boolean,
+  /**
+   * Displays the percentage value outside (to the side) of the circle.
+   */
+  outside: Boolean,
+  /**
+   * Displays the percentage value below the circle.
+   */
+  outsideBelow: Boolean,
+  /**
+   * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
+   */
+  status: {
+    type: String,
+    default: ''
+  },
   /**
-   * A circular progress indicator component.
+   * Renders the component as a solid pie chart instead of a donut.
    */
-  export default {
-    name: 'UluProgressCircle',
-    props: {
-      /**
-       * The label for accessibility (visually hidden).
-       */
-      label: {
-        type: String,
-        default: "Progress"
-      },
-      /**
-       * The progress percentage (0-100).
-       */
-      percentage: {
-        type: Number,
-        default: 0
-      },
-      /**
-       * Renders a smaller version of the component.
-       */
-      small: Boolean,
-      /**
-       * Displays the percentage value outside (to the side) of the circle.
-       */
-      outside: Boolean,
-      /**
-       * Displays the percentage value below the circle.
-       */
-      outsideBelow: Boolean,
-      /**
-       * Sets the status color of the progress circle (e.g., 'low', 'incomplete', 'complete').
-       */
-      status: {
-        type: String,
-        default: ''
-      },
-      /**
-       * Renders the component as a solid pie chart instead of a donut.
-       */
-      pieStyle: Boolean,
-      /**
-       * Removes the center mask, filling the entire circle.
-       */
-      noMask: Boolean,
-      /**
-       * The duration of the animation in milliseconds.
-       */
-      duration: {
-        type: Number,
-        default: 1000 // Matches SCSS animation-duration
-      },
-      /**
-       * The easing function for the animation.
-       */
-      easing: {
-        type: String,
-        default: "ease-in" // Matches SCSS animation-timing
-      }
-    },
-    watch: {
-      // Need to reanimate if value changes
-      percentage(newVal, oldVal) {
-        if (newVal !== oldVal) {
-          this.animate(this.normalize(oldVal));
-        }
-      }
-    },
-    computed: {
-      endDasharray() {
-        return `${ this.normalize(this.percentage) } 100`;
-      },
-      showValueOutside() {
-        return this.outside || this.outsideBelow || this.small;
-      },
-      componentClasses() {
-        const classes = {
-          'progress-circle': true,
-          'progress-circle--small': this.small,
-          'progress-circle--pie': this.pieStyle,
-          'progress-circle--outside': this.showValueOutside,
-          'progress-circle--outside-below': this.outsideBelow,
-          'progress-circle--no-mask': this.noMask,
-        };
-        if (this.status) {
-          classes[`progress-circle--${this.status}`] = true;
-        }
-        return classes;
-      }
-    },
-    methods: {
-      normalize(percentage) {
-        // Added the 1% extra to 100% because sometimes it renders with a tiny gap
-        return percentage === 100 ? 101 : percentage;
-      },
-      animate(from = 0) {
-        const { pie } = this.$refs;
-        if (!pie || !pie.animate) return; // No Animation API or element not ready
-        const { duration, easing, endDasharray } = this;
-        const keyframes = { strokeDasharray: [`${ from } 100`, endDasharray] };
-        pie.animate(keyframes, { duration, easing, fill: "forwards" });
-      }
-    },
-    mounted() {
-      this.animate();
-    }
+  pieStyle: Boolean,
+  /**
+   * Removes the center mask, filling the entire circle.
+   */
+  noMask: Boolean,
+  /**
+   * The duration of the animation in milliseconds.
+   */
+  duration: {
+    type: Number,
+    default: 1000 // Matches SCSS animation-duration
+  },
+  /**
+   * The easing function for the animation.
+   */
+  easing: {
+    type: String,
+    default: "ease-in" // Matches SCSS animation-timing
+  }
+});
+
+const pie = ref(null);
+
+const normalize = (percentage) => {
+  // Added the 1% extra to 100% because sometimes it renders with a tiny gap
+  return percentage === 100 ? 101 : percentage;
+};
+
+const animate = (from = 0) => {
+  if (!pie.value || !pie.value.animate) return; // No Animation API or element not ready
+  
+  const keyframes = { strokeDasharray: [`${from} 100`, endDasharray.value] };
+  pie.value.animate(keyframes, { duration: props.duration, easing: props.easing, fill: "forwards" });
+};
+
+watch(() => props.percentage, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    animate(normalize(oldVal));
+  }
+});
+
+const endDasharray = computed(() => {
+  return `${normalize(props.percentage)} 100`;
+});
+
+const showValueOutside = computed(() => {
+  return props.outside || props.outsideBelow || props.small;
+});
+
+const componentClasses = computed(() => {
+  const classes = {
+    'progress-circle': true,
+    'progress-circle--small': props.small,
+    'progress-circle--pie': props.pieStyle,
+    'progress-circle--outside': showValueOutside.value,
+    'progress-circle--outside-below': props.outsideBelow,
+    'progress-circle--no-mask': props.noMask,
+  };
+  if (props.status) {
+    classes[`progress-circle--${props.status}`] = true;
   }
+  return classes;
+});
+
+onMounted(() => {
+  animate();
+});
 </script>

package/lib/plugins/core/index.js

@@ -24,8 +24,8 @@ const defaults = {
     pathSeparator: "fas fa-chevron-right",
     image: "fas fa-image",
     file: "fas fa-file",
-    next: "fas fa-chevron-left",
-    previous: "fas fa-chevron-right",
+    previous: "fas fa-chevron-left",
+    next: "fas fa-chevron-right",
     dropdownExpand: "fas fa-caret-down"
   }
 };