@trineui/cli 0.1.0-beta.1

package/templates/dialog.blueprint.ts.hbs

@@ -0,0 +1,61 @@
+// @trine-generated
+// @trine-version: {{engineVersion}}
+// @trine-schema: {{blueprintSchemaVersion}}
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { DialogEngine } from '@trineui/engine/dialog';
+import { DialogSkin } from './dialog.skin';
+import { DIALOG_STYLING_CONTRACT } from '@trineui/engine/dialog';
+
+@Component({
+  selector: 'ui-dialog',
+  standalone: true,
+  providers: [
+    DialogEngine,
+    {
+      provide: DIALOG_STYLING_CONTRACT,
+      useExisting: DialogEngine,
+    },
+  ],
+  template: `
+    <ng-template #dialogContent>
+      <div
+        class="dialog-panel"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-labelledby]="titleId"
+        [attr.data-state]="engine.dialogState()"
+      >
+        <ng-content select="[slot=title]"></ng-content>
+        <ng-content select="[slot=body]"></ng-content>
+        <ng-content select="[slot=footer]"></ng-content>
+      </div>
+    </ng-template>
+  `,
+  host: {
+    '[class]': 'skin.classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DialogComponent {
+  protected engine = inject(DialogEngine);
+  protected skin = inject(DialogSkin);
+  protected vcr = inject(ViewContainerRef);
+  protected titleId = `dialog-title-${Math.random().toString(36).slice(2)}`;
+
+  @ViewChild('dialogContent') dialogContent: any;
+
+  open(): void {
+    this.engine.setViewContainerRef(this.vcr);
+    this.engine.open(this.dialogContent);
+  }
+
+  close(): void {
+    this.engine.close();
+  }
+}

package/templates/dialog.skin.ts.hbs

@@ -0,0 +1,27 @@
+// @trine-owned
+// DO NOT EDIT — owned by user, never synced
+import { cva } from 'class-variance-authority';
+import { inject, Injectable } from '@angular/core';
+import { DIALOG_STYLING_CONTRACT, DialogStylingContract, DialogState } from '@trineui/engine/dialog';
+
+@Injectable()
+export class DialogSkin {
+  private contract = inject(DIALOG_STYLING_CONTRACT);
+
+  private dialogVariants = cva('dialog-base', {
+    variants: {
+      state: {
+        open: 'dialog-open',
+        closed: 'dialog-closed',
+      },
+    },
+    defaultVariants: {
+      state: 'closed',
+    },
+  });
+
+  classes(): string {
+    const state = this.contract.dialogState();
+    return this.dialogVariants({ state });
+  }
+}

package/templates/input.blueprint.ts.hbs

@@ -0,0 +1,83 @@
+// @trine-generated
+// @trine-version: {{engineVersion}}
+// @trine-schema: {{blueprintSchemaVersion}}
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { InputEngine } from '@trineui/engine/input';
+import { InputSkin } from './input.skin';
+import { INPUT_STYLING_CONTRACT } from '@trineui/engine/input';
+
+@Component({
+  selector: 'ui-input',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: InputEngine,
+      inputs: ['value', 'disabled', 'readonly', 'required', 'placeholder', 'errorMessage'],
+      outputs: ['valueChange'],
+    },
+  ],
+  providers: [
+    InputSkin,
+    {
+      provide: INPUT_STYLING_CONTRACT,
+      useExisting: InputEngine,
+    },
+  ],
+  template: `
+    <div class="input-wrapper" [attr.data-state]="engine.inputState()">
+      @if (engine.hasPrefix()) {
+        <div class="input-prefix">
+          <ng-content select="[slot=prefix]"></ng-content>
+        </div>
+      }
+
+      <input
+        class="input-field"
+        [value]="engine.value()"
+        [disabled]="engine.disabled()"
+        [readOnly]="engine.readonly()"
+        [placeholder]="engine.placeholder()"
+        [attr.aria-invalid]="engine.ariaInvalid()"
+        [attr.aria-required]="engine.ariaRequired()"
+        [attr.aria-describedby]="hintId"
+        (input)="onInput($event)"
+        (focus)="engine.isFocused.set(true)"
+        (blur)="onBlur()"
+      />
+
+      @if (engine.hasSuffix()) {
+        <div class="input-suffix">
+          <ng-content select="[slot=suffix]"></ng-content>
+        </div>
+      }
+    </div>
+
+    @if (engine.hasHint() || engine.isInvalid()) {
+      <div [id]="hintId" class="input-hint">
+        <ng-content select="[slot=hint]"></ng-content>
+        @if (engine.isInvalid() && engine.errorMessage()) {
+          <span class="input-error">\{{ engine.errorMessage() }}</span>
+        }
+      </div>
+    }
+  `,
+  host: {
+    '[class]': 'skin.classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputComponent {
+  protected engine = inject(InputEngine);
+  protected skin = inject(InputSkin);
+  protected hintId = `input-hint-${Math.random().toString(36).slice(2)}`;
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.engine.value.set(target.value);
+  }
+
+  onBlur(): void {
+    this.engine.isFocused.set(false);
+    this.engine.markTouched();
+  }
+}

package/templates/input.skin.ts.hbs

@@ -0,0 +1,29 @@
+// @trine-owned
+// DO NOT EDIT — owned by user, never synced
+import { cva } from 'class-variance-authority';
+import { inject, Injectable } from '@angular/core';
+import { INPUT_STYLING_CONTRACT, InputStylingContract, InputState } from '@trineui/engine/input';
+
+@Injectable()
+export class InputSkin {
+  private contract = inject(INPUT_STYLING_CONTRACT);
+
+  private inputVariants = cva('input-field-base', {
+    variants: {
+      state: {
+        idle: 'input-idle',
+        focused: 'input-focused',
+        error: 'input-error',
+        disabled: 'input-disabled',
+      },
+    },
+    defaultVariants: {
+      state: 'idle',
+    },
+  });
+
+  classes(): string {
+    const state = this.contract.inputState();
+    return this.inputVariants({ state });
+  }
+}

package/templates/select.blueprint.ts.hbs

@@ -0,0 +1,86 @@
+// @trine-generated
+// @trine-version: {{engineVersion}}
+// @trine-schema: {{blueprintSchemaVersion}}
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  ViewChild,
+  ViewContainerRef,
+} from '@angular/core';
+import { SelectEngine } from '@trineui/engine/select';
+import { SelectSkin } from './select.skin';
+import { SELECT_STYLING_CONTRACT } from '@trineui/engine/select';
+
+@Component({
+  selector: 'ui-select',
+  standalone: true,
+  providers: [
+    SelectEngine,
+    {
+      provide: SELECT_STYLING_CONTRACT,
+      useExisting: SelectEngine,
+    },
+  ],
+  template: `
+    <button
+      type="button"
+      class="select-trigger"
+      role="combobox"
+      [attr.aria-expanded]="engine.ariaExpanded()"
+      [attr.aria-haspopup]="'listbox'"
+      [attr.aria-activedescendant]="engine.ariaActiveDescendant()"
+      [attr.data-state]="engine.selectState()"
+      [disabled]="engine.disabled()"
+      (click)="engine.toggle()"
+      (keydown)="engine.handleKeydown($event)"
+    >
+      <span class="select-value">\{{engine.selectedLabel()}}</span>
+      <span class="select-arrow" [attr.data-state]="engine.selectState()">
+        <svg viewBox="0 0 16 16" fill="none" class="select-arrow-icon">
+          <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </span>
+    </button>
+
+    <ng-template #panelTemplate>
+      <ul
+        class="select-panel"
+        role="listbox"
+        [attr.data-state]="engine.selectState()"
+      >
+        @for (option of engine.options(); track option.value; let i = $index) {
+          <li
+            role="option"
+            [id]="'select-option-' + i"
+            class="select-option"
+            [class.select-option-disabled]="option.disabled"
+            [attr.aria-selected]="engine.selectedValue() === option.value"
+            [attr.aria-disabled]="option.disabled ?? false"
+            [attr.data-state]="engine.selectedValue() === option.value ? 'selected' : 'unselected'"
+            [attr.data-active]="engine.activeIndex() === i ? 'true' : 'false'"
+            (click)="!option.disabled && engine.selectOption(option.value)"
+          >
+            {{ option.label }}
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `,
+  host: {
+    '[class]': 'skin.classes()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SelectComponent implements AfterViewInit {
+  protected engine = inject(SelectEngine);
+  protected skin = inject(SelectSkin);
+  private vcr = inject(ViewContainerRef);
+
+  @ViewChild('panelTemplate') panelTemplate: any;
+
+  ngAfterViewInit(): void {
+    this.engine.registerPanel(this.panelTemplate, this.vcr);
+  }
+}

package/templates/select.skin.ts.hbs

@@ -0,0 +1,53 @@
+// @trine-owned
+// DO NOT EDIT — owned by user, never synced
+import { cva } from 'class-variance-authority';
+import { inject, Injectable } from '@angular/core';
+import { SELECT_STYLING_CONTRACT, SelectStylingContract, SelectState } from '@trineui/engine/select';
+
+@Injectable()
+export class SelectSkin {
+  private contract = inject(SELECT_STYLING_CONTRACT);
+
+  private triggerVariants = cva('select-trigger-base', {
+    variants: {
+      state: {
+        open: 'select-trigger-open',
+        closed: 'select-trigger-closed',
+      },
+      disabled: {
+        true: 'select-trigger-disabled',
+      },
+    },
+    compoundVariants: [
+      {
+        state: 'open',
+        disabled: true,
+        class: 'select-trigger-open-disabled',
+      },
+    ],
+    defaultVariants: {
+      state: 'closed',
+    },
+  });
+
+  private panelVariants = cva('select-panel-base', {
+    variants: {
+      state: {
+        open: 'select-panel-open',
+        closed: 'select-panel-closed',
+      },
+    },
+    defaultVariants: {
+      state: 'closed',
+    },
+  });
+
+  classes(): string {
+    const state = this.contract.selectState();
+    const disabled = this.contract.disabled();
+    return [
+      this.triggerVariants({ state, disabled }),
+      this.panelVariants({ state }),
+    ].join(' ');
+  }
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["node"]
+  },
+  "include": ["src/**/*"]
+}