@human-kit/svelte-components 1.0.0-alpha.14 → 1.0.0-alpha.15
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/table/PLAN.md +5 -16
- package/dist/table/README.md +11 -0
- package/dist/table/TODO.md +1 -1
- package/dist/table/body/README.md +2 -0
- package/dist/table/body/table-body.svelte +1 -7
- package/dist/table/body/table-body.svelte.d.ts +1 -6
- package/dist/table/cell/README.md +2 -0
- package/dist/table/cell/table-cell.svelte +1 -7
- package/dist/table/cell/table-cell.svelte.d.ts +1 -6
- package/dist/table/checkbox/README.md +2 -0
- package/dist/table/checkbox/table-checkbox.svelte +1 -22
- package/dist/table/checkbox/table-checkbox.svelte.d.ts +1 -10
- package/dist/table/checkbox-indicator/README.md +2 -0
- package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte +1 -8
- package/dist/table/checkbox-indicator/table-checkbox-indicator.svelte.d.ts +1 -7
- package/dist/table/column/README.md +17 -14
- package/dist/table/column/table-column.svelte +2 -26
- package/dist/table/column/table-column.svelte.d.ts +1 -15
- package/dist/table/column-header-cell/README.md +2 -0
- package/dist/table/column-header-cell/table-column-header-cell.svelte +1 -7
- package/dist/table/column-header-cell/table-column-header-cell.svelte.d.ts +1 -6
- package/dist/table/column-resizer/README.md +2 -1
- package/dist/table/column-resizer/table-column-resizer.svelte +1 -9
- package/dist/table/column-resizer/table-column-resizer.svelte.d.ts +1 -8
- package/dist/table/empty-state/README.md +2 -0
- package/dist/table/empty-state/table-empty-state.svelte +1 -6
- package/dist/table/empty-state/table-empty-state.svelte.d.ts +1 -5
- package/dist/table/footer/README.md +2 -0
- package/dist/table/footer/table-footer.svelte +1 -7
- package/dist/table/footer/table-footer.svelte.d.ts +1 -6
- package/dist/table/header/README.md +2 -0
- package/dist/table/header/table-header.svelte +1 -7
- package/dist/table/header/table-header.svelte.d.ts +1 -6
- package/dist/table/index.d.ts +2 -1
- package/dist/table/root/README.md +31 -21
- package/dist/table/root/context.d.ts +3 -5
- package/dist/table/root/context.js +4 -5
- package/dist/table/root/table-root.svelte +5 -38
- package/dist/table/root/table-root.svelte.d.ts +1 -29
- package/dist/table/row/README.md +2 -0
- package/dist/table/row/table-row.svelte +2 -16
- package/dist/table/row/table-row.svelte.d.ts +1 -10
- package/dist/table/types.d.ts +90 -0
- package/dist/table/types.js +1 -0
- package/package.json +1 -1
package/dist/table/PLAN.md
CHANGED
|
@@ -224,7 +224,7 @@ Responsibilities:
|
|
|
224
224
|
|
|
225
225
|
- define stable column identity
|
|
226
226
|
- register column metadata in context (sorting, row header)
|
|
227
|
-
- register column
|
|
227
|
+
- register column width constraints in context
|
|
228
228
|
- serve as the anchor for sorting and row header semantics
|
|
229
229
|
- serve as the anchor for width/resizing behavior
|
|
230
230
|
|
|
@@ -232,7 +232,6 @@ Tentative API:
|
|
|
232
232
|
|
|
233
233
|
- `id: string` — stable column identity
|
|
234
234
|
- `allowsSorting?: boolean`
|
|
235
|
-
- `allowsResizing?: boolean`
|
|
236
235
|
- `isRowHeader?: boolean`
|
|
237
236
|
- `textValue?: string`
|
|
238
237
|
- `width?: number | string`
|
|
@@ -564,21 +563,14 @@ Add column resizing in a way that follows the React Aria Components mental model
|
|
|
564
563
|
<Table.Root aria-label="Users" bind:columnWidths>
|
|
565
564
|
<Table.Header>
|
|
566
565
|
<Table.Row>
|
|
567
|
-
<Table.Column
|
|
568
|
-
id="email"
|
|
569
|
-
isRowHeader
|
|
570
|
-
allowsSorting
|
|
571
|
-
allowsResizing
|
|
572
|
-
defaultWidth={280}
|
|
573
|
-
minWidth={180}
|
|
574
|
-
>
|
|
566
|
+
<Table.Column id="email" isRowHeader allowsSorting defaultWidth={280} minWidth={180}>
|
|
575
567
|
<Table.ColumnHeaderCell>
|
|
576
568
|
<span>Email</span>
|
|
577
569
|
<Table.ColumnResizer />
|
|
578
570
|
</Table.ColumnHeaderCell>
|
|
579
571
|
</Table.Column>
|
|
580
572
|
|
|
581
|
-
<Table.Column id="group" allowsSorting
|
|
573
|
+
<Table.Column id="group" allowsSorting defaultWidth={180} minWidth={140}>
|
|
582
574
|
<Table.ColumnHeaderCell>
|
|
583
575
|
<span>Group</span>
|
|
584
576
|
<Table.ColumnResizer />
|
|
@@ -595,11 +587,10 @@ Add column resizing in a way that follows the React Aria Components mental model
|
|
|
595
587
|
|
|
596
588
|
### API Recommendation
|
|
597
589
|
|
|
598
|
-
####
|
|
590
|
+
#### Width Props on `Table.Column`
|
|
599
591
|
|
|
600
592
|
Add the following props:
|
|
601
593
|
|
|
602
|
-
- `allowsResizing?: boolean`
|
|
603
594
|
- `width?: number | string`
|
|
604
595
|
- `defaultWidth?: number | string`
|
|
605
596
|
- `minWidth?: number`
|
|
@@ -609,8 +600,7 @@ Notes:
|
|
|
609
600
|
|
|
610
601
|
- `width` is the controlled width for the column.
|
|
611
602
|
- `defaultWidth` is the uncontrolled initial width.
|
|
612
|
-
- `
|
|
613
|
-
- `Table.ColumnResizer` without `allowsResizing` should be ignored in production and warn in dev.
|
|
603
|
+
- rendering `Table.ColumnResizer` is the public resize opt-in for the owning column.
|
|
614
604
|
|
|
615
605
|
#### Width State on `Table.Root`
|
|
616
606
|
|
|
@@ -752,7 +742,6 @@ Derived data attributes:
|
|
|
752
742
|
|
|
753
743
|
Extend column registration to include:
|
|
754
744
|
|
|
755
|
-
- `allowsResizing`
|
|
756
745
|
- `width`
|
|
757
746
|
- `defaultWidth`
|
|
758
747
|
- `minWidth`
|
package/dist/table/README.md
CHANGED
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
|
|
7
7
|
`Table` is a headless interactive table primitive with grid-style keyboard navigation, row selection, sortable column headers, and a composable part-based API.
|
|
8
8
|
|
|
9
|
+
All public Table part prop types are exported from the table barrel, including `TableRootProps`, `TableColumnProps`, `TableHeaderProps`, `TableBodyProps`, `TableFooterProps`, `TableRowProps`, `TableColumnHeaderCellProps`, `TableColumnResizerProps`, `TableCellProps`, `TableEmptyStateProps`, `TableCheckboxProps`, and `TableCheckboxIndicatorProps`.
|
|
10
|
+
|
|
9
11
|
## Anatomy
|
|
10
12
|
|
|
11
13
|
```svelte
|
|
@@ -104,6 +106,15 @@
|
|
|
104
106
|
- In body rows, pressing `ArrowLeft` before the first cell or `ArrowRight` after the last cell moves focus to the row itself. Repeating that same horizontal arrow loops back into the opposite edge cell of the same row.
|
|
105
107
|
- `Table.Checkbox` is the supported interactive control inside table cells for explicit row selection in v1.
|
|
106
108
|
|
|
109
|
+
## Composition contract
|
|
110
|
+
|
|
111
|
+
- DOM-rendering parts: `Table.Root`, `Table.Header`, `Table.Body`, `Table.Footer`, `Table.Row`, `Table.Cell`, `Table.ColumnHeaderCell`, `Table.ColumnResizer`, `Table.Checkbox`, `Table.CheckboxIndicator`, and `Table.EmptyState` all render DOM.
|
|
112
|
+
- Metadata-only part: `Table.Column` does not render its own element. It only registers the public column input for the surrounding header composition.
|
|
113
|
+
- Sorting: `Table.Column.allowsSorting` declares that a column participates in sorting, and `Table.ColumnHeaderCell` is the interactive header cell that toggles the sort state.
|
|
114
|
+
- Resizing: `Table.ColumnResizer` is the only public opt-in for resizing. Rendering it inside a `Table.ColumnHeaderCell` enables resizing for the owning `Table.Column`.
|
|
115
|
+
- Public input types: import the `Table*Props` types you need from `@human-kit/svelte-components/table` or the main package barrel instead of deriving contracts from component internals.
|
|
116
|
+
- Internal normalized state: table context stores normalized column metadata internally as `TableColumnMetadata`. That metadata is not the public input contract for wrappers or consumers.
|
|
117
|
+
|
|
107
118
|
## Accessibility
|
|
108
119
|
|
|
109
120
|
- `Table.Root` renders an interactive `grid` over native table markup.
|
package/dist/table/TODO.md
CHANGED
|
@@ -46,7 +46,7 @@ Ship a stable `Table` v1 with keyboard navigation, row selection, sorting, docum
|
|
|
46
46
|
- [x] [M][P1][Area: DX][Owner: Unassigned][Target: Done] Break the controlled `selectedKeys` feedback loop — the `$effect` that syncs `selectedKeys` to `ctx.setSelection` also fires after internal selection changes via `onSelectionChange`, causing a redundant `notifySelection`.
|
|
47
47
|
- [x] [S][P2][Area: DX][Owner: Unassigned][Target: Done] Remove inline `style="outline: none;"` from Cell and ColumnHeaderCell — it overrides consumer inline styles; let consumers handle focus-visible styling via `data-focus-visible` / `data-focused` attributes instead.
|
|
48
48
|
- [x] [S][P2][Area: DX][Owner: Unassigned][Target: Done] Document `defaultSelectedKeys` and `defaultSortDescriptor` props in the README and docs page.
|
|
49
|
-
- [
|
|
49
|
+
- [x] [C][P2][Area: DX][Owner: Unassigned][Target: Done] Export component prop types (`TableRootProps`, `TableRowProps`, `TableCellProps`, etc.) so consumers can type wrapper components.
|
|
50
50
|
- [ ] [C][P2][Area: DX][Owner: Unassigned][Target: TBD] Evaluate whether exposing `context` as a `$bindable` prop on `Table.Root` is necessary or if a narrower public API would be safer.
|
|
51
51
|
- [ ] [C][P3][Area: DX][Owner: Unassigned][Target: TBD] Extract a shared registration helper to eliminate the duplicated sync-then-effect pattern across Column, Row, Cell, and ColumnHeaderCell.
|
|
52
52
|
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.Body`
|
|
10
10
|
Description: Body rowgroup for table data rows. It also exposes empty-state markers when no body rows are registered.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableBodyProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ---------- | --------- | ----------- | ------------------------------------------ |
|
|
14
16
|
| `class` | `string` | `''` | Class names for the `tbody` element. |
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
2
|
import { setTableSectionContext, useTableContext } from '../root/context';
|
|
5
|
-
|
|
6
|
-
type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
7
|
-
children?: Snippet;
|
|
8
|
-
class?: string;
|
|
9
|
-
};
|
|
3
|
+
import type { TableBodyProps } from '../types.js';
|
|
10
4
|
|
|
11
5
|
let { children, class: className = '', ...restProps }: TableBodyProps = $props();
|
|
12
6
|
setTableSectionContext({ section: 'body' });
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
4
|
-
children?: Snippet;
|
|
5
|
-
class?: string;
|
|
6
|
-
};
|
|
1
|
+
import type { TableBodyProps } from '../types.js';
|
|
7
2
|
declare const TableBody: import("svelte").Component<TableBodyProps, {}, "">;
|
|
8
3
|
type TableBody = ReturnType<typeof TableBody>;
|
|
9
4
|
export default TableBody;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.Cell`
|
|
10
10
|
Description: Table data cell part. In body scope it participates in roving focus and row selection. In footer scope it renders semantic summary cells only.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableCellProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ---------- | --------- | ----------- | ------------------------------------------ |
|
|
14
16
|
| `class` | `string` | `''` | Class names for the rendered `td` or `th`. |
|
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
|
-
import type { Snippet } from 'svelte';
|
|
4
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
5
3
|
import {
|
|
6
4
|
setTableCellContext,
|
|
7
5
|
useTableContext,
|
|
8
6
|
useTableRowContext,
|
|
9
7
|
type TableSelectionKey
|
|
10
8
|
} from '../root/context';
|
|
9
|
+
import type { TableCellProps } from '../types.js';
|
|
11
10
|
import {
|
|
12
11
|
shouldShowFocusVisible,
|
|
13
12
|
trackInteractionModality
|
|
14
13
|
} from '../../primitives/input-modality';
|
|
15
14
|
import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
|
|
16
15
|
|
|
17
|
-
type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
18
|
-
children?: Snippet;
|
|
19
|
-
class?: string;
|
|
20
|
-
};
|
|
21
|
-
|
|
22
16
|
let { children, class: className = '', ...restProps }: TableCellProps = $props();
|
|
23
17
|
|
|
24
18
|
const table = useTableContext();
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
4
|
-
children?: Snippet;
|
|
5
|
-
class?: string;
|
|
6
|
-
};
|
|
1
|
+
import type { TableCellProps } from '../types.js';
|
|
7
2
|
declare const TableCell: import("svelte").Component<TableCellProps, {}, "">;
|
|
8
3
|
type TableCell = ReturnType<typeof TableCell>;
|
|
9
4
|
export default TableCell;
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
Name: `Table.Checkbox`
|
|
8
8
|
Description: Headless selection-aware checkbox root for tables. In body cells it toggles the owning row. In header cells it becomes a select-all checkbox for multiple selection mode.
|
|
9
9
|
|
|
10
|
+
Public prop type: `TableCheckboxProps`
|
|
11
|
+
|
|
10
12
|
| Prop | Type | Default | Description |
|
|
11
13
|
| ----------------- | ------------------------------------------ | ----------- | ------------------------------------------------------------------------------------------------------- |
|
|
12
14
|
| `id` | `string` | `undefined` | Optional id forwarded to the composed checkbox root. |
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
2
|
import { Checkbox } from '../../checkbox';
|
|
5
3
|
import {
|
|
6
4
|
useTableCellContext,
|
|
@@ -8,31 +6,12 @@
|
|
|
8
6
|
useTableRowContext,
|
|
9
7
|
useTableSectionContext
|
|
10
8
|
} from '../root/context';
|
|
9
|
+
import type { TableCheckboxProps } from '../types.js';
|
|
11
10
|
import {
|
|
12
11
|
shouldShowFocusVisible,
|
|
13
12
|
trackInteractionModality
|
|
14
13
|
} from '../../primitives/input-modality';
|
|
15
14
|
|
|
16
|
-
type TableCheckboxProps = Omit<
|
|
17
|
-
HTMLAttributes<HTMLSpanElement>,
|
|
18
|
-
| 'children'
|
|
19
|
-
| 'class'
|
|
20
|
-
| 'id'
|
|
21
|
-
| 'role'
|
|
22
|
-
| 'tabindex'
|
|
23
|
-
| 'aria-checked'
|
|
24
|
-
| 'aria-disabled'
|
|
25
|
-
| 'onclick'
|
|
26
|
-
| 'onkeydown'
|
|
27
|
-
> & {
|
|
28
|
-
id?: string;
|
|
29
|
-
title?: string;
|
|
30
|
-
children?: Snippet;
|
|
31
|
-
class?: string;
|
|
32
|
-
'aria-label'?: string;
|
|
33
|
-
'aria-labelledby'?: string;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
15
|
let {
|
|
37
16
|
id,
|
|
38
17
|
title,
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableCheckboxProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'onclick' | 'onkeydown'> & {
|
|
4
|
-
id?: string;
|
|
5
|
-
title?: string;
|
|
6
|
-
children?: Snippet;
|
|
7
|
-
class?: string;
|
|
8
|
-
'aria-label'?: string;
|
|
9
|
-
'aria-labelledby'?: string;
|
|
10
|
-
};
|
|
1
|
+
import type { TableCheckboxProps } from '../types.js';
|
|
11
2
|
declare const TableCheckbox: import("svelte").Component<TableCheckboxProps, {}, "">;
|
|
12
3
|
type TableCheckbox = ReturnType<typeof TableCheckbox>;
|
|
13
4
|
export default TableCheckbox;
|
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
Name: `Table.CheckboxIndicator`
|
|
8
8
|
Description: Headless presence wrapper for indicator content inside `Table.Checkbox`. It renders when the checkbox is checked or indeterminate.
|
|
9
9
|
|
|
10
|
+
Public prop type: `TableCheckboxIndicatorProps`
|
|
11
|
+
|
|
10
12
|
| Prop | Type | Default | Description |
|
|
11
13
|
| -------------- | --------------------------------- | ----------- | ------------------------------------------------------------------------------- |
|
|
12
14
|
| `keepMounted` | `boolean` | `false` | Keeps the indicator mounted while hidden when the checkbox is unchecked. |
|
|
@@ -1,13 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
2
|
import { Checkbox } from '../../checkbox';
|
|
5
|
-
|
|
6
|
-
type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
|
|
7
|
-
keepMounted?: boolean;
|
|
8
|
-
children?: Snippet;
|
|
9
|
-
class?: string;
|
|
10
|
-
};
|
|
3
|
+
import type { TableCheckboxIndicatorProps } from '../types.js';
|
|
11
4
|
|
|
12
5
|
let {
|
|
13
6
|
keepMounted = false,
|
|
@@ -1,10 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
|
|
4
|
-
keepMounted?: boolean;
|
|
5
|
-
children?: Snippet;
|
|
6
|
-
class?: string;
|
|
7
|
-
};
|
|
1
|
+
import type { TableCheckboxIndicatorProps } from '../types.js';
|
|
8
2
|
declare const TableCheckboxIndicator: import("svelte").Component<TableCheckboxIndicatorProps, {}, "">;
|
|
9
3
|
type TableCheckboxIndicator = ReturnType<typeof TableCheckboxIndicator>;
|
|
10
4
|
export default TableCheckboxIndicator;
|
|
@@ -7,20 +7,23 @@
|
|
|
7
7
|
### Table.Column
|
|
8
8
|
|
|
9
9
|
Name: `Table.Column`
|
|
10
|
-
Description: Logical metadata wrapper for a header column. It does not render DOM and is used to register stable column identity, sorting capability, row-header semantics, and
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
10
|
+
Description: Logical metadata wrapper for a header column. It does not render DOM and is used to register stable column identity, sorting capability, row-header semantics, and width constraints.
|
|
11
|
+
|
|
12
|
+
Public prop type: `TableColumnProps`
|
|
13
|
+
|
|
14
|
+
| Prop | Type | Default | Description |
|
|
15
|
+
| --------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| `id` | `string` | `-` | Stable identifier for the column. |
|
|
17
|
+
| `allowsSorting` | `boolean` | `false` | Enables sorting for the wrapped header cell. |
|
|
18
|
+
| `isRowHeader` | `boolean` | `false` | Marks the associated body column as row-header cells. |
|
|
19
|
+
| `textValue` | `string` | `undefined` | Optional spoken label used by `Table.Root` sort announcements when it should differ from `id`. |
|
|
20
|
+
| `width` | `number \| \`${number}px\`` | `undefined` | Explicit column width hint. Px numbers are the first-class format for the current resize release. |
|
|
21
|
+
| `defaultWidth` | `number \| \`${number}px\`` | `undefined` | Uncontrolled initial width hint for the column. |
|
|
22
|
+
| `minWidth` | `number` | `undefined` | Minimum width in px enforced during resize interactions. |
|
|
23
|
+
| `maxWidth` | `number` | `undefined` | Maximum width in px enforced during resize interactions. |
|
|
24
|
+
| `children` | `Snippet` | `undefined` | Usually a single `Table.ColumnHeaderCell`. |
|
|
25
|
+
|
|
26
|
+
`Table.ColumnResizer` is the public resize opt-in. Compose it inside `Table.ColumnHeaderCell` when the owning column should be resizable.
|
|
24
27
|
|
|
25
28
|
### Context utilities
|
|
26
29
|
|
|
@@ -1,31 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
setTableColumnContext,
|
|
6
|
-
useTableContext,
|
|
7
|
-
useTableSectionContext,
|
|
8
|
-
type TableColumnWidth
|
|
9
|
-
} from '../root/context';
|
|
10
|
-
|
|
11
|
-
type TableColumnProps = {
|
|
12
|
-
id: string;
|
|
13
|
-
allowsSorting?: boolean;
|
|
14
|
-
/** @deprecated `Table.ColumnResizer` now enables resizing automatically. */
|
|
15
|
-
allowsResizing?: boolean;
|
|
16
|
-
isRowHeader?: boolean;
|
|
17
|
-
textValue?: string;
|
|
18
|
-
width?: TableColumnWidth;
|
|
19
|
-
defaultWidth?: TableColumnWidth;
|
|
20
|
-
minWidth?: number;
|
|
21
|
-
maxWidth?: number;
|
|
22
|
-
children?: Snippet;
|
|
23
|
-
};
|
|
3
|
+
import { setTableColumnContext, useTableContext, useTableSectionContext } from '../root/context';
|
|
4
|
+
import type { TableColumnProps } from '../types.js';
|
|
24
5
|
|
|
25
6
|
let {
|
|
26
7
|
id,
|
|
27
8
|
allowsSorting = false,
|
|
28
|
-
allowsResizing = false,
|
|
29
9
|
isRowHeader = false,
|
|
30
10
|
textValue,
|
|
31
11
|
width,
|
|
@@ -51,9 +31,6 @@
|
|
|
51
31
|
get allowsSorting() {
|
|
52
32
|
return allowsSorting;
|
|
53
33
|
},
|
|
54
|
-
get allowsResizing() {
|
|
55
|
-
return allowsResizing || table.isColumnResizable(id);
|
|
56
|
-
},
|
|
57
34
|
get isHidden() {
|
|
58
35
|
return table.isColumnHidden(id);
|
|
59
36
|
},
|
|
@@ -82,7 +59,6 @@
|
|
|
82
59
|
token,
|
|
83
60
|
id,
|
|
84
61
|
allowsSorting,
|
|
85
|
-
allowsResizing,
|
|
86
62
|
isRowHeader,
|
|
87
63
|
textValue,
|
|
88
64
|
width,
|
|
@@ -1,18 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import { type TableColumnWidth } from '../root/context';
|
|
3
|
-
type TableColumnProps = {
|
|
4
|
-
id: string;
|
|
5
|
-
allowsSorting?: boolean;
|
|
6
|
-
/** @deprecated `Table.ColumnResizer` now enables resizing automatically. */
|
|
7
|
-
allowsResizing?: boolean;
|
|
8
|
-
isRowHeader?: boolean;
|
|
9
|
-
textValue?: string;
|
|
10
|
-
width?: TableColumnWidth;
|
|
11
|
-
defaultWidth?: TableColumnWidth;
|
|
12
|
-
minWidth?: number;
|
|
13
|
-
maxWidth?: number;
|
|
14
|
-
children?: Snippet;
|
|
15
|
-
};
|
|
1
|
+
import type { TableColumnProps } from '../types.js';
|
|
16
2
|
declare const TableColumn: import("svelte").Component<TableColumnProps, {}, "">;
|
|
17
3
|
type TableColumn = ReturnType<typeof TableColumn>;
|
|
18
4
|
export default TableColumn;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.ColumnHeaderCell`
|
|
10
10
|
Description: Focusable header cell for a column. It participates in roving focus and toggles sorting when the wrapping `Table.Column` allows it.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableColumnHeaderCellProps`
|
|
13
|
+
|
|
12
14
|
- When a nested control like `Table.ColumnResizer` receives focus, the header exposes `data-focus-within` / `data-focus-visible-within` instead of remaining `data-focused`.
|
|
13
15
|
|
|
14
16
|
| Prop | Type | Default | Description |
|
|
@@ -1,23 +1,17 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
|
-
import type { Snippet } from 'svelte';
|
|
4
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
5
3
|
import {
|
|
6
4
|
setTableCellContext,
|
|
7
5
|
useTableColumnContext,
|
|
8
6
|
useTableContext,
|
|
9
7
|
useTableRowContext
|
|
10
8
|
} from '../root/context';
|
|
9
|
+
import type { TableColumnHeaderCellProps } from '../types.js';
|
|
11
10
|
import {
|
|
12
11
|
shouldShowFocusVisible,
|
|
13
12
|
trackInteractionModality
|
|
14
13
|
} from '../../primitives/input-modality';
|
|
15
14
|
|
|
16
|
-
type TableColumnHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
17
|
-
children?: Snippet;
|
|
18
|
-
class?: string;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
15
|
let { children, class: className = '', ...restProps }: TableColumnHeaderCellProps = $props();
|
|
22
16
|
|
|
23
17
|
const table = useTableContext();
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableColumnHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
4
|
-
children?: Snippet;
|
|
5
|
-
class?: string;
|
|
6
|
-
};
|
|
1
|
+
import type { TableColumnHeaderCellProps } from '../types.js';
|
|
7
2
|
declare const TableColumnHeaderCell: import("svelte").Component<TableColumnHeaderCellProps, {}, "">;
|
|
8
3
|
type TableColumnHeaderCell = ReturnType<typeof TableColumnHeaderCell>;
|
|
9
4
|
export default TableColumnHeaderCell;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.ColumnResizer`
|
|
10
10
|
Description: Interactive resize handle for the current `Table.Column`. It must be composed inside `Table.ColumnHeaderCell`, and it resizes the column that owns the surrounding `Table.Column` context.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableColumnResizerProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ----------- | --------- | ----------- | -------------------------------------------------------------------- |
|
|
14
16
|
| `step` | `number` | `16` | Keyboard resize delta in px for `ArrowLeft` / `ArrowRight`. |
|
|
@@ -20,7 +22,6 @@ Description: Interactive resize handle for the current `Table.Column`. It must b
|
|
|
20
22
|
|
|
21
23
|
- `Table.ColumnResizer` must be used inside `Table.ColumnHeaderCell`.
|
|
22
24
|
- Rendering `Table.ColumnResizer` inside `Table.ColumnHeaderCell` is enough to make the owning `Table.Column` resizable.
|
|
23
|
-
- `Table.Column.allowsResizing` is still accepted for backward compatibility, but it is no longer required.
|
|
24
25
|
- The handle resolves the active column from `Table.Column` context. It does not accept a separate `columnId` prop.
|
|
25
26
|
- Width state lives in `Table.Root` through `columnWidths` / `defaultColumnWidths`.
|
|
26
27
|
- Pointer resizing uses Pointer Events, so mouse, touch, and pen interactions share the same behavior.
|
|
@@ -1,20 +1,12 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
|
-
import type { Snippet } from 'svelte';
|
|
4
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
5
3
|
import { getTableCellContext, useTableColumnContext, useTableContext } from '../root/context';
|
|
4
|
+
import type { TableColumnResizerProps } from '../types.js';
|
|
6
5
|
import {
|
|
7
6
|
shouldShowFocusVisible,
|
|
8
7
|
trackInteractionModality
|
|
9
8
|
} from '../../primitives/input-modality';
|
|
10
9
|
|
|
11
|
-
type TableColumnResizerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
12
|
-
step?: number;
|
|
13
|
-
shiftStep?: number;
|
|
14
|
-
children?: Snippet;
|
|
15
|
-
class?: string;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
10
|
let {
|
|
19
11
|
step = 16,
|
|
20
12
|
shiftStep = 48,
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableColumnResizerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
4
|
-
step?: number;
|
|
5
|
-
shiftStep?: number;
|
|
6
|
-
children?: Snippet;
|
|
7
|
-
class?: string;
|
|
8
|
-
};
|
|
1
|
+
import type { TableColumnResizerProps } from '../types.js';
|
|
9
2
|
declare const TableColumnResizer: import("svelte").Component<TableColumnResizerProps, {}, "">;
|
|
10
3
|
type TableColumnResizer = ReturnType<typeof TableColumnResizer>;
|
|
11
4
|
export default TableColumnResizer;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.EmptyState`
|
|
10
10
|
Description: Convenience part for rendering a semantic empty row inside `Table.Body` when no data rows are registered.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableEmptyStateProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ---------- | --------- | ----------- | ------------------------------------------------------- |
|
|
14
16
|
| `class` | `string` | `''` | Class names for the generated empty row. |
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
2
|
import { useTableContext, useTableSectionContext } from '../root/context';
|
|
4
|
-
|
|
5
|
-
type TableEmptyStateProps = {
|
|
6
|
-
children?: Snippet;
|
|
7
|
-
class?: string;
|
|
8
|
-
};
|
|
3
|
+
import type { TableEmptyStateProps } from '../types.js';
|
|
9
4
|
|
|
10
5
|
let { children, class: className = '' }: TableEmptyStateProps = $props();
|
|
11
6
|
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
type TableEmptyStateProps = {
|
|
3
|
-
children?: Snippet;
|
|
4
|
-
class?: string;
|
|
5
|
-
};
|
|
1
|
+
import type { TableEmptyStateProps } from '../types.js';
|
|
6
2
|
declare const TableEmptyState: import("svelte").Component<TableEmptyStateProps, {}, "">;
|
|
7
3
|
type TableEmptyState = ReturnType<typeof TableEmptyState>;
|
|
8
4
|
export default TableEmptyState;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.Footer`
|
|
10
10
|
Description: Footer rowgroup for summary rows or aggregate information. In v1 it is semantic only and excluded from keyboard navigation.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableFooterProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ---------- | --------- | ----------- | ------------------------------------ |
|
|
14
16
|
| `class` | `string` | `''` | Class names for the `tfoot` element. |
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
2
|
import { setTableSectionContext } from '../root/context';
|
|
5
|
-
|
|
6
|
-
type TableFooterProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
7
|
-
children?: Snippet;
|
|
8
|
-
class?: string;
|
|
9
|
-
};
|
|
3
|
+
import type { TableFooterProps } from '../types.js';
|
|
10
4
|
|
|
11
5
|
let { children, class: className = '', ...restProps }: TableFooterProps = $props();
|
|
12
6
|
setTableSectionContext({ section: 'footer' });
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableFooterProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
4
|
-
children?: Snippet;
|
|
5
|
-
class?: string;
|
|
6
|
-
};
|
|
1
|
+
import type { TableFooterProps } from '../types.js';
|
|
7
2
|
declare const TableFooter: import("svelte").Component<TableFooterProps, {}, "">;
|
|
8
3
|
type TableFooter = ReturnType<typeof TableFooter>;
|
|
9
4
|
export default TableFooter;
|
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.Header`
|
|
10
10
|
Description: Header rowgroup for a `Table`, typically containing a single row of sortable or static column headers.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableHeaderProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ---------- | --------- | ----------- | ------------------------------------ |
|
|
14
16
|
| `class` | `string` | `''` | Class names for the `thead` element. |
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
2
|
import { setTableSectionContext } from '../root/context';
|
|
5
|
-
|
|
6
|
-
type TableHeaderProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
7
|
-
children?: Snippet;
|
|
8
|
-
class?: string;
|
|
9
|
-
};
|
|
3
|
+
import type { TableHeaderProps } from '../types.js';
|
|
10
4
|
|
|
11
5
|
let { children, class: className = '', ...restProps }: TableHeaderProps = $props();
|
|
12
6
|
setTableSectionContext({ section: 'header' });
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type TableHeaderProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
4
|
-
children?: Snippet;
|
|
5
|
-
class?: string;
|
|
6
|
-
};
|
|
1
|
+
import type { TableHeaderProps } from '../types.js';
|
|
7
2
|
declare const TableHeader: import("svelte").Component<TableHeaderProps, {}, "">;
|
|
8
3
|
type TableHeader = ReturnType<typeof TableHeader>;
|
|
9
4
|
export default TableHeader;
|
package/dist/table/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export * as Table from './index.parts.js';
|
|
2
|
+
export type { TableBodyProps, TableCellProps, TableCheckboxIndicatorProps, TableCheckboxProps, TableColumnHeaderCellProps, TableColumnProps, TableColumnResizerProps, TableEmptyStateProps, TableFooterProps, TableHeaderProps, TableRowProps, TableRootProps } from './types.js';
|
|
2
3
|
export { default as TableRoot } from './root/table-root.svelte';
|
|
3
4
|
export { default as TableColumn } from './column/table-column.svelte';
|
|
4
5
|
export { default as TableHeader } from './header/table-header.svelte';
|
|
@@ -11,6 +12,6 @@ export { default as TableColumnResizer } from './column-resizer/table-column-res
|
|
|
11
12
|
export { default as TableCheckbox } from './checkbox/table-checkbox.svelte';
|
|
12
13
|
export { default as TableCheckboxIndicator } from './checkbox-indicator/table-checkbox-indicator.svelte';
|
|
13
14
|
export { default as TableCell } from './cell/table-cell.svelte';
|
|
14
|
-
export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableDisabledBehavior, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableRowActionHandler, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type
|
|
15
|
+
export { createTableContext, getTableContext, setTableContext, useTableContext, getTableSectionContext, setTableSectionContext, useTableSectionContext, getTableRowContext, setTableRowContext, useTableRowContext, getTableColumnContext, setTableColumnContext, useTableColumnContext, type TableContext, type TableDisabledBehavior, type TableSelectionBehavior, type TableSelectionCheckboxState, type TableSelectionKey, type TableSelectionMode, type TableRowActionHandler, type TableSortDirection, type TableSortDescriptor, type TableColumnWidth, type TableGridCoord, type TableSectionKind, type TableSectionContext, type TableRowContext, type TableColumnContext, type CreateTableContextOptions } from './root/context.js';
|
|
15
16
|
import * as TableParts from './index.parts.js';
|
|
16
17
|
export default TableParts;
|
|
@@ -9,26 +9,36 @@
|
|
|
9
9
|
Name: `Table.Root`
|
|
10
10
|
Description: State container for interactive table behavior, including roving focus, row selection, disabled row handling, and sortable column state.
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
| `
|
|
17
|
-
| `
|
|
18
|
-
| `
|
|
19
|
-
| `
|
|
20
|
-
| `
|
|
21
|
-
| `
|
|
22
|
-
| `
|
|
23
|
-
| `
|
|
24
|
-
| `
|
|
25
|
-
| `
|
|
26
|
-
| `
|
|
27
|
-
| `
|
|
28
|
-
| `
|
|
29
|
-
| `
|
|
30
|
-
| `
|
|
31
|
-
| `
|
|
12
|
+
Public prop type: `TableRootProps`
|
|
13
|
+
|
|
14
|
+
| Prop | Type | Default | Description |
|
|
15
|
+
| ------------------------ | ------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
16
|
+
| `selectionMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | Controls row selection behavior. |
|
|
17
|
+
| `selectionBehavior` | `'toggle' \| 'replace'` | `'toggle'` | `toggle` uses checkbox-style selection. `replace` makes click replace selection, vertical arrows move selection, and `Shift+ArrowUp/Down` extend it. |
|
|
18
|
+
| `disabledBehavior` | `'selection' \| 'all'` | `'all'` | Controls whether disabled rows only block selection or block both selection and row actions. |
|
|
19
|
+
| `disallowEmptySelection` | `boolean` | `false` | Prevents the internal selection state from becoming empty when selection is enabled. |
|
|
20
|
+
| `hiddenColumns` | `Iterable<string>` | `undefined` | Controlled hidden column ids. Supports `bind:hiddenColumns`. |
|
|
21
|
+
| `defaultHiddenColumns` | `Iterable<string>` | `undefined` | Initial hidden column ids for uncontrolled usage. |
|
|
22
|
+
| `selectedKeys` | `Iterable<string \| number>` | `undefined` | Controlled selected row ids. Supports `bind:selectedKeys`. |
|
|
23
|
+
| `defaultSelectedKeys` | `Iterable<string \| number>` | `undefined` | Initial selected row ids for uncontrolled usage. When `selectionMode` later becomes `none`, the internal selection is cleared. |
|
|
24
|
+
| `sortDescriptor` | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Controlled sort state. Supports `bind:sortDescriptor`. Setting it back to `undefined` clears the sort. |
|
|
25
|
+
| `defaultSortDescriptor` | `{ column: string; direction: 'ascending' \| 'descending' }` | `undefined` | Initial sort state for uncontrolled usage. |
|
|
26
|
+
| `columnWidths` | `Map<string, number>` | `undefined` | Controlled column width state in px. Supports `bind:columnWidths`. |
|
|
27
|
+
| `defaultColumnWidths` | `Iterable<[string, number]>` | `undefined` | Initial uncontrolled column widths in px. |
|
|
28
|
+
| `disabledKeys` | `Iterable<string \| number>` | `undefined` | Row ids that should be non-selectable. |
|
|
29
|
+
| `onRowAction` | `(id: string \| number) => void` | `undefined` | Called when a row action is triggered for an actionable row. |
|
|
30
|
+
| `onSelectionChange` | `(keys: Set<string \| number>) => void` | `undefined` | Called when row selection changes. |
|
|
31
|
+
| `onSortChange` | `(descriptor) => void` | `undefined` | Called when sortable header state changes. |
|
|
32
|
+
| `onColumnWidthsChange` | `(widths: Map<string, number>) => void` | `undefined` | Called when resize interactions update column widths. |
|
|
33
|
+
| `onHiddenColumnsChange` | `(columnIds: string[]) => void` | `undefined` | Called when hidden column state changes. |
|
|
34
|
+
| `onColumnResizeStart` | `(columnId: string) => void` | `undefined` | Called when a column resize drag starts. |
|
|
35
|
+
| `onColumnResizeEnd` | `(widths: Map<string, number>) => void` | `undefined` | Called when a column resize drag ends. |
|
|
36
|
+
| `aria-label` | `string` | `undefined` | Accessible name when no external label is present. |
|
|
37
|
+
| `aria-labelledby` | `string` | `undefined` | Id reference for an external label. |
|
|
38
|
+
| `class` | `string` | `''` | Class names for the root table element. |
|
|
39
|
+
| `context` | `TableContext` | `undefined` | Bindable reference to the active internal table context instance. |
|
|
40
|
+
| `element` | `HTMLTableElement` | `undefined` | Bindable reference to the rendered table element. |
|
|
41
|
+
| `children` | `Snippet` | `undefined` | Composed table parts. |
|
|
32
42
|
|
|
33
43
|
### Behavior notes
|
|
34
44
|
|
|
@@ -41,7 +51,7 @@ Description: Current v1 interaction constraints that affect consumer expectation
|
|
|
41
51
|
| Text selection and copy | Browser-native text selection and `Ctrl+C` behavior are preserved; the component does not implement custom clipboard logic. |
|
|
42
52
|
| `replace` mode blur | Clicking or tabbing outside the table clears focus state but does not clear row selection. |
|
|
43
53
|
| Sort announcements | Sort changes are mirrored into a polite live region. Use `Table.Column.textValue` when the announced label should differ from the column `id`. |
|
|
44
|
-
| Column resizing | Width state is normalized to px values and a
|
|
54
|
+
| Column resizing | Width state is normalized to px values and a `Table.ColumnResizer` only affects the `Table.Column` it is composed within. |
|
|
45
55
|
| Row edge focus | In body rows, `ArrowLeft` before the first cell and `ArrowRight` after the last cell move focus onto the row itself; `ArrowUp` / `ArrowDown` keep that row-edge focus aligned across rows, repeating the same horizontal arrow loops back into the opposite edge cell, and `Home` / `End` jump to the first or last focusable body row while row focus is active. |
|
|
46
56
|
|
|
47
57
|
### Context utilities
|
|
@@ -23,11 +23,10 @@ export type TableGridCoord = {
|
|
|
23
23
|
col: number;
|
|
24
24
|
};
|
|
25
25
|
export type TableRowFocusEdge = 'start' | 'end';
|
|
26
|
-
|
|
26
|
+
type TableColumnMetadata = {
|
|
27
27
|
token: string;
|
|
28
28
|
id: string;
|
|
29
29
|
allowsSorting: boolean;
|
|
30
|
-
allowsResizing: boolean;
|
|
31
30
|
isRowHeader: boolean;
|
|
32
31
|
textValue?: string;
|
|
33
32
|
width?: TableColumnWidth;
|
|
@@ -88,13 +87,13 @@ export type TableContext = {
|
|
|
88
87
|
focusVisible: boolean;
|
|
89
88
|
sortDescriptor: TableSortDescriptor | undefined;
|
|
90
89
|
resizingColumnId: string | null;
|
|
91
|
-
registerColumn: (column:
|
|
90
|
+
registerColumn: (column: TableColumnMetadata) => void;
|
|
92
91
|
unregisterColumn: (token: string) => void;
|
|
93
92
|
registerColumnResizer: (columnToken: string) => void;
|
|
94
93
|
unregisterColumnResizer: (columnToken: string) => void;
|
|
95
94
|
getColumnCount: () => number;
|
|
96
95
|
getVisibleColumnCount: () => number;
|
|
97
|
-
getColumnAt: (index: number) =>
|
|
96
|
+
getColumnAt: (index: number) => TableColumnMetadata | undefined;
|
|
98
97
|
getColumnIndexByToken: (token: string) => number;
|
|
99
98
|
getVisibleColumnIndexByToken: (token: string) => number;
|
|
100
99
|
getColumnTextValue: (columnId: string) => string | undefined;
|
|
@@ -178,7 +177,6 @@ export type TableColumnContext = {
|
|
|
178
177
|
token: string;
|
|
179
178
|
id: string;
|
|
180
179
|
allowsSorting: boolean;
|
|
181
|
-
allowsResizing: boolean;
|
|
182
180
|
isHidden: boolean;
|
|
183
181
|
isRowHeader: boolean;
|
|
184
182
|
textValue?: string;
|
|
@@ -143,7 +143,7 @@ export function createTableContext(options = {}) {
|
|
|
143
143
|
for (const column of columns.values()) {
|
|
144
144
|
if (isColumnHidden(column.id))
|
|
145
145
|
continue;
|
|
146
|
-
if (
|
|
146
|
+
if (columnsWithResizers.has(column.token))
|
|
147
147
|
return true;
|
|
148
148
|
}
|
|
149
149
|
return false;
|
|
@@ -159,11 +159,10 @@ export function createTableContext(options = {}) {
|
|
|
159
159
|
return;
|
|
160
160
|
notifyLayout();
|
|
161
161
|
}
|
|
162
|
-
function
|
|
162
|
+
function sameColumnMetadata(left, right) {
|
|
163
163
|
return (left.token === right.token &&
|
|
164
164
|
left.id === right.id &&
|
|
165
165
|
left.allowsSorting === right.allowsSorting &&
|
|
166
|
-
left.allowsResizing === right.allowsResizing &&
|
|
167
166
|
left.isRowHeader === right.isRowHeader &&
|
|
168
167
|
left.textValue === right.textValue &&
|
|
169
168
|
left.width === right.width &&
|
|
@@ -190,7 +189,7 @@ export function createTableContext(options = {}) {
|
|
|
190
189
|
function registerColumn(column) {
|
|
191
190
|
const existing = columns.get(column.token);
|
|
192
191
|
const alreadyOrdered = columnOrder.includes(column.token);
|
|
193
|
-
if (existing &&
|
|
192
|
+
if (existing && sameColumnMetadata(existing, column) && alreadyOrdered)
|
|
194
193
|
return;
|
|
195
194
|
if (existing && existing.id !== column.id && columnIds.get(existing.id) === column.token) {
|
|
196
195
|
columnIds.delete(existing.id);
|
|
@@ -288,7 +287,7 @@ export function createTableContext(options = {}) {
|
|
|
288
287
|
return false;
|
|
289
288
|
if (isColumnHidden(columnId))
|
|
290
289
|
return false;
|
|
291
|
-
return
|
|
290
|
+
return columnsWithResizers.has(column.token);
|
|
292
291
|
}
|
|
293
292
|
function getColumnWidths() {
|
|
294
293
|
if (columnWidthsCache)
|
|
@@ -12,50 +12,17 @@
|
|
|
12
12
|
|
|
13
13
|
<script lang="ts">
|
|
14
14
|
import { tick } from 'svelte';
|
|
15
|
-
import
|
|
16
|
-
|
|
15
|
+
import {
|
|
16
|
+
shouldShowFocusVisible,
|
|
17
|
+
trackInteractionModality
|
|
18
|
+
} from '../../primitives/input-modality';
|
|
19
|
+
import type { TableRootProps } from '../types.js';
|
|
17
20
|
import {
|
|
18
21
|
createTableContext,
|
|
19
22
|
setTableContext,
|
|
20
|
-
type TableDisabledBehavior,
|
|
21
|
-
type TableRowActionHandler,
|
|
22
|
-
type TableContext,
|
|
23
|
-
type TableSelectionBehavior,
|
|
24
23
|
type TableSelectionKey,
|
|
25
|
-
type TableSelectionMode,
|
|
26
24
|
type TableSortDescriptor
|
|
27
25
|
} from './context';
|
|
28
|
-
import {
|
|
29
|
-
shouldShowFocusVisible,
|
|
30
|
-
trackInteractionModality
|
|
31
|
-
} from '../../primitives/input-modality';
|
|
32
|
-
|
|
33
|
-
type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
|
|
34
|
-
selectionMode?: TableSelectionMode;
|
|
35
|
-
selectionBehavior?: TableSelectionBehavior;
|
|
36
|
-
disabledBehavior?: TableDisabledBehavior;
|
|
37
|
-
disallowEmptySelection?: boolean;
|
|
38
|
-
hiddenColumns?: Iterable<string>;
|
|
39
|
-
defaultHiddenColumns?: Iterable<string>;
|
|
40
|
-
selectedKeys?: Iterable<TableSelectionKey>;
|
|
41
|
-
defaultSelectedKeys?: Iterable<TableSelectionKey>;
|
|
42
|
-
sortDescriptor?: TableSortDescriptor;
|
|
43
|
-
defaultSortDescriptor?: TableSortDescriptor;
|
|
44
|
-
columnWidths?: Map<string, number>;
|
|
45
|
-
defaultColumnWidths?: Iterable<readonly [string, number]>;
|
|
46
|
-
disabledKeys?: Iterable<TableSelectionKey>;
|
|
47
|
-
onRowAction?: TableRowActionHandler;
|
|
48
|
-
onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
|
|
49
|
-
onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
|
|
50
|
-
onColumnWidthsChange?: (widths: Map<string, number>) => void;
|
|
51
|
-
onHiddenColumnsChange?: (columnIds: string[]) => void;
|
|
52
|
-
onColumnResizeStart?: (columnId: string) => void;
|
|
53
|
-
onColumnResizeEnd?: (widths: Map<string, number>) => void;
|
|
54
|
-
children?: Snippet;
|
|
55
|
-
class?: string;
|
|
56
|
-
context?: TableContext;
|
|
57
|
-
element?: HTMLTableElement;
|
|
58
|
-
};
|
|
59
26
|
|
|
60
27
|
let {
|
|
61
28
|
selectionMode = 'none',
|
|
@@ -1,32 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
import { type TableDisabledBehavior, type TableRowActionHandler, type TableContext, type TableSelectionBehavior, type TableSelectionKey, type TableSelectionMode, type TableSortDescriptor } from './context';
|
|
4
|
-
type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
|
|
5
|
-
selectionMode?: TableSelectionMode;
|
|
6
|
-
selectionBehavior?: TableSelectionBehavior;
|
|
7
|
-
disabledBehavior?: TableDisabledBehavior;
|
|
8
|
-
disallowEmptySelection?: boolean;
|
|
9
|
-
hiddenColumns?: Iterable<string>;
|
|
10
|
-
defaultHiddenColumns?: Iterable<string>;
|
|
11
|
-
selectedKeys?: Iterable<TableSelectionKey>;
|
|
12
|
-
defaultSelectedKeys?: Iterable<TableSelectionKey>;
|
|
13
|
-
sortDescriptor?: TableSortDescriptor;
|
|
14
|
-
defaultSortDescriptor?: TableSortDescriptor;
|
|
15
|
-
columnWidths?: Map<string, number>;
|
|
16
|
-
defaultColumnWidths?: Iterable<readonly [string, number]>;
|
|
17
|
-
disabledKeys?: Iterable<TableSelectionKey>;
|
|
18
|
-
onRowAction?: TableRowActionHandler;
|
|
19
|
-
onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
|
|
20
|
-
onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
|
|
21
|
-
onColumnWidthsChange?: (widths: Map<string, number>) => void;
|
|
22
|
-
onHiddenColumnsChange?: (columnIds: string[]) => void;
|
|
23
|
-
onColumnResizeStart?: (columnId: string) => void;
|
|
24
|
-
onColumnResizeEnd?: (widths: Map<string, number>) => void;
|
|
25
|
-
children?: Snippet;
|
|
26
|
-
class?: string;
|
|
27
|
-
context?: TableContext;
|
|
28
|
-
element?: HTMLTableElement;
|
|
29
|
-
};
|
|
1
|
+
import type { TableRootProps } from '../types.js';
|
|
30
2
|
declare const TableRoot: import("svelte").Component<TableRootProps, {}, "element" | "context" | "hiddenColumns" | "selectedKeys" | "sortDescriptor" | "columnWidths">;
|
|
31
3
|
type TableRoot = ReturnType<typeof TableRoot>;
|
|
32
4
|
export default TableRoot;
|
package/dist/table/row/README.md
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
Name: `Table.Row`
|
|
10
10
|
Description: Semantic table row part used in the header, body, or footer. In body scope it reflects row focus, selection, and disabled state.
|
|
11
11
|
|
|
12
|
+
Public prop type: `TableRowProps`
|
|
13
|
+
|
|
12
14
|
| Prop | Type | Default | Description |
|
|
13
15
|
| ------------ | ------------------ | ----------- | --------------------------------------------------------------- |
|
|
14
16
|
| `id` | `string \| number` | `undefined` | Stable row identifier used for selection state in `Table.Body`. |
|
|
@@ -2,28 +2,14 @@
|
|
|
2
2
|
import { onDestroy } from 'svelte';
|
|
3
3
|
import { SvelteMap } from 'svelte/reactivity';
|
|
4
4
|
import { writable } from 'svelte/store';
|
|
5
|
-
import
|
|
6
|
-
import type {
|
|
7
|
-
import {
|
|
8
|
-
setTableRowContext,
|
|
9
|
-
useTableContext,
|
|
10
|
-
useTableSectionContext,
|
|
11
|
-
type TableSelectionKey
|
|
12
|
-
} from '../root/context';
|
|
5
|
+
import { setTableRowContext, useTableContext, useTableSectionContext } from '../root/context';
|
|
6
|
+
import type { TableRowProps } from '../types.js';
|
|
13
7
|
import {
|
|
14
8
|
shouldShowFocusVisible,
|
|
15
9
|
trackInteractionModality
|
|
16
10
|
} from '../../primitives/input-modality';
|
|
17
11
|
import { handleTableBodyKeydown } from '../utils/handle-body-keydown';
|
|
18
12
|
|
|
19
|
-
type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
|
|
20
|
-
id?: TableSelectionKey;
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
textValue?: string;
|
|
23
|
-
children?: Snippet;
|
|
24
|
-
class?: string;
|
|
25
|
-
};
|
|
26
|
-
|
|
27
13
|
let {
|
|
28
14
|
id,
|
|
29
15
|
isDisabled = false,
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
import { type TableSelectionKey } from '../root/context';
|
|
4
|
-
type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
|
|
5
|
-
id?: TableSelectionKey;
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
textValue?: string;
|
|
8
|
-
children?: Snippet;
|
|
9
|
-
class?: string;
|
|
10
|
-
};
|
|
1
|
+
import type { TableRowProps } from '../types.js';
|
|
11
2
|
declare const TableRow: import("svelte").Component<TableRowProps, {}, "">;
|
|
12
3
|
type TableRow = ReturnType<typeof TableRow>;
|
|
13
4
|
export default TableRow;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { TableColumnWidth, TableContext, TableDisabledBehavior, TableRowActionHandler, TableSelectionBehavior, TableSelectionKey, TableSelectionMode, TableSortDescriptor } from './root/context.js';
|
|
4
|
+
export type TableColumnProps = {
|
|
5
|
+
id: string;
|
|
6
|
+
allowsSorting?: boolean;
|
|
7
|
+
isRowHeader?: boolean;
|
|
8
|
+
textValue?: string;
|
|
9
|
+
width?: TableColumnWidth;
|
|
10
|
+
defaultWidth?: TableColumnWidth;
|
|
11
|
+
minWidth?: number;
|
|
12
|
+
maxWidth?: number;
|
|
13
|
+
children?: Snippet;
|
|
14
|
+
};
|
|
15
|
+
export type TableHeaderProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
16
|
+
children?: Snippet;
|
|
17
|
+
class?: string;
|
|
18
|
+
};
|
|
19
|
+
export type TableBodyProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
20
|
+
children?: Snippet;
|
|
21
|
+
class?: string;
|
|
22
|
+
};
|
|
23
|
+
export type TableFooterProps = Omit<HTMLAttributes<HTMLTableSectionElement>, 'children'> & {
|
|
24
|
+
children?: Snippet;
|
|
25
|
+
class?: string;
|
|
26
|
+
};
|
|
27
|
+
export type TableRootProps = Omit<HTMLAttributes<HTMLTableElement>, 'children'> & {
|
|
28
|
+
selectionMode?: TableSelectionMode;
|
|
29
|
+
selectionBehavior?: TableSelectionBehavior;
|
|
30
|
+
disabledBehavior?: TableDisabledBehavior;
|
|
31
|
+
disallowEmptySelection?: boolean;
|
|
32
|
+
hiddenColumns?: Iterable<string>;
|
|
33
|
+
defaultHiddenColumns?: Iterable<string>;
|
|
34
|
+
selectedKeys?: Iterable<TableSelectionKey>;
|
|
35
|
+
defaultSelectedKeys?: Iterable<TableSelectionKey>;
|
|
36
|
+
sortDescriptor?: TableSortDescriptor;
|
|
37
|
+
defaultSortDescriptor?: TableSortDescriptor;
|
|
38
|
+
columnWidths?: Map<string, number>;
|
|
39
|
+
defaultColumnWidths?: Iterable<readonly [string, number]>;
|
|
40
|
+
disabledKeys?: Iterable<TableSelectionKey>;
|
|
41
|
+
onRowAction?: TableRowActionHandler;
|
|
42
|
+
onSelectionChange?: (keys: Set<TableSelectionKey>) => void;
|
|
43
|
+
onSortChange?: (descriptor: TableSortDescriptor | undefined) => void;
|
|
44
|
+
onColumnWidthsChange?: (widths: Map<string, number>) => void;
|
|
45
|
+
onHiddenColumnsChange?: (columnIds: string[]) => void;
|
|
46
|
+
onColumnResizeStart?: (columnId: string) => void;
|
|
47
|
+
onColumnResizeEnd?: (widths: Map<string, number>) => void;
|
|
48
|
+
children?: Snippet;
|
|
49
|
+
class?: string;
|
|
50
|
+
context?: TableContext;
|
|
51
|
+
element?: HTMLTableElement;
|
|
52
|
+
};
|
|
53
|
+
export type TableRowProps = Omit<HTMLAttributes<HTMLTableRowElement>, 'children' | 'id'> & {
|
|
54
|
+
id?: TableSelectionKey;
|
|
55
|
+
isDisabled?: boolean;
|
|
56
|
+
textValue?: string;
|
|
57
|
+
children?: Snippet;
|
|
58
|
+
class?: string;
|
|
59
|
+
};
|
|
60
|
+
export type TableColumnHeaderCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
61
|
+
children?: Snippet;
|
|
62
|
+
class?: string;
|
|
63
|
+
};
|
|
64
|
+
export type TableColumnResizerProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
65
|
+
step?: number;
|
|
66
|
+
shiftStep?: number;
|
|
67
|
+
children?: Snippet;
|
|
68
|
+
class?: string;
|
|
69
|
+
};
|
|
70
|
+
export type TableCellProps = Omit<HTMLAttributes<HTMLTableCellElement>, 'children'> & {
|
|
71
|
+
children?: Snippet;
|
|
72
|
+
class?: string;
|
|
73
|
+
};
|
|
74
|
+
export type TableEmptyStateProps = {
|
|
75
|
+
children?: Snippet;
|
|
76
|
+
class?: string;
|
|
77
|
+
};
|
|
78
|
+
export type TableCheckboxProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex' | 'aria-checked' | 'aria-disabled' | 'onclick' | 'onkeydown'> & {
|
|
79
|
+
id?: string;
|
|
80
|
+
title?: string;
|
|
81
|
+
children?: Snippet;
|
|
82
|
+
class?: string;
|
|
83
|
+
'aria-label'?: string;
|
|
84
|
+
'aria-labelledby'?: string;
|
|
85
|
+
};
|
|
86
|
+
export type TableCheckboxIndicatorProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'class'> & {
|
|
87
|
+
keepMounted?: boolean;
|
|
88
|
+
children?: Snippet;
|
|
89
|
+
class?: string;
|
|
90
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|