@ixfx/components 0.8.7 → 0.8.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/bundle/index.d.ts +743 -383
- package/bundle/index.d.ts.map +1 -1
- package/bundle/index.js +2093 -222
- package/bundle/index.js.map +1 -1
- package/dist/crumbs.d.ts +1 -1
- package/dist/crumbs.js +2 -2
- package/dist/{data-grid-CYVPSUwh.d.ts → data-grid-C588pTgt.d.ts} +15 -2
- package/dist/data-grid-C588pTgt.d.ts.map +1 -0
- package/dist/data-grid.d.ts +3 -2
- package/dist/data-grid.js +95 -5
- package/dist/data-grid.js.map +1 -1
- package/dist/{detail-list-vH56z7WE.d.ts → detail-list-IKl76Wnp.d.ts} +22 -5
- package/dist/detail-list-IKl76Wnp.d.ts.map +1 -0
- package/dist/detail-list.d.ts +4 -3
- package/dist/detail-list.js +103 -3
- package/dist/detail-list.js.map +1 -1
- package/dist/{grid-list-Cq8ga2WZ.d.ts → grid-list-BUlUnisU.d.ts} +214 -112
- package/dist/grid-list-BUlUnisU.d.ts.map +1 -0
- package/dist/{grid-list-j5C7qtlG.js → grid-list-D18FNJRH.js} +77 -164
- package/dist/grid-list-D18FNJRH.js.map +1 -0
- package/dist/grid-list.d.ts +3 -2
- package/dist/grid-list.js +1 -1
- package/dist/incr-search.d.ts +1 -1
- package/dist/{index-DDREWqMm.d.ts → index--qnhBWZJ.d.ts} +2 -2
- package/dist/{index-DDREWqMm.d.ts.map → index--qnhBWZJ.d.ts.map} +1 -1
- package/dist/index.d.ts +212 -253
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -12
- package/dist/index.js.map +1 -1
- package/dist/{interaction-B9AAlsFO.js → interaction-BskmlA9t.js} +1 -1
- package/dist/{labelled-slider-input-BCH9968c.js → labelled-slider-input-aEYDvW2S.js} +2 -2
- package/dist/{labelled-slider-input-BCH9968c.js.map → labelled-slider-input-aEYDvW2S.js.map} +1 -1
- package/dist/labelled-slider-input.js +1 -1
- package/dist/{list-item-animation-DuiwgN3l.js → list-item-animation-BUoEKi5s.js} +29 -10
- package/dist/list-item-animation-BUoEKi5s.js.map +1 -0
- package/dist/list-native-drag-controller-CFyrkKUj.d.ts +61 -0
- package/dist/list-native-drag-controller-CFyrkKUj.d.ts.map +1 -0
- package/dist/list-native-drag-controller-DxD6Yjci.js +567 -0
- package/dist/list-native-drag-controller-DxD6Yjci.js.map +1 -0
- package/dist/{menu-HMoxCPY2.js → menu-CMXhIaNZ.js} +3 -3
- package/dist/{menu-HMoxCPY2.js.map → menu-CMXhIaNZ.js.map} +1 -1
- package/dist/{menu-item-BQDYxk5A.js → menu-item-BYGQzyCe.js} +2 -2
- package/dist/{menu-item-BQDYxk5A.js.map → menu-item-BYGQzyCe.js.map} +1 -1
- package/dist/menu.js +2 -2
- package/dist/miller.d.ts +2 -2
- package/dist/miller.js +1 -1
- package/dist/narrowed-text.js +1 -1
- package/dist/plots.js +1 -1
- package/dist/select-horiz.js +1 -1
- package/dist/slider-input-BxURAAmD.d.ts.map +1 -1
- package/dist/{slider-input-WR8_RwHg.js → slider-input-Cb5uSV42.js} +78 -11
- package/dist/slider-input-Cb5uSV42.js.map +1 -0
- package/dist/slider-input.js +1 -1
- package/dist/{tree-CozQj01a.js → tree-a14n9y7i.js} +1055 -32
- package/dist/tree-a14n9y7i.js.map +1 -0
- package/dist/{tree-component-BMpxpdTi.d.ts → tree-component-BW2iCFq9.d.ts} +108 -4
- package/dist/tree-component-BW2iCFq9.d.ts.map +1 -0
- package/dist/tree.d.ts +102 -4
- package/dist/tree.d.ts.map +1 -1
- package/dist/tree.js +2 -2
- package/dist/{vertical-list-BGn9nyKh.d.ts → vertical-list-CHrXmmQ3.d.ts} +21 -4
- package/dist/vertical-list-CHrXmmQ3.d.ts.map +1 -0
- package/dist/vertical-list.d.ts +3 -2
- package/dist/vertical-list.js +103 -3
- package/dist/vertical-list.js.map +1 -1
- package/dist/{xy-axis-CrrVdDFe.js → xy-axis-COKw338Q.js} +2 -2
- package/dist/xy-axis-COKw338Q.js.map +1 -0
- package/dist/xy-axis-DQqd2yXJ.d.ts.map +1 -1
- package/docs-user/data-grid.md +30 -0
- package/docs-user/detail-list.md +29 -0
- package/docs-user/grid-list.md +34 -4
- package/docs-user/index.json +2 -2
- package/docs-user/tree.md +76 -1
- package/docs-user/vertical-list.md +30 -1
- package/package.json +1 -1
- package/dist/data-grid-CYVPSUwh.d.ts.map +0 -1
- package/dist/detail-list-vH56z7WE.d.ts.map +0 -1
- package/dist/grid-list-Cq8ga2WZ.d.ts.map +0 -1
- package/dist/grid-list-j5C7qtlG.js.map +0 -1
- package/dist/list-item-animation-DuiwgN3l.js.map +0 -1
- package/dist/slider-input-WR8_RwHg.js.map +0 -1
- package/dist/tree-CozQj01a.js.map +0 -1
- package/dist/tree-component-BMpxpdTi.d.ts.map +0 -1
- package/dist/vertical-list-BGn9nyKh.d.ts.map +0 -1
- package/dist/xy-axis-CrrVdDFe.js.map +0 -1
package/docs-user/data-grid.md
CHANGED
|
@@ -116,6 +116,36 @@ selection actually changes.
|
|
|
116
116
|
|
|
117
117
|
---
|
|
118
118
|
|
|
119
|
+
## Native drag-out
|
|
120
|
+
|
|
121
|
+
Set `items-draggable` to make selectable rows draggable out of the grid. A
|
|
122
|
+
dragged row is one logical item and its preview renders identically to the
|
|
123
|
+
other list components. On `dragstart` the grid fires the cancelable,
|
|
124
|
+
`composed`, bubbling `list-native-drag-start` event with
|
|
125
|
+
`{ key, index, item, selectedKeys, selected, preview }`:
|
|
126
|
+
|
|
127
|
+
- `selected` is the full selection as display-ordered `ListDragEntry[]`
|
|
128
|
+
(`{ key, index, item, element }`, where `item` is the row value and
|
|
129
|
+
`element` the `.row` div); `selectedKeys` mirrors the keys. The origin rule
|
|
130
|
+
applies: dragging an unselected row replaces the selection with it first.
|
|
131
|
+
- `preview` is the shared built-in drag preview: `preview.element` for
|
|
132
|
+
`DataTransfer.setDragImage()` (a row of cards for ≤5 rows, a compact
|
|
133
|
+
`N items` list with `+N more` for 6+; the row caption is the first visible
|
|
134
|
+
column's formatted value), plus a pre-painted `preview.canvas` for native
|
|
135
|
+
hosts.
|
|
136
|
+
- Assign `dragPreviewRenderer` for a custom synchronous preview returning
|
|
137
|
+
`{ element, hotspot?, canvas?, dispose? }`.
|
|
138
|
+
- `preventDefault()` on the event cancels the browser drag, but the sync
|
|
139
|
+
listener still sees `preview` (incl. `canvas`) — what lets an Electron host
|
|
140
|
+
rasterize it during the synchronous turn. Column-header reorder (pointer
|
|
141
|
+
drag) is a different mechanism and is unaffected.
|
|
142
|
+
|
|
143
|
+
The built-in preview is theme-aware (`--surface-4`, `--surface-4-text`,
|
|
144
|
+
`--border-subtle`, `--radius-m`, `--accent`, `font`) and exposes
|
|
145
|
+
`part="drag-preview"`.
|
|
146
|
+
|
|
147
|
+
---
|
|
148
|
+
|
|
119
149
|
## Sorting
|
|
120
150
|
|
|
121
151
|
Click header to cycle `asc → desc → none`. Or set:
|
package/docs-user/detail-list.md
CHANGED
|
@@ -23,6 +23,7 @@ Selection semantics match `ixfx-vertical-list` — same modes, same `list-*` eve
|
|
|
23
23
|
- [Interaction modes](#interaction-modes)
|
|
24
24
|
- [Custom checkbox](#custom-checkbox)
|
|
25
25
|
- [Events](#events)
|
|
26
|
+
- [Native drag-out](#native-drag-out)
|
|
26
27
|
- [Keyboard navigation](#keyboard-navigation)
|
|
27
28
|
- [Wrapping](#wrapping)
|
|
28
29
|
- [Incremental search](#incremental-search)
|
|
@@ -274,6 +275,7 @@ list.checkboxRenderer = { checked: '✓', unchecked: '' };
|
|
|
274
275
|
| `list-tickle` | `{ item: Element }` | Hover/focus cursor moved |
|
|
275
276
|
| `list-activate` | `{ item: Element }` | Item activated (Enter/double-click) |
|
|
276
277
|
| `list-item-click` | `{ item: Element }` | Item clicked |
|
|
278
|
+
| `list-native-drag-start` | `{ key, index, item, selectedKeys, selected, preview }` | Cancelable; native item drag begins |
|
|
277
279
|
|
|
278
280
|
```typescript
|
|
279
281
|
list.addEventListener('list-select', (e) => {
|
|
@@ -283,6 +285,33 @@ list.addEventListener('list-select', (e) => {
|
|
|
283
285
|
|
|
284
286
|
---
|
|
285
287
|
|
|
288
|
+
## Native drag-out
|
|
289
|
+
|
|
290
|
+
Set `items-draggable` to make selectable rows draggable out of the list. On
|
|
291
|
+
`dragstart` the list fires the cancelable, `composed`, bubbling
|
|
292
|
+
`list-native-drag-start` event with
|
|
293
|
+
`{ key, index, item, selectedKeys, selected, preview }`:
|
|
294
|
+
|
|
295
|
+
- `selected` is the full selection as display-ordered `ListDragEntry[]`
|
|
296
|
+
(`{ key, index, item, element }`); `selectedKeys` mirrors the keys. The
|
|
297
|
+
origin rule applies: dragging an unselected row replaces the selection with
|
|
298
|
+
it first.
|
|
299
|
+
- `preview` is the shared built-in drag preview: `preview.element` for
|
|
300
|
+
`DataTransfer.setDragImage()` (a row of cards for ≤5 items, a compact
|
|
301
|
+
`N items` list with `+N more` for 6+), plus a pre-painted `preview.canvas`
|
|
302
|
+
for native hosts.
|
|
303
|
+
- Assign `dragPreviewRenderer` for a custom synchronous preview returning
|
|
304
|
+
`{ element, hotspot?, canvas?, dispose? }`.
|
|
305
|
+
- `preventDefault()` on the event cancels the browser drag, but the sync
|
|
306
|
+
listener still sees `preview` (incl. `canvas`) — what lets an Electron host
|
|
307
|
+
rasterize it during the synchronous turn.
|
|
308
|
+
|
|
309
|
+
The built-in preview is theme-aware (`--surface-4`, `--surface-4-text`,
|
|
310
|
+
`--border-subtle`, `--radius-m`, `--accent`, `font`) and exposes
|
|
311
|
+
`part="drag-preview"`.
|
|
312
|
+
|
|
313
|
+
---
|
|
314
|
+
|
|
286
315
|
## Keyboard navigation
|
|
287
316
|
|
|
288
317
|
The list must have focus for keyboard navigation. Click an item to focus, or set `tabindex="0"` on the element.
|
package/docs-user/grid-list.md
CHANGED
|
@@ -17,10 +17,11 @@ single vertical column, or a horizontally-scrolling strip.
|
|
|
17
17
|
6. [Selection](#selection)
|
|
18
18
|
7. [Cursor](#cursor)
|
|
19
19
|
8. [Events](#events)
|
|
20
|
-
9. [
|
|
21
|
-
10. [
|
|
22
|
-
11. [
|
|
23
|
-
12. [
|
|
20
|
+
9. [Native drag-out](#native-drag-out)
|
|
21
|
+
10. [Keyboard](#keyboard)
|
|
22
|
+
11. [Virtualisation](#virtualisation)
|
|
23
|
+
12. [CSS parts](#css-parts)
|
|
24
|
+
13. [Choosing a list component](#choosing-a-list-component)
|
|
24
25
|
|
|
25
26
|
---
|
|
26
27
|
|
|
@@ -214,11 +215,40 @@ All bubble and are `composed`.
|
|
|
214
215
|
| `list-item-click` | `{ key, index, item, element }` | Single click / `Enter` |
|
|
215
216
|
| `list-tickle` | `{ key, index, item, element }` | Cursor moves onto an item |
|
|
216
217
|
| `grid-list-viewport-change` | `{ renderedKeys, visibleKeys }` | Scroll, resize, filter, content change, or `refreshLayout()` — the rendered window moved |
|
|
218
|
+
| `list-native-drag-start` | `{ key, index, item, selectedKeys, selected, preview }` | Cancelable; native item drag begins |
|
|
217
219
|
|
|
218
220
|
`key` / `index` are the stable contract in both modes. `item` is backward-compatible: the light-DOM `Element` in element mode, the data value in data mode. `element` is the DOM node when there is one (`undefined` in data mode). `selected` / `previous` (Element sets) are populated in element mode only; use `selectedKeys` / `previousKeys` everywhere.
|
|
219
221
|
|
|
220
222
|
---
|
|
221
223
|
|
|
224
|
+
## Native drag-out
|
|
225
|
+
|
|
226
|
+
Set `items-draggable` to make selectable cells draggable out of the grid. On
|
|
227
|
+
`dragstart` the grid fires the cancelable, `composed`, bubbling
|
|
228
|
+
`list-native-drag-start` event with
|
|
229
|
+
`{ key, index, item, selectedKeys, selected, preview }`:
|
|
230
|
+
|
|
231
|
+
- `selected` is the full selection as display-ordered `ListDragEntry[]`
|
|
232
|
+
(`{ key, index, item, element? }`); `selectedKeys` mirrors the keys. The
|
|
233
|
+
origin rule applies: dragging an unselected cell replaces the selection with
|
|
234
|
+
it first. Works in data-backed mode too — `item` is the data value and
|
|
235
|
+
`element` is `undefined` there.
|
|
236
|
+
- `preview` is the shared built-in drag preview: `preview.element` for
|
|
237
|
+
`DataTransfer.setDragImage()` (a row of cards for ≤5 items, a compact
|
|
238
|
+
`N items` list with `+N more` for 6+), plus a pre-painted `preview.canvas`
|
|
239
|
+
for native hosts.
|
|
240
|
+
- Assign `dragPreviewRenderer` for a custom synchronous preview returning
|
|
241
|
+
`{ element, hotspot?, canvas?, dispose? }`.
|
|
242
|
+
- `preventDefault()` on the event cancels the browser drag, but the sync
|
|
243
|
+
listener still sees `preview` (incl. `canvas`) — what lets an Electron host
|
|
244
|
+
rasterize it during the synchronous turn.
|
|
245
|
+
|
|
246
|
+
The built-in preview is theme-aware (`--surface-4`, `--surface-4-text`,
|
|
247
|
+
`--border-subtle`, `--radius-m`, `--accent`, `font`) and exposes
|
|
248
|
+
`part="drag-preview"`.
|
|
249
|
+
|
|
250
|
+
---
|
|
251
|
+
|
|
222
252
|
## Keyboard
|
|
223
253
|
|
|
224
254
|
| Key | `grid` | `row` / `column` |
|
package/docs-user/index.json
CHANGED
package/docs-user/tree.md
CHANGED
|
@@ -279,6 +279,74 @@ All events **bubble** and are **composed** (cross shadow-DOM boundaries).
|
|
|
279
279
|
| `item-dblclick` | `TreeItemDblClickDetail` | User double-clicks an item. The second click is swallowed, so a branch is never toggled open/closed by a double-click. `activate` also fires. |
|
|
280
280
|
| `expand` | `{ node: TreeNode; depth: number }` | A branch expands |
|
|
281
281
|
| `collapse` | `{ node: TreeNode; depth: number }` | A branch collapses |
|
|
282
|
+
| `list-native-drag-start` | `ListNativeDragStartDetail<TreeNode>` | A drag begins on a draggable row (see drag & drop below). Cancelable. |
|
|
283
|
+
| `tree-drag-start` | `TreeDragContext` — `{ nodes, keys }` | A drag of tree nodes has begun (fires just after a non-cancelled `list-native-drag-start`). |
|
|
284
|
+
| `tree-drag-over` | `TreeDropContext` | Every `dragover` where a drop target resolved. `preventDefault()` rejects the drop (same as `canDrop` returning `false`). Cancelable. |
|
|
285
|
+
| `tree-drop` | `TreeDropDetail` | A validated drop occurred. `preventDefault()` stops the component applying it (you handle it). Cancelable. |
|
|
286
|
+
| `tree-drag-end` | `{ dropped: boolean }` | A drag ended. `dropped` is `true` only for a drop that landed on this tree. |
|
|
287
|
+
|
|
288
|
+
## Drag & drop
|
|
289
|
+
|
|
290
|
+
`ixfx-tree-list` can let its rows be dragged — to **reparent** or **reorder**
|
|
291
|
+
nodes within the tree, and/or **out** of the element entirely (native
|
|
292
|
+
file/OS drag-out, like `ixfx-grid-list`). It can also be a **drop target** for
|
|
293
|
+
nodes from another `ixfx-tree-list` or from an arbitrary external source.
|
|
294
|
+
|
|
295
|
+
Opt in with the single **`item-dnd`** attribute:
|
|
296
|
+
|
|
297
|
+
| `item-dnd` | Rows draggable | Internal reparent/reorder | Native drag-out | Accepts drops |
|
|
298
|
+
|------------|:--:|:--:|:--:|:--:|
|
|
299
|
+
| `none` *(default)* | – | – | – | – |
|
|
300
|
+
| `internal` | ✓ | ✓ | – | ✓ (from any `ixfx-tree-list`) |
|
|
301
|
+
| `external` | ✓ | – | ✓ | ✓ (foreign payloads via `parseExternalDrop`) |
|
|
302
|
+
| `both` | ✓ | ✓ | ✓ | both |
|
|
303
|
+
|
|
304
|
+
### Properties
|
|
305
|
+
|
|
306
|
+
| Property | Attribute | Type | Default | Purpose |
|
|
307
|
+
|----------|-----------|------|---------|---------|
|
|
308
|
+
| `itemDnd` | `item-dnd` | `'none' \| 'internal' \| 'external' \| 'both'` | `'none'` | Opt in (table above). |
|
|
309
|
+
| `acceptDropTypes` | `accept-drop-types` | `string` | – | Space-separated MIME list; an external `dragenter` is only honoured when `dataTransfer.types` intersects it. |
|
|
310
|
+
| `dndExpandHoverMs` | `dnd-expand-hover-ms` | `number` | `500` | Hover-to-open delay: hovering a collapsed branch this long during a drag expands it (spring-loaded folders). |
|
|
311
|
+
| `reorderable` | `reorderable` | `boolean` | `true` | When `false` (`reorderable="false"`), a drag that only reorders siblings — or drops a node back into its current parent — is rejected: no drop indicator, no `tree-drop`. Use for models with no meaningful child order (a filesystem). Reparenting, including via the x-position ancestor walk, is unaffected. |
|
|
312
|
+
| `dragPreviewRenderer` | – | `ListDragPreviewRenderer<TreeNode>` | – | Custom drag image (same contract as `ixfx-grid-list`); unset ⇒ built-in cards/list preview. |
|
|
313
|
+
| `canDrag` | – | `(ctx) => boolean` | – | Per-row gate at `dragstart`. Return `false` for every row (with `item-dnd` still set) for a **drop-target-only** tree. |
|
|
314
|
+
| `canDrop` | – | `(ctx: TreeDropContext) => boolean` | – | Sync gate on every `dragover`; controls the valid indicator and whether the drop is allowed. |
|
|
315
|
+
| `parseExternalDrop` | – | `(dt: DataTransfer) => TreeNode[] \| undefined` | – | Turn a foreign payload into nodes to insert (`external` / `both`). |
|
|
316
|
+
| `applyInternalDrop` | – | `boolean` | `true` when `model` is set | When `true`, the component performs an accepted internal drop itself via `model.applyDrop()`. Set `false` to mutate `root`/`model` yourself in the `tree-drop` handler. |
|
|
317
|
+
|
|
318
|
+
### Drop targeting (VS Code Explorer style)
|
|
319
|
+
|
|
320
|
+
While dragging over the tree:
|
|
321
|
+
|
|
322
|
+
- **Vertical position** in a row picks `before` / `inside` (reparent) / `after`.
|
|
323
|
+
`inside` a leaf falls back to `after`; `after` an expanded branch lands as its
|
|
324
|
+
first child.
|
|
325
|
+
- **Horizontal position** on a `before`/`after` line walks the target *up* the
|
|
326
|
+
ancestor chain — drag left across a deeply-indented row to drop as a sibling of
|
|
327
|
+
one of its ancestors without scrolling. The insertion line and its nub move to
|
|
328
|
+
that depth.
|
|
329
|
+
- Hovering a collapsed branch for `dndExpandHoverMs` springs it open.
|
|
330
|
+
- With `reorderable="false"`, `before`/`after` between current siblings gives no
|
|
331
|
+
feedback — only reparenting drops resolve a target.
|
|
332
|
+
- Dragging near the top/bottom edge auto-scrolls.
|
|
333
|
+
- Dropping a node onto itself or into its own subtree is rejected (no indicator).
|
|
334
|
+
|
|
335
|
+
### Applying drops without a model
|
|
336
|
+
|
|
337
|
+
```ts
|
|
338
|
+
import { applyTreeDrop } from '@ixfx/components';
|
|
339
|
+
|
|
340
|
+
tree.addEventListener('tree-drop', (e) => {
|
|
341
|
+
e.preventDefault(); // we'll apply it ourselves
|
|
342
|
+
root = applyTreeDrop(root, e.detail); // pure, returns a new root
|
|
343
|
+
tree.root = root;
|
|
344
|
+
});
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
`TreeDataModel` also gains `moveNode(key, parentKey, index?)`,
|
|
348
|
+
`moveNodeRelative(key, refKey, 'before'|'after')`, `insertNode(...)` and
|
|
349
|
+
`applyDrop(ctx)` — all off-by-one-safe and no-ops for invalid moves.
|
|
282
350
|
|
|
283
351
|
### Detail types
|
|
284
352
|
|
|
@@ -525,9 +593,16 @@ These are set by the global theme and inherited by all tree components.
|
|
|
525
593
|
| Variable | Default | Description |
|
|
526
594
|
|----------|---------|-------------|
|
|
527
595
|
| `--tree-indent` | `20px` | Indentation per depth level |
|
|
528
|
-
| `--tree-item-height` | `
|
|
596
|
+
| `--tree-item-height` | `30px` | Height of each row |
|
|
529
597
|
| `--tree-caret-size` | `30px` | Expand/collapse caret size |
|
|
530
598
|
| `--ixfx-list-item-move-duration` | `200ms` | Row enter / leave animation duration |
|
|
599
|
+
| `--tree-drop-line` | `var(--accent)` | Colour of the before/after insertion line + nub |
|
|
600
|
+
| `--tree-drop-nub-size` | `5px` | Diameter of the insertion-line nub |
|
|
601
|
+
| `--tree-drop-into-outline` | `2px solid var(--accent)` | Outline of a row that is a reparent (`inside`) drop target |
|
|
602
|
+
| `--tree-drop-into-bg` | `color-mix(...)` | Background tint of a reparent drop target |
|
|
603
|
+
|
|
604
|
+
`part`s: `drop-target` (the highlighted row), `drop-indicator` (the
|
|
605
|
+
before/after line).
|
|
531
606
|
|
|
532
607
|
### `ixfx-miller-list` specific
|
|
533
608
|
|
|
@@ -13,7 +13,8 @@ A scrollable vertical list of items with selection, keyboard navigation, and inc
|
|
|
13
13
|
5. [Custom checkbox](#custom-checkbox)
|
|
14
14
|
5. [Selection](#selection)
|
|
15
15
|
6. [Events](#events)
|
|
16
|
-
7. [
|
|
16
|
+
7. [Native drag-out](#native-drag-out)
|
|
17
|
+
8. [Keyboard navigation](#keyboard-navigation)
|
|
17
18
|
8. [Incremental search](#incremental-search)
|
|
18
19
|
9. [CSS variables](#css-variables)
|
|
19
20
|
10. [CSS parts](#css-parts)
|
|
@@ -442,6 +443,7 @@ All events **bubble** and are **composed** (they cross shadow-DOM boundaries).
|
|
|
442
443
|
| `list-tickle` | `ListTickleDetail` | An item enters cursor focus (hover or keyboard navigation) |
|
|
443
444
|
| `list-activate` | `ListActivateDetail` | User explicitly activates an item: Enter key or double-click |
|
|
444
445
|
| `list-item-click` | `ListItemClickDetail` | Raw click or Enter on any item |
|
|
446
|
+
| `list-native-drag-start` | `{ key, index, item, selectedKeys, selected, preview }` | Cancelable; native item drag begins |
|
|
445
447
|
|
|
446
448
|
### Detail types
|
|
447
449
|
|
|
@@ -481,6 +483,33 @@ list.addEventListener('list-item-click', ({ detail }) => {
|
|
|
481
483
|
|
|
482
484
|
---
|
|
483
485
|
|
|
486
|
+
## Native drag-out
|
|
487
|
+
|
|
488
|
+
Set `items-draggable` to make selectable rows draggable out of the list. On
|
|
489
|
+
`dragstart` the list fires the cancelable, `composed`, bubbling
|
|
490
|
+
`list-native-drag-start` event with
|
|
491
|
+
`{ key, index, item, selectedKeys, selected, preview }`:
|
|
492
|
+
|
|
493
|
+
- `selected` is the full selection as display-ordered `ListDragEntry[]`
|
|
494
|
+
(`{ key, index, item, element }`); `selectedKeys` mirrors the keys. The
|
|
495
|
+
origin rule applies: dragging an unselected row replaces the selection with
|
|
496
|
+
it first.
|
|
497
|
+
- `preview` is the shared built-in drag preview: `preview.element` for
|
|
498
|
+
`DataTransfer.setDragImage()` (a row of cards for ≤5 items, a compact
|
|
499
|
+
`N items` list with `+N more` for 6+), plus a pre-painted `preview.canvas`
|
|
500
|
+
for native hosts.
|
|
501
|
+
- Assign `dragPreviewRenderer` for a custom synchronous preview returning
|
|
502
|
+
`{ element, hotspot?, canvas?, dispose? }`.
|
|
503
|
+
- `preventDefault()` on the event cancels the browser drag, but the sync
|
|
504
|
+
listener still sees `preview` (incl. `canvas`) — what lets an Electron host
|
|
505
|
+
rasterize it during the synchronous turn.
|
|
506
|
+
|
|
507
|
+
The built-in preview is theme-aware (`--surface-4`, `--surface-4-text`,
|
|
508
|
+
`--border-subtle`, `--radius-m`, `--accent`, `font`) and exposes
|
|
509
|
+
`part="drag-preview"`.
|
|
510
|
+
|
|
511
|
+
---
|
|
512
|
+
|
|
484
513
|
## Keyboard navigation
|
|
485
514
|
|
|
486
515
|
The element must be focused (click it or tab to it) before keyboard navigation works. A visible focus ring appears on focus.
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"data-grid-CYVPSUwh.d.ts","names":[],"sources":["../src/data-grid/types.ts","../src/data-grid/data-grid.ts"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"detail-list-vH56z7WE.d.ts","names":[],"sources":["../src/detail-list/types.ts","../src/detail-list/detail-list.ts"],"mappings":";;;;;;;;;KACY;;KAGA;WACD,SAAS;WACT;WACA;;;KAIC,wBAAwB,GAAG,gBAAgB,GAAG;;KAG9C,mBAAmB,eAAe,2BAA2B;;;;;;;;;;;;;;;;;;;;cC8D5D,0BAA0B;;EAErC,eAAe;EAGf,iBAAiB;EAGjB,MAAM;EAGN;EAGA,gBAAgB;EAGhB;EAGA,UAAU;EAGV;EAGA,WAAW;EAGX;EAGA;EAGA,mBAAmB,IAAI;;;;;;EAQvB;;EAIA,oBAAoB,gCAAgC;;;;;;EAQpD;UAGQ;mBAeS;UAeT;;WAuEC,QAAM,qBAAA;;MAYX,YAAY;EAoBP;EA4DA;EAiBA;EAQA,QAAQ,SAAS;;MAqCtB,gBAAgB;;MAKhB,iBAAiB,YAAY;;;;;;EASjC;EAIA,QAAQ,MAAM,kBAAkB,UAAU;;;;;EAuB1C,WAAW,MAAM,UAAU;;EAW3B,YAAY,OAAO,SAAS,WAAW;EAIvC;;;;;EAYA,SAAS,gBAAgB;;;;;EAgBzB,YAAY,MAAM;;;;;;EASlB,SAAS,WAAW,WAAW,OAAO;EAItC,OAAO,MAAM;EAIb,WAAW,OAAO,SAAS;EAI3B,SAAS,MAAM;EAIf;EAIA;;MAQI,gBAAgB;;MAKhB;;EAMJ,WAAW,MAAM;;EAKjB,gBAAgB,MAAM;;EAKtB,mBAAmB,MAAM;;EAKzB,SAAS;EAgBP,eAAe,0CAA0C,UAAU;UAoa7D;;;;;;;;;EAkBF,kBAAkB;UAwBhB;UAMA;UAgCA;UAiBA;;;;;;;UA2DA;;UAoBA;UAcA;UAYA;UAUA;UAMA;UAIA;UA4EA;UAWA;UAMA;UAKA;SAUQ,sBAAM;EA6Ib,wBAAM;;QAsBT;YACI;IACR,oBAAoB;;YAGZ,4BAA4B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid-list-Cq8ga2WZ.d.ts","names":[],"sources":["../src/grid-list/types.ts","../src/interaction/list-selection-controller.ts","../src/pan-text/pan-text.ts","../src/grid-list/grid-list.ts"],"mappings":"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"}
|