@aurelia-ui-toolkits/headless 1.0.0

package/src/table/ui-table.ts

@@ -0,0 +1,209 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import type { UiTableColumn } from './ui-table-column';
+import template from './ui-table.html?raw';
+
+type TableSort = { column: string; direction: 'asc' | 'desc' };
+type ColumnSort = { column: string; columnViewModel: UiTableColumn; direction: 'asc' | 'desc' | undefined; multiple: boolean };
+
+@customElement({ name: 'ui-table', template })
+export class UiTable {
+  private readonly host = resolve(INode) as HTMLElement;
+  private columnSizes: Record<string, number> = {};
+  private readonly sortedColumns = new Map<string, UiTableColumn>();
+
+  @bindable({ mode: BindingMode.twoWay })
+  sort: TableSort[] = [];
+  sortChanged(): void {
+    this.updateColumnSortState();
+  }
+
+  @bindable({ mode: BindingMode.twoWay })
+  page: number = 1;
+
+  @bindable({ mode: BindingMode.twoWay })
+  pageSize: number = 10;
+
+  @bindable
+  total: number = 0;
+  totalChanged(): void {
+    this.updateTotalPages();
+  }
+
+  totalPages = 1;
+  pageOptions: number[] = [1];
+
+  @bindable
+  storageKey: string | undefined;
+  storageKeyChanged(): void {
+    this.loadColumnSizes();
+    this.applyColumnSizes();
+  }
+
+  @bindable({ set: booleanAttr })
+  pagination: boolean = true;
+
+  @bindable({ set: booleanAttr })
+  progress: boolean = false;
+
+  @bindable
+  pageSizeOptions: number[] = [10, 25, 50];
+
+  @bindable
+  paginationText: string = 'Custom';
+
+  attaching(): void {
+    this.loadColumnSizes();
+    this.updateTotalPages();
+  }
+
+  setColumnWidth(columnId: string, width: number, persist = false): void {
+    this.columnSizes[columnId] = width;
+    const column = this.host.querySelector<HTMLElement>(`#${columnId}`);
+    if (column) {
+      this.applyColumnWidth(column, width);
+    }
+
+    if (persist) {
+      this.persistColumnSizes();
+    }
+  }
+
+  onColumnSort(event: CustomEvent<ColumnSort>): void {
+    event.stopPropagation();
+    this.sortedColumns.set(event.detail.column, event.detail.columnViewModel);
+    const next = event.detail.multiple ? this.sort.filter(sort => sort.column !== event.detail.column) : [];
+    if (event.detail.direction) {
+      next.push({ column: event.detail.column, direction: event.detail.direction });
+    }
+    this.sort = next;
+    this.updateColumnSortState();
+  }
+
+  private updateColumnSortState(): void {
+    for (const column of this.sortedColumns.values()) {
+      column.direction = undefined;
+      column.sortOrder = undefined;
+    }
+
+    for (let index = 0; index < this.sort.length; index++) {
+      const sort = this.sort[index];
+      const column = this.sortedColumns.get(sort.column);
+      if (column) {
+        column.direction = sort.direction;
+        column.sortOrder = this.sort.length > 1 ? index + 1 : undefined;
+      }
+    }
+  }
+
+  pageSizeChanged(): void {
+    this.updateTotalPages();
+  }
+
+  nextPage(): void {
+    const next = this.page + 1;
+    if (next <= this.totalPages) {
+      this.setPage(next);
+    }
+  }
+
+  firstPage(): void {
+    this.setPage(1);
+  }
+
+  lastPage(): void {
+    this.setPage(this.totalPages);
+  }
+
+  previousPage(): void {
+    this.setPage(Math.max(1, this.page - 1));
+  }
+
+  setPage(page: number): void {
+    const next = Math.max(1, Math.min(this.totalPages, Number(page) || 1));
+    if (this.page === next) {
+      return;
+    }
+
+    this.page = next;
+  }
+
+  setPageSize(pageSize: number): void {
+    const next = Math.max(1, Number(pageSize) || 1);
+    if (this.pageSize === next) {
+      this.updateTotalPages();
+      return;
+    }
+
+    this.pageSize = next;
+    this.page = 1;
+    this.updateTotalPages();
+  }
+
+  onPageSizeChange(event: Event): void {
+    const target = event.target as { value?: unknown } | null;
+    this.setPageSize(Number(target?.value));
+  }
+
+  onPageChange(event: Event): void {
+    const target = event.target as { value?: unknown } | null;
+    this.setPage(Number(target?.value));
+  }
+
+  private updateTotalPages(): void {
+    this.totalPages = Math.max(1, Math.ceil(this.total / this.pageSize));
+    this.pageOptions = Array.from({ length: this.totalPages }, (_, index) => index + 1);
+    this.page = Math.max(1, Math.min(this.totalPages, Number(this.page) || 1));
+  }
+
+  private applyColumnSizes(): void {
+    for (const column of this.host.querySelectorAll<HTMLElement>('.ui-table-column')) {
+      this.applyColumnWidth(column, this.columnSizes[column.id]);
+    }
+  }
+
+  getColumnWidth(columnId: string): number | undefined {
+    return this.columnSizes[columnId];
+  }
+
+  private applyColumnWidth(column: HTMLElement, width: number | undefined): void {
+    if (width === undefined) {
+      column.style.removeProperty('width');
+      column.style.removeProperty('min-width');
+      return;
+    }
+
+    column.style.width = `${width}px`;
+    column.style.minWidth = `${width}px`;
+  }
+
+  private loadColumnSizes(): void {
+    this.columnSizes = {};
+    if (!this.storageKey) {
+      return;
+    }
+
+    try {
+      const value = localStorage.getItem(this.storageId);
+      this.columnSizes = value ? JSON.parse(value) : {};
+    } catch {
+      this.columnSizes = {};
+    }
+  }
+
+  private persistColumnSizes(): void {
+    if (!this.storageKey) {
+      return;
+    }
+
+    try {
+      localStorage.setItem(this.storageId, JSON.stringify(this.columnSizes));
+    } catch {
+      // Ignore unavailable storage.
+    }
+  }
+
+  private get storageId(): string {
+    return `ui-table:${this.storageKey}:columns`;
+  }
+}

package/src/tabs/ui-tab.html

@@ -0,0 +1,10 @@
+<template class="ui-tab"
+  role="tab"
+  tabindex.bind="tabIndex"
+  aria-selected.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-selected.attr="selected ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  click.trigger="onClick()">
+  <au-slot></au-slot>
+</template>

package/src/tabs/ui-tab.ts

@@ -0,0 +1,30 @@
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiTabs } from './ui-tabs';
+import template from './ui-tab.html?raw';
+
+@customElement({ name: 'ui-tab', template })
+export class UiTab {
+  readonly element = resolve(INode) as HTMLElement;
+  readonly parentTabs = resolve(UiTabs);
+
+  @bindable
+  value: unknown = this;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  get selected(): boolean {
+    return this.parentTabs.isSelected(this);
+  }
+
+  get tabIndex(): number {
+    return !this.disabled && this.selected ? 0 : -1;
+  }
+
+  onClick(): void {
+    if (!this.disabled) {
+      this.parentTabs.select(this.value);
+    }
+  }
+}

package/src/tabs/ui-tabs.html

@@ -0,0 +1,3 @@
+<template class="ui-tabs" role="tablist" keydown.trigger="onKeyDown($event)">
+  <au-slot></au-slot>
+</template>

package/src/tabs/ui-tabs.ts

@@ -0,0 +1,105 @@
+import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';
+import { Keys } from '../base/keys';
+import { UiTab } from './ui-tab';
+import template from './ui-tabs.html?raw';
+
+@customElement({ name: 'ui-tabs', template })
+export class UiTabs {
+  private readonly element = resolve(INode) as HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: unknown;
+
+  @children({
+    query: 'ui-tab',
+    map: (_node, viewModel) => viewModel
+  })
+  tabs: UiTab[] = [];
+  tabsChanged(): void {
+    this.selectInitialTab();
+  }
+
+  attached(): void {
+    this.selectInitialTab();
+  }
+
+  select(value: unknown): void {
+    if (this.value === value) {
+      return;
+    }
+
+    this.value = value;
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+  }
+
+  isSelected(tab: UiTab): boolean {
+    return this.value === tab.value;
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    const tabs = this.enabledTabs;
+    if (!tabs.length) {
+      return;
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      this.focusTab(tabs[0]);
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      this.focusTab(tabs[tabs.length - 1]);
+      return;
+    }
+
+    const direction = this.getNavigationDirection(event.key);
+    if (!direction) {
+      return;
+    }
+
+    event.preventDefault();
+    const active = this.tabs.find(tab => tab.element === document.activeElement) ?? this.tabs.find(tab => this.isSelected(tab));
+    const index = active ? tabs.indexOf(active) : -1;
+    const next = tabs[(index + direction + tabs.length) % tabs.length];
+    this.focusTab(next);
+  }
+
+  private get enabledTabs(): UiTab[] {
+    return this.tabs.filter(tab => !tab.disabled);
+  }
+
+  private selectInitialTab(): void {
+    if (this.value !== undefined || !this.tabs.length) {
+      return;
+    }
+
+    const first = this.enabledTabs[0];
+    if (first) {
+      this.value = first.value;
+    }
+  }
+
+  private focusTab(tab: UiTab): void {
+    this.select(tab.value);
+    tab.element.focus();
+  }
+
+  private getNavigationDirection(key: string): 1 | -1 | undefined {
+    if (key === Keys.ArrowRight || key === Keys.ArrowDown) {
+      return 1;
+    }
+
+    if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {
+      return -1;
+    }
+
+    return undefined;
+  }
+
+  private dispatchValueEvent(type: 'input' | 'change'): void {
+    this.element.dispatchEvent(new Event(type, { bubbles: true }));
+  }
+}

package/src/toast/ui-toast-region.html

@@ -0,0 +1,11 @@
+<template class="ui-toast-region" role="region" aria-label="Notifications">
+  <ui-alert repeat.for="toast of toasts"
+    class="ui-toast-region__toast"
+    tone.bind="toast.tone"
+    title.bind="toast.title"
+    role.bind="toast.tone === 'danger' ? 'alert' : 'status'"
+    dismissible
+    alert-close.trigger="close(toast)">
+    ${toast.message}
+  </ui-alert>
+</template>

package/src/toast/ui-toast-region.ts

@@ -0,0 +1,18 @@
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { UiToastMessage } from './ui-toast-service';
+import template from './ui-toast-region.html?raw';
+
+@customElement({ name: 'ui-toast-region', template })
+export class UiToastRegion {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable
+  toasts: UiToastMessage[] = [];
+
+  close(toast: UiToastMessage): void {
+    this.host.dispatchEvent(new CustomEvent('toast-close', {
+      bubbles: true,
+      detail: toast.id
+    }));
+  }
+}

package/src/toast/ui-toast-service.ts

@@ -0,0 +1,100 @@
+import { Aurelia, IContainer, resolve } from 'aurelia';
+import { AlertTone } from '../alert/ui-alert';
+
+type EnhancedView = { deactivate(): void | Promise<void> };
+
+export interface UiToastOptions {
+  tone?: AlertTone;
+  title?: string;
+  message: string;
+  duration?: number;
+}
+
+export interface UiToastMessage extends Required<Pick<UiToastOptions, 'tone' | 'message' | 'duration'>> {
+  id: number;
+  title?: string;
+}
+
+export class UiToastService {
+  private readonly container = resolve(IContainer);
+  private host: HTMLElement | undefined;
+  private enhanced: EnhancedView | undefined;
+  private nextId = 0;
+  private timers = new Map<number, ReturnType<typeof setTimeout>>();
+
+  toasts: UiToastMessage[] = [];
+
+  async show(options: string | UiToastOptions): Promise<number> {
+    await this.ensureEnhanced();
+    const toast = this.createToast(options);
+    this.toasts = [...this.toasts, toast];
+
+    if (toast.duration > 0) {
+      this.timers.set(toast.id, setTimeout(() => this.remove(toast.id), toast.duration));
+    }
+
+    return toast.id;
+  }
+
+  info(message: string, title?: string): Promise<number> {
+    return this.show({ tone: 'info', title, message });
+  }
+
+  success(message: string, title?: string): Promise<number> {
+    return this.show({ tone: 'success', title, message });
+  }
+
+  warning(message: string, title?: string): Promise<number> {
+    return this.show({ tone: 'warning', title, message });
+  }
+
+  danger(message: string, title?: string): Promise<number> {
+    return this.show({ tone: 'danger', title, message, duration: 7000 });
+  }
+
+  remove(id: number): void {
+    const timer = this.timers.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      this.timers.delete(id);
+    }
+
+    this.toasts = this.toasts.filter(toast => toast.id !== id);
+  }
+
+  clear(): void {
+    for (const timer of this.timers.values()) {
+      clearTimeout(timer);
+    }
+    this.timers.clear();
+    this.toasts = [];
+  }
+
+  private createToast(options: string | UiToastOptions): UiToastMessage {
+    const normalized = typeof options === 'string' ? { message: options } : options;
+    return {
+      id: ++this.nextId,
+      tone: normalized.tone ?? 'info',
+      title: normalized.title,
+      message: normalized.message,
+      duration: normalized.duration ?? 5000
+    };
+  }
+
+  private async ensureEnhanced(): Promise<void> {
+    if (this.enhanced) {
+      return;
+    }
+
+    this.host = document.createElement('div');
+    this.host.className = 'ui-toast-host';
+    this.host.innerHTML = `<ui-toast-region toasts.bind="toasts" toast-close.trigger="remove($event.detail)"></ui-toast-region>`;
+    document.body.append(this.host);
+
+    this.enhanced = await Aurelia.enhance({
+      host: this.host,
+      component: this,
+      container: this.container
+    }) as EnhancedView;
+  }
+}

package/src/tooltip/ui-tooltip-service.ts

@@ -0,0 +1,84 @@
+import { Aurelia, IContainer, resolve } from 'aurelia';
+
+type TooltipPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+type EnhancedView = { deactivate(): void | Promise<void> };
+
+let nextTooltipId = 0;
+
+interface TooltipOptions {
+  anchor: HTMLElement;
+  text: string;
+  placement: TooltipPlacement;
+  offset: number;
+}
+
+export class UiTooltipService {
+  private readonly container = resolve(IContainer);
+  private host: HTMLElement | undefined;
+  private enhanced: EnhancedView | undefined;
+  private request = 0;
+
+  open = false;
+  anchor: HTMLElement | undefined;
+  text = '';
+  placement: TooltipPlacement = 'top-start';
+  offset = 6;
+  tooltipId = `ui-tooltip-${++nextTooltipId}`;
+
+  async show(options: TooltipOptions): Promise<void> {
+    const request = ++this.request;
+    await this.ensureEnhanced();
+    if (request !== this.request) {
+      return;
+    }
+
+    this.anchor = options.anchor;
+    this.text = options.text;
+    this.placement = options.placement;
+    this.offset = options.offset;
+    this.open = true;
+  }
+
+  hide(anchor: HTMLElement): void {
+    if (this.anchor !== anchor) {
+      return;
+    }
+
+    this.request++;
+    this.open = false;
+    this.anchor = undefined;
+  }
+
+  private async ensureEnhanced(): Promise<void> {
+    if (this.enhanced) {
+      return;
+    }
+
+    this.host = document.createElement('div');
+    this.host.className = 'ui-tooltip';
+    this.host.innerHTML = `
+      <ui-popup
+        open.bind="open"
+        anchor.bind="anchor"
+        placement.bind="placement"
+        offset.bind="offset"
+        focus-on-open.bind="false"
+        restore-focus.bind="false"
+        close-on-outside.bind="false"
+        close-on-escape.bind="false"
+        panel-role="tooltip"
+        panel-id.bind="tooltipId">
+        <span class="ui-tooltip__content">\${text}</span>
+      </ui-popup>
+    `;
+    document.body.append(this.host);
+
+    this.enhanced = await Aurelia.enhance({
+      host: this.host,
+      component: this,
+      container: this.container
+    }) as EnhancedView;
+  }
+}
+
+export type { TooltipPlacement, TooltipOptions };