@hortonstudio/main 1.2.11 → 1.2.13

package/attributes-master/packages/list/src/filter/dynamic/groups.ts

@@ -1,221 +0,0 @@
-import { addListener, cloneNode } from '@finsweet/attributes-utils';
-import { effect, type ShallowRef, shallowRef, watch } from '@vue/reactivity';
-
-import type { List } from '../../components';
-import { getAttribute, queryElement } from '../../utils/selectors';
-import type { FilterMatch } from '../types';
-import { type Condition, initCondition, initConditionAdd, initConditionsMatch } from './conditions';
-import { getFilterMatchValue } from './utils';
-
-export type ConditionGroup = {
-  id: string;
-  element: HTMLElement;
-  conditions: ShallowRef<Condition[]>;
-  cleanup: () => void;
-};
-
-/**
- * Inits the condition groups match for a dynamic filters setup.
- * @param list
- * @param element
- * @param conditionGroups
- * @returns A cleanup function
- */
-export const initConditionGroupsMatch = (
-  list: List,
-  element: HTMLSelectElement,
-  conditionGroups: ShallowRef<ConditionGroup[]>
-) => {
-  // TODO: support fs-list-filteron
-  const inputCleanup = addListener(element, 'change', () => {
-    list.filters.value.groupsMatch = getFilterMatchValue(element);
-  });
-
-  const disabledClass = getAttribute(element, 'dynamicdisabledclass');
-
-  const runner = effect(() => {
-    const disabled = conditionGroups.value.length <= 1;
-
-    element.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-    element.classList.toggle(disabledClass, disabled);
-  });
-
-  return () => {
-    inputCleanup();
-    runner.effect.stop();
-  };
-};
-
-/**
- * Inits the button to add a new condition group.
- * @param list
- * @param element
- * @param conditionGroupTemplate
- * @param conditionGroupsWrapper
- * @param conditionGroups
- * @returns A cleanup function
- */
-export const initConditionGroupsAdd = (
-  list: List,
-  element: HTMLElement,
-  conditionGroupTemplate: HTMLElement,
-  conditionGroupsWrapper: HTMLElement,
-  conditionGroups: ShallowRef<ConditionGroup[]>
-) => {
-  const clickCleanup = addListener(element, 'click', () => {
-    const clone = cloneNode(conditionGroupTemplate);
-
-    const conditionGroup = initConditionGroup(list, clone, conditionGroups);
-    if (!conditionGroup) return;
-
-    const previousConditionGroup = conditionGroups.value[conditionGroups.value.length - 2];
-
-    if (previousConditionGroup) {
-      previousConditionGroup.element.after(conditionGroup.element);
-    } else {
-      conditionGroupsWrapper.append(conditionGroup.element);
-    }
-  });
-
-  return clickCleanup;
-};
-
-/**
- * Inits the button to remove a condition group.
- * @param element
- * @param conditionGroup
- * @param conditionGroups
- * @returns A cleanup function
- */
-const initConditionGroupRemove = (
-  element: HTMLElement,
-  conditionGroup: ConditionGroup,
-  conditionGroups: ShallowRef<ConditionGroup[]>
-) => {
-  const clickCleanup = addListener(element, 'click', () => {
-    if (conditionGroups.value.length <= 1) return;
-
-    conditionGroup.cleanup();
-  });
-
-  const disabledClass = getAttribute(element, 'dynamicdisabledclass');
-
-  const runner = effect(() => {
-    const disabled = conditionGroups.value.length <= 1;
-
-    element.setAttribute('aria-disabled', disabled ? 'true' : 'false');
-    element.classList.toggle(disabledClass, disabled);
-  });
-
-  return () => {
-    clickCleanup();
-    runner.effect.stop();
-  };
-};
-
-/**
- * @returns The condition group with the given ID, or undefined if not found.
- * @param list
- * @param conditionGroup
- */
-export const getFiltersGroup = (list: List, conditionGroup: ConditionGroup) => {
-  return list.filters.value.groups.find((group) => group.id === conditionGroup.id);
-};
-
-/**
- * Inits a condition group for a dynamic filters setup.
- * @param list
- * @param element
- * @param conditionGroups
- * @returns The condition group instance
- */
-export const initConditionGroup = (
-  list: List,
-  element: HTMLElement,
-  conditionGroups: ShallowRef<ConditionGroup[]>
-): ConditionGroup | undefined => {
-  const conditionElement = queryElement('condition', { scope: element });
-  if (!conditionElement) return;
-
-  const conditionTemplate = cloneNode(conditionElement);
-
-  // Store the condition group
-  const id = crypto.randomUUID();
-  const cleanups = new Set<() => void>();
-
-  const conditionGroup: ConditionGroup = {
-    id,
-    element,
-    conditions: shallowRef<Condition[]>([]),
-
-    cleanup: () => {
-      for (const condition of conditionGroup.conditions.value) {
-        condition.cleanup();
-      }
-
-      for (const cleanup of cleanups) {
-        cleanup();
-      }
-
-      cleanups.clear();
-      element.remove();
-
-      conditionGroups.value = conditionGroups.value.filter((group) => group.id !== id);
-
-      const conditionGroupIndex = list.filters.value.groups.findIndex((group) => group.id === id);
-      if (conditionGroupIndex === -1) return;
-
-      list.filters.value.groups.splice(conditionGroupIndex, 1);
-    },
-  };
-
-  // Handle condition matching
-  let conditionsMatch: FilterMatch = 'and';
-
-  const conditionsMatchSelect = queryElement<HTMLSelectElement>('condition-match', { scope: element });
-  if (conditionsMatchSelect) {
-    conditionsMatch = getFilterMatchValue(conditionsMatchSelect);
-
-    const cleanup = initConditionsMatch(list, conditionsMatchSelect, conditionGroup);
-    cleanups.add(cleanup);
-  }
-
-  // Store the group
-  conditionGroups.value = [...conditionGroups.value, conditionGroup];
-
-  list.filters.value.groups.push({
-    id,
-    conditionsMatch,
-    conditions: [],
-  });
-
-  // Handle adding conditions to the group
-  const conditionAddButton = queryElement('condition-add', { scope: element });
-  if (conditionAddButton) {
-    const cleanup = initConditionAdd(list, conditionAddButton, conditionTemplate, conditionGroup);
-    cleanups.add(cleanup);
-  }
-
-  // Handle removing the group
-  const conditionGroupRemoveButton = queryElement('condition-group-remove', { scope: element });
-  if (conditionGroupRemoveButton) {
-    const cleanup = initConditionGroupRemove(conditionGroupRemoveButton, conditionGroup, conditionGroups);
-    cleanups.add(cleanup);
-  }
-
-  // Init default condition
-  initCondition(list, conditionElement, conditionGroup);
-
-  const autoCleanup = watch(
-    () => getFiltersGroup(list, conditionGroup),
-    (filtersGroup) => {
-      if (!filtersGroup) {
-        conditionGroup.cleanup();
-      }
-    }
-  );
-
-  cleanups.add(autoCleanup);
-
-  return conditionGroup;
-};

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

@@ -1,119 +0,0 @@
-import { addListener, cloneNode } from '@finsweet/attributes-utils';
-import { shallowRef } from '@vue/reactivity';
-
-import type { List } from '../../components/List';
-import { getElementSelector, queryElement } from '../../utils/selectors';
-import { handleFiltersForm } from '../elements';
-import type { FilterMatch } from '../types';
-import { type ConditionGroup, initConditionGroup, initConditionGroupsAdd, initConditionGroupsMatch } from './groups';
-import { getFilterMatchValue } from './utils';
-
-/**
- * Inits dynamic filters for a list.
- * @param list
- * @param form
- * @returns A cleanup function
- */
-export const initDynamicFilters = (list: List, form: HTMLFormElement) => {
-  const conditionGroupElement = queryElement('condition-group', { scope: form });
-  if (!conditionGroupElement) return;
-
-  const conditionGroupsWrapper = conditionGroupElement.parentElement;
-  if (!conditionGroupsWrapper) return;
-
-  const conditionGroupTemplate = cloneNode(conditionGroupElement);
-  const conditionGroups = shallowRef<ConditionGroup[]>([]);
-
-  const cleanups = new Set<() => void>();
-
-  // Handle submissions
-  const formElementCleanup = handleFiltersForm(form);
-  cleanups.add(formElementCleanup);
-
-  // Handle adding condition groups
-  const conditionGroupAddButton =
-    queryElement('condition-group-add', { scope: form }) || queryElement('condition-groups-add', { scope: form });
-
-  if (conditionGroupAddButton) {
-    const cleanup = initConditionGroupsAdd(
-      list,
-      conditionGroupAddButton,
-      conditionGroupTemplate,
-      conditionGroupsWrapper,
-      conditionGroups
-    );
-
-    cleanups.add(cleanup);
-  }
-
-  // Handle condition groups matching
-  let groupsMatch: FilterMatch = 'and';
-
-  const conditionGroupMatchSelect =
-    queryElement<HTMLSelectElement>('condition-group-match', { scope: form }) ||
-    queryElement<HTMLSelectElement>('condition-groups-match', { scope: form });
-
-  if (conditionGroupMatchSelect) {
-    groupsMatch = getFilterMatchValue(conditionGroupMatchSelect);
-
-    const cleanup = initConditionGroupsMatch(list, conditionGroupMatchSelect, conditionGroups);
-    cleanups.add(cleanup);
-  }
-
-  list.filters.value.groupsMatch = groupsMatch;
-
-  // Handle global clear buttons
-  const clearCleanup = handleClearButtons(list);
-  cleanups.add(clearCleanup);
-
-  // Init default condition group
-  initConditionGroup(list, conditionGroupElement, conditionGroups);
-
-  return () => {
-    for (const conditionGroup of conditionGroups.value) {
-      conditionGroup.cleanup();
-    }
-
-    for (const cleanup of cleanups) {
-      cleanup();
-    }
-
-    cleanups.clear();
-  };
-};
-
-/**
- * Handles the clear buttons.
- * @param list
- * @returns A cleanup function.
- */
-const handleClearButtons = (list: List) => {
-  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;
-
-    list.settingFilters = true;
-
-    // Remove all groups and conditions except the first one
-    filters.value.groups.splice(1);
-
-    const firstGroup = filters.value.groups[0];
-    if (!firstGroup) return;
-
-    firstGroup.conditions.splice(1);
-
-    const firstCondition = firstGroup.conditions[0];
-    if (!firstCondition) return;
-
-    firstCondition.value = Array.isArray(firstCondition.value) ? [] : '';
-
-    list.settingFilters = false;
-  });
-};

package/attributes-master/packages/list/src/filter/dynamic/utils.ts

@@ -1,44 +0,0 @@
-import { SETTINGS } from '../../utils/constants';
-import type { FilterMatch, FilterOperator } from '../types';
-
-const FIELD_REGEX = /\[field=(?:"([^"]*)"|([^\]]+))\]/;
-const OPERATOR_REGEX = new RegExp(`^(${SETTINGS.operator.values.join('|')})`);
-const FIELD_MATCH_VALUES = SETTINGS.fieldmatch.values.join('|');
-const FIELD_MATCH_REGEX = new RegExp(`\\[fieldmatch=(${FIELD_MATCH_VALUES}|"(${FIELD_MATCH_VALUES})")\\]`);
-
-/**
- * @returns The filter match value of a given select element.
- * @param selectElement
- */
-export const getFilterMatchValue = (selectElement: HTMLSelectElement): FilterMatch =>
-  selectElement.value === 'or' ? 'or' : 'and';
-
-/**
- * Parses the operator and field match value from a condition operator selection.
- * @param value
- * @returns The operator, field key, field match, and filter match, if found.
- */
-export const parseOperatorValue = (
-  value: string
-): { op?: FilterOperator; fieldKey?: string; fieldMatch?: FilterMatch } => {
-  let op: FilterOperator | undefined;
-  let fieldKey: string | undefined;
-  let fieldMatch: FilterMatch | undefined;
-
-  const opMatch = value.match(OPERATOR_REGEX);
-  if (opMatch) {
-    op = opMatch[1] as FilterOperator;
-  }
-
-  const fieldKeyMatch = value.match(FIELD_REGEX);
-  if (fieldKeyMatch) {
-    fieldKey = fieldKeyMatch[1] || fieldKeyMatch[2];
-  }
-
-  const fieldMatchMatch = value.match(FIELD_MATCH_REGEX);
-  if (fieldMatchMatch) {
-    fieldMatch = (fieldMatchMatch[2] || fieldMatchMatch[1]) as FilterMatch;
-  }
-
-  return { op, fieldKey, fieldMatch };
-};

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

@@ -1,93 +0,0 @@
-import {
-  addListener,
-  type FormField,
-  getFormFieldWrapper,
-  getRadioGroupInputs,
-  isFormField,
-} from '@finsweet/attributes-utils';
-import { effect } from '@vue/reactivity';
-
-import type { List } from '../components';
-import { getAttribute, hasAttributeValue } from '../utils/selectors';
-
-/**
- * Handles the filter-specific elements like the list element, empty element, and results count element.
- * @param list
- * @returns A cleanup function.
- */
-export const handleFilterElements = (list: List) => {
-  const elementsRunner = effect(() => {
-    const filteredItems = list.hooks.filter.result.value;
-
-    // Results count
-    if (list.resultsCountElement) {
-      list.resultsCountElement.textContent = `${filteredItems.length}`;
-    }
-  });
-
-  return () => elementsRunner.effect.stop();
-};
-
-/**
- * Handles submit events for filters form.
- * Handles the active class for form fields.
- * @param form
- * @returns A cleanup function.
- */
-export const handleFiltersForm = (form: HTMLFormElement) => {
-  const allowSubmit = hasAttributeValue(form, 'allowsubmit', 'true');
-
-  const submitCleanup = addListener(form, 'submit', (e) => {
-    if (!allowSubmit) {
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  });
-
-  const changeCleanup = addListener(form, 'change', (e) => {
-    const { target } = e;
-
-    if (!isFormField(target)) return;
-
-    setActiveClass(target);
-  });
-
-  return () => {
-    submitCleanup();
-    changeCleanup();
-  };
-};
-
-/**
- * Sets the active class to a form field.
- * @param formField
- */
-const setActiveClass = (formField: FormField) => {
-  const activeClass = getAttribute(formField, 'activeclass');
-
-  switch (formField.type) {
-    case 'checkbox': {
-      const { checked } = formField as HTMLInputElement;
-      const target = getFormFieldWrapper(formField);
-
-      target.classList.toggle(activeClass, checked);
-      break;
-    }
-
-    case 'radio': {
-      const groupRadios = getRadioGroupInputs(formField);
-
-      for (const radio of groupRadios) {
-        const target = getFormFieldWrapper(radio);
-
-        target.classList.toggle(activeClass, radio.checked);
-      }
-
-      break;
-    }
-
-    default: {
-      formField.classList.toggle(activeClass, !!formField.value);
-    }
-  }
-};

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

@@ -1,118 +0,0 @@
-import { toRaw } from '@vue/reactivity';
-
-import type { ListItem } from '../components/ListItem';
-// @ts-expect-error - FilterWorker is not recognized by TypeScript
-import FilterWorker from './filter.worker.js';
-import type { Filters, FilterTask, FilterTaskData, FilterTaskItem, FilterTaskResult } from './types';
-
-const WORKER_POOL_SIZE = navigator.hardwareConcurrency || 4;
-
-const workers: Worker[] = Array.from({ length: WORKER_POOL_SIZE }, () => new FilterWorker());
-const freeWorkers = workers.slice();
-const taskQueue: FilterTask[] = [];
-
-/**
- * Processes a filter task using a worker.
- * Once finished, it will process the next task in the queue.
- * @param worker
- * @param task
- */
-const processFilterTask = (worker: FilterWorker, task: FilterTask) => {
-  const controller = new AbortController();
-  const { signal } = controller;
-
-  const conclude = () => {
-    controller.abort();
-
-    const nextTask = taskQueue.shift();
-    if (nextTask) {
-      processFilterTask(worker, nextTask);
-    } else {
-      freeWorkers.push(worker);
-    }
-  };
-
-  worker.addEventListener(
-    'message',
-    (event: MessageEvent<FilterTaskResult>) => {
-      task.resolve(event.data);
-      conclude();
-    },
-    { signal, once: true }
-  );
-
-  worker.addEventListener(
-    'error',
-    (error: string | Event) => {
-      task.reject(error);
-      conclude();
-    },
-    { signal, once: true }
-  );
-
-  worker.postMessage(task.data);
-};
-
-/**
- * Queues a filter task to be processed.
- * @param task
- */
-const queueFilterTask = (task: FilterTask) => {
-  const worker = freeWorkers.pop();
-  if (worker) {
-    processFilterTask(worker, task);
-  } else {
-    taskQueue.push(task);
-  }
-};
-
-/**
- * Runs a filter task.
- * @param data
- * @returns A promise that resolves with the filtered items.
- */
-const runFilterTask = (data: FilterTaskData) => {
-  return new Promise<FilterTaskResult>((resolve, reject) => {
-    queueFilterTask({ data, resolve, reject });
-  });
-};
-
-/**
- * Filters the provided items based on the provided filters.
- * @param filters
- * @param items
- * @param highlight
- * @returns The filtered items.
- */
-export const filterItems = async (filters: Filters, items: ListItem[], highlight?: boolean) => {
-  const itemsMap = new Map<string, ListItem>();
-  const itemsData = items.map<FilterTaskItem>((item) => {
-    itemsMap.set(item.id, item);
-
-    const { id, fields } = item;
-
-    return { id, fields, matchedFields: {} };
-  });
-
-  const filteredItems = await runFilterTask({ items: itemsData, filters: toRaw(filters) });
-
-  const result = filteredItems.map(({ id, matchedFields }) => {
-    const item = itemsMap.get(id)!;
-
-    itemsMap.delete(id);
-
-    // Highlight the matched fields
-    if (highlight) {
-      item.highlight(matchedFields);
-    }
-
-    return item;
-  });
-
-  // Reset the highlight for the remaining items
-  if (highlight) {
-    itemsMap.forEach((item) => item.highlight({}));
-  }
-
-  return result;
-};