@vespera-ui/angular 0.1.0 → 0.2.0

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/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);
+  }
+}

package/src/forms.component.ts

@@ -0,0 +1,113 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type SelectOption = string | { value: string; label: string; sub?: string };
+
+const val = (o: SelectOption): string => (typeof o === 'string' ? o : o.value);
+const lbl = (o: SelectOption): string => (typeof o === 'string' ? o : o.label);
+const subOf = (o: SelectOption): string | undefined => (typeof o === 'object' ? o.sub : undefined);
+
+@Component({
+  selector: 'vsp-radio',
+  template: `<label class="ui-opt">
+    <input
+      type="radio"
+      [name]="name"
+      [value]="value"
+      [checked]="checked"
+      (change)="select.emit()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="dotCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`,
+})
+export class VspRadio {
+  @Input() checked = false;
+  @Input() label?: string;
+  @Input() sub?: string;
+  @Input() name?: string;
+  @Input() value?: string;
+  @Output() select = new EventEmitter<void>();
+  get dotCls(): string {
+    return this.checked ? 'ui-radio-dot on' : 'ui-radio-dot';
+  }
+}
+
+@Component({
+  selector: 'vsp-radio-group',
+  imports: [VspRadio],
+  template: `<div style="display: flex; flex-direction: column; gap: 12px">
+    @for (o of options; track val(o)) {
+      <vsp-radio
+        [name]="name"
+        [label]="lbl(o)"
+        [sub]="subOf(o)"
+        [value]="val(o)"
+        [checked]="value === val(o)"
+        (select)="pick(val(o))"
+      />
+    }
+  </div>`,
+})
+export class VspRadioGroup {
+  @Input() value?: string;
+  @Output() valueChange = new EventEmitter<string>();
+  @Input() options: SelectOption[] = [];
+  @Input() name = 'vsp-radio';
+  val = val;
+  lbl = lbl;
+  subOf = subOf;
+  pick(v: string): void {
+    this.value = v;
+    this.valueChange.emit(v);
+  }
+}
+
+@Component({
+  selector: 'vsp-slider',
+  template: `<input
+    type="range"
+    class="ui-slider"
+    [value]="value"
+    [min]="min"
+    [max]="max"
+    [step]="step"
+    (input)="onInput($event)"
+  />`,
+})
+export class VspSlider {
+  @Input() value = 0;
+  @Output() valueChange = new EventEmitter<number>();
+  @Input() min = 0;
+  @Input() max = 100;
+  @Input() step = 1;
+  onInput(e: Event): void {
+    this.value = Number((e.target as HTMLInputElement).value);
+    this.valueChange.emit(this.value);
+  }
+}
+
+@Component({
+  selector: 'vsp-native-select',
+  template: `<select class="ui-select" [value]="value" (change)="onChange($event)">
+    @for (o of options; track val(o)) {
+      <option [value]="val(o)">{{ lbl(o) }}</option>
+    }
+  </select>`,
+})
+export class VspNativeSelect {
+  @Input() value?: string;
+  @Output() valueChange = new EventEmitter<string>();
+  @Input() options: SelectOption[] = [];
+  val = val;
+  lbl = lbl;
+  onChange(e: Event): void {
+    this.value = (e.target as HTMLSelectElement).value;
+    this.valueChange.emit(this.value);
+  }
+}

package/src/media.component.ts

@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'vsp-avatar',
+  template: `<span
+    class="vsp-avatar"
+    [style.width.px]="size"
+    [style.height.px]="size"
+    [style.fontSize.px]="size * 0.38"
+    [style.background]="bg"
+    >{{ initials }}</span
+  >`,
+})
+export class VspAvatar {
+  @Input() name = '';
+  @Input() hue = 0;
+  @Input() size = 34;
+  get initials(): string {
+    return this.name
+      .split(' ')
+      .map((s) => s.charAt(0))
+      .slice(0, 2)
+      .join('')
+      .toUpperCase();
+  }
+  get bg(): string {
+    return `linear-gradient(140deg, oklch(0.62 0.16 ${this.hue}), oklch(0.55 0.17 ${(this.hue + 50) % 360}))`;
+  }
+}
+
+export interface Person {
+  name: string;
+  hue?: number;
+}
+
+@Component({
+  selector: 'vsp-avatar-group',
+  imports: [VspAvatar],
+  template: `<div style="display: flex; align-items: center">
+    @for (p of shown; track $index) {
+      <span
+        [style.marginLeft.px]="$index ? -10 : 0"
+        [style.zIndex]="shown.length - $index"
+        style="border: 2px solid var(--surface-1); border-radius: 50%; position: relative"
+      >
+        <vsp-avatar [name]="p.name" [hue]="p.hue ?? 0" [size]="size" />
+      </span>
+    }
+    @if (extra > 0) {
+      <span
+        [style.width.px]="size"
+        [style.height.px]="size"
+        [style.fontSize.px]="size * 0.34"
+        style="margin-left: -10px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); border: 2px solid var(--surface-1); font-weight: 700; color: var(--text-dim)"
+        >+{{ extra }}</span
+      >
+    }
+  </div>`,
+})
+export class VspAvatarGroup {
+  @Input() people: Person[] = [];
+  @Input() max = 4;
+  @Input() size = 32;
+  get shown(): Person[] {
+    return this.people.slice(0, this.max);
+  }
+  get extra(): number {
+    return this.people.length - this.shown.length;
+  }
+}
+
+@Component({
+  selector: 'vsp-segmented',
+  template: `<div class="ui-seg">
+    @for (o of options; track o) {
+      <button type="button" [class.on]="value === o" (click)="pick(o)">{{ o }}</button>
+    }
+  </div>`,
+})
+export class VspSegmented {
+  @Input() value?: string;
+  @Output() valueChange = new EventEmitter<string>();
+  @Input() options: string[] = [];
+  pick(o: string): void {
+    this.value = o;
+    this.valueChange.emit(o);
+  }
+}