@aurelia-ui-toolkits/headless 1.0.0

package/src/select/ui-select.ts

@@ -0,0 +1,294 @@
+import { bindable, BindingMode, computed, CustomElement, customElement, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { IError, IValidatedElement } from '../base/i-validated-element';
+import { Keys } from '../base/keys';
+import template from './ui-select.html?raw';
+
+let nextSelectId = 0;
+
+@customElement({ name: 'ui-select', template })
+export class UiSelect {
+  constructor() {
+    defineUiSelectElementApis(this.element);
+  }
+
+  readonly element = resolve(Element) as HTMLElement;
+
+  errors = new Map<IError, boolean>();
+  focus: boolean = false;
+  active: boolean = false;
+  open: boolean = false;
+  controlEl!: HTMLElement;
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: unknown;
+
+  @bindable({ mode: BindingMode.twoWay })
+  selectedItem: unknown;
+
+  @bindable
+  label: string | undefined;
+
+  @bindable({ set: booleanAttr })
+  inset: boolean = false;
+
+  @bindable
+  helperText: string | undefined;
+
+  @bindable
+  id: string = `ui-select-${++nextSelectId}`;
+
+  @bindable
+  placeholder: string | undefined;
+
+  @bindable
+  valueField: string | undefined;
+
+  @bindable
+  labelField: string | undefined;
+
+  @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({ slotName: 'leading' })
+  leadingNodes: readonly Node[] = [];
+
+  @slotted({ slotName: 'trailing' })
+  trailingNodes: readonly Node[] = [];
+
+  get labelId(): string {
+    return `${this.id}-label`;
+  }
+
+  get helperId(): string {
+    return `${this.id}-helper`;
+  }
+
+  get errorsId(): string {
+    return `${this.id}-errors`;
+  }
+
+  @computed({ flush: 'async' })
+  get displayText(): string | undefined {
+    if (this.selectedItem !== undefined) {
+      return this.getItemLabel(this.selectedItem);
+    }
+    if (this.value !== undefined) {
+      return String(this.value);
+    }
+
+    return undefined;
+  }
+
+  @computed({ flush: 'async' })
+  get placeholderText(): string | undefined {
+    if (this.inset && !this.focus) {
+      return undefined;
+    }
+
+    return this.placeholder;
+  }
+
+  get hasValue(): boolean {
+    return this.value !== undefined && this.value !== null && this.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);
+  }
+
+  onClick(): void {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    this.open = !this.open;
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+
+    if (event.key === Keys.Enter || event.key === Keys.Space || event.key === Keys.ArrowDown) {
+      event.preventDefault();
+      this.open = true;
+      return;
+    }
+
+    if (event.key === Keys.Escape) {
+      event.preventDefault();
+      this.open = false;
+    }
+  }
+
+  onMenuSelect(event: CustomEvent): void {
+    this.selectedItem = event.detail;
+    this.value = this.getItemValue(event.detail);
+    this.open = false;
+    this.dispatchValueEvent('input');
+    this.dispatchValueEvent('change');
+  }
+
+  onMenuTabAway(): void {
+    this.open = false;
+    this.focus = false;
+  }
+
+  onFocusIn(): void {
+    if (!this.disabled) {
+      this.focus = true;
+    }
+  }
+
+  onFocusOut(event: FocusEvent): void {
+    if (this.open) {
+      event.stopPropagation();
+      return;
+    }
+
+    this.focus = false;
+  }
+
+  onPointerDown(): void {
+    if (!this.disabled) {
+      this.active = true;
+    }
+  }
+
+  onPointerUp(): void {
+    this.active = false;
+  }
+
+  onPointerLeave(): void {
+    this.active = false;
+  }
+
+  private getItemValue(item: unknown): unknown {
+    if (this.valueField && item && typeof item === 'object') {
+      return (item as Record<string, unknown>)[this.valueField];
+    }
+
+    return item;
+  }
+
+  private getItemLabel(item: unknown): string {
+    if (this.labelField && item && typeof item === 'object') {
+      const label = (item as Record<string, unknown>)[this.labelField];
+      return label === undefined || label === null ? '' : String(label);
+    }
+
+    return item === undefined || item === null ? '' : String(item);
+  }
+
+  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 IUiSelectElement extends IValidatedElement {
+  value: unknown;
+}
+
+function defineUiSelectElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    tagName: {
+      get() {
+        return 'UI-SELECT';
+      }
+    },
+    value: {
+      get(this: IUiSelectElement) {
+        return CustomElement.for<UiSelect>(this).viewModel.value;
+      },
+      set(this: IUiSelectElement, value: unknown) {
+        CustomElement.for<UiSelect>(this).viewModel.value = value;
+      },
+      configurable: true
+    },
+    disabled: {
+      get(this: IUiSelectElement) {
+        return CustomElement.for<UiSelect>(this).viewModel.disabled;
+      },
+      set(this: IUiSelectElement, value: boolean) {
+        CustomElement.for<UiSelect>(this).viewModel.disabled = value;
+      },
+      configurable: true
+    },
+    readOnly: {
+      get(this: IUiSelectElement) {
+        return CustomElement.for<UiSelect>(this).viewModel.readonly;
+      },
+      set(this: IUiSelectElement, value: boolean) {
+        CustomElement.for<UiSelect>(this).viewModel.readonly = value;
+      },
+      configurable: true
+    },
+    addError: {
+      value(this: IUiSelectElement, error: IError) {
+        CustomElement.for<UiSelect>(this).viewModel.addError(error);
+      },
+      configurable: true
+    },
+    removeError: {
+      value(this: IUiSelectElement, error: IError) {
+        CustomElement.for<UiSelect>(this).viewModel.removeError(error);
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IUiSelectElement) {
+        CustomElement.for<UiSelect>(this).viewModel.controlEl.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IUiSelectElement) {
+        CustomElement.for<UiSelect>(this).viewModel.controlEl.blur();
+      },
+      configurable: true
+    },
+    isFocused: {
+      get(this: IUiSelectElement) {
+        return document.activeElement === CustomElement.for<UiSelect>(this).viewModel.controlEl;
+      },
+      configurable: true
+    }
+  });
+}

package/src/slider/ui-slider.html

@@ -0,0 +1,69 @@
+<template class="ui-slider"
+  data-disabled.attr="disabled ? '' : null"
+  data-readonly.attr="readonly ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-range.attr="range ? '' : null">
+  <label class="ui-slider__label" for.bind="id" id.bind="label ? labelId : null" show.bind="label">${label}</label>
+
+  <div class="ui-slider__control">
+    <span class="ui-slider__track" aria-hidden="true">
+      <span class="ui-slider__fill" style.bind="fillStyle"></span>
+    </span>
+    <input ref="inputEl"
+      class="ui-slider__native"
+      id.bind="id"
+      type="range"
+      name.attr="name || null"
+      min.bind="min"
+      max.bind="max"
+      step.bind="step"
+      value.bind="value"
+      disabled.bind="disabled"
+      required.bind="required"
+      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($event)"
+      change.trigger="onChange($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown($event)"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()"
+      keydown.trigger="onKeyDown($event)">
+    <input ref="endInputEl"
+      if.bind="range"
+      class="ui-slider__native ui-slider__native--end"
+      id.bind="endId"
+      type="range"
+      name.attr="name ? name + '-end' : null"
+      min.bind="min"
+      max.bind="max"
+      step.bind="step"
+      value.bind="endValue"
+      disabled.bind="disabled"
+      aria-label.attr="label ? label + ' end' : 'Range end'"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      input.trigger="onInput($event)"
+      change.trigger="onChange($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown($event)"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()"
+      keydown.trigger="onKeyDown($event)">
+  </div>
+
+  <div class="ui-slider__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-slider__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-slider__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-slider__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>

package/src/slider/ui-slider.ts

@@ -0,0 +1,329 @@
+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 template from './ui-slider.html?raw';
+
+let nextSliderId = 0;
+
+@customElement({ name: 'ui-slider', template })
+export class UiSlider {
+  constructor() {
+    defineUiSliderElementApis(this.element);
+  }
+
+  readonly element = resolve(INode) as HTMLElement;
+  errors = new Map<IError, boolean>();
+  focus = false;
+  active = false;
+  inputEl!: HTMLInputElement;
+  endInputEl!: HTMLInputElement;
+  fillStyle = 'width: 0%';
+  normalizedValue = 0;
+  normalizedEndValue = 0;
+  labelId = '';
+  helperId = '';
+  errorsId = '';
+  endId = '';
+
+  @bindable({ mode: BindingMode.twoWay })
+  value: number = 0;
+  valueChanged(): void {
+    this.normalizeValues('start');
+    this.updateFillStyle();
+  }
+
+  @bindable({ mode: BindingMode.twoWay })
+  endValue: number = 100;
+  endValueChanged(): void {
+    this.normalizeValues('end');
+    this.updateFillStyle();
+  }
+
+  @bindable
+  min: number = 0;
+  minChanged(): void {
+    this.normalizeValues();
+    this.updateFillStyle();
+  }
+
+  @bindable
+  max: number = 100;
+  maxChanged(): void {
+    this.normalizeValues();
+    this.updateFillStyle();
+  }
+
+  @bindable
+  step: number = 1;
+
+  @bindable({ set: booleanAttr })
+  range = false;
+  rangeChanged(): void {
+    this.normalizeValues();
+    this.updateFillStyle();
+  }
+
+  @bindable
+  label: string | undefined;
+
+  @bindable
+  helperText: string | undefined;
+
+  @bindable
+  id: string = `ui-slider-${++nextSliderId}`;
+  idChanged(): void {
+    this.updateIds();
+  }
+
+  @bindable
+  name: string | undefined;
+
+  @bindable({ set: booleanAttr })
+  disabled = false;
+
+  @bindable({ set: booleanAttr })
+  readonly = false;
+
+  @bindable({ set: booleanAttr })
+  required = false;
+
+  @bindable({ set: booleanAttr })
+  invalid = false;
+
+  @slotted({ slotName: 'helper' })
+  helperNodes: readonly Node[] = [];
+
+  binding(): void {
+    this.updateIds();
+    this.normalizeValues();
+    this.updateFillStyle();
+  }
+
+  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);
+  }
+
+  onInput(event: Event): void {
+    if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {
+      return;
+    }
+
+    if (event.target === this.endInputEl) {
+      this.endValue = Number(event.target.value);
+      this.normalizeValues('end');
+    } else {
+      this.value = Number(event.target.value);
+      this.normalizeValues('start');
+    }
+    this.updateFillStyle();
+    this.dispatchValueEvent('input');
+  }
+
+  onChange(event: Event): void {
+    if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {
+      return;
+    }
+
+    if (event.target === this.endInputEl) {
+      this.endValue = Number(event.target.value);
+      this.normalizeValues('end');
+    } else {
+      this.value = Number(event.target.value);
+      this.normalizeValues('start');
+    }
+    this.updateFillStyle();
+    this.dispatchValueEvent('change');
+  }
+
+  onFocusIn(): void {
+    if (!this.disabled) {
+      this.focus = true;
+    }
+  }
+
+  onFocusOut(): void {
+    this.focus = false;
+  }
+
+  onPointerDown(event: PointerEvent): void {
+    if (this.readonly) {
+      event.preventDefault();
+      return;
+    }
+
+    if (!this.disabled) {
+      this.active = true;
+    }
+  }
+
+  onPointerUp(): void {
+    this.active = false;
+  }
+
+  onPointerLeave(): void {
+    this.active = false;
+  }
+
+  onKeyDown(event: KeyboardEvent): void {
+    if (this.readonly) {
+      event.preventDefault();
+    }
+  }
+
+  private normalizeValues(changed?: 'start' | 'end'): void {
+    const min = Number(this.min);
+    const max = Number(this.max);
+    const low = Number.isFinite(min) ? min : 0;
+    const high = Number.isFinite(max) && max > low ? max : low + 100;
+    const next = Number(this.value);
+    const nextEnd = Number(this.endValue);
+    this.normalizedValue = Math.max(low, Math.min(high, Number.isFinite(next) ? next : low));
+    this.normalizedEndValue = Math.max(low, Math.min(high, Number.isFinite(nextEnd) ? nextEnd : high));
+    if (this.range && this.normalizedValue > this.normalizedEndValue) {
+      if (changed === 'end') {
+        this.normalizedEndValue = this.normalizedValue;
+      } else {
+        this.normalizedValue = this.normalizedEndValue;
+      }
+    }
+    if (!this.range) {
+      this.normalizedEndValue = high;
+    }
+    if (this.value !== this.normalizedValue) {
+      this.value = this.normalizedValue;
+    }
+    if (this.endValue !== this.normalizedEndValue) {
+      this.endValue = this.normalizedEndValue;
+    }
+  }
+
+  private updateFillStyle(): void {
+    const min = Number(this.min) || 0;
+    const max = Number(this.max) || 100;
+    const range = Math.max(1, max - min);
+    const startPercent = Math.max(0, Math.min(100, (this.normalizedValue - min) / range * 100));
+    const endPercent = Math.max(0, Math.min(100, (this.normalizedEndValue - min) / range * 100));
+    if (this.range) {
+      this.fillStyle = `left: ${startPercent}%; width: ${Math.max(0, endPercent - startPercent)}%`;
+      return;
+    }
+
+    this.fillStyle = `left: 0%; width: ${startPercent}%`;
+  }
+
+  private updateIds(): void {
+    this.labelId = `${this.id}-label`;
+    this.helperId = `${this.id}-helper`;
+    this.errorsId = `${this.id}-errors`;
+    this.endId = `${this.id}-end`;
+  }
+
+  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 IUiSliderElement extends IValidatedElement {
+  value: number;
+  endValue: number;
+}
+
+function defineUiSliderElementApis(element: HTMLElement) {
+  Object.defineProperties(element, {
+    tagName: {
+      get() {
+        return 'UI-SLIDER';
+      }
+    },
+    value: {
+      get(this: IUiSliderElement) {
+        return CustomElement.for<UiSlider>(this).viewModel.value;
+      },
+      set(this: IUiSliderElement, value: number) {
+        CustomElement.for<UiSlider>(this).viewModel.value = Number(value);
+      },
+      configurable: true
+    },
+    disabled: {
+      get(this: IUiSliderElement) {
+        return CustomElement.for<UiSlider>(this).viewModel.disabled;
+      },
+      set(this: IUiSliderElement, value: boolean) {
+        CustomElement.for<UiSlider>(this).viewModel.disabled = value;
+      },
+      configurable: true
+    },
+    endValue: {
+      get(this: IUiSliderElement) {
+        return CustomElement.for<UiSlider>(this).viewModel.endValue;
+      },
+      set(this: IUiSliderElement, value: number) {
+        CustomElement.for<UiSlider>(this).viewModel.endValue = Number(value);
+      },
+      configurable: true
+    },
+    readOnly: {
+      get(this: IUiSliderElement) {
+        return CustomElement.for<UiSlider>(this).viewModel.readonly;
+      },
+      set(this: IUiSliderElement, value: boolean) {
+        CustomElement.for<UiSlider>(this).viewModel.readonly = value;
+      },
+      configurable: true
+    },
+    addError: {
+      value(this: IUiSliderElement, error: IError) {
+        CustomElement.for<UiSlider>(this).viewModel.addError(error);
+      },
+      configurable: true
+    },
+    removeError: {
+      value(this: IUiSliderElement, error: IError) {
+        CustomElement.for<UiSlider>(this).viewModel.removeError(error);
+      },
+      configurable: true
+    },
+    focus: {
+      value(this: IUiSliderElement) {
+        CustomElement.for<UiSlider>(this).viewModel.inputEl.focus();
+      },
+      configurable: true
+    },
+    blur: {
+      value(this: IUiSliderElement) {
+        CustomElement.for<UiSlider>(this).viewModel.inputEl.blur();
+      },
+      configurable: true
+    },
+    isFocused: {
+      get(this: IUiSliderElement) {
+        return document.activeElement === CustomElement.for<UiSlider>(this).viewModel.inputEl;
+      },
+      configurable: true
+    }
+  });
+}

package/src/splitter/ui-splitter.html

@@ -0,0 +1,14 @@
+<template class="ui-splitter"
+  role="separator"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-orientation.attr="direction"
+  aria-valuemin.attr="min"
+  aria-valuemax.attr="max"
+  aria-valuenow.attr="valueNow"
+  aria-disabled.attr="disabled ? 'true' : null"
+  data-direction.attr="direction"
+  data-disabled.attr="disabled ? '' : null"
+  pointerdown.trigger="onPointerDown($event)"
+  keydown.trigger="onKeyDown($event)">
+  <span class="ui-splitter__handle" aria-hidden="true"></span>
+</template>