55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
/* =============================================================================
|
|
* E03_StabSection_UI_Parts.ts
|
|
* E03 안 부품 걸이(553-4) — 부품(`ui_template_text` · `_empty` · `_card` · `_checkbox` · `_flow_legend`)을 부르고
|
|
* 촬영 장면 · 시험이 잡는 이름(`e03-muted` · `e03-empty` · `e03-card` · `e03-check` · `e03-legend`)만 얹음.
|
|
* 모양은 부품 · 이 파일에 CSS 없음.
|
|
* ========================================================================== */
|
|
|
|
import { createCard } from "@ui/ui_template_card";
|
|
import { createCheckbox } from "@ui/ui_template_checkbox";
|
|
import { createEmpty } from "@ui/ui_template_empty";
|
|
import { createLegend, type LegendItem } from "@ui/ui_template_flow_legend";
|
|
import { createText } from "@ui/ui_template_text";
|
|
|
|
/** 보조 글 한 줄(`data-role` 이 있으면 같이) */
|
|
export function muted(text: string, role?: string): HTMLElement {
|
|
const node = createText(text, "muted");
|
|
node.classList.add("e03-muted");
|
|
if (role) node.dataset.role = role;
|
|
return node;
|
|
}
|
|
|
|
/** 빈 자리 안내 */
|
|
export function emptyBox(text: string): HTMLElement {
|
|
const node = createEmpty({ text, small: true });
|
|
node.classList.add("e03-empty");
|
|
return node;
|
|
}
|
|
|
|
/** 카드 판 — 속은 부르는 쪽이 채움 */
|
|
export function card(extra = "", role?: string): HTMLDivElement {
|
|
const node = createCard({ pad: 12 });
|
|
node.classList.add("e03-card", ...extra.split(" ").filter(Boolean));
|
|
if (role) node.dataset.role = role;
|
|
return node;
|
|
}
|
|
|
|
/** 체크 한 줄 */
|
|
export function check(
|
|
label: string,
|
|
checked: boolean,
|
|
onChange: (v: boolean) => void,
|
|
): HTMLElement {
|
|
const box = createCheckbox(label, { checked, onChange });
|
|
box.root.classList.add("e03-check");
|
|
return box.root;
|
|
}
|
|
|
|
/** 범례 — 색은 `var(--e03-…)`(그림 색 · 이 화면 자체 토큰) */
|
|
export function legend(items: LegendItem[], role?: string): HTMLElement {
|
|
const node = createLegend(items);
|
|
node.classList.add("e03-legend");
|
|
if (role) node.dataset.role = role;
|
|
return node;
|
|
}
|