Aislo/M01_MasterData/M01_MasterData_UI_Head.ts

/* =============================================================================
 * M01_MasterData_UI_Head.ts
 * 마스터 화면 머리 공용 조각 — 제목 줄(제목 왼쪽 · 단추 오른쪽) + 찾기 줄.
 * 인력 · 재료 · 유가·전력 · 기계 · 소요량 · 계수 · 환율 · 요율 상세와 「단가산출 로직」 화면이 같은 조각을 써
 * 제목 크기 · 자리 · 단추 차례 · 공용 단추 크기 · 찾기 칸 꼴이 한 벌로 같음.
 * ========================================================================== */

import { el } from "@ui/ui_template_elements";
import "./M01_MasterData_UI_Head.css";

export interface HeadOptions {
  /** 제목 앞에 놓을 것(예: ← 목록 단추) */
  lead?: HTMLElement[];
  /** 제목 — 글이면 h2 를 만듦 */
  title: HTMLElement | string;
  /** 제목 바로 뒤 · 단추 앞 알림(고친 개수 등) */
  status?: HTMLElement[];
  /** 오른쪽 단추 — 차례 그대로(공용 단추 · 크기를 덮지 않음) */
  buttons: HTMLElement[];
}

/** 제목 줄 — 제목은 18px · 왼쪽 · 남는 자리를 차지해 단추를 오른쪽으로 밂 */
export function buildHeadBar(opts: HeadOptions): { root: HTMLElement; title: HTMLElement } {
  const title = typeof opts.title === "string" ? el("h2", { text: opts.title }) : opts.title;
  title.classList.add("m01-head__title");
  const root = el("div", {
    className: "m01-head",
    children: [...(opts.lead ?? []), title, ...(opts.status ?? []), ...opts.buttons],
  });
  return { root, title };
}

/** 찾기 줄 — 찾기 칸 · 거름 · 쪽 넘기기를 위에서 아래로 쌓음 */
export function buildHeadFilters(children: HTMLElement[]): HTMLElement {
  return el("div", { className: "m01-head__filters", children });
}