@aurelia-ui-toolkits/headless 1.0.0

package/src/checkbox/ui-checkbox.ts

@@ -0,0 +1,188 @@
+import { bindable, BindingMode, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-checkbox.html?raw';
+
+@customElement({ name: 'ui-checkbox', template })
+export class UiCheckbox {
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  checked: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  indeterminate: boolean = false;
+
+  @bindable
+  id: string = '';
+
+  @bindable
+  tabIndex: number = 0;
+
+  hover: boolean = false;
+  focus: boolean = false;
+  active: boolean = false;
+  changing: boolean = false;
+
+  controlEl!: HTMLInputElement;
+
+  private changingFrame: number | undefined;
+
+  onClick(event: MouseEvent): void {
+    if (event.target instanceof HTMLInputElement) {
+      return;
+    }
+
+    event.preventDefault();
+    this.toggle();
+  }
+
+  onInputClick(event: MouseEvent): void {
+    event.stopPropagation();
+  }
+
+  onInputChange(event: Event): void {
+    if (!(event.target instanceof HTMLInputElement) || this.disabled) {
+      return;
+    }
+
+    this.changing = true;
+    this.checked = event.target.checked;
+    this.indeterminate = false;
+
+    if (this.changingFrame) {
+      cancelAnimationFrame(this.changingFrame);
+    }
+
+    this.changingFrame = requestAnimationFrame(() => {
+      this.changing = false;
+      this.changingFrame = undefined;
+    });
+  }
+
+  onKeyUp(event: KeyboardEvent): void {
+    if (this.disabled) {
+      return;
+    }
+
+    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;
+    }
+  }
+
+  attached(): void {
+    this.syncControlIndeterminate();
+  }
+
+  indeterminateChanged(): void {
+    this.syncControlIndeterminate();
+  }
+
+  private toggle(): void {
+    if (this.disabled) {
+      return;
+    }
+
+    this.changing = true;
+    if (this.indeterminate) {
+      this.indeterminate = false;
+      this.checked = true;
+    } else {
+      this.checked = !this.checked;
+    }
+
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+
+    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();
+  }
+
+  private syncControlIndeterminate(): void {
+    if (this.controlEl) {
+      this.controlEl.indeterminate = this.indeterminate;
+    }
+  }
+
+  private dispatchValueEvent(type: 'input' | 'change'): void {
+    this.controlEl.checked = this.checked;
+    this.controlEl.indeterminate = this.indeterminate;
+    this.controlEl.dispatchEvent(new Event(type, { bubbles: true }));
+  }
+}

package/src/chip/ui-chip.html

@@ -0,0 +1,32 @@
+<template class="ui-chip"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-pressed.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? 'true' : null"
+  data-tone.attr="tone"
+  data-selected.attr="selected ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-removable.attr="removable ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  click.trigger="onClick($event)"
+  keydown.trigger="onKeyDown($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-chip__content"><au-slot></au-slot></span>
+  <button class="ui-chip__remove"
+    if.bind="removable"
+    type="button"
+    tabindex="-1"
+    aria-label="Remove"
+    disabled.bind="disabled"
+    click.trigger="onRemoveClick($event)">
+    <span class="ui-chip__remove-icon" aria-hidden="true"></span>
+  </button>
+</template>

package/src/chip/ui-chip.ts

@@ -0,0 +1,118 @@
+import { bindable, BindingMode, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-chip.html?raw';
+
+type ChipTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+
+@customElement({ name: 'ui-chip', template })
+export class UiChip {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay, set: booleanAttr })
+  selected = false;
+
+  @bindable({ set: booleanAttr })
+  disabled = false;
+
+  @bindable({ set: booleanAttr })
+  removable = false;
+
+  @bindable
+  value: unknown;
+
+  @bindable
+  tone: ChipTone = 'neutral';
+
+  hover = false;
+  focus = false;
+  active = false;
+
+  onClick(event: MouseEvent): void {
+    if (this.disabled || this.isRemoveTarget(event.target)) {
+      return;
+    }
+
+    this.toggleSelected();
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled) {
+      return;
+    }
+
+    if (event.key === Keys.Space || event.key === Keys.Enter) {
+      event.preventDefault();
+      this.toggleSelected();
+      return;
+    }
+
+    if (this.removable && (event.key === 'Backspace' || event.key === 'Delete')) {
+      event.preventDefault();
+      this.remove();
+    }
+  }
+
+  onRemoveClick(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.remove();
+  }
+
+  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;
+  }
+
+  private toggleSelected(): void {
+    this.selected = !this.selected;
+    this.host.dispatchEvent(new CustomEvent('chip-select', {
+      bubbles: true,
+      detail: { selected: this.selected, value: this.value }
+    }));
+  }
+
+  private remove(): void {
+    if (this.disabled || !this.removable) {
+      return;
+    }
+
+    this.host.dispatchEvent(new CustomEvent('chip-remove', {
+      bubbles: true,
+      detail: { value: this.value }
+    }));
+  }
+
+  private isRemoveTarget(target: EventTarget | null): boolean {
+    return target instanceof HTMLElement && !!target.closest('.ui-chip__remove');
+  }
+}

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

@@ -0,0 +1,10 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceUiCombobox {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML
+      .replaceAll('<ui-combobox ', '<label as-element="ui-combobox" ui-combobox-element ')
+      .replaceAll('</ui-combobox>', '</label>');
+  }
+}

package/src/combobox/ui-combobox.html

@@ -0,0 +1,76 @@
+<template class="ui-combobox"
+  data-disabled.attr="disabled ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-open.attr="open ? '' : null"
+  data-inset.attr="inset ? '' : null"
+  data-has-value.attr="hasValue ? '' : null">
+  <label class="ui-combobox__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-combobox__control" ref="controlEl">
+    <span class="ui-combobox__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-combobox__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <input ref="inputEl"
+      class="ui-combobox__native"
+      id.bind="id"
+      name.attr="name || null"
+      value.bind="textValue"
+      placeholder.attr="placeholderText || null"
+      autocomplete.attr="autocomplete || null"
+      disabled.bind="disabled"
+      readonly.bind="readonly"
+      required.bind="required"
+      role="combobox"
+      aria-haspopup="listbox"
+      aria-expanded.attr="open ? 'true' : 'false'"
+      aria-labelledby.bind="label ? labelId : null"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      input.trigger="onInput()"
+      keydown.trigger="onKeyDown($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut($event)"
+      pointerdown.trigger="onPointerDown()"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()">
+
+    <span class="ui-combobox__trailing">
+      <au-slot name="trailing">
+        <span class="ui-combobox__chevron" aria-hidden="true"></span>
+      </au-slot>
+    </span>
+  </div>
+
+  <ui-menu component.ref="menu"
+    open.bind="open"
+    anchor.bind="controlEl"
+    tab-reference.bind="inputEl"
+    match-anchor-width
+    focus-on-open.bind="false"
+    restore-focus.bind="false"
+    exposed-host.bind="slotHost"
+    menu-tab-away.trigger="onMenuTabAway()"
+    menu-select.trigger="onMenuSelect($event)">
+    <au-slot expose.bind="slotHost"></au-slot>
+  </ui-menu>
+
+  <div class="ui-combobox__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-combobox__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-combobox__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-combobox__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>