@ulu/frontend-vue 0.1.0-beta.11 → 0.1.0-beta.12

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

@@ -1,46 +1,89 @@
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import Fuse from 'fuse.js';
 
-const sortAlpha = items => {
-  const getTitle = i => (i.title || i.label || "");
-  return items.sort((a, b) => getTitle(a).localeCompare(getTitle(b)));
+/**
+ * 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);
+
+    return {
+      ...group,
+      children: [...allValues].sort().map(value => ({
+        uid: value,
+        label: getLabel(value),
+        selected: false
+      }))
+    };
+  });
 }
-const defaultSorts = {
-  az: { text: "A-Z", sort: sortAlpha },
-  za: { text: "Z-A", sort: items => sortAlpha(items).reverse() },
-};
+
 
 /**
  * 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.
+ * @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.
+ * @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.
  */
 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 = [],
+    initialFacets,
+    facetFields,
     initialSearchValue = '',
     initialSortType = 'az',
     noDefaultSorts = false,
     extraSortTypes = {},
     searchOptions: initialSearchOptions = {},
-    getItemFacet = (item, uid) => item[uid]
+    getItemFacet = defaultGetItemFacet,
+    getSortValue = item => (item.title || item.label || "")
   } = options;
 
-  // --- State ---
-  const facets = ref(createFacets(initialFacets));
-  const searchValue = ref(initialSearchValue);
-  const selectedSort = ref(initialSortType);
+  const sortAlpha = items => {
+    return items.sort((a, b) => {
+      const valueA = getSortValue(a);
+      const valueB = getSortValue(b);
+      return String(valueA).localeCompare(String(valueB));
+    });
+  }
+  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 => ({
+    return (initial || []).map(group => ({
       ...group,
       open: group.open || false,
       children: group.children.map(facet => ({
@@ -51,6 +94,23 @@ export function useFacets(allItems, options = {}) {
     }));
   }
 
+  const generatedFacets = computed(() => {
+    if (!facetFields || !allItems.value?.length) return null;
+    return generateInitialFacets(allItems.value, facetFields);
+  });
+
+  // --- State ---
+  const facets = ref(createFacets(initialFacets || generatedFacets.value));
+  const searchValue = ref(initialSearchValue);
+  const selectedSort = ref(initialSortType);
+
+  // If using facetFields, watch for changes in items and regenerate facets
+  if (facetFields && !initialFacets) {
+    watch(generatedFacets, (newGeneratedFacets) => {
+      facets.value = createFacets(newGeneratedFacets);
+    });
+  }
+
   // --- Computed ---
   const sortTypes = computed(() => ({
     ...(noDefaultSorts ? {} : defaultSorts),
@@ -91,10 +151,12 @@ export function useFacets(allItems, options = {}) {
       return allItems.value;
     }
     return allItems.value.filter(item => {
-      return selectedFacets.value.some(group => {
-        const cats = getItemFacet(item, group.uid);
-        if (cats && cats.length) {
-          return group.children.some(facet => cats.includes(facet.uid));
+      // An item must match every active facet group
+      return selectedFacets.value.every(group => {
+        const itemFacetValues = getItemFacet(item, group.uid);
+        if (itemFacetValues && itemFacetValues.length) {
+          // An item can match any of the selected facets within a group
+          return group.children.some(facet => itemFacetValues.includes(facet.uid));
         }
         return false;
       });
@@ -120,7 +182,21 @@ export function useFacets(allItems, options = {}) {
 
   // --- Methods ---
   function clearFilters() {
-    facets.value = createFacets(initialFacets);
+    facets.value.forEach(group => {
+      if (group.children) {
+        group.children.forEach(child => child.selected = false);
+      }
+    });
+  }
+
+  function handleFacetChange({ groupUid, facetUid, selected }) {
+    const group = facets.value.find(g => g.uid === groupUid);
+    if (group) {
+      const facet = group.children.find(f => f.uid === facetUid);
+      if (facet) {
+        facet.selected = selected;
+      }
+    }
   }
 
   return {
@@ -135,6 +211,7 @@ export function useFacets(allItems, options = {}) {
     selectedFacets,
 
     // Methods
-    clearFilters
+    clearFilters,
+    handleFacetChange
   };
-}
+}

package/lib/components/systems/index.js

@@ -1,3 +1,4 @@
+export { useFacets } from './facets/useFacets.js';
 export { default as UluFacetsFilters } from './facets/UluFacetsFilters.vue';
 export { default as UluFacetsResults } from './facets/UluFacetsResults.vue';
 export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';

package/package.json

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

package/types/components/systems/facets/_mock-data.d.ts

@@ -0,0 +1,18 @@
+export const initialMockFacets: {
+    name: string;
+    uid: string;
+    open: boolean;
+    children: {
+        uid: string;
+        label: string;
+    }[];
+}[];
+export const mockItems: {
+    id: number;
+    title: string;
+    description: string;
+    category: string[];
+    author: string[];
+    date: Date;
+}[];
+//# sourceMappingURL=_mock-data.d.ts.map

package/types/components/systems/facets/_mock-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_mock-data.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/_mock-data.js"],"names":[],"mappings":"AAAA;;;;;;;;IAwBE;AAEF;;;;;;;IAaE"}

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

@@ -0,0 +1,39 @@
+/**
+ * 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.
+ */
+export function useFacets(allItems: import("vue").Ref<Array<any>>, options?: {
+    initialFacets?: any[];
+    facetFields?: any[];
+    initialSearchValue?: string;
+    initialSortType?: string;
+    noDefaultSorts?: boolean;
+    extraSortTypes?: any;
+    searchOptions?: any;
+    getItemFacet?: Function;
+    getSortValue?: Function;
+}): {
+    facets: import("vue").Ref<any, any>;
+    searchValue: import("vue").Ref<string, string>;
+    selectedSort: import("vue").Ref<string, string>;
+    sortTypes: import("vue").ComputedRef<any>;
+    displayItems: import("vue").ComputedRef<any>;
+    selectedFacets: import("vue").ComputedRef<any[]>;
+    clearFilters: () => void;
+    handleFacetChange: ({ groupUid, facetUid, selected }: {
+        groupUid: any;
+        facetUid: any;
+        selected: any;
+    }) => void;
+};
+//# sourceMappingURL=useFacets.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AAsCA;;;;;;;;;;;;;GAaG;AACH,oCAZW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,KAAQ,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACZ,YAAY;CACzC;;;;;;;;;;;;;EAqKA"}

package/types/components/systems/index.d.ts

@@ -1,2 +1,2 @@
-export {};
+export { useFacets } from "./facets/useFacets.js";
 //# sourceMappingURL=index.d.ts.map