@iyulab/data-components 0.14.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/README.md +39 -5
- package/dist/_virtual/{_@oxc-project_runtime@0.143.0 → _@oxc-project_runtime@0.144.0}/helpers/esm/decorate.js +1 -1
- package/dist/_virtual/{_@oxc-project_runtime@0.143.0 → _@oxc-project_runtime@0.144.0}/helpers/esm/decorateMetadata.js +1 -1
- package/dist/components/data-view/UDataView.js +2 -2
- package/dist/components/simple-sheet/USimpleSheet.js +2 -2
- package/dist/components/simple-sheet/USimpleSheet.styles.js +10 -3
- package/dist/components/u-rich-table/URichTable.js +2 -2
- package/dist/components/u-rich-table/styles.js +17 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.16.0] - 2026-08-16
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- **`u-rich-table` gained a `--dc-font-size` custom property**, defaulting to
|
|
8
|
+
`var(--u-density, 13px)` — the same LOB density switch `@iyulab/components`,
|
|
9
|
+
`@iyulab/flex-table`, and `u-simple-sheet` already read. Setting `--u-density` on an
|
|
10
|
+
ancestor now scales the table's header and body cell text (and the cell edit input, which
|
|
11
|
+
intentionally shares the same token so entering edit mode never changes the font size)
|
|
12
|
+
along with the rest of the UI. This component's other text (toolbar, pagination, filter
|
|
13
|
+
row, badges, sort indicator, validation messages) keeps its own fixed sizes — it forms a
|
|
14
|
+
four-step visual hierarchy (13/12/11/10px) that a single density switch would flatten, so
|
|
15
|
+
only the primary content axis (header/body/edit) follows it. Unset, rendering is
|
|
16
|
+
byte-identical to before. An explicit `u-rich-table { --dc-font-size: … }` override still
|
|
17
|
+
wins over the switch.
|
|
18
|
+
|
|
19
|
+
## [0.15.0] - 2026-08-16
|
|
20
|
+
|
|
21
|
+
### Added
|
|
22
|
+
|
|
23
|
+
- **`u-simple-sheet`'s body font size now reads `var(--u-density, 13px)`.** `@iyulab/components`
|
|
24
|
+
(`u-button`/`u-form`/`u-button-group`) and `@iyulab/flex-table` (`--ft-font-size`) already read
|
|
25
|
+
this switch; setting `--u-density` on an ancestor now scales the sheet's body text along with
|
|
26
|
+
them, instead of leaving it as the one stack that doesn't follow. Unset, rendering is
|
|
27
|
+
byte-identical to before (same 13px default). The element-selector override
|
|
28
|
+
(`u-simple-sheet { --dc-font-size: … }`) still wins over the switch, matching every other
|
|
29
|
+
token on this component. `--dc-header-font-size` is unaffected — the header and body font
|
|
30
|
+
sizes remain independent, as before.
|
|
31
|
+
|
|
3
32
|
## [0.14.0] - 2026-08-07
|
|
4
33
|
|
|
5
34
|
### Added
|
package/README.md
CHANGED
|
@@ -218,10 +218,16 @@ u-rich-table { --dc-icon-color: #B0B0B0; }
|
|
|
218
218
|
| `--dc-row-height` | `24px` | 셀 `height` 와 `line-height` **둘 다** |
|
|
219
219
|
| `--dc-cell-padding-block` | `0px` | 셀·편집 입력의 세로 여백 (행 높이에 **가산**) |
|
|
220
220
|
| `--dc-cell-padding-inline` | `6px` | 〃 가로 여백 |
|
|
221
|
-
| `--dc-font-size` | `13px` | 본문 셀 · 편집 입력 · 드롭다운 항목 |
|
|
222
|
-
| `--dc-header-font-size` | `12px` | 열 머리 |
|
|
221
|
+
| `--dc-font-size` | `13px`(`var(--u-density, 13px)`) | 본문 셀 · 편집 입력 · 드롭다운 항목 |
|
|
222
|
+
| `--dc-header-font-size` | `12px` | 열 머리 — `--u-density` 와 무관(본문과 독립) |
|
|
223
223
|
| `--dc-header-font-weight` | `600` | 〃 |
|
|
224
224
|
|
|
225
|
+
⚠**`--dc-font-size` 만 예외입니다 — `@iyulab/components`/`@iyulab/flex-table` 의 밀도
|
|
226
|
+
스위치(`--u-density`)를 폴백 원본으로 갖습니다**(0.15.0~). 조상에 `--u-density` 를 걸면
|
|
227
|
+
본문 글자가 컨트롤·표와 함께 움직입니다. 이 요소에 `--dc-font-size` 를 직접 선언하면
|
|
228
|
+
그 값이 여전히 이깁니다 — 다른 다섯 토큰과 같은 규칙입니다. 머리행은 이 스위치의
|
|
229
|
+
영향을 받지 않습니다.
|
|
230
|
+
|
|
225
231
|
```css
|
|
226
232
|
/* ⚠요소 선택자로 겨눕니다 — :root 는 닿지 않습니다(아래 참조) */
|
|
227
233
|
u-simple-sheet {
|
|
@@ -230,8 +236,9 @@ u-simple-sheet {
|
|
|
230
236
|
```
|
|
231
237
|
|
|
232
238
|
⚠**`:root` 로는 닿지 않습니다.** 커스텀 프로퍼티 상속값은 섀도 루트의 `:host` 선언에
|
|
233
|
-
집니다. 색 축과 달리 이 여섯은
|
|
234
|
-
|
|
239
|
+
집니다. 색 축과 달리 이 여섯은(`--dc-font-size` 도 포함 — 역할 토큰이 아니라 `--u-density`
|
|
240
|
+
스위치를 참조할 뿐, 역할 층에서 파생하는 것은 아닙니다) `:host` 에 기본값을 갖고 있으므로
|
|
241
|
+
**요소 선택자**(`u-simple-sheet { … }`)로 선언하십시오.
|
|
235
242
|
|
|
236
243
|
⚠**선언값과 «읽히는» 행 높이는 1.5px 다릅니다.** `border-collapse` 로 접힌 테두리가
|
|
237
244
|
사용값에 더해집니다 — 기본 `24px` 선언이 `25.5px` 로 읽힙니다. 32px 로 맞추려면
|
|
@@ -239,7 +246,34 @@ u-simple-sheet {
|
|
|
239
246
|
`0.11.0` 이전부터 그랬고, 교정하면 기본 렌더가 바뀌므로 이 릴리스에서는 두었습니다.)
|
|
240
247
|
|
|
241
248
|
⚠**`0.11.0` 도 조절점만 엽니다** — 선언하지 않으면 종전과 같은 값으로 그려집니다.
|
|
242
|
-
|
|
249
|
+
`--dc-row-height`·`--dc-cell-padding-block`·`--dc-cell-padding-inline`·
|
|
250
|
+
`--dc-header-font-size`·`--dc-header-font-weight` 다섯은 `u-simple-sheet` 전용입니다
|
|
251
|
+
(`u-data-view`·`u-rich-table` 은 읽지 않습니다). `--dc-font-size` 만 예외입니다 — 바로
|
|
252
|
+
아래 `u-rich-table` 절 참조.
|
|
253
|
+
|
|
254
|
+
### 그리드 밀도 조절 (`u-rich-table` · 0.16.0~)
|
|
255
|
+
|
|
256
|
+
시트 밀도 축(위)과 같은 이유로, `u-rich-table` 도 `--dc-font-size` 를 갖습니다 —
|
|
257
|
+
`--u-density` 를 폴백 원본으로 삼는 것도 `u-simple-sheet` 와 동일합니다.
|
|
258
|
+
|
|
259
|
+
| 토큰 | 기본값 | 무엇을 정하나 |
|
|
260
|
+
|---|---|---|
|
|
261
|
+
| `--dc-font-size` | `13px`(`var(--u-density, 13px)`) | 열 머리 · 본문 셀 · 편집 입력 |
|
|
262
|
+
|
|
263
|
+
⚠**이 컴포넌트는 시각 위계가 넉 단(13/12/11/10px)이고, 이 하나만 밀도를 따릅니다.**
|
|
264
|
+
툴바·페이지네이션·필터 행·배지·정렬 표시자·검증 오류 메시지는 의도적으로 남습니다 —
|
|
265
|
+
전부를 한 스위치에 묶으면 그 위계가 무너집니다. 편집 입력은 본문 셀과 **같은 토큰**을
|
|
266
|
+
공유합니다 — 따로 두면 편집 진입 순간 글자가 튑니다.
|
|
267
|
+
|
|
268
|
+
```css
|
|
269
|
+
/* 조상에 걸면 헤더·본문·편집 입력이 함께 움직입니다 */
|
|
270
|
+
.app-shell { --u-density: 15px; }
|
|
271
|
+
|
|
272
|
+
/* 이 그리드만 다르게 */
|
|
273
|
+
u-rich-table { --dc-font-size: 15px; }
|
|
274
|
+
```
|
|
275
|
+
|
|
276
|
+
⚠**미설정 시 렌더는 종전(`13px`)과 바이트 단위로 동일합니다.**
|
|
243
277
|
|
|
244
278
|
### 알려진 제약
|
|
245
279
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
|
|
2
2
|
function __decorate(decorators, target, key, desc) {
|
|
3
3
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
4
4
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
//#region \0@oxc-project+runtime@0.
|
|
1
|
+
//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorateMetadata.js
|
|
2
2
|
function __decorateMetadata(k, v) {
|
|
3
3
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
4
4
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { styles } from "./UDataView.styles.js";
|
|
2
|
-
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.
|
|
3
|
-
import __decorate from "../../_virtual/_@oxc-project_runtime@0.
|
|
2
|
+
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
|
|
3
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
|
|
4
4
|
import { html } from "lit";
|
|
5
5
|
import { customElement, property } from "lit/decorators.js";
|
|
6
6
|
import "@iyulab/components/dist/components/icon/UIcon.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import __decorate from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
|
|
3
3
|
import { messages } from "../../utilities/messages.js";
|
|
4
4
|
import { styles } from "./USimpleSheet.styles.js";
|
|
5
5
|
import { html } from "lit";
|
|
@@ -29,12 +29,19 @@ var baseStyles = css`
|
|
|
29
29
|
⚠**색 축과 달리 역할 토큰에서 파생하지 않는다** — 역할 층에 치수 축이 없다.
|
|
30
30
|
그래서 폴백이 아니라 :host 리터럴 기본값이고, 소비자는 **요소 선택자**로 덮는다
|
|
31
31
|
(:host 선언은 상속값을 이기므로 :root 로는 닿지 않는다).
|
|
32
|
-
⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다.
|
|
32
|
+
⚠**이 컴포넌트가 «읽는» 단만 선언한다** — 색 축과 같은 규칙이다.
|
|
33
|
+
★**단 하나의 예외 — --dc-font-size 는 --u-density 를 폴백 원본으로 갖는다.**
|
|
34
|
+
components(UButton/UForm/UButtonGroup)와 flex-table(--ft-font-size)이
|
|
35
|
+
이미 같은 형태로 이 스위치를 읽는다 — 컨트롤과 표가 «한 벌»로 움직이려면 이
|
|
36
|
+
스택도 같은 원천을 봐야 한다. **--dc-header-font-size 는 여기 포함되지 않는다** —
|
|
37
|
+
본문과 머리행이 서로 독립이라는 이 컴포넌트의 기존 계약(아래 회귀 테스트가
|
|
38
|
+
고정)을 이 변경이 깨지 않는다. --u-density 미설정 시 렌더는 종전과 바이트
|
|
39
|
+
단위로 동일하다(기본값이 같은 13px). */
|
|
33
40
|
--dc-row-height: 24px; /* 셀 height · line-height (묶임) */
|
|
34
41
|
--dc-cell-padding-block: 0px; /* 셀 · 편집 입력의 세로 여백 (가산) */
|
|
35
42
|
--dc-cell-padding-inline: 6px; /* 〃 가로 여백 */
|
|
36
|
-
--dc-font-size: 13px; /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
|
|
37
|
-
--dc-header-font-size: 12px; /* 열 머리 */
|
|
43
|
+
--dc-font-size: var(--u-density, 13px); /* 본문 셀 · 편집 입력 · 드롭다운 항목 */
|
|
44
|
+
--dc-header-font-size: 12px; /* 열 머리 — --u-density 와 무관(독립 계약 유지) */
|
|
38
45
|
--dc-header-font-weight: 600; /* 〃 */
|
|
39
46
|
|
|
40
47
|
display: block;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.
|
|
2
|
-
import __decorate from "../../_virtual/_@oxc-project_runtime@0.
|
|
1
|
+
import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
|
|
2
|
+
import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.js";
|
|
3
3
|
import { messages } from "../../utilities/messages.js";
|
|
4
4
|
import { richTableStyles } from "./styles.js";
|
|
5
5
|
import { parseTSV, toTSV } from "./utils/clipboard.js";
|
|
@@ -16,6 +16,20 @@ var richTableStyles = css`
|
|
|
16
16
|
--dc-muted-color: var(--u-txt-color-weak, #757575); /* 보조 텍스트 · 라벨 */
|
|
17
17
|
--dc-icon-color: var(--u-txt-color-weak, #757575); /* 정렬 표시 · 확장 · 행 메뉴 */
|
|
18
18
|
--dc-empty-color: var(--u-txt-color-weak, #757575); /* 빈 상태 안내문 */
|
|
19
|
+
/* ── 소비자 조절점 — 본문 타이포 ──
|
|
20
|
+
★USimpleSheet와 같은 이름 --dc-font-size 를 그대로 쓴다 — 이 패키지의 표 컴포넌트가
|
|
21
|
+
공유하는 관용(위 색 축과 같은 이유: --dc-muted-color 도 세 컴포넌트가 공유한다).
|
|
22
|
+
components/flex-table/USimpleSheet 이 이미 읽는 --u-density 밀도 스위치를 폴백
|
|
23
|
+
원본으로 가져, 컨트롤·표·시트·이 그리드가 한 벌로 움직인다.
|
|
24
|
+
⚠**모든 font-size 선언이 아니라 이 하나만 연다.** 이 컴포넌트는 시각 위계가
|
|
25
|
+
13(본문)·12(툴바/보조)·11(필터/페이지네이션)·10(장식적 표시자)px 넉 단으로
|
|
26
|
+
이미 갈려 있다 — 전부를 하나의 스위치로 묶으면 위계가 무너진다. 여기서 여는 것은
|
|
27
|
+
**헤더·본문 셀**(:host 상속 경로) + **편집 입력**뿐이다. 편집 입력은 반드시 이
|
|
28
|
+
토큰을 같이 읽어야 한다 — 따로 두면 편집 진입 순간 글자 크기가 튄다(USimpleSheet
|
|
29
|
+
가 "본문 셀 · 편집 입력 · 드롭다운 항목"을 한 토큰으로 묶은 것과 같은 이유).
|
|
30
|
+
나머지 열한 곳(툴바·페이지네이션·필터행·배지·정렬 표시자·검증 오류)은 의도적으로
|
|
31
|
+
남겨 둔다 — 장식·보조 텍스트라 D-17 이 아이콘/배지 크기를 뺀 것과 같은 경계다. */
|
|
32
|
+
--dc-font-size: var(--u-density, 13px);
|
|
19
33
|
/* ── 세로 레이아웃 ──
|
|
20
34
|
🔴**높이 제약은 데이터 그리드의 기본 사용 형태다** — 「조회 조건 + 결과 목록」이 한 화면에
|
|
21
35
|
들어가야 하고, 결과가 몇 건이든 조건 영역과 페이지 이동은 항상 같은 자리에 있어야 한다.
|
|
@@ -27,7 +41,7 @@ var richTableStyles = css`
|
|
|
27
41
|
display: flex;
|
|
28
42
|
flex-direction: column;
|
|
29
43
|
font-family: system-ui, -apple-system, sans-serif;
|
|
30
|
-
font-size:
|
|
44
|
+
font-size: var(--dc-font-size);
|
|
31
45
|
color: var(--u-txt-color, #212121);
|
|
32
46
|
border: 1px solid var(--u-border-color, #E0E0E0);
|
|
33
47
|
border-radius: 8px;
|
|
@@ -176,7 +190,8 @@ var richTableStyles = css`
|
|
|
176
190
|
padding: 4px 6px;
|
|
177
191
|
border: 1px solid var(--u-primary-color, #1976D2);
|
|
178
192
|
border-radius: 3px;
|
|
179
|
-
font-size
|
|
193
|
+
/* --dc-font-size 를 본문 셀과 공유한다 — 따로 두면 편집 진입 순간 글자가 튄다. */
|
|
194
|
+
font-size: var(--dc-font-size);
|
|
180
195
|
outline: none;
|
|
181
196
|
}
|
|
182
197
|
|