@aurelia-ui-toolkits/headless 1.0.0

package/src/radio/ui-radio-group.ts

@@ -0,0 +1,250 @@
+import { bindable, BindingMode, CustomElement, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { IError, IValidatedElement } from '../base/i-validated-element';
+import { Keys } from '../base/keys';
+import { UiRadio } from './ui-radio';
+import template from './ui-radio-group.html?raw';
+
+let nextRadioGroupId = 0;
+
+@customElement({ name: 'ui-radio-group', template })
+export class UiRadioGroup {
+  constructor() {
+    defineUiRadioGroupElementApis(this.element);
+  }
+
+  readonly element = resolve(INode) as HTMLElement;
+
+  errors = new Map<IError, boolean>();
+  focus: boolean = false;
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: unknown;
+
+  @bindable
+  label: string | undefined;
+
+  @bindable
+  helperText: string | undefined;
+
+  @bindable
+  id: string = `ui-radio-group-${++nextRadioGroupId}`;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  readonly: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  required: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  invalid: boolean = false;
+
+  @slotted({ slotName: 'helper' })
+  helperNodes: readonly Node[] = [];
+
+  @slotted('ui-radio')
+  radioElements: readonly HTMLElement[] = [];
+
+  get radios(): UiRadio[] {
+    return this.radioElements.map(element => CustomElement.for<UiRadio>(element).viewModel);
+  }
+
+  get labelId(): string {
+    return `${this.id}-label`;
+  }
+
+  get helperId(): string {
+    return `${this.id}-helper`;
+  }
+
+  get errorsId(): string {
+    return `${this.id}-errors`;
+  }
+
+  select(value: unknown): void {
+    if (this.disabled || this.readonly || this.value === value) {
+      return;
+    }
+
+    this.value = value;
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+  }
+
+  isSelected(radio: UiRadio): boolean {
+    return this.value === radio.value;
+  }
+
+  addError(error: IError): void {
+    if (this.findError(error)) {
+      return;
+    }
+
+    this.errors.set(error, true);
+  }
+
+  removeError(error: IError): void {
+    const existing = this.findError(error);
+    if (existing) {
+      this.errors.delete(existing);
+      return;
+    }
+
+    this.errors.delete(error);
+  }
+
+  onRadioKeyDown(radio: UiRadio, event: KeyboardEvent): void {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    const radios = this.enabledRadios;
+    if (!radios.length) {
+      return;
+    }
+
+    if (event.key === Keys.Space || event.key === Keys.Enter) {
+      if (!radio.disabled) {
+        event.preventDefault();
+        this.select(radio.value);
+      }
+      return;
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      this.focusRadio(radios[0]);
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      this.focusRadio(radios[radios.length - 1]);
+      return;
+    }
+
+    const direction = this.getNavigationDirection(event.key);
+    if (!direction) {
+      return;
+    }
+
+    event.preventDefault();
+    const index = radios.indexOf(radio);
+    this.focusRadio(radios[(index + direction + radios.length) % radios.length]);
+  }
+
+  onFocusIn(): void {
+    if (!this.disabled) {
+      this.focus = true;
+    }
+  }
+
+  onFocusOut(): void {
+    this.focus = false;
+  }
+
+  get enabledRadios(): UiRadio[] {
+    return this.radios.filter(radio => !radio.disabled);
+  }
+
+  private focusRadio(radio: UiRadio): void {
+    radio.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 }));
+  }
+
+  private findError(error: IError): IError | undefined {
+    for (const existing of this.errors.keys()) {
+      if (existing === error || existing.message === error.message) {
+        return existing;
+      }
+    }
+
+    return undefined;
+  }
+}
+
+export interface IUiRadioGroupElement extends IValidatedElement {
+  value: unknown;
+}
+
+function defineUiRadioGroupElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    tagName: {
+      get() {
+        return 'UI-RADIO-GROUP';
+      }
+    },
+    value: {
+      get(this: IUiRadioGroupElement) {
+        return CustomElement.for<UiRadioGroup>(this).viewModel.value;
+      },
+      set(this: IUiRadioGroupElement, value: unknown) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.value = value;
+      },
+      configurable: true
+    },
+    disabled: {
+      get(this: IUiRadioGroupElement) {
+        return CustomElement.for<UiRadioGroup>(this).viewModel.disabled;
+      },
+      set(this: IUiRadioGroupElement, value: boolean) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.disabled = value;
+      },
+      configurable: true
+    },
+    readOnly: {
+      get(this: IUiRadioGroupElement) {
+        return CustomElement.for<UiRadioGroup>(this).viewModel.readonly;
+      },
+      set(this: IUiRadioGroupElement, value: boolean) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.readonly = value;
+      },
+      configurable: true
+    },
+    addError: {
+      value(this: IUiRadioGroupElement, error: IError) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.addError(error);
+      },
+      configurable: true
+    },
+    removeError: {
+      value(this: IUiRadioGroupElement, error: IError) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.removeError(error);
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IUiRadioGroupElement) {
+        CustomElement.for<UiRadioGroup>(this).viewModel.enabledRadios[0]?.element.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IUiRadioGroupElement) {
+        const viewModel = CustomElement.for<UiRadioGroup>(this).viewModel;
+        if (viewModel.radios.some(radio => radio.element === document.activeElement)) {
+          (document.activeElement as HTMLElement).blur();
+        }
+      },
+      configurable: true
+    }
+  });
+}

package/src/radio/ui-radio.html

@@ -0,0 +1,11 @@
+<template class="ui-radio"
+  role="radio"
+  tabindex.bind="parentGroup.disabled || disabled ? -1 : 0"
+  aria-checked.attr="parentGroup.value === value ? 'true' : 'false'"
+  aria-disabled.attr="disabled || parentGroup.disabled ? '' : null"
+  data-selected.attr="parentGroup.value === value ? '' : null"
+  data-disabled.attr="disabled || parentGroup.disabled ? '' : null"
+  click.trigger="onClick()">
+  <span class="ui-radio__indicator" aria-hidden="true"></span>
+  <span class="ui-radio__label"><au-slot></au-slot></span>
+</template>

package/src/radio/ui-radio.ts

@@ -0,0 +1,35 @@
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiRadioGroup } from './ui-radio-group';
+import template from './ui-radio.html?raw';
+
+@customElement({ name: 'ui-radio', template })
+export class UiRadio {
+  readonly element = resolve(INode) as HTMLElement;
+  readonly parentGroup = resolve(UiRadioGroup);
+
+  private readonly onHostKeyDown = (event: KeyboardEvent): void => {
+    this.parentGroup.onRadioKeyDown(this, event);
+  };
+
+  @bindable
+  value: unknown = this;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  onClick(): void {
+    if (!this.disabled) {
+      this.parentGroup.select(this.value);
+    }
+  }
+
+  attaching(): void {
+    this.element.addEventListener('keydown', this.onHostKeyDown);
+  }
+
+  detaching(): void {
+    this.element.removeEventListener('keydown', this.onHostKeyDown);
+  }
+
+}

package/src/resource.d.ts

@@ -0,0 +1,4 @@
+declare module '*.html?raw' {
+  const template: string;
+  export default template;
+}

package/src/segmented-control/ui-segment.html

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

package/src/segmented-control/ui-segment.ts

@@ -0,0 +1,20 @@
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiSegmentedControl } from './ui-segmented-control';
+import template from './ui-segment.html?raw';
+
+@customElement({ name: 'ui-segment', template })
+export class UiSegment {
+  readonly element = resolve(INode) as HTMLElement;
+  readonly parentControl = resolve(UiSegmentedControl);
+
+  @bindable
+  value: unknown = this;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  onClick(): void {
+    this.parentControl.select(this);
+  }
+}

package/src/segmented-control/ui-segmented-control.html

@@ -0,0 +1,9 @@
+<template class="ui-segmented-control"
+  role="radiogroup"
+  aria-label.attr="label || null"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-readonly.attr="readonly ? '' : null"
+  keydown.trigger="onKeyDown($event)">
+  <au-slot></au-slot>
+</template>

package/src/segmented-control/ui-segmented-control.ts

@@ -0,0 +1,119 @@
+import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import { UiSegment } from './ui-segment';
+import template from './ui-segmented-control.html?raw';
+
+@customElement({ name: 'ui-segmented-control', template })
+export class UiSegmentedControl {
+  private readonly host = resolve(INode) as HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: unknown;
+
+  @bindable
+  label: string | undefined;
+
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  readonly: boolean = false;
+
+  @children({
+    query: 'ui-segment',
+    map: (_node, viewModel) => viewModel
+  })
+  segments: UiSegment[] = [];
+  segmentsChanged(): void {
+    this.selectInitialSegment();
+  }
+
+  attached(): void {
+    this.selectInitialSegment();
+  }
+
+  select(segment: UiSegment): void {
+    if (this.disabled || this.readonly || segment.disabled || this.value === segment.value) {
+      return;
+    }
+
+    this.value = segment.value;
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    const active = this.segments.find(segment => segment.element === event.target);
+    if (!active) {
+      return;
+    }
+
+    if (event.key === Keys.Space || event.key === Keys.Enter) {
+      event.preventDefault();
+      this.select(active);
+      return;
+    }
+
+    const segments = this.enabledSegments;
+    if (!segments.length) {
+      return;
+    }
+
+    if (event.key === Keys.Home) {
+      event.preventDefault();
+      segments[0].element.focus();
+      return;
+    }
+
+    if (event.key === Keys.End) {
+      event.preventDefault();
+      segments[segments.length - 1].element.focus();
+      return;
+    }
+
+    const direction = this.getNavigationDirection(event.key);
+    if (!direction) {
+      return;
+    }
+
+    event.preventDefault();
+    const index = segments.indexOf(active);
+    segments[(index + direction + segments.length) % segments.length].element.focus();
+  }
+
+  get enabledSegments(): UiSegment[] {
+    return this.segments.filter(segment => !segment.disabled);
+  }
+
+  private selectInitialSegment(): void {
+    if (this.value !== undefined) {
+      return;
+    }
+
+    const first = this.enabledSegments[0];
+    if (first) {
+      this.value = first.value;
+    }
+  }
+
+  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.host.dispatchEvent(new Event(type, { bubbles: true }));
+  }
+}

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

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

package/src/select/ui-select.html

@@ -0,0 +1,70 @@
+<template class="ui-select"
+  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-select__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-select__control"
+    ref="controlEl"
+    id.bind="id"
+    role="button"
+    tabindex.bind="disabled ? -1 : 0"
+    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)"
+    aria-disabled.attr="disabled ? '' : null"
+    aria-required.attr="required ? 'true' : null"
+    click.trigger="onClick()"
+    keydown.trigger="onKeyDown($event)"
+    focusin.trigger="onFocusIn()"
+    focusout.trigger="onFocusOut($event)"
+    pointerdown.trigger="onPointerDown()"
+    pointerup.trigger="onPointerUp()"
+    pointerleave.trigger="onPointerLeave()">
+    <span class="ui-select__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-select__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <span class="ui-select__value" data-placeholder.attr="displayText ? null : ''">
+      ${displayText || placeholderText}
+    </span>
+
+    <span class="ui-select__trailing">
+      <au-slot name="trailing">
+        <span class="ui-select__chevron" aria-hidden="true"></span>
+      </au-slot>
+    </span>
+  </div>
+
+  <ui-menu open.bind="open"
+    anchor.bind="controlEl"
+    tab-reference.bind="controlEl"
+    match-anchor-width
+    menu-tab-away.trigger="onMenuTabAway()"
+    menu-select.trigger="onMenuSelect($event)">
+    <au-slot></au-slot>
+  </ui-menu>
+
+  <div class="ui-select__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-select__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-select__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-select__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>