@aurelia-ui-toolkits/headless 1.0.0

package/src/tooltip/ui-tooltip.ts

@@ -0,0 +1,200 @@
+import { bindable, customAttribute, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import { UiTooltipService, TooltipOptions, TooltipPlacement } from './ui-tooltip-service';
+
+@customAttribute({
+  name: 'ui-tooltip',
+  defaultProperty: 'text'
+})
+export class UiTooltip implements EventListenerObject {
+  private readonly host = resolve(INode) as HTMLElement;
+  private readonly tooltipService = resolve(UiTooltipService);
+  private openTimer: ReturnType<typeof setTimeout> | undefined;
+  private closeTimer: ReturnType<typeof setTimeout> | undefined;
+  private pointerInside = false;
+  private focusInside = false;
+  private described = false;
+
+  @bindable
+  text: string | undefined;
+  textChanged(): void {
+    if (this.described && this.canOpen()) {
+      void this.tooltipService.show(this.getOptions());
+    } else if (this.described) {
+      this.closeNow();
+    }
+  }
+
+  @bindable
+  placement: TooltipPlacement = 'top-start';
+  placementChanged(): void {
+    if (this.described && this.canOpen()) {
+      void this.tooltipService.show(this.getOptions());
+    }
+  }
+
+  @bindable
+  offset: number = 6;
+  offsetChanged(): void {
+    if (this.described && this.canOpen()) {
+      void this.tooltipService.show(this.getOptions());
+    }
+  }
+
+  @bindable
+  openDelay: number = 300;
+
+  @bindable
+  closeDelay: number = 0;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+  disabledChanged(): void {
+    if (this.disabled) {
+      this.closeNow();
+    }
+  }
+
+  attaching(): void {
+    this.host.addEventListener('pointerenter', this);
+    this.host.addEventListener('pointerleave', this);
+    this.host.addEventListener('focusin', this);
+    this.host.addEventListener('focusout', this);
+    this.host.addEventListener('keydown', this);
+  }
+
+  detaching(): void {
+    this.host.removeEventListener('pointerenter', this);
+    this.host.removeEventListener('pointerleave', this);
+    this.host.removeEventListener('focusin', this);
+    this.host.removeEventListener('focusout', this);
+    this.host.removeEventListener('keydown', this);
+    this.clearTimers();
+    this.closeNow();
+  }
+
+  handleEvent(event: Event): void {
+    switch (event.type) {
+      case 'pointerenter':
+        this.pointerInside = true;
+        this.scheduleOpen();
+        break;
+      case 'pointerleave':
+        this.pointerInside = false;
+        this.scheduleClose();
+        break;
+      case 'focusin':
+        this.focusInside = true;
+        this.scheduleOpen();
+        break;
+      case 'focusout':
+        this.focusInside = false;
+        this.scheduleClose();
+        break;
+      case 'keydown':
+        if ((event as KeyboardEvent).key === Keys.Escape) {
+          this.closeNow();
+        }
+        break;
+    }
+  }
+
+  private scheduleOpen(): void {
+    if (!this.canOpen()) {
+      return;
+    }
+
+    this.clearCloseTimer();
+    this.clearOpenTimer();
+    this.openTimer = setTimeout(() => {
+      this.addDescribedBy();
+      void this.tooltipService.show(this.getOptions());
+    }, this.getDelay(this.openDelay));
+  }
+
+  private scheduleClose(): void {
+    this.clearOpenTimer();
+    this.clearCloseTimer();
+    this.closeTimer = setTimeout(() => {
+      if (!this.pointerInside && !this.focusInside) {
+        this.closeNow();
+      }
+    }, this.getDelay(this.closeDelay));
+  }
+
+  private closeNow(): void {
+    this.clearTimers();
+    this.removeDescribedBy();
+    this.tooltipService.hide(this.host);
+  }
+
+  private getOptions(): TooltipOptions {
+    return {
+      anchor: this.host,
+      text: this.text ?? '',
+      placement: this.placement,
+      offset: Number(this.offset) || 0
+    };
+  }
+
+  private canOpen(): boolean {
+    return !this.disabled && !!this.text;
+  }
+
+  private getDelay(value: number): number {
+    return Math.max(0, Number(value) || 0);
+  }
+
+  private clearTimers(): void {
+    this.clearOpenTimer();
+    this.clearCloseTimer();
+  }
+
+  private clearOpenTimer(): void {
+    if (this.openTimer) {
+      clearTimeout(this.openTimer);
+      this.openTimer = undefined;
+    }
+  }
+
+  private clearCloseTimer(): void {
+    if (this.closeTimer) {
+      clearTimeout(this.closeTimer);
+      this.closeTimer = undefined;
+    }
+  }
+
+  private addDescribedBy(): void {
+    if (this.described) {
+      return;
+    }
+
+    const ids = this.getDescribedByIds();
+    if (!ids.includes(this.tooltipService.tooltipId)) {
+      ids.push(this.tooltipService.tooltipId);
+      this.host.setAttribute('aria-describedby', ids.join(' '));
+    }
+    this.described = true;
+  }
+
+  private removeDescribedBy(): void {
+    if (!this.described) {
+      return;
+    }
+
+    const ids = this.getDescribedByIds().filter(id => id !== this.tooltipService.tooltipId);
+    if (ids.length) {
+      this.host.setAttribute('aria-describedby', ids.join(' '));
+    } else {
+      this.host.removeAttribute('aria-describedby');
+    }
+    this.described = false;
+  }
+
+  private getDescribedByIds(): string[] {
+    return (this.host.getAttribute('aria-describedby') ?? '')
+      .split(/\s+/)
+      .filter(Boolean);
+  }
+}

package/src/top-app-bar/ui-top-app-bar.html

@@ -0,0 +1,24 @@
+<template class="ui-top-app-bar"
+  data-sticky.attr="sticky ? '' : null"
+  data-fixed.attr="fixed ? '' : null"
+  data-dense.attr="dense ? '' : null"
+  data-elevated.attr="elevated ? '' : null">
+  <header class="ui-top-app-bar__header">
+    <div class="ui-top-app-bar__navigation">
+      <au-slot name="navigation"></au-slot>
+    </div>
+
+    <div class="ui-top-app-bar__content">
+      <div class="ui-top-app-bar__breadcrumbs">
+        <au-slot name="breadcrumbs"></au-slot>
+      </div>
+      <div class="ui-top-app-bar__title">
+        <au-slot></au-slot>
+      </div>
+    </div>
+
+    <div class="ui-top-app-bar__actions">
+      <au-slot name="actions"></au-slot>
+    </div>
+  </header>
+</template>

package/src/top-app-bar/ui-top-app-bar.ts

@@ -0,0 +1,27 @@
+import { bindable, customElement, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-top-app-bar.html?raw';
+
+@customElement({ name: 'ui-top-app-bar', template })
+export class UiTopAppBar {
+  @bindable({ set: booleanAttr })
+  sticky: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  fixed: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  dense: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  elevated: boolean = false;
+
+  @slotted({ slotName: 'navigation' })
+  navigationNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'breadcrumbs' })
+  breadcrumbNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'actions' })
+  actionNodes: readonly Node[] = [];
+}

package/src/tree/ui-tree.html

@@ -0,0 +1,38 @@
+<template class="ui-tree"
+  role="tree"
+  aria-label.attr="label || null"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  keydown.trigger="onKeyDown($event)">
+  <div class="ui-tree__item"
+    repeat.for="row of visibleRows"
+    ref="row.element"
+    role="treeitem"
+    tabindex.bind="!disabled && !row.disabled && activeValue === row.value ? 0 : -1"
+    aria-level.attr="row.depth + 1"
+    aria-posinset.attr="row.posInSet"
+    aria-setsize.attr="row.setSize"
+    aria-expanded.attr="row.children.length ? row.expanded ? 'true' : 'false' : null"
+    aria-selected.attr="selectionMode === 'none' ? null : value === row.value ? 'true' : 'false'"
+    aria-disabled.attr="disabled || row.disabled ? '' : null"
+    data-tree-row-id.attr="row.id"
+    data-depth.attr="row.depth"
+    data-expanded.attr="row.expanded ? '' : null"
+    data-selected.attr="value === row.value ? '' : null"
+    data-active.attr="activeValue === row.value ? '' : null"
+    data-disabled.attr="disabled || row.disabled ? '' : null"
+    style.bind="`--ui-tree-depth: ${row.depth}`"
+    click.trigger="onRowClick(row)">
+    <button class="ui-tree__toggle"
+      type="button"
+      tabindex="-1"
+      aria-hidden="true"
+      data-hidden.attr="row.children.length ? null : ''"
+      click.trigger="onToggleClick(row, $event)">
+      <span class="ui-tree__toggle-icon"></span>
+    </button>
+    <div class="ui-tree__content">
+      <au-slot name="item" expose.bind="row.slotHost">${row.label}</au-slot>
+    </div>
+  </div>
+</template>

package/src/tree/ui-tree.ts

@@ -0,0 +1,363 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-tree.html?raw';
+
+type TreeField<T> = string | ((item: T) => unknown);
+type TreeSelectionMode = 'single' | 'none';
+
+export interface UiTreeRow {
+  id: string;
+  item: unknown;
+  value: unknown;
+  label: string;
+  depth: number;
+  parent: UiTreeRow | undefined;
+  children: UiTreeRow[];
+  expanded: boolean;
+  disabled: boolean;
+  posInSet: number;
+  setSize: number;
+  element: HTMLElement | undefined;
+  slotHost: UiTreeRowSlotHost;
+}
+
+export interface UiTreeRowSlotHost {
+  item: unknown;
+  row: UiTreeRow;
+}
+
+@customElement({ name: 'ui-tree', template })
+export class UiTree {
+  private readonly host = resolve(INode) as HTMLElement;
+  private expandedValues = new Set<unknown>();
+
+  @bindable
+  items: unknown[] = [];
+  itemsChanged(): void {
+    this.rebuildRows();
+  }
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: unknown;
+  valueChanged(): void {
+    if (this.value !== undefined) {
+      this.activeValue = this.value;
+    }
+  }
+
+  @bindable
+  label: string | undefined;
+
+  @bindable
+  childrenField: TreeField<unknown> = 'children';
+  childrenFieldChanged(): void {
+    this.rebuildRows();
+  }
+
+  @bindable
+  valueField: TreeField<unknown> = 'value';
+  valueFieldChanged(): void {
+    this.rebuildRows();
+  }
+
+  @bindable
+  labelField: TreeField<unknown> = 'label';
+  labelFieldChanged(): void {
+    this.rebuildRows();
+  }
+
+  @bindable
+  disabledField: TreeField<unknown> = 'disabled';
+  disabledFieldChanged(): void {
+    this.rebuildRows();
+  }
+
+  @bindable
+  expandedField: TreeField<unknown> = 'expanded';
+  expandedFieldChanged(): void {
+    this.rebuildRows(true);
+  }
+
+  @bindable
+  selectionMode: TreeSelectionMode = 'single';
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  visibleRows: UiTreeRow[] = [];
+  activeValue: unknown;
+
+  binding(): void {
+    this.rebuildRows(true);
+  }
+
+  onRowClick(row: UiTreeRow): void {
+    this.focusRow(row);
+    this.selectRow(row);
+  }
+
+  onToggleClick(row: UiTreeRow, event: Event): void {
+    event.stopPropagation();
+    this.focusRow(row);
+    this.toggleRow(row);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) {
+      return;
+    }
+
+    const row = this.getFocusedRow();
+    if (!row) {
+      return;
+    }
+
+    if (event.key === Keys.ArrowDown) {
+      event.preventDefault();
+      this.focusSibling(row, 1);
+      return;
+    }
+
+    if (event.key === Keys.ArrowUp) {
+      event.preventDefault();
+      this.focusSibling(row, -1);
+      return;
+    }
+
+    if (event.key === Keys.ArrowRight) {
+      event.preventDefault();
+      this.expandOrEnter(row);
+      return;
+    }
+
+    if (event.key === Keys.ArrowLeft) {
+      event.preventDefault();
+      this.collapseOrExit(row);
+      return;
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      this.focusFirst();
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      this.focusLast();
+      return;
+    }
+
+    if (event.key === Keys.Enter || event.key === Keys.Space) {
+      event.preventDefault();
+      this.selectRow(row);
+    }
+  }
+
+  private rebuildRows(applyInitialExpanded = false): void {
+    if (applyInitialExpanded) {
+      this.expandedValues.clear();
+    }
+
+    const roots = Array.isArray(this.items) ? this.items : [];
+    const rows = this.buildRows(roots, 0, undefined, '0', applyInitialExpanded);
+    this.visibleRows = this.flattenVisibleRows(rows);
+    if (this.activeValue === undefined) {
+      this.activeValue = this.value ?? this.visibleRows.find(row => !row.disabled)?.value;
+    }
+  }
+
+  private buildRows(items: unknown[], depth: number, parent: UiTreeRow | undefined, path: string, applyInitialExpanded: boolean): UiTreeRow[] {
+    return items.map((item, index) => {
+      const value = this.getFieldValue(item, this.valueField) ?? item;
+      const children = this.getChildren(item);
+      if (applyInitialExpanded && this.getBooleanFieldValue(item, this.expandedField)) {
+        this.expandedValues.add(value);
+      }
+
+      const row = {
+        id: `${path}-${index}`,
+        item,
+        value,
+        label: this.getLabel(item),
+        depth,
+        parent,
+        children: [] as UiTreeRow[],
+        expanded: this.expandedValues.has(value),
+        disabled: this.getBooleanFieldValue(item, this.disabledField),
+        posInSet: index + 1,
+        setSize: items.length,
+        element: undefined,
+        slotHost: undefined as unknown as UiTreeRowSlotHost
+      } satisfies UiTreeRow;
+      row.slotHost = { item, row };
+      row.children = this.buildRows(children, depth + 1, row, row.id, applyInitialExpanded);
+      return row;
+    });
+  }
+
+  private flattenVisibleRows(rows: UiTreeRow[]): UiTreeRow[] {
+    const visible: UiTreeRow[] = [];
+    for (const row of rows) {
+      visible.push(row);
+      if (row.expanded && row.children.length) {
+        visible.push(...this.flattenVisibleRows(row.children));
+      }
+    }
+    return visible;
+  }
+
+  private getChildren(item: unknown): unknown[] {
+    const children = this.getFieldValue(item, this.childrenField);
+    return Array.isArray(children) ? children : [];
+  }
+
+  private getLabel(item: unknown): string {
+    const label = this.getFieldValue(item, this.labelField);
+    return label === undefined || label === null ? '' : String(label);
+  }
+
+  private getBooleanFieldValue(item: unknown, field: TreeField<unknown>): boolean {
+    return !!this.getFieldValue(item, field);
+  }
+
+  private getFieldValue(item: unknown, field: TreeField<unknown>): unknown {
+    if (typeof field === 'function') {
+      return field(item);
+    }
+
+    if (item && typeof item === 'object') {
+      return (item as Record<string, unknown>)[field];
+    }
+
+    return undefined;
+  }
+
+  private getFocusedRow(): UiTreeRow | undefined {
+    const element = document.activeElement instanceof HTMLElement ? document.activeElement.closest('[data-tree-row-id]') : null;
+    const id = element?.getAttribute('data-tree-row-id');
+    return this.visibleRows.find(row => row.id === id) ?? this.visibleRows.find(row => row.value === this.activeValue);
+  }
+
+  private focusSibling(row: UiTreeRow, direction: 1 | -1): void {
+    const rows = this.enabledRows;
+    const index = rows.indexOf(row);
+    if (index < 0) {
+      return;
+    }
+
+    this.focusRow(rows[Math.max(0, Math.min(rows.length - 1, index + direction))]);
+  }
+
+  private expandOrEnter(row: UiTreeRow): void {
+    if (!row.children.length) {
+      return;
+    }
+
+    if (!row.expanded) {
+      this.expandRow(row);
+      return;
+    }
+
+    const child = row.children.find(item => !item.disabled);
+    if (child) {
+      this.focusRow(child);
+    }
+  }
+
+  private collapseOrExit(row: UiTreeRow): void {
+    if (row.children.length && row.expanded) {
+      this.collapseRow(row);
+      return;
+    }
+
+    if (row.parent) {
+      this.focusRow(row.parent);
+    }
+  }
+
+  private focusFirst(): void {
+    const row = this.enabledRows[0];
+    if (row) {
+      this.focusRow(row);
+    }
+  }
+
+  private focusLast(): void {
+    const rows = this.enabledRows;
+    const row = rows[rows.length - 1];
+    if (row) {
+      this.focusRow(row);
+    }
+  }
+
+  private get enabledRows(): UiTreeRow[] {
+    return this.visibleRows.filter(row => !row.disabled);
+  }
+
+  private focusRow(row: UiTreeRow): void {
+    if (row.disabled) {
+      return;
+    }
+
+    this.activeValue = row.value;
+    row.element?.focus();
+  }
+
+  private selectRow(row: UiTreeRow): void {
+    if (this.disabled || row.disabled || this.selectionMode === 'none' || this.value === row.value) {
+      return;
+    }
+
+    this.value = row.value;
+    this.activeValue = row.value;
+    this.host.dispatchEvent(new CustomEvent('tree-select', { bubbles: true, detail: row.item }));
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+  }
+
+  private toggleRow(row: UiTreeRow): void {
+    if (!row.children.length || row.disabled) {
+      return;
+    }
+
+    if (row.expanded) {
+      this.collapseRow(row);
+    } else {
+      this.expandRow(row);
+    }
+  }
+
+  private expandRow(row: UiTreeRow): void {
+    this.expandedValues.add(row.value);
+    this.host.dispatchEvent(new CustomEvent('tree-expand', { bubbles: true, detail: row.item }));
+    this.activeValue = row.value;
+    this.rebuildRows();
+    this.restoreFocus(row.value);
+  }
+
+  private collapseRow(row: UiTreeRow): void {
+    this.expandedValues.delete(row.value);
+    this.host.dispatchEvent(new CustomEvent('tree-collapse', { bubbles: true, detail: row.item }));
+    this.activeValue = row.value;
+    this.rebuildRows();
+    this.restoreFocus(row.value);
+  }
+
+  private restoreFocus(value: unknown): void {
+    const row = this.visibleRows.find(item => item.value === value);
+    if (row?.element) {
+      row.element.focus();
+      return;
+    }
+
+    queueMicrotask(() => {
+      this.visibleRows.find(item => item.value === value)?.element?.focus();
+    });
+  }
+
+  private dispatchValueEvent(type: 'input' | 'change'): void {
+    this.host.dispatchEvent(new Event(type, { bubbles: true }));
+  }
+}

package/src/validation/ui-validation-controller-factory.ts

@@ -0,0 +1,20 @@
+import { IContainer, IFactory, Constructable, Transformer, Key } from '@aurelia/kernel';
+import { IValidationController, ValidationController } from '@aurelia/validation-html';
+import { UiValidationResultPresenter } from './ui-validation-result-presenter';
+
+export class UiValidationControllerFactory implements IFactory<Constructable<IValidationController>> {
+  public Type: Constructable<IValidationController> = (void 0)!;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public registerTransformer(_transformer: Transformer<Constructable<IValidationController>>): boolean {
+    return false;
+  }
+
+  public construct(_: IContainer, _dynamicDependencies?: Key[] | undefined): IValidationController {
+    const controller: IValidationController = _dynamicDependencies !== void 0
+      ? Reflect.construct(ValidationController, _dynamicDependencies)
+      : new ValidationController();
+    controller.addSubscriber(new UiValidationResultPresenter());
+    return controller;
+  }
+}

package/src/validation/ui-validation-result-presenter.ts

@@ -0,0 +1,26 @@
+import { IValidatedElement } from '../base/i-validated-element';
+import { ValidationEvent, ValidationResultsSubscriber } from '@aurelia/validation-html';
+
+export class UiValidationResultPresenter implements ValidationResultsSubscriber {
+  handleValidationEvent(event: ValidationEvent): void {
+    for (let i = 0; i < event.removedResults.length; ++i) {
+      const ri = event.removedResults[i];
+      for (let j = 0; j < ri.targets.length; ++j) {
+        const el = ri.targets[j] as IValidatedElement;
+        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'removeError')) {
+          el.removeError(ri.result);
+        }
+      }
+    }
+
+    for (let i = 0; i < event.addedResults.length; ++i) {
+      const ri = event.addedResults[i];
+      for (let j = 0; j < ri.targets.length; ++j) {
+        const el = ri.targets[j] as IValidatedElement;
+        if (!ri.result.valid && Object.getOwnPropertyDescriptor(el, 'addError')) {
+          el.addError(ri.result);
+        }
+      }
+    }
+  }
+}