@simplysm/solid 13.0.85 → 13.0.88
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/README.md +143 -28
- package/dist/components/data/list/ListItem.d.ts.map +1 -1
- package/dist/components/data/list/ListItem.js +11 -4
- package/dist/components/data/list/ListItem.js.map +2 -2
- package/dist/components/data/list/ListItem.styles.d.ts +2 -0
- package/dist/components/data/list/ListItem.styles.d.ts.map +1 -1
- package/dist/components/data/list/ListItem.styles.js +11 -1
- package/dist/components/data/list/ListItem.styles.js.map +1 -1
- package/dist/components/features/crud-sheet/CrudSheet.d.ts.map +1 -1
- package/dist/components/features/crud-sheet/CrudSheet.js +7 -0
- package/dist/components/features/crud-sheet/CrudSheet.js.map +2 -2
- package/dist/components/features/data-select-button/DataSelectButton.d.ts.map +1 -1
- package/dist/components/features/data-select-button/DataSelectButton.js +30 -26
- package/dist/components/features/data-select-button/DataSelectButton.js.map +2 -2
- package/dist/components/features/permission-table/PermissionTable.js +5 -1
- package/dist/components/features/permission-table/PermissionTable.js.map +2 -2
- package/dist/components/form-control/DropdownTrigger.styles.js +1 -1
- package/dist/components/form-control/combobox/Combobox.d.ts +19 -5
- package/dist/components/form-control/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/form-control/combobox/Combobox.js +2 -4
- package/dist/components/form-control/combobox/Combobox.js.map +1 -1
- package/dist/components/form-control/date-range-picker/DateRangePicker.d.ts +2 -2
- package/dist/components/form-control/date-range-picker/DateRangePicker.d.ts.map +1 -1
- package/dist/components/form-control/date-range-picker/DateRangePicker.js +10 -1
- package/dist/components/form-control/date-range-picker/DateRangePicker.js.map +2 -2
- package/dist/components/form-control/editor/RichTextEditor.d.ts +2 -2
- package/dist/components/form-control/editor/RichTextEditor.d.ts.map +1 -1
- package/dist/components/form-control/editor/RichTextEditor.js +2 -2
- package/dist/components/form-control/editor/RichTextEditor.js.map +1 -1
- package/dist/components/form-control/field/DatePicker.d.ts +2 -2
- package/dist/components/form-control/field/DatePicker.d.ts.map +1 -1
- package/dist/components/form-control/field/DatePicker.js.map +1 -1
- package/dist/components/form-control/field/DateTimePicker.d.ts +2 -2
- package/dist/components/form-control/field/DateTimePicker.d.ts.map +1 -1
- package/dist/components/form-control/field/DateTimePicker.js.map +1 -1
- package/dist/components/form-control/field/Field.styles.d.ts +6 -7
- package/dist/components/form-control/field/Field.styles.d.ts.map +1 -1
- package/dist/components/form-control/field/Field.styles.js.map +1 -1
- package/dist/components/form-control/field/NumberInput.d.ts +2 -2
- package/dist/components/form-control/field/NumberInput.d.ts.map +1 -1
- package/dist/components/form-control/field/NumberInput.js.map +1 -1
- package/dist/components/form-control/field/TextInput.d.ts +2 -2
- package/dist/components/form-control/field/TextInput.d.ts.map +1 -1
- package/dist/components/form-control/field/TextInput.js.map +1 -1
- package/dist/components/form-control/field/Textarea.d.ts +2 -2
- package/dist/components/form-control/field/Textarea.d.ts.map +1 -1
- package/dist/components/form-control/field/Textarea.js.map +1 -1
- package/dist/components/form-control/field/TimePicker.d.ts +2 -2
- package/dist/components/form-control/field/TimePicker.d.ts.map +1 -1
- package/dist/components/form-control/field/TimePicker.js.map +1 -1
- package/dist/components/form-control/numpad/Numpad.d.ts.map +1 -1
- package/dist/components/form-control/numpad/Numpad.js +4 -17
- package/dist/components/form-control/numpad/Numpad.js.map +2 -2
- package/dist/components/form-control/select/Select.d.ts.map +1 -1
- package/dist/components/form-control/select/Select.js +19 -6
- package/dist/components/form-control/select/Select.js.map +2 -2
- package/dist/components/form-control/state-preset/StatePreset.d.ts +1 -3
- package/dist/components/form-control/state-preset/StatePreset.d.ts.map +1 -1
- package/dist/components/form-control/state-preset/StatePreset.js +69 -91
- package/dist/components/form-control/state-preset/StatePreset.js.map +2 -2
- package/dist/components/layout/FormGroup.js +1 -1
- package/dist/components/layout/FormGroup.js.map +1 -1
- package/dist/components/layout/FormTable.js +3 -3
- package/dist/components/layout/FormTable.js.map +1 -1
- package/dist/components/layout/sidebar/Sidebar.d.ts.map +1 -1
- package/dist/components/layout/sidebar/Sidebar.js +3 -6
- package/dist/components/layout/sidebar/Sidebar.js.map +2 -2
- package/dist/providers/i18n/locales/en.d.ts +2 -3
- package/dist/providers/i18n/locales/en.d.ts.map +1 -1
- package/dist/providers/i18n/locales/en.js +3 -4
- package/dist/providers/i18n/locales/en.js.map +1 -1
- package/dist/providers/i18n/locales/ko.d.ts +2 -3
- package/dist/providers/i18n/locales/ko.d.ts.map +1 -1
- package/dist/providers/i18n/locales/ko.js +3 -4
- package/dist/providers/i18n/locales/ko.js.map +1 -1
- package/docs/display-feedback.md +279 -0
- package/docs/features.md +357 -213
- package/docs/form-controls.md +261 -403
- package/docs/layout-data.md +386 -0
- package/docs/providers-hooks.md +411 -0
- package/package.json +5 -5
- package/src/components/data/list/ListItem.styles.ts +14 -2
- package/src/components/data/list/ListItem.tsx +13 -4
- package/src/components/features/crud-sheet/CrudSheet.tsx +8 -0
- package/src/components/features/data-select-button/DataSelectButton.tsx +39 -32
- package/src/components/features/permission-table/PermissionTable.tsx +1 -1
- package/src/components/form-control/DropdownTrigger.styles.ts +1 -1
- package/src/components/form-control/combobox/Combobox.tsx +42 -16
- package/src/components/form-control/date-range-picker/DateRangePicker.tsx +6 -4
- package/src/components/form-control/editor/RichTextEditor.tsx +5 -6
- package/src/components/form-control/field/DatePicker.tsx +3 -2
- package/src/components/form-control/field/DateTimePicker.tsx +3 -2
- package/src/components/form-control/field/Field.styles.ts +6 -8
- package/src/components/form-control/field/NumberInput.tsx +3 -2
- package/src/components/form-control/field/TextInput.tsx +3 -2
- package/src/components/form-control/field/Textarea.tsx +3 -2
- package/src/components/form-control/field/TimePicker.tsx +3 -2
- package/src/components/form-control/numpad/Numpad.tsx +16 -18
- package/src/components/form-control/select/Select.tsx +19 -5
- package/src/components/form-control/state-preset/StatePreset.tsx +32 -57
- package/src/components/layout/FormGroup.tsx +1 -1
- package/src/components/layout/FormTable.tsx +3 -3
- package/src/components/layout/sidebar/Sidebar.tsx +2 -3
- package/src/providers/i18n/locales/en.ts +2 -3
- package/src/providers/i18n/locales/ko.ts +2 -3
- package/tests/components/features/data-select-button/DataSelectButton.spec.tsx +62 -7
- package/tests/components/form-control/combobox/Combobox.spec.tsx +3 -3
- package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx +56 -0
- package/docs/data.md +0 -204
- package/docs/disclosure.md +0 -146
- package/docs/display.md +0 -125
- package/docs/feedback.md +0 -156
- package/docs/helpers.md +0 -173
- package/docs/hooks.md +0 -146
- package/docs/layout.md +0 -94
- package/docs/providers.md +0 -180
package/docs/hooks.md
DELETED
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
# Hooks
|
|
2
|
-
|
|
3
|
-
## useLocalStorage
|
|
4
|
-
|
|
5
|
-
```typescript
|
|
6
|
-
function useLocalStorage<TValue>(
|
|
7
|
-
key: string,
|
|
8
|
-
initialValue?: TValue,
|
|
9
|
-
): [Accessor<TValue | undefined>, StorageSetter<TValue>];
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
Reactive `localStorage` binding. Returns a signal-like tuple. Automatically serializes/deserializes values as JSON.
|
|
13
|
-
|
|
14
|
-
---
|
|
15
|
-
|
|
16
|
-
## useSyncConfig
|
|
17
|
-
|
|
18
|
-
```typescript
|
|
19
|
-
function useSyncConfig<TValue>(
|
|
20
|
-
key: string,
|
|
21
|
-
defaultValue: TValue,
|
|
22
|
-
): [Accessor<TValue>, Setter<TValue>, Accessor<boolean>];
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
Persisted configuration backed by `SyncStorageProvider`. Returns `[value, setValue, ready]`. The `ready` accessor becomes `true` once the stored value has been loaded.
|
|
26
|
-
|
|
27
|
-
---
|
|
28
|
-
|
|
29
|
-
## useLogger
|
|
30
|
-
|
|
31
|
-
```typescript
|
|
32
|
-
interface Logger {
|
|
33
|
-
log(...args: unknown[]): void;
|
|
34
|
-
info(...args: unknown[]): void;
|
|
35
|
-
warn(...args: unknown[]): void;
|
|
36
|
-
error(...args: unknown[]): void;
|
|
37
|
-
configure(fn: (origin: LogAdapter) => LogAdapter): void;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
function useLogger(): Logger;
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
Access the logging system from `LoggerProvider`. Supports middleware composition via `configure()`.
|
|
44
|
-
|
|
45
|
-
---
|
|
46
|
-
|
|
47
|
-
## createControllableSignal
|
|
48
|
-
|
|
49
|
-
```typescript
|
|
50
|
-
function createControllableSignal<TValue>(options: {
|
|
51
|
-
value: Accessor<TValue>;
|
|
52
|
-
onChange: Accessor<((value: TValue) => void) | undefined>;
|
|
53
|
-
}): [Accessor<TValue>, (newValue: TValue | ((prev: TValue) => TValue)) => TValue];
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
Creates a signal that supports both controlled and uncontrolled modes. When `onChange` is provided, the component is controlled; otherwise, internal state is used. This is the primitive behind all form control `value`/`onValueChange` pairs.
|
|
57
|
-
|
|
58
|
-
---
|
|
59
|
-
|
|
60
|
-
## createControllableStore
|
|
61
|
-
|
|
62
|
-
```typescript
|
|
63
|
-
function createControllableStore<TValue extends object>(options: {
|
|
64
|
-
value: () => TValue;
|
|
65
|
-
onChange: () => ((value: TValue) => void) | undefined;
|
|
66
|
-
}): [TValue, SetStoreFunction<TValue>];
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
Like `createControllableSignal` but for SolidJS stores (deep reactive objects).
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## createIMEHandler
|
|
74
|
-
|
|
75
|
-
```typescript
|
|
76
|
-
function createIMEHandler(setValue: (value: string) => void): {
|
|
77
|
-
composingValue: Accessor<string | null>;
|
|
78
|
-
handleCompositionStart(): void;
|
|
79
|
-
handleInput(value: string, isComposing: boolean): void;
|
|
80
|
-
handleCompositionEnd(value: string): void;
|
|
81
|
-
flushComposition(): void;
|
|
82
|
-
};
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
Handles IME composition events (Korean, Chinese, Japanese input). Buffers intermediate composition states and only commits the final value. Used internally by `TextInput` and `Textarea`.
|
|
86
|
-
|
|
87
|
-
---
|
|
88
|
-
|
|
89
|
-
## createMountTransition
|
|
90
|
-
|
|
91
|
-
```typescript
|
|
92
|
-
function createMountTransition(
|
|
93
|
-
open: () => boolean,
|
|
94
|
-
): {
|
|
95
|
-
mounted: () => boolean;
|
|
96
|
-
animating: () => boolean;
|
|
97
|
-
unmount: () => void;
|
|
98
|
-
};
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
Manages mount/unmount transitions. While `open()` is true, `mounted` and `animating` are true. When `open()` becomes false, `animating` becomes false (triggering CSS transition), and `unmount()` should be called after the transition ends to set `mounted` to false.
|
|
102
|
-
|
|
103
|
-
---
|
|
104
|
-
|
|
105
|
-
## useRouterLink
|
|
106
|
-
|
|
107
|
-
```typescript
|
|
108
|
-
interface RouterLinkOptions {
|
|
109
|
-
href: string;
|
|
110
|
-
state?: Record<string, unknown>;
|
|
111
|
-
window?: { width?: number; height?: number };
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
function useRouterLink(): (options: RouterLinkOptions) => (e: MouseEvent | KeyboardEvent) => void;
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
Creates click handlers for SolidJS Router navigation. Supports opening links in new windows with specified dimensions via the `window` option.
|
|
118
|
-
|
|
119
|
-
---
|
|
120
|
-
|
|
121
|
-
## Usage Examples
|
|
122
|
-
|
|
123
|
-
```typescript
|
|
124
|
-
import {
|
|
125
|
-
useLocalStorage,
|
|
126
|
-
useSyncConfig,
|
|
127
|
-
createControllableSignal,
|
|
128
|
-
useLogger,
|
|
129
|
-
} from "@simplysm/solid";
|
|
130
|
-
|
|
131
|
-
// Local storage
|
|
132
|
-
const [theme, setTheme] = useLocalStorage<string>("app-theme", "light");
|
|
133
|
-
|
|
134
|
-
// Sync config (persisted to SyncStorageProvider)
|
|
135
|
-
const [pageSize, setPageSize, ready] = useSyncConfig("pageSize", 20);
|
|
136
|
-
|
|
137
|
-
// Logger
|
|
138
|
-
const logger = useLogger();
|
|
139
|
-
logger.info("Application started");
|
|
140
|
-
|
|
141
|
-
// Controlled/uncontrolled primitive
|
|
142
|
-
const [value, setValue] = createControllableSignal({
|
|
143
|
-
value: () => props.value,
|
|
144
|
-
onChange: () => props.onValueChange,
|
|
145
|
-
});
|
|
146
|
-
```
|
package/docs/layout.md
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
# Layout
|
|
2
|
-
|
|
3
|
-
## FormGroup
|
|
4
|
-
|
|
5
|
-
```typescript
|
|
6
|
-
interface FormGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
|
|
7
|
-
inline?: boolean;
|
|
8
|
-
}
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
Groups form fields vertically (default) or horizontally with `inline`.
|
|
12
|
-
|
|
13
|
-
**Sub-component:** `FormGroup.Item` — `{ label?: JSX.Element } & JSX.HTMLAttributes<HTMLDivElement>`
|
|
14
|
-
|
|
15
|
-
---
|
|
16
|
-
|
|
17
|
-
## FormTable
|
|
18
|
-
|
|
19
|
-
```typescript
|
|
20
|
-
interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
Arranges form fields in a label-value table layout.
|
|
24
|
-
|
|
25
|
-
**Sub-components:**
|
|
26
|
-
- `FormTable.Row` — table row
|
|
27
|
-
- `FormTable.Item` — `{ label?: JSX.Element } & JSX.TdHTMLAttributes<HTMLTableCellElement>`
|
|
28
|
-
|
|
29
|
-
---
|
|
30
|
-
|
|
31
|
-
## Sidebar
|
|
32
|
-
|
|
33
|
-
```typescript
|
|
34
|
-
interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
|
|
35
|
-
children: JSX.Element;
|
|
36
|
-
}
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
Collapsible sidebar navigation. Must be wrapped in `Sidebar.Container`.
|
|
40
|
-
|
|
41
|
-
**Sub-components:**
|
|
42
|
-
- `Sidebar.Container` — layout wrapper that includes both sidebar and main content
|
|
43
|
-
- `Sidebar.Menu` — `{ menus: AppMenu[] }` — renders navigation tree from `AppMenu` data
|
|
44
|
-
- `Sidebar.User` — `{ name: string; icon?: Component; description?: string; menus?: SidebarUserMenu[] }` — user profile section with optional dropdown menus
|
|
45
|
-
|
|
46
|
-
**Hook:** `useSidebar()` — access sidebar state (collapsed, toggle, etc.)
|
|
47
|
-
|
|
48
|
-
---
|
|
49
|
-
|
|
50
|
-
## Topbar
|
|
51
|
-
|
|
52
|
-
```typescript
|
|
53
|
-
interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
|
|
54
|
-
children: JSX.Element;
|
|
55
|
-
}
|
|
56
|
-
```
|
|
57
|
-
|
|
58
|
-
Top navigation bar. Must be wrapped in `Topbar.Container`.
|
|
59
|
-
|
|
60
|
-
**Sub-components:**
|
|
61
|
-
- `Topbar.Container` — layout wrapper
|
|
62
|
-
- `Topbar.Menu` — `{ menus: TopbarMenuItem[] }` — renders top-level navigation
|
|
63
|
-
- `Topbar.User` — `{ menus?: TopbarUserMenu[]; children: JSX.Element }` — user section with dropdown
|
|
64
|
-
|
|
65
|
-
**Hooks:**
|
|
66
|
-
- `useTopbarActionsAccessor()` — access topbar actions element
|
|
67
|
-
- `useTopbarActions(accessor)` — register topbar actions from child components
|
|
68
|
-
|
|
69
|
-
---
|
|
70
|
-
|
|
71
|
-
## Usage Examples
|
|
72
|
-
|
|
73
|
-
```typescript
|
|
74
|
-
import { Sidebar, FormGroup, FormTable } from "@simplysm/solid";
|
|
75
|
-
|
|
76
|
-
// Sidebar layout
|
|
77
|
-
<Sidebar.Container>
|
|
78
|
-
<Sidebar>
|
|
79
|
-
<Sidebar.User name="John" description="Admin" />
|
|
80
|
-
<Sidebar.Menu menus={appMenus} />
|
|
81
|
-
</Sidebar>
|
|
82
|
-
<main>Content</main>
|
|
83
|
-
</Sidebar.Container>
|
|
84
|
-
|
|
85
|
-
// Form with labeled fields
|
|
86
|
-
<FormGroup>
|
|
87
|
-
<FormGroup.Item label="Name">
|
|
88
|
-
<TextInput value={name()} onValueChange={setName} />
|
|
89
|
-
</FormGroup.Item>
|
|
90
|
-
<FormGroup.Item label="Email">
|
|
91
|
-
<TextInput value={email()} onValueChange={setEmail} type="email" />
|
|
92
|
-
</FormGroup.Item>
|
|
93
|
-
</FormGroup>
|
|
94
|
-
```
|
package/docs/providers.md
DELETED
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
# Providers
|
|
2
|
-
|
|
3
|
-
## ConfigProvider
|
|
4
|
-
|
|
5
|
-
```typescript
|
|
6
|
-
export const ConfigProvider: ParentComponent<{ clientName: string }>;
|
|
7
|
-
export function useConfig(): { clientName: string };
|
|
8
|
-
```
|
|
9
|
-
|
|
10
|
-
Application-level configuration. `clientName` identifies the client app and is used as a storage key prefix.
|
|
11
|
-
|
|
12
|
-
---
|
|
13
|
-
|
|
14
|
-
## ThemeProvider
|
|
15
|
-
|
|
16
|
-
```typescript
|
|
17
|
-
type ThemeMode = "light" | "dark" | "system";
|
|
18
|
-
type ResolvedTheme = "light" | "dark";
|
|
19
|
-
|
|
20
|
-
interface ThemeContextValue {
|
|
21
|
-
mode(): ThemeMode;
|
|
22
|
-
setMode(mode: ThemeMode): void;
|
|
23
|
-
resolvedTheme(): ResolvedTheme;
|
|
24
|
-
cycleMode(): void;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
export const ThemeProvider: ParentComponent;
|
|
28
|
-
export function useTheme(): ThemeContextValue;
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
Light/Dark mode management with system preference detection. `cycleMode()` rotates through light -> system -> dark -> light. The selected mode is persisted via `SyncStorageProvider`.
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## I18nProvider
|
|
36
|
-
|
|
37
|
-
```typescript
|
|
38
|
-
interface I18nContextValue {
|
|
39
|
-
t(key: string, params?: Record<string, string>): string;
|
|
40
|
-
locale: Accessor<string>;
|
|
41
|
-
setLocale(locale: string): void;
|
|
42
|
-
configure(options: I18nConfigureOptions): void;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
interface I18nConfigureOptions {
|
|
46
|
-
locale?: string;
|
|
47
|
-
dict?: Record<string, Record<string, unknown>>;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export const I18nProvider: ParentComponent;
|
|
51
|
-
export function useI18n(): I18nContextValue;
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
Internationalization provider. Built-in dictionaries for `"en"` and `"ko"`. Supports nested dictionary keys and parameter interpolation via `t("key", { name: "John" })`. The locale is auto-detected from `navigator.language` and persisted via `SyncStorageProvider`. Use `configure()` to add or override dictionaries.
|
|
55
|
-
|
|
56
|
-
---
|
|
57
|
-
|
|
58
|
-
## SyncStorageProvider
|
|
59
|
-
|
|
60
|
-
```typescript
|
|
61
|
-
interface StorageAdapter {
|
|
62
|
-
getItem(key: string): string | null | Promise<string | null>;
|
|
63
|
-
setItem(key: string, value: string): void | Promise<unknown>;
|
|
64
|
-
removeItem(key: string): void | Promise<void>;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
interface SyncStorageContextValue {
|
|
68
|
-
adapter: Accessor<StorageAdapter>;
|
|
69
|
-
configure(fn: (origin: StorageAdapter) => StorageAdapter): void;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
export const SyncStorageProvider: ParentComponent;
|
|
73
|
-
export function useSyncStorage(): SyncStorageContextValue | undefined;
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
Pluggable storage adapter used by components like `StatePreset`, `DataSheet` (column config), and `useSyncConfig`. Defaults to `localStorage`. Override with `configure()` for server-backed storage.
|
|
77
|
-
|
|
78
|
-
---
|
|
79
|
-
|
|
80
|
-
## LoggerProvider
|
|
81
|
-
|
|
82
|
-
```typescript
|
|
83
|
-
interface LogAdapter {
|
|
84
|
-
write(severity: "error" | "warn" | "info" | "log", ...data: any[]): Promise<void> | void;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
interface LoggerContextValue {
|
|
88
|
-
adapter: Accessor<LogAdapter>;
|
|
89
|
-
configure(fn: (origin: LogAdapter) => LogAdapter): void;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
export const LoggerProvider: ParentComponent;
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
Configurable logging provider. Defaults to a `consola`-based adapter. Middleware pattern via `configure()`.
|
|
96
|
-
|
|
97
|
-
---
|
|
98
|
-
|
|
99
|
-
## ServiceClientProvider
|
|
100
|
-
|
|
101
|
-
```typescript
|
|
102
|
-
interface ServiceClientContextValue {
|
|
103
|
-
connect(key?: string, options?: Partial<ServiceConnectionOptions>): Promise<void>;
|
|
104
|
-
close(key?: string): Promise<void>;
|
|
105
|
-
get(key?: string): ServiceClient;
|
|
106
|
-
isConnected(key?: string): boolean;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
export const ServiceClientProvider: ParentComponent;
|
|
110
|
-
export function useServiceClient(): ServiceClientContextValue;
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
Service communication provider. Manages WebSocket connections to backend services. Multiple named connections supported via `key` (defaults to `"default"`). Auto-infers host, port, and SSL from `window.location` when not specified.
|
|
114
|
-
|
|
115
|
-
---
|
|
116
|
-
|
|
117
|
-
## SharedDataProvider
|
|
118
|
-
|
|
119
|
-
```typescript
|
|
120
|
-
interface SharedDataDefinition<TData> {
|
|
121
|
-
serviceKey?: string;
|
|
122
|
-
fetch(changeKeys?: (string | number)[]): Promise<TData[]>;
|
|
123
|
-
getKey(item: TData): string | number;
|
|
124
|
-
orderBy: [(item: TData) => unknown, "asc" | "desc"][];
|
|
125
|
-
filter?: unknown;
|
|
126
|
-
itemSearchText?: (item: TData) => string;
|
|
127
|
-
isItemHidden?: (item: TData) => boolean;
|
|
128
|
-
getParentKey?: (item: TData) => string | number | undefined;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
interface SharedDataAccessor<TData> {
|
|
132
|
-
items: Accessor<TData[]>;
|
|
133
|
-
get(key: string | number | undefined): TData | undefined;
|
|
134
|
-
emit(changeKeys?: (string | number)[]): Promise<void>;
|
|
135
|
-
getKey(item: TData): string | number;
|
|
136
|
-
itemSearchText?: (item: TData) => string;
|
|
137
|
-
isItemHidden?: (item: TData) => boolean;
|
|
138
|
-
getParentKey?: (item: TData) => string | number | undefined;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
export const SharedDataProvider: (props: { children: JSX.Element }) => JSX.Element;
|
|
142
|
-
export function useSharedData<TSharedData>(): SharedDataValue<TSharedData>;
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
Centralized data management for shared lookup data (e.g. code tables). Data is fetched once and shared across all consumers. `emit()` triggers a re-fetch. Must be used inside `ServiceClientProvider`.
|
|
146
|
-
|
|
147
|
-
The returned `SharedDataValue` also provides:
|
|
148
|
-
- `wait()` -- wait until all initial fetches complete
|
|
149
|
-
- `busy` -- whether a fetch is in progress
|
|
150
|
-
- `configure()` -- set definitions to start data subscriptions (can only be called once)
|
|
151
|
-
|
|
152
|
-
---
|
|
153
|
-
|
|
154
|
-
## SystemProvider
|
|
155
|
-
|
|
156
|
-
```typescript
|
|
157
|
-
export const SystemProvider: ParentComponent<{
|
|
158
|
-
clientName: string;
|
|
159
|
-
busyVariant?: BusyVariant;
|
|
160
|
-
}>;
|
|
161
|
-
```
|
|
162
|
-
|
|
163
|
-
Convenience provider that composes `ConfigProvider`, `I18nProvider`, `SyncStorageProvider`, `LoggerProvider`, `NotificationProvider`, `ErrorLoggerProvider`, `PwaUpdateProvider`, `ClipboardProvider`, `ThemeProvider`, `ServiceClientProvider`, `SharedDataProvider`, and `BusyProvider` into a single wrapper.
|
|
164
|
-
|
|
165
|
-
---
|
|
166
|
-
|
|
167
|
-
## Usage Examples
|
|
168
|
-
|
|
169
|
-
```typescript
|
|
170
|
-
import { SystemProvider, DialogProvider, PrintProvider } from "@simplysm/solid";
|
|
171
|
-
|
|
172
|
-
// Typical app provider tree
|
|
173
|
-
<SystemProvider clientName="my-app">
|
|
174
|
-
<DialogProvider>
|
|
175
|
-
<PrintProvider>
|
|
176
|
-
<App />
|
|
177
|
-
</PrintProvider>
|
|
178
|
-
</DialogProvider>
|
|
179
|
-
</SystemProvider>
|
|
180
|
-
```
|