@hortonstudio/main 1.2.12 → 1.2.14

package/attributes-master/packages/list/src/components/ListItem.ts

@@ -1,229 +0,0 @@
-import {
-  type CollectionItemElement,
-  isHTMLAnchorElement,
-  normalizeDate,
-  normalizeNumber,
-} from '@finsweet/attributes-utils';
-
-import type { FieldValue, FilterTaskMatchedFields } from '../filter/types';
-import { getCMSElementSelector } from '../utils/dom';
-import { getAttribute, getSettingSelector, queryElement } from '../utils/selectors';
-import type { List } from './List';
-
-declare module '@vue/reactivity' {
-  export interface RefUnwrapBailTypes {
-    classes: ListItem;
-  }
-}
-
-export type ListItemField =
-  | {
-      type: 'text';
-      rawValue: string | string[];
-      value: string | string[];
-    }
-  | {
-      type: 'date';
-      rawValue: string | string[];
-      value: Date | Date[];
-    }
-  | {
-      type: 'number';
-      rawValue: string | string[];
-      value: number | number[];
-    };
-
-type ListItemFieldElements = {
-  [fieldKey: string]: Array<{
-    value: FieldValue;
-    element: HTMLElement;
-    originalHTML: string;
-  }>;
-};
-
-type ListItemFields = {
-  [fieldKey: string]: ListItemField;
-};
-
-/**
- * An instance of a list item.
- */
-export class ListItem {
-  public readonly id = crypto.randomUUID();
-
-  /**
-   * The URL of the item's `Template Page`.
-   */
-  public readonly href?: string;
-
-  /**
-   * Defines the class to apply before rendering the item.
-   */
-  public readonly startingClass: string;
-
-  /**
-   * Defines the class to apply when highlighting matched fields.
-   */
-  public readonly highlightClass: string;
-
-  /**
-   * Defines if the item's transitions should be staggered.
-   */
-  public readonly stagger?: number;
-
-  /**
-   * The item's properties.
-   * Defined by {@link ListItemFields}.
-   */
-  public fields: ListItemFields = {};
-
-  /**
-   * The item's field elements.
-   */
-  public fieldElements: ListItemFieldElements = {};
-
-  /**
-   * Defines an awaitable Promise that resolves when the item's nesting is complete.
-   */
-  public nesting?: Promise<void>;
-
-  /**
-   * @param element The DOM element of the item.
-   * @param listElement The parent Collection List.
-   */
-  constructor(
-    /**
-     * The `Collection Item` element.
-     */
-    public readonly element: CollectionItemElement,
-
-    /**
-     * The `Collection List` parent element.
-     */
-    public readonly list: List,
-
-    /**
-     * The element's current index in the rendered DOM.
-     */
-    public currentIndex?: number
-  ) {
-    let link = queryElement<HTMLAnchorElement>('item-link', { scope: element });
-
-    if (!isHTMLAnchorElement(link)) {
-      link = element.querySelector('a');
-    }
-
-    this.href = link?.href;
-    this.highlightClass = getAttribute(element, 'highlightclass');
-    this.startingClass = getAttribute(element, 'startingclass');
-    this.stagger = getAttribute(element, 'stagger');
-
-    this.collectFields();
-  }
-
-  /**
-   * Collects the field values from child elements and stores them.
-   */
-  public collectFields() {
-    this.fields = {};
-    this.fieldElements = {};
-
-    const fieldSelector = getSettingSelector('field');
-    const fieldElements = [...this.element.querySelectorAll<HTMLElement>(fieldSelector)];
-
-    for (const element of fieldElements) {
-      const fieldKey = getAttribute(element, 'field')?.trim();
-      if (!fieldKey) continue;
-
-      const rawValue = element.textContent;
-      if (!rawValue) continue;
-
-      const type = getAttribute(element, 'fieldtype', { filterInvalid: true }) || 'text';
-      const value =
-        type === 'number' ? normalizeNumber(rawValue) : type === 'date' ? normalizeDate(rawValue) : rawValue.trim();
-
-      if (value === undefined) continue;
-
-      this.fieldElements[fieldKey] ||= [];
-      this.fieldElements[fieldKey].push({ value, element, originalHTML: element.innerHTML });
-
-      const listSelector = getCMSElementSelector('list');
-      const parentList = element.closest(listSelector);
-      const isInsideNestedList = this.list.listElement && parentList && parentList !== this.list.listElement;
-
-      if (isInsideNestedList) {
-        this.fields[fieldKey] ||= { type, rawValue: [], value: [] };
-
-        const field = this.fields[fieldKey];
-
-        if (field.type !== type) continue;
-        if (!Array.isArray(field.value)) continue;
-        if (!Array.isArray(field.rawValue)) continue;
-        if (field.value.some((v) => v === value)) continue;
-        if (field.rawValue.some((v) => v === rawValue)) continue;
-
-        // @ts-expect-error - Value is guaranteed to be the right type
-        field.value.push(value);
-        field.rawValue.push(rawValue);
-      } else {
-        // @ts-expect-error - Value is guaranteed to be the right type
-        this.fields[fieldKey] ||= { fieldKey, type, rawValue, value };
-      }
-    }
-  }
-
-  /**
-   * Highlights the item's fields based on the matching values.
-   * @param matchedFields
-   */
-  public highlight(matchedFields: FilterTaskMatchedFields) {
-    if (!this.list.highlight) return;
-
-    for (const fieldKey in this.fields) {
-      const fieldElementsData = this.fieldElements[fieldKey];
-      if (!fieldElementsData) continue;
-
-      // If the field is not matched, reset the original HTML
-      const matchedField = matchedFields[fieldKey];
-      if (!matchedField) {
-        for (const { element, originalHTML } of fieldElementsData) {
-          element.innerHTML = originalHTML;
-        }
-
-        continue;
-      }
-
-      // If matched, highlight the corresponding elements
-      for (const { value, element, originalHTML } of fieldElementsData) {
-        element.innerHTML = originalHTML;
-
-        const match = matchedField.find(({ fieldValue }) => fieldValue === value);
-        if (!match) continue;
-
-        const regex = new RegExp(match.filterValue, 'gi');
-
-        const walkNodes = (parent: Node) => {
-          for (const node of Array.from(parent.childNodes)) {
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              walkNodes(node);
-              continue;
-            }
-
-            if (node.nodeType !== Node.TEXT_NODE) continue;
-
-            const text = node.textContent || '';
-
-            if (!regex.test(text)) continue;
-
-            const template = document.createElement('template');
-            template.innerHTML = text.replace(regex, `<span class="${this.highlightClass}">$&</span>`);
-
-            node.replaceWith(template.content);
-          }
-        };
-
-        walkNodes(element);
-      }
-    }
-  }
-}

package/attributes-master/packages/list/src/components/index.ts

@@ -1,2 +0,0 @@
-export * from './List';
-export * from './ListItem';

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

@@ -1,130 +0,0 @@
-import { isHTMLFormElement } from '@finsweet/attributes-utils';
-
-import { initListCombine } from './combine';
-import { List } from './components/List';
-import { initListFiltering } from './filter';
-import { initListLoading } from './load';
-import { initListNest } from './nest';
-import { initPrevNext } from './prevnext';
-import { initListSelects } from './select';
-import { initListSliders } from './slider';
-import { initListSorting } from './sort';
-import { initStaticItems } from './static';
-import { initListTabs } from './tabs';
-import { getAllCollectionListWrappers, getCollectionElements } from './utils/dom';
-import { getAttribute, getElementSelector, queryAllElements, queryElement } from './utils/selectors';
-import { listInstancesStore } from './utils/store';
-
-/**
- * Creates a new `CMSList` instance, making sure there are no already existing instances on the page.
- * @param referenceElement The `Collection List` reference element.
- * @returns A new `CMSList` instance, if instantiation was valid.
- */
-export const createListInstance = (referenceElement: HTMLElement): List | undefined => {
-  const wrapper = getCollectionElements(referenceElement, 'wrapper');
-  if (!wrapper) return;
-
-  const existingListInstance = listInstancesStore.get(wrapper);
-  if (existingListInstance) return existingListInstance;
-
-  const allWrappers = getAllCollectionListWrappers();
-
-  const index = allWrappers.indexOf(wrapper);
-  if (index === -1) return;
-
-  const listInstance = new List(wrapper, index);
-  listInstancesStore.set(wrapper, listInstance);
-
-  return listInstance;
-};
-
-/**
- * Initializes the list features.
- * @param list
- * @returns A cleanup function.
- */
-export const initList = (list: List) => {
-  const { instance } = list;
-
-  const items = list.items.value;
-
-  const cleanups = new Set<(() => void) | undefined>();
-
-  // Filter
-  const filtersForm = queryAllElements('filters', { instance }).filter(isHTMLFormElement);
-  if (filtersForm.length) {
-    const cleanup = initListFiltering(list, filtersForm);
-    cleanups.add(cleanup);
-  }
-
-  // Sort
-  const sortTriggers = queryAllElements('sort-trigger', { instance });
-  if (sortTriggers.length) {
-    const cleanup = initListSorting(list, sortTriggers);
-    cleanups.add(cleanup);
-  }
-
-  // Load
-  const load = getAttribute(list.listOrWrapper, 'load', { filterInvalid: true });
-  if (load) {
-    const cleanup = initListLoading(list, load);
-    cleanups.add(cleanup);
-  }
-
-  // Combine
-  const combine = getAttribute(list.listOrWrapper, 'combine');
-  if (combine) {
-    const cleanup = initListCombine(list, combine);
-    cleanups.add(cleanup);
-  }
-
-  // Nest
-  const nest = items.length ? !!queryElement('nest-target', { scope: items[0].element }) : false;
-  if (nest) {
-    const cleanup = initListNest(list);
-    cleanups.add(cleanup);
-  }
-
-  // Static Items
-  const listSelector = getElementSelector('list', { instance });
-  const itemSelector = getElementSelector('item', { instance });
-  const staticItemSelector = `:is(${itemSelector}):not(:is(${listSelector}) :is(${itemSelector}))`;
-  const staticItems = document.querySelectorAll<HTMLElement>(staticItemSelector);
-  if (staticItems.length) {
-    const cleanup = initStaticItems(list, [...staticItems]);
-    cleanups.add(cleanup);
-  }
-
-  // Sliders
-  const sliders = queryAllElements('slider', { instance });
-  if (sliders.length) {
-    initListSliders(list, sliders);
-  }
-
-  // Tabs
-  const tabs = queryAllElements('tabs', { instance });
-  if (tabs.length) {
-    initListTabs(list, tabs);
-  }
-
-  // Selects
-  const selects = queryAllElements('select', { instance });
-  if (selects.length) {
-    initListSelects(list, selects);
-  }
-
-  // Prev/Next
-  const previousItemTarget = queryElement('previous-item', { instance });
-  const nextItemTarget = queryElement('next-item', { instance });
-  if (previousItemTarget || nextItemTarget) {
-    initPrevNext(list, previousItemTarget, nextItemTarget);
-  }
-
-  return () => {
-    for (const cleanup of cleanups) {
-      cleanup?.();
-    }
-
-    cleanups.clear();
-  };
-};