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>
45 lines
2.2 KiB
TypeScript
45 lines
2.2 KiB
TypeScript
/* =============================================================================
|
|
* ui_template_badge.ts
|
|
* 부품 「배지」(552-2 · 부품 모음 `#/b01-account?view=ui-kit`) — 대시보드 `.b01-pg-badge` 꼴
|
|
*
|
|
* 꼴 = 알약(pill · 상태 · 역할 · 종류 — 한글 글 + 색) · 수(count · 빨강 동그라미 · 알림) · 램프(lamp · 점 + 글 · 성공 ✓ · 실패 ✗ 같이)
|
|
* · 점(dot · 글 없음 · title 필수)
|
|
* 색 = accent(진행 · 선) · success · warning · danger · info · neutral
|
|
* 크기 = data-size 18 · 20(기본 20) · 점 8
|
|
* 상태 = 없음(눌리지 않음)
|
|
* 쓰기 = `createBadge("진행 중", "accent")` · `createBadge("3", "danger", { kind: "count" })` · `createBadge("통과", "success", { kind: "lamp" })`
|
|
* 대신 = `.ui-tag--*` 손 조립 · B01 `.b01-pg-badge` · `.b01-proj-badge` · 램프 `b08-summary__lamp` · `b09-bill__lamp` · E03 `e03-verdict` ·
|
|
* M02 알약 여섯 …(목록 4장)
|
|
* 클래스 = 알약은 옛 `ui-tag ui-tag--<색>` 도 같이 냄(시험 · B09 표 PDF 가 잡음)
|
|
* ========================================================================== */
|
|
|
|
import { setUiSize } from "./ui_template_button";
|
|
import "./ui_template_badge.css";
|
|
|
|
export type BadgeTone = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
|
|
export type BadgeKind = "pill" | "count" | "lamp" | "dot";
|
|
|
|
/** 램프 글자 기호 — 색만으로 안 가름(시험이 글자로 잡음) */
|
|
const LAMP_MARK: Partial<Record<BadgeTone, string>> = { success: "✓", danger: "✗" };
|
|
|
|
export function createBadge(
|
|
text: string,
|
|
tone: BadgeTone = "neutral",
|
|
opts: { kind?: BadgeKind; size?: 18 | 20 } = {},
|
|
): HTMLSpanElement {
|
|
const kind = opts.kind ?? "pill";
|
|
const span = document.createElement("span");
|
|
span.className = `ui-badge ui-badge--${kind} ui-badge--${tone}${kind === "pill" ? ` ui-tag ui-tag--${tone}` : ""}`;
|
|
if (kind !== "dot") setUiSize(span, opts.size ?? 20);
|
|
if (kind === "dot") {
|
|
span.title = text;
|
|
span.setAttribute("aria-label", text);
|
|
} else if (kind === "lamp") {
|
|
const mark = LAMP_MARK[tone];
|
|
span.textContent = mark ? `${mark} ${text}` : text;
|
|
} else {
|
|
span.textContent = text;
|
|
}
|
|
return span;
|
|
}
|