@hortonstudio/main 1.2.11 → 1.2.13

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

@@ -1,152 +0,0 @@
-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

@@ -1,94 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,253 +0,0 @@
-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);
-};