eomsangdonandClaude Opus 5.5
022eff69f5
- 표 둘 = 표 부품(m01-master__grid = 일반표 · m01-logic__grid = 데이터표) · 페이지 CSS 는 폭 · 머리 고정 · 칸 상태만 - 손 모달 다섯(조달 찾기 · 요소 고르기 · 표 바꾸기 · 복사 시트 · 표 고르기) = 모달 부품 openModal - 알림 띠 · 막힘 까닭 = 띠 알림 · 태그 = 배지 · 알약 · × · 삭제 · 로직 키 = 단추 부품 · muted 세 벌 = 보조 글 · 빈 줄 = 빈 상태 - M02 가 빌린 M01 클래스(표 · muted · 고르기 창)도 같은 부품으로 · 죽은 CSS 걷음 · 지킴 시험 test_553_5_m01_m02 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
48 lines
2.0 KiB
TypeScript
48 lines
2.0 KiB
TypeScript
/* =============================================================================
|
|
* M01_MasterData_UI_LogicLab_Pill.ts
|
|
* 알약 단추 — 수량 칸 안 조각(표 찾기 등)을 누르면 곧장 그 자료 모달을 엶.
|
|
* (이전에는 알약을 늘어놓고 아래 자리에서 펼쳤으나, 알약이 수량 칸 안으로 들어가며
|
|
* 「누르면 모달」 로 바뀜 — 모달 안에 알약 목록을 또 두지 않음.)
|
|
* ========================================================================== */
|
|
|
|
import { el } from "@ui/ui_template_elements";
|
|
import { createButton } from "@ui/ui_template_button";
|
|
|
|
export interface Pill {
|
|
/** 알약 글 — 보기 「표 QF000421」 */
|
|
label: string;
|
|
/** 누르면 할 일 — 그 자료 모달을 엶 */
|
|
onClick: () => void;
|
|
}
|
|
|
|
/** 알약 하나 — 글자 조각 사이에 끼워 쓰는 단추 */
|
|
export function pillButton(p: Pill): HTMLButtonElement {
|
|
// 알약 = 단추 부품(보조 · 24) — data-pill 은 시험 · 촬영이 잡음
|
|
const b = createButton({ label: p.label, variant: "ghost", size: 24 });
|
|
b.classList.add("m01lab__pill");
|
|
b.dataset.pill = p.label;
|
|
b.addEventListener("click", (ev) => {
|
|
ev.stopPropagation(); // 줄 전체 누르기(행 모달)와 안 겹치게
|
|
p.onClick();
|
|
});
|
|
return b;
|
|
}
|
|
|
|
/** 수량 칸 조각 — 알약 아니면 그냥 글자(연산기호·숫자·중간값 이름) · `dim` = 계산 안 된 갈래(흐리게) */
|
|
export type Fragment = { pill: Pill; dim?: boolean } | { text: string; dim?: boolean };
|
|
|
|
/** 조각을 이어 그림 — 칸 폭을 넘으면 자동으로 줄바꿈(`flex-wrap`) */
|
|
export function fragmentRow(fragments: Fragment[]): HTMLElement {
|
|
return el("span", {
|
|
className: "m01lab__qty-frags",
|
|
children: fragments.map((f) => {
|
|
const one =
|
|
"pill" in f
|
|
? pillButton(f.pill)
|
|
: el("span", { className: "m01lab__qty-text", text: f.text });
|
|
if (f.dim) one.classList.add("m01lab__qty-dim");
|
|
return one;
|
|
}),
|
|
});
|
|
}
|