dialkit 0.1.1 → 0.2.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/README.md +249 -74
- package/dist/index.cjs +902 -262
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +82 -17
- package/dist/index.d.ts +82 -17
- package/dist/index.js +909 -272
- package/dist/index.js.map +1 -1
- package/dist/styles.css +620 -44
- package/package.json +4 -1
package/dist/index.d.ts
CHANGED
|
@@ -14,21 +14,43 @@ type ActionConfig = {
|
|
|
14
14
|
type: 'action';
|
|
15
15
|
label?: string;
|
|
16
16
|
};
|
|
17
|
-
type
|
|
17
|
+
type SelectConfig = {
|
|
18
|
+
type: 'select';
|
|
19
|
+
options: (string | {
|
|
20
|
+
value: string;
|
|
21
|
+
label: string;
|
|
22
|
+
})[];
|
|
23
|
+
default?: string;
|
|
24
|
+
};
|
|
25
|
+
type ColorConfig = {
|
|
26
|
+
type: 'color';
|
|
27
|
+
default?: string;
|
|
28
|
+
};
|
|
29
|
+
type TextConfig = {
|
|
30
|
+
type: 'text';
|
|
31
|
+
default?: string;
|
|
32
|
+
placeholder?: string;
|
|
33
|
+
};
|
|
34
|
+
type DialValue = number | boolean | string | SpringConfig | ActionConfig | SelectConfig | ColorConfig | TextConfig;
|
|
18
35
|
type DialConfig = {
|
|
19
36
|
[key: string]: DialValue | [number, number, number] | DialConfig;
|
|
20
37
|
};
|
|
21
38
|
type ResolvedValues<T extends DialConfig> = {
|
|
22
|
-
[K in keyof T]: T[K] extends [number, number, number] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
|
|
39
|
+
[K in keyof T]: T[K] extends [number, number, number] ? number : T[K] extends SpringConfig ? SpringConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
|
|
23
40
|
};
|
|
24
41
|
type ControlMeta = {
|
|
25
|
-
type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action';
|
|
42
|
+
type: 'slider' | 'toggle' | 'spring' | 'folder' | 'action' | 'select' | 'color' | 'text';
|
|
26
43
|
path: string;
|
|
27
44
|
label: string;
|
|
28
45
|
min?: number;
|
|
29
46
|
max?: number;
|
|
30
47
|
step?: number;
|
|
31
48
|
children?: ControlMeta[];
|
|
49
|
+
options?: (string | {
|
|
50
|
+
value: string;
|
|
51
|
+
label: string;
|
|
52
|
+
})[];
|
|
53
|
+
placeholder?: string;
|
|
32
54
|
};
|
|
33
55
|
type PanelConfig = {
|
|
34
56
|
id: string;
|
|
@@ -38,12 +60,20 @@ type PanelConfig = {
|
|
|
38
60
|
};
|
|
39
61
|
type Listener = () => void;
|
|
40
62
|
type ActionListener = (action: string) => void;
|
|
63
|
+
type Preset = {
|
|
64
|
+
id: string;
|
|
65
|
+
name: string;
|
|
66
|
+
values: Record<string, DialValue>;
|
|
67
|
+
};
|
|
41
68
|
declare class DialStoreClass {
|
|
42
69
|
private panels;
|
|
43
70
|
private listeners;
|
|
44
71
|
private globalListeners;
|
|
45
72
|
private snapshots;
|
|
46
73
|
private actionListeners;
|
|
74
|
+
private presets;
|
|
75
|
+
private activePreset;
|
|
76
|
+
private baseValues;
|
|
47
77
|
registerPanel(id: string, name: string, config: DialConfig): void;
|
|
48
78
|
unregisterPanel(id: string): void;
|
|
49
79
|
updateValue(panelId: string, path: string, value: DialValue): void;
|
|
@@ -57,12 +87,22 @@ declare class DialStoreClass {
|
|
|
57
87
|
subscribeGlobal(listener: Listener): () => void;
|
|
58
88
|
subscribeActions(panelId: string, listener: ActionListener): () => void;
|
|
59
89
|
triggerAction(panelId: string, path: string): void;
|
|
90
|
+
savePreset(panelId: string, name: string): string;
|
|
91
|
+
loadPreset(panelId: string, presetId: string): void;
|
|
92
|
+
deletePreset(panelId: string, presetId: string): void;
|
|
93
|
+
getPresets(panelId: string): Preset[];
|
|
94
|
+
getActivePresetId(panelId: string): string | null;
|
|
95
|
+
clearActivePreset(panelId: string): void;
|
|
60
96
|
private notify;
|
|
61
97
|
private notifyGlobal;
|
|
62
98
|
private parseConfig;
|
|
63
99
|
private flattenValues;
|
|
64
100
|
private isSpringConfig;
|
|
65
101
|
private isActionConfig;
|
|
102
|
+
private isSelectConfig;
|
|
103
|
+
private isColorConfig;
|
|
104
|
+
private isTextConfig;
|
|
105
|
+
private isHexColor;
|
|
66
106
|
private formatLabel;
|
|
67
107
|
private inferRange;
|
|
68
108
|
private inferStep;
|
|
@@ -98,25 +138,15 @@ interface ToggleProps {
|
|
|
98
138
|
}
|
|
99
139
|
declare function Toggle({ label, checked, onChange }: ToggleProps): react_jsx_runtime.JSX.Element;
|
|
100
140
|
|
|
101
|
-
interface SegmentedControlOption<T extends string> {
|
|
102
|
-
value: T;
|
|
103
|
-
label: string;
|
|
104
|
-
}
|
|
105
|
-
interface SegmentedControlProps<T extends string> {
|
|
106
|
-
options: SegmentedControlOption<T>[];
|
|
107
|
-
value: T;
|
|
108
|
-
onChange: (value: T) => void;
|
|
109
|
-
}
|
|
110
|
-
declare function SegmentedControl<T extends string>({ options, value, onChange, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
|
|
111
|
-
|
|
112
141
|
interface FolderProps {
|
|
113
142
|
title: string;
|
|
114
143
|
children: ReactNode;
|
|
115
144
|
defaultOpen?: boolean;
|
|
116
145
|
isRoot?: boolean;
|
|
117
|
-
|
|
146
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
147
|
+
toolbar?: ReactNode;
|
|
118
148
|
}
|
|
119
|
-
declare function Folder({ title, children, defaultOpen, isRoot,
|
|
149
|
+
declare function Folder({ title, children, defaultOpen, isRoot, onOpenChange, toolbar }: FolderProps): react_jsx_runtime.JSX.Element;
|
|
120
150
|
|
|
121
151
|
interface ButtonGroupProps {
|
|
122
152
|
buttons: Array<{
|
|
@@ -141,4 +171,39 @@ interface SpringVisualizationProps {
|
|
|
141
171
|
}
|
|
142
172
|
declare function SpringVisualization({ spring, isSimpleMode }: SpringVisualizationProps): react_jsx_runtime.JSX.Element;
|
|
143
173
|
|
|
144
|
-
|
|
174
|
+
interface TextControlProps {
|
|
175
|
+
label: string;
|
|
176
|
+
value: string;
|
|
177
|
+
onChange: (value: string) => void;
|
|
178
|
+
placeholder?: string;
|
|
179
|
+
}
|
|
180
|
+
declare function TextControl({ label, value, onChange, placeholder }: TextControlProps): react_jsx_runtime.JSX.Element;
|
|
181
|
+
|
|
182
|
+
type SelectOption = string | {
|
|
183
|
+
value: string;
|
|
184
|
+
label: string;
|
|
185
|
+
};
|
|
186
|
+
interface SelectControlProps {
|
|
187
|
+
label: string;
|
|
188
|
+
value: string;
|
|
189
|
+
options: SelectOption[];
|
|
190
|
+
onChange: (value: string) => void;
|
|
191
|
+
}
|
|
192
|
+
declare function SelectControl({ label, value, options, onChange }: SelectControlProps): react_jsx_runtime.JSX.Element;
|
|
193
|
+
|
|
194
|
+
interface ColorControlProps {
|
|
195
|
+
label: string;
|
|
196
|
+
value: string;
|
|
197
|
+
onChange: (value: string) => void;
|
|
198
|
+
}
|
|
199
|
+
declare function ColorControl({ label, value, onChange }: ColorControlProps): react_jsx_runtime.JSX.Element;
|
|
200
|
+
|
|
201
|
+
interface PresetManagerProps {
|
|
202
|
+
panelId: string;
|
|
203
|
+
presets: Preset[];
|
|
204
|
+
activePresetId: string | null;
|
|
205
|
+
onAdd: () => void;
|
|
206
|
+
}
|
|
207
|
+
declare function PresetManager({ panelId, presets, activePresetId, onAdd }: PresetManagerProps): react_jsx_runtime.JSX.Element;
|
|
208
|
+
|
|
209
|
+
export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type DialConfig, type DialPosition, DialRoot, DialStore, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, type UseDialOptions, useDialKit };
|