@hortonstudio/main 1.2.4 → 1.2.6

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

@@ -0,0 +1,176 @@
+import { addListener, isFormField, isNumber } from '@finsweet/attributes-utils';
+import { watch } from '@vue/reactivity';
+
+import type { List } from '../../components/List';
+import { getAttribute, getElementSelector } from '../../utils/selectors';
+import { handleFiltersForm } from '../elements';
+import { getConditionData, getStandardFiltersGroup, setConditionsData } from './conditions';
+import { initFacets } from './facets';
+
+/**
+ * Initializes standard filters for a list.
+ * @param list
+ * @param form
+ * @returns A cleanup function.
+ */
+export const initStandardFilters = (list: List, forms: HTMLFormElement[]) => {
+  const cleanups = forms.map((form, groupIndex) => initStandardFiltersForm(list, form, groupIndex));
+
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+};
+
+/**
+ * Initializes standard filters for a list.
+ * @param list
+ * @param form
+ * @param groupIndex
+ * @returns A cleanup function.
+ */
+const initStandardFiltersForm = (list: List, form: HTMLFormElement, groupIndex: number) => {
+  const debounces = new Map<string, number>();
+
+  // Handle inputs
+  const formElementCleanup = handleFiltersForm(form);
+  const formFieldsCleanup = handleFormFields(list, form, groupIndex, debounces);
+
+  // Handle clear buttons
+  const clickCleanup = handleClearButtons(list, groupIndex, debounces);
+
+  // Get initial filters
+  const groupsMatch = getAttribute(form, 'groupsmatch', { filterInvalid: true });
+
+  list.filters.value.groupsMatch ||= groupsMatch;
+  list.filters.value.groups[groupIndex] = getStandardFiltersGroup(list, form, groupIndex);
+
+  // 2 way binding
+  const twoWayBindingCleanup = watch(
+    () => list.filters.value.groups[groupIndex]?.conditions,
+    (conditions) => {
+      if (list.readingFilters) return;
+
+      setConditionsData(list, form, conditions);
+    },
+    { deep: true }
+  );
+
+  const facetCountsCleanup = initFacets(list, form, groupIndex);
+
+  return () => {
+    formElementCleanup();
+    formFieldsCleanup();
+    clickCleanup();
+    twoWayBindingCleanup();
+    facetCountsCleanup();
+  };
+};
+
+/**
+ * Handles the form inputs.
+ * @param list
+ * @param form
+ * @param debounces
+ * @returns A cleanup function.
+ */
+const handleFormFields = (list: List, form: HTMLFormElement, groupIndex: number, debounces: Map<string, number>) => {
+  const event = getAttribute(form, 'filteron', { filterInvalid: true });
+
+  // submit
+  if (event === 'submit') {
+    return addListener(form, 'submit', () => {
+      list.readingFilters = true;
+
+      list.filters.value.groups[groupIndex] = getStandardFiltersGroup(list, form, groupIndex, true);
+
+      list.readingFilters = false;
+    });
+  }
+
+  // input / change
+  return addListener(form, event, (e) => {
+    if (list.settingFilters) return;
+
+    const { target } = e;
+
+    if (!isFormField(target)) return;
+
+    const fieldKey = getAttribute(target, 'field')?.trim();
+    if (!fieldKey) return;
+
+    const condition = getConditionData(target, fieldKey, true);
+
+    const update = () => {
+      const conditions = list.filters.value.groups[groupIndex]?.conditions || [];
+
+      const conditionIndex = conditions.findIndex((c) => c.fieldKey === fieldKey && c.op === condition.op);
+
+      list.readingFilters = true;
+
+      if (conditionIndex >= 0) {
+        conditions[conditionIndex] = condition;
+      } else {
+        conditions.push(condition);
+      }
+
+      list.readingFilters = false;
+    };
+
+    const debounceKey = `${fieldKey}_${condition.op}`;
+    const debounce = debounces.get(debounceKey);
+
+    if (debounce) {
+      clearTimeout(debounce);
+    }
+
+    // With debouncing
+    const timeout = getAttribute(target, 'debounce');
+
+    if (isNumber(timeout) && !isNaN(timeout)) {
+      const timeoutId = window.setTimeout(update, timeout);
+
+      debounces.set(debounceKey, timeoutId);
+      return;
+    }
+
+    // Without debouncing
+    update();
+  });
+};
+
+/**
+ * Handles the clear buttons.
+ * @param list
+ * @param debounces
+ * @returns A cleanup function.
+ */
+const handleClearButtons = (list: List, groupIndex: number, debounces: Map<string, number>) => {
+  return addListener(window, 'click', (e) => {
+    const { target } = e;
+
+    if (!(target instanceof Element)) return;
+
+    const { instance, filters } = list;
+
+    const clearElementSelector = getElementSelector('clear', { instance });
+    const clearElement = target?.closest(clearElementSelector);
+    if (!clearElement) return;
+
+    const fieldKey = getAttribute(clearElement, 'field')?.trim();
+
+    const conditions = filters.value.groups[groupIndex]?.conditions || [];
+    const conditionsToClear = fieldKey ? conditions.filter((condition) => condition.fieldKey === fieldKey) : conditions;
+
+    for (const condition of conditionsToClear) {
+      debounces.delete(`${condition.fieldKey}_${condition.op}`);
+
+      if (Array.isArray(condition.value)) {
+        condition.value = [];
+      } else {
+        condition.value = '';
+      }
+    }
+  });
+};

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

@@ -0,0 +1,111 @@
+import { isNotEmpty, isString } from '@finsweet/attributes-utils';
+
+import type { List } from '../../components';
+import { SETTINGS } from '../../utils/constants';
+import { listInstancesStore } from '../../utils/store';
+import type { FiltersCondition } from '../types';
+
+/**
+ * @param list
+ * @returns A regex to match the filters query string.
+ */
+const getListFiltersQueryRegex = (list: List) => {
+  const allFieldKeys = Object.keys(list.allFieldsData.value);
+  const allFilterKeys = list.filters.value.groups.flatMap((group) =>
+    group.conditions.flatMap((condition) => condition.fieldKey)
+  );
+
+  const allKeys = new Set([...allFieldKeys, ...allFilterKeys]);
+
+  // Escape special regex characters in the keys
+  const escapedKeys = [...allKeys].map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'));
+
+  const regex = new RegExp(`^(?:([0-9]+)_)?(${escapedKeys.join('|')})(?:_(${SETTINGS.operator.values.join('|')}))?$`);
+  return regex;
+};
+
+/**
+ * Gets the filters query string for the list.
+ * @param list
+ */
+export const getListFiltersQuery = async (list: List) => {
+  const usePrefix = listInstancesStore.size > 1;
+  const existingParams = await list.getAllSearchParams(usePrefix);
+
+  const regex = getListFiltersQueryRegex(list);
+  const params = existingParams.filter(([key]) => key.match(regex));
+
+  for (const [key, value] of params) {
+    const match = key.match(regex);
+    if (!match) continue;
+
+    const groupIndex = match[1] ? parseInt(match[1]) : 0;
+    const fieldKey = match[2];
+    const op = match[3] ? match[3] : undefined;
+
+    const condition = list.filters.value.groups[groupIndex]?.conditions.find(
+      (c) => c.fieldKey === fieldKey && c.op === op
+    );
+
+    if (!condition) continue;
+
+    let valueToSet: FiltersCondition['value'] = value;
+
+    try {
+      const parsedValue = JSON.parse(value);
+
+      if (Array.isArray(parsedValue) && parsedValue.every(isString)) {
+        valueToSet = parsedValue;
+      } else if (isString(parsedValue)) {
+        valueToSet = parsedValue;
+      }
+    } catch {
+      // Skip
+    }
+
+    condition.value = valueToSet;
+    condition.interacted = true;
+  }
+};
+
+/**
+ * Sets the filters query string for the list.
+ * @param list
+ */
+export const setListFiltersQuery = async (list: List) => {
+  const usePrefix = listInstancesStore.size > 1;
+  const existingParams = await list.getAllSearchParams(usePrefix);
+
+  const regex = getListFiltersQueryRegex(list);
+
+  for (const [key] of existingParams) {
+    if (!key.match(regex)) continue;
+
+    await list.setSearchParam(key, null, usePrefix);
+  }
+
+  const multipleGroups = list.filters.value.groups.length > 1;
+
+  list.filters.value.groups.forEach((group, index) => {
+    group.conditions.forEach(({ fieldKey, op, value, interacted }) => {
+      const key = [multipleGroups ? index : undefined, fieldKey, op].filter(isNotEmpty).join('_');
+      const isArray = Array.isArray(value);
+
+      if (!interacted || !value || (isArray && !value.length)) return;
+
+      let valueToSet = null;
+
+      if (isArray) {
+        try {
+          valueToSet = JSON.stringify(value);
+        } catch {
+          //
+        }
+      } else {
+        valueToSet = value;
+      }
+
+      list.setSearchParam(key, valueToSet, usePrefix);
+    });
+  });
+};

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

@@ -0,0 +1,314 @@
+import { addListener, cloneNode, isDate, isNotEmpty, isNumber } from '@finsweet/attributes-utils';
+import { watch } from '@vue/reactivity';
+
+import type { List } from '../components/List';
+import { SETTINGS } from '../utils/constants';
+import { getAttribute, getElementSelector, queryElement } from '../utils/selectors';
+import type { FilterOperator, Filters, FiltersCondition } from './types';
+import { parseFilterValue } from './utils';
+
+type TagData = {
+  element: HTMLElement;
+  remove: () => void;
+  cleanup: () => void;
+};
+
+type TagGroupData = {
+  element: HTMLElement;
+  renderedTags: Map<string, TagData>;
+  remove: () => void;
+  cleanup: () => void;
+};
+
+const OPERATOR_SYMBOLS: Record<FilterOperator, string> = {
+  empty: '∅',
+  'not-empty': '!∅',
+  contain: '⊃',
+  'not-contain': '⊅',
+  start: '⋀',
+  'not-start': '⋀̸',
+  end: '⋁',
+  'not-end': '⋁̸',
+  equal: '=',
+  'not-equal': '≠',
+  less: '<',
+  'less-equal': '≤',
+  greater: '>',
+  'greater-equal': '≥',
+};
+
+/**
+ * Inits the tags for the list.
+ * @param list
+ * @param isDynamic Defines if the filters are dynamic or not
+ * @returns A cleanup function
+ */
+export const initTags = (list: List, isDynamic: boolean) => {
+  const tagTemplate = queryElement('tag', { instance: list.instance });
+  if (!tagTemplate) return;
+
+  const tagGroupTemplate =
+    tagTemplate.closest<HTMLElement>(getElementSelector('tag-group')) || tagTemplate.parentElement;
+  if (!tagGroupTemplate) return;
+
+  const tagsListsWrapper = tagGroupTemplate.parentNode;
+  if (!tagsListsWrapper) return;
+
+  const indexOfTagTemplate = Array.from(tagGroupTemplate.children).indexOf(tagTemplate);
+  const indexOfTagGroupTemplate = Array.from(tagsListsWrapper.children).indexOf(tagGroupTemplate);
+
+  tagGroupTemplate.remove();
+  tagTemplate.remove();
+
+  const renderedTagGroups: Map<string, TagGroupData> = new Map();
+
+  const watcherCleanup = watch(
+    list.filters,
+    (filters: Filters) => {
+      // Render the tag groups
+      const newRenderedTagGroups = new Map<string, TagGroupData>();
+
+      filters.groups.forEach((group) => {
+        // Get the tag list, if existing
+        let tagGroupData = renderedTagGroups.get(group.id);
+
+        const tagListIsRendered = !!tagGroupData;
+
+        if (!tagGroupData) {
+          const element = cloneNode(tagGroupTemplate);
+          const removeElement = queryElement('tag-group-remove', { scope: element });
+          const removeCleanup = addListener(removeElement, 'click', () => {
+            tagGroupData?.remove();
+          });
+
+          tagGroupData = {
+            element,
+            renderedTags: new Map(),
+            remove: () => {
+              tagGroupData?.renderedTags.forEach((tag) => tag.remove());
+
+              const hasGroups = filters.groups.length > 1;
+
+              if (isDynamic && hasGroups) {
+                const groupIndex = filters.groups.findIndex((g) => g.id === group.id);
+                filters.groups.splice(groupIndex, 1);
+              }
+            },
+            cleanup: () => {
+              removeCleanup();
+              tagGroupData?.renderedTags.forEach((tag) => tag.cleanup());
+              tagGroupData?.element.remove();
+              renderedTagGroups.delete(group.id);
+            },
+          };
+
+          renderedTagGroups.set(group.id, tagGroupData);
+        }
+
+        // Render the tags
+        const newRenderedTags = new Map<string, TagData>();
+
+        const shouldRender = group.conditions
+          .map((condition) => {
+            // Get the tag, if existing
+            let tagData = tagGroupData.renderedTags.get(condition.id);
+
+            const tagIsRendered = !!tagData;
+
+            // Remove the tag if the value is empty
+            const shouldRender =
+              condition.showTag &&
+              !!condition.interacted &&
+              !!condition.value &&
+              (Array.isArray(condition.value) ? !!condition.value.length : true);
+
+            if (!shouldRender) {
+              tagData?.cleanup();
+              return false;
+            }
+
+            if (!tagData) {
+              const element = cloneNode(tagTemplate);
+              const removeElement = queryElement('tag-remove', { scope: element });
+              const removeCleanup = addListener(removeElement, 'click', () => tagData?.remove());
+
+              tagData = {
+                element,
+                remove: () => {
+                  const hasConditions = group.conditions.length > 1;
+                  const conditionIndex = group.conditions.findIndex((c) => c.id === condition.id);
+
+                  if (isDynamic && hasConditions) {
+                    group.conditions.splice(conditionIndex, 1);
+                  } else {
+                    group.conditions[conditionIndex].value = Array.isArray(condition.value) ? [] : '';
+                  }
+                },
+                cleanup: () => {
+                  removeCleanup();
+                  tagData?.element.remove();
+                  tagGroupData.renderedTags.delete(condition.id);
+                },
+              };
+
+              tagGroupData.renderedTags.set(condition.id, tagData);
+            }
+
+            populateTag(condition, tagData);
+
+            if (!tagIsRendered) {
+              const anchor = tagGroupData.element.children[indexOfTagTemplate + newRenderedTags.size] || null;
+
+              tagGroupData.element.insertBefore(tagData.element, anchor);
+            }
+
+            newRenderedTags.set(condition.id, tagData);
+
+            return true;
+          })
+          .some(Boolean);
+
+        // Remove the tags that are not rendered anymore
+        for (const [id, tagData] of tagGroupData.renderedTags) {
+          if (!newRenderedTags.has(id)) {
+            tagData.cleanup();
+          }
+        }
+
+        if (!shouldRender) {
+          tagGroupData.cleanup();
+          return;
+        }
+
+        if (!tagListIsRendered) {
+          const anchor = tagsListsWrapper.children[indexOfTagGroupTemplate + newRenderedTagGroups.size] || null;
+
+          tagsListsWrapper.insertBefore(tagGroupData.element, anchor);
+        }
+
+        newRenderedTagGroups.set(group.id, tagGroupData);
+      });
+
+      // Remove the tag groups that are not rendered anymore
+      for (const [id, tagGroupData] of renderedTagGroups) {
+        if (!newRenderedTagGroups.has(id)) {
+          tagGroupData.cleanup();
+        }
+      }
+    },
+    { deep: true }
+  );
+
+  return () => {
+    watcherCleanup();
+
+    for (const [, { cleanup }] of renderedTagGroups) {
+      cleanup();
+    }
+  };
+};
+
+/**
+ * Populates a tag with the condition data.
+ * @param condition
+ * @param tagData
+ */
+const populateTag = (condition: FiltersCondition, tagData: TagData) => {
+  const scope = tagData.element;
+
+  const fieldElement = queryElement('tag-field', { scope });
+  const operatorElement = queryElement('tag-operator', { scope });
+  const valueElement = queryElement('tag-value', { scope });
+
+  const operatorOverwriteElements = new Map(
+    SETTINGS.operator.values
+      .map((operator) => {
+        const operatorOverwriteElement = queryElement(`tag-operator-${operator}`, { scope });
+        if (!operatorOverwriteElement) return;
+
+        return [operator, operatorOverwriteElement] as const;
+      })
+      .filter(isNotEmpty)
+  );
+
+  // Field
+  if (fieldElement) {
+    fieldElement.textContent = condition.customTagField || condition.fieldKey;
+  }
+
+  // Operator
+  const operator = condition.op;
+
+  if (operator) {
+    const operatorOverwriteElement = operatorOverwriteElements.get(operator);
+
+    // Overwrite exists
+    if (operatorOverwriteElement) {
+      operatorElement?.remove();
+      operatorOverwriteElements.delete(operator);
+    }
+
+    // Fallback
+    else if (operatorElement) {
+      const operatorSymbol = OPERATOR_SYMBOLS[operator];
+      operatorElement.textContent = operatorSymbol;
+    }
+
+    // Remove all unused overwrites
+    for (const [, element] of operatorOverwriteElements) {
+      element.remove();
+    }
+  }
+
+  // Value
+  if (valueElement) {
+    // No value
+    if (!condition.value) {
+      valueElement.remove();
+    }
+
+    // Has value
+    else {
+      // Format the value, if needed
+      let formattedValue = condition.value;
+
+      const formatDisplay = getAttribute(valueElement, 'formatdisplay');
+      if (formatDisplay) {
+        const locale = formatDisplay === 'true' ? undefined : formatDisplay;
+
+        if (Array.isArray(condition.value)) {
+          formattedValue = condition.value.map((value) => {
+            const parsedValue = parseFilterValue(value, condition.type);
+
+            if (isNumber(parsedValue)) {
+              return parsedValue.toLocaleString(locale);
+            }
+
+            if (isDate(parsedValue)) {
+              return parsedValue.toLocaleDateString(locale);
+            }
+
+            return value;
+          });
+        } else {
+          const parsedValue = parseFilterValue(condition.value, condition.type);
+
+          if (isNumber(parsedValue)) {
+            formattedValue = parsedValue.toLocaleString(locale);
+          }
+
+          if (isDate(parsedValue)) {
+            formattedValue = parsedValue.toLocaleDateString(locale);
+          }
+        }
+      }
+
+      // Set the value
+      const value = Array.isArray(formattedValue)
+        ? formattedValue.join(condition.filterMatch === 'and' ? ' & ' : ' | ')
+        : formattedValue;
+
+      valueElement.textContent = value;
+    }
+  }
+};

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

@@ -0,0 +1,62 @@
+import type { FormFieldType } from '@finsweet/attributes-utils';
+
+import type { ListItem, ListItemField } from '../components';
+import type { SETTINGS } from '../utils/constants';
+
+// General
+type FilterOperatorValues = (typeof SETTINGS)['operator']['values'];
+export type FilterOperator = FilterOperatorValues[number];
+
+export type FilterMatch = 'and' | 'or';
+
+export type FiltersCondition = {
+  id: string;
+  fieldKey: string;
+  op?: FilterOperator;
+  type: FormFieldType;
+  value: string | string[];
+  filterMatch?: FilterMatch;
+  fieldMatch?: FilterMatch;
+  fuzzyThreshold?: number;
+  interacted?: boolean;
+  customTagField?: string;
+  showTag: boolean;
+};
+
+export type FiltersGroup = {
+  id: string;
+  conditionsMatch: FilterMatch;
+  conditions: FiltersCondition[];
+};
+
+export type Filters = {
+  groupsMatch?: FilterMatch;
+  groups: FiltersGroup[];
+};
+
+export type FieldValue = string | number | Date;
+export type FieldValueType = 'single' | 'multiple';
+
+// Filter tasks
+export type FilterTaskMatchedFields = {
+  [fieldKey: string]: Array<{ fieldValue: FieldValue; filterValue: string }>;
+};
+
+export type FilterTaskItem = Pick<ListItem, 'id' | 'fields'> & { matchedFields: FilterTaskMatchedFields };
+
+export type FilterTaskData = { filters: Filters; items: FilterTaskItem[] };
+export type FilterTaskResult = FilterTaskItem[];
+export type FilterTask = {
+  data: FilterTaskData;
+  resolve: (result: FilterTaskResult) => void;
+  reject: (error: unknown) => void;
+};
+
+// Dynamic filters
+export type AllFieldsData = {
+  [fieldKey: string]: {
+    type: ListItemField['type'];
+    valueType: FieldValueType;
+    rawValues: Set<string>;
+  };
+};