@iyulab/flex-table 0.21.0 → 0.22.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/README.md
CHANGED
|
@@ -269,30 +269,56 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
|
|
|
269
269
|
|
|
270
270
|
## CSS Custom Properties
|
|
271
271
|
|
|
272
|
-
All colors and styles are customizable via CSS custom properties
|
|
272
|
+
All colors and styles are customizable via CSS custom properties.
|
|
273
|
+
|
|
274
|
+
**Two levels, pick whichever fits.** Since 0.22.0 every `--ft-*` colour is derived from
|
|
275
|
+
the `@iyulab/components` design tokens, so if you already load that token sheet the table
|
|
276
|
+
follows your brand with no per-table configuration:
|
|
277
|
+
|
|
278
|
+
```css
|
|
279
|
+
:root { --u-primary-color: #7b1fa2; } /* the table's accent, selection and boolean
|
|
280
|
+
markers follow — so do the buttons and shell */
|
|
281
|
+
```
|
|
282
|
+
|
|
283
|
+
Override an individual `--ft-*` when you want the table to differ from the rest of the app:
|
|
273
284
|
|
|
274
285
|
```css
|
|
275
286
|
flex-table {
|
|
276
287
|
--ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
277
288
|
--ft-font-size: 14px;
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
--ft-
|
|
281
|
-
--ft-
|
|
282
|
-
--ft-
|
|
283
|
-
--ft-header-
|
|
284
|
-
--ft-
|
|
285
|
-
--ft-
|
|
286
|
-
--ft-row-
|
|
287
|
-
--ft-
|
|
288
|
-
--ft-
|
|
289
|
-
--ft-
|
|
290
|
-
--ft-sort-indicator-color: #5f6368
|
|
291
|
-
--ft-
|
|
292
|
-
|
|
289
|
+
|
|
290
|
+
/* Surfaces and text derived from */
|
|
291
|
+
--ft-bg: #fff; /* --u-bg-color */
|
|
292
|
+
--ft-text-color: #202124; /* --u-txt-color */
|
|
293
|
+
--ft-border-color: #e0e0e0; /* --u-border-color */
|
|
294
|
+
--ft-header-bg: #f8f9fa; /* --u-bg-color-raised */
|
|
295
|
+
--ft-header-hover-bg: #e8eaed; /* --u-bg-color-active */
|
|
296
|
+
--ft-header-text-color: #202124; /* --u-txt-color */
|
|
297
|
+
--ft-row-even-bg: #fff; /* --u-bg-color */
|
|
298
|
+
--ft-row-odd-bg: #fafafa; /* --u-bg-color-raised */
|
|
299
|
+
--ft-row-hover-bg: #f0f4ff; /* --u-bg-color-hover */
|
|
300
|
+
--ft-editor-bg: #fff; /* --u-input-bg-color */
|
|
301
|
+
--ft-sort-indicator-color: #5f6368;/* --u-txt-color-weak */
|
|
302
|
+
--ft-empty-color: #5f6368; /* --u-txt-color-weak */
|
|
303
|
+
|
|
304
|
+
/* Accent */
|
|
305
|
+
--ft-active-color: #1a73e8; /* --u-primary-color */
|
|
306
|
+
--ft-selection-bg: #e8f0fe; /* --u-primary-bg-color */
|
|
307
|
+
--ft-bool-color: #2196f3; /* --u-primary-color */
|
|
308
|
+
|
|
309
|
+
/* State overlays — these are translucent on purpose, so the row striping and
|
|
310
|
+
selection underneath stay visible. Set the *-color and the background follows. */
|
|
311
|
+
--ft-invalid-color: #d93025; /* --u-danger-color */
|
|
312
|
+
--ft-drop-color: #1a73e8; /* --u-primary-color */
|
|
313
|
+
--ft-find-color: #f9a825; /* --u-warning-color */
|
|
293
314
|
}
|
|
294
315
|
```
|
|
295
316
|
|
|
317
|
+
**Without the token sheet nothing changes.** Every reference carries the literal above as
|
|
318
|
+
its fallback, and the built-in dark theme (`prefers-color-scheme` or `theme="dark"`) still
|
|
319
|
+
applies — the table remains usable standalone. Referencing the tokens does not add a
|
|
320
|
+
package dependency; CSS custom properties are resolved at render time, not imported.
|
|
321
|
+
|
|
296
322
|
## Keyboard Shortcuts
|
|
297
323
|
|
|
298
324
|
| Key | Action |
|
|
@@ -6,61 +6,84 @@ var s = t`
|
|
|
6
6
|
:host {
|
|
7
7
|
--ft-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
8
8
|
--ft-font-size: 14px;
|
|
9
|
-
--ft-border-color: #e0e0e0;
|
|
10
|
-
--ft-bg: #fff;
|
|
11
|
-
--ft-text-color: #202124;
|
|
12
|
-
--ft-header-bg: #f8f9fa;
|
|
13
|
-
--ft-header-hover-bg: #e8eaed;
|
|
14
|
-
--ft-header-text-color: #202124;
|
|
15
|
-
--ft-row-even-bg: #fff;
|
|
16
|
-
--ft-row-odd-bg: #fafafa;
|
|
17
|
-
--ft-row-hover-bg: #f0f4ff;
|
|
18
|
-
--ft-active-color: #1a73e8;
|
|
19
|
-
--ft-selection-bg: #e8f0fe;
|
|
20
|
-
--ft-bool-color: #2196f3;
|
|
21
|
-
--ft-sort-indicator-color: #5f6368;
|
|
22
|
-
--ft-editor-bg: #fff;
|
|
23
|
-
--ft-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
9
|
+
--ft-border-color: var(--u-border-color, #e0e0e0);
|
|
10
|
+
--ft-bg: var(--u-bg-color, #fff);
|
|
11
|
+
--ft-text-color: var(--u-txt-color, #202124);
|
|
12
|
+
--ft-header-bg: var(--u-bg-color-raised, #f8f9fa);
|
|
13
|
+
--ft-header-hover-bg: var(--u-bg-color-active, #e8eaed);
|
|
14
|
+
--ft-header-text-color: var(--u-txt-color, #202124);
|
|
15
|
+
--ft-row-even-bg: var(--u-bg-color, #fff);
|
|
16
|
+
--ft-row-odd-bg: var(--u-bg-color-raised, #fafafa);
|
|
17
|
+
--ft-row-hover-bg: var(--u-bg-color-hover, #f0f4ff);
|
|
18
|
+
--ft-active-color: var(--u-primary-color, #1a73e8);
|
|
19
|
+
--ft-selection-bg: var(--u-primary-bg-color, #e8f0fe);
|
|
20
|
+
--ft-bool-color: var(--u-primary-color, #2196f3);
|
|
21
|
+
--ft-sort-indicator-color: var(--u-txt-color-weak, #5f6368);
|
|
22
|
+
--ft-editor-bg: var(--u-input-bg-color, #fff);
|
|
23
|
+
/* #999 was 2.85 against --ft-bg (#fff); AA needs 4.5. The dark value (#9aa0a6 on
|
|
24
|
+
#1e1e2e = 6.31) was already fine, so this was a light-only defect. #5f6368 is the
|
|
25
|
+
same grey the sort indicator uses, which keeps the palette to one family. */
|
|
26
|
+
--ft-empty-color: var(--u-txt-color-weak, #5f6368);
|
|
27
|
+
|
|
28
|
+
/* 상태 색 — 종전에는 규칙 안에 리터럴로 박혀 있어 소비자가 덮을 경로가 없었고
|
|
29
|
+
테마도 따라오지 않았다(다크에서 라이트용 값 그대로).
|
|
30
|
+
|
|
31
|
+
★**셀 배경은 불투명 면이 아니라 반투명 겹침이다.** 줄무늬(홀/짝 행)와 선택 표시가
|
|
32
|
+
아래에 있고 그것이 비쳐야 "어느 행의 어떤 셀"인지 읽힌다. 그래서 면 토큰
|
|
33
|
+
(--u-*-bg-color)이 아니라 **상태 색에서 알파를 뽑는다** — 부수 효과로 두 테마
|
|
34
|
+
모두에서 성립하므로 아래 다크 블록에 이 셋을 다시 적을 필요가 없다. */
|
|
35
|
+
--ft-invalid-color: var(--u-danger-color, #d93025);
|
|
36
|
+
--ft-invalid-bg: color-mix(in srgb, var(--ft-invalid-color) 8%, transparent);
|
|
37
|
+
--ft-drop-color: var(--u-primary-color, #1a73e8);
|
|
38
|
+
--ft-drop-bg: color-mix(in srgb, var(--ft-drop-color) 15%, transparent);
|
|
39
|
+
--ft-find-color: var(--u-warning-color, #f9a825);
|
|
40
|
+
--ft-find-bg: color-mix(in srgb, var(--ft-find-color) 25%, transparent);
|
|
41
|
+
--ft-find-current-bg: color-mix(in srgb, var(--ft-find-color) 50%, transparent);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* --- Dark Theme (auto via prefers-color-scheme) ---
|
|
45
|
+
★**토큰 시트가 로드된 환경에서 아래 두 블록은 아무 일도 하지 않는다** — --u-* 가
|
|
46
|
+
이미 테마별로 다른 값을 가리키므로 base 규칙만으로 두 테마가 성립한다.
|
|
47
|
+
남겨 두는 이유는 **시트가 없는 소비자**다: 그때는 각 var() 의 리터럴 폴백이
|
|
48
|
+
발동하고, 아래 블록이 그 폴백을 다크 값으로 바꿔 준다.
|
|
49
|
+
⇒ 즉 이 표는 시트 없이도 종전처럼 자체 테마를 갖는다(그것이 이 패키지의 계약이었다). */
|
|
27
50
|
@media (prefers-color-scheme: dark) {
|
|
28
51
|
:host(:not([theme="light"])) {
|
|
29
|
-
--ft-border-color: #3c4043;
|
|
30
|
-
--ft-bg: #1e1e1e;
|
|
31
|
-
--ft-text-color: #e8eaed;
|
|
32
|
-
--ft-header-bg: #292a2d;
|
|
33
|
-
--ft-header-hover-bg: #3c4043;
|
|
34
|
-
--ft-header-text-color: #e8eaed;
|
|
35
|
-
--ft-row-even-bg: #1e1e1e;
|
|
36
|
-
--ft-row-odd-bg: #252526;
|
|
37
|
-
--ft-row-hover-bg: #2a2d2e;
|
|
38
|
-
--ft-active-color: #4da3ff;
|
|
39
|
-
--ft-selection-bg: #264f78;
|
|
40
|
-
--ft-bool-color: #64b5f6;
|
|
41
|
-
--ft-sort-indicator-color: #9aa0a6;
|
|
42
|
-
--ft-editor-bg: #2d2d2d;
|
|
43
|
-
--ft-empty-color: #9aa0a6;
|
|
52
|
+
--ft-border-color: var(--u-border-color, #3c4043);
|
|
53
|
+
--ft-bg: var(--u-bg-color, #1e1e1e);
|
|
54
|
+
--ft-text-color: var(--u-txt-color, #e8eaed);
|
|
55
|
+
--ft-header-bg: var(--u-bg-color-raised, #292a2d);
|
|
56
|
+
--ft-header-hover-bg: var(--u-bg-color-active, #3c4043);
|
|
57
|
+
--ft-header-text-color: var(--u-txt-color, #e8eaed);
|
|
58
|
+
--ft-row-even-bg: var(--u-bg-color, #1e1e1e);
|
|
59
|
+
--ft-row-odd-bg: var(--u-bg-color-raised, #252526);
|
|
60
|
+
--ft-row-hover-bg: var(--u-bg-color-hover, #2a2d2e);
|
|
61
|
+
--ft-active-color: var(--u-primary-color, #4da3ff);
|
|
62
|
+
--ft-selection-bg: var(--u-primary-bg-color, #264f78);
|
|
63
|
+
--ft-bool-color: var(--u-primary-color, #64b5f6);
|
|
64
|
+
--ft-sort-indicator-color: var(--u-txt-color-weak, #9aa0a6);
|
|
65
|
+
--ft-editor-bg: var(--u-input-bg-color, #2d2d2d);
|
|
66
|
+
--ft-empty-color: var(--u-txt-color-weak, #9aa0a6);
|
|
44
67
|
}
|
|
45
68
|
}
|
|
46
69
|
|
|
47
70
|
/* --- Force dark via attribute --- */
|
|
48
71
|
:host([theme="dark"]) {
|
|
49
|
-
--ft-border-color: #3c4043;
|
|
50
|
-
--ft-bg: #1e1e1e;
|
|
51
|
-
--ft-text-color: #e8eaed;
|
|
52
|
-
--ft-header-bg: #292a2d;
|
|
53
|
-
--ft-header-hover-bg: #3c4043;
|
|
54
|
-
--ft-header-text-color: #e8eaed;
|
|
55
|
-
--ft-row-even-bg: #1e1e1e;
|
|
56
|
-
--ft-row-odd-bg: #252526;
|
|
57
|
-
--ft-row-hover-bg: #2a2d2e;
|
|
58
|
-
--ft-active-color: #4da3ff;
|
|
59
|
-
--ft-selection-bg: #264f78;
|
|
60
|
-
--ft-bool-color: #64b5f6;
|
|
61
|
-
--ft-sort-indicator-color: #9aa0a6;
|
|
62
|
-
--ft-editor-bg: #2d2d2d;
|
|
63
|
-
--ft-empty-color: #9aa0a6;
|
|
72
|
+
--ft-border-color: var(--u-border-color, #3c4043);
|
|
73
|
+
--ft-bg: var(--u-bg-color, #1e1e1e);
|
|
74
|
+
--ft-text-color: var(--u-txt-color, #e8eaed);
|
|
75
|
+
--ft-header-bg: var(--u-bg-color-raised, #292a2d);
|
|
76
|
+
--ft-header-hover-bg: var(--u-bg-color-active, #3c4043);
|
|
77
|
+
--ft-header-text-color: var(--u-txt-color, #e8eaed);
|
|
78
|
+
--ft-row-even-bg: var(--u-bg-color, #1e1e1e);
|
|
79
|
+
--ft-row-odd-bg: var(--u-bg-color-raised, #252526);
|
|
80
|
+
--ft-row-hover-bg: var(--u-bg-color-hover, #2a2d2e);
|
|
81
|
+
--ft-active-color: var(--u-primary-color, #4da3ff);
|
|
82
|
+
--ft-selection-bg: var(--u-primary-bg-color, #264f78);
|
|
83
|
+
--ft-bool-color: var(--u-primary-color, #64b5f6);
|
|
84
|
+
--ft-sort-indicator-color: var(--u-txt-color-weak, #9aa0a6);
|
|
85
|
+
--ft-editor-bg: var(--u-input-bg-color, #2d2d2d);
|
|
86
|
+
--ft-empty-color: var(--u-txt-color-weak, #9aa0a6);
|
|
64
87
|
}
|
|
65
88
|
|
|
66
89
|
/* --- Layout --- */
|
|
@@ -215,9 +238,9 @@ var s = t`
|
|
|
215
238
|
}
|
|
216
239
|
|
|
217
240
|
.ft-cell.ft-invalid {
|
|
218
|
-
outline: 2px solid
|
|
241
|
+
outline: 2px solid var(--ft-invalid-color);
|
|
219
242
|
outline-offset: -2px;
|
|
220
|
-
background:
|
|
243
|
+
background: var(--ft-invalid-bg);
|
|
221
244
|
}
|
|
222
245
|
|
|
223
246
|
.ft-cell.ft-editing { padding: 0; overflow: visible; }
|
|
@@ -309,14 +332,14 @@ var s = t`
|
|
|
309
332
|
position: absolute;
|
|
310
333
|
inset: 0;
|
|
311
334
|
z-index: 100;
|
|
312
|
-
background:
|
|
313
|
-
border: 2px dashed
|
|
335
|
+
background: var(--ft-drop-bg);
|
|
336
|
+
border: 2px dashed var(--ft-drop-color);
|
|
314
337
|
display: flex;
|
|
315
338
|
align-items: center;
|
|
316
339
|
justify-content: center;
|
|
317
340
|
font-size: 14px;
|
|
318
341
|
font-weight: 500;
|
|
319
|
-
color:
|
|
342
|
+
color: var(--ft-drop-color);
|
|
320
343
|
pointer-events: none;
|
|
321
344
|
border-radius: 4px;
|
|
322
345
|
}
|
|
@@ -689,7 +712,7 @@ var s = t`
|
|
|
689
712
|
|
|
690
713
|
.ft-comment-popup-textarea:focus {
|
|
691
714
|
border-color: var(--ft-active-color, #3b82f6);
|
|
692
|
-
box-shadow: 0 0 0 2px
|
|
715
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ft-active-color) 20%, transparent);
|
|
693
716
|
}
|
|
694
717
|
|
|
695
718
|
.ft-comment-popup-buttons {
|
|
@@ -798,12 +821,12 @@ var s = t`
|
|
|
798
821
|
|
|
799
822
|
/* Find highlight */
|
|
800
823
|
.ft-cell.ft-find-match {
|
|
801
|
-
background:
|
|
824
|
+
background: var(--ft-find-bg) !important;
|
|
802
825
|
}
|
|
803
826
|
|
|
804
827
|
.ft-cell.ft-find-current {
|
|
805
|
-
background:
|
|
806
|
-
outline: 2px solid
|
|
828
|
+
background: var(--ft-find-current-bg) !important;
|
|
829
|
+
outline: 2px solid var(--ft-find-color);
|
|
807
830
|
outline-offset: -2px;
|
|
808
831
|
}
|
|
809
832
|
`;
|
|
@@ -1480,7 +1503,7 @@ async function be(e) {
|
|
|
1480
1503
|
};
|
|
1481
1504
|
}
|
|
1482
1505
|
//#endregion
|
|
1483
|
-
//#region \0@oxc-project+runtime@0.
|
|
1506
|
+
//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
|
|
1484
1507
|
function J(e, t, n, r) {
|
|
1485
1508
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
1486
1509
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -2361,7 +2384,7 @@ var Y = {
|
|
|
2361
2384
|
"y"
|
|
2362
2385
|
].includes(t) && this._handleCtrlKey(e)) return;
|
|
2363
2386
|
}
|
|
2364
|
-
if (
|
|
2387
|
+
if (t.length !== 0 && this._visibleRowCount !== 0) {
|
|
2365
2388
|
if ((e.key === "Enter" || e.key === "F2") && this._activeCell) {
|
|
2366
2389
|
e.preventDefault(), this._startEdit();
|
|
2367
2390
|
return;
|
|
@@ -2822,9 +2845,9 @@ var Y = {
|
|
|
2822
2845
|
if (!o) return r;
|
|
2823
2846
|
let s = this.data[t]?.[o.key], c = this._filters.some((e) => e.key === o.key), l = () => {
|
|
2824
2847
|
this._bodyContextMenu = null;
|
|
2825
|
-
};
|
|
2848
|
+
}, u = i + 200 > window.innerWidth ? i - 200 : i, d = a + 280 > window.innerHeight ? a - 280 : a;
|
|
2826
2849
|
return n`
|
|
2827
|
-
<div class="ft-body-context-menu" style="position: fixed; left: ${
|
|
2850
|
+
<div class="ft-body-context-menu" style="position: fixed; left: ${u}px; top: ${d}px; z-index: 200;"
|
|
2828
2851
|
@mousedown=${(e) => e.stopPropagation()}>
|
|
2829
2852
|
<div class="ft-context-menu-item"
|
|
2830
2853
|
@click=${() => {
|
|
@@ -2925,10 +2948,10 @@ var Y = {
|
|
|
2925
2948
|
}
|
|
2926
2949
|
_renderCommentPopup() {
|
|
2927
2950
|
if (!this._commentPopup) return r;
|
|
2928
|
-
let { x: e, y: t } = this._commentPopup;
|
|
2951
|
+
let { x: e, y: t } = this._commentPopup, i = e + 240 > window.innerWidth ? e - 240 : e, a = t + 150 > window.innerHeight ? t - 150 : t;
|
|
2929
2952
|
return n`
|
|
2930
2953
|
<div class="ft-comment-popup"
|
|
2931
|
-
style="position: fixed; left: ${
|
|
2954
|
+
style="position: fixed; left: ${i}px; top: ${a}px; z-index: 201;"
|
|
2932
2955
|
@mousedown=${(e) => e.stopPropagation()}>
|
|
2933
2956
|
<textarea class="ft-comment-popup-textarea"
|
|
2934
2957
|
rows="4"
|
|
@@ -3004,11 +3027,12 @@ var Y = {
|
|
|
3004
3027
|
return e === "empty" ? (e) => e == null || e === "" : (e) => e != null && e !== "";
|
|
3005
3028
|
}
|
|
3006
3029
|
_renderEmptyFilterRow(e, t) {
|
|
3030
|
+
let r = this._emptyFilterState.get(e) ?? "";
|
|
3007
3031
|
return n`
|
|
3008
3032
|
<div class="ft-filter-empty-row">
|
|
3009
3033
|
<label>Blank cells</label>
|
|
3010
3034
|
<select class="ft-filter-mode-select"
|
|
3011
|
-
.value=${
|
|
3035
|
+
.value=${r}
|
|
3012
3036
|
@change=${(n) => {
|
|
3013
3037
|
let r = n.target.value;
|
|
3014
3038
|
(r === "" || r === "empty" || r === "non-empty") && (r ? this._emptyFilterState.set(e, r) : this._emptyFilterState.delete(e), t?.(), this._applyFilterForKey(e));
|
|
@@ -3453,8 +3477,10 @@ var Y = {
|
|
|
3453
3477
|
let t = this.visibleColumns;
|
|
3454
3478
|
if (e.endCol >= t.length || e.endRow >= this._visibleRowCount) return "";
|
|
3455
3479
|
let r = (this._colLeftOffsets[e.endCol] ?? 0) + this._getColWidth(t[e.endCol]) - this._scrollLeft - 4, i = this.headerHeight + (e.endRow + 1) * this.rowHeight - this._scrollTop - 4;
|
|
3456
|
-
|
|
3457
|
-
|
|
3480
|
+
if (r < 0 || i < this.headerHeight) return "";
|
|
3481
|
+
let a = this._fillDrag?.active && this._fillDrag.targetRange ? this._renderFillPreview(this._fillDrag.targetRange) : "";
|
|
3482
|
+
return n`
|
|
3483
|
+
${a}
|
|
3458
3484
|
<div class="ft-fill-handle"
|
|
3459
3485
|
style="left:${r}px;top:${i}px;"
|
|
3460
3486
|
@mousedown=${(e) => this._onFillHandleMouseDown(e)}>
|
|
@@ -3463,7 +3489,9 @@ var Y = {
|
|
|
3463
3489
|
}
|
|
3464
3490
|
_renderFillPreview(e) {
|
|
3465
3491
|
let t = this.visibleColumns;
|
|
3466
|
-
|
|
3492
|
+
if (e.endCol >= t.length || e.endRow >= this._visibleRowCount) return "";
|
|
3493
|
+
let r = (this._colLeftOffsets[e.startCol] ?? 0) - this._scrollLeft, i = this.headerHeight + e.startRow * this.rowHeight - this._scrollTop, a = (this._colLeftOffsets[e.endCol] ?? 0) + this._getColWidth(t[e.endCol]) - (this._colLeftOffsets[e.startCol] ?? 0), o = (e.endRow - e.startRow + 1) * this.rowHeight;
|
|
3494
|
+
return n`<div class="ft-fill-preview" style="left:${r}px;top:${i}px;width:${a}px;height:${o}px;"></div>`;
|
|
3467
3495
|
}
|
|
3468
3496
|
_onRowNumMouseDown(e, t) {
|
|
3469
3497
|
if (e.button !== 0) return;
|
|
@@ -3713,15 +3741,18 @@ var Y = {
|
|
|
3713
3741
|
for (let t of l) m.push(this._renderHeaderCell(e[t], t));
|
|
3714
3742
|
for (let t = s; t < c; t++) m.push(this._renderHeaderCell(e[t], t));
|
|
3715
3743
|
let h = this._colDragIndicatorLeft == null ? "" : n`<div class="ft-drop-indicator" style="left:${this._colDragIndicatorLeft}px"></div>`;
|
|
3716
|
-
if (this.data.length === 0 || this._visibleRowCount === 0)
|
|
3744
|
+
if (this.data.length === 0 || this._visibleRowCount === 0) {
|
|
3745
|
+
let e = this.data.length === 0 ? "No data" : "No matching data";
|
|
3746
|
+
return n`
|
|
3717
3747
|
${i}
|
|
3718
3748
|
<div class="ft-header" role="row" style="width: ${o}px; height: ${a}px;">
|
|
3719
3749
|
${f}${p}
|
|
3720
3750
|
${m}
|
|
3721
3751
|
${h}
|
|
3722
3752
|
</div>
|
|
3723
|
-
<div class="ft-empty">${
|
|
3753
|
+
<div class="ft-empty">${e}</div>
|
|
3724
3754
|
`;
|
|
3755
|
+
}
|
|
3725
3756
|
let { start: g, end: _ } = this.visibleRange, v = this._frozenRowCount, y = [];
|
|
3726
3757
|
for (let e = g; e < _; e++) y.push(this._renderRow(e, s, c, l, (e - v) * this.rowHeight));
|
|
3727
3758
|
let b = this._renderFillHandle(), x = this._rowDragIndicatorY == null ? "" : n`<div class="ft-row-drop-indicator" style="top:${this._rowDragIndicatorY}px;width:${o + this._prefixWidth}px;"></div>`;
|
|
@@ -3872,18 +3903,24 @@ var Y = {
|
|
|
3872
3903
|
@keydown=${this._onEditorKeyDown}
|
|
3873
3904
|
@blur=${() => this._commitEdit()}>
|
|
3874
3905
|
`;
|
|
3875
|
-
if (t.type === "date")
|
|
3906
|
+
if (t.type === "date") {
|
|
3907
|
+
let e = this._toDateInputValue(i);
|
|
3908
|
+
return n`
|
|
3876
3909
|
<input class="ft-editor" type="date"
|
|
3877
|
-
.value=${
|
|
3910
|
+
.value=${e}
|
|
3878
3911
|
@keydown=${this._onEditorKeyDown}
|
|
3879
3912
|
@blur=${() => this._commitEdit()}>
|
|
3880
3913
|
`;
|
|
3881
|
-
|
|
3914
|
+
}
|
|
3915
|
+
if (t.type === "datetime") {
|
|
3916
|
+
let e = this._toDateTimeInputValue(i);
|
|
3917
|
+
return n`
|
|
3882
3918
|
<input class="ft-editor" type="datetime-local"
|
|
3883
|
-
.value=${
|
|
3919
|
+
.value=${e}
|
|
3884
3920
|
@keydown=${this._onEditorKeyDown}
|
|
3885
3921
|
@blur=${() => this._commitEdit()}>
|
|
3886
3922
|
`;
|
|
3923
|
+
}
|
|
3887
3924
|
if (t.type === "select" && t.options && t.options.length > 0) {
|
|
3888
3925
|
let e = t.options, r = typeof e[0] == "string";
|
|
3889
3926
|
return n`
|
package/dist/flex-table.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as e, i as t, n, r, t as i } from "./flex-table-
|
|
1
|
+
import { a as e, i as t, n, r, t as i } from "./flex-table-C1F6T8Zj.js";
|
|
2
2
|
export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };
|
package/dist/react.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@iyulab/flex-table",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"description": "A minimalist, input-centric data grid web component",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/flex-table.js",
|
|
@@ -69,6 +69,7 @@
|
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@lit/react": "^1.0.8",
|
|
72
|
+
"@types/node": "^26.1.1",
|
|
72
73
|
"@types/react": "^19.2.17",
|
|
73
74
|
"@typescript-eslint/eslint-plugin": "^8.64.0",
|
|
74
75
|
"@typescript-eslint/parser": "^8.64.0",
|