@aurelia-ui-toolkits/headless 1.0.0

package/src/list/ui-list-item.ts

@@ -0,0 +1,25 @@
+import { bindable, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-list-item.html?raw';
+import { UiList } from './ui-list';
+
+@customElement({ name: 'ui-list-item', template })
+export class UiListItem {
+  readonly element = resolve(INode) as HTMLElement;
+  readonly parentList = resolve(UiList);
+
+  @slotted({ slotName: 'leading' })
+  leadingNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'secondary' })
+  secondaryNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'trailing' })
+  trailingNodes: readonly Node[] = [];
+
+  @bindable
+  value: object = this;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+}

package/src/list/ui-list.html

@@ -0,0 +1,10 @@
+<template class="ui-list"
+  role="listbox"
+  tabindex="0"
+  data-orientation.bind="orientation"
+  keydown.trigger="onKeyDown($event)"
+  click.trigger="onClick($event)"
+  mousemove.trigger="onMouseMove()"
+  mouseover.trigger="onMouseOver($event)">
+  <au-slot></au-slot>
+</template>

package/src/list/ui-list.ts

@@ -0,0 +1,330 @@
+import { bindable, children, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import { UiListItem } from './ui-list-item';
+import template from './ui-list.html?raw';
+
+type ListOrientation = 'vertical' | 'horizontal';
+
+@customElement({ name: 'ui-list', template })
+export class UiList {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable
+  items: any[] = [];
+
+  @bindable({ set: booleanAttr })
+  loop: boolean = true;
+
+  @bindable
+  orientation: ListOrientation = 'vertical';
+
+  @bindable
+  typeaheadField: string | undefined;
+
+  @bindable
+  disabledField: string | ((item: unknown) => boolean) = 'disabled';
+
+  @bindable({ mode: 'twoWay' })
+  selected: unknown;
+
+  @children({
+    query: 'ui-list-item',
+    map: (_node, viewModel) => viewModel
+  })
+  listItems: UiListItem[] = [];
+  listItemsChanged() {
+    if (!this.items.length) {
+      this.items = this.listItems.map(x => x.value);
+    }
+    if (this.listItemsChangedCallback) {
+      this.listItemsChangedCallback();
+      this.listItemsChangedCallback = undefined;
+    }
+  }
+
+  private listItemsChangedCallback: (() => void) | undefined;
+  activeItem: unknown;
+  private typeaheadBuffer = '';
+  private typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
+
+  detaching(): void {
+    this.clearTypeahead();
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    const values = this.getEffectiveItems();
+    if (values.length === 0) {
+      return;
+    }
+
+    if (this.isNextKey(event.key)) {
+      event.preventDefault();
+      this.move(1);
+      return;
+    }
+
+    if (this.isPreviousKey(event.key)) {
+      event.preventDefault();
+      this.move(-1);
+      return;
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      this.setFirstActive();
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      this.setLastActive();
+      return;
+    }
+
+    if (event.key === Keys.Enter) {
+      event.preventDefault();
+      this.selectActive();
+      return;
+    }
+
+    if (this.typeaheadField && this.isTypeaheadKey(event)) {
+      event.preventDefault();
+      this.handleTypeahead(event.key.toLowerCase());
+    }
+  }
+
+  isItemDisabled(item: unknown): boolean {
+    const listItem = this.listItems.find(x => x.value === item);
+    if (listItem) {
+      return listItem.disabled;
+    }
+
+    if (typeof this.disabledField === 'string') {
+      return !!(item as any)[this.disabledField];
+    } else if (typeof this.disabledField === 'function') {
+      return this.disabledField(item);
+    }
+
+    return false;
+  }
+
+  onClick(event: MouseEvent): void {
+    const item = this.resolveItemFromEvent(event.target);
+    if (item === undefined || item === null || this.isItemDisabled(item)) {
+      return;
+    }
+
+    this.selectItem(item);
+  }
+
+  private suppressMouseOver = false;
+
+  onMouseMove(): void {
+    if (this.suppressMouseOver) {
+      this.suppressMouseOver = false;
+    }
+  }
+
+  onMouseOver(event: MouseEvent): void {
+    if (this.suppressMouseOver) {
+      return;
+    }
+    const item = this.resolveItemFromEvent(event.target);
+    if (item === undefined || item === null || this.isItemDisabled(item)) {
+      return;
+    }
+
+    this.activateItem(item);
+  }
+
+  focusFirst(): void {
+    this.host.focus();
+    this.setFirstActive();
+  }
+
+  focusLast(): void {
+    this.host.focus();
+    this.setLastActive();
+  }
+
+  private getEffectiveItems(): unknown[] {
+    if (this.items?.length) {
+      return this.items;
+    }
+
+    return this.listItems.map(item => item.value);
+  }
+
+  private isNextKey(key: string): boolean {
+    if (this.orientation === 'horizontal') {
+      return key === Keys.ArrowRight;
+    }
+
+    return key === Keys.ArrowDown;
+  }
+
+  private isPreviousKey(key: string): boolean {
+    if (this.orientation === 'horizontal') {
+      return key === Keys.ArrowLeft;
+    }
+
+    return key === Keys.ArrowUp;
+  }
+
+  private move(direction: 1 | -1): void {
+    const items = this.getEffectiveItems();
+    const currentIndex = this.activeItem ? items.indexOf(this.activeItem) : -1;
+    let nextIndex = currentIndex + direction;
+
+    if (this.loop) {
+      nextIndex = (nextIndex + items.length) % items.length;
+    } else {
+      nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));
+    }
+
+    const next = this.getNonDisabled(items[nextIndex], direction, items);
+    if (next !== undefined) {
+      this.scrollItemIntoView(next);
+      this.activateItem(next);
+    }
+  }
+
+  private getNonDisabled(item: unknown, direction: 1 | -1, items = this.getEffectiveItems()): unknown {
+    if (!this.isItemDisabled(item)) {
+      return item;
+    }
+    const startIndex = items.indexOf(item);
+    for (let step = 1; step < items.length; step++) {
+      const index = (startIndex + direction * step + items.length) % items.length;
+      const next = items[index];
+      if (!this.isItemDisabled(next)) {
+        return next;
+      }
+    }
+
+    return undefined;
+  }
+
+  private async setFirstActive() {
+    const items = this.getEffectiveItems();
+    const firstItem = this.getNonDisabled(items[0], 1, items);
+    if (firstItem === undefined) {
+      return;
+    }
+
+    this.scrollItemIntoView(firstItem);
+    this.activateItem(firstItem);
+  }
+
+  private setLastActive(): void {
+    const items = this.getEffectiveItems();
+    const lastItem = this.getNonDisabled(items[items.length - 1], -1, items);
+    if (lastItem === undefined) {
+      return;
+    }
+
+    this.scrollItemIntoView(lastItem);
+    this.activateItem(lastItem);
+  }
+
+  private activateItem(item: unknown): void {
+    this.activeItem = item;
+    this.emitActivate(item);
+  }
+
+  private selectActive(): void {
+    if (this.activeItem !== undefined && !this.isItemDisabled(this.activeItem)) {
+      this.selectItem(this.activeItem);
+    }
+  }
+
+  private selectItem(item: unknown): void {
+    this.activateItem(item);
+    this.selected = item;
+    this.emitSelection(item);
+  }
+
+  private emitActivate(item: unknown): void {
+    this.host.dispatchEvent(new CustomEvent('list-activate', {
+      bubbles: true,
+      detail: item
+    }));
+  }
+
+  private emitSelection(item: unknown): void {
+    this.host.dispatchEvent(new CustomEvent('list-select', {
+      bubbles: true,
+      detail: item
+    }));
+  }
+
+  private resolveItemFromEvent(target: EventTarget | null) {
+    const element = target instanceof HTMLElement ? target.closest('ui-list-item') : null;
+    if (!element) {
+      return undefined;
+    }
+
+    return this.listItems.find((item) => item.element === element)?.value;
+  }
+
+  private isTypeaheadKey(event: KeyboardEvent): boolean {
+    return (event.key.length === 1 || event.key === ' ') && !event.altKey && !event.ctrlKey && !event.metaKey;
+  }
+
+  private handleTypeahead(character: string): void {
+    this.typeaheadBuffer += character;
+    this.clearTypeahead();
+    this.typeaheadTimer = setTimeout(() => {
+      this.typeaheadBuffer = '';
+      this.typeaheadTimer = undefined;
+    }, 800);
+
+    const items = this.getEffectiveItems();
+    const startIndex = this.activeItem ? items.indexOf(this.activeItem) : 0;
+
+    for (let step = 0; step < items.length; step++) {
+      const index = (startIndex + step) % items.length;
+      const item = items[index];
+      const label = this.getItemText(item).toLowerCase();
+      if (label.startsWith(this.typeaheadBuffer) && !this.isItemDisabled(item)) {
+        this.scrollItemIntoView(item);
+        this.activateItem(item);
+        return;
+      }
+    }
+  }
+
+  private getItemText(item: unknown): string {
+    if (this.typeaheadField && item && typeof item === 'object') {
+      const value = (item as Record<string, unknown>)[this.typeaheadField];
+      return value === undefined || value === null ? '' : String(value);
+    }
+
+    return item === undefined || item === null ? '' : String(item);
+  }
+
+  private clearTypeahead(): void {
+    if (this.typeaheadTimer) {
+      clearTimeout(this.typeaheadTimer);
+      this.typeaheadTimer = undefined;
+    }
+  }
+
+  private scrollItemIntoView(item: unknown): void {
+    const listItem = this.listItems.find(x => x.value === item);
+    this.suppressMouseOver = true;
+
+    if (listItem) {
+      listItem.element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+    } else {
+      const items = this.getEffectiveItems();
+      const index = items.indexOf(item);
+      this.host.scrollTo({ top: this.host.scrollHeight / items.length * index });
+      // this is a workaround to ensure the active item is scrolled into view after the items are rendered,
+      // if CSS defines a gap between items the virtual-repeat spacer height might be incorrect
+      // so we need to adjust the scroll after the list item gets rendered
+      this.listItemsChangedCallback = () => this.scrollItemIntoView(item);
+    }
+  }
+}

package/src/menu/ui-menu.html

@@ -0,0 +1,20 @@
+<template class="ui-menu" role="menu" data-open.attr="open ? '' : null">
+  <ui-popup component.ref="popup"
+    open.bind="open"
+    anchor.bind="anchor"
+    tab-reference.bind="tabReference"
+    placement.bind="placement"
+    offset.bind="offset"
+    portal-target.bind="portalTarget"
+    portal-position.bind="portalPosition"
+    exposed-host.bind="effectiveSlotHost"
+    close-on-outside.bind="closeOnOutside"
+    close-on-escape.bind="closeOnEscape"
+    match-anchor-width.bind="matchAnchorWidth"
+    focus-on-open.bind="focusOnOpen"
+    restore-focus.bind="restoreFocus"
+    popup-tab-away.trigger="onPopupTabAway($event)"
+    list-select.trigger="onListSelect($event)">
+    <au-slot expose.bind="effectiveSlotHost"></au-slot>
+  </ui-popup>
+</template>

package/src/menu/ui-menu.ts

@@ -0,0 +1,103 @@
+import { bindable, BindingMode, CustomElement, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import { UiList } from '../list/ui-list';
+import { UiPopup } from '../popup/ui-popup';
+import template from './ui-menu.html?raw';
+
+type MenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+@customElement({ name: 'ui-menu', template })
+export class UiMenu {
+  readonly element = resolve(INode) as HTMLElement;
+  readonly slotHost = this;
+  popup!: UiPopup;
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  open: boolean = false;
+  openChanged(newValue: boolean): void {
+    if (newValue && this.focusOnOpen) {
+      this.focus();
+    }
+  }
+
+  @bindable
+  anchor: Element | undefined;
+
+  @bindable
+  tabReference: HTMLElement | undefined;
+
+  @bindable
+  placement: MenuPlacement = 'bottom-start';
+
+  @bindable
+  offset: number = 6;
+
+  @bindable
+  portalTarget: string | Element | null | undefined;
+
+  @bindable
+  portalPosition: InsertPosition = 'beforeend';
+
+  @bindable
+  exposedHost: unknown;
+
+  @bindable({ set: booleanAttr })
+  closeOnOutside: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  closeOnEscape: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  matchAnchorWidth: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  focusOnOpen: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  restoreFocus: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  closeOnSelect: boolean = true;
+
+  get effectiveSlotHost(): unknown {
+    return this.exposedHost ?? this.slotHost;
+  }
+
+  onListSelect(event: Event): void {
+    this.element.dispatchEvent(new CustomEvent('menu-select', {
+      bubbles: true,
+      detail: (event as CustomEvent).detail
+    }));
+
+    if (this.closeOnSelect) {
+      this.open = false;
+    }
+  }
+
+  onPopupTabAway(event: CustomEvent): void {
+    this.element.dispatchEvent(new CustomEvent('menu-tab-away', {
+      bubbles: true,
+      detail: event.detail
+    }));
+  }
+
+  focus(key: Keys.Home | Keys.End = Keys.Home): void {
+    const list = this.popup.panelElement?.querySelector('ui-list') as HTMLElement | null;
+    if (!list) {
+      this.popup.focus();
+      return;
+    }
+
+    const listViewModel = CustomElement.for<UiList>(list).viewModel;
+    if (key === Keys.End) {
+      listViewModel.focusLast();
+    } else {
+      listViewModel.focusFirst();
+    }
+  }
+
+  contains(target: Node): boolean {
+    return this.popup.contains(target);
+  }
+}

package/src/popup/ui-popup.html

@@ -0,0 +1,16 @@
+<template class="ui-popup" data-open.attr="open ? '' : null">
+  <div portal="target.bind: portalTarget; position.bind: portalPosition">
+    <div class="ui-popup__panel"
+      ref="panelElement"
+      id.bind="panelId"
+      role.bind="panelRole"
+      tabindex="-1"
+      list-select.trigger="onListSelect($event)"
+      show.bind="open"
+      style.bind="panelStyle"
+      data-role.attr="panelRole"
+      data-open.attr="open ? '' : null">
+      <au-slot expose.bind="effectiveSlotHost"></au-slot>
+    </div>
+  </div>
+</template>