@vespera-ui/angular 0.4.0 → 0.7.0

package/src/area-bar.component.ts

@@ -0,0 +1,239 @@
+import { Component, Input } from '@angular/core';
+
+type Pt = [number, number];
+function smoothPath(pts: Pt[]): string {
+  if (pts.length < 2) return '';
+  let d = `M ${pts[0]![0]} ${pts[0]![1]}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const [x0, y0] = pts[i]!;
+    const [x1, y1] = pts[i + 1]!;
+    const cx = (x0 + x1) / 2;
+    d += ` C ${cx} ${y0} ${cx} ${y1} ${x1} ${y1}`;
+  }
+  return d;
+}
+function niceNum(n: number): string {
+  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(n % 1e6 === 0 ? 0 : 1) + 'M';
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(n % 1e3 === 0 ? 0 : 1) + 'k';
+  return String(n);
+}
+let acUid = 0;
+
+@Component({
+  selector: 'vsp-area-chart',
+  template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    <defs>
+      <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0" [attr.stop-color]="color" stop-opacity="0.22" />
+        <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+      </linearGradient>
+    </defs>
+    @for (t of ticks; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - padR"
+        [attr.y1]="t.y"
+        [attr.y2]="t.y"
+        stroke="var(--grid-line)"
+        stroke-width="1"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="t.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ t.label }}
+      </text>
+    }
+    @if (labels) {
+      @for (lb of labels; track $index; let i = $index) {
+        @if (showLabel(i)) {
+          <text
+            [attr.x]="sx(i, labels.length)"
+            [attr.y]="height - 8"
+            text-anchor="middle"
+            font-size="10"
+            fill="var(--text-faint)"
+            font-family="var(--font-mono)"
+          >
+            {{ lb }}
+          </text>
+        }
+      }
+    }
+    @for (ln of lineEls; track $index) {
+      @if (ln.area) {
+        <path [attr.d]="ln.area" [attr.fill]="'url(#' + gid + ')'" />
+      }
+      <path
+        [attr.d]="ln.d"
+        fill="none"
+        [attr.stroke]="ln.stroke"
+        stroke-width="2.4"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="ln.dash"
+        [style.opacity]="ln.opacity"
+      />
+    }
+  </svg>`,
+})
+export class VspAreaChart {
+  @Input() series: number[][] = [];
+  @Input() labels?: string[];
+  @Input() width = 760;
+  @Input() height = 260;
+  @Input() color = 'var(--accent)';
+  @Input() color2 = 'var(--accent-2)';
+  @Input() dual = false;
+  gid = 'ac' + ++acUid;
+  padL = 38;
+  padB = 26;
+  padT = 12;
+  padR = 8;
+  get innerW(): number {
+    return Math.max(10, this.width - this.padL - this.padR);
+  }
+  get innerH(): number {
+    return this.height - this.padB - this.padT;
+  }
+  get s0(): number[] {
+    return this.series[0] ?? [];
+  }
+  get s1(): number[] | undefined {
+    return this.series[1];
+  }
+  get max(): number {
+    return Math.max(...(this.dual && this.s1 ? [...this.s0, ...this.s1] : this.s0), 0) * 1.12;
+  }
+  get rng(): number {
+    return this.max || 1;
+  }
+  sx(i: number, len: number): number {
+    return this.padL + (i / Math.max(1, len - 1)) * this.innerW;
+  }
+  sy(v: number): number {
+    return this.padT + this.innerH - (v / this.rng) * this.innerH;
+  }
+  showLabel(i: number): boolean {
+    return !!this.labels && i % Math.ceil(this.labels.length / 7) === 0;
+  }
+  get ticks(): { y: number; label: string }[] {
+    return Array.from({ length: 5 }, (_, i) => ({
+      y: this.sy((this.max / 4) * i),
+      label: niceNum(Math.round((this.max / 4) * i)),
+    }));
+  }
+  get lineEls(): {
+    d: string;
+    area: string | null;
+    stroke: string;
+    dash: string | null;
+    opacity: number;
+  }[] {
+    const sets = this.dual && this.s1 ? [this.s0, this.s1] : [this.s0];
+    return sets.map((arr, li) => {
+      const pts: Pt[] = arr.map((v, i) => [this.sx(i, arr.length), this.sy(v)]);
+      const last = pts[pts.length - 1];
+      const first = pts[0];
+      return {
+        d: smoothPath(pts),
+        area:
+          li === 0 && first && last
+            ? `${smoothPath(pts)} L ${last[0]} ${this.padT + this.innerH} L ${first[0]} ${this.padT + this.innerH} Z`
+            : null,
+        stroke: li === 0 ? this.color : this.color2,
+        dash: li === 1 ? '5 5' : null,
+        opacity: li === 1 ? 0.7 : 1,
+      };
+    });
+  }
+}
+
+@Component({
+  selector: 'vsp-bar-chart',
+  template: `<svg [attr.width]="width" [attr.height]="height" style="display: block">
+    @for (g of grid; track $index) {
+      <line
+        [attr.x1]="padL"
+        [attr.x2]="width - 8"
+        [attr.y1]="g.y"
+        [attr.y2]="g.y"
+        stroke="var(--grid-line)"
+      />
+      <text
+        [attr.x]="padL - 8"
+        [attr.y]="g.y + 3.5"
+        text-anchor="end"
+        font-size="10"
+        fill="var(--text-faint)"
+        font-family="var(--font-mono)"
+      >
+        {{ g.label }}
+      </text>
+    }
+    @for (b of bars; track $index) {
+      <rect
+        [attr.x]="b.x"
+        [attr.y]="b.y"
+        [attr.width]="b.w"
+        [attr.height]="b.h"
+        rx="4"
+        [attr.fill]="barFill"
+      />
+      @if (b.label != null) {
+        <text
+          [attr.x]="b.x + b.w / 2"
+          [attr.y]="height - 8"
+          text-anchor="middle"
+          font-size="10"
+          fill="var(--text-faint)"
+          font-family="var(--font-mono)"
+        >
+          {{ b.label }}
+        </text>
+      }
+    }
+  </svg>`,
+})
+export class VspBarChart {
+  @Input() data: number[] = [];
+  @Input() labels?: string[];
+  @Input() width = 620;
+  @Input() height = 240;
+  @Input() color = 'var(--accent)';
+  padL = 34;
+  padB = 26;
+  padT = 10;
+  get innerW(): number {
+    return Math.max(10, this.width - this.padL - 8);
+  }
+  get innerH(): number {
+    return this.height - this.padB - this.padT;
+  }
+  get max(): number {
+    return Math.max(...this.data, 0) * 1.15 || 1;
+  }
+  get bw(): number {
+    return this.innerW / (this.data.length || 1);
+  }
+  get barFill(): string {
+    return `color-mix(in oklab, ${this.color} 78%, transparent)`;
+  }
+  get grid(): { y: number; label: string }[] {
+    return [0, 0.5, 1].map((f) => ({
+      y: this.padT + this.innerH - f * this.innerH,
+      label: niceNum(Math.round(this.max * f)),
+    }));
+  }
+  get bars(): { x: number; y: number; w: number; h: number; label: string | undefined }[] {
+    return this.data.map((v, i) => {
+      const bh = (v / this.max) * this.innerH;
+      const x = this.padL + i * this.bw + this.bw * 0.18;
+      const bwi = this.bw * 0.64;
+      return { x, y: this.padT + this.innerH - bh, w: bwi, h: bh, label: this.labels?.[i] };
+    });
+  }
+}

package/src/otp.component.ts

@@ -0,0 +1,47 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren,
+} from '@angular/core';
+
+@Component({
+  selector: 'vsp-otp-input',
+  template: `<div class="ui-otp">
+    @for (i of indices; track i) {
+      <input
+        #otp
+        inputmode="numeric"
+        maxlength="1"
+        [value]="value[i] ?? ''"
+        (input)="set(i, otp.value)"
+        (keydown)="onKey(i, $event)"
+      />
+    }
+  </div>`,
+})
+export class VspOTPInput {
+  @Input() length = 6;
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+  @ViewChildren('otp') inputs!: QueryList<ElementRef<HTMLInputElement>>;
+
+  get indices(): number[] {
+    return Array.from({ length: this.length }, (_, i) => i);
+  }
+  set(i: number, raw: string): void {
+    const clean = raw.replace(/\D/g, '');
+    const chars = Array.from({ length: this.length }, (_, k) => this.value[k] ?? '');
+    chars[i] = clean.slice(-1);
+    this.value = chars.join('');
+    this.valueChange.emit(this.value);
+    if (clean && i < this.length - 1) this.inputs.get(i + 1)?.nativeElement.focus();
+  }
+  onKey(i: number, e: KeyboardEvent): void {
+    if (e.key === 'Backspace' && !this.value[i] && i > 0)
+      this.inputs.get(i - 1)?.nativeElement.focus();
+  }
+}

package/src/public-api.ts

@@ -13,3 +13,6 @@ export * from './data.component';
 export * from './structure.component';
 export * from './charts.component';
 export * from './extras.component';
+export * from './tree.component';
+export * from './otp.component';
+export * from './area-bar.component';

package/src/tree.component.ts

@@ -0,0 +1,114 @@
+import { NgTemplateOutlet } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+
+export interface TreeNodeData {
+  id?: string;
+  label: string;
+  badge?: string;
+  children?: TreeNodeData[];
+}
+
+@Component({
+  selector: 'vsp-tree',
+  imports: [NgTemplateOutlet],
+  template: `<div class="ui-tree">
+      @for (n of data; track $index) {
+        <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: n }" />
+      }
+    </div>
+
+    <ng-template #nodeTpl let-n>
+      <div>
+        <div
+          [class]="rowCls(n)"
+          role="button"
+          tabindex="0"
+          (click)="activate(n)"
+          (keydown.enter)="activate(n)"
+        >
+          @if (hasKids(n)) {
+            <svg
+              class="tw-chev"
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M9 18l6-6-6-6" />
+            </svg>
+          } @else {
+            <span style="width: 16px; flex-shrink: 0"></span>
+          }
+          <svg
+            class="tw-icon"
+            viewBox="0 0 24 24"
+            width="16"
+            height="16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            @if (hasKids(n)) {
+              <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
+            } @else {
+              <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6" />
+            }
+          </svg>
+          <span
+            style="flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
+            >{{ n.label }}</span
+          >
+          @if (n.badge != null) {
+            <span class="mono" style="font-size: 11px; color: var(--text-faint)">{{
+              n.badge
+            }}</span>
+          }
+        </div>
+        @if (hasKids(n) && expanded.has(id(n))) {
+          <div class="ui-tree-children">
+            @for (c of n.children; track $index) {
+              <ng-container *ngTemplateOutlet="nodeTpl; context: { $implicit: c }" />
+            }
+          </div>
+        }
+      </div>
+    </ng-template>`,
+})
+export class VspTree implements OnInit {
+  @Input() data: TreeNodeData[] = [];
+  @Input() defaultExpanded: string[] = [];
+  expanded = new Set<string>();
+  selected: string | null = null;
+
+  ngOnInit(): void {
+    this.expanded = new Set(this.defaultExpanded);
+  }
+  id(n: TreeNodeData): string {
+    return n.id ?? n.label;
+  }
+  hasKids(n: TreeNodeData): boolean {
+    return (n.children ?? []).length > 0;
+  }
+  rowCls(n: TreeNodeData): string {
+    const i = this.id(n);
+    return (
+      'ui-tree-row' + (this.expanded.has(i) ? ' open' : '') + (this.selected === i ? ' sel' : '')
+    );
+  }
+  activate(n: TreeNodeData): void {
+    const i = this.id(n);
+    if (this.hasKids(n)) {
+      const next = new Set(this.expanded);
+      if (next.has(i)) next.delete(i);
+      else next.add(i);
+      this.expanded = next;
+    }
+    this.selected = i;
+  }
+}