dialkit 1.1.0 → 1.2.1
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 +174 -2
- package/dist/icons.d.ts +19 -0
- package/dist/icons.js +39 -0
- package/dist/icons.js.map +1 -0
- package/dist/index.cjs +876 -337
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +41 -6
- package/dist/index.d.ts +41 -6
- package/dist/index.js +878 -341
- package/dist/index.js.map +1 -1
- package/dist/shortcut-utils.d.ts +39 -0
- package/dist/shortcut-utils.js +100 -0
- package/dist/shortcut-utils.js.map +1 -0
- package/dist/solid/index.cjs +1011 -544
- package/dist/solid/index.cjs.map +1 -1
- package/dist/solid/index.d.cts +33 -3
- package/dist/solid/index.d.ts +33 -3
- package/dist/solid/index.js +864 -398
- package/dist/solid/index.js.map +1 -1
- package/dist/store/index.cjs +52 -12
- package/dist/store/index.cjs.map +1 -1
- package/dist/store/index.d.cts +25 -3
- package/dist/store/index.d.ts +25 -3
- package/dist/store/index.js +52 -12
- package/dist/store/index.js.map +1 -1
- package/dist/styles.css +256 -25
- package/dist/svelte/components/ControlRenderer.svelte +12 -0
- package/dist/svelte/components/ControlRenderer.svelte.d.ts.map +1 -1
- package/dist/svelte/components/DialRoot.svelte +22 -8
- package/dist/svelte/components/DialRoot.svelte.d.ts +3 -0
- package/dist/svelte/components/DialRoot.svelte.d.ts.map +1 -1
- package/dist/svelte/components/Folder.svelte +17 -8
- package/dist/svelte/components/Folder.svelte.d.ts.map +1 -1
- package/dist/svelte/components/Panel.svelte +14 -9
- package/dist/svelte/components/Panel.svelte.d.ts.map +1 -1
- package/dist/svelte/components/PresetManager.svelte +7 -6
- package/dist/svelte/components/PresetManager.svelte.d.ts.map +1 -1
- package/dist/svelte/components/SegmentedControl.svelte +30 -74
- package/dist/svelte/components/SegmentedControl.svelte.d.ts.map +1 -1
- package/dist/svelte/components/SelectControl.svelte +2 -1
- package/dist/svelte/components/SelectControl.svelte.d.ts.map +1 -1
- package/dist/svelte/components/ShortcutListener.svelte +265 -0
- package/dist/svelte/components/ShortcutListener.svelte.d.ts +13 -0
- package/dist/svelte/components/ShortcutListener.svelte.d.ts.map +1 -0
- package/dist/svelte/components/ShortcutsMenu.svelte +128 -0
- package/dist/svelte/components/ShortcutsMenu.svelte.d.ts +7 -0
- package/dist/svelte/components/ShortcutsMenu.svelte.d.ts.map +1 -0
- package/dist/svelte/components/Slider.svelte +16 -29
- package/dist/svelte/components/Slider.svelte.d.ts +3 -0
- package/dist/svelte/components/Slider.svelte.d.ts.map +1 -1
- package/dist/svelte/components/SpringControl.svelte +17 -15
- package/dist/svelte/components/SpringControl.svelte.d.ts.map +1 -1
- package/dist/svelte/components/Toggle.svelte +13 -2
- package/dist/svelte/components/Toggle.svelte.d.ts +3 -0
- package/dist/svelte/components/Toggle.svelte.d.ts.map +1 -1
- package/dist/svelte/components/TransitionControl.svelte +28 -25
- package/dist/svelte/components/TransitionControl.svelte.d.ts.map +1 -1
- package/dist/svelte/createDialKit.svelte.d.ts +2 -1
- package/dist/svelte/createDialKit.svelte.d.ts.map +1 -1
- package/dist/svelte/createDialKit.svelte.js +1 -1
- package/dist/svelte/index.d.ts +6 -2
- package/dist/svelte/index.d.ts.map +1 -1
- package/dist/svelte/index.js +4 -0
- package/dist/svelte/theme-css.d.ts +1 -1
- package/dist/svelte/theme-css.d.ts.map +1 -1
- package/dist/svelte/theme-css.js +257 -26
- package/dist/vue/index.cjs +3056 -0
- package/dist/vue/index.cjs.map +1 -0
- package/dist/vue/index.d.cts +675 -0
- package/dist/vue/index.d.ts +675 -0
- package/dist/vue/index.js +3014 -0
- package/dist/vue/index.js.map +1 -0
- package/package.json +24 -4
package/dist/solid/index.d.cts
CHANGED
|
@@ -43,6 +43,14 @@ type DialConfig = {
|
|
|
43
43
|
type ResolvedValues<T extends DialConfig> = {
|
|
44
44
|
[K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? TransitionConfig : T[K] extends EasingConfig ? TransitionConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
|
|
45
45
|
};
|
|
46
|
+
type ShortcutMode = 'fine' | 'normal' | 'coarse';
|
|
47
|
+
type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
|
|
48
|
+
type ShortcutConfig = {
|
|
49
|
+
key?: string;
|
|
50
|
+
modifier?: 'alt' | 'shift' | 'meta';
|
|
51
|
+
mode?: ShortcutMode;
|
|
52
|
+
interaction?: ShortcutInteraction;
|
|
53
|
+
};
|
|
46
54
|
type ControlMeta = {
|
|
47
55
|
type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
|
|
48
56
|
path: string;
|
|
@@ -57,12 +65,14 @@ type ControlMeta = {
|
|
|
57
65
|
label: string;
|
|
58
66
|
})[];
|
|
59
67
|
placeholder?: string;
|
|
68
|
+
shortcut?: ShortcutConfig;
|
|
60
69
|
};
|
|
61
70
|
type PanelConfig = {
|
|
62
71
|
id: string;
|
|
63
72
|
name: string;
|
|
64
73
|
controls: ControlMeta[];
|
|
65
74
|
values: Record<string, DialValue>;
|
|
75
|
+
shortcuts: Record<string, ShortcutConfig>;
|
|
66
76
|
};
|
|
67
77
|
type Listener = () => void;
|
|
68
78
|
type ActionListener = (action: string) => void;
|
|
@@ -80,8 +90,8 @@ declare class DialStoreClass {
|
|
|
80
90
|
private presets;
|
|
81
91
|
private activePreset;
|
|
82
92
|
private baseValues;
|
|
83
|
-
registerPanel(id: string, name: string, config: DialConfig): void;
|
|
84
|
-
updatePanel(id: string, name: string, config: DialConfig): void;
|
|
93
|
+
registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
|
|
94
|
+
updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
|
|
85
95
|
unregisterPanel(id: string): void;
|
|
86
96
|
updateValue(panelId: string, path: string, value: DialValue): void;
|
|
87
97
|
updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
|
|
@@ -102,6 +112,18 @@ declare class DialStoreClass {
|
|
|
102
112
|
getPresets(panelId: string): Preset[];
|
|
103
113
|
getActivePresetId(panelId: string): string | null;
|
|
104
114
|
clearActivePreset(panelId: string): void;
|
|
115
|
+
resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
|
|
116
|
+
panelId: string;
|
|
117
|
+
path: string;
|
|
118
|
+
control: ControlMeta;
|
|
119
|
+
} | null;
|
|
120
|
+
resolveScrollOnlyTargets(): Array<{
|
|
121
|
+
panelId: string;
|
|
122
|
+
path: string;
|
|
123
|
+
control: ControlMeta;
|
|
124
|
+
shortcut: ShortcutConfig;
|
|
125
|
+
}>;
|
|
126
|
+
private findControlByPath;
|
|
105
127
|
private notify;
|
|
106
128
|
private notifyGlobal;
|
|
107
129
|
private initTransitionModes;
|
|
@@ -126,15 +148,19 @@ declare const DialStore: DialStoreClass;
|
|
|
126
148
|
|
|
127
149
|
interface CreateDialOptions {
|
|
128
150
|
onAction?: (action: string) => void;
|
|
151
|
+
shortcuts?: Record<string, ShortcutConfig>;
|
|
129
152
|
}
|
|
130
153
|
declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): Accessor<ResolvedValues<T>>;
|
|
131
154
|
|
|
132
155
|
type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
133
156
|
type DialMode = 'popover' | 'inline';
|
|
157
|
+
type DialTheme = 'light' | 'dark' | 'system';
|
|
134
158
|
interface DialRootProps {
|
|
135
159
|
position?: DialPosition;
|
|
136
160
|
defaultOpen?: boolean;
|
|
137
161
|
mode?: DialMode;
|
|
162
|
+
theme?: DialTheme;
|
|
163
|
+
productionEnabled?: boolean;
|
|
138
164
|
}
|
|
139
165
|
declare function DialRoot(props: DialRootProps): solid_js.JSX.Element;
|
|
140
166
|
|
|
@@ -146,6 +172,8 @@ interface SliderProps {
|
|
|
146
172
|
max?: number;
|
|
147
173
|
step?: number;
|
|
148
174
|
unit?: string;
|
|
175
|
+
shortcut?: ShortcutConfig;
|
|
176
|
+
shortcutActive?: boolean;
|
|
149
177
|
}
|
|
150
178
|
declare function Slider(props: SliderProps): solid_js.JSX.Element;
|
|
151
179
|
|
|
@@ -153,6 +181,8 @@ interface ToggleProps {
|
|
|
153
181
|
label: string;
|
|
154
182
|
checked: boolean;
|
|
155
183
|
onChange: (checked: boolean) => void;
|
|
184
|
+
shortcut?: ShortcutConfig;
|
|
185
|
+
shortcutActive?: boolean;
|
|
156
186
|
}
|
|
157
187
|
declare function Toggle(props: ToggleProps): solid_js.JSX.Element;
|
|
158
188
|
|
|
@@ -225,4 +255,4 @@ interface PresetManagerProps {
|
|
|
225
255
|
}
|
|
226
256
|
declare function PresetManager(props: PresetManagerProps): solid_js.JSX.Element;
|
|
227
257
|
|
|
228
|
-
export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, 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, createDialKit };
|
|
258
|
+
export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, type ShortcutConfig, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, createDialKit };
|
package/dist/solid/index.d.ts
CHANGED
|
@@ -43,6 +43,14 @@ type DialConfig = {
|
|
|
43
43
|
type ResolvedValues<T extends DialConfig> = {
|
|
44
44
|
[K in keyof T]: T[K] extends [number, number, number, number?] ? number : T[K] extends SpringConfig ? TransitionConfig : T[K] extends EasingConfig ? TransitionConfig : T[K] extends SelectConfig ? string : T[K] extends ColorConfig ? string : T[K] extends TextConfig ? string : T[K] extends DialConfig ? ResolvedValues<T[K]> : T[K];
|
|
45
45
|
};
|
|
46
|
+
type ShortcutMode = 'fine' | 'normal' | 'coarse';
|
|
47
|
+
type ShortcutInteraction = 'scroll' | 'drag' | 'move' | 'scroll-only';
|
|
48
|
+
type ShortcutConfig = {
|
|
49
|
+
key?: string;
|
|
50
|
+
modifier?: 'alt' | 'shift' | 'meta';
|
|
51
|
+
mode?: ShortcutMode;
|
|
52
|
+
interaction?: ShortcutInteraction;
|
|
53
|
+
};
|
|
46
54
|
type ControlMeta = {
|
|
47
55
|
type: 'slider' | 'toggle' | 'spring' | 'transition' | 'folder' | 'action' | 'select' | 'color' | 'text';
|
|
48
56
|
path: string;
|
|
@@ -57,12 +65,14 @@ type ControlMeta = {
|
|
|
57
65
|
label: string;
|
|
58
66
|
})[];
|
|
59
67
|
placeholder?: string;
|
|
68
|
+
shortcut?: ShortcutConfig;
|
|
60
69
|
};
|
|
61
70
|
type PanelConfig = {
|
|
62
71
|
id: string;
|
|
63
72
|
name: string;
|
|
64
73
|
controls: ControlMeta[];
|
|
65
74
|
values: Record<string, DialValue>;
|
|
75
|
+
shortcuts: Record<string, ShortcutConfig>;
|
|
66
76
|
};
|
|
67
77
|
type Listener = () => void;
|
|
68
78
|
type ActionListener = (action: string) => void;
|
|
@@ -80,8 +90,8 @@ declare class DialStoreClass {
|
|
|
80
90
|
private presets;
|
|
81
91
|
private activePreset;
|
|
82
92
|
private baseValues;
|
|
83
|
-
registerPanel(id: string, name: string, config: DialConfig): void;
|
|
84
|
-
updatePanel(id: string, name: string, config: DialConfig): void;
|
|
93
|
+
registerPanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
|
|
94
|
+
updatePanel(id: string, name: string, config: DialConfig, shortcuts?: Record<string, ShortcutConfig>): void;
|
|
85
95
|
unregisterPanel(id: string): void;
|
|
86
96
|
updateValue(panelId: string, path: string, value: DialValue): void;
|
|
87
97
|
updateSpringMode(panelId: string, path: string, mode: 'simple' | 'advanced'): void;
|
|
@@ -102,6 +112,18 @@ declare class DialStoreClass {
|
|
|
102
112
|
getPresets(panelId: string): Preset[];
|
|
103
113
|
getActivePresetId(panelId: string): string | null;
|
|
104
114
|
clearActivePreset(panelId: string): void;
|
|
115
|
+
resolveShortcutTarget(key: string, modifier?: 'alt' | 'shift' | 'meta'): {
|
|
116
|
+
panelId: string;
|
|
117
|
+
path: string;
|
|
118
|
+
control: ControlMeta;
|
|
119
|
+
} | null;
|
|
120
|
+
resolveScrollOnlyTargets(): Array<{
|
|
121
|
+
panelId: string;
|
|
122
|
+
path: string;
|
|
123
|
+
control: ControlMeta;
|
|
124
|
+
shortcut: ShortcutConfig;
|
|
125
|
+
}>;
|
|
126
|
+
private findControlByPath;
|
|
105
127
|
private notify;
|
|
106
128
|
private notifyGlobal;
|
|
107
129
|
private initTransitionModes;
|
|
@@ -126,15 +148,19 @@ declare const DialStore: DialStoreClass;
|
|
|
126
148
|
|
|
127
149
|
interface CreateDialOptions {
|
|
128
150
|
onAction?: (action: string) => void;
|
|
151
|
+
shortcuts?: Record<string, ShortcutConfig>;
|
|
129
152
|
}
|
|
130
153
|
declare function createDialKit<T extends DialConfig>(name: string, config: T, options?: CreateDialOptions): Accessor<ResolvedValues<T>>;
|
|
131
154
|
|
|
132
155
|
type DialPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
|
|
133
156
|
type DialMode = 'popover' | 'inline';
|
|
157
|
+
type DialTheme = 'light' | 'dark' | 'system';
|
|
134
158
|
interface DialRootProps {
|
|
135
159
|
position?: DialPosition;
|
|
136
160
|
defaultOpen?: boolean;
|
|
137
161
|
mode?: DialMode;
|
|
162
|
+
theme?: DialTheme;
|
|
163
|
+
productionEnabled?: boolean;
|
|
138
164
|
}
|
|
139
165
|
declare function DialRoot(props: DialRootProps): solid_js.JSX.Element;
|
|
140
166
|
|
|
@@ -146,6 +172,8 @@ interface SliderProps {
|
|
|
146
172
|
max?: number;
|
|
147
173
|
step?: number;
|
|
148
174
|
unit?: string;
|
|
175
|
+
shortcut?: ShortcutConfig;
|
|
176
|
+
shortcutActive?: boolean;
|
|
149
177
|
}
|
|
150
178
|
declare function Slider(props: SliderProps): solid_js.JSX.Element;
|
|
151
179
|
|
|
@@ -153,6 +181,8 @@ interface ToggleProps {
|
|
|
153
181
|
label: string;
|
|
154
182
|
checked: boolean;
|
|
155
183
|
onChange: (checked: boolean) => void;
|
|
184
|
+
shortcut?: ShortcutConfig;
|
|
185
|
+
shortcutActive?: boolean;
|
|
156
186
|
}
|
|
157
187
|
declare function Toggle(props: ToggleProps): solid_js.JSX.Element;
|
|
158
188
|
|
|
@@ -225,4 +255,4 @@ interface PresetManagerProps {
|
|
|
225
255
|
}
|
|
226
256
|
declare function PresetManager(props: PresetManagerProps): solid_js.JSX.Element;
|
|
227
257
|
|
|
228
|
-
export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, 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, createDialKit };
|
|
258
|
+
export { type ActionConfig, ButtonGroup, type ColorConfig, ColorControl, type ControlMeta, type CreateDialOptions, type DialConfig, type DialMode, type DialPosition, DialRoot, DialStore, type DialTheme, type DialValue, Folder, type PanelConfig, type Preset, PresetManager, type ResolvedValues, type SelectConfig, SelectControl, type ShortcutConfig, Slider, type SpringConfig, SpringControl, SpringVisualization, type TextConfig, TextControl, Toggle, createDialKit };
|