@iyulab/flex-table 0.40.0 → 0.40.2
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 +40 -0
- package/README.md +6 -6
- package/dist/clipboard/clipboard.d.ts +2 -6
- package/dist/{flex-table-CDEu8YQE.js → flex-table-CbIsTvod.js} +221 -933
- package/dist/flex-table.js +1 -1
- package/dist/react-events.test.d.ts +1 -0
- package/dist/react.d.ts +7 -0
- package/dist/react.js +9 -2
- package/package.json +3 -2
- package/skills/iyulab-flex-table/SKILL.md +135 -0
- package/skills/iyulab-flex-table/references/api.md +173 -0
- package/skills/iyulab-flex-table/references/react.md +177 -0
- package/skills/iyulab-flex-table/references/styling.md +108 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,45 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [0.40.2] - 2026-09-30
|
|
4
|
+
|
|
5
|
+
### Fixed
|
|
6
|
+
|
|
7
|
+
- **`Locale.set()` from `@iyulab/components` reaches the table again.** The build copied the parts of
|
|
8
|
+
`@iyulab/components` this package uses (`Locale`, number and date formatting, the IME check) into its
|
|
9
|
+
own bundle, so the table kept a separate locale of its own: an app that switched language with
|
|
10
|
+
`Locale.set()` saw the table's menus, labels and formatted values stay in the language detected at
|
|
11
|
+
startup (it matched only when `<html lang>` was already right). `@iyulab/components` is now imported,
|
|
12
|
+
not copied.
|
|
13
|
+
- **Copying cells quotes a cell that contains a line break, a tab or a double quote**, so a multi-line
|
|
14
|
+
note pastes into Excel or Google Sheets as one cell instead of splitting into rows. Pasting keeps a
|
|
15
|
+
trailing row of empty cells, which used to be dropped. The clipboard format now comes from
|
|
16
|
+
`@iyulab/components` (`encodeTsv` / `decodeTsv`).
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Requires `@iyulab/components` 1.52.0 or later (peer).
|
|
21
|
+
|
|
22
|
+
## [0.40.1] - 2026-09-30
|
|
23
|
+
|
|
24
|
+
### Fixed
|
|
25
|
+
|
|
26
|
+
- **The Enter that finishes an IME composition no longer commits the cell edit and moves down**, and
|
|
27
|
+
no longer jumps to the next match in the find panel. Typing Korean (or another composed language)
|
|
28
|
+
committed the cell before the last syllable was in. Requires `@iyulab/components` 1.51.0 or later.
|
|
29
|
+
|
|
30
|
+
- **The React wrapper maps every custom event.** `row-reorder`, `column-visibility-change`,
|
|
31
|
+
`comment-change`, `data-import`, `fill-handle-apply`, `find-replace` and `header-context-menu` had no
|
|
32
|
+
`on*` prop; they are now `onRowReorder`, `onColumnVisibilityChange`, `onCommentChange`,
|
|
33
|
+
`onDataImport`, `onFillHandleApply`, `onFindReplace` and `onHeaderContextMenu`.
|
|
34
|
+
|
|
35
|
+
### Documentation
|
|
36
|
+
|
|
37
|
+
- README corrected against the source: the `context-menu` detail and that it is cancelable,
|
|
38
|
+
`cell-select` can be `null`, XLSX export, the `footerData` type, and the `format` function's
|
|
39
|
+
arguments.
|
|
40
|
+
- The package now ships an agent skill (`skills/iyulab-flex-table/`) — the component API, the React
|
|
41
|
+
wrapper and data-source hooks, and styling in a form coding agents load directly.
|
|
42
|
+
|
|
3
43
|
## [0.40.0] - 2026-09-28
|
|
4
44
|
|
|
5
45
|
### Changed
|
package/README.md
CHANGED
|
@@ -60,7 +60,7 @@ npm install @iyulab/flex-table
|
|
|
60
60
|
- **Filter Types** — Text search, number range, boolean toggle, date/datetime range picker
|
|
61
61
|
- **Row Operations** — `addRow()`, `deleteRows()`, `updateRows()` with undo
|
|
62
62
|
- **Undo/Redo** — Ctrl+Z / Ctrl+Y for all operations; configurable stack size
|
|
63
|
-
- **Export** — CSV, TSV, JSON; full data or selection-only
|
|
63
|
+
- **Export** — CSV, TSV, JSON, XLSX; full data or selection-only
|
|
64
64
|
- **Dark Theme** — Auto via `prefers-color-scheme`, or manual `theme="dark"`
|
|
65
65
|
- **Row Numbers** — Optional `show-row-numbers` attribute with sticky positioning
|
|
66
66
|
- **Footer Row** — Summary/aggregate row via `footer-data` property
|
|
@@ -110,7 +110,7 @@ guarantee about a *constrained* host. `height-model.browser.test.ts` pins both s
|
|
|
110
110
|
| `selectable` | `selectable` | `boolean` | `false` | Enable row-level checkbox selection |
|
|
111
111
|
| `selectionMode` | `selection-mode` | `'single' \| 'multi'` | `'multi'` | Row selection mode |
|
|
112
112
|
| `dataMode` | `data-mode` | `'client' \| 'server'` | `'client'` | Client-side or server-side data processing |
|
|
113
|
-
| `footerData` | `footer-data` | `Record<string, string
|
|
113
|
+
| `footerData` | `footer-data` | `Record<string, string \| TemplateResult> \| null` | `null` | Footer/summary row data (keys match column keys) |
|
|
114
114
|
| `emptyMessage` | `empty-message` | `string` | `'No data'` | Shown when `data` is empty |
|
|
115
115
|
| `noMatchingMessage` | `no-matching-message` | `string` | `'No matching data'` | Shown when `data` has rows but every one is hidden by an active column filter |
|
|
116
116
|
| `stylesheets` | — | `CSSStyleSheet[]` | `[]` | Constructable stylesheets adopted into the shadow root alongside the grid's own styles — the escape hatch for styling content a `render` function inserts, since document CSS doesn't cross the shadow boundary. Reassigning swaps the previous set, it doesn't accumulate |
|
|
@@ -161,7 +161,7 @@ The `validator` callback returns `null` if valid, or an error message string. On
|
|
|
161
161
|
|
|
162
162
|
Both control how a cell's raw value is displayed, but they differ in what they replace:
|
|
163
163
|
|
|
164
|
-
- **`format`**: a plain string pattern (Excel-style, e.g. `'#,##0.00'`, `'0.00%'`, `'$#,##0'`, `'yyyy-MM-dd'`) or a `(value) => string` function. Only the *displayed text* changes — editing, sorting, filtering, and export all keep operating on the raw underlying value. Use this for number/date/currency display formatting.
|
|
164
|
+
- **`format`**: a plain string pattern (Excel-style, e.g. `'#,##0.00'`, `'0.00%'`, `'$#,##0'`, `'yyyy-MM-dd'`) or a `(value, row, col) => string` function. Only the *displayed text* changes — editing, sorting, filtering, and export all keep operating on the raw underlying value. Use this for number/date/currency display formatting.
|
|
165
165
|
- **`render`**: a `(value, row, col) => TemplateResult | string` function that replaces the cell's rendered content entirely — badges, links, icons, multi-field composites. Sorting/filtering still use the raw value, but the visual output is fully custom.
|
|
166
166
|
|
|
167
167
|
```typescript
|
|
@@ -242,7 +242,7 @@ Default is `false`, matching `clear-undo-on-data-change`.
|
|
|
242
242
|
|
|
243
243
|
| Method | Returns | Description |
|
|
244
244
|
|--------|---------|-------------|
|
|
245
|
-
| `exportToString(format, options?)` | `string` | Export to `'csv'` / `'tsv'` / `'json'
|
|
245
|
+
| `exportToString(format, options?)` | `string \| Uint8Array` | Export to `'csv'` / `'tsv'` / `'json'` (a string) or `'xlsx'` (bytes). Pass `{ selectionOnly: true }` for selection range |
|
|
246
246
|
| `exportToFile(format, filename?)` | `void` | Export and trigger browser file download |
|
|
247
247
|
|
|
248
248
|
## Events
|
|
@@ -253,7 +253,7 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
|
|
|
253
253
|
|
|
254
254
|
| Event | Detail | Description |
|
|
255
255
|
|-------|--------|-------------|
|
|
256
|
-
| `cell-select` | `{ row, col }` | Cell focus changed |
|
|
256
|
+
| `cell-select` | `{ row, col }` or `null` | Cell focus changed (`null` when no cell is active) |
|
|
257
257
|
| `cell-edit-start` | `{ row, col, key, value }` | Cell editing started |
|
|
258
258
|
| `cell-edit-commit` | `{ row, col, key, oldValue, newValue }` | Cell value committed |
|
|
259
259
|
| `cell-edit-cancel` | `{ row, col }` | Cell edit cancelled (Escape) |
|
|
@@ -306,7 +306,7 @@ All events use `CustomEvent` with `bubbles: true, composed: true`.
|
|
|
306
306
|
| Event | Detail | Description |
|
|
307
307
|
|-------|--------|-------------|
|
|
308
308
|
| `undo-state-change` | `{ canUndo, canRedo }` | Undo/redo availability changed |
|
|
309
|
-
| `context-menu` | `{ x, y, row, col,
|
|
309
|
+
| `context-menu` | `{ x, y, row, col, key, value, rowData }` | Right-click on cell. Cancelable — `preventDefault()` suppresses the built-in menu |
|
|
310
310
|
|
|
311
311
|
## CSS Custom Properties
|
|
312
312
|
|
|
@@ -1,12 +1,8 @@
|
|
|
1
1
|
import type { CellRange } from '../core/selection.js';
|
|
2
2
|
import type { ColumnDefinition, DataRow } from '../models/types.js';
|
|
3
3
|
/**
|
|
4
|
-
* Copy selected range to clipboard as TSV
|
|
4
|
+
* Copy selected range to clipboard as TSV — the spreadsheet clipboard format (see `encodeTsv`):
|
|
5
|
+
* a cell containing a tab, a line break or a quote is quoted, so it pastes into Excel as one cell.
|
|
5
6
|
*/
|
|
6
7
|
export declare function copyToClipboard(data: DataRow[], columns: ColumnDefinition[], range: CellRange): string;
|
|
7
|
-
/**
|
|
8
|
-
* Parse TSV/CSV clipboard text into a 2D array of strings.
|
|
9
|
-
* Handles RFC 4180 quoted fields: double-quote escaping, embedded tabs/newlines.
|
|
10
|
-
*/
|
|
11
|
-
export declare function parseClipboardText(text: string): string[][];
|
|
12
8
|
export declare function parseValueForColumn(raw: string, col: ColumnDefinition): unknown;
|