eomsangdonandClaude Sonnet 5.5
835f9d9290
- 도면 단추(날 ui-panel-btn) · 장 번호 · 도구 단추 = 단추 부품 · ⚙ = 아이콘 단추 꼴 · 평면도 줄 = 목록 줄 꼴 - 머리 = 패널 머리 + 배지 · 확정 건너뜀 = 띠 알림 · 빈 글 = 빈 상태 · 측점 정보 = 값 목록 · ⚙ 모달 그룹 상자 = 카드 · 종류 이름 칸 = 입력 - window.confirm 둘 → 확인창 부품 · 죽은 CSS 걷음 · 시험 헬퍼 부품 가짜 한 벌(helper_b07_part_stubs) · 153-1 옛 오류(removeAttribute) 고침 · 가이드 선택자 · 지킴 시험 Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
61 lines
2.6 KiB
JavaScript
61 lines
2.6 KiB
JavaScript
/* B07 시험 헬퍼 공용 — 템플릿 부품(단추 · 카드 · 배지 · 띠 알림 · 빈 상태 · 값 목록 · 패널 머리 · 보조 글)의
|
|
* 기록용 가짜. 화면 그릇(FakeNode)은 헬퍼 것을 받아 씀 — 진짜 부품이 내는 클래스 · 자식 차례만 같게 흉내.
|
|
*
|
|
* const { partStubs } = require("./helper_b07_part_stubs.cjs");
|
|
* const parts = partStubs((tag) => new FakeNode(tag));
|
|
* STUBS["@ui/ui_template_elements"] = { ...parts.elements, 나머지 };
|
|
* STUBS = { ...STUBS, ...parts.modules };
|
|
*/
|
|
function partStubs(makeNode) {
|
|
const node = (tag, className, text) => {
|
|
const made = makeNode(tag);
|
|
if (className) made.className = className;
|
|
if (text !== undefined) made.textContent = text;
|
|
if (!made.dataset) made.dataset = {};
|
|
return made;
|
|
};
|
|
/** 단추 부품 — `ui-btn ui-btn--<꼴>` · 마지막 자식 = 이름 칸(`ui-btn__label`) */
|
|
const createButton = (opts) => {
|
|
const button = node("button", `ui-btn ui-btn--${opts.variant ?? "filled"}`);
|
|
if (opts.size !== undefined) button.dataset.size = String(opts.size);
|
|
button.append(node("span", "ui-btn__label", opts.label));
|
|
button.disabled = !!opts.disabled;
|
|
if (opts.onClick) button.addEventListener("click", opts.onClick);
|
|
return button;
|
|
};
|
|
const createInputField = (opts = {}) => {
|
|
const input = node("input", opts.compact ? "ui-input ui-input--sm" : "ui-input");
|
|
input.value = opts.value ?? "";
|
|
input.placeholder = opts.placeholder ?? "";
|
|
const root = node("div", "ui-field");
|
|
root.append(input);
|
|
return { root, input, setError: () => undefined };
|
|
};
|
|
const createCard = (opts) => {
|
|
const card = node("div", "ui-card");
|
|
if (opts.title) card.append(node("h3", "ui-card__title", opts.title));
|
|
const body = node("div", "ui-card__body");
|
|
body.append(...(opts.body ?? []));
|
|
card.append(body);
|
|
return card;
|
|
};
|
|
return {
|
|
node,
|
|
elements: { createButton, createInputField, createCard },
|
|
modules: {
|
|
"@ui/ui_template_badge": { createBadge: (text) => node("span", "ui-badge", text) },
|
|
"@ui/ui_template_banner": { createBanner: (opts) => node("div", "ui-banner", opts.text) },
|
|
"@ui/ui_template_empty": { createEmpty: (opts) => node("div", "ui-empty", opts.text) },
|
|
"@ui/ui_template_kv": { createKv: () => node("dl", "ui-kv") },
|
|
"@ui/ui_template_panel_head": {
|
|
createPanelHead: (opts) => ({ root: node("header", "ui-panel-head", opts.title) }),
|
|
},
|
|
"@ui/ui_template_text": {
|
|
createText: (text, kind = "muted") => node("p", `ui-text ui-text--${kind}`, text),
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
module.exports = { partStubs };
|