@hortonstudio/main 1.2.12 → 1.2.14

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

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

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

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

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