fix(B05): 라벨이 스텝 - 버튼을 집던 문제와 라벨 간격을 함께 정리한다
- <label>이 [-][입력][+] 묶음을 감싸면 암묵 대상이 **첫 버튼(-)**이 된다. 입력에 id를 붙이고 label.htmlFor로 명시 연결해 라벨·입력 위 커서가 -를 활성화하거나 라벨 클릭이 값을 줄이던 동작을 없앴다(2026-08-29 사용자 보고). - 제목(라벨)과 항목 간격도 --b05-label-gap(2px) 한 변수로 묶고 라벨 글자를 caption 크기로 맞췄다. 측점 행은 가로 배치라 열 간격 6px 유지. 검증: label.control=INPUT, 라벨 클릭 후 값 10 불변, 커서 올려도 - 배경 투명. 시설·이식·메모·구조물군 라벨 간격 모두 2px·라벨 높이 14px.
This commit is contained in:
@@ -60,6 +60,10 @@ export function labeled(text: string, input: HTMLElement): HTMLLabelElement {
|
||||
const caption = document.createElement("span");
|
||||
caption.textContent = text;
|
||||
wrapper.append(caption, input);
|
||||
// 묶음(스텝 등)을 담으면 라벨의 암묵 대상이 첫 버튼이 된다 — 안쪽 입력을 명시로
|
||||
// 가리켜 라벨 hover·클릭이 버튼으로 새지 않게 한다(2026-08-29 사용자 보고).
|
||||
const inner = input.querySelector?.("input, select, textarea") as HTMLElement | null;
|
||||
if (inner?.id) wrapper.htmlFor = inner.id;
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
@@ -77,9 +81,16 @@ export function numberInput(step: string, min = "0", placeholder = ""): HTMLInpu
|
||||
* 고칠 수 있게 한다. 래퍼 여백은 0이라 기존 격자 레이아웃을 흔들지 않는다.
|
||||
* 버튼은 값을 고친 뒤 input·change를 모두 울려 기존 리스너(연동·저장)가 그대로 탄다.
|
||||
*/
|
||||
/** 스텝 묶음 입력에 붙일 일련번호 — 라벨이 가리킬 대상을 명시하는 데 쓴다. */
|
||||
let stepperSeq = 0;
|
||||
|
||||
export function stepper(input: HTMLInputElement, stepM: number): HTMLElement {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = "b05-structure__stepper";
|
||||
// 라벨이 이 입력을 가리키게 id를 붙인다. 없으면 <label>의 암묵 대상이 묶음의
|
||||
// **첫 버튼(-)**이 되어, 라벨·입력 위에 커서만 올려도 - 버튼이 눌린 것처럼
|
||||
// 보이고 라벨을 누르면 값이 줄어든다(2026-08-29 사용자 보고).
|
||||
if (!input.id) input.id = `b05-step-${(stepperSeq += 1)}`;
|
||||
const nudge = (delta: number) => (): void => {
|
||||
const current = Number.parseFloat(input.value);
|
||||
const min = Number.parseFloat(input.min);
|
||||
|
||||
@@ -366,3 +366,26 @@
|
||||
.b05-structure__adjust-slot .b06-structure-panel__hval {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 제목(라벨)과 항목 사이 간격도 한 변수로 묶는다(2026-08-29 사용자 지시) — 기준은
|
||||
조정창에서 옮겨 온 행(2px·작은 글자). 측점 행은 가로 배치라 열 간격을 그대로 둔다. */
|
||||
.b05-structure-section {
|
||||
--b05-label-gap: 2px;
|
||||
}
|
||||
|
||||
.b05-structure-section .b05-route__field {
|
||||
gap: var(--b05-label-gap);
|
||||
}
|
||||
|
||||
.b05-structure-section .b05-route__field > span {
|
||||
font-size: var(--text-caption);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.b05-structure__adjust-slot .b06-structure-panel__struct {
|
||||
gap: var(--b05-label-gap);
|
||||
}
|
||||
|
||||
.b05-structure-section .b05-structure__position-row .b05-route__field {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user