@hortonstudio/main 1.2.5 → 1.2.6

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

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

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

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

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

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