eomsangdonandClaude Opus 5.5
877b89f37c
- 보조 글: span · small 에 붙은 .ui-text = inline(줄 안 끊김) · p · div 는 한 줄 상자 그대로 - 단추: 위아래 여백 = 1em 기준 + 줄 높이 1 · 왼쪽 패널 양식(.ui-panel-form) 옛 규칙(글 12 · 줄 높이 normal)이 단을 덮지 않음 — B07 도면 단추 35 → 32 - 숨김: .ui-btn · .ui-icon-btn [hidden] = display none(공용 기본 꼴이 안 실린 곳에서도) - 파일 놓기 칸: 칸 어디든 누름 · 초점 Enter · Space = 파일 고르기(옛 B03 동작) · 단추 누름은 칸으로 올라가 한 번만 - 표: 격자 꼴(grid · 세로선 · 칸 테두리 · 몸 안 이름 칸 th) · 합친 칸(colSpan · rowSpan · head) · columns 비우면 머리 줄 없음 · 기본 꼴 그대로 - 부품 모음 견본: 글 줄 안 보조 글 · 격자표(수량 산출표 꼴) - 시험: test_552_5_part_fixes 새 · test_552_2_button 높이 식 기대 고침(1em · 줄 높이 1) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
41 lines
1.8 KiB
TypeScript
41 lines
1.8 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 로 고름
|
|
* 자리 = p · div 는 한 줄 상자(flex) · 글 줄 안 span · small 에 클래스만 붙이면 inline(줄 안 끊김)
|
|
* 상태 = 오류 = 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;
|
|
}
|