eomsangdonandClaude Opus 5.5
3e1186861a
- 종류 고르기(지형 · 노선배치도 · 대피소 · 라이다 · 사용자 · 새 종류) → 든 조각 체크 → [업데이트] · 새 종류는 [추가] - 대피소 · 사토장 자리 — B05 구조물 폼의 측점 NO + 거리 두 칸 · 체크박스 · [업데이트] - ui_template_checkbox.ts · .css 신설 — 테마 토큰 색(밝음 · 어두움) - 「더하기」 → 「추가」 · 「자리 더하기」 → 「자리 추가」 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NPJGtfXo6GMbcpiboQC4uK
33 lines
1.2 KiB
TypeScript
33 lines
1.2 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_checkbox.ts
|
|
* 공용 체크박스 — [□ 글] 한 줄 · 색은 테마 토큰(밝음 · 어두움 같이). 줄 세우기는 부르는 쪽 몫.
|
|
*
|
|
* const box = createCheckbox("등고선", { checked: true, value: "contour" });
|
|
* panel.append(box.root); // 읽기 = box.input.checked · box.input.value
|
|
* ========================================================================== */
|
|
|
|
import "./ui_template_checkbox.css";
|
|
|
|
export interface Checkbox {
|
|
root: HTMLLabelElement;
|
|
input: HTMLInputElement;
|
|
}
|
|
|
|
export function createCheckbox(
|
|
text: string,
|
|
options: { checked?: boolean; value?: string } = {},
|
|
): Checkbox {
|
|
const root = document.createElement("label");
|
|
root.className = "ui-checkbox";
|
|
const input = document.createElement("input");
|
|
input.type = "checkbox";
|
|
input.className = "ui-checkbox__input";
|
|
input.checked = options.checked ?? false;
|
|
if (options.value !== undefined) input.value = options.value;
|
|
const caption = document.createElement("span");
|
|
caption.className = "ui-checkbox__text";
|
|
caption.textContent = text;
|
|
root.append(input, caption);
|
|
return { root, input };
|
|
}
|