@iyulab/flex-table 0.28.0 → 0.30.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 +25 -0
- package/README.md +13 -1
- package/dist/{flex-table-BQvkNkCu.js → flex-table-DuQWDNlT.js} +18 -2
- package/dist/flex-table.d.ts +7 -0
- package/dist/flex-table.js +1 -1
- package/dist/odata/index.d.ts +1 -1
- package/dist/odata/index.js +1 -1
- package/dist/odata/index.test.d.ts +1 -0
- package/dist/react.d.ts +1 -0
- package/dist/react.js +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.30.0] - 2026-08-28
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
- **`buildSearchExpression` and `parseOrderBy` are now exported from
|
|
8
|
+
`./odata`.** Both were already implemented as pure, tested functions used
|
|
9
|
+
internally by `useODataSource`, but the public barrel only re-exported
|
|
10
|
+
the hook itself. A consumer needing the same `$search`/`$orderby`
|
|
11
|
+
encoding without the pagination hook (a typeahead, a standalone sort
|
|
12
|
+
control) had to reimplement the OData 4.0 search-quoting workaround
|
|
13
|
+
from scratch.
|
|
14
|
+
|
|
15
|
+
## [0.29.0] - 2026-08-28
|
|
16
|
+
|
|
17
|
+
### Added
|
|
18
|
+
|
|
19
|
+
- **`row-activate` event, fired on Enter for a non-editable cell.** The internal
|
|
20
|
+
keydown handler always consumed Enter/F2 regardless of a column's editability,
|
|
21
|
+
so a host attaching its own `keydown` listener to the grid had no reliable way
|
|
22
|
+
to react to Enter in a read-only grid (registration order dependent). Enter on
|
|
23
|
+
a non-editable cell now dispatches `row-activate` (`{ row, index, col, key }`)
|
|
24
|
+
instead of attempting to start an edit — mirroring the existing `row-add`/
|
|
25
|
+
`row-delete` detail shape. F2 is unaffected (edit-only key). Mapped through to
|
|
26
|
+
the React wrapper as `onRowActivate`.
|
|
27
|
+
|
|
3
28
|
## [0.28.0] - 2026-08-23
|
|
4
29
|
|
|
5
30
|
### Added
|
package/README.md
CHANGED
|
@@ -76,7 +76,7 @@ npm install @iyulab/flex-table
|
|
|
76
76
|
| `rowHeight` | `row-height` | `number` | `32` | Row height in pixels. Falls back to the `--ft-row-height` token when not set — see [Density](#density-and-header-hierarchy) |
|
|
77
77
|
| `showRowNumbers` | `show-row-numbers` | `boolean` | `false` | Show row number column |
|
|
78
78
|
| `theme` | `theme` | `'light' \| 'dark'` | auto | Force theme; auto-detects `prefers-color-scheme` |
|
|
79
|
-
| `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false` |
|
|
79
|
+
| `editable` | `editable` | `boolean` | `true` | Global read-only mode when `false`. Defaults to `true` — a purely read-only grid should set this explicitly rather than relying on per-column `editable: false` alone, since it's also what makes Enter fire `row-activate` (see [Events](#events)) instead of entering edit mode |
|
|
80
80
|
| `showFilters` | `show-filters` | `boolean` | `false` | Show built-in header filter dropdowns |
|
|
81
81
|
| `maxRows` | `max-rows` | `number` | `0` | Max row count (0 = unlimited); blocks `addRow()` and paste expansion |
|
|
82
82
|
| `maxUndoSize` | `max-undo-size` | `number` | `100` | Max undo history stack size |
|
|
@@ -234,6 +234,7 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
|
|
|
234
234
|
|-------|--------|-------------|
|
|
235
235
|
| `row-add` | `{ row, index }` | Row added |
|
|
236
236
|
| `row-delete` | `{ indices, rows }` | Rows deleted |
|
|
237
|
+
| `row-activate` | `{ row, index, col, key }` | Enter pressed on a non-editable cell — the grid's own contract for "activate this row" (e.g. navigate to a detail view), guaranteed even though the internal Enter handler prevents the keystroke from reliably reaching a listener the host attaches to the same element |
|
|
237
238
|
| `batch-update` | `{ changes: [{ row, key, oldValue, newValue }] }` | Batch update applied |
|
|
238
239
|
|
|
239
240
|
### Column Events
|
|
@@ -306,6 +307,7 @@ flex-table {
|
|
|
306
307
|
--ft-row-even-bg: #fff; /* --u-bg-color */
|
|
307
308
|
--ft-row-odd-bg: #fafafa; /* --u-bg-color-raised */
|
|
308
309
|
--ft-row-hover-bg: #f0f4ff; /* --u-bg-color-hover */
|
|
310
|
+
--ft-row-odd-hover-bg: #f0f4ff; /* --u-bg-color-raised-hover — odd row's hover, independent of --ft-row-hover-bg */
|
|
309
311
|
--ft-editor-bg: #fff; /* --u-input-bg-color */
|
|
310
312
|
--ft-sort-indicator-color: #5f6368;/* --u-txt-color-weak */
|
|
311
313
|
--ft-empty-color: #5f6368; /* --u-txt-color-weak */
|
|
@@ -604,6 +606,16 @@ The hook returns:
|
|
|
604
606
|
|
|
605
607
|
Terms are always quoted because OData 4.0 only allows letters in an unquoted `searchWord`, so `2026` or `ZT-E2E-A` would be rejected by servers that follow it (4.01 relaxed this, but [Microsoft.OData still lexes as 4.0](https://github.com/OData/odata.net/issues/2445)). Quoting keeps any term valid regardless of server version. Since a `$search` phrase cannot contain `"` and OData defines no escape for it, double quotes are stripped from the term.
|
|
606
608
|
|
|
609
|
+
The quoting/escaping logic above is also available standalone as `buildSearchExpression(term)`, for consumers that need the same `$search` encoding without the pagination hook (e.g. a typeahead/combobox that isn't a table). `parseOrderBy(orderBy)` (`'a asc, b desc'` → `SortCriteria[]`) is exported the same way, for consumers driving a sort UI that isn't `useODataSource` either:
|
|
610
|
+
|
|
611
|
+
```ts
|
|
612
|
+
import { buildSearchExpression, parseOrderBy } from '@iyulab/flex-table/odata';
|
|
613
|
+
|
|
614
|
+
buildSearchExpression('red shirt'); // '"red" AND "shirt"'
|
|
615
|
+
buildSearchExpression(''); // undefined
|
|
616
|
+
parseOrderBy('name desc'); // [{ key: 'name', direction: 'desc' }]
|
|
617
|
+
```
|
|
618
|
+
|
|
607
619
|
## Development
|
|
608
620
|
|
|
609
621
|
```bash
|
|
@@ -1546,7 +1546,7 @@ async function xe(e) {
|
|
|
1546
1546
|
};
|
|
1547
1547
|
}
|
|
1548
1548
|
//#endregion
|
|
1549
|
-
//#region \0@oxc-project+runtime@0.
|
|
1549
|
+
//#region \0@oxc-project+runtime@0.147.0/helpers/esm/decorate.js
|
|
1550
1550
|
function q(e, t, n, r) {
|
|
1551
1551
|
var i = arguments.length, a = i < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, n) : r, o;
|
|
1552
1552
|
if (typeof Reflect == "object" && typeof Reflect.decorate == "function") a = Reflect.decorate(e, t, n, r);
|
|
@@ -2281,6 +2281,20 @@ var J = {
|
|
|
2281
2281
|
_isCellEditable(e) {
|
|
2282
2282
|
return !(!this.editable || e.editable === !1);
|
|
2283
2283
|
}
|
|
2284
|
+
_fireRowActivate(e) {
|
|
2285
|
+
if (!this._activeCell) return;
|
|
2286
|
+
let t = this._toDataIndex(this._activeCell.row), n = this.data[t];
|
|
2287
|
+
n && this.dispatchEvent(new CustomEvent("row-activate", {
|
|
2288
|
+
detail: {
|
|
2289
|
+
row: n,
|
|
2290
|
+
index: t,
|
|
2291
|
+
col: this._activeCell.col,
|
|
2292
|
+
key: e?.key
|
|
2293
|
+
},
|
|
2294
|
+
bubbles: !0,
|
|
2295
|
+
composed: !0
|
|
2296
|
+
}));
|
|
2297
|
+
}
|
|
2284
2298
|
_startEdit() {
|
|
2285
2299
|
if (!this._activeCell) return;
|
|
2286
2300
|
let e = this.visibleColumns[this._activeCell.col];
|
|
@@ -2456,7 +2470,9 @@ var J = {
|
|
|
2456
2470
|
}
|
|
2457
2471
|
if (t.length !== 0 && this._visibleRowCount !== 0) {
|
|
2458
2472
|
if ((e.key === "Enter" || e.key === "F2") && this._activeCell) {
|
|
2459
|
-
e.preventDefault()
|
|
2473
|
+
e.preventDefault();
|
|
2474
|
+
let n = t[this._activeCell.col];
|
|
2475
|
+
n && this._isCellEditable(n) ? this._startEdit() : e.key === "Enter" && this._fireRowActivate(n);
|
|
2460
2476
|
return;
|
|
2461
2477
|
}
|
|
2462
2478
|
if (!this._selection.activeCell) {
|
package/dist/flex-table.d.ts
CHANGED
|
@@ -333,6 +333,13 @@ export declare class FlexTable extends LitElement {
|
|
|
333
333
|
private _onCellDblClick;
|
|
334
334
|
/** Check if a column is editable based on global + per-column settings */
|
|
335
335
|
private _isCellEditable;
|
|
336
|
+
/**
|
|
337
|
+
* Enter가 non-editable 셀에서 눌렸을 때 "이 행을 확정한다"는 신호를 호스트에
|
|
338
|
+
* 공식적으로 알린다. 그리드가 자체 `keydown` 핸들러에서 Enter를 먼저 처리하므로,
|
|
339
|
+
* 호스트가 같은 엘리먼트에 직접 붙인 리스너는 등록 순서에 의존하게 되어 안전한
|
|
340
|
+
* 공개 계약이 못 된다 — 이 이벤트가 유일한 보장된 훅이다.
|
|
341
|
+
*/
|
|
342
|
+
private _fireRowActivate;
|
|
336
343
|
private _startEdit;
|
|
337
344
|
private _commitEdit;
|
|
338
345
|
private _applyEdit;
|
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-DuQWDNlT.js";
|
|
2
2
|
export { i as FlexTable, t as RowSelectionState, r as UndoStack, n as exportData, e as renderCell };
|
package/dist/odata/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { useODataSource } from './use-odata-source.js';
|
|
1
|
+
export { useODataSource, buildSearchExpression, parseOrderBy } from './use-odata-source.js';
|
|
2
2
|
export type { UseODataSourceOptions, UseODataSourceResult } from './types.js';
|
package/dist/odata/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/react.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ declare const FlexTableReactBase: import("@lit/react").ReactWebComponent<FlexTab
|
|
|
11
11
|
onFilterChange: EventName<CustomEvent>;
|
|
12
12
|
onRowAdd: EventName<CustomEvent>;
|
|
13
13
|
onRowDelete: EventName<CustomEvent>;
|
|
14
|
+
onRowActivate: EventName<CustomEvent>;
|
|
14
15
|
onColumnResize: EventName<CustomEvent>;
|
|
15
16
|
onColumnSelect: EventName<CustomEvent>;
|
|
16
17
|
onColumnAdd: EventName<CustomEvent>;
|
package/dist/react.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./flex-table-
|
|
1
|
+
import { t as e } from "./flex-table-DuQWDNlT.js";
|
|
2
2
|
import t from "react";
|
|
3
3
|
import { createComponent as n } from "@lit/react";
|
|
4
4
|
var r = n({
|
|
@@ -14,6 +14,7 @@ var r = n({
|
|
|
14
14
|
onFilterChange: "filter-change",
|
|
15
15
|
onRowAdd: "row-add",
|
|
16
16
|
onRowDelete: "row-delete",
|
|
17
|
+
onRowActivate: "row-activate",
|
|
17
18
|
onColumnResize: "column-resize",
|
|
18
19
|
onColumnSelect: "column-select",
|
|
19
20
|
onColumnAdd: "column-add",
|