@simplysm/solid 13.0.98 → 13.0.100

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.
Files changed (13) hide show
  1. package/README.md +166 -259
  2. package/docs/data.md +246 -120
  3. package/docs/disclosure.md +85 -61
  4. package/docs/display.md +87 -44
  5. package/docs/features.md +186 -155
  6. package/docs/feedback.md +130 -107
  7. package/docs/form-control.md +337 -254
  8. package/docs/helpers.md +120 -82
  9. package/docs/hooks.md +69 -70
  10. package/docs/layout.md +115 -85
  11. package/docs/providers.md +130 -110
  12. package/docs/styles.md +91 -85
  13. package/package.json +5 -5
package/README.md CHANGED
@@ -10,340 +10,247 @@ npm install @simplysm/solid
10
10
 
11
11
  ## API Overview
12
12
 
13
- ### Form Controls
14
-
13
+ ### Form Control
15
14
  | API | Type | Description |
16
15
  |-----|------|-------------|
17
16
  | `Button` | Component | Themed button with ripple effect |
18
- | `Select` | Component | Single/multiple select dropdown |
19
- | `Select.Item` | Sub-component | Selectable item within Select |
20
- | `Select.Header` | Sub-component | Custom header slot for Select dropdown |
17
+ | `Select` | Component | Dropdown select (single/multiple, search, tree) |
18
+ | `Select.Item` | Sub-component | Selectable item in Select dropdown |
19
+ | `Select.Header` | Sub-component | Custom header slot in Select dropdown |
21
20
  | `Select.Action` | Sub-component | Action button appended to Select trigger |
22
- | `Select.ItemTemplate` | Sub-component | Render template for items in `items` mode |
23
- | `Combobox` | Component | Autocomplete with async search |
24
- | `Combobox.Item` | Sub-component | Selectable item within Combobox |
25
- | `Combobox.ItemTemplate` | Sub-component | Render template for loaded items |
26
- | `TextInput` | Component | Text input field with format support |
21
+ | `Select.ItemTemplate` | Sub-component | Template function for items mode |
22
+ | `SelectContext` | Context | Select state context |
23
+ | `Combobox` | Component | Async autocomplete with debounced search |
24
+ | `Combobox.Item` | Sub-component | Selectable item in Combobox dropdown |
25
+ | `Combobox.ItemTemplate` | Sub-component | Template function for Combobox items |
26
+ | `ComboboxContext` | Context | Combobox state context |
27
+ | `TextInput` | Component | Text input with format masking and IME handling |
27
28
  | `TextInput.Prefix` | Sub-component | Prefix slot for TextInput |
28
- | `NumberInput` | Component | Numeric input with grouping and formatting |
29
+ | `TextInputPrefix` | Component | Standalone prefix slot component |
30
+ | `NumberInput` | Component | Numeric input with thousand separator |
29
31
  | `NumberInput.Prefix` | Sub-component | Prefix slot for NumberInput |
32
+ | `NumberInputPrefix` | Component | Standalone prefix slot component |
30
33
  | `DatePicker` | Component | Date input (year/month/date units) |
31
34
  | `DateTimePicker` | Component | DateTime input (minute/second units) |
32
35
  | `TimePicker` | Component | Time input (minute/second units) |
33
36
  | `Textarea` | Component | Auto-resizing textarea |
34
- | `Checkbox` | Component | Checkbox with indicator |
35
- | `Radio` | Component | Radio button with indicator |
36
- | `CheckboxGroup` | Component | Multi-select checkbox group |
37
- | `CheckboxGroup.Item` | Sub-component | Item within CheckboxGroup |
38
- | `RadioGroup` | Component | Single-select radio group |
39
- | `RadioGroup.Item` | Sub-component | Item within RadioGroup |
40
- | `ColorPicker` | Component | Native color picker input |
37
+ | `Checkbox` | Component | Checkbox toggle |
38
+ | `Radio` | Component | Radio button |
39
+ | `CheckboxGroup` | Component | Multi-value checkbox group |
40
+ | `CheckboxGroup.Item` | Sub-component | Individual checkbox in group |
41
+ | `RadioGroup` | Component | Single-value radio group |
42
+ | `RadioGroup.Item` | Sub-component | Individual radio in group |
43
+ | `ColorPicker` | Component | Native color picker |
41
44
  | `DateRangePicker` | Component | Date range with period type selector |
42
- | `RichTextEditor` | Component | Tiptap-based rich text editor |
43
- | `Numpad` | Component | Numeric keypad for touch input |
44
- | `StatePreset` | Component | Save/restore state presets to storage |
45
- | `ThemeToggle` | Component | Light/system/dark theme cycle button |
46
- | `Invalid` | Component | Validation indicator wrapper |
47
- | `fieldSurface`, `fieldBaseClass`, `fieldSizeClasses`, `fieldInputClass` | Style export | Field style tokens |
48
- | `getFieldWrapperClass`, `getTextareaWrapperClass` | Function | Field wrapper class builders |
49
- | `checkboxBaseClass`, `indicatorBaseClass`, `checkedClass`, `checkboxSizeClasses` | Style export | Checkbox style tokens |
45
+ | `RichTextEditor` | Component | WYSIWYG editor (TipTap) |
46
+ | `Numpad` | Component | On-screen number pad |
47
+ | `StatePreset` | Component | Save/restore named state presets |
48
+ | `ThemeToggle` | Component | Light/system/dark theme toggle |
49
+ | `Invalid` | Component | Validation error indicator wrapper |
50
+ | `Field.styles` | Styles | Shared form field style utilities |
51
+ | `Checkbox.styles` | Styles | Shared checkbox/radio style constants |
50
52
 
51
- -> See [docs/form-control.md](./docs/form-control.md) for details.
53
+ > See [docs/form-control.md](./docs/form-control.md) for details.
52
54
 
53
55
  ### Layout
54
-
55
56
  | API | Type | Description |
56
57
  |-----|------|-------------|
57
- | `FormGroup` | Component | Vertical/inline form field group |
58
- | `FormGroup.Item` | Sub-component | Labeled form group item |
58
+ | `FormGroup` | Component | Vertical/inline form field grouping |
59
+ | `FormGroup.Item` | Sub-component | Labeled form field |
59
60
  | `FormTable` | Component | Table-based form layout |
60
- | `FormTable.Row` | Sub-component | Table row |
61
- | `FormTable.Item` | Sub-component | Labeled table cell |
62
- | `Sidebar` | Component | Collapsible sidebar panel |
63
- | `Sidebar.Container` | Sub-component | Sidebar + content layout container |
64
- | `Sidebar.Menu` | Sub-component | Recursive menu with route matching |
65
- | `Sidebar.User` | Sub-component | User info with dropdown menu |
61
+ | `FormTable.Row` | Sub-component | Form table row |
62
+ | `FormTable.Item` | Sub-component | Form table cell with label |
63
+ | `Sidebar` | Component | Responsive sidebar navigation |
64
+ | `Sidebar.Container` | Sub-component | Root container with toggle context |
65
+ | `Sidebar.Menu` | Sub-component | Recursive navigation menu |
66
+ | `Sidebar.User` | Sub-component | User info with dropdown |
67
+ | `useSidebar` | Hook | Access sidebar toggle state |
66
68
  | `Topbar` | Component | Top navigation bar |
67
- | `Topbar.Container` | Sub-component | Topbar + content layout container |
68
- | `Topbar.Menu` | Sub-component | Dropdown navigation menu |
69
- | `Topbar.User` | Sub-component | User info with dropdown |
70
- | `Topbar.Actions` | Sub-component | Displays actions from useTopbarActions() |
71
- | `useTopbarActions()` | Hook | Register topbar action elements |
72
- | `useTopbarActionsAccessor()` | Hook | Read topbar actions signal |
69
+ | `Topbar.Container` | Sub-component | Layout container with actions context |
70
+ | `Topbar.Menu` | Sub-component | Responsive dropdown menu |
71
+ | `Topbar.User` | Sub-component | User section with dropdown |
72
+ | `Topbar.Actions` | Sub-component | Dynamic actions display |
73
+ | `useTopbarActions` | Hook | Register dynamic topbar actions |
74
+ | `useTopbarActionsAccessor` | Hook | Read registered actions |
73
75
 
74
- -> See [docs/layout.md](./docs/layout.md) for details.
76
+ > See [docs/layout.md](./docs/layout.md) for details.
75
77
 
76
78
  ### Data
77
-
78
79
  | API | Type | Description |
79
80
  |-----|------|-------------|
80
- | `Table` | Component | Styled HTML table |
81
- | `Table.Row` | Sub-component | Table row |
82
- | `Table.HeaderCell` | Sub-component | Table header cell |
83
- | `Table.Cell` | Sub-component | Table data cell |
84
- | `List` | Component | Vertical list container |
85
- | `ListContext` | Context | List nesting level context |
86
- | `useListContext()` | Hook | Access list context |
87
- | `Pagination` | Component | Page navigation controls |
88
- | `DataSheet` | Component | Spreadsheet-like data grid |
89
- | `DataSheet.Column` | Sub-component | Column definition |
90
- | `Calendar` | Component | Month calendar with value items |
91
- | `Kanban` | Component | Kanban board with drag-and-drop |
92
- | `Kanban.Lane` | Sub-component | Kanban lane |
93
- | `Kanban.Card` | Sub-component | Draggable card |
94
-
95
- -> See [docs/data.md](./docs/data.md) for details.
81
+ | `Table` | Component | Simple HTML table with borders |
82
+ | `Table.Row` / `Table.HeaderCell` / `Table.Cell` | Sub-components | Table elements |
83
+ | `List` | Component | List container with keyboard navigation |
84
+ | `List.Item` | Sub-component | Interactive list item |
85
+ | `ListContext` / `useListContext` | Context/Hook | List nesting level |
86
+ | `ListItem.styles` | Styles | List item style constants |
87
+ | `Pagination` | Component | Page navigation |
88
+ | `DataSheet` | Component | Feature-rich data grid |
89
+ | `DataSheet.styles` | Styles | DataSheet style constants |
90
+ | `DataSheet.types` | Types | DataSheet type definitions |
91
+ | `Calendar` | Component | Monthly calendar grid |
92
+ | `Kanban` | Component | Drag-and-drop kanban board |
93
+ | `KanbanContext` / `useKanbanContext` | Context/Hook | Board-level context |
94
+ | `KanbanLaneContext` / `useKanbanLaneContext` | Context/Hook | Lane-level context |
95
+
96
+ > See [docs/data.md](./docs/data.md) for details.
96
97
 
97
98
  ### Display
98
-
99
99
  | API | Type | Description |
100
100
  |-----|------|-------------|
101
- | `Barcode` | Component | SVG barcode renderer (bwip-js) |
102
- | `BarcodeType` | Type | Union of supported barcode formats |
103
- | `Card` | Component | Elevated card container |
101
+ | `Barcode` | Component | SVG barcode renderer (100+ formats) |
102
+ | `BarcodeType` | Type | Barcode format union type |
103
+ | `Card` | Component | Surface container with shadow |
104
104
  | `Echarts` | Component | Apache ECharts wrapper |
105
- | `Icon` | Component | Tabler icon wrapper |
106
- | `Tag` | Component | Themed inline tag/badge |
107
- | `Link` | Component | Themed anchor link |
108
- | `Alert` | Component | Themed alert box |
105
+ | `Icon` | Component | Tabler Icons wrapper |
106
+ | `Tag` | Component | Inline badge with theme colors |
107
+ | `Link` | Component | Styled anchor element |
108
+ | `Alert` | Component | Block-level alert container |
109
109
 
110
- -> See [docs/display.md](./docs/display.md) for details.
110
+ > See [docs/display.md](./docs/display.md) for details.
111
111
 
112
112
  ### Disclosure
113
-
114
113
  | API | Type | Description |
115
114
  |-----|------|-------------|
116
- | `Collapse` | Component | Animated expand/collapse container |
117
- | `Dropdown` | Component | Positioned popup with trigger |
118
- | `Dropdown.Trigger` | Sub-component | Click target for dropdown |
119
- | `Dropdown.Content` | Sub-component | Popup content |
120
- | `Dialog` | Component | Modal/float dialog with drag/resize |
121
- | `Dialog.Header` | Sub-component | Dialog title bar |
122
- | `Dialog.Action` | Sub-component | Header action buttons |
115
+ | `Collapse` | Component | Animated collapsible container |
116
+ | `Dropdown` | Component | Popup dropdown with auto-positioning |
117
+ | `Dropdown.Trigger` / `Dropdown.Content` | Sub-components | Trigger and content slots |
118
+ | `Dialog` | Component | Modal/float dialog with drag and resize |
119
+ | `Dialog.Header` / `Dialog.Action` | Sub-components | Header and action slots |
123
120
  | `DialogProvider` | Component | Programmatic dialog provider |
124
- | `useDialog()` | Hook | Open dialogs programmatically |
125
- | `DialogDefaultsContext` | Context | Default dialog configuration |
126
- | `Tabs` | Component | Tab bar container |
127
- | `Tabs.Tab` | Sub-component | Individual tab |
121
+ | `useDialog` | Hook | Programmatic dialog access |
122
+ | `DialogContext` / `DialogDefaultsContext` | Contexts | Dialog state contexts |
123
+ | `Tabs` | Component | Tab bar with underline indicator |
124
+ | `Tabs.Tab` | Sub-component | Individual tab button |
128
125
 
129
- -> See [docs/disclosure.md](./docs/disclosure.md) for details.
126
+ > See [docs/disclosure.md](./docs/disclosure.md) for details.
130
127
 
131
128
  ### Feedback
132
-
133
129
  | API | Type | Description |
134
130
  |-----|------|-------------|
135
- | `Progress` | Component | Themed progress bar |
136
131
  | `NotificationProvider` | Component | Notification system provider |
137
- | `useNotification()` | Hook | Create/manage notifications |
138
- | `NotificationBell` | Component | Bell icon with unread badge + dropdown |
139
- | `NotificationBanner` | Component | Toast-style notification banner |
140
- | `BusyProvider` | Component | Global loading overlay provider |
141
- | `useBusy()` | Hook | Show/hide loading overlay |
142
- | `BusyContainer` | Component | Local loading overlay container |
143
- | `PrintProvider` | Component | Print/PDF generation provider |
144
- | `usePrint()` | Hook | Print to printer or generate PDF |
145
- | `usePrintInstance()` | Hook | Signal ready state in print content |
146
- | `Print` | Component | Print content wrapper |
147
- | `Print.Page` | Sub-component | Page break boundary |
148
-
149
- -> See [docs/feedback.md](./docs/feedback.md) for details.
150
-
151
- ### Features
152
-
153
- | API | Type | Description |
154
- |-----|------|-------------|
155
- | `AddressSearchContent` | Component | Korean address search (Daum Postcode) |
156
- | `SharedDataSelect` | Component | Select bound to shared data |
157
- | `SharedDataSelectButton` | Component | Button that opens shared data dialog |
158
- | `SharedDataSelectList` | Component | List bound to shared data |
159
- | `DataSelectButton` | Component | Button that opens a data selection dialog |
160
- | `CrudSheet` | Component | Full CRUD data grid |
161
- | `CrudSheet.Column` | Sub-component | Column definition for CrudSheet |
162
- | `CrudSheet.Filter` | Sub-component | Filter panel slot |
163
- | `CrudSheet.Tools` | Sub-component | Toolbar slot |
164
- | `CrudDetail` | Component | CRUD detail form |
165
- | `CrudDetail.Header` | Sub-component | Detail header slot |
166
- | `PermissionTable` | Component | Permission matrix table |
167
-
168
- -> See [docs/features.md](./docs/features.md) for details.
132
+ | `useNotification` | Hook | Access notification system |
133
+ | `NotificationBell` | Component | Bell icon with unread count |
134
+ | `NotificationBanner` | Component | Fixed-position notification banner |
135
+ | `BusyProvider` | Component | Busy overlay provider |
136
+ | `useBusy` | Hook | Access busy overlay |
137
+ | `BusyContainer` | Component | Inline loading overlay |
138
+ | `PrintProvider` | Component | Print-to-printer/PDF provider |
139
+ | `usePrint` / `usePrintInstance` | Hooks | Print access |
140
+ | `Print` / `Print.Page` | Components | Print content wrappers |
141
+ | `Progress` | Component | Progress bar |
142
+
143
+ > See [docs/feedback.md](./docs/feedback.md) for details.
169
144
 
170
145
  ### Providers
171
-
172
146
  | API | Type | Description |
173
147
  |-----|------|-------------|
174
- | `ConfigContext` | Context | App configuration (clientName) |
175
- | `useConfig()` | Hook | Access app config |
176
- | `ConfigProvider` | Component | Provides app config |
177
- | `SyncStorageProvider` | Component | Pluggable storage provider |
178
- | `useSyncStorage()` | Hook | Access sync storage adapter |
179
- | `LoggerProvider` | Component | Logging adapter provider |
180
- | `ThemeProvider` | Component | Light/dark/system theme provider |
181
- | `useTheme()` | Hook | Access theme mode and toggle |
182
- | `ServiceClientProvider` | Component | Service client connection provider |
183
- | `useServiceClient()` | Hook | Access service client |
184
- | `SystemProvider` | Component | Composite provider (bundles common providers) |
185
- | `I18nProvider` | Component | Internationalization provider |
186
- | `useI18n()` | Hook | Access translation functions |
187
- | `SharedDataProvider` | Component | Shared data cache provider |
188
- | `useSharedData()` | Hook | Access shared data definitions |
189
- | `SharedDataChangeEvent` | Event | Event emitted on shared data changes |
190
-
191
- -> See [docs/providers.md](./docs/providers.md) for details.
148
+ | `ConfigContext` / `ConfigProvider` / `useConfig` | Context | App-wide configuration |
149
+ | `SyncStorageProvider` / `SyncStorageContext` / `useSyncStorage` | Provider | Configurable storage adapter |
150
+ | `LoggerProvider` / `LoggerContext` | Provider | Logger adapter |
151
+ | `ThemeProvider` / `useTheme` | Provider/Hook | Theme mode management |
152
+ | `ServiceClientProvider` / `ServiceClientContext` / `useServiceClient` | Provider | WebSocket service client |
153
+ | `SharedDataProvider` | Provider | Reactive shared data subscriptions |
154
+ | `SharedDataChangeEvent` | Event | Server-client data change event |
155
+ | `SystemProvider` | Provider | All-in-one provider composition |
156
+ | `I18nProvider` / `useI18n` | Provider/Hook | Internationalization |
157
+
158
+ > See [docs/providers.md](./docs/providers.md) for details.
192
159
 
193
160
  ### Hooks
194
-
195
161
  | API | Type | Description |
196
162
  |-----|------|-------------|
197
- | `useLocalStorage` | Hook | localStorage-backed reactive signal |
198
- | `useSyncConfig` | Hook | Storage-synced config signal |
199
- | `useLogger` | Hook | Logging with pluggable adapter |
163
+ | `useLocalStorage` | Hook | localStorage-based storage |
164
+ | `useSyncConfig` | Hook | Reactive storage sync |
165
+ | `useLogger` | Hook | Logging with configurable adapter |
200
166
  | `createControllableSignal` | Hook | Controlled/uncontrolled signal pattern |
201
167
  | `createControllableStore` | Hook | Controlled/uncontrolled store pattern |
202
- | `createIMEHandler` | Hook | IME composition handling for inputs |
203
- | `createMountTransition` | Hook | Mount/unmount animation state |
168
+ | `createIMEHandler` | Hook | IME composition handling |
169
+ | `createMountTransition` | Hook | Mount/unmount CSS transition |
204
170
  | `useRouterLink` | Hook | Router navigation with modifier keys |
205
171
 
206
- -> See [docs/hooks.md](./docs/hooks.md) for details.
172
+ > See [docs/hooks.md](./docs/hooks.md) for details.
207
173
 
208
- ### Helpers
174
+ ### Styles
175
+ | API | Type | Description |
176
+ |-----|------|-------------|
177
+ | `border` / `bg` / `text` | Tokens | Base design tokens |
178
+ | `ComponentSize` / `state` / `pad` / `gap` | Tokens | Control design tokens |
179
+ | `SemanticTheme` / `themeTokens` | Tokens | Theme color tokens |
209
180
 
181
+ > See [docs/styles.md](./docs/styles.md) for details.
182
+
183
+ ### Directives
210
184
  | API | Type | Description |
211
185
  |-----|------|-------------|
212
- | `mergeStyles` | Function | Merge CSS style objects and strings |
213
- | `createAppStructure` | Function | Build app menus, routes, and permissions |
214
- | `createSlot` | Function | Single-item slot pattern |
215
- | `createSlots` | Function | Multi-item slot pattern |
186
+ | `ripple` | Directive | Material-design ripple effect |
187
+
188
+ > See [docs/styles.md](./docs/styles.md) for details.
216
189
 
217
- -> See [docs/helpers.md](./docs/helpers.md) for details.
190
+ ### Helpers
191
+ | API | Type | Description |
192
+ |-----|------|-------------|
193
+ | `mergeStyles` | Function | Merge CSS style objects/strings |
194
+ | `createAppStructure` | Function | App navigation structure factory |
195
+ | `createSlot` | Function | Single-occupancy slot pattern |
196
+ | `createSlots` | Function | Multi-occupancy slot pattern |
197
+ | `startPointerDrag` | Function | Pointer capture drag helper |
218
198
 
219
- ### Styles + Directives
199
+ > See [docs/helpers.md](./docs/helpers.md) for details.
220
200
 
201
+ ### Features
221
202
  | API | Type | Description |
222
203
  |-----|------|-------------|
223
- | `border`, `bg`, `text` | Style tokens | Base design tokens |
224
- | `state`, `ComponentSize`, `pad`, `gap` | Style tokens | Control design tokens |
225
- | `themeTokens`, `SemanticTheme` | Style tokens | Theme color tokens |
226
- | `ripple` | Directive | Pointer ripple effect |
204
+ | `AddressSearchContent` | Component | Korean address search (Daum API) |
205
+ | `SharedDataSelect` | Component | Select with SharedData integration |
206
+ | `SharedDataSelectButton` | Component | Button select with SharedData |
207
+ | `SharedDataSelectList` | Component | List select with SharedData |
208
+ | `DataSelectButton` | Component | Generic dialog-based select button |
209
+ | `CrudSheet` | Component | Full CRUD data grid |
210
+ | `CrudDetail` | Component | CRUD detail view |
211
+ | `PermissionTable` | Component | Permission management table |
227
212
 
228
- -> See [docs/styles.md](./docs/styles.md) for details.
213
+ > See [docs/features.md](./docs/features.md) for details.
229
214
 
230
215
  ## Usage Examples
231
216
 
232
- ### Basic Form
217
+ ### Button with theme
233
218
 
234
219
  ```tsx
235
- import { createSignal } from "solid-js";
236
- import { TextInput, NumberInput, Button, Select } from "@simplysm/solid";
237
-
238
- function OrderForm() {
239
- const [name, setName] = createSignal("");
240
- const [quantity, setQuantity] = createSignal<number>();
241
- const [status, setStatus] = createSignal<string>();
242
-
243
- return (
244
- <FormGroup>
245
- <FormGroup.Item label="Name">
246
- <TextInput value={name()} onValueChange={setName} required />
247
- </FormGroup.Item>
248
- <FormGroup.Item label="Quantity">
249
- <NumberInput value={quantity()} onValueChange={setQuantity} min={1} />
250
- </FormGroup.Item>
251
- <FormGroup.Item label="Status">
252
- <Select value={status()} onValueChange={setStatus} renderValue={(v) => v}>
253
- <Select.Item value="pending">Pending</Select.Item>
254
- <Select.Item value="confirmed">Confirmed</Select.Item>
255
- </Select>
256
- </FormGroup.Item>
257
- <Button theme="primary" variant="solid">Submit</Button>
258
- </FormGroup>
259
- );
260
- }
220
+ import { Button } from "@simplysm/solid";
221
+
222
+ <Button theme="primary" variant="solid" size="md" onClick={handleClick}>
223
+ Save
224
+ </Button>
261
225
  ```
262
226
 
263
- ### Dialog + Notification
227
+ ### Select with items
264
228
 
265
229
  ```tsx
266
- import { useDialog, useNotification, Button } from "@simplysm/solid";
267
-
268
- function MyPage() {
269
- const dialog = useDialog();
270
- const notification = useNotification();
271
-
272
- const handleOpen = async () => {
273
- const result = await dialog.show(
274
- MyDialogContent,
275
- { title: "Edit Item" },
276
- { header: "Edit", resizable: true },
277
- );
278
- if (result) {
279
- notification.success("Saved", "Item saved successfully.");
280
- }
281
- };
282
-
283
- return <Button onClick={handleOpen}>Open Editor</Button>;
284
- }
230
+ import { Select } from "@simplysm/solid";
231
+
232
+ <Select
233
+ items={users}
234
+ value={selectedUser()}
235
+ onValueChange={setSelectedUser}
236
+ renderValue={(u) => u.name}
237
+ >
238
+ <Select.ItemTemplate>
239
+ {(user) => <>{user.name} ({user.email})</>}
240
+ </Select.ItemTemplate>
241
+ </Select>
285
242
  ```
286
243
 
287
- ### Sidebar + Topbar Layout
244
+ ### Dialog (programmatic)
288
245
 
289
246
  ```tsx
290
- import { Sidebar, Topbar, ThemeToggle, NotificationBell } from "@simplysm/solid";
291
-
292
- function AppLayout() {
293
- return (
294
- <div class="h-screen">
295
- <Sidebar.Container>
296
- <Sidebar>
297
- <Sidebar.User name="Admin" description="admin@example.com" />
298
- <Sidebar.Menu menus={appMenus} />
299
- </Sidebar>
300
- <Topbar.Container>
301
- <Topbar>
302
- <h1 class="text-lg font-bold">My App</h1>
303
- <Topbar.Menu menus={navMenus} />
304
- <div class="flex-1" />
305
- <NotificationBell />
306
- <ThemeToggle />
307
- </Topbar>
308
- <main class="flex-1 overflow-auto p-4">
309
- {/* Page content */}
310
- </main>
311
- </Topbar.Container>
312
- </Sidebar.Container>
313
- </div>
314
- );
315
- }
316
- ```
247
+ import { useDialog } from "@simplysm/solid";
317
248
 
318
- ### Data Table with Busy State
249
+ const dialog = useDialog();
319
250
 
320
- ```tsx
321
- import { DataSheet, BusyContainer, Pagination, useBusy } from "@simplysm/solid";
322
-
323
- function DataPage() {
324
- const busy = useBusy();
325
-
326
- const loadData = async () => {
327
- busy.show();
328
- try {
329
- // fetch data
330
- } finally {
331
- busy.hide();
332
- }
333
- };
334
-
335
- return (
336
- <BusyContainer busy={loading()}>
337
- <DataSheet items={items()} getItemKey={(item) => item.id}>
338
- <DataSheet.Column header="Name" key="name">
339
- {(ctx) => ctx.item.name}
340
- </DataSheet.Column>
341
- <DataSheet.Column header="Value" key="value" align="right">
342
- {(ctx) => ctx.item.value}
343
- </DataSheet.Column>
344
- </DataSheet>
345
- <Pagination page={page()} onPageChange={setPage} totalPageCount={10} />
346
- </BusyContainer>
347
- );
348
- }
251
+ const result = await dialog.show(
252
+ MyDialogContent,
253
+ { title: "Edit Item" },
254
+ { header: "Edit", resizable: true, width: 600 },
255
+ );
349
256
  ```