eomsangdonandClaude Opus 5.5
271c460641
- 위험 채움 토큰 밝음 #e5484d → #d6363c(흰 글 3.91 → 4.72) · 어두움 5.6 · 위험 글 #c0392b 그대로 - 새 부품 계산 줄(ui_template_calc_row) — B08 수리집수면적표 b08-hydro__row · 식 칸 배치를 대신함 - 표 부품 칸 램프(ui-data-table__lamp · --only · ✓) — B08 집계표 · 거리이정표 · B09 설계내역 램프 CSS 세 벌을 걷음(표지 class 는 풍선 · 가이드용으로 남김) - 모달 넓은 중간 창(wide + width 1100px · 1100 × 680) — B09 운반 창 손 인라인 크기를 걷음 - 값 목록 규칙 꼴(rule) — ☰ 설정 규칙 줄 ul/li 를 걷음 - 접이 구역 머리(createCollapsibleHead = 패널 머리 + 접는 제목) — B08 구조물도 「조합 연결」 제목(옛 b08-sheets__title)을 대신함 - 일반 화면 틀 좁은 폭 · 입력 칸 2열 · 끝 단추 줄 — D01 · E01 이 B02 CSS 를 빌리던 것을 끊음(가이드 장면 선택자 맞춤) - 부품 모음 견본 · 지킴 시험 test_557_2 · 낡은 시험(198_1 · 247_1 · 251_1 · 257_1 · 276_1 · 551_1)은 부품 CSS · 새 class 로 맞춤 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_kv.ts
|
|
* 부품 「값 목록」(552-3 · 목록 29) — 「이름 : 값」 줄 여럿(dl).
|
|
* 꼴 = 보통 줄 · 판정 줄(`ok: true` = ✓ · `false` = ✗ — 색만으로 안 가름) · 큰 값 줄(`big`)
|
|
* · 규칙 꼴(`createKv(rows, { rule: true })` · 557-2) = 왼쪽 15em 칸(키 칩 등 요소) · 오른쪽 설명 글 왼쪽 맞춤 · 값 없는 줄(`value` 안 줌)은 이름이 줄 통째
|
|
* 크기 = 줄 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` · ☰ 설정 `app-settings__rules`
|
|
* ========================================================================== */
|
|
|
|
import { el } from "./ui_template_elements_base";
|
|
import "./ui_template_kv.css";
|
|
|
|
export interface KvRow {
|
|
label: string | Node;
|
|
/** 없으면 「-」 · 규칙 꼴에서 안 주면 이름이 줄 통째 */
|
|
value?: string | number | Node | null;
|
|
/** 판정 — true ✓ · false ✗ */
|
|
ok?: boolean;
|
|
big?: boolean;
|
|
}
|
|
|
|
export function createKv(rows: KvRow[], opts: { rule?: boolean } = {}): HTMLDListElement {
|
|
const list = el("dl", { className: `ui-kv${opts.rule ? " ui-kv--rule" : ""}` });
|
|
for (const row of rows) {
|
|
const label = el("dt", { className: "ui-kv__label" });
|
|
label.append(row.label);
|
|
if (opts.rule && row.value === undefined) {
|
|
list.append(el("div", { className: "ui-kv__row", children: [label] }));
|
|
continue;
|
|
}
|
|
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: [label, value],
|
|
}),
|
|
);
|
|
}
|
|
return list;
|
|
}
|