eomsangdonandClaude Opus 5.5
7e584c1e7b
- 새 부품 파일: ui_template_card · empty · banner · stat · kv · toast · flow_legend(.ts) · 진행 막대 · 막대 · 원 그래프 덧붙임 - createCard · showToast · 로딩 가림막은 부품 파일로 옮기고 본체(ui_template_elements)가 다시 내보냄 — 부름 꼴 그대로 - 대시보드 emptyState = 빈 상태 부품을 씀(한 벌) · 선 카드 그림자 0 · 가림막 옛 보라 → --color-scrim - 부품 모음 화면 견본(밝음 · 어두움 · 상태) · 지킴 시험 test_552_3_* 열 - 전후 촬영: B01 여덟 화면 자리 · 화소 같음(실시간 CPU 값만 다름) · A01 · B08 카드 그림자만 다름 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
50 lines
2.4 KiB
TypeScript
50 lines
2.4 KiB
TypeScript
/* =============================================================================
|
||
* ui_template_flow_legend.ts
|
||
* 부품 「범례」(552-3 · 목록 32) — 그림 · 그래프 색이 무엇인지 한 줄씩.
|
||
* 꼴 = 색 칩(14 × 10 · 기본) · 선(`line`) · 점선(`dash`) · 점(`dot`) · 가로 줄(기본) / 세로 목록(`vertical`)
|
||
* 색 띠 눈금(지도 유입 강도)은 지금 B04 `createFlowLegend`(`.ui-flow-legend` · 이 파일 CSS)가 맡음
|
||
* 크기 = 글 12 · 칩 14 × 10
|
||
* 상태 = 기본 · 꺼짐(`off` → .is-off · 흐림 · 줄 그음) · `onToggle` 을 주면 항목이 단추(aria-pressed)
|
||
* 색 = 부르는 쪽이 CSS 값 글로 줌(`var(--color-chart-1)` · 그림 색이면 `var(--draw-…)`) — 범례 자신은 색을 안 정함
|
||
* 쓰는 법 = `createLegend([{ label: "설계선", color: "var(--draw-profile-design)", kind: "line" }])`
|
||
* 대신하는 옛 변종 = B05 `b05-routeedit__legend` · `b05-routerec__legend` · B06 `b06-design__seg-legend` · `b06-std__legend` · E03 · E04 · E06 · E07 `__legend` · M02 `m02-dfdg__legend` · `.ui-chart__legend`
|
||
* ========================================================================== */
|
||
|
||
import { el } from "./ui_template_elements_base";
|
||
import "./ui_template_flow_legend.css";
|
||
|
||
export interface LegendItem {
|
||
label: string;
|
||
/** CSS 색 값 글 */
|
||
color: string;
|
||
kind?: "chip" | "line" | "dash" | "dot";
|
||
off?: boolean;
|
||
}
|
||
|
||
export function createLegend(
|
||
items: LegendItem[],
|
||
opts: { vertical?: boolean; onToggle?: (index: number, on: boolean) => void } = {},
|
||
): HTMLElement {
|
||
const root = el("div", { className: `ui-legend${opts.vertical ? " ui-legend--vertical" : ""}` });
|
||
items.forEach((item, i) => {
|
||
const mark = el("i", { className: `ui-legend__mark ui-legend__mark--${item.kind ?? "chip"}` });
|
||
mark.style.setProperty("--legend-color", item.color);
|
||
const row = el(opts.onToggle ? "button" : "span", {
|
||
className: `ui-legend__item${item.off ? " is-off" : ""}`,
|
||
children: [mark, item.label],
|
||
});
|
||
if (opts.onToggle && row instanceof HTMLButtonElement) {
|
||
const toggle = opts.onToggle;
|
||
row.type = "button";
|
||
row.setAttribute("aria-pressed", String(!item.off));
|
||
row.addEventListener("click", () => {
|
||
const on = row.classList.toggle("is-off") === false;
|
||
row.setAttribute("aria-pressed", String(on));
|
||
toggle(i, on);
|
||
});
|
||
}
|
||
root.append(row);
|
||
});
|
||
return root;
|
||
}
|