@ulu/frontend-vue 0.1.2-beta.7 → 0.1.2-beta.9

package/dist/types/components/systems/facets/useFacets.d.ts

@@ -9,9 +9,11 @@
  * @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'.
+ * @param {Object} [options.urlSync] - Optional configuration to sync state with URL.
+ * @param {import('vue-router').Router} [options.urlSync.router] - The Vue Router instance.
+ * @param {import('vue-router').RouteLocationNormalizedLoaded} [options.urlSync.route] - The current route instance.
  */
 export function useFacets(allItems: import("vue").Ref<Array<Object>>, options?: {
     initialFacets?: any[] | undefined;
@@ -21,9 +23,12 @@ export function useFacets(allItems: import("vue").Ref<Array<Object>>, options?:
     noDefaultSorts?: boolean | undefined;
     extraSortTypes?: Object | undefined;
     searchOptions?: Object | undefined;
-    getItemFacet?: Function | undefined;
     getSortValue?: Function | undefined;
     countMode?: string | undefined;
+    urlSync?: {
+        router?: import("vue-router").Router | undefined;
+        route?: import("vue-router").RouteLocationNormalizedLoadedGeneric | undefined;
+    } | undefined;
 }): {
     facets: import("vue").Ref<never[], never[]>;
     searchValue: import("vue").Ref<string, string>;

package/dist/types/components/systems/facets/useFacets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AA+GA;;;;;;;;;;;;;;GAcG;AACH,oCAbW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACZ,YAAY;IACd,SAAS;CACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4QA"}
+{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AA+GA;;;;;;;;;;;;;;;;GAgBG;AACH,oCAfW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACd,SAAS;IACT,OAAO;;;;CAGlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkWA"}

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

@@ -1,4 +1,4 @@
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, nextTick, watchPostEffect } from 'vue';
 import Fuse from 'fuse.js';
 
 /**
@@ -120,17 +120,13 @@ function generateInitialFacets(allItems, facetFields) {
  * @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'.
+ * @param {Object} [options.urlSync] - Optional configuration to sync state with URL.
+ * @param {import('vue-router').Router} [options.urlSync.router] - The Vue Router instance.
+ * @param {import('vue-router').RouteLocationNormalizedLoaded} [options.urlSync.route] - The current route instance.
  */
 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,
@@ -139,9 +135,9 @@ export function useFacets(allItems, options = {}) {
     noDefaultSorts = false,
     extraSortTypes = {},
     searchOptions: initialSearchOptions = {},
-    getItemFacet = defaultGetItemFacet,
     getSortValue = item => (item.title || item.label || ""),
-    countMode = 'none' // 'none', 'simple', 'intuitive'
+    countMode = 'none', // 'none', 'simple', 'intuitive'
+    urlSync: urlSyncOptions
   } = options;
 
   const sortAlpha = items => {
@@ -319,14 +315,26 @@ export function useFacets(allItems, options = {}) {
     if (currentSelected === prevSelected && currentSearchedItems === prevSearchedItems) return;
 
     if (countMode === 'simple') {
+      const index = facetIndex.value;
+      if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
+        return; // Index not ready
+      }
+      const allItemsSet = new Set(searchedItems.value.map((_, i) => i));
+
       facets.value.forEach(group => {
         const otherSelected = currentSelected.filter(g => g.uid !== group.uid);
-        const itemsToCount = getFilteredItems(currentSearchedItems, otherSelected);
+        
+        // Get the set of indices for items filtered by OTHER groups
+        const filteredByOthersSet = getFilteredSetFromIndex(otherSelected, index, allItemsSet);
+
         group.children.forEach(child => {
-          child.count = itemsToCount.filter(item => {
-            const itemValues = getItemFacet(item, group.uid);
-            return itemValues.includes(child.uid);
-          }).length;
+          const key = `${group.uid}:${child.uid}`;
+          const childSet = index.get(key) || new Set();
+          
+          // The count is the size of the intersection between items that have this child facet
+          // and items that match all the *other* selected groups.
+          const intersection = intersectSets([filteredByOthersSet, childSet]);
+          child.count = intersection.size;
         });
       });
     } else if (countMode === 'intuitive') {
@@ -344,7 +352,6 @@ export function useFacets(allItems, options = {}) {
           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]);
@@ -381,6 +388,87 @@ export function useFacets(allItems, options = {}) {
     }
   }, { deep: true, immediate: true });
 
+  // --- URL Sync Logic ---
+  if (urlSyncOptions?.router && urlSyncOptions?.route) {
+    const { router, route } = urlSyncOptions;
+
+    const areFacetsReady = () => facets.value && facets.value.length > 0;
+
+    const updateUrlFromState = () => {
+      if (!areFacetsReady()) return;
+  
+      const query = { ...route.query };
+  
+      // Clean up params that we manage, preserving others
+      delete query.sort;
+      delete query.search;
+      facets.value.forEach(group => delete query[group.uid]);
+  
+      // Add sort if it's not the default
+      if (selectedSort.value && selectedSort.value !== initialSortType) {
+        query.sort = selectedSort.value;
+      }
+  
+      // Add search if present
+      if (searchValue.value) {
+        query.search = searchValue.value;
+      }
+  
+      // Add selected facets
+      selectedFacets.value.forEach(group => {
+        if (group.children.length > 0) {
+          query[group.uid] = group.children.map(c => c.uid).join(',');
+        }
+      });
+      
+      if (JSON.stringify(query) !== JSON.stringify(route.query)) {
+        router.push({ query });
+      }
+    };
+
+    const updateStateFromUrl = () => {
+      const query = route.query;
+  
+      if (query.sort) {
+        selectedSort.value = query.sort;
+      }
+      if (query.search) {
+        searchValue.value = query.search;
+      }
+  
+      const selectionsFromUrl = new Map();
+      facets.value.forEach(group => {
+        const selectedUids = query[group.uid] ? query[group.uid].split(',') : [];
+        selectionsFromUrl.set(group.uid, new Set(selectedUids));
+      });
+  
+      facets.value.forEach(group => {
+        const shouldBeSelected = selectionsFromUrl.get(group.uid) || new Set();
+        group.children.forEach(child => {
+          const isSelected = child.selected;
+          const shouldBe = shouldBeSelected.has(child.uid);
+          if (isSelected !== shouldBe) {
+            handleFacetChange({ groupUid: group.uid, facetUid: child.uid, selected: shouldBe });
+          }
+        });
+      });
+    };
+
+    // Initial sync from URL
+    const stopInitWatcher = watchPostEffect(() => {
+      if (facets.value && facets.value.length > 0) {
+        updateStateFromUrl();
+        stopInitWatcher();
+      }
+    });
+
+    // Sync state changes TO the URL
+    watch([selectedSort, searchValue, selectedFacets], updateUrlFromState, { deep: true });
+
+    // Sync URL changes TO the state
+    watch(() => route.query, updateStateFromUrl);
+  }
+
   return {
     facets,
     searchValue,
@@ -391,4 +479,4 @@ export function useFacets(allItems, options = {}) {
     clearFilters,
     handleFacetChange
   };
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.2-beta.7",
+  "version": "0.1.2-beta.9",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [