@kanunilabs/datagrid 1.9.7 → 1.9.9
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/dist/datagrid.umd.js +10 -10
- package/dist/index.cjs +2 -2
- package/dist/index.js +2 -2
- package/dist/styles.css +105 -1
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -510,6 +510,9 @@
|
|
|
510
510
|
align-items: center;
|
|
511
511
|
flex: none;
|
|
512
512
|
height: 100%;
|
|
513
|
+
/* No double-tap-to-zoom on a cell: the grid counts the two taps itself and
|
|
514
|
+
opens the editor (P-7.3). Panning and pinch-zoom stay the browser's. */
|
|
515
|
+
touch-action: manipulation;
|
|
513
516
|
padding: 0 var(--dg-cell-padding-x);
|
|
514
517
|
border-inline-end: var(--dg-cell-border);
|
|
515
518
|
white-space: nowrap;
|
|
@@ -1200,14 +1203,41 @@
|
|
|
1200
1203
|
}
|
|
1201
1204
|
|
|
1202
1205
|
.kanuni-datagrid-card-title {
|
|
1206
|
+
display: flex;
|
|
1207
|
+
align-items: center;
|
|
1208
|
+
gap: 6px;
|
|
1203
1209
|
height: 22px;
|
|
1204
1210
|
line-height: 22px;
|
|
1205
1211
|
font-weight: 600;
|
|
1206
1212
|
white-space: nowrap;
|
|
1207
1213
|
overflow: hidden;
|
|
1214
|
+
}
|
|
1215
|
+
|
|
1216
|
+
.kanuni-datagrid-card-title-text {
|
|
1217
|
+
min-width: 0;
|
|
1218
|
+
overflow: hidden;
|
|
1208
1219
|
text-overflow: ellipsis;
|
|
1209
1220
|
}
|
|
1210
1221
|
|
|
1222
|
+
/* `rowStatus.icons` on a card: the glyph the table's status column holds
|
|
1223
|
+
(P-9; the row's marker still runs down the card's edge). */
|
|
1224
|
+
.kanuni-datagrid-card-title .kanuni-datagrid-status-icon {
|
|
1225
|
+
flex: none;
|
|
1226
|
+
}
|
|
1227
|
+
|
|
1228
|
+
/* A card that does something when pressed (P-9). `touch-action: manipulation`
|
|
1229
|
+
drops the double-tap zoom delay, so a tap answers at once. */
|
|
1230
|
+
.kanuni-datagrid-card--pressable {
|
|
1231
|
+
cursor: pointer;
|
|
1232
|
+
touch-action: manipulation;
|
|
1233
|
+
-webkit-tap-highlight-color: transparent;
|
|
1234
|
+
}
|
|
1235
|
+
|
|
1236
|
+
/* `cardView.renderCard`: the app draws the content; the grid keeps the box. */
|
|
1237
|
+
.kanuni-datagrid-card--custom {
|
|
1238
|
+
font-size: inherit;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1211
1241
|
.kanuni-datagrid-card-fields {
|
|
1212
1242
|
margin: 0;
|
|
1213
1243
|
}
|
|
@@ -2921,6 +2951,15 @@
|
|
|
2921
2951
|
margin: 0;
|
|
2922
2952
|
}
|
|
2923
2953
|
|
|
2954
|
+
/* A touch screen: never under 16 px while typing, or iOS Safari zooms the page
|
|
2955
|
+
into the box the moment it takes focus (Tekax 07, P.1 rule c). */
|
|
2956
|
+
@media (pointer: coarse) {
|
|
2957
|
+
.kanuni-datagrid-root .kanuni-datagrid-editor:not([type='checkbox']),
|
|
2958
|
+
.kanuni-datagrid-root .kanuni-datagrid-edit-form-input:not([type='checkbox']) {
|
|
2959
|
+
font-size: max(16px, var(--dg-font-size));
|
|
2960
|
+
}
|
|
2961
|
+
}
|
|
2962
|
+
|
|
2924
2963
|
/* Edge to edge of the CELL, not of its padding box.
|
|
2925
2964
|
`width: 100%` resolves against the content box — the cell minus 2 ×
|
|
2926
2965
|
--dg-cell-padding-x — and a negative margin only shifts a box, it does not
|
|
@@ -3209,6 +3248,10 @@
|
|
|
3209
3248
|
}
|
|
3210
3249
|
|
|
3211
3250
|
.kanuni-datagrid-lookup-item {
|
|
3251
|
+
/* The editor windows the list by the item height it sets inline; the
|
|
3252
|
+
padding has to sit INSIDE it, or each item overlaps the next (and a
|
|
3253
|
+
44 px touch item measured 52). */
|
|
3254
|
+
box-sizing: border-box;
|
|
3212
3255
|
padding: 4px 8px;
|
|
3213
3256
|
line-height: 18px;
|
|
3214
3257
|
white-space: nowrap;
|
|
@@ -3217,6 +3260,29 @@
|
|
|
3217
3260
|
cursor: pointer;
|
|
3218
3261
|
}
|
|
3219
3262
|
|
|
3263
|
+
/* A code + name item (lookup.linkedColumns, P-5.2): the code in a fixed
|
|
3264
|
+
column so the names line up. */
|
|
3265
|
+
.kanuni-datagrid-lookup-code {
|
|
3266
|
+
display: inline-block;
|
|
3267
|
+
min-width: 7ch;
|
|
3268
|
+
margin-inline-end: 8px;
|
|
3269
|
+
font-weight: 600;
|
|
3270
|
+
font-variant-numeric: tabular-nums;
|
|
3271
|
+
}
|
|
3272
|
+
|
|
3273
|
+
/* Touch (pointer: coarse): 44 px items, 16 px text (K-53, P.1 rule c). The
|
|
3274
|
+
height itself is set by the editor, which windows the list by it. */
|
|
3275
|
+
.kanuni-datagrid-lookup-popup--touch .kanuni-datagrid-lookup-item {
|
|
3276
|
+
line-height: 36px;
|
|
3277
|
+
font-size: 16px;
|
|
3278
|
+
}
|
|
3279
|
+
|
|
3280
|
+
/* A function lookup's label still on its way (P-5.1): nothing, not the code. */
|
|
3281
|
+
.kanuni-datagrid-lookup-pending {
|
|
3282
|
+
display: inline-block;
|
|
3283
|
+
min-width: 1em;
|
|
3284
|
+
}
|
|
3285
|
+
|
|
3220
3286
|
.kanuni-datagrid-lookup-item--active {
|
|
3221
3287
|
background: var(--dg-primary);
|
|
3222
3288
|
color: var(--dg-on-primary);
|
|
@@ -3681,14 +3747,30 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
3681
3747
|
/* The success fill: every palette and scheme sets it, dark ones included. */
|
|
3682
3748
|
--dg-row-status-saved: var(--dg-success);
|
|
3683
3749
|
--dg-row-status-error: var(--dg-danger);
|
|
3750
|
+
/* P-2 (2026-10-31). A new row: the success colour — "added", as a diff reads
|
|
3751
|
+
it; a plus glyph tells it from the transient "saved" tick. A pending
|
|
3752
|
+
delete: the muted text colour, so it reads as greyed out and is never
|
|
3753
|
+
mistaken for the red of a refused save. Both stay at 3:1 or more against
|
|
3754
|
+
the row in every packaged scheme and palette (themes.test.ts measures
|
|
3755
|
+
them); an app's theme may set its own. */
|
|
3756
|
+
--dg-row-status-new: var(--dg-success);
|
|
3757
|
+
--dg-row-status-removed: var(--dg-text-muted);
|
|
3684
3758
|
/* How strongly `tint: true` washes the row. */
|
|
3685
3759
|
--dg-row-status-tint: 8%;
|
|
3686
3760
|
}
|
|
3687
3761
|
|
|
3762
|
+
.kanuni-datagrid-row--status-new {
|
|
3763
|
+
--dg-row-status-color: var(--dg-row-status-new);
|
|
3764
|
+
}
|
|
3765
|
+
|
|
3688
3766
|
.kanuni-datagrid-row--status-changed {
|
|
3689
3767
|
--dg-row-status-color: var(--dg-row-status-changed);
|
|
3690
3768
|
}
|
|
3691
3769
|
|
|
3770
|
+
.kanuni-datagrid-row--status-removed {
|
|
3771
|
+
--dg-row-status-color: var(--dg-row-status-removed);
|
|
3772
|
+
}
|
|
3773
|
+
|
|
3692
3774
|
.kanuni-datagrid-row--status-saving {
|
|
3693
3775
|
--dg-row-status-color: var(--dg-row-status-saving);
|
|
3694
3776
|
}
|
|
@@ -3730,6 +3812,14 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
3730
3812
|
);
|
|
3731
3813
|
}
|
|
3732
3814
|
|
|
3815
|
+
/* `rowStatus.strike`: a row whose status is `removed` — the grid's pending
|
|
3816
|
+
delete or the app's own status — has its text struck through, in every edit
|
|
3817
|
+
mode. The status glyph cell is left alone. */
|
|
3818
|
+
.kanuni-datagrid-row--status-strike .kanuni-datagrid-cell:not(.kanuni-datagrid-status-cell),
|
|
3819
|
+
.kanuni-datagrid-row--status-strike .kanuni-datagrid-card {
|
|
3820
|
+
text-decoration: line-through;
|
|
3821
|
+
}
|
|
3822
|
+
|
|
3733
3823
|
/* High contrast drops background colours; the marker is the whole signal,
|
|
3734
3824
|
so it keeps its own. */
|
|
3735
3825
|
@media (forced-colors: active) {
|
|
@@ -3805,7 +3895,7 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
3805
3895
|
/* ── Status column (`rowStatus.icons`, 2026-10-16) ───────────
|
|
3806
3896
|
A glyph per status so it does not rest on colour alone: a dot while
|
|
3807
3897
|
changed, a turning ring while saving, a tick when saved, a triangle when
|
|
3808
|
-
refused. Drawn as a MASK filled with the status colour, so a palette or a
|
|
3898
|
+
refused, a plus for a new row and a cross for a pending delete (P-2). Drawn as a MASK filled with the status colour, so a palette or a
|
|
3809
3899
|
scheme recolours it like the marker. The cell exists on every row (an empty
|
|
3810
3900
|
one where there is no status) so the columns beside it never step. */
|
|
3811
3901
|
.kanuni-datagrid-status-cell {
|
|
@@ -3832,6 +3922,14 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
3832
3922
|
--dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.5'/%3E%3C/svg%3E");
|
|
3833
3923
|
}
|
|
3834
3924
|
|
|
3925
|
+
.kanuni-datagrid-row--status-new {
|
|
3926
|
+
--dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2.5v11M2.5 8h11' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
3927
|
+
}
|
|
3928
|
+
|
|
3929
|
+
.kanuni-datagrid-row--status-removed {
|
|
3930
|
+
--dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9M12.5 3.5l-9 9' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
3931
|
+
}
|
|
3932
|
+
|
|
3835
3933
|
.kanuni-datagrid-row--status-saving {
|
|
3836
3934
|
--dg-row-status-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 2a6 6 0 1 1-6 6' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
3837
3935
|
}
|
|
@@ -4244,6 +4342,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
4244
4342
|
/* NOT the accent: gold on white is 1.9:1 and a focus ring has to be seen.
|
|
4245
4343
|
brand-900 measures 7.0:1 on white. */
|
|
4246
4344
|
--dg-focus-ring: #6b5119;
|
|
4345
|
+
/* The "saving" marker is the accent elsewhere; gold on the white row is
|
|
4346
|
+
2.4:1, under the 3:1 a status bar needs (P-2 measurement). */
|
|
4347
|
+
--dg-row-status-saving: #6b5119;
|
|
4247
4348
|
--dg-on-primary: #1c1917;
|
|
4248
4349
|
--dg-selected-bg: #f3ead3;
|
|
4249
4350
|
--dg-group-bg: #faf6ed;
|
|
@@ -4711,6 +4812,9 @@ input[type='checkbox'].kanuni-datagrid-edit-form-input {
|
|
|
4711
4812
|
--dg-scrollbar-thumb: #4c566a;
|
|
4712
4813
|
--dg-danger: #bf616a; /* nord11 */
|
|
4713
4814
|
--dg-danger-text: #d9919a;
|
|
4815
|
+
/* The refused-save marker: nord11 is 2.8:1 on the striped row, under the
|
|
4816
|
+
3:1 a status bar needs (P-2 measurement). */
|
|
4817
|
+
--dg-row-status-error: #d9919a;
|
|
4714
4818
|
/* nord11 is a muted red, so the label on it has to go further down than the
|
|
4715
4819
|
usual near-black: #2b1113 measured 4.31:1 and this is 5.17:1. */
|
|
4716
4820
|
--dg-on-danger: #170709;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kanunilabs/datagrid",
|
|
3
|
-
"version": "1.9.
|
|
3
|
+
"version": "1.9.9",
|
|
4
4
|
"description": "High-performance data grid for vanilla JavaScript — no framework required. Virtualized rows and columns, a Web Worker pipeline, sorting, filtering, grouping and theming, with a UMD build for script-tag use.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"data-grid",
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@kanunilabs/datagrid-core": "1.10.
|
|
63
|
+
"@kanunilabs/datagrid-core": "1.10.9"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
66
66
|
"@types/node": "^22.0.0",
|
|
@@ -68,8 +68,8 @@
|
|
|
68
68
|
"jsdom": "^30.0.1",
|
|
69
69
|
"react": "^19.0.0",
|
|
70
70
|
"react-dom": "^19.0.0",
|
|
71
|
-
"@kanunilabs/
|
|
72
|
-
"@kanunilabs/
|
|
71
|
+
"@kanunilabs/datagrid-react": "1.8.9",
|
|
72
|
+
"@kanunilabs/foundation": "1.0.4"
|
|
73
73
|
},
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build": "tsup && node scripts/build-css.mjs && node scripts/build-umd.mjs && node ../../scripts/check-esm-load.mjs",
|