@iyulab/flex-table 0.21.1 → 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,64 +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;
|
|
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
23
|
/* #999 was 2.85 against --ft-bg (#fff); AA needs 4.5. The dark value (#9aa0a6 on
|
|
24
24
|
#1e1e2e = 6.31) was already fine, so this was a light-only defect. #5f6368 is the
|
|
25
25
|
same grey the sort indicator uses, which keeps the palette to one family. */
|
|
26
|
-
--ft-empty-color: #5f6368;
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
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
|
+
⇒ 즉 이 표는 시트 없이도 종전처럼 자체 테마를 갖는다(그것이 이 패키지의 계약이었다). */
|
|
30
50
|
@media (prefers-color-scheme: dark) {
|
|
31
51
|
:host(:not([theme="light"])) {
|
|
32
|
-
--ft-border-color: #3c4043;
|
|
33
|
-
--ft-bg: #1e1e1e;
|
|
34
|
-
--ft-text-color: #e8eaed;
|
|
35
|
-
--ft-header-bg: #292a2d;
|
|
36
|
-
--ft-header-hover-bg: #3c4043;
|
|
37
|
-
--ft-header-text-color: #e8eaed;
|
|
38
|
-
--ft-row-even-bg: #1e1e1e;
|
|
39
|
-
--ft-row-odd-bg: #252526;
|
|
40
|
-
--ft-row-hover-bg: #2a2d2e;
|
|
41
|
-
--ft-active-color: #4da3ff;
|
|
42
|
-
--ft-selection-bg: #264f78;
|
|
43
|
-
--ft-bool-color: #64b5f6;
|
|
44
|
-
--ft-sort-indicator-color: #9aa0a6;
|
|
45
|
-
--ft-editor-bg: #2d2d2d;
|
|
46
|
-
--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);
|
|
47
67
|
}
|
|
48
68
|
}
|
|
49
69
|
|
|
50
70
|
/* --- Force dark via attribute --- */
|
|
51
71
|
:host([theme="dark"]) {
|
|
52
|
-
--ft-border-color: #3c4043;
|
|
53
|
-
--ft-bg: #1e1e1e;
|
|
54
|
-
--ft-text-color: #e8eaed;
|
|
55
|
-
--ft-header-bg: #292a2d;
|
|
56
|
-
--ft-header-hover-bg: #3c4043;
|
|
57
|
-
--ft-header-text-color: #e8eaed;
|
|
58
|
-
--ft-row-even-bg: #1e1e1e;
|
|
59
|
-
--ft-row-odd-bg: #252526;
|
|
60
|
-
--ft-row-hover-bg: #2a2d2e;
|
|
61
|
-
--ft-active-color: #4da3ff;
|
|
62
|
-
--ft-selection-bg: #264f78;
|
|
63
|
-
--ft-bool-color: #64b5f6;
|
|
64
|
-
--ft-sort-indicator-color: #9aa0a6;
|
|
65
|
-
--ft-editor-bg: #2d2d2d;
|
|
66
|
-
--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);
|
|
67
87
|
}
|
|
68
88
|
|
|
69
89
|
/* --- Layout --- */
|
|
@@ -218,9 +238,9 @@ var s = t`
|
|
|
218
238
|
}
|
|
219
239
|
|
|
220
240
|
.ft-cell.ft-invalid {
|
|
221
|
-
outline: 2px solid
|
|
241
|
+
outline: 2px solid var(--ft-invalid-color);
|
|
222
242
|
outline-offset: -2px;
|
|
223
|
-
background:
|
|
243
|
+
background: var(--ft-invalid-bg);
|
|
224
244
|
}
|
|
225
245
|
|
|
226
246
|
.ft-cell.ft-editing { padding: 0; overflow: visible; }
|
|
@@ -312,14 +332,14 @@ var s = t`
|
|
|
312
332
|
position: absolute;
|
|
313
333
|
inset: 0;
|
|
314
334
|
z-index: 100;
|
|
315
|
-
background:
|
|
316
|
-
border: 2px dashed
|
|
335
|
+
background: var(--ft-drop-bg);
|
|
336
|
+
border: 2px dashed var(--ft-drop-color);
|
|
317
337
|
display: flex;
|
|
318
338
|
align-items: center;
|
|
319
339
|
justify-content: center;
|
|
320
340
|
font-size: 14px;
|
|
321
341
|
font-weight: 500;
|
|
322
|
-
color:
|
|
342
|
+
color: var(--ft-drop-color);
|
|
323
343
|
pointer-events: none;
|
|
324
344
|
border-radius: 4px;
|
|
325
345
|
}
|
|
@@ -692,7 +712,7 @@ var s = t`
|
|
|
692
712
|
|
|
693
713
|
.ft-comment-popup-textarea:focus {
|
|
694
714
|
border-color: var(--ft-active-color, #3b82f6);
|
|
695
|
-
box-shadow: 0 0 0 2px
|
|
715
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ft-active-color) 20%, transparent);
|
|
696
716
|
}
|
|
697
717
|
|
|
698
718
|
.ft-comment-popup-buttons {
|
|
@@ -801,12 +821,12 @@ var s = t`
|
|
|
801
821
|
|
|
802
822
|
/* Find highlight */
|
|
803
823
|
.ft-cell.ft-find-match {
|
|
804
|
-
background:
|
|
824
|
+
background: var(--ft-find-bg) !important;
|
|
805
825
|
}
|
|
806
826
|
|
|
807
827
|
.ft-cell.ft-find-current {
|
|
808
|
-
background:
|
|
809
|
-
outline: 2px solid
|
|
828
|
+
background: var(--ft-find-current-bg) !important;
|
|
829
|
+
outline: 2px solid var(--ft-find-color);
|
|
810
830
|
outline-offset: -2px;
|
|
811
831
|
}
|
|
812
832
|
`;
|
|
@@ -1483,7 +1503,7 @@ async function be(e) {
|
|
|
1483
1503
|
};
|
|
1484
1504
|
}
|
|
1485
1505
|
//#endregion
|
|
1486
|
-
//#region \0@oxc-project+runtime@0.
|
|
1506
|
+
//#region \0@oxc-project+runtime@0.142.0/helpers/esm/decorate.js
|
|
1487
1507
|
function J(e, t, n, r) {
|
|
1488
1508
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
1489
1509
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -2364,7 +2384,7 @@ var Y = {
|
|
|
2364
2384
|
"y"
|
|
2365
2385
|
].includes(t) && this._handleCtrlKey(e)) return;
|
|
2366
2386
|
}
|
|
2367
|
-
if (
|
|
2387
|
+
if (t.length !== 0 && this._visibleRowCount !== 0) {
|
|
2368
2388
|
if ((e.key === "Enter" || e.key === "F2") && this._activeCell) {
|
|
2369
2389
|
e.preventDefault(), this._startEdit();
|
|
2370
2390
|
return;
|
|
@@ -2825,9 +2845,9 @@ var Y = {
|
|
|
2825
2845
|
if (!o) return r;
|
|
2826
2846
|
let s = this.data[t]?.[o.key], c = this._filters.some((e) => e.key === o.key), l = () => {
|
|
2827
2847
|
this._bodyContextMenu = null;
|
|
2828
|
-
};
|
|
2848
|
+
}, u = i + 200 > window.innerWidth ? i - 200 : i, d = a + 280 > window.innerHeight ? a - 280 : a;
|
|
2829
2849
|
return n`
|
|
2830
|
-
<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;"
|
|
2831
2851
|
@mousedown=${(e) => e.stopPropagation()}>
|
|
2832
2852
|
<div class="ft-context-menu-item"
|
|
2833
2853
|
@click=${() => {
|
|
@@ -2928,10 +2948,10 @@ var Y = {
|
|
|
2928
2948
|
}
|
|
2929
2949
|
_renderCommentPopup() {
|
|
2930
2950
|
if (!this._commentPopup) return r;
|
|
2931
|
-
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;
|
|
2932
2952
|
return n`
|
|
2933
2953
|
<div class="ft-comment-popup"
|
|
2934
|
-
style="position: fixed; left: ${
|
|
2954
|
+
style="position: fixed; left: ${i}px; top: ${a}px; z-index: 201;"
|
|
2935
2955
|
@mousedown=${(e) => e.stopPropagation()}>
|
|
2936
2956
|
<textarea class="ft-comment-popup-textarea"
|
|
2937
2957
|
rows="4"
|
|
@@ -3007,11 +3027,12 @@ var Y = {
|
|
|
3007
3027
|
return e === "empty" ? (e) => e == null || e === "" : (e) => e != null && e !== "";
|
|
3008
3028
|
}
|
|
3009
3029
|
_renderEmptyFilterRow(e, t) {
|
|
3030
|
+
let r = this._emptyFilterState.get(e) ?? "";
|
|
3010
3031
|
return n`
|
|
3011
3032
|
<div class="ft-filter-empty-row">
|
|
3012
3033
|
<label>Blank cells</label>
|
|
3013
3034
|
<select class="ft-filter-mode-select"
|
|
3014
|
-
.value=${
|
|
3035
|
+
.value=${r}
|
|
3015
3036
|
@change=${(n) => {
|
|
3016
3037
|
let r = n.target.value;
|
|
3017
3038
|
(r === "" || r === "empty" || r === "non-empty") && (r ? this._emptyFilterState.set(e, r) : this._emptyFilterState.delete(e), t?.(), this._applyFilterForKey(e));
|
|
@@ -3456,8 +3477,10 @@ var Y = {
|
|
|
3456
3477
|
let t = this.visibleColumns;
|
|
3457
3478
|
if (e.endCol >= t.length || e.endRow >= this._visibleRowCount) return "";
|
|
3458
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;
|
|
3459
|
-
|
|
3460
|
-
|
|
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}
|
|
3461
3484
|
<div class="ft-fill-handle"
|
|
3462
3485
|
style="left:${r}px;top:${i}px;"
|
|
3463
3486
|
@mousedown=${(e) => this._onFillHandleMouseDown(e)}>
|
|
@@ -3466,7 +3489,9 @@ var Y = {
|
|
|
3466
3489
|
}
|
|
3467
3490
|
_renderFillPreview(e) {
|
|
3468
3491
|
let t = this.visibleColumns;
|
|
3469
|
-
|
|
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>`;
|
|
3470
3495
|
}
|
|
3471
3496
|
_onRowNumMouseDown(e, t) {
|
|
3472
3497
|
if (e.button !== 0) return;
|
|
@@ -3716,15 +3741,18 @@ var Y = {
|
|
|
3716
3741
|
for (let t of l) m.push(this._renderHeaderCell(e[t], t));
|
|
3717
3742
|
for (let t = s; t < c; t++) m.push(this._renderHeaderCell(e[t], t));
|
|
3718
3743
|
let h = this._colDragIndicatorLeft == null ? "" : n`<div class="ft-drop-indicator" style="left:${this._colDragIndicatorLeft}px"></div>`;
|
|
3719
|
-
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`
|
|
3720
3747
|
${i}
|
|
3721
3748
|
<div class="ft-header" role="row" style="width: ${o}px; height: ${a}px;">
|
|
3722
3749
|
${f}${p}
|
|
3723
3750
|
${m}
|
|
3724
3751
|
${h}
|
|
3725
3752
|
</div>
|
|
3726
|
-
<div class="ft-empty">${
|
|
3753
|
+
<div class="ft-empty">${e}</div>
|
|
3727
3754
|
`;
|
|
3755
|
+
}
|
|
3728
3756
|
let { start: g, end: _ } = this.visibleRange, v = this._frozenRowCount, y = [];
|
|
3729
3757
|
for (let e = g; e < _; e++) y.push(this._renderRow(e, s, c, l, (e - v) * this.rowHeight));
|
|
3730
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>`;
|
|
@@ -3875,18 +3903,24 @@ var Y = {
|
|
|
3875
3903
|
@keydown=${this._onEditorKeyDown}
|
|
3876
3904
|
@blur=${() => this._commitEdit()}>
|
|
3877
3905
|
`;
|
|
3878
|
-
if (t.type === "date")
|
|
3906
|
+
if (t.type === "date") {
|
|
3907
|
+
let e = this._toDateInputValue(i);
|
|
3908
|
+
return n`
|
|
3879
3909
|
<input class="ft-editor" type="date"
|
|
3880
|
-
.value=${
|
|
3910
|
+
.value=${e}
|
|
3881
3911
|
@keydown=${this._onEditorKeyDown}
|
|
3882
3912
|
@blur=${() => this._commitEdit()}>
|
|
3883
3913
|
`;
|
|
3884
|
-
|
|
3914
|
+
}
|
|
3915
|
+
if (t.type === "datetime") {
|
|
3916
|
+
let e = this._toDateTimeInputValue(i);
|
|
3917
|
+
return n`
|
|
3885
3918
|
<input class="ft-editor" type="datetime-local"
|
|
3886
|
-
.value=${
|
|
3919
|
+
.value=${e}
|
|
3887
3920
|
@keydown=${this._onEditorKeyDown}
|
|
3888
3921
|
@blur=${() => this._commitEdit()}>
|
|
3889
3922
|
`;
|
|
3923
|
+
}
|
|
3890
3924
|
if (t.type === "select" && t.options && t.options.length > 0) {
|
|
3891
3925
|
let e = t.options, r = typeof e[0] == "string";
|
|
3892
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",
|