@aurelia-ui-toolkits/headless 1.0.0

package/src/alert-service/alert-service.ts

@@ -0,0 +1,116 @@
+import { DialogCloseResult, IDialogService } from '@aurelia/dialog';
+import { resolve } from 'aurelia';
+import { AlertConfiguration } from './alert-configuration';
+import { AlertModal } from './alert-modal/alert-modal';
+import { IAlertModalPayload } from './alert-modal/i-alert-modal-payload';
+import { ExceptionsTracker } from './exceptions-tracker';
+import { IPromptDialogData, PromptDialog } from './prompt-dialog/prompt-dialog';
+
+export class AlertService {
+  private readonly dialogService = resolve(IDialogService);
+  private readonly exceptionsTracker = resolve(ExceptionsTracker);
+  private readonly configuration = resolve(AlertConfiguration);
+  private progressDepth: number = 0;
+
+  showProgress(): void {
+    this.progressDepth++;
+    document.dispatchEvent(new CustomEvent('alert-service:progress', { detail: { busy: true } }));
+  }
+
+  hideProgress(): void {
+    this.progressDepth = Math.max(0, this.progressDepth - 1);
+    document.dispatchEvent(new CustomEvent('alert-service:progress', { detail: { busy: this.progressDepth > 0 } }));
+  }
+
+  async usingProgress<T, E = never>(action: () => Promise<T>, catchHandler?: (e: unknown) => Promise<E> | E): Promise<T | E> {
+    try {
+      this.showProgress();
+      return await action();
+    } catch (e) {
+      if (catchHandler) {
+        return await catchHandler(e);
+      }
+      throw e;
+    } finally {
+      this.hideProgress();
+    }
+  }
+
+  async showModal(model: Partial<IAlertModalPayload>): Promise<string | undefined> {
+    const payload: IAlertModalPayload = { ...model };
+    const result = await this.dialogService.open({
+      component: () => this.configuration.defaultAlertModal || AlertModal,
+      model: payload,
+      rejectOnCancel: false,
+      options: { modal: true, closedby: 'closerequest' }
+    }).whenClosed() as DialogCloseResult;
+    return typeof result.value === 'string' ? result.value : undefined;
+  }
+
+  async alert(message: string | Partial<IAlertModalPayload>): Promise<boolean> {
+    const payload = typeof message === 'string' ? { message } : message;
+    const model: IAlertModalPayload = {
+      icon: 'i',
+      tone: 'info',
+      button2Text: this.configuration.okText,
+      button2Action: 'ok',
+      defaultAction: 'ok',
+      successAction: 'ok',
+      ...payload
+    };
+    return await this.showModal(model) === model.successAction;
+  }
+
+  async confirm(message: string | Partial<IAlertModalPayload>): Promise<boolean> {
+    const payload = typeof message === 'string' ? { message } : message;
+    const model: IAlertModalPayload = payload.defensive
+      ? {
+        icon: '?',
+        tone: 'warning',
+        button1Text: this.configuration.yesText,
+        button1Action: 'yes',
+        button2Text: this.configuration.noText,
+        button2Action: 'no',
+        defaultAction: 'no',
+        successAction: 'yes',
+        ...payload
+      }
+      : {
+        icon: '?',
+        tone: 'info',
+        button1Text: this.configuration.noText,
+        button1Action: 'no',
+        button2Text: this.configuration.yesText,
+        button2Action: 'yes',
+        defaultAction: 'yes',
+        successAction: 'yes',
+        ...payload
+      };
+    return await this.showModal(model) === model.successAction;
+  }
+
+  async prompt(data: Partial<IPromptDialogData>): Promise<boolean> {
+    data.okText ??= this.configuration.okText;
+    data.cancelText ??= this.configuration.cancelText;
+    const result = await this.dialogService.open({
+      component: () => this.configuration.defaultPromptDialog || PromptDialog,
+      model: data,
+      rejectOnCancel: false,
+      options: { modal: true, closedby: 'closerequest' }
+    }).whenClosed() as DialogCloseResult;
+    if (result.status === 'ok' && typeof result.value === 'string') {
+      data.text = result.value;
+    }
+    return result.status === 'ok';
+  }
+
+  async error(message: string | Partial<IAlertModalPayload>): Promise<boolean> {
+    const payload = typeof message === 'string' ? { message } : message;
+    return this.alert({ icon: '!', tone: 'danger', ...payload });
+  }
+
+  async criticalError(message: string | Partial<IAlertModalPayload>, error: Error): Promise<boolean> {
+    this.exceptionsTracker.track(error);
+    return this.error(message);
+  }
+}

package/src/alert-service/decorators/confirm-action.ts

@@ -0,0 +1,18 @@
+import { IAlertModalPayload } from '../alert-modal/i-alert-modal-payload';
+import { IWithAlertService } from './using-progress';
+
+export function confirmAction(message: string | Partial<IAlertModalPayload>) {
+  return function actualDecorator<This extends IWithAlertService, Args extends unknown[], Return>(originalMethod: (this: This, ...args: Args) => Return,
+    _context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {
+    return async function replacementMethod(this: This, ...args: Args) {
+      if (!this.alertService) {
+        throw new Error('Did you forget to inject AlertService?');
+      }
+
+      if (!await this.alertService.confirm(message)) {
+        return;
+      }
+      return originalMethod.call(this, ...args);
+    };
+  };
+}

package/src/alert-service/decorators/using-progress.ts

@@ -0,0 +1,32 @@
+import { IAlertModalPayload } from '../alert-modal/i-alert-modal-payload';
+import { AlertService } from '../alert-service';
+
+export interface IWithAlertService {
+  alertService: AlertService;
+}
+
+export function usingProgress(errorMessage?: string | Partial<IAlertModalPayload> | ((e: unknown) => string | Partial<IAlertModalPayload>)) {
+  return function actualDecorator<This extends IWithAlertService, Args extends unknown[], Return>(originalMethod: (this: This, ...args: Args) => Return,
+    _context: ClassMethodDecoratorContext<This, (this: This, ...args: Args) => Return>) {
+    return function replacementMethod(this: This, ...args: Args) {
+      if (!this.alertService) {
+        throw new Error('Did you forget to inject AlertService?');
+      }
+      return this.alertService.usingProgress(async () => {
+        return await originalMethod.call(this, ...args);
+      }, async e => {
+        const message = errorMessage instanceof Function ? errorMessage(e) : errorMessage;
+        await this.alertService.criticalError(message ?? errorToMessage(e), errorToError(e));
+        throw e;
+      });
+    };
+  };
+}
+
+function errorToMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+function errorToError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error));
+}

package/src/alert-service/exceptions-tracker.ts

@@ -0,0 +1,3 @@
+export class ExceptionsTracker {
+  track(_error: Error): void { }
+}

package/src/alert-service/prompt-dialog/prompt-dialog.html

@@ -0,0 +1,13 @@
+<template class="prompt-dialog">
+  <h2 class="prompt-dialog__title" if.bind="data.title">${data.title}</h2>
+  <label class="prompt-dialog__field">
+    <span class="prompt-dialog__label" if.bind="data.label">${data.label}</span>
+    <textarea class="prompt-dialog__control" if.bind="data.textarea" value.bind="data.text" required.bind="data.required" autofocus></textarea>
+    <input class="prompt-dialog__control" else type="text" value.bind="data.text" required.bind="data.required" autofocus>
+  </label>
+  <div class="prompt-dialog__error" if.bind="invalid">This field is required.</div>
+  <div class="prompt-dialog__actions">
+    <button ui-button outlined type="button" if.bind="data.cancelText" click.trigger="cancel()">${data.cancelText}</button>
+    <button ui-button primary type="button" if.bind="data.okText" click.trigger="ok()">${data.okText}</button>
+  </div>
+</template>

package/src/alert-service/prompt-dialog/prompt-dialog.ts

@@ -0,0 +1,37 @@
+import { IDialogController } from '@aurelia/dialog';
+import { customElement, resolve } from 'aurelia';
+import template from './prompt-dialog.html?raw';
+
+export interface IPromptDialogData {
+  title?: string;
+  label?: string;
+  text?: string;
+  required?: boolean;
+  textarea?: boolean;
+  okText?: string;
+  cancelText?: string;
+}
+
+@customElement({ name: 'prompt-dialog', template })
+export class PromptDialog {
+  private readonly dialog = resolve(IDialogController);
+
+  data: IPromptDialogData = {};
+  invalid: boolean = false;
+
+  activate(data: IPromptDialogData): void {
+    this.data = data;
+  }
+
+  cancel(): Promise<unknown> {
+    return this.dialog.cancel();
+  }
+
+  ok(): Promise<unknown> | void {
+    this.invalid = !!this.data.required && !this.data.text?.trim();
+    if (this.invalid) {
+      return;
+    }
+    return this.dialog.ok(this.data.text ?? '');
+  }
+}

package/src/badge/ui-badge.html

@@ -0,0 +1,6 @@
+<template class="ui-badge"
+  data-tone.attr="tone"
+  data-pill.attr="pill ? '' : null"
+  data-outlined.attr="outlined ? '' : null">
+  <au-slot></au-slot>
+</template>

package/src/badge/ui-badge.ts

@@ -0,0 +1,17 @@
+import { bindable, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-badge.html?raw';
+
+type BadgeTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
+
+@customElement({ name: 'ui-badge', template })
+export class UiBadge {
+  @bindable
+  tone: BadgeTone = 'neutral';
+
+  @bindable({ set: booleanAttr })
+  pill = false;
+
+  @bindable({ set: booleanAttr })
+  outlined = false;
+}

package/src/base/boolean-attr.ts

@@ -0,0 +1,3 @@
+export function booleanAttr(val: unknown): boolean {
+  return val === '' || !!val;
+}

package/src/base/i-validated-element.ts

@@ -0,0 +1,11 @@
+/** @hidden */
+export interface IError {
+  message: string | undefined;
+}
+
+/** @hidden */
+export interface IValidatedElement extends HTMLElement {
+  addError(error: IError): void;
+  removeError(error: IError): void;
+  valid: boolean;
+}

package/src/base/keys.ts

@@ -0,0 +1,12 @@
+export enum Keys {
+  ArrowDown = 'ArrowDown',
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  ArrowUp = 'ArrowUp',
+  End = 'End',
+  Escape = 'Escape',
+  Enter = 'Enter',
+  Home = 'Home',
+  Space = ' ',
+  Tab = 'Tab'
+}

package/src/breadcrumbs/ui-breadcrumbs.html

@@ -0,0 +1,10 @@
+<template class="ui-breadcrumbs">
+  <nav class="ui-breadcrumbs__nav" aria-label="Breadcrumb">
+    <ol class="ui-breadcrumbs__list">
+      <li class="ui-breadcrumbs__item" repeat.for="item of items" data-current.attr="item.current ? '' : null">
+        <a class="ui-breadcrumbs__link" if.bind="item.href && !item.current" href.bind="item.href">${item.label}</a>
+        <span class="ui-breadcrumbs__current" else aria-current.bind="item.current ? 'page' : null">${item.label}</span>
+      </li>
+    </ol>
+  </nav>
+</template>

package/src/breadcrumbs/ui-breadcrumbs.ts

@@ -0,0 +1,14 @@
+import { bindable, customElement } from 'aurelia';
+import template from './ui-breadcrumbs.html?raw';
+
+export interface UiBreadcrumbItem {
+  label: string;
+  href?: string;
+  current?: boolean;
+}
+
+@customElement({ name: 'ui-breadcrumbs', template })
+export class UiBreadcrumbs {
+  @bindable
+  items: readonly UiBreadcrumbItem[] = [];
+}

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

@@ -0,0 +1,9 @@
+import { templateCompilerHooks } from 'aurelia';
+
+@templateCompilerHooks
+export class EnhanceUiButton {
+  compiling(template: HTMLElement | HTMLTemplateElement) {
+    template.innerHTML = template.innerHTML.replace(/\sui-button(?:="")?(?=\s|>)/g, ' as-element="ui-button"');
+    template.innerHTML = template.innerHTML.replace(/\sui-icon-button(?:="")?(?=\s|>)/g, ' as-element="ui-icon-button"');
+  }
+}

package/src/button/ui-button.html

@@ -0,0 +1,20 @@
+<template class="ui-button"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-primary.attr="primary ? '' : null"
+  data-outlined.attr="outlined ? '' : null"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+</template>

package/src/button/ui-button.ts

@@ -0,0 +1,60 @@
+import { bindable, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-button.html?raw';
+
+@customElement({ name: 'ui-button', template })
+export class UiButton {
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  primary: boolean = false;
+
+  @bindable({ set: booleanAttr })
+  outlined: boolean = false;
+
+  hover: boolean = false;
+  focus: boolean = false;
+  active: boolean = false;
+
+  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;
+  }
+
+  onClick(event: MouseEvent): void {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+}

package/src/button/ui-icon-button.html

@@ -0,0 +1,20 @@
+<template class="ui-icon-button"
+  role="button"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-size.attr="size"
+  data-outlined.attr="outlined ? '' : null"
+  mouseenter.trigger="onMouseEnter()"
+  mouseleave.trigger="onMouseLeave()"
+  focusin.trigger="onFocusIn()"
+  focusout.trigger="onFocusOut()"
+  pointerdown.trigger="onPointerDown()"
+  pointerup.trigger="onPointerUp()"
+  pointerleave.trigger="onPointerLeave()"
+  click.trigger="onClick($event)">
+  <au-slot></au-slot>
+</template>

package/src/button/ui-icon-button.ts

@@ -0,0 +1,62 @@
+import { bindable, customElement } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-icon-button.html?raw';
+
+type IconButtonSize = 'small' | 'medium' | 'large';
+
+@customElement({ name: 'ui-icon-button', template })
+export class UiIconButton {
+  @bindable({ set: booleanAttr })
+  disabled: boolean = false;
+
+  @bindable
+  size: IconButtonSize = 'medium';
+
+  @bindable({ set: booleanAttr })
+  outlined: boolean = false;
+
+  hover: boolean = false;
+  focus: boolean = false;
+  active: boolean = false;
+
+  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;
+  }
+
+  onClick(event: MouseEvent): void {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }
+}

package/src/checkbox/ui-checkbox.html

@@ -0,0 +1,32 @@
+<template class="ui-checkbox"
+  role="checkbox"
+  tabindex.bind="disabled ? null : tabIndex"
+  aria-checked.attr="indeterminate ? 'mixed' : checked ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-checked.attr="checked ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-indeterminate.attr="indeterminate ? '' : null"
+  data-hover.attr="hover ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-changing.attr="changing ? '' : null"
+  click.trigger="onClick($event)"
+  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()">
+  <input ref="controlEl"
+    class="ui-checkbox__control"
+    type="checkbox"
+    id.attr="id || null"
+    checked.bind="checked"
+    disabled.bind="disabled"
+    click.trigger="onInputClick($event)"
+    change.trigger="onInputChange($event)">
+  <span class="ui-checkbox__indicator" aria-hidden="true"></span>
+</template>