@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.10

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

@@ -0,0 +1,90 @@
+<template>
+  <div 
+    class="facets-sidebar" 
+    :class="{ 'facets-sidebar--filters-hidden' : isMobile }"
+  >
+    <div class="facets-sidebar__header">
+      <slot name="header"></slot>
+    </div>
+
+    <div v-show="isMobile" class="facets-sidebar__mobile-controls">
+      <button :class="classes.mobileButton" @click="showMobileFilters = true">
+        {{ mobileButtonText }}
+      </button>
+    </div>
+
+    <div class="facets-sidebar__body">
+      <!-- Desktop container for the sidebar -->
+      <div v-show="!isMobile" class="facets-sidebar__sidebar" ref="desktopTarget"></div>
+      
+      <div class="facets-sidebar__main">
+        <slot name="main"></slot>
+      </div>
+    </div>
+
+    <UluModal
+      v-if="isMobile"
+      v-model="showMobileFilters"
+      position="right"
+      title="Filters & Sort"
+      allowResize
+    >
+      <!-- Mobile container for the sidebar -->
+      <div class="facets-sidebar__sidebar" ref="mobileTarget"></div>
+    </UluModal>
+
+    <teleport :to="teleportTarget" v-if="teleportTarget">
+      <slot name="sidebar"></slot>
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+  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");
+
+  const desktopTarget = ref(null);
+  const mobileTarget = ref(null);
+
+  const teleportTarget = computed(() => {
+    if (isMobile.value) {
+      return mobileTarget.value;
+    } else {
+      return desktopTarget.value;
+    }
+  });
+</script>
+
+<style lang="scss">
+  .facets-sidebar__body {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 2rem;
+  }
+  .facets-sidebar--filters-hidden {
+    .facets-sidebar__body {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="facets-sort" :class="classes.sortForm">
+    <label 
+      :for="sortId" 
+      :class="classes.sortFormLabel"
+    >
+      <slot>Sort:</slot>
+    </label>
+    <select 
+      :value="modelValue"
+      @change="emit('update:modelValue', $event.target.value)"
+      :id="sortId" 
+      :class="classes.sortFormSelect"
+    >
+      <option v-for="(item, key) in sortTypes" :value="key" :key="key">
+        {{ item.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  let idCounter = 0;
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    sortTypes: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const sortId = ref(`ulu-facet-sort-${++idCounter}`);
+</script>

package/lib/components/systems/facets/_facets.scss

@@ -54,9 +54,8 @@ $config: (
   $prefix: selector.class("facets");
 
   #{ $prefix }__body {
-        .FacetView__body {
-        display: flex
-;
+    .FacetView__body {
+      display: flex;
     }
   }
 }

package/lib/components/systems/facets/_mock-data.js

@@ -0,0 +1,40 @@
+export const initialMockFacets = [
+  {
+    name: 'Category',
+    uid: 'category',
+    open: true,
+    children: [
+      { uid: 'cat1', label: 'Design' },
+      { uid: 'cat2', label: 'Development' },
+      { uid: 'cat3', label: 'Marketing' },
+      { uid: 'cat4', label: 'Business' },
+      { uid: 'cat5', label: 'Lifestyle' },
+      { uid: 'cat6', label: 'Technology' },
+    ]
+  },
+  {
+    name: 'Author',
+    uid: 'author',
+    open: true,
+    children: [
+      { uid: 'jane-doe', label: 'Jane Doe' },
+      { uid: 'john-smith', label: 'John Smith' },
+      { uid: 'peter-jones', label: 'Peter Jones' },
+    ]
+  }
+];
+
+export const mockItems = [
+  { id: 1, title: 'The Art of UI Design', description: 'A deep dive into creating beautiful user interfaces.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 5, 15) },
+  { id: 2, title: 'Vue.js for Beginners', description: 'Getting started with the popular JavaScript framework.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 8, 22) },
+  { id: 3, title: 'Content Marketing Strategies', description: 'How to attract and retain customers with great content.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 11, 10) },
+  { id: 4, title: 'Startup Funding 101', description: 'A guide to raising capital for your new venture.', category: ['cat4'], author: ['jane-doe'], date: new Date(2024, 1, 5) },
+  { id: 5, title: 'Minimalist Living', description: 'Declutter your life and find more happiness.', category: ['cat5'], author: ['john-smith'], date: new Date(2023, 3, 30) },
+  { id: 6, title: 'The Future of AI', description: 'Exploring the impact of artificial intelligence on society.', category: ['cat6'], author: ['peter-jones'], date: new Date(2024, 0, 1) },
+  { id: 7, title: 'Advanced CSS Techniques', description: 'Take your styling skills to the next level.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 10, 18) },
+  { id: 8, title: 'Building a Scalable API', description: 'Best practices for designing and implementing APIs.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 7, 3) },
+  { id: 9, title: 'Social Media for Business', description: 'Leveraging social platforms for growth.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 9, 14) },
+  { id: 10, title: 'Negotiation and Deal Making', description: 'Master the art of getting what you want.', category: ['cat4'], author: ['jane-doe'], date: new Date(2023, 6, 25) },
+  { id: 11, title: 'Healthy Eating Habits', description: 'A guide to a balanced and nutritious diet.', category: ['cat5'], author: ['john-smith'], date: new Date(2024, 2, 12) },
+  { id: 12, title: 'Quantum Computing Explained', description: 'A simple introduction to a complex topic.', category: ['cat6'], author: ['peter-jones'], date: new Date(2023, 9, 9) },
+];

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

@@ -0,0 +1,394 @@
+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.
+ * @param {Array<Object>} facetFields - Configuration for which fields to create facets from.
+ * @returns {Array<Object>} The generated facet structure.
+ */
+function generateInitialFacets(allItems, facetFields) {
+  if (!facetFields || !Array.isArray(facetFields)) return [];
+  return facetFields.map(group => {
+    const allValues = new Set();
+    const getValue = group.getValue || (item => item[group.uid]);
+
+    allItems.forEach(item => {
+      const value = getValue(item);
+      if (Array.isArray(value)) {
+        value.forEach(v => v && allValues.add(v));
+      } else if (value) {
+        allValues.add(value);
+      }
+    });
+
+    const getLabel = group.getLabel || (value => value);
+
+    const children = [...allValues].map(value => ({
+      uid: value,
+      label: getLabel(value),
+      selected: false
+    }));
+
+    // Sort by label, alphabetically
+    children.sort((a, b) => String(a.label).localeCompare(String(b.label)));
+
+    return {
+      ...group,
+      children
+    };
+  });
+}
+
+
+/**
+ * A composable for handling client-side faceted search, filtering, and sorting.
+ * @param {import('vue').Ref<Array<Object>>} allItems - A Vue ref containing the full list of items to be processed.
+ * @param {Object} options - Configuration options for the composable.
+ * @param {Array} [options.initialFacets] - The initial configuration for the facets. Can be generated automatically if `facetFields` is provided.
+ * @param {Array} [options.facetFields] - A simpler configuration to automatically generate facets from items. Each item can have `uid`, `name`, `open`, `getValue` and `getLabel`.
+ * @param {String} [options.initialSearchValue=''] - The initial value for the search input.
+ * @param {String} [options.initialSortType='az'] - The initial sort type.
+ * @param {Boolean} [options.noDefaultSorts=false] - If true, the default 'A-Z' and 'Z-A' sorts will not be included.
+ * @param {Object} [options.extraSortTypes={}] - Additional sort types to be merged with the default ones.
+ * @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) => {
+    const value = item[uid];
+    if (value === null || typeof value === 'undefined') return [];
+    return Array.isArray(value) ? value : [value];
+  };
+
+  const {
+    initialFacets,
+    facetFields,
+    initialSearchValue = '',
+    initialSortType = 'az',
+    noDefaultSorts = false,
+    extraSortTypes = {},
+    searchOptions: initialSearchOptions = {},
+    getItemFacet = defaultGetItemFacet,
+    getSortValue = item => (item.title || item.label || ""),
+    countMode = 'none' // 'none', 'simple', 'intuitive'
+  } = options;
+
+  const sortAlpha = items => {
+    return items.sort((a, b) => {
+      const va = getSortValue(a);
+      const vb = getSortValue(b);
+      if (va && vb) {
+        return String(va).localeCompare(String(vb));
+      } else {
+        return va ? -1 : vb ? 1 : 0;
+      }
+    });
+  }
+  const defaultSorts = {
+    az: { text: "A-Z", sort: sortAlpha },
+    za: { text: "Z-A", sort: items => sortAlpha(items).reverse() },
+  };
+
+  // --- Helpers ---
+  function createFacets(initial) {
+    return (initial || []).map(group => ({
+      ...group,
+      open: group.open || false,
+      children: group.children.map(facet => ({
+        ...facet,
+        selected: facet.selected || false
+      })),
+      selectedCount: 0
+    }));
+  }
+
+  // --- State ---
+  const facets = ref([]);
+  const searchValue = ref(initialSearchValue);
+  const selectedSort = ref(initialSortType);
+
+  // --- Computed ---
+  const generatedFacets = computed(() => {
+    if (!facetFields || !allItems.value?.length) return null;
+    return generateInitialFacets(allItems.value, facetFields);
+  });
+
+  const sortTypes = computed(() => ({
+    ...(noDefaultSorts ? {} : defaultSorts),
+    ...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"],
+    ...initialSearchOptions
+  }));
+
+  const searchedItems = computed(() => {
+    if (!searchValue.value?.length) {
+      return allItems.value;
+    }
+    const fuse = new Fuse(allItems.value, searchOptions.value);
+    return fuse.search(searchValue.value).map(result => result.item);
+  });
+
+  const selectedFacets = computed(() => {
+    const selected = [];
+    facets.value.forEach((group) => {
+      const selectedChildren = group.children.filter(child => child.selected);
+      if (selectedChildren.length > 0) {
+        selected.push({ ...group, children: selectedChildren });
+      }
+    });
+    return selected;
+  });
+
+  const filteredItems = computed(() => {
+    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(() => {
+    const sortFn = sortTypes.value[selectedSort.value]?.sort;
+    if (typeof sortFn !== 'function') {
+      return filteredItems.value;
+    }
+    return sortFn([...filteredItems.value]);
+  });
+
+  // --- Methods ---
+  function clearFilters() {
+    facets.value.forEach(group => {
+      if (group.children) {
+        group.children.forEach(child => child.selected = false);
+      }
+      group.selectedCount = 0;
+    });
+  }
+
+  function handleFacetChange({ groupUid, facetUid, selected }) {
+    const group = facets.value.find(g => g.uid === groupUid);
+    if (group) {
+      if (!group.multiple && selected) {
+        group.children.forEach(f => {
+          if (f.uid !== facetUid) {
+            f.selected = false;
+          }
+        });
+      }
+      const facet = group.children.find(f => f.uid === facetUid);
+      if (facet) {
+        facet.selected = selected;
+      }
+      // Recalculate selectedCount for the group
+      group.selectedCount = group.children.filter(c => c.selected).length;
+    }
+  }
+
+  // --- Watchers ---
+  watch(generatedFacets, (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]) => {
+    if (countMode === 'none' || !facets.value.length) return;
+
+    // A simple optimization to prevent re-calculating counts if the actual data hasn't changed.
+    if (currentSelected === prevSelected && currentSearchedItems === prevSearchedItems) return;
+
+    if (countMode === 'simple') {
+      facets.value.forEach(group => {
+        const otherSelected = currentSelected.filter(g => g.uid !== group.uid);
+        const itemsToCount = getFilteredItems(currentSearchedItems, otherSelected);
+        group.children.forEach(child => {
+          child.count = itemsToCount.filter(item => {
+            const itemValues = getItemFacet(item, group.uid);
+            return itemValues.includes(child.uid);
+          }).length;
+        });
+      });
+    } 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 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;
+            }
+          } else {
+            // --- 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];
+            }
+            
+            const finalSet = getFilteredSetFromIndex(tempSelected, index, allItemsSet);
+            child.count = finalSet.size;
+          }
+        });
+      });
+    }
+  }, { deep: true, immediate: true });
+
+  return {
+    facets,
+    searchValue,
+    selectedSort,
+    sortTypes,
+    displayItems,
+    selectedFacets,
+    clearFilters,
+    handleFacetChange
+  };
+}

package/lib/components/systems/index.js

@@ -1,17 +1,29 @@
-export { default as UluFacets } from './facets/UluFacets.vue';
+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';
+export { default as UluFacetsHeaderLayout } from './facets/UluFacetsHeaderLayout.vue';
+export { default as UluFacetsResults } from './facets/UluFacetsResults.vue';
 export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
+export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';
+export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
+
 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 UluShowSkeleton } from './skeleton/UluShowSkeleton.vue';
 export { default as UluSkeletonContent } from './skeleton/UluSkeletonContent.vue';
 export { default as UluSkeletonMedia } from './skeleton/UluSkeletonMedia.vue';
-export { default as UluSkeletonTextInline } from './skeleton/UluSkeletonTextInline.vue';
+export { default as UluSkeletonText } from './skeleton/UluSkeletonText.vue';
+
 export { default as UluImageSlideShow } from './slider/UluImageSlideShow.vue';
 export { default as UluSlideShow } from './slider/UluSlideShow.vue';
 export { default as UluSlideShowSlide } from './slider/UluSlideShowSlide.vue';
+
 export { default as UluTableSticky } from './table-sticky/UluTableSticky.vue';
 export { default as UluTableStickyRows } from './table-sticky/UluTableStickyRows.vue';
 export { default as UluTableStickyTable } from './table-sticky/UluTableStickyTable.vue';

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

@@ -10,6 +10,7 @@
   import { SECTIONS, REGISTER, UNREGISTER } from "./symbols.js";
   export default {
     name: "ScrollAnchors",
+    emits: ["section-change"],
     props: {
       firstItemActive: Boolean,
       /**
@@ -97,7 +98,7 @@
                 } else if (lastExiting && section.active) {
                   removeActive();
                 }
-                this.$emit("sectionChange", { 
+                this.$emit("section-change", { 
                   section, 
                   sections, 
                   active: isIntersecting 

package/lib/components/systems/skeleton/UluShowSkeleton.vue

@@ -1,13 +1,14 @@
 <template>
   <slot v-if="!when"/>
-  <SkeletonTextInline class="skeleton" v-else/>
+  <UluSkeletonText v-else inline/>
 </template>
 
-<script>
-  export default {
-    name: "ShowSkeleton",
-    props: {
-      when: Boolean,
-    },
-  };
+<script setup>
+  import UluSkeletonText from "./UluSkeletonText.vue";
+  defineProps({
+    /**
+     * If true will show whatever is passed to slot, else skeleton text
+     */
+    when: Boolean,
+  });
 </script>