@vespera-ui/angular 0.1.0 → 0.3.0

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

package/src/nav.component.ts

@@ -0,0 +1,199 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type TabItem = string | { value: string; label: string; count?: number };
+
+@Component({
+  selector: 'vsp-tabs',
+  template: `<div class="ui-tabs" style="align-items: center">
+    @for (t of tabs; track id(t)) {
+      <button type="button" [class]="cls(t)" (click)="pick(id(t))">
+        {{ lbl(t) }}
+        @if (cnt(t) != null) {
+          <span class="badge badge-muted" style="margin-left: 7px">{{ cnt(t) }}</span>
+        }
+      </button>
+    }
+    <div style="flex: 1"></div>
+    <ng-content select="[slot=right]" />
+  </div>`,
+})
+export class VspTabs {
+  @Input() tabs: TabItem[] = [];
+  @Input() value?: string;
+  @Output() valueChange = new EventEmitter<string>();
+  id(t: TabItem): string {
+    return typeof t === 'string' ? t : t.value;
+  }
+  lbl(t: TabItem): string {
+    return typeof t === 'string' ? t : t.label;
+  }
+  cnt(t: TabItem): number | undefined {
+    return typeof t === 'object' ? t.count : undefined;
+  }
+  cls(t: TabItem): string {
+    return 'ui-tab' + (this.value === this.id(t) ? ' on' : '');
+  }
+  pick(v: string): void {
+    this.value = v;
+    this.valueChange.emit(v);
+  }
+}
+
+@Component({
+  selector: 'vsp-breadcrumb',
+  template: `<nav style="display: flex; align-items: center; gap: 7px; font-size: 12.5px">
+    @for (it of items; track $index; let i = $index, last = $last) {
+      @if (i > 0) {
+        <svg
+          viewBox="0 0 24 24"
+          width="13"
+          height="13"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          style="color: var(--text-faint)"
+        >
+          <path d="M9 18l6-6-6-6" />
+        </svg>
+      }
+      <span
+        [style.color]="last ? 'var(--text)' : 'var(--text-dim)'"
+        [style.fontWeight]="last ? 600 : 500"
+        >{{ it }}</span
+      >
+    }
+  </nav>`,
+})
+export class VspBreadcrumb {
+  @Input() items: string[] = [];
+}
+
+interface PageItem {
+  gap: boolean;
+  n: number;
+}
+
+@Component({
+  selector: 'vsp-pagination',
+  template: `<div style="display: flex; gap: 4px; align-items: center">
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page === 0"
+      aria-label="Previous page"
+      (click)="go(page - 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M15 18l-6-6 6-6" />
+      </svg>
+    </button>
+    @for (item of nums; track $index) {
+      @if (item.gap) {
+        <span class="mono" style="padding: 0 6px; color: var(--text-faint)">…</span>
+      } @else {
+        <button
+          type="button"
+          [class]="numCls(item.n)"
+          style="min-width: 32px; padding: 0"
+          (click)="go(item.n)"
+        >
+          {{ item.n + 1 }}
+        </button>
+      }
+    }
+    <button
+      type="button"
+      class="btn btn-ghost btn-sm"
+      [disabled]="page >= pages - 1"
+      aria-label="Next page"
+      (click)="go(page + 1)"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        width="14"
+        height="14"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M9 18l6-6-6-6" />
+      </svg>
+    </button>
+  </div>`,
+})
+export class VspPagination {
+  @Input() page = 0;
+  @Output() pageChange = new EventEmitter<number>();
+  @Input() pages = 1;
+  get nums(): PageItem[] {
+    const r: PageItem[] = [];
+    for (let i = 0; i < this.pages; i++) {
+      if (i === 0 || i === this.pages - 1 || Math.abs(i - this.page) <= 1)
+        r.push({ gap: false, n: i });
+      else if (!r[r.length - 1]?.gap) r.push({ gap: true, n: -1 });
+    }
+    return r;
+  }
+  numCls(n: number): string {
+    return 'btn btn-sm ' + (n === this.page ? 'btn-primary' : 'btn-subtle');
+  }
+  go(p: number): void {
+    this.page = p;
+    this.pageChange.emit(p);
+  }
+}
+
+@Component({
+  selector: 'vsp-stepper',
+  template: `<div class="ui-steps">
+    @for (s of steps; track $index; let i = $index) {
+      @if (i > 0) {
+        <div [class]="barCls(i)"></div>
+      }
+      <div [class]="stepCls(i)">
+        <span class="ui-step-dot">
+          @if (i < current) {
+            <svg
+              viewBox="0 0 24 24"
+              width="14"
+              height="14"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          } @else {
+            {{ i + 1 }}
+          }
+        </span>
+        <span class="ui-step-label">{{ s }}</span>
+      </div>
+    }
+  </div>`,
+})
+export class VspStepper {
+  @Input() steps: string[] = [];
+  @Input() current = 0;
+  barCls(i: number): string {
+    return 'ui-step-bar' + (i <= this.current ? ' done' : '');
+  }
+  stepCls(i: number): string {
+    return 'ui-step ' + (i < this.current ? 'done' : i === this.current ? 'active' : 'pending');
+  }
+}

package/src/public-api.ts

@@ -0,0 +1,14 @@
+export * from './button.component';
+export * from './badge.component';
+export * from './display.component';
+export * from './media.component';
+export * from './feedback.component';
+export * from './card.component';
+export * from './alert.component';
+export * from './field.component';
+export * from './toggle.component';
+export * from './forms.component';
+export * from './nav.component';
+export * from './data.component';
+export * from './structure.component';
+export * from './charts.component';

package/src/structure.component.ts

@@ -0,0 +1,162 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+export type BannerTone = 'info' | 'warn' | 'accent';
+const BANNER_ICON: Record<BannerTone, string> = {
+  info: 'M12 3l1.6 5L19 9.6l-5 1.6L12 16l-1.6-4.8L5 9.6l5.4-1.6z',
+  warn: 'M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9',
+  accent: 'M13 2L3 14h9l-1 8 10-12h-9l1-8z',
+};
+
+@Component({
+  selector: 'vsp-banner',
+  template: `<div [class]="cls">
+    <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+    @if (!ic.childElementCount) {
+      <svg
+        viewBox="0 0 24 24"
+        width="18"
+        height="18"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path [attr.d]="iconPath" />
+      </svg>
+    }
+    <div style="flex: 1; font-size: 13px; font-weight: 500"><ng-content /></div>
+    <ng-content select="[slot=action]" />
+    @if (dismissible) {
+      <button type="button" class="ui-banner-x" aria-label="Dismiss" (click)="dismiss.emit()">
+        <svg
+          viewBox="0 0 24 24"
+          width="15"
+          height="15"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+      </button>
+    }
+  </div>`,
+})
+export class VspBanner {
+  @Input() tone: BannerTone = 'info';
+  @Input() dismissible = false;
+  @Output() dismiss = new EventEmitter<void>();
+  get cls(): string {
+    return 'ui-banner ' + this.tone;
+  }
+  get iconPath(): string {
+    return BANNER_ICON[this.tone];
+  }
+}
+
+@Component({
+  selector: 'vsp-empty-state',
+  template: `<div
+    style="display: grid; place-items: center; text-align: center"
+    [style.padding]="compact ? '32px 20px' : '56px 24px'"
+  >
+    <div style="max-width: 340px">
+      <span
+        style="width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin: 0 auto 18px; background: color-mix(in oklab, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent)"
+      >
+        <span #ic style="display: contents"><ng-content select="[slot=icon]" /></span>
+        @if (!ic.childElementCount) {
+          <svg
+            viewBox="0 0 24 24"
+            width="26"
+            height="26"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path
+              d="M22 12h-6l-2 3h-4l-2-3H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11z"
+            />
+          </svg>
+        }
+      </span>
+      <div style="font-size: 17px; font-weight: 700">{{ title }}</div>
+      @if (desc) {
+        <p style="margin: 7px 0 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6">
+          {{ desc }}
+        </p>
+      }
+      <div
+        #ac
+        [style.display]="ac.childElementCount ? 'flex' : 'none'"
+        style="margin-top: 20px; gap: 8px; justify-content: center"
+      >
+        <ng-content select="[slot=action]" />
+      </div>
+    </div>
+  </div>`,
+})
+export class VspEmptyState {
+  @Input() title?: string;
+  @Input() desc?: string;
+  @Input() compact = false;
+}
+
+export interface AccordionItem {
+  title: string;
+  body: string;
+}
+
+@Component({
+  selector: 'vsp-accordion',
+  template: `<div class="ui-acc">
+    @for (it of items; track $index; let i = $index) {
+      <div [class]="itemCls(i)">
+        <button type="button" class="ui-acc-head" (click)="toggle(i)">
+          {{ it.title }}
+          <svg
+            class="chev"
+            viewBox="0 0 24 24"
+            width="17"
+            height="17"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </button>
+        <div class="ui-acc-bodywrap">
+          <div>
+            <div class="ui-acc-body">{{ it.body }}</div>
+          </div>
+        </div>
+      </div>
+    }
+  </div>`,
+})
+export class VspAccordion implements OnInit {
+  @Input() items: AccordionItem[] = [];
+  @Input() multiple = false;
+  @Input() defaultOpen: number[] = [];
+  private open = new Set<number>();
+  ngOnInit(): void {
+    this.open = new Set(this.defaultOpen);
+  }
+  toggle(i: number): void {
+    const n = new Set<number>(this.multiple ? this.open : []);
+    if (this.open.has(i)) n.delete(i);
+    else n.add(i);
+    this.open = n;
+  }
+  itemCls(i: number): string {
+    return 'ui-acc-item' + (this.open.has(i) ? ' open' : '');
+  }
+}

package/src/toggle.component.ts

@@ -0,0 +1,62 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'vsp-switch',
+  template: `<button
+    type="button"
+    [disabled]="disabled"
+    [class]="cls"
+    [attr.aria-pressed]="checked"
+    aria-label="Toggle"
+    (click)="toggle()"
+  ></button>`,
+})
+export class VspSwitch {
+  @Input() checked = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+  @Input() size?: 'sm';
+  @Input() disabled = false;
+  get cls(): string {
+    return ['ui-switch', this.size === 'sm' && 'sm', this.checked && 'on']
+      .filter(Boolean)
+      .join(' ');
+  }
+  toggle(): void {
+    this.checked = !this.checked;
+    this.checkedChange.emit(this.checked);
+  }
+}
+
+@Component({
+  selector: 'vsp-checkbox',
+  template: `<label class="ui-opt" [style.opacity]="disabled ? 0.5 : 1">
+    <input
+      type="checkbox"
+      [checked]="checked"
+      [disabled]="disabled"
+      (change)="toggle()"
+      style="position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0"
+    />
+    <span [class]="checkCls"></span>
+    <span>
+      <span>{{ label }}</span>
+      @if (sub) {
+        <span class="ui-opt-sub">{{ sub }}</span>
+      }
+    </span>
+  </label>`,
+})
+export class VspCheckbox {
+  @Input() checked = false;
+  @Output() checkedChange = new EventEmitter<boolean>();
+  @Input() label?: string;
+  @Input() sub?: string;
+  @Input() disabled = false;
+  get checkCls(): string {
+    return this.checked ? 'ui-check on' : 'ui-check';
+  }
+  toggle(): void {
+    this.checked = !this.checked;
+    this.checkedChange.emit(this.checked);
+  }
+}

package/tsconfig.lib.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["ES2022", "dom"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "experimentalDecorators": false,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "angularCompilerOptions": {
+    "strictTemplates": true,
+    "compilationMode": "partial"
+  },
+  "include": ["src/**/*.ts"]
+}