@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/list/src/filter/filter.worker.ts

@@ -0,0 +1,152 @@
+import { extractCommaSeparatedValues } from '@finsweet/attributes-utils';
+
+import type { FieldValue, FiltersCondition, FiltersGroup, FilterTaskData } from './types';
+import { areEqual, numericCompare, parseFilterValue } from './utils';
+
+type ValidFiltersGroup = FiltersGroup & {
+  validConditions: FiltersCondition[];
+};
+
+self.onmessage = (e: MessageEvent<FilterTaskData>) => {
+  const { filters, items } = e.data;
+
+  // Filter out invalid conditions (e.g. empty values) and groups (e.g. no valid conditions)
+  const validGroups = filters.groups.reduce<ValidFiltersGroup[]>((validGroups, group) => {
+    const validConditions = group.conditions.reduce<FiltersCondition[]>((validConditions, condition) => {
+      const { op, value, fieldKey } = condition;
+      if (!fieldKey) return validConditions;
+      if (!op) return validConditions;
+
+      if (op !== 'empty' && op !== 'not-empty') {
+        const valueIsEmpty = value === '' || (Array.isArray(value) && !value.length);
+        if (valueIsEmpty) return validConditions;
+      }
+
+      validConditions.push(condition);
+
+      return validConditions;
+    }, []);
+
+    if (validConditions.length) {
+      validGroups.push({ ...group, validConditions });
+    }
+
+    return validGroups;
+  }, []);
+
+  // Filter the items based on the valid groups and conditions
+  const filteredItems = items.filter((item) => {
+    const groupsPredicate = (groupData: ValidFiltersGroup) => {
+      const conditionsPredicate = (condition: FiltersCondition) => {
+        const fieldsPredicate = (fieldKey: string) => {
+          const { op, filterMatch, fieldMatch } = condition;
+
+          const fieldData = item.fields[fieldKey];
+          if (!fieldData) return false;
+
+          const fieldValue = fieldData.value;
+          const filterValue = condition.value;
+
+          if (op === 'empty') {
+            return Array.isArray(fieldValue) ? !fieldValue.length : !fieldValue;
+          }
+
+          if (op === 'not-empty') {
+            return Array.isArray(fieldValue) ? !!fieldValue.length : !!fieldValue;
+          }
+
+          const isNegative = op?.startsWith('not-');
+
+          const compare = (fieldValue: FieldValue, filterValue: string, parsedFilterValue: FieldValue) => {
+            let match = false;
+
+            if (op === 'equal' || op === 'not-equal') {
+              match = areEqual(fieldValue, parsedFilterValue, condition.fuzzyThreshold);
+            } else if (op === 'start' || op === 'not-start') {
+              match = fieldValue.toString().toLowerCase().startsWith(filterValue.toLowerCase());
+            } else if (op === 'end' || op === 'not-end') {
+              match = fieldValue.toString().toLowerCase().endsWith(filterValue.toLowerCase());
+            } else if (op === 'contain' || op === 'not-contain') {
+              match = fieldValue.toString().toLowerCase().includes(filterValue.toLowerCase());
+            } else if (op === 'greater' || op === 'greater-equal' || op === 'less' || op === 'less-equal') {
+              match = numericCompare(fieldValue, parsedFilterValue, op);
+            }
+
+            if (match && (op === 'equal' || op === 'contain')) {
+              item.matchedFields[fieldKey] ||= [];
+              item.matchedFields[fieldKey].push({ fieldValue, filterValue });
+            }
+
+            return isNegative ? !match : match;
+          };
+
+          const filterValueIsArray = Array.isArray(filterValue);
+          const fieldValueIsArray = Array.isArray(fieldValue);
+
+          const emptyFieldValue = fieldValue === '' || (fieldValueIsArray && !fieldValue.length);
+          if (emptyFieldValue) return isNegative;
+
+          // Both are arrays
+          if (filterValueIsArray && fieldValueIsArray) {
+            const predicate = (filterValue: string) => {
+              const parsedFilterValue = parseFilterValue(filterValue, condition.type, fieldData.type);
+              if (parsedFilterValue === null) return false;
+
+              return fieldMatch === 'and'
+                ? fieldValue.every((fieldValue) => compare(fieldValue, filterValue, parsedFilterValue))
+                : fieldValue.some((fieldValue) => compare(fieldValue, filterValue, parsedFilterValue));
+            };
+
+            return filterMatch === 'and' ? filterValue.every(predicate) : filterValue.some(predicate);
+          }
+
+          // Filter is array, field is single
+          if (filterValueIsArray && !fieldValueIsArray) {
+            const predicate = (filterValue: string) => {
+              const parsedFilterValue = parseFilterValue(filterValue, condition.type, fieldData.type);
+              if (parsedFilterValue === null) return false;
+
+              return compare(fieldValue, filterValue, parsedFilterValue);
+            };
+
+            return filterMatch === 'and' ? filterValue.every(predicate) : filterValue.some(predicate);
+          }
+
+          // Filter is single, field is array
+          if (!filterValueIsArray && fieldValueIsArray) {
+            const parsedFilterValue = parseFilterValue(filterValue, condition.type, fieldData.type);
+            if (parsedFilterValue === null) return false;
+
+            return fieldMatch === 'and'
+              ? fieldValue.every((fieldValue) => compare(fieldValue, filterValue, parsedFilterValue))
+              : fieldValue.some((fieldValue) => compare(fieldValue, filterValue, parsedFilterValue));
+          }
+
+          // Filter is single, field is single
+          if (!filterValueIsArray && !fieldValueIsArray) {
+            const parsedFilterValue = parseFilterValue(filterValue, condition.type, fieldData.type);
+            if (parsedFilterValue === null) return false;
+
+            return compare(fieldValue, filterValue, parsedFilterValue);
+          }
+
+          // If we reach this point, the filter value is not valid
+          return false;
+        };
+
+        const fieldKeys =
+          condition.fieldKey === '*' ? Object.keys(item.fields) : extractCommaSeparatedValues(condition.fieldKey);
+
+        return condition.fieldMatch === 'and' ? fieldKeys.every(fieldsPredicate) : fieldKeys.some(fieldsPredicate);
+      };
+
+      return groupData.conditionsMatch === 'or'
+        ? groupData.validConditions.some(conditionsPredicate)
+        : groupData.validConditions.every(conditionsPredicate);
+    };
+
+    return filters.groupsMatch === 'or' ? validGroups.some(groupsPredicate) : validGroups.every(groupsPredicate);
+  });
+
+  self.postMessage(filteredItems);
+};

package/attributes-master/packages/list/src/filter/index.ts

@@ -0,0 +1,94 @@
+import { watch } from '@vue/reactivity';
+import debounce from 'just-debounce';
+
+import type { List } from '../components/List';
+import { getAttribute, queryElement } from '../utils/selectors';
+import { initDynamicFilters } from './dynamic';
+import { handleFilterElements } from './elements';
+import { filterItems } from './filter';
+import { initStandardFilters } from './standard';
+import { getListFiltersQuery, setListFiltersQuery } from './standard/query';
+import { initTags } from './tags';
+
+/**
+ * Inits loading functionality for the list.
+ * @param list
+ * @param forms
+ */
+export const initListFiltering = (list: List, forms: HTMLFormElement[]) => {
+  const filteringClass = getAttribute(list.listElement, 'filteringclass');
+
+  // Init hooks
+  const filterHookCleanup = list.addHook('filter', async (items) => {
+    const filteredItems = await filterItems(list.filters.value, items, list.highlight);
+    return filteredItems;
+  });
+
+  const beforeRenderHookCleanup = list.addHook('beforeRender', async (items) => {
+    if (list.triggeredHook === 'filter') {
+      list.wrapperElement.classList.add(filteringClass);
+
+      const animations = list.wrapperElement.getAnimations({ subtree: true });
+
+      await Promise.all(animations.map((a) => a.finished));
+    }
+
+    return items;
+  });
+
+  const afterRenderHookCleanup = list.addHook('afterRender', (items) => {
+    list.wrapperElement.classList.remove(filteringClass);
+
+    const hasItems = !!items.length;
+
+    if (list.listElement) {
+      list.listElement.style.display = hasItems ? '' : 'none';
+    }
+
+    if (list.emptyElement.value) {
+      list.emptyElement.value.style.display = hasItems ? 'none' : '';
+    }
+
+    return items;
+  });
+
+  // Handle elements
+  const elementsCleanup = handleFilterElements(list);
+
+  // Init filters
+  const isDynamic = !!queryElement('condition-group', { scope: forms[0] });
+  const filteringCleanup = isDynamic ? initDynamicFilters(list, forms[0]) : initStandardFilters(list, forms);
+
+  // Init Tags
+  const tagsCleanup = initTags(list, isDynamic);
+
+  // Trigger the hook when the filters change
+  const filtersCleanup = watch(
+    list.filters,
+    debounce(() => {
+      list.triggerHook('filter', {
+        scrollToAnchor: list.hasInteracted.value,
+        resetCurrentPage: list.hasInteracted.value,
+      });
+
+      // Handle query params
+      if (list.showQuery) {
+        setListFiltersQuery(list);
+      }
+    }, 0),
+    { deep: true }
+  );
+
+  // Read query params
+  getListFiltersQuery(list);
+
+  return () => {
+    filterHookCleanup();
+    beforeRenderHookCleanup();
+    afterRenderHookCleanup();
+    elementsCleanup();
+    tagsCleanup?.();
+    filtersCleanup();
+    filteringCleanup?.();
+  };
+};

package/attributes-master/packages/list/src/filter/standard/conditions.ts

@@ -0,0 +1,123 @@
+import {
+  type FormField,
+  type FormFieldType,
+  getFormFieldValue,
+  isFormField,
+  setFormFieldValue,
+} from '@finsweet/attributes-utils';
+
+import type { List } from '../../components/List';
+import { CUSTOM_VALUE_ATTRIBUTE, getAttribute, getSettingSelector, hasAttributeValue } from '../../utils/selectors';
+import type { FiltersCondition, FiltersGroup } from '../types';
+
+/**
+ * @returns The value of a given form field.
+ * @param formField A {@link FormField} element.
+ * @param fieldKey The field name.
+ * @param interacted Indicates if the form field has been interacted with.
+ */
+export const getConditionData = (formField: FormField, fieldKey: string, interacted = false): FiltersCondition => {
+  const type = formField.type as FormFieldType;
+
+  const op = getConditionOperator(formField);
+  const id = `${fieldKey}_${op}`;
+
+  const customTagField = getAttribute(formField, 'tagfield');
+  const filterMatch = getAttribute(formField, 'filtermatch', { filterInvalid: true });
+  const fieldMatch = getAttribute(formField, 'fieldmatch', { filterInvalid: true });
+  const fuzzyThreshold = getAttribute(formField, 'fuzzy');
+  const showTag = !hasAttributeValue(formField, 'showtag', 'false');
+
+  const value = getFormFieldValue(formField, CUSTOM_VALUE_ATTRIBUTE);
+
+  return {
+    id,
+    fieldKey,
+    type,
+    op,
+    value,
+    filterMatch,
+    fieldMatch,
+    fuzzyThreshold,
+    interacted,
+    customTagField,
+    showTag,
+  };
+};
+
+/**
+ * Sets the form fields' values based on the provided conditions.
+ * @param list
+ * @param form
+ * @param conditions
+ */
+export const setConditionsData = (list: List, form: HTMLFormElement, conditions: FiltersCondition[]) => {
+  list.settingFilters = true;
+
+  for (const { fieldKey, value, op, type } of conditions) {
+    const tagSelector = `:is(input[type="${type}"], select, textarea)`;
+    const fieldSelector = getSettingSelector('field', fieldKey);
+    const operatorSelector = `:is(${getSettingSelector('operator', op)}, :not(${getSettingSelector('operator')}))`;
+    const selector = [tagSelector, fieldSelector, operatorSelector].join('');
+
+    const formField = form.querySelector(selector);
+    if (!isFormField(formField)) continue;
+
+    setFormFieldValue(formField, value, CUSTOM_VALUE_ATTRIBUTE);
+  }
+
+  list.settingFilters = false;
+};
+
+/**
+ * Retrieves the condition operator based on the form field type.
+ *
+ * @param formField The form field to retrieve the operator for.
+ * @returns The condition operator as a string, with the proper fallback value.
+ */
+export const getConditionOperator = (formField: FormField) => {
+  const type = formField.type as FormFieldType;
+
+  const stringInputTypes: FormFieldType[] = ['text', 'password', 'email', 'tel', 'url', 'search', 'color'];
+  const opDefault = stringInputTypes.includes(type) ? 'contain' : 'equal';
+
+  const op = getAttribute(formField, 'operator', { filterInvalid: true }) || opDefault;
+  return op;
+};
+
+/**
+ * @returns An object with the form fields as keys and their values as values.
+ * @param list A {@link List} instance.
+ * @param form A {@link HTMLFormElement} element.
+ * @param groupIndex The index of the group.
+ * @param interacted Indicates if the form has been interacted with.
+ */
+export const getStandardFiltersGroup = (list: List, form: HTMLFormElement, groupIndex: number, interacted = false) => {
+  list.readingFilters = true;
+
+  const group: FiltersGroup = {
+    id: groupIndex.toString(),
+    conditions: [],
+    conditionsMatch: getAttribute(form, 'conditionsmatch', { filterInvalid: true }),
+  };
+
+  for (const formField of form.elements) {
+    if (!isFormField(formField)) continue;
+
+    const { type } = formField;
+    if (type === 'submit') continue;
+
+    const fieldKey = getAttribute(formField, 'field')?.trim();
+    if (!fieldKey) continue;
+
+    const data = getConditionData(formField, fieldKey, interacted);
+
+    if (!group.conditions.some((c) => c.fieldKey === fieldKey && c.op === data.op)) {
+      group.conditions.push(data);
+    }
+  }
+
+  list.readingFilters = false;
+
+  return group;
+};

package/attributes-master/packages/list/src/filter/standard/facets.ts

@@ -0,0 +1,253 @@
+import { isElement, isHTMLInputElement, isHTMLSelectElement } from '@finsweet/attributes-utils';
+import { toRaw, watch } from '@vue/reactivity';
+import debounce from 'just-debounce';
+
+import type { ListItem } from '../../components';
+import type { List } from '../../components/List';
+import { getAttribute, getElementSelector, getSettingSelector, queryElement } from '../../utils/selectors';
+import { filterItems } from '../filter';
+import type { FilterOperator, Filters } from '../types';
+import { getConditionOperator } from './conditions';
+
+/**
+ * Initializes a specific filter's results count.
+ * @param list
+ * @param form
+ * @param groupIndex
+ */
+export const initFacets = (list: List, form: HTMLFormElement, groupIndex: number) => {
+  const cleanups = new Map<Node, (() => void) | undefined>();
+
+  const init = (element: Element) => {
+    const isInput = isHTMLInputElement(element);
+    const isSelect = isHTMLSelectElement(element);
+    if (!isInput && !isSelect) return;
+
+    const handler = isInput
+      ? createInputFacetsHandler(list, element, groupIndex)
+      : createSelectOptionsFacetsHandler(list, element, groupIndex);
+
+    if (!handler) return;
+
+    const itemsCleanup = watch(list.items, (items) => handler({ items }));
+    const filtersCleanup = watch(list.filters, (filters) => handler({ filters }), { deep: true, immediate: true });
+
+    return () => {
+      itemsCleanup();
+      filtersCleanup();
+    };
+  };
+
+  // Init existing elements
+  for (const node of [...form.elements]) {
+    const cleanup = init(node);
+    cleanups.set(node, cleanup);
+  }
+
+  // Observe new or removed elements
+  const observer = new MutationObserver((mutations) => {
+    for (const { addedNodes, removedNodes } of mutations) {
+      for (const node of addedNodes) {
+        if (!isElement(node)) continue;
+
+        const elements = [node, ...node.querySelectorAll('input, select')];
+
+        for (const element of elements) {
+          if (cleanups.has(element)) continue;
+
+          const cleanup = init(element);
+          cleanups.set(element, cleanup);
+        }
+      }
+
+      for (const node of removedNodes) {
+        if (!isElement(node)) continue;
+
+        const elements = [node, ...node.querySelectorAll('input, select')];
+
+        for (const element of elements) {
+          const cleanup = cleanups.get(element);
+          cleanup?.();
+          cleanups.delete(element);
+        }
+      }
+    }
+  });
+
+  observer.observe(form, { childList: true, subtree: true });
+
+  return () => {
+    observer.disconnect();
+
+    for (const [, cleanup] of cleanups) {
+      cleanup?.();
+    }
+  };
+};
+
+/**
+ * Creates a handler for input facets.
+ * @param list
+ * @param formField
+ * @param groupIndex
+ */
+const createInputFacetsHandler = (list: List, formField: HTMLInputElement, groupIndex: number) => {
+  const fieldKey = getAttribute(formField, 'field')?.trim();
+  if (!fieldKey) return;
+
+  const facetCountElement = queryElement('facet-count', { scope: formField.parentElement });
+  const hideOnEmptyETarget = formField.closest<HTMLElement>(getSettingSelector('emptyfacet', 'hide'));
+  const addClassOnEmptyTarget = formField.closest<HTMLElement>(getSettingSelector('emptyfacet', 'add-class'));
+
+  if (!facetCountElement && !hideOnEmptyETarget && !addClassOnEmptyTarget) return;
+
+  const op = getConditionOperator(formField);
+  const value = getAttribute(formField, 'value') || formField.value || '';
+  const emptyClassName = getAttribute(addClassOnEmptyTarget, 'emptyfacetclass');
+
+  let filterPromise: Promise<ListItem[]> | undefined;
+
+  const handler = debounce(
+    async ({ filters = list.filters.value, items = list.items.value }: { filters?: Filters; items?: ListItem[] }) => {
+      await filterPromise;
+
+      filterPromise = triggerFacetFilter({
+        filters,
+        items,
+        fieldKey,
+        op,
+        groupIndex,
+        value,
+      });
+
+      const filteredItems = await filterPromise;
+      if (!filteredItems) return;
+
+      const hasResults = filteredItems.length > 0;
+
+      if (facetCountElement) {
+        facetCountElement.textContent = `${filteredItems.length}`;
+      }
+
+      if (hideOnEmptyETarget) {
+        hideOnEmptyETarget.style.display = hasResults ? '' : 'none';
+      }
+
+      if (addClassOnEmptyTarget) {
+        addClassOnEmptyTarget.classList.toggle(emptyClassName, !hasResults);
+      }
+    },
+    0
+  );
+
+  return handler;
+};
+
+/**
+ * Creates a handler for select options facets.
+ * @param list
+ * @param formField
+ * @param groupIndex
+ */
+const createSelectOptionsFacetsHandler = (list: List, formField: HTMLSelectElement, groupIndex: number) => {
+  const fieldKey = getAttribute(formField, 'field')?.trim();
+  if (!fieldKey) return;
+
+  const op = getConditionOperator(formField);
+  const displayFacetCounts = formField.matches(getElementSelector('facet-count'));
+  const hideOnEmpty = getAttribute(formField, 'emptyfacet', { filterInvalid: true }) === 'hide';
+
+  const options: HTMLOptionElement[] = [...formField.options];
+  const optionLabels = options.reduce(
+    (acc, option) => acc.set(option, option.value),
+    new Map<HTMLOptionElement, string>()
+  );
+
+  if (!options.length) return;
+
+  let filterPromise: Promise<void[]> | undefined;
+
+  const handler = debounce(
+    async ({ filters = list.filters.value, items = list.items.value }: { filters?: Filters; items?: ListItem[] }) => {
+      await filterPromise;
+
+      filterPromise = Promise.all(
+        [...options].map(async (option) => {
+          const { value } = option;
+          if (!value) return;
+
+          const filteredItems = await triggerFacetFilter({
+            filters,
+            items,
+            fieldKey,
+            op,
+            groupIndex,
+            value,
+          });
+
+          if (!filteredItems) return;
+
+          const disabled = !filteredItems.length;
+
+          if (displayFacetCounts) {
+            const label = optionLabels.get(option) || '';
+            option.label = `${label} (${filteredItems.length})`;
+          }
+
+          if (hideOnEmpty && !option.selected) {
+            option.style.display = disabled ? 'none' : '';
+            option.disabled = disabled;
+          }
+        })
+      );
+    },
+    0
+  );
+
+  return handler;
+};
+
+/**
+ * Triggers a facet search.
+ * @param params
+ * @returns The promise of the filtered items.
+ */
+const triggerFacetFilter = ({
+  filters,
+  items,
+  fieldKey,
+  op,
+  groupIndex,
+  value,
+}: {
+  filters: Filters;
+  items: ListItem[];
+  fieldKey: string;
+  op: FilterOperator;
+  groupIndex: number;
+  value: string;
+}) => {
+  const filtersClone = structuredClone(toRaw(filters)) as Filters;
+
+  const conditionsGroup = filtersClone.groups[groupIndex];
+  if (!conditionsGroup) return;
+
+  const { conditions = [] } = conditionsGroup;
+  const conditionIndex = conditions.findIndex((c) => c.fieldKey === fieldKey && c.op === op);
+
+  const condition = conditions[conditionIndex];
+  if (!condition) return;
+
+  // Inject the condition value
+  if (Array.isArray(condition.value)) {
+    if (condition.filterMatch === 'and') {
+      condition.value.push(value);
+    } else {
+      condition.value = [value];
+    }
+  } else {
+    condition.value = value;
+  }
+
+  return filterItems(filtersClone, items);
+};