eomsangdonandClaude Opus 5.5
2c51bb53a6
- ui_template_input.ts · .css 새로 — createInputField · createSelectField 를 옮김(ui_template_elements 가 다시 내보냄 · 부르는 길 그대로) · size(data-size 단 높이) · unit(칸 안 단위) · multiline · createSlider(이름 | 막대 | 값 글 3열) - 옛 compact 는 단을 안 붙임 — 옛 작은 칸 30 그대로(32 로 맞추면 페이지 칸이 바뀜 · 553 에서 단으로 옮김) - 입력 · 고르기 상태 = 마우스 선 짙게 · 막힘 흐림 · 오류 빨강(aria-invalid 같이) · 고르기 화살표 = 보라 → 보조 글 색(밝음 · 어두움 따로) - 체크 = 라디오 · 칩 꼴 더함(createCheckbox 부름 그대로) · 켜기(스위치 · 색 점 칩) · 분할 고르기(대시보드 .b01-sys-seg 꼴) · 탭(밑줄 · 보조 알약 = 옛 .ui-subtabs · 수 배지) - 배지(알약 · 수 · 램프 ✓ ✗ · 점 · 옛 .ui-tag 같이) · 툴팁 제자리 상자(tooltipBox) · 보조 글(흐린 · 안내 · 오류 ✗ · 경고 ! · 성공 ✓) - 부품 모음 기본 묶음 13 줄 모두 새 부품 견본 · 상태 다섯 칸 · 여덟 단 한 줄 - 시험 test_552_2_parts 새로(머리 · 옛 이름 · 크기 단 · 상태 · 날 색 없음 · 부품 모음 13) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
40 lines
1.7 KiB
TypeScript
40 lines
1.7 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_text.ts
|
|
* 부품 「보조 글 · 안내 줄」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`)
|
|
*
|
|
* 꼴 = 흐린 글(muted) · 안내(hint · ⓘ 아이콘) · 상태 글(error · warning · success — 글자 기호 ✗ ! ✓ 같이) · 칸 오류(`.ui-field__error`)
|
|
* 크기 = 글 12(기본) · 14 — data-text 로 고름
|
|
* 상태 = 오류 = error 꼴(색만으로 안 가름 · 기호 같이)
|
|
* 쓰기 = `createText("저장 안 한 값이 있음", "warning")` · `createText("단위 m", "muted", 14)`
|
|
* 대신 = 파일마다 `__muted`(약 30 벌) · `__hint` · `__status` · `__note` · `__warn` · `.b01-sys-error` · `b03-file__error` …(목록 4장)
|
|
* ========================================================================== */
|
|
|
|
import { icon } from "./ui_template_icons";
|
|
import "./ui_template_text.css";
|
|
|
|
export type TextKind = "muted" | "hint" | "error" | "warning" | "success";
|
|
|
|
/** 상태 글 앞 기호 — 색만으로 안 가름 */
|
|
const MARK: Partial<Record<TextKind, string>> = { error: "✗", warning: "!", success: "✓" };
|
|
|
|
export function createText(
|
|
text: string,
|
|
kind: TextKind = "muted",
|
|
size: 12 | 14 = 12,
|
|
): HTMLElement {
|
|
const p = document.createElement("p");
|
|
p.className = `ui-text ui-text--${kind}`;
|
|
p.dataset.text = String(size);
|
|
if (kind === "hint") p.append(icon("info", size + 2));
|
|
const mark = MARK[kind];
|
|
if (mark) {
|
|
const m = document.createElement("span");
|
|
m.className = "ui-text__mark";
|
|
m.textContent = mark;
|
|
p.append(m);
|
|
}
|
|
p.append(text);
|
|
if (kind === "error") p.setAttribute("role", "alert");
|
|
return p;
|
|
}
|