@synthaxai/ui 1.0.0 → 1.1.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/LICENSE +9 -0
- package/README.md +40 -220
- package/dist/data-display/DataTable/DataTable.svelte +14 -8
- package/dist/data-display/DataTable/DataTable.svelte.d.ts +64 -61
- package/dist/data-display/DataTable/DataTable.svelte.d.ts.map +1 -1
- package/dist/forms/DatePicker/DatePicker.svelte +1564 -0
- package/dist/forms/DatePicker/DatePicker.svelte.d.ts +129 -0
- package/dist/forms/DatePicker/DatePicker.svelte.d.ts.map +1 -0
- package/dist/forms/DatePicker/index.d.ts +8 -0
- package/dist/forms/DatePicker/index.d.ts.map +1 -0
- package/dist/forms/DatePicker/index.js +7 -0
- package/dist/forms/MultiSelect/MultiSelect.svelte +1651 -0
- package/dist/forms/MultiSelect/MultiSelect.svelte.d.ts +127 -0
- package/dist/forms/MultiSelect/MultiSelect.svelte.d.ts.map +1 -0
- package/dist/forms/MultiSelect/index.d.ts +9 -0
- package/dist/forms/MultiSelect/index.d.ts.map +1 -0
- package/dist/forms/MultiSelect/index.js +7 -0
- package/dist/forms/SearchInput/SearchInput.svelte +1319 -0
- package/dist/forms/SearchInput/SearchInput.svelte.d.ts +148 -0
- package/dist/forms/SearchInput/SearchInput.svelte.d.ts.map +1 -0
- package/dist/forms/SearchInput/index.d.ts +9 -0
- package/dist/forms/SearchInput/index.d.ts.map +1 -0
- package/dist/forms/SearchInput/index.js +7 -0
- package/dist/forms/TextInput/TextInput.svelte +763 -122
- package/dist/forms/TextInput/TextInput.svelte.d.ts +98 -13
- package/dist/forms/TextInput/TextInput.svelte.d.ts.map +1 -1
- package/dist/forms/TextInput/index.d.ts +7 -1
- package/dist/forms/TextInput/index.d.ts.map +1 -1
- package/dist/forms/TextInput/index.js +7 -1
- package/dist/forms/index.d.ts +3 -0
- package/dist/forms/index.d.ts.map +1 -1
- package/dist/forms/index.js +3 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -1
- package/package.json +3 -3
package/LICENSE
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
Copyright (c) 2024-present SYNTHAX AI LTD
|
|
2
|
+
|
|
3
|
+
All rights reserved.
|
|
4
|
+
|
|
5
|
+
This software is proprietary and confidential. No part of this software may be
|
|
6
|
+
reproduced, distributed, or transmitted in any form or by any means without the
|
|
7
|
+
prior written permission of SYNTHAX AI LTD.
|
|
8
|
+
|
|
9
|
+
For licensing inquiries, contact: https://synthax.ai
|
package/README.md
CHANGED
|
@@ -1,262 +1,82 @@
|
|
|
1
|
-
# @synthaxai/ui
|
|
1
|
+
# @synthaxai/ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A production-quality Svelte 5 component library built for healthcare applications.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
- **23 Components** — Comprehensive set of UI components for healthcare apps
|
|
8
|
-
- **Svelte 5** — Built with modern runes and snippets
|
|
9
|
-
- **TypeScript** — Full type definitions for all components
|
|
10
|
-
- **Accessible** — WCAG 2.1 AA compliant with screen reader support
|
|
11
|
-
- **Dark Mode** — Automatic theme support via CSS variables
|
|
12
|
-
- **Healthcare-Ready** — Designed for critical healthcare application requirements
|
|
13
|
-
- **463 Tests** — Comprehensive unit tests with Vitest
|
|
14
|
-
- **E2E Testing Ready** — All components support `testId` prop for Playwright/Cypress
|
|
15
|
-
- **Focus Management** — Proper focus restoration for modals and dialogs
|
|
16
|
-
- **Reduced Motion** — Respects `prefers-reduced-motion` user preference
|
|
17
|
-
|
|
18
|
-
## Components
|
|
19
|
-
|
|
20
|
-
### Primitives
|
|
21
|
-
- **Button** — Multi-variant with loading states and icon-only mode
|
|
22
|
-
- **Badge** — Status indicators with semantic colors
|
|
23
|
-
|
|
24
|
-
### Forms
|
|
25
|
-
- **TextInput** — Text, email, password, tel input with validation
|
|
26
|
-
- **Textarea** — Multi-line input for clinical notes with auto-resize
|
|
27
|
-
- **Select** — Dropdown with grouped options support
|
|
28
|
-
- **Checkbox** — Accessible checkbox with indeterminate state
|
|
29
|
-
- **RadioGroup** — Accessible radio group with descriptions
|
|
30
|
-
- **FormField** — Wrapper for consistent form layouts
|
|
31
|
-
|
|
32
|
-
### Feedback
|
|
33
|
-
- **Alert** — Inline/banner alerts with clinical type support
|
|
34
|
-
- **Toast** — Temporary notifications
|
|
35
|
-
- **Spinner** — Loading indicators
|
|
36
|
-
- **ProgressBar** — Determinate and indeterminate progress
|
|
37
|
-
- **Skeleton** — Loading placeholders with shimmer/pulse animations
|
|
38
|
-
- **EmptyState** — Empty data placeholders
|
|
39
|
-
|
|
40
|
-
### Layout
|
|
41
|
-
- **Card** — Glass morphism cards with header/footer slots
|
|
42
|
-
- **Container** — Responsive content containers
|
|
43
|
-
|
|
44
|
-
### Data Display
|
|
45
|
-
- **StatCard** — Dashboard statistics with trends
|
|
46
|
-
- **DataTable** — Sortable tables with mobile-responsive design
|
|
5
|
+
**[synthax.ai](https://synthax.ai)** — AI Agents for Healthcare
|
|
47
6
|
|
|
48
|
-
|
|
49
|
-
- **StepIndicator** — Multi-step workflow progress
|
|
50
|
-
|
|
51
|
-
### Dialogs
|
|
52
|
-
- **Modal** — Accessible modal with focus trap
|
|
53
|
-
- **ConfirmDialog** — Confirmation dialogs for critical actions
|
|
54
|
-
|
|
55
|
-
## Structure
|
|
56
|
-
|
|
57
|
-
```
|
|
58
|
-
src/
|
|
59
|
-
├── index.ts # Main exports
|
|
60
|
-
├── types/ # TypeScript type definitions
|
|
61
|
-
├── utils/ # Utility functions (cn, keyboard, a11y)
|
|
62
|
-
├── styles/ # Design tokens CSS
|
|
63
|
-
├── primitives/ # Button, Badge
|
|
64
|
-
├── forms/ # TextInput, Textarea, Select, Checkbox, RadioGroup, FormField
|
|
65
|
-
├── feedback/ # Alert, Toast, Spinner, ProgressBar, Skeleton, EmptyState
|
|
66
|
-
├── layout/ # Card, Container
|
|
67
|
-
├── data-display/ # StatCard, DataTable
|
|
68
|
-
├── navigation/ # StepIndicator
|
|
69
|
-
└── dialogs/ # Modal, ConfirmDialog
|
|
70
|
-
```
|
|
7
|
+
---
|
|
71
8
|
|
|
72
9
|
## Installation
|
|
73
10
|
|
|
74
|
-
### For synthaxweb or other Synthax apps
|
|
75
|
-
|
|
76
|
-
Add the library as a local dependency in your `package.json`:
|
|
77
|
-
|
|
78
|
-
```json
|
|
79
|
-
{
|
|
80
|
-
"dependencies": {
|
|
81
|
-
"@synthaxai/ui": "file:../ui/lib"
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
Then install:
|
|
87
|
-
|
|
88
11
|
```bash
|
|
89
|
-
|
|
12
|
+
npm install @synthaxai/ui
|
|
90
13
|
```
|
|
91
14
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
The library requires:
|
|
95
|
-
- `svelte` ^5.0.0
|
|
96
|
-
- `lucide-svelte` ^0.400.0
|
|
97
|
-
|
|
98
|
-
## Usage
|
|
15
|
+
**Peer dependencies:** `svelte ^5.0.0` · `lucide-svelte ^0.400.0`
|
|
99
16
|
|
|
100
|
-
|
|
17
|
+
## Quick Start
|
|
101
18
|
|
|
102
19
|
```css
|
|
103
|
-
/*
|
|
20
|
+
/* Import design tokens */
|
|
104
21
|
@import '@synthaxai/ui/styles';
|
|
105
22
|
```
|
|
106
23
|
|
|
107
|
-
### 2. Use components in your Svelte files
|
|
108
|
-
|
|
109
24
|
```svelte
|
|
110
25
|
<script>
|
|
111
|
-
import { Button, Card, TextInput } from '@synthaxai/ui';
|
|
26
|
+
import { Button, Card, TextInput, Alert } from '@synthaxai/ui';
|
|
112
27
|
</script>
|
|
113
28
|
|
|
114
29
|
<Card>
|
|
115
|
-
<
|
|
116
|
-
<
|
|
30
|
+
<Alert variant="info">Patient record updated</Alert>
|
|
31
|
+
<TextInput label="Patient Name" bind:value={name} />
|
|
32
|
+
<Button variant="primary">Save</Button>
|
|
117
33
|
</Card>
|
|
118
34
|
```
|
|
119
35
|
|
|
120
|
-
|
|
36
|
+
## Components
|
|
37
|
+
|
|
38
|
+
| Category | Components |
|
|
39
|
+
|----------|------------|
|
|
40
|
+
| **Primitives** | Button, Badge |
|
|
41
|
+
| **Forms** | TextInput, Textarea, Select, Checkbox, RadioGroup, FormField, SearchInput, MultiSelect, DatePicker |
|
|
42
|
+
| **Feedback** | Alert, Toast, Spinner, ProgressBar, Skeleton, EmptyState |
|
|
43
|
+
| **Layout** | Card, Container |
|
|
44
|
+
| **Data Display** | DataTable, StatCard |
|
|
45
|
+
| **Navigation** | StepIndicator |
|
|
46
|
+
| **Dialogs** | Modal, ConfirmDialog |
|
|
47
|
+
|
|
48
|
+
### Tree-shakeable Imports
|
|
121
49
|
|
|
122
50
|
```svelte
|
|
123
51
|
<script>
|
|
124
52
|
import { Button } from '@synthaxai/ui/primitives';
|
|
125
|
-
import { TextInput
|
|
53
|
+
import { TextInput } from '@synthaxai/ui/forms';
|
|
126
54
|
import { Modal } from '@synthaxai/ui/dialogs';
|
|
127
|
-
import { Alert } from '@synthaxai/ui/feedback';
|
|
128
55
|
</script>
|
|
129
56
|
```
|
|
130
57
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
```typescript
|
|
134
|
-
import { cn, announce, generateId } from '@synthaxai/ui/utils';
|
|
135
|
-
|
|
136
|
-
// Merge class names conditionally
|
|
137
|
-
const className = cn('base-class', isActive && 'active-class');
|
|
138
|
-
|
|
139
|
-
// Announce to screen readers
|
|
140
|
-
announce('Form submitted successfully');
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
## Development
|
|
144
|
-
|
|
145
|
-
```bash
|
|
146
|
-
# Install dependencies
|
|
147
|
-
pnpm install
|
|
148
|
-
|
|
149
|
-
# Start dev server
|
|
150
|
-
pnpm dev
|
|
151
|
-
|
|
152
|
-
# Run tests
|
|
153
|
-
pnpm test
|
|
154
|
-
|
|
155
|
-
# Run tests in watch mode
|
|
156
|
-
pnpm test:watch
|
|
157
|
-
|
|
158
|
-
# Build the library
|
|
159
|
-
pnpm build
|
|
160
|
-
|
|
161
|
-
# Type check
|
|
162
|
-
pnpm check
|
|
163
|
-
|
|
164
|
-
# Lint (with Biome)
|
|
165
|
-
pnpm lint
|
|
166
|
-
|
|
167
|
-
# Lint and fix
|
|
168
|
-
pnpm lint:fix
|
|
169
|
-
|
|
170
|
-
# Format (with Biome)
|
|
171
|
-
pnpm format
|
|
172
|
-
|
|
173
|
-
# Check format
|
|
174
|
-
pnpm format:check
|
|
175
|
-
|
|
176
|
-
# Lint + format + organize imports
|
|
177
|
-
pnpm check:all
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
## E2E Testing Support
|
|
181
|
-
|
|
182
|
-
All interactive components support the `testId` prop for Playwright or Cypress selectors:
|
|
183
|
-
|
|
184
|
-
```svelte
|
|
185
|
-
<Button testId="submit-button" onclick={handleSubmit}>Submit</Button>
|
|
186
|
-
<TextInput testId="patient-name" label="Patient Name" bind:value={name} />
|
|
187
|
-
<Modal testId="confirm-modal" open={isOpen} onclose={() => isOpen = false}>
|
|
188
|
-
...
|
|
189
|
-
</Modal>
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
In Playwright tests:
|
|
193
|
-
|
|
194
|
-
```typescript
|
|
195
|
-
await page.getByTestId('submit-button').click();
|
|
196
|
-
await page.getByTestId('patient-name').fill('John Doe');
|
|
197
|
-
```
|
|
198
|
-
|
|
199
|
-
## Component Guidelines
|
|
200
|
-
|
|
201
|
-
Each component:
|
|
202
|
-
|
|
203
|
-
1. **Is self-contained** — Own styles, types, and tests
|
|
204
|
-
2. **Supports dark mode** — Uses CSS variables for theming
|
|
205
|
-
3. **Is accessible** — Proper ARIA attributes and keyboard navigation
|
|
206
|
-
4. **Is typed** — Exports TypeScript interfaces for all props
|
|
207
|
-
5. **Is documented** — JSDoc comments and usage examples
|
|
208
|
-
6. **Is tested** — Unit tests covering rendering, states, and accessibility
|
|
209
|
-
7. **Supports E2E testing** — Optional `testId` prop for test selectors
|
|
210
|
-
|
|
211
|
-
## Theme Support
|
|
212
|
-
|
|
213
|
-
The library supports light and dark themes in three modes:
|
|
214
|
-
|
|
215
|
-
### 1. Automatic (System Preference)
|
|
216
|
-
|
|
217
|
-
By default, the library respects `prefers-color-scheme`:
|
|
218
|
-
|
|
219
|
-
```css
|
|
220
|
-
/* Just import the styles - theme auto-detected */
|
|
221
|
-
@import '@synthaxai/ui/styles';
|
|
222
|
-
```
|
|
58
|
+
## Features
|
|
223
59
|
|
|
224
|
-
|
|
60
|
+
- **Svelte 5** — Built with runes and snippets
|
|
61
|
+
- **TypeScript** — Full type definitions
|
|
62
|
+
- **Accessible** — WCAG 2.1 AA, screen reader support, focus management
|
|
63
|
+
- **Dark Mode** — System preference + manual toggle via `data-theme`
|
|
64
|
+
- **Reduced Motion** — Respects `prefers-reduced-motion`
|
|
65
|
+
- **E2E Ready** — All components support `testId` prop
|
|
225
66
|
|
|
226
|
-
|
|
67
|
+
## Theming
|
|
227
68
|
|
|
228
69
|
```html
|
|
229
|
-
<!--
|
|
230
|
-
<html
|
|
70
|
+
<!-- Automatic (follows system) -->
|
|
71
|
+
<html>
|
|
231
72
|
|
|
232
73
|
<!-- Force dark mode -->
|
|
233
74
|
<html data-theme="dark">
|
|
234
|
-
```
|
|
235
75
|
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
```javascript
|
|
239
|
-
// Toggle theme
|
|
240
|
-
function toggleTheme() {
|
|
241
|
-
const current = document.documentElement.dataset.theme;
|
|
242
|
-
document.documentElement.dataset.theme = current === 'dark' ? 'light' : 'dark';
|
|
243
|
-
}
|
|
76
|
+
<!-- Force light mode -->
|
|
77
|
+
<html data-theme="light">
|
|
244
78
|
```
|
|
245
79
|
|
|
246
|
-
|
|
247
|
-
1. `data-theme="dark"` → dark mode
|
|
248
|
-
2. `data-theme="light"` → light mode
|
|
249
|
-
3. No `data-theme` → follows system preference
|
|
250
|
-
|
|
251
|
-
## Design System
|
|
252
|
-
|
|
253
|
-
The library follows Synthax's design system:
|
|
254
|
-
|
|
255
|
-
| Token | Value | Usage |
|
|
256
|
-
|-------|-------|-------|
|
|
257
|
-
| Primary | `#124545` | Brand color, CTAs |
|
|
258
|
-
| Radius (buttons) | `8px` | rounded-lg |
|
|
259
|
-
| Radius (cards) | `12px` | rounded-xl |
|
|
260
|
-
| Radius (modals) | `16px` | rounded-2xl |
|
|
80
|
+
## License
|
|
261
81
|
|
|
262
|
-
|
|
82
|
+
Proprietary — [Synthax](https://synthax.ai)
|
|
@@ -28,17 +28,13 @@
|
|
|
28
28
|
stickyHeader
|
|
29
29
|
/>
|
|
30
30
|
-->
|
|
31
|
-
<script lang="ts"
|
|
31
|
+
<script lang="ts" module>
|
|
32
32
|
import type { Snippet } from 'svelte';
|
|
33
|
-
import { ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
|
|
34
|
-
import { Skeleton } from '../../feedback/Skeleton/index.js';
|
|
35
|
-
import { EmptyState } from '../../feedback/EmptyState/index.js';
|
|
36
|
-
import { Checkbox } from '../../forms/Checkbox/index.js';
|
|
37
33
|
import type { TableColumn, SortState, SortDirection } from '../../types/index.js';
|
|
38
34
|
|
|
39
|
-
type TableSize = 'sm' | 'md' | 'lg';
|
|
35
|
+
export type TableSize = 'sm' | 'md' | 'lg';
|
|
40
36
|
|
|
41
|
-
interface
|
|
37
|
+
export interface DataTableProps<T extends Record<string, unknown>> {
|
|
42
38
|
/** Column definitions */
|
|
43
39
|
columns: TableColumn<T>[];
|
|
44
40
|
/** Data rows */
|
|
@@ -95,9 +91,19 @@
|
|
|
95
91
|
getRowHighlight?: (row: T) => 'error' | 'warning' | 'success' | 'info' | null;
|
|
96
92
|
/** Additional CSS classes */
|
|
97
93
|
class?: string;
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<script lang="ts" generics="T extends Record<string, unknown>">
|
|
98
|
+
import { ArrowUp, ArrowDown, ArrowUpDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
|
|
99
|
+
import { Skeleton } from '../../feedback/Skeleton/index.js';
|
|
100
|
+
import { EmptyState } from '../../feedback/EmptyState/index.js';
|
|
101
|
+
import { Checkbox } from '../../forms/Checkbox/index.js';
|
|
102
|
+
|
|
103
|
+
type Props = DataTableProps<T> & {
|
|
98
104
|
/** ID for the table */
|
|
99
105
|
id?: string;
|
|
100
|
-
}
|
|
106
|
+
};
|
|
101
107
|
|
|
102
108
|
let {
|
|
103
109
|
columns,
|
|
@@ -1,67 +1,70 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
import type { TableColumn, SortState } from '../../types/index.js';
|
|
3
|
+
export type TableSize = 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface DataTableProps<T extends Record<string, unknown>> {
|
|
5
|
+
/** Column definitions */
|
|
6
|
+
columns: TableColumn<T>[];
|
|
7
|
+
/** Data rows */
|
|
8
|
+
data: T[];
|
|
9
|
+
/** Table caption for accessibility - describes the table's purpose */
|
|
10
|
+
caption?: string;
|
|
11
|
+
/** Whether to visually hide the caption (still available to screen readers) */
|
|
12
|
+
captionHidden?: boolean;
|
|
13
|
+
/** Size variant */
|
|
14
|
+
size?: TableSize;
|
|
15
|
+
/** Initial sort state */
|
|
16
|
+
sortState?: SortState;
|
|
17
|
+
/** Whether rows are hoverable */
|
|
18
|
+
hoverable?: boolean;
|
|
19
|
+
/** Whether rows are striped */
|
|
20
|
+
striped?: boolean;
|
|
21
|
+
/** Whether the header should stick when scrolling */
|
|
22
|
+
stickyHeader?: boolean;
|
|
23
|
+
/** Maximum height for scrollable table (enables sticky header behavior) */
|
|
24
|
+
maxHeight?: string;
|
|
25
|
+
/** Whether rows are selectable */
|
|
26
|
+
selectable?: boolean;
|
|
27
|
+
/** Currently selected row keys */
|
|
28
|
+
selectedKeys?: Set<string>;
|
|
29
|
+
/** Whether the table is loading */
|
|
30
|
+
loading?: boolean;
|
|
31
|
+
/** Number of skeleton rows to show when loading */
|
|
32
|
+
loadingRows?: number;
|
|
33
|
+
/** Empty state message */
|
|
34
|
+
emptyMessage?: string;
|
|
35
|
+
/** Empty state description */
|
|
36
|
+
emptyDescription?: string;
|
|
37
|
+
/** Row key function */
|
|
38
|
+
getRowKey?: (row: T, index: number) => string;
|
|
39
|
+
/** Custom cell renderer */
|
|
40
|
+
cellRenderer?: Snippet<[{
|
|
41
|
+
value: unknown;
|
|
42
|
+
row: T;
|
|
43
|
+
column: TableColumn<T>;
|
|
44
|
+
}]>;
|
|
45
|
+
/** Custom empty state snippet */
|
|
46
|
+
emptyState?: Snippet;
|
|
47
|
+
/** Row click handler */
|
|
48
|
+
onRowClick?: (row: T) => void;
|
|
49
|
+
/** Sort change handler */
|
|
50
|
+
onSort?: (state: SortState) => void;
|
|
51
|
+
/** Selection change handler */
|
|
52
|
+
onSelectionChange?: (selectedKeys: Set<string>) => void;
|
|
53
|
+
/** Pagination - current page (1-indexed) */
|
|
54
|
+
currentPage?: number;
|
|
55
|
+
/** Pagination - items per page */
|
|
56
|
+
pageSize?: number;
|
|
57
|
+
/** Pagination - total items (for server-side pagination) */
|
|
58
|
+
totalItems?: number;
|
|
59
|
+
/** Pagination - page change handler */
|
|
60
|
+
onPageChange?: (page: number) => void;
|
|
61
|
+
/** Row highlight function - return variant name for highlighting */
|
|
62
|
+
getRowHighlight?: (row: T) => 'error' | 'warning' | 'success' | 'info' | null;
|
|
63
|
+
/** Additional CSS classes */
|
|
64
|
+
class?: string;
|
|
65
|
+
}
|
|
3
66
|
declare function $$render<T extends Record<string, unknown>>(): {
|
|
4
|
-
props: {
|
|
5
|
-
/** Column definitions */
|
|
6
|
-
columns: TableColumn<T>[];
|
|
7
|
-
/** Data rows */
|
|
8
|
-
data: T[];
|
|
9
|
-
/** Table caption for accessibility - describes the table's purpose */
|
|
10
|
-
caption?: string;
|
|
11
|
-
/** Whether to visually hide the caption (still available to screen readers) */
|
|
12
|
-
captionHidden?: boolean;
|
|
13
|
-
/** Size variant */
|
|
14
|
-
size?: "sm" | "md" | "lg";
|
|
15
|
-
/** Initial sort state */
|
|
16
|
-
sortState?: SortState;
|
|
17
|
-
/** Whether rows are hoverable */
|
|
18
|
-
hoverable?: boolean;
|
|
19
|
-
/** Whether rows are striped */
|
|
20
|
-
striped?: boolean;
|
|
21
|
-
/** Whether the header should stick when scrolling */
|
|
22
|
-
stickyHeader?: boolean;
|
|
23
|
-
/** Maximum height for scrollable table (enables sticky header behavior) */
|
|
24
|
-
maxHeight?: string;
|
|
25
|
-
/** Whether rows are selectable */
|
|
26
|
-
selectable?: boolean;
|
|
27
|
-
/** Currently selected row keys */
|
|
28
|
-
selectedKeys?: Set<string>;
|
|
29
|
-
/** Whether the table is loading */
|
|
30
|
-
loading?: boolean;
|
|
31
|
-
/** Number of skeleton rows to show when loading */
|
|
32
|
-
loadingRows?: number;
|
|
33
|
-
/** Empty state message */
|
|
34
|
-
emptyMessage?: string;
|
|
35
|
-
/** Empty state description */
|
|
36
|
-
emptyDescription?: string;
|
|
37
|
-
/** Row key function */
|
|
38
|
-
getRowKey?: (row: T, index: number) => string;
|
|
39
|
-
/** Custom cell renderer */
|
|
40
|
-
cellRenderer?: Snippet<[{
|
|
41
|
-
value: unknown;
|
|
42
|
-
row: T;
|
|
43
|
-
column: TableColumn<T>;
|
|
44
|
-
}]>;
|
|
45
|
-
/** Custom empty state snippet */
|
|
46
|
-
emptyState?: Snippet;
|
|
47
|
-
/** Row click handler */
|
|
48
|
-
onRowClick?: (row: T) => void;
|
|
49
|
-
/** Sort change handler */
|
|
50
|
-
onSort?: (state: SortState) => void;
|
|
51
|
-
/** Selection change handler */
|
|
52
|
-
onSelectionChange?: (selectedKeys: Set<string>) => void;
|
|
53
|
-
/** Pagination - current page (1-indexed) */
|
|
54
|
-
currentPage?: number;
|
|
55
|
-
/** Pagination - items per page */
|
|
56
|
-
pageSize?: number;
|
|
57
|
-
/** Pagination - total items (for server-side pagination) */
|
|
58
|
-
totalItems?: number;
|
|
59
|
-
/** Pagination - page change handler */
|
|
60
|
-
onPageChange?: (page: number) => void;
|
|
61
|
-
/** Row highlight function - return variant name for highlighting */
|
|
62
|
-
getRowHighlight?: (row: T) => "error" | "warning" | "success" | "info" | null;
|
|
63
|
-
/** Additional CSS classes */
|
|
64
|
-
class?: string;
|
|
67
|
+
props: DataTableProps<T> & {
|
|
65
68
|
/** ID for the table */
|
|
66
69
|
id?: string;
|
|
67
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/data-display/DataTable/DataTable.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DataTable.svelte.d.ts","sourceRoot":"","sources":["../../../src/data-display/DataTable/DataTable.svelte.ts"],"names":[],"mappings":"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"}
|