Merge remote-tracking branch 'origin/dev' into sub_laptop_7
# Conflicts: # M02_MasterTemplete/M02_MasterTemplete_UI_Side.ts
This commit is contained in:
@@ -72,6 +72,7 @@
|
||||
|
||||
.ss-fmtdlg__row select,
|
||||
.ss-fmtdlg__row input[type="text"],
|
||||
.ss-fmtdlg__row input:not([type]),
|
||||
.ss-fmtdlg__row input[type="number"],
|
||||
.ss-fmtdlg__code {
|
||||
height: 28px;
|
||||
|
||||
@@ -248,3 +248,18 @@
|
||||
.aislo-grid__overlay > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* 긴 글 넘침(`spreadsheet_spill.ts`) — 옆 빈 칸 위로 글을 폄 · 덮은 칸 사이 눈금선은 감춤(엑셀) ·
|
||||
* 고치는 중에는 활성 칸 넘침을 감춤(편집기와 안 겹치게). */
|
||||
.aislo-cell.is-spill {
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aislo-grid--gridlines .aislo-cell.is-spill-r {
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.ss--editing .aislo-cell.is-selected.is-spill > .aislo-cell__text {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@@ -37,6 +37,7 @@ import {
|
||||
} from "./spreadsheet_headers";
|
||||
import { resolveCondFmtStyle, type CondFmtValue } from "./spreadsheet_condfmt";
|
||||
import { formatValue } from "./spreadsheet_numfmt";
|
||||
import { spillOf, type SpillAlign, type SpillSlot } from "./spreadsheet_spill";
|
||||
import { MAX_COLS, MAX_ROWS } from "./spreadsheet_types";
|
||||
import type {
|
||||
CellRange,
|
||||
@@ -139,6 +140,19 @@ function buildMergeMap(sheet: Sheet): Map<string, CellRange> {
|
||||
let measureRuler: CanvasRenderingContext2D | null = null;
|
||||
|
||||
/** 글 너비(px) — 칸 재기용(수가 칸 폭보다 길면 `#####`). */
|
||||
const SPILL_ALIGN: Partial<Record<HAlign, SpillAlign>> = {
|
||||
general: "left",
|
||||
left: "left",
|
||||
right: "right",
|
||||
center: "center",
|
||||
};
|
||||
|
||||
function resetSpill(cell: HTMLElement): void {
|
||||
cell.classList.remove("is-spill", "is-spill-r");
|
||||
const t = cell.firstElementChild as HTMLElement | null;
|
||||
if (t) t.style.width = t.style.marginLeft = t.style.clipPath = "";
|
||||
}
|
||||
|
||||
function measureText(text: string, font: string): number {
|
||||
measureRuler ??= document.createElement("canvas").getContext("2d");
|
||||
if (!measureRuler) return text.length * 7;
|
||||
@@ -417,6 +431,16 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
|
||||
const sheet = ctx.sheet();
|
||||
const book = ctx.book;
|
||||
const keep = new Set<string>();
|
||||
// 긴 글 넘침 — 줄마다 칸 자리를 모았다가 판을 다 그린 뒤 폄(옆 칸이 빈지 알아야 해서)
|
||||
const slots = new Map<number, Map<number, SpillSlot>>();
|
||||
const longs: {
|
||||
r: number;
|
||||
c: number;
|
||||
el: HTMLElement;
|
||||
own: number;
|
||||
need: number;
|
||||
align: SpillAlign;
|
||||
}[] = [];
|
||||
for (const r of rowsVisible) {
|
||||
for (const c of colsVisible) {
|
||||
const merge = merges.get(`${r},${c}`);
|
||||
@@ -475,6 +499,16 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
|
||||
}
|
||||
}
|
||||
setCellText(cellEl, text, display.title || comment || undefined);
|
||||
resetSpill(cellEl);
|
||||
if (!merge) {
|
||||
(slots.get(r0) ?? slots.set(r0, new Map()).get(r0)!).set(c0, { w, empty: text === "" });
|
||||
const align = SPILL_ALIGN[display.hAlign];
|
||||
if (align && text && !display.isNumeric && !display.isError && !style.줄바꿈) {
|
||||
// 캔버스 폭은 거르기만(글꼴 대체로 조금 어긋남) — 정확한 폭은 아래서 글 요소 scrollWidth 로
|
||||
const need = measureText(text, cellFont(style, book, zoom)) + 4;
|
||||
if (need > w * 0.9) longs.push({ r: r0, c: c0, el: cellEl, own: w, need, align });
|
||||
}
|
||||
}
|
||||
cellEl.classList.toggle("is-error", display.isError);
|
||||
cellEl.classList.toggle("has-comment", !!comment);
|
||||
cellEl.classList.toggle(
|
||||
@@ -483,6 +517,20 @@ export function createGrid(ctx: SpreadsheetContext): GridHandle {
|
||||
);
|
||||
}
|
||||
}
|
||||
// 글 폭 + 칸 안 여백(양쪽 2px) · 오른 선 1px — 읽기를 먼저 몰아 한 번만 배치 계산
|
||||
for (const l of longs) l.need = (l.el.firstElementChild as HTMLElement).scrollWidth + 5;
|
||||
for (const l of longs) {
|
||||
const sp = spillOf(slots.get(l.r)!, l.c, l.own, l.need, l.align);
|
||||
if (!sp) continue;
|
||||
l.el.classList.add("is-spill");
|
||||
const t = l.el.firstElementChild as HTMLElement;
|
||||
t.style.width = `calc(100% + ${sp.left + sp.right}px)`;
|
||||
t.style.marginLeft = `${-sp.left}px`;
|
||||
if (sp.clipLeft || sp.clipRight)
|
||||
t.style.clipPath = `inset(0 ${sp.clipRight}px 0 ${sp.clipLeft}px)`;
|
||||
for (let k = sp.from; k < sp.to; k++)
|
||||
pool.used.get(`${l.r},${k}`)?.classList.add("is-spill-r");
|
||||
}
|
||||
poolSweep(pool, keep);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
/* =============================================================================
|
||||
* spreadsheet_spill.ts
|
||||
* 긴 글 넘침(엑셀) — 칸보다 긴 글을 옆 빈 칸 위로 보임. 왼쪽 · 일반 맞춤은 오른쪽으로 · 오른쪽 맞춤은
|
||||
* 왼쪽으로 · 가운데는 양쪽으로. 비지 않은 칸 · 병합 칸 · 판 끝(틀 고정 경계 · 그린 범위 밖)에서 멈춤.
|
||||
* 격자(`spreadsheet_grid.ts`)가 판 하나를 그릴 때 줄마다 칸 자리(`slots`)를 모아 부름 — 계산만 여기.
|
||||
* ========================================================================== */
|
||||
|
||||
/** 같은 판 · 같은 줄 · 병합 아닌 칸 하나(병합 칸 · 안 그린 칸은 넣지 않음 → 거기서 멈춤) */
|
||||
export interface SpillSlot {
|
||||
w: number;
|
||||
empty: boolean;
|
||||
}
|
||||
|
||||
/** 넘침 — 왼 · 오른쪽으로 더 쓸 폭(px) · 덮은 칸 열 범위 · 가운데 맞춤이 한쪽만 막혀 잘라 낼 폭 */
|
||||
export interface Spill {
|
||||
left: number;
|
||||
right: number;
|
||||
from: number;
|
||||
to: number;
|
||||
/** 가운데 맞춤 — 글 상자는 양쪽 반씩 늘리고 막힌 쪽은 이만큼 잘라 냄(글은 칸 가운데 그대로) */
|
||||
clipLeft: number;
|
||||
clipRight: number;
|
||||
}
|
||||
|
||||
export type SpillAlign = "left" | "right" | "center";
|
||||
|
||||
/** 칸 c(폭 own)의 글 폭 need 가 넘치면 정렬 쪽 빈 칸으로 늘린 결과 · 안 넘치거나 못 늘리면 null */
|
||||
export function spillOf(
|
||||
slots: Map<number, SpillSlot>,
|
||||
c: number,
|
||||
own: number,
|
||||
need: number,
|
||||
align: SpillAlign,
|
||||
): Spill | null {
|
||||
if (need <= own) return null;
|
||||
let from = c;
|
||||
let to = c;
|
||||
const grow = (dir: -1 | 1, want: number): number => {
|
||||
let got = 0;
|
||||
for (let k = c + dir; got < want; k += dir) {
|
||||
const s = slots.get(k);
|
||||
if (!s || !s.empty) break;
|
||||
got += s.w;
|
||||
if (dir < 0) from = k;
|
||||
else to = k;
|
||||
}
|
||||
return got;
|
||||
};
|
||||
if (align === "center") {
|
||||
const half = (need - own) / 2;
|
||||
const l = Math.min(grow(-1, half), half);
|
||||
const r = Math.min(grow(1, half), half);
|
||||
if (!l && !r) return null;
|
||||
return { left: half, right: half, from, to, clipLeft: half - l, clipRight: half - r };
|
||||
}
|
||||
const got = grow(align === "right" ? -1 : 1, need - own);
|
||||
if (!got) return null;
|
||||
return align === "right"
|
||||
? { left: got, right: 0, from, to, clipLeft: 0, clipRight: 0 }
|
||||
: { left: 0, right: got, from, to, clipLeft: 0, clipRight: 0 };
|
||||
}
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
type SubBrief,
|
||||
} from "./M01_MasterData_UI_Logic_Api";
|
||||
import { tc } from "./M01_MasterData_UI_Combo_Text";
|
||||
import "./M01_MasterData_UI_Logic_Style.css"; // 창 겉틀 — M02 에서 열 때도 이 모듈이 불러옴
|
||||
import "./M01_MasterData_UI_Combo.css";
|
||||
|
||||
const opts = (values: string[]): { value: string; text: string }[] =>
|
||||
|
||||
@@ -37,7 +37,7 @@ function inputCell(
|
||||
const choices = input.고르기?.map((v) => ({ value: String(v), text: String(v) }));
|
||||
const field = choices
|
||||
? createSelectField({ options: choices, value, compact: true, label: input.이름 })
|
||||
: createInputField({ type: "text", label: input.이름 });
|
||||
: createInputField({ type: "text", label: input.이름, compact: true });
|
||||
const control = "select" in field ? field.select : field.input;
|
||||
control.value = value;
|
||||
control.setAttribute("data-input", `${key}|${input.이름}`);
|
||||
|
||||
@@ -121,6 +121,11 @@
|
||||
font-size: var(--text-body-sm);
|
||||
}
|
||||
|
||||
/* 한 줄 칸은 작은 고르기칸과 같은 높이 */
|
||||
input.m01-logic__input {
|
||||
height: var(--control-height-sm);
|
||||
}
|
||||
|
||||
.m01-logic__note {
|
||||
min-height: 48px;
|
||||
resize: vertical;
|
||||
|
||||
@@ -18,7 +18,6 @@ import { fetchCombo, type ComboLine } from "../M01_MasterData/M01_MasterData_UI_
|
||||
import { openLogicPicker } from "../M01_MasterData/M01_MasterData_UI_Combo_Pick";
|
||||
import { branchCombo, type BranchedCombo } from "./M02_MasterTemplete_Api_Fetch";
|
||||
import { readColumnBase, reasonOf } from "./M02_MasterTemplete_Combo_Api";
|
||||
import "../M01_MasterData/M01_MasterData_UI_Logic_Style.css"; // [로직 더하기] 창(M01 고르기) 겉틀 — M02 에서 열 때도
|
||||
import "./M02_MasterTemplete_Combo.css";
|
||||
|
||||
const TEXT = {
|
||||
|
||||
@@ -95,7 +95,12 @@ export function canEdit(layer: Layer, isAdmin: boolean): boolean {
|
||||
return layer === "project" || layer === "personal" || (layer === "system" && isAdmin);
|
||||
}
|
||||
|
||||
export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
|
||||
/** `onOpened` — 무엇을 열든(좌측 · 카드 [도면 수정] · 다시 읽기) 연 바로 뒤 부름(좌측 고름 표시) */
|
||||
export function createMain(
|
||||
isAdmin: boolean,
|
||||
onSaved?: () => void,
|
||||
onOpened?: () => void,
|
||||
): MainHandle {
|
||||
const title = el("h2", { className: "m02-main__title", text: L("M02_PickTemplate") });
|
||||
const reload = createButton({ label: L("M02_Reload"), variant: "ghost" });
|
||||
const save = createButton({ label: L("M02_Save"), variant: "filled" });
|
||||
@@ -136,7 +141,13 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
|
||||
window.addEventListener("beforeunload", guard);
|
||||
const confirmLeave = async (): Promise<boolean> => {
|
||||
if (!dirty) return true;
|
||||
if (!(await showConfirmDialog(L("M02_DiscardConfirm")))) return false;
|
||||
if (!(await showConfirmDialog(L("M02_DiscardConfirm")))) {
|
||||
// 취소 — 초점을 시트(고른 칸 입력 자리) · 집계표 · 도면으로 돌려 키보드 그대로
|
||||
host
|
||||
.querySelector<HTMLElement>(".ss-input, .ui-sheet, iframe")
|
||||
?.focus({ preventScroll: true });
|
||||
return false;
|
||||
}
|
||||
dirty = false;
|
||||
return true;
|
||||
};
|
||||
@@ -359,6 +370,7 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
|
||||
drop();
|
||||
showNotice([]);
|
||||
sel = next;
|
||||
onOpened?.();
|
||||
bar();
|
||||
if (!next) {
|
||||
title.textContent = L("M02_PickTemplate");
|
||||
@@ -437,6 +449,7 @@ export function createMain(isAdmin: boolean, onSaved?: () => void): MainHandle {
|
||||
drop();
|
||||
showNotice([]);
|
||||
sel = null;
|
||||
onOpened?.(); // 좌측 양식 · 열 줄 고름 지움
|
||||
bar();
|
||||
title.textContent = label;
|
||||
host.replaceChildren(node);
|
||||
|
||||
@@ -17,7 +17,11 @@ import "./M02_MasterTemplete_UI_Style.css";
|
||||
export async function renderM02MasterTemplate(root: HTMLElement): Promise<void> {
|
||||
const user = await fetchSessionUser().catch(() => null);
|
||||
const isAdmin = user?.role === "SYSTEM_ADMIN";
|
||||
const main = createMain(isAdmin, () => void side.refresh());
|
||||
const main = createMain(
|
||||
isAdmin,
|
||||
() => void side.refresh(),
|
||||
() => side.paint(),
|
||||
);
|
||||
const side = buildSide({
|
||||
isAdmin,
|
||||
onOpen: (sel) => void main.open(sel),
|
||||
|
||||
@@ -83,8 +83,8 @@ export interface SideOptions {
|
||||
export interface SideHandle {
|
||||
root: HTMLElement;
|
||||
refresh: () => Promise<void>;
|
||||
/** 좌측 고름 표시만 옮김 — 화면은 열지 않음 */
|
||||
select: (kind: Kind, name: string) => void;
|
||||
/** 고름 표시를 지금 열린 것 한 줄로 — 편집 칸이 무엇을 열든(카드 [도면 수정] 등) 부름 */
|
||||
paint: () => void;
|
||||
}
|
||||
|
||||
/** 서버 이름 규칙과 같게 — 화면에서 먼저 막음 */
|
||||
@@ -105,8 +105,6 @@ export function buildSide(opt: SideOptions): SideHandle {
|
||||
let numbers: Record<string, StructureNumbers> = {};
|
||||
let seq = 0;
|
||||
|
||||
let picked: { kind: Kind; name: string } | null = null;
|
||||
|
||||
const section = (title: string, body: HTMLElement, ...more: HTMLElement[]): HTMLElement =>
|
||||
el("section", {
|
||||
className: "m02-side__group ui-collapsible ui-sidebar-section ui-sidebar-card is-collapsed",
|
||||
@@ -136,12 +134,7 @@ export function buildSide(opt: SideOptions): SideHandle {
|
||||
confirmLeave: opt.confirmLeave,
|
||||
show: opt.showView,
|
||||
close: () => opt.onOpen(null),
|
||||
onOpen: () => {
|
||||
picked = null;
|
||||
paintList();
|
||||
paintColumns();
|
||||
paintButtons();
|
||||
},
|
||||
onOpen: () => paint(),
|
||||
});
|
||||
const matsetSection = section(matset.title, matset.body, ...matset.actions);
|
||||
// 펼칠 때마다 새로 받음 — 재료산출 옆 판이 갈라 낸 조합도 바로 보이게
|
||||
@@ -161,9 +154,8 @@ export function buildSide(opt: SideOptions): SideHandle {
|
||||
|
||||
const root = el("div", { className: "m02-side ui-sidebar-panel", children: [listHost] });
|
||||
|
||||
/** 고름 표시 — `picked`(방금 누름) 이 있으면 그것 · 없으면 지금 열린 것과 비교 */
|
||||
/** 고름 표시 — 편집 칸에 지금 열린 것 하나뿐 */
|
||||
const isPicked = (kind: Kind, name: string): boolean => {
|
||||
if (picked) return picked.kind === kind && picked.name === name;
|
||||
const cur = opt.getOpen();
|
||||
return !!cur && cur.layer === layer && cur.kind === kind && cur.name === name;
|
||||
};
|
||||
@@ -220,23 +212,25 @@ export function buildSide(opt: SideOptions): SideHandle {
|
||||
for (const [kind, b] of editButtons) b.copy.disabled = b.del.disabled = cur?.종류 !== kind;
|
||||
}
|
||||
|
||||
/** 고름 표시는 여기서만 — 목록 · 열 줄 · 자재 조합 줄을 함께 그려야 두 줄이 동시에 안 남음
|
||||
* (양식이 열려 있으면 자재 조합 고름은 지움 · 자재 조합 상세는 열린 양식이 없음) */
|
||||
function paint(): void {
|
||||
if (opt.getOpen()) matset.clear();
|
||||
paintList();
|
||||
paintColumns();
|
||||
paintButtons();
|
||||
}
|
||||
|
||||
// 여는 것은 편집 칸(`onOpen`) — 편집 칸이 열 때마다 `paint` 를 부름(페이지가 이음)
|
||||
async function select(info: TemplateInfo): Promise<void> {
|
||||
if (!isOpen(info) && !(await opt.confirmLeave())) return;
|
||||
picked = null;
|
||||
matset.clear();
|
||||
opt.onOpen({ layer, projectId: null, kind: info.종류, name: info.이름 });
|
||||
paintList();
|
||||
paintButtons();
|
||||
}
|
||||
|
||||
async function selectColumn(col: StructureColumn, kind: ColumnKind): Promise<void> {
|
||||
if (!isPicked(kind, col.id) && !(await opt.confirmLeave())) return;
|
||||
picked = null;
|
||||
matset.clear();
|
||||
// 제목은 편집 화면이 문서 번호를 앞에 붙임(「SD010101 돌기슭막이 …」)
|
||||
opt.onOpen({ layer, projectId: null, kind, name: col.id, label: columnHead(col) });
|
||||
paintColumns();
|
||||
paintButtons();
|
||||
}
|
||||
|
||||
async function refreshStructure(): Promise<void> {
|
||||
@@ -351,13 +345,5 @@ export function buildSide(opt: SideOptions): SideHandle {
|
||||
}
|
||||
|
||||
void refresh();
|
||||
return {
|
||||
root,
|
||||
refresh,
|
||||
select: (kind, name) => {
|
||||
picked = { kind, name };
|
||||
paintList();
|
||||
paintColumns();
|
||||
},
|
||||
};
|
||||
return { root, refresh, paint };
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ const sel = load(path.join(SS, "spreadsheet_selection.ts"));
|
||||
const ed = load(path.join(SS, "spreadsheet_editor.ts"));
|
||||
const mouse = load(path.join(SS, "spreadsheet_mouse.ts"));
|
||||
const addr = load(path.join(SS, "spreadsheet_address.ts"));
|
||||
const spill = load(path.join(SS, "spreadsheet_spill.ts"));
|
||||
const sample = require(path.join(SS, "spreadsheet_sample.json"));
|
||||
|
||||
const s1 = sample.시트[0];
|
||||
@@ -69,6 +70,21 @@ const out = {
|
||||
(t) => ed.textToCell(t, { 서식: 4 }),
|
||||
),
|
||||
textToCellNoStyle: ed.textToCell("", {}),
|
||||
// 긴 글 넘침 — 칸 0..5 폭 50 · 3 은 값 있음 · 칸 2 에서 폭 130 글
|
||||
spill: (() => {
|
||||
const row = (full) =>
|
||||
new Map([0, 1, 2, 3, 4, 5].map((c) => [c, { w: 50, empty: !full.includes(c) }]));
|
||||
const f = (sp) => sp && [sp.left, sp.right, sp.from, sp.to, sp.clipLeft, sp.clipRight];
|
||||
return {
|
||||
left: f(spill.spillOf(row([2, 3]), 2, 50, 130, "left")),
|
||||
leftFree: f(spill.spillOf(row([2]), 2, 50, 130, "left")),
|
||||
right: f(spill.spillOf(row([2]), 2, 50, 130, "right")),
|
||||
center: f(spill.spillOf(row([2]), 2, 50, 130, "center")),
|
||||
centerBlocked: f(spill.spillOf(row([2, 3]), 2, 50, 130, "center")),
|
||||
fits: f(spill.spillOf(row([2]), 2, 50, 40, "left")),
|
||||
edge: f(spill.spillOf(new Map([[2, { w: 50, empty: false }]]), 2, 50, 130, "left")),
|
||||
};
|
||||
})(),
|
||||
// 친 모양대로 숫자 형식 · 식 대문자 · 닫는 괄호 채움(엑셀)
|
||||
typedFormat: ["50%", "12.5%", "1,234.5", "1,000", "7", "abc", "1e3%"].map(ed.typedFormat),
|
||||
upperFormula: ["sum(a1:b2)+round(c3,0)", "'시트 a'!a1*true", '"abc"&a1', "내이름*2"].map(
|
||||
|
||||
@@ -128,3 +128,14 @@ def test_upper_formula(r):
|
||||
|
||||
def test_close_parens(r):
|
||||
assert r["closeParens"] == ["=(1+2)", "=SUM(1,ROUND(2,0))", None, None, '=")"&(1)']
|
||||
|
||||
|
||||
def test_spill(r):
|
||||
sp = r["spill"]
|
||||
assert sp["left"] is None # 오른 칸(3)에 값 → 못 넘침
|
||||
assert sp["leftFree"] == [0, 100, 2, 4, 0, 0] # 빈 칸 둘 덮음
|
||||
assert sp["right"] == [100, 0, 0, 2, 0, 0]
|
||||
assert sp["center"] == [40, 40, 1, 3, 0, 0]
|
||||
assert sp["centerBlocked"] == [40, 40, 1, 2, 0, 40] # 오른쪽 막힘 → 오른쪽 반 잘라 냄
|
||||
assert sp["fits"] is None
|
||||
assert sp["edge"] is None # 판 끝(그린 칸 없음)
|
||||
|
||||
@@ -148,6 +148,18 @@ def test_좌측_새로_본떠_지우기는_표_도면_컨테이너_안에_하나
|
||||
assert "양식: name" in side.split("function copyTemplate")[1] # 복사본 머리 이름 = 새 이름
|
||||
|
||||
|
||||
def test_좌측_고름_표시는_열린_것_한_줄뿐():
|
||||
"""카드 [도면 수정] 등 무엇으로 열든 편집 칸이 좌측 `paint` 를 부름 — 목록 · 열 줄을 함께 그림."""
|
||||
side = _text(SIDE)
|
||||
assert "picked" not in side # 따로 든 고름 상태 없음 — 편집 칸의 지금 열린 것만 봄
|
||||
assert re.search(r"function paint\(\): void \{\s*paintList\(\);\s*paintColumns\(\);", side)
|
||||
for fn in ("async function select(", "async function selectColumn("):
|
||||
body = side.split(fn)[1].split("\n }\n")[0]
|
||||
assert "paint" not in body, fn # 여기서 한쪽만 그리면 두 줄이 남음
|
||||
assert re.search(r"sel = next;\s*onOpened\?\.\(\);", _text(MAIN))
|
||||
assert "() => side.paint()" in _text(M02 / "M02_MasterTemplete_UI_Page.ts")
|
||||
|
||||
|
||||
def test_리본_접힘_모드에서_탭으로_편_것은_밖을_누르면_다시_접힘():
|
||||
ribbon = _text(ROOT / "B07_DesignDetail/openwebcad/src/ribbon/Ribbon.tsx")
|
||||
assert "if (collapsed) setPeek(true);" in ribbon # 탭 = 잠깐 펼침(접힘 모드 유지)
|
||||
|
||||
@@ -72,6 +72,8 @@ export interface InputFieldOptions {
|
||||
min?: number;
|
||||
max?: number;
|
||||
onInput?: (value: string) => void;
|
||||
/** 좁은 자리(표 칸·좌측 패널)용 작은 크기 — 작은 고르기칸(compact)과 높이가 같음 */
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export interface InputFieldHandle {
|
||||
@@ -90,7 +92,7 @@ export function createInputField(opts: InputFieldOptions): InputFieldHandle {
|
||||
}
|
||||
|
||||
const input = el("input", {
|
||||
className: "ui-input",
|
||||
className: opts.compact ? "ui-input ui-input--sm" : "ui-input",
|
||||
attrs: {
|
||||
type: opts.type ?? "text",
|
||||
...(opts.placeholder ? { placeholder: opts.placeholder } : {}),
|
||||
@@ -318,17 +320,26 @@ export function showConfirmDialog(message: string, confirmLabel = "확인"): Pro
|
||||
const panel = el("div", { className: "ui-confirm__panel" });
|
||||
const text = el("p", { className: "ui-confirm__message", text: message });
|
||||
const actions = el("div", { className: "ui-confirm__actions" });
|
||||
const back = document.activeElement as HTMLElement | null; // 닫힐 때 초점을 돌려놓을 자리
|
||||
const done = (result: boolean): void => {
|
||||
overlay.remove();
|
||||
if (back?.isConnected && back !== document.body) back.focus({ preventScroll: true });
|
||||
resolve(result);
|
||||
};
|
||||
const cancel = createButton({ label: "취소", variant: "ghost", onClick: () => done(false) });
|
||||
actions.append(
|
||||
createButton({ label: "취소", variant: "ghost", onClick: () => done(false) }),
|
||||
cancel,
|
||||
createButton({ label: confirmLabel, variant: "danger", onClick: () => done(true) }),
|
||||
);
|
||||
overlay.addEventListener("keydown", (ev) => {
|
||||
if (ev.key !== "Escape") return;
|
||||
ev.stopPropagation(); // 뒤 창 · 페이지 Esc 까지 닫지 않음
|
||||
done(false);
|
||||
});
|
||||
panel.append(text, actions);
|
||||
overlay.append(panel);
|
||||
document.body.append(overlay);
|
||||
cancel.focus(); // 창에 초점 — 뒤 칸에 글이 들어가지 않고 Esc 가 먹음
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -99,6 +99,10 @@ const BASE_CSS = `
|
||||
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||
}
|
||||
.ui-input::placeholder { color: var(--color-text-muted); }
|
||||
/* 입력칸 · 고르기칸 높이는 크기마다 한 값 — 같은 줄에 놓여도 위아래 · 글자 줄이 맞음(date 칸 포함) */
|
||||
.ui-input:not(textarea), .ui-select { height: var(--control-height); line-height: 20px; }
|
||||
.ui-input--sm:not(textarea), .ui-select--sm { height: var(--control-height-sm); line-height: 20px; }
|
||||
.ui-input--sm { padding: 4px 8px; }
|
||||
.ui-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-focus-ring);
|
||||
|
||||
@@ -154,6 +154,10 @@
|
||||
--radius-icons: var(--radius-lg);
|
||||
--radius-large: var(--radius-3xl);
|
||||
|
||||
/* 입력칸 · 고르기칸 높이 — 크기마다 한 값(같은 줄이면 위아래가 맞음) */
|
||||
--control-height: 42px;
|
||||
--control-height-sm: 30px;
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)
|
||||
* ------------------------------------------------------------------------ */
|
||||
|
||||
Reference in New Issue
Block a user