81 lines
2.7 KiB
TypeScript
81 lines
2.7 KiB
TypeScript
/* =============================================================================
|
|
* E06_StabRock_UI_Parts.ts
|
|
* E06 안 부품 걸이(553-4) — 부품(보조 글 · 빈 자리 · 표 · 배지 · 분할 고르기)을 부르고
|
|
* 촬영 장면 · 시험이 잡는 이름(`e06-hint` · `e06-empty` · `e06-table` · `e06-list` · `e06-cases` · `e06-verdict` · `e06-toggle`)만 얹음.
|
|
* 모양은 부품 · 이 파일에 CSS 없음.
|
|
* ========================================================================== */
|
|
|
|
import { createBadge, type BadgeTone } from "@ui/ui_template_badge";
|
|
import { createEmpty } from "@ui/ui_template_empty";
|
|
import { createSegment } from "@ui/ui_template_segment";
|
|
import { createTable, type Cell } from "@ui/ui_template_table";
|
|
import { createText } from "@ui/ui_template_text";
|
|
|
|
/** 보조 글 — 걸이 이름(`e06-hint` · `e06-kin` · `e06-status` …) */
|
|
export function note(text: string, hook = "e06-hint"): HTMLElement {
|
|
const node = createText(text, "muted");
|
|
node.classList.add(hook);
|
|
return node;
|
|
}
|
|
|
|
export function emptyBox(text: string): HTMLElement {
|
|
const node = createEmpty({ text, small: true });
|
|
node.classList.add("e06-empty");
|
|
return node;
|
|
}
|
|
|
|
export interface E06Table {
|
|
root: HTMLElement;
|
|
table: HTMLTableElement;
|
|
rows: HTMLTableRowElement[];
|
|
}
|
|
|
|
/** 표 부품(데이터표) — `className` = 표에 얹는 걸이 이름 · `role` = data-role */
|
|
export function e06Table(
|
|
headers: string[],
|
|
rows: Cell[][],
|
|
className: string,
|
|
role?: string,
|
|
): E06Table {
|
|
const root = createTable(
|
|
headers.map((label) => ({ label })),
|
|
rows,
|
|
{ density: "data" },
|
|
);
|
|
const table = root.querySelector("table") as HTMLTableElement;
|
|
table.classList.add(className);
|
|
if (role) table.dataset.role = role;
|
|
return { root, table, rows: [...table.tBodies[0].rows] };
|
|
}
|
|
|
|
const TONE: Record<string, BadgeTone> = {
|
|
ng: "danger",
|
|
check: "warning",
|
|
ok: "success",
|
|
none: "neutral",
|
|
};
|
|
|
|
/** 판정 램프 — verdict = NG · check · OK · none */
|
|
export function verdictLamp(verdict: string, text: string): HTMLElement {
|
|
const key = verdict.toLowerCase();
|
|
const lamp = createBadge(text, TONE[key] ?? "neutral", { kind: "lamp" });
|
|
lamp.classList.add("e06-verdict", `e06-verdict--${key}`);
|
|
return lamp;
|
|
}
|
|
|
|
/** 보기 고르기 — 단추 모양은 분할 고르기 부품 · `data-value` 는 그대로 */
|
|
export function toggle<T extends string>(
|
|
options: [string, T][],
|
|
value: T,
|
|
onPick: (v: T) => void,
|
|
): HTMLElement {
|
|
const group = createSegment({
|
|
options: options.map(([label, v]) => ({ value: v, label })),
|
|
value,
|
|
size: 24,
|
|
onChange: (v) => onPick(v as T),
|
|
});
|
|
group.root.classList.add("e06-toggle");
|
|
return group.root;
|
|
}
|