@aurelia-ui-toolkits/headless 1.0.0

package/src/splitter/ui-splitter.ts

@@ -0,0 +1,249 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-splitter.html?raw';
+
+type SplitterDirection = 'horizontal' | 'vertical';
+
+@customElement({ name: 'ui-splitter', template })
+export class UiSplitter implements EventListenerObject {
+  private readonly host = resolve(INode) as HTMLElement;
+  private targetElement: HTMLElement | undefined;
+  private startPosition = 0;
+  private startSize = 0;
+  private dragging = false;
+  private pointerMoved = false;
+  private expandedSize = 240;
+  private targetDisplay = '';
+  private targetOverflow = '';
+
+  @bindable({ mode: BindingMode.twoWay })
+  size: number = 240;
+  sizeChanged(): void {
+    this.applySize();
+    this.updateValueNow();
+  }
+
+  @bindable
+  direction: SplitterDirection = 'horizontal';
+  directionChanged(): void {
+    this.applySize();
+  }
+
+  @bindable
+  min: number = 80;
+
+  @bindable
+  max: number = 800;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable
+  storageKey: string | undefined;
+
+  valueNow = 240;
+
+  attaching(): void {
+    this.targetElement = this.host.previousElementSibling instanceof HTMLElement
+      ? this.host.previousElementSibling
+      : undefined;
+    this.targetDisplay = this.targetElement?.style.display ?? '';
+    this.targetOverflow = this.targetElement?.style.overflow ?? '';
+    this.expandedSize = this.size;
+    this.loadSize();
+    this.applySize();
+    this.updateValueNow();
+  }
+
+  detaching(): void {
+    this.stopDragging();
+  }
+
+  handleEvent(event: Event): void {
+    if (event.type === 'pointermove') {
+      this.onPointerMove(event as PointerEvent);
+      return;
+    }
+
+    if (event.type === 'pointerup') {
+      this.onPointerUp();
+    }
+  }
+
+  onPointerDown(event: PointerEvent): void {
+    if (this.disabled || !this.targetElement) {
+      return;
+    }
+
+    event.preventDefault();
+    this.dragging = true;
+    this.pointerMoved = false;
+    this.startPosition = this.direction === 'horizontal' ? event.clientX : event.clientY;
+    this.startSize = this.size;
+    this.host.setPointerCapture(event.pointerId);
+    window.addEventListener('pointermove', this);
+    window.addEventListener('pointerup', this);
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) {
+      return;
+    }
+
+    const largeStep = event.shiftKey ? 50 : 10;
+    if (this.direction === 'horizontal') {
+      if (event.key === Keys.ArrowLeft) {
+        event.preventDefault();
+        this.setSize(this.size - largeStep, true);
+        return;
+      }
+      if (event.key === Keys.ArrowRight) {
+        event.preventDefault();
+        this.setSize(this.size + largeStep, true);
+        return;
+      }
+    } else {
+      if (event.key === Keys.ArrowUp) {
+        event.preventDefault();
+        this.setSize(this.size - largeStep, true);
+        return;
+      }
+      if (event.key === Keys.ArrowDown) {
+        event.preventDefault();
+        this.setSize(this.size + largeStep, true);
+        return;
+      }
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      this.setSize(this.minSize, true);
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      this.setSize(this.maxSize, true);
+    }
+  }
+
+  private onPointerMove(event: PointerEvent): void {
+    if (!this.dragging) {
+      return;
+    }
+
+    const position = this.direction === 'horizontal' ? event.clientX : event.clientY;
+    this.pointerMoved ||= Math.abs(position - this.startPosition) > 3;
+    this.setSize(this.startSize + position - this.startPosition);
+  }
+
+  private onPointerUp(): void {
+    if (!this.dragging) {
+      return;
+    }
+
+    this.stopDragging();
+    if (!this.pointerMoved) {
+      this.toggleCollapsed();
+      return;
+    }
+    this.persistSize();
+  }
+
+  private stopDragging(): void {
+    this.dragging = false;
+    window.removeEventListener('pointermove', this);
+    window.removeEventListener('pointerup', this);
+  }
+
+  private setSize(size: number, persist = false): void {
+    this.size = Math.max(this.minSize, Math.min(this.maxSize, Number(size) || this.minSize));
+    this.expandedSize = this.size;
+    this.applySize();
+    this.updateValueNow();
+    if (persist) {
+      this.persistSize();
+    }
+  }
+
+  private toggleCollapsed(): void {
+    if (this.size <= 0) {
+      this.size = Math.max(this.minSize, Math.min(this.maxSize, this.expandedSize || this.minSize));
+    } else {
+      this.expandedSize = this.size;
+      this.size = 0;
+    }
+    this.applySize();
+    this.updateValueNow();
+    this.persistSize();
+  }
+
+  private applySize(): void {
+    if (!this.targetElement) {
+      return;
+    }
+
+    const sizeValue = Math.max(0, Number(this.size) || 0);
+    const size = `${sizeValue}px`;
+    this.targetElement.style.display = sizeValue === 0 ? 'none' : this.targetDisplay;
+    this.targetElement.style.flexGrow = '0';
+    this.targetElement.style.flexShrink = '0';
+    this.targetElement.style.overflow = sizeValue === 0 ? 'hidden' : this.targetOverflow;
+    if (this.direction === 'horizontal') {
+      this.targetElement.style.width = size;
+      this.targetElement.style.flexBasis = size;
+      this.targetElement.style.height = '';
+      return;
+    }
+
+    this.targetElement.style.height = size;
+    this.targetElement.style.flexBasis = size;
+    this.targetElement.style.width = '';
+  }
+  private updateValueNow(): void {
+    this.valueNow = Math.max(0, Math.min(this.maxSize, Number(this.size) || 0));
+  }
+
+  private loadSize(): void {
+    if (!this.storageKey) {
+      return;
+    }
+
+    try {
+      const value = localStorage.getItem(this.storageId);
+      if (value !== null) {
+        this.size = Math.max(0, Math.min(this.maxSize, Number(value) || 0));
+        if (this.size > 0) {
+          this.expandedSize = this.size;
+        }
+      }
+    } catch {
+      // Ignore unavailable storage.
+    }
+  }
+
+  private persistSize(): void {
+    if (!this.storageKey) {
+      return;
+    }
+
+    try {
+      localStorage.setItem(this.storageId, String(this.size));
+    } catch {
+      // Ignore unavailable storage.
+    }
+  }
+
+  private get minSize(): number {
+    return Math.max(0, Number(this.min) || 0);
+  }
+
+  private get maxSize(): number {
+    return Math.max(this.minSize, Number(this.max) || this.minSize);
+  }
+
+  private get storageId(): string {
+    return `ui-splitter:${this.storageKey}:size`;
+  }
+}

package/src/switch/ui-switch.html

@@ -0,0 +1,23 @@
+<template class="ui-switch"
+  role="switch"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-checked.attr="checked ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-checked.attr="checked ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-changing.attr="changing ? '' : null"
+  click.trigger="onClick()"
+  keyup.trigger="onKeyUp($event)"
+  keypress.trigger="onKeyPress($event)"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()">
+  <span class="ui-switch__thumb" aria-hidden="true"></span>
+</template>

package/src/switch/ui-switch.ts

@@ -0,0 +1,121 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-switch.html?raw';
+
+@customElement({ name: 'ui-switch', template })
+export class UiSwitch {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  checked: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  hover: boolean = false;
+  focus: boolean = false;
+  active: boolean = false;
+  changing: boolean = false;
+
+  private changingFrame: number | undefined;
+
+  onClick(): void {
+    this.toggle();
+  }
+
+  onKeyUp(event: KeyboardEvent): void {
+    if (event.key === Keys.Space) {
+      event.preventDefault();
+      this.toggle();
+      return;
+    }
+
+    if (event.key === Keys.Enter) {
+      this.submitClosestForm(event.currentTarget);
+    }
+  }
+
+  onKeyPress(event: KeyboardEvent): void {
+    if (event.key ===  Keys.Space || event.key === Keys.Enter) {
+      event.preventDefault();
+    }
+  }
+
+  onMouseEnter(): void {
+    if (!this.disabled) {
+      this.hover = true;
+    }
+  }
+
+  onMouseLeave(): void {
+    this.hover = false;
+  }
+
+  onFocusIn(): void {
+    if (!this.disabled) {
+      this.focus = true;
+    }
+  }
+
+  onFocusOut(): void {
+    this.focus = false;
+  }
+
+  onPointerDown(): void {
+    if (!this.disabled) {
+      this.active = true;
+    }
+  }
+
+  onPointerUp(): void {
+    this.active = false;
+  }
+
+  onPointerLeave(): void {
+    this.active = false;
+  }
+
+  detaching(): void {
+    if (this.changingFrame) {
+      cancelAnimationFrame(this.changingFrame);
+      this.changingFrame = undefined;
+    }
+  }
+
+  private toggle(): void {
+    if (this.disabled) {
+      return;
+    }
+
+    this.changing = true;
+    this.checked = !this.checked;
+    this.host.dispatchEvent(new Event('input', { bubbles: true }));
+    this.host.dispatchEvent(new Event('change', { bubbles: true }));
+
+    if (this.changingFrame) {
+      cancelAnimationFrame(this.changingFrame);
+    }
+
+    this.changingFrame = requestAnimationFrame(() => {
+      this.changing = false;
+      this.changingFrame = undefined;
+    });
+  }
+
+  private submitClosestForm(target: EventTarget | null): void {
+    const element = target instanceof HTMLElement ? target : null;
+    const form = element?.closest('form');
+
+    if (!form || this.disabled) {
+      return;
+    }
+
+    if (typeof form.requestSubmit === 'function') {
+      form.requestSubmit();
+      return;
+    }
+
+    form.submit();
+  }
+}

package/src/table/enhance-ui-table.ts

@@ -0,0 +1,9 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceUiTable {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replace(/\sui-table-column="([^"]*)"/g, ' as-element="ui-table-column" id="$1"');
+    template.innerHTML = template.innerHTML.replace(/\sui-table-column(?:="")?(?=\s|>)/g, ' as-element="ui-table-column"');
+  }
+}

package/src/table/ui-table-column.html

@@ -0,0 +1,17 @@
+<template class="ui-table-column"
+  data-sortable.attr="sortable ? '' : null"
+  data-resizable.attr="resizable ? '' : null"
+  data-sort.attr="direction || ''"
+  aria-sort.attr="direction ? (direction === 'asc' ? 'ascending' : 'descending') : null"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+  <span class="ui-table-column__sort-indicator" if.bind="direction" aria-hidden="true">
+    <span>${direction === 'asc' ? '↑' : '↓'}</span>
+    <span class="ui-table-column__sort-order" if.bind="sortOrder">${sortOrder}</span>
+  </span>
+  <span class="ui-table-column__resize-handle"
+    if.bind="resizable"
+    ref="resizeHandle"
+    aria-hidden="true"
+    pointerdown.trigger="onPointerDown($event)"></span>
+</template>

package/src/table/ui-table-column.ts

@@ -0,0 +1,108 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiTable } from './ui-table';
+import template from './ui-table-column.html?raw';
+
+@customElement({ name: 'ui-table-column', template })
+export class UiTableColumn implements EventListenerObject {
+  readonly host = resolve(INode) as HTMLElement;
+  readonly table = resolve(UiTable);
+  private resizeHandle: HTMLElement | undefined;
+  private startX = 0;
+  private startWidth = 0;
+  private resizing = false;
+
+  @bindable({ set: booleanAttr })
+  sortable: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  resizable: boolean = false;
+
+  @bindable
+  minWidth: number = 64;
+
+  @bindable({ mode: BindingMode.twoWay })
+  direction: 'asc' | 'desc' | undefined;
+
+  @bindable
+  sortOrder: number | undefined;
+
+  attaching(): void {
+    this.applyWidth(this.table.getColumnWidth(this.host.id));
+  }
+
+  detaching(): void {
+    window.removeEventListener('pointermove', this);
+    window.removeEventListener('pointerup', this);
+  }
+
+  handleEvent(event: Event): void {
+    if (event.type === 'pointermove') {
+      this.onPointerMove(event as PointerEvent);
+      return;
+    }
+
+    if (event.type === 'pointerup') {
+      this.onPointerUp();
+    }
+  }
+
+  applyWidth(width: number | undefined): void {
+    if (width === undefined) {
+      this.host.style.removeProperty('width');
+      this.host.style.removeProperty('min-width');
+      return;
+    }
+
+    this.host.style.width = `${width}px`;
+    this.host.style.minWidth = `${width}px`;
+  }
+
+  onClick(event: MouseEvent): void {
+    if (!this.sortable || this.resizing || this.resizeHandle?.contains(event.target as Node | null)) {
+      return;
+    }
+
+    const direction = !this.direction ? 'asc' : this.direction === 'asc' ? 'desc' : undefined;
+
+    this.host.dispatchEvent(new CustomEvent('column-sort', {
+      bubbles: true,
+      detail: { column: this.host.id, columnViewModel: this, direction, multiple: event.ctrlKey }
+    }));
+  }
+
+  onPointerDown(event: PointerEvent): void {
+    if (!this.resizable) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    this.resizing = true;
+    this.startX = event.clientX;
+    this.startWidth = this.host.getBoundingClientRect().width;
+    this.resizeHandle?.setPointerCapture(event.pointerId);
+    window.addEventListener('pointermove', this);
+    window.addEventListener('pointerup', this);
+  }
+
+  private onPointerMove(event: PointerEvent): void {
+    if (!this.resizing) {
+      return;
+    }
+
+    const width = Math.max(Number(this.minWidth) || 64, this.startWidth + event.clientX - this.startX);
+    this.table.setColumnWidth(this.host.id, width);
+  }
+
+  private onPointerUp(): void {
+    if (!this.resizing) {
+      return;
+    }
+
+    this.resizing = false;
+    window.removeEventListener('pointermove', this);
+    window.removeEventListener('pointerup', this);
+    this.table.setColumnWidth(this.host.id, this.host.getBoundingClientRect().width, true);
+  }
+}

package/src/table/ui-table.html

@@ -0,0 +1,56 @@
+<template class="ui-table"
+  column-sort.trigger="onColumnSort($event)"
+  aria-busy.attr="progress ? 'true' : null"
+  aria-disabled.attr="progress ? 'true' : null"
+  data-disabled.attr="progress ? '' : null"
+  data-progress.attr="progress ? '' : null">
+  <ui-progress class="ui-table__progress" if.bind="progress" label="Loading table"></ui-progress>
+  <au-slot></au-slot>
+  <div class="ui-table__pagination" if.bind="pagination">
+    <div class="ui-table__page-size">
+      <span class="ui-table__page-size-label">Rows per page</span>
+      <ui-select class="ui-table__page-size-select"
+        value.to-view="pageSize"
+        selected-item.to-view="pageSize"
+        change.trigger="onPageSizeChange($event)">
+        <ui-list items.bind="pageSizeOptions" selected.to-view="pageSize">
+          <ui-list-item repeat.for="size of pageSizeOptions" value.bind="size">${size}</ui-list-item>
+        </ui-list>
+      </ui-select>
+    </div>
+    <div class="ui-table__page-size">
+      <span class="ui-table__page-size-label">Page</span>
+      <ui-select class="ui-table__page-select"
+        value.to-view="page"
+        selected-item.to-view="page"
+        change.trigger="onPageChange($event)">
+        <ui-list items.bind="pageOptions" selected.to-view="page">
+          <ui-list-item repeat.for="pageOption of pageOptions" value.bind="pageOption">${pageOption}</ui-list-item>
+        </ui-list>
+      </ui-select>
+    </div>
+    <span class="ui-table__pagination-summary">${paginationText}</span>
+    <div class="ui-table__pagination-actions">
+      <button ui-icon-button type="button" disabled.bind="page === 1" aria-label="First page" click.trigger="firstPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M6 5v14M18 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === 1" aria-label="Previous page" click.trigger="previousPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M15 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === totalPages" aria-label="Next page" click.trigger="nextPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+      <button ui-icon-button type="button" disabled.bind="page === totalPages" aria-label="Last page" click.trigger="lastPage()">
+        <svg class="ui-table__pagination-icon" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M18 5v14M6 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>