@vespera-ui/angular 0.1.0 → 0.3.0

package/src/alert.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+
+export type AlertTone = 'info' | 'pos' | 'warn' | 'neg';
+
+@Component({
+  selector: 'vsp-alert',
+  template: `<div [class]="cls">
+    <ng-content select="[slot=icon]" />
+    <div style="flex: 1">
+      @if (title) {
+        <div class="ui-alert-title">{{ title }}</div>
+      }
+      <div class="ui-alert-body"><ng-content /></div>
+    </div>
+    <ng-content select="[slot=action]" />
+  </div>`,
+})
+export class VspAlert {
+  @Input() tone: AlertTone = 'info';
+  @Input() title?: string;
+  get cls(): string {
+    return `ui-alert ${this.tone}`;
+  }
+}

package/src/badge.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input } from '@angular/core';
+
+export type BadgeTone = 'pos' | 'neg' | 'warn' | 'info' | 'muted';
+
+@Component({
+  selector: 'vsp-badge',
+  template: `<span [class]="cls">
+    @if (dot) {
+      <i></i>
+    }
+    <ng-content />
+  </span>`,
+})
+export class VspBadge {
+  @Input() tone: BadgeTone = 'muted';
+  @Input() dot = false;
+
+  get cls(): string {
+    return `badge badge-${this.tone}`;
+  }
+}

package/src/button.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input } from '@angular/core';
+
+export type ButtonVariant = 'primary' | 'ghost' | 'subtle' | 'outline' | 'danger';
+
+@Component({
+  selector: 'vsp-button',
+  template: `<button [class]="cls" [disabled]="disabled || loading">
+    @if (loading) {
+      <span class="ui-spinner" aria-hidden="true"></span>
+    }
+    <ng-content />
+  </button>`,
+})
+export class VspButton {
+  @Input() variant: ButtonVariant = 'ghost';
+  @Input() size?: 'sm';
+  @Input() loading = false;
+  @Input() disabled = false;
+
+  get cls(): string {
+    return ['btn', `btn-${this.variant}`, this.size === 'sm' ? 'btn-sm' : '']
+      .filter(Boolean)
+      .join(' ');
+  }
+}

package/src/card.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'vsp-card',
+  template: `<div [class]="cls"><ng-content /></div>`,
+})
+export class VspCard {
+  @Input() pad = false;
+  get cls(): string {
+    return this.pad ? 'card card-pad' : 'card';
+  }
+}
+
+@Component({
+  selector: 'vsp-card-head',
+  template: `<div class="card-head">
+    <div style="min-width: 0">
+      <div class="ttl">{{ title }}</div>
+      @if (desc) {
+        <div class="eyebrow" style="margin-top: 3px">{{ desc }}</div>
+      }
+    </div>
+    <div class="vsp-top-spacer"></div>
+    <ng-content select="[slot=right]" />
+  </div>`,
+})
+export class VspCardHead {
+  @Input() title?: string;
+  @Input() desc?: string;
+}

package/src/charts.component.ts

@@ -0,0 +1,202 @@
+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;
+}
+
+let sparkUid = 0;
+
+@Component({
+  selector: 'vsp-sparkline',
+  template: `<svg
+    [attr.width]="w"
+    [attr.height]="h"
+    [attr.viewBox]="'0 0 ' + w + ' ' + h"
+    style="display: block; overflow: visible"
+  >
+    @if (fill) {
+      <defs>
+        <linearGradient [id]="gid" x1="0" x2="0" y1="0" y2="1">
+          <stop offset="0" [attr.stop-color]="color" stop-opacity="0.28" />
+          <stop offset="1" [attr.stop-color]="color" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+      <path [attr.d]="areaD" [attr.fill]="'url(#' + gid + ')'" />
+    }
+    <path [attr.d]="d" fill="none" [attr.stroke]="color" stroke-width="2" stroke-linecap="round" />
+    <circle [attr.cx]="last[0]" [attr.cy]="last[1]" r="2.6" [attr.fill]="color" />
+  </svg>`,
+})
+export class VspSparkline {
+  @Input() data: number[] = [];
+  @Input() color = 'var(--accent)';
+  @Input() w = 110;
+  @Input() h = 34;
+  @Input() fill = true;
+  gid = 'spk' + ++sparkUid;
+  get pts(): Pt[] {
+    const min = Math.min(...this.data);
+    const max = Math.max(...this.data);
+    const rng = max - min || 1;
+    return this.data.map((v, i) => [
+      (i / (this.data.length - 1)) * this.w,
+      this.h - 3 - ((v - min) / rng) * (this.h - 6),
+    ]);
+  }
+  get d(): string {
+    return smoothPath(this.pts);
+  }
+  get areaD(): string {
+    return `${this.d} L ${this.w} ${this.h} L 0 ${this.h} Z`;
+  }
+  get last(): Pt {
+    return this.pts[this.pts.length - 1] ?? [0, 0];
+  }
+}
+
+export interface DonutDatum {
+  label: string;
+  value: number;
+  color: string;
+}
+
+@Component({
+  selector: 'vsp-donut',
+  template: `<div style="display: flex; align-items: center; gap: 22px">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg); flex-shrink: 0">
+      <circle
+        [attr.cx]="c"
+        [attr.cy]="c"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      @for (s of segs; track $index) {
+        <circle
+          [attr.cx]="c"
+          [attr.cy]="c"
+          [attr.r]="r"
+          fill="none"
+          [attr.stroke]="s.color"
+          [attr.stroke-width]="thickness"
+          [attr.stroke-dasharray]="s.dash"
+          [attr.stroke-dashoffset]="s.offset"
+          stroke-linecap="round"
+        />
+      }
+    </svg>
+    <div style="display: flex; flex-direction: column; gap: 9px; flex: 1">
+      @for (d of data; track $index) {
+        <div style="display: flex; align-items: center; gap: 9px; font-size: 12.5px">
+          <i
+            [style.background]="d.color"
+            style="width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0"
+          ></i>
+          <span style="color: var(--text-dim); flex: 1">{{ d.label }}</span>
+          <span class="mono tnum" style="font-weight: 600">{{ pct(d.value) }}%</span>
+        </div>
+      }
+    </div>
+  </div>`,
+})
+export class VspDonut {
+  @Input() data: DonutDatum[] = [];
+  @Input() size = 168;
+  @Input() thickness = 22;
+  get total(): number {
+    return this.data.reduce((s, d) => s + d.value, 0) || 1;
+  }
+  get r(): number {
+    return (this.size - this.thickness) / 2;
+  }
+  get c(): number {
+    return this.size / 2;
+  }
+  get circ(): number {
+    return 2 * Math.PI * this.r;
+  }
+  get segs(): { color: string; dash: string; offset: number }[] {
+    let acc = 0;
+    return this.data.map((d) => {
+      const len = (d.value / this.total) * this.circ;
+      const seg = { color: d.color, dash: `${len - 2.5} ${this.circ - len + 2.5}`, offset: -acc };
+      acc += len;
+      return seg;
+    });
+  }
+  pct(v: number): number {
+    return Math.round((v / this.total) * 100);
+  }
+}
+
+@Component({
+  selector: 'vsp-stat-card',
+  imports: [VspSparkline],
+  template: `<div
+    class="card card-pad vsp-rise"
+    style="display: flex; flex-direction: column; gap: 14px"
+  >
+    <div style="display: flex; align-items: center; justify-content: space-between">
+      <div style="display: flex; align-items: center; gap: 10px">
+        <span
+          style="width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 13%, transparent); color: var(--accent)"
+        >
+          <ng-content select="[slot=icon]" />
+        </span>
+        <span class="eyebrow">{{ label }}</span>
+      </div>
+      @if (delta != null) {
+        <span [class]="deltaCls">
+          <svg
+            viewBox="0 0 24 24"
+            width="11"
+            height="11"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path [attr.d]="arrow" />
+          </svg>
+          {{ delta }}
+        </span>
+      }
+    </div>
+    <div style="display: flex; align-items: flex-end; justify-content: space-between; gap: 12px">
+      <div
+        class="tnum"
+        style="font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1"
+      >
+        {{ value }}
+      </div>
+      @if (spark) {
+        <vsp-sparkline [data]="spark" [color]="sparkColor" />
+      }
+    </div>
+  </div>`,
+})
+export class VspStatCard {
+  @Input() label?: string;
+  @Input() value?: string;
+  @Input() delta?: string;
+  @Input() deltaDir: 'up' | 'down' = 'up';
+  @Input() spark?: number[];
+  @Input() sparkColor = 'var(--accent)';
+  get deltaCls(): string {
+    return 'badge ' + (this.deltaDir === 'up' ? 'badge-pos' : 'badge-neg');
+  }
+  get arrow(): string {
+    return this.deltaDir === 'up' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7';
+  }
+}

package/src/data.component.ts

@@ -0,0 +1,181 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'vsp-circular-progress',
+  template: `<div style="position: relative" [style.width.px]="size" [style.height.px]="size">
+    <svg [attr.width]="size" [attr.height]="size" style="transform: rotate(-90deg)">
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        stroke="var(--surface-3)"
+        [attr.stroke-width]="thickness"
+      />
+      <circle
+        [attr.cx]="size / 2"
+        [attr.cy]="size / 2"
+        [attr.r]="r"
+        fill="none"
+        [attr.stroke]="color"
+        [attr.stroke-width]="thickness"
+        stroke-linecap="round"
+        [attr.stroke-dasharray]="circ"
+        [attr.stroke-dashoffset]="offset"
+        style="transition: stroke-dashoffset 0.5s cubic-bezier(0.3, 0.7, 0.3, 1)"
+      />
+    </svg>
+    <div
+      class="tnum"
+      [style.fontSize.px]="size * 0.24"
+      style="position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800"
+    >
+      {{ display }}
+    </div>
+  </div>`,
+})
+export class VspCircularProgress {
+  @Input() value = 0;
+  @Input() size = 76;
+  @Input() thickness = 7;
+  @Input() color = 'var(--accent)';
+  @Input() label?: string;
+  get r(): number {
+    return (this.size - this.thickness) / 2;
+  }
+  get circ(): number {
+    return 2 * Math.PI * this.r;
+  }
+  get offset(): number {
+    return this.circ * (1 - Math.min(100, this.value) / 100);
+  }
+  get display(): string {
+    return this.label ?? `${Math.round(this.value)}%`;
+  }
+}
+
+@Component({
+  selector: 'vsp-stat',
+  template: `<div class="card card-pad" style="display: flex; align-items: center; gap: 13px">
+    <span
+      #ic
+      [style.display]="ic.childElementCount ? '' : 'none'"
+      [style.background]="'color-mix(in oklab, ' + tone + ' 14%, transparent)'"
+      [style.color]="tone"
+      style="width: 38px; height: 38px; border-radius: var(--r-sm); flex-shrink: 0; display: grid; place-items: center"
+    >
+      <ng-content select="[slot=icon]" />
+    </span>
+    <div style="min-width: 0">
+      <div class="eyebrow">{{ label }}</div>
+      <div style="display: flex; align-items: baseline; gap: 8px; margin-top: 3px">
+        <span class="tnum" style="font-size: 22px; font-weight: 800; letter-spacing: -0.02em">{{
+          value
+        }}</span>
+        @if (delta != null) {
+          <span [class]="deltaCls" style="padding: 1px 6px">
+            <svg
+              viewBox="0 0 24 24"
+              width="10"
+              height="10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path [attr.d]="arrow" />
+            </svg>
+            {{ delta }}
+          </span>
+        }
+      </div>
+    </div>
+  </div>`,
+})
+export class VspStat {
+  @Input() label?: string;
+  @Input() value?: string;
+  @Input() delta?: string;
+  @Input() deltaDir: 'up' | 'down' = 'up';
+  @Input() tone = 'var(--accent)';
+  get deltaCls(): string {
+    return 'badge ' + (this.deltaDir === 'up' ? 'badge-pos' : 'badge-neg');
+  }
+  get arrow(): string {
+    return this.deltaDir === 'up' ? 'M12 19V5M5 12l7-7 7 7' : 'M12 5v14M5 12l7 7 7-7';
+  }
+}
+
+export type TimelineTone = 'pos' | 'neg' | 'warn' | 'info';
+export interface TimelineItem {
+  title: string;
+  time?: string;
+  body?: string;
+  tone?: TimelineTone;
+}
+const TL_TONE: Record<TimelineTone, string> = {
+  pos: 'var(--success)',
+  neg: 'var(--danger)',
+  warn: 'var(--warning)',
+  info: 'var(--accent)',
+};
+
+@Component({
+  selector: 'vsp-timeline',
+  template: `<div class="ui-tl">
+    @for (it of items; track $index) {
+      <div class="ui-tl-item">
+        <span class="ui-tl-dot" [style]="dotStyle(it.tone)">
+          <svg
+            viewBox="0 0 24 24"
+            width="14"
+            height="14"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+        </span>
+        <div class="ui-tl-body">
+          <div style="display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap">
+            <span style="font-weight: 600; font-size: 13.5px">{{ it.title }}</span>
+            @if (it.time) {
+              <span class="eyebrow" style="margin-left: auto">{{ it.time }}</span>
+            }
+          </div>
+          @if (it.body) {
+            <div style="font-size: 12.5px; color: var(--text-dim); margin-top: 3px">
+              {{ it.body }}
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>`,
+})
+export class VspTimeline {
+  @Input() items: TimelineItem[] = [];
+  dotStyle(tone?: TimelineTone): string {
+    if (!tone) return '';
+    const c = TL_TONE[tone];
+    return `background:color-mix(in oklab, ${c} 14%, transparent);color:${c};border-color:color-mix(in oklab, ${c} 30%, transparent)`;
+  }
+}
+
+@Component({
+  selector: 'vsp-description-list',
+  template: `<dl class="ui-dl">
+    @for (item of items; track $index; let last = $last) {
+      <dt [class.last]="last">{{ item[0] }}</dt>
+      <dd [class.last]="last">{{ item[1] }}</dd>
+    }
+  </dl>`,
+})
+export class VspDescriptionList {
+  @Input() items: [string, string][] = [];
+}

package/src/display.component.ts

@@ -0,0 +1,29 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'vsp-tag',
+  template: `<span class="ui-tag">
+    <ng-content />
+    <button type="button" aria-label="Remove" (click)="remove.emit()">×</button>
+  </span>`,
+})
+export class VspTag {
+  @Output() remove = new EventEmitter<void>();
+}
+
+@Component({
+  selector: 'vsp-kbd',
+  template: `<kbd class="ui-kbd"><ng-content /></kbd>`,
+})
+export class VspKbd {}
+
+@Component({
+  selector: 'vsp-divider',
+  template: `<hr [class]="cls" />`,
+})
+export class VspDivider {
+  @Input() vertical = false;
+  get cls(): string {
+    return this.vertical ? 'ui-divider v' : 'ui-divider';
+  }
+}

package/src/feedback.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'vsp-spinner',
+  template: `<span [class]="cls" aria-hidden="true"></span>`,
+})
+export class VspSpinner {
+  @Input() size?: 'lg';
+  get cls(): string {
+    return this.size === 'lg' ? 'ui-spinner lg' : 'ui-spinner';
+  }
+}
+
+@Component({
+  selector: 'vsp-icon-button',
+  template: `<button type="button" class="vsp-icon-btn" [attr.aria-label]="label">
+    <ng-content />
+  </button>`,
+})
+export class VspIconButton {
+  @Input() label?: string;
+}
+
+@Component({
+  selector: 'vsp-progress',
+  template: `<div class="meter" [style.height.px]="height">
+    <i [style.width.%]="clamped" [style.background]="tone" style="transition: width 0.3s"></i>
+  </div>`,
+})
+export class VspProgress {
+  @Input() value = 0;
+  @Input() tone?: string;
+  @Input() height = 6;
+  get clamped(): number {
+    return Math.min(100, this.value);
+  }
+}
+
+@Component({
+  selector: 'vsp-skeleton',
+  template: `<div
+    class="skel"
+    [style.width]="px(w)"
+    [style.height]="px(h)"
+    [style.borderRadius]="px(r)"
+  ></div>`,
+})
+export class VspSkeleton {
+  @Input() w: string | number = '100%';
+  @Input() h: string | number = 12;
+  @Input() r: number = 7;
+  px(v: string | number): string {
+    return typeof v === 'number' ? `${v}px` : v;
+  }
+}

package/src/field.component.ts

@@ -0,0 +1,61 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'vsp-field',
+  template: `<div class="ui-field">
+    @if (label) {
+      <label class="ui-label" [attr.for]="htmlFor">
+        <span
+          >{{ label }}
+          @if (required) {
+            <span class="req"> *</span>
+          }
+        </span>
+      </label>
+    }
+    <ng-content />
+    @if (error || hint) {
+      <span [class]="hintCls">{{ error || hint }}</span>
+    }
+  </div>`,
+})
+export class VspField {
+  @Input() label?: string;
+  @Input() required = false;
+  @Input() hint?: string;
+  @Input() error?: string;
+  @Input() htmlFor?: string;
+  get hintCls(): string {
+    return this.error ? 'ui-hint err' : 'ui-hint';
+  }
+}
+
+@Component({
+  selector: 'vsp-input',
+  template: `<input [class]="cls" [value]="value" (input)="onInput($event)" />`,
+})
+export class VspInput {
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+  @Input() invalid = false;
+  get cls(): string {
+    return this.invalid ? 'ui-input invalid' : 'ui-input';
+  }
+  onInput(e: Event): void {
+    this.value = (e.target as HTMLInputElement).value;
+    this.valueChange.emit(this.value);
+  }
+}
+
+@Component({
+  selector: 'vsp-textarea',
+  template: `<textarea class="ui-textarea" [value]="value" (input)="onInput($event)"></textarea>`,
+})
+export class VspTextarea {
+  @Input() value = '';
+  @Output() valueChange = new EventEmitter<string>();
+  onInput(e: Event): void {
+    this.value = (e.target as HTMLTextAreaElement).value;
+    this.valueChange.emit(this.value);
+  }
+}