eomsangdonandClaude Opus 5.5
7e584c1e7b
- 새 부품 파일: ui_template_card · empty · banner · stat · kv · toast · flow_legend(.ts) · 진행 막대 · 막대 · 원 그래프 덧붙임 - createCard · showToast · 로딩 가림막은 부품 파일로 옮기고 본체(ui_template_elements)가 다시 내보냄 — 부름 꼴 그대로 - 대시보드 emptyState = 빈 상태 부품을 씀(한 벌) · 선 카드 그림자 0 · 가림막 옛 보라 → --color-scrim - 부품 모음 화면 견본(밝음 · 어두움 · 상태) · 지킴 시험 test_552_3_* 열 - 전후 촬영: B01 여덟 화면 자리 · 화소 같음(실시간 CPU 값만 다름) · A01 · B08 카드 그림자만 다름 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_kv.ts
|
|
* 부품 「값 목록」(552-3 · 목록 29) — 「이름 : 값」 줄 여럿(dl).
|
|
* 꼴 = 보통 줄 · 판정 줄(`ok: true` = ✓ · `false` = ✗ — 색만으로 안 가름) · 큰 값 줄(`big`)
|
|
* 크기 = 줄 24 · 글 12(이름) / 14(값) · 큰 값 18
|
|
* 상태 = 기본만
|
|
* 쓰는 법 = `createKv([{ label: "연장", value: "1,080 m" }, { label: "종단 경사", value: "12 %", ok: true }])`
|
|
* 대신하는 옛 변종 = B04 `b04-surface__line` · B07 `.b07-info__row` · CAD `.cad-properties dl` · E04 `e04-result__list` · E07 `e07-summary` · B08 `b08-hydro__row`
|
|
* ========================================================================== */
|
|
|
|
import { el } from "./ui_template_elements_base";
|
|
import "./ui_template_kv.css";
|
|
|
|
export interface KvRow {
|
|
label: string;
|
|
/** 없으면 「-」 */
|
|
value: string | number | Node | null | undefined;
|
|
/** 판정 — true ✓ · false ✗ */
|
|
ok?: boolean;
|
|
big?: boolean;
|
|
}
|
|
|
|
export function createKv(rows: KvRow[]): HTMLDListElement {
|
|
const list = el("dl", { className: "ui-kv" });
|
|
for (const row of rows) {
|
|
const value = el("dd", { className: "ui-kv__value" });
|
|
const v = row.value;
|
|
value.append(
|
|
v instanceof Node ? v : v === null || v === undefined || v === "" ? "-" : String(v),
|
|
);
|
|
if (row.ok !== undefined) {
|
|
value.prepend(
|
|
el("span", {
|
|
className: `ui-kv__mark ${row.ok ? "is-ok" : "is-bad"}`,
|
|
text: row.ok ? "✓" : "✗",
|
|
}),
|
|
);
|
|
}
|
|
list.append(
|
|
el("div", {
|
|
className: `ui-kv__row${row.big ? " ui-kv__row--big" : ""}`,
|
|
children: [el("dt", { className: "ui-kv__label", text: row.label }), value],
|
|
}),
|
|
);
|
|
}
|
|
return list;
|
|
}
|