@widgetic/editor 4.0.7 → 4.0.8
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 +12 -1
- package/dist/components/WidgetPreview.svelte +32 -1
- package/dist/components/WidgetPreview.svelte.d.ts +5 -0
- package/dist/components/editors/PropsEditor.svelte +171 -87
- package/dist/components/editors/PropsEditor.svelte.d.ts +3 -2
- package/dist/components/ic/AngleInputController.svelte +21 -7
- package/dist/components/ic/AngleInputController.svelte.d.ts +16 -6
- package/dist/components/ic/BrowserInputController.svelte +28 -15
- package/dist/components/ic/BrowserInputController.svelte.d.ts +25 -19
- package/dist/components/ic/CheckboxInputController.svelte +21 -7
- package/dist/components/ic/CheckboxInputController.svelte.d.ts +25 -15
- package/dist/components/ic/ColorPickerInputController.svelte +47 -19
- package/dist/components/ic/ColorPickerInputController.svelte.d.ts +42 -17
- package/dist/components/ic/DateFieldInputController.svelte +21 -7
- package/dist/components/ic/DateFieldInputController.svelte.d.ts +24 -14
- package/dist/components/ic/DatePickerInputController.svelte +25 -8
- package/dist/components/ic/DatePickerInputController.svelte.d.ts +21 -8
- package/dist/components/ic/DropdownInputController.svelte +39 -14
- package/dist/components/ic/DropdownInputController.svelte.d.ts +33 -17
- package/dist/components/ic/FixedPositionInputController.svelte +24 -10
- package/dist/components/ic/FixedPositionInputController.svelte.d.ts +16 -4
- package/dist/components/ic/FontInputController.svelte +28 -10
- package/dist/components/ic/FontInputController.svelte.d.ts +33 -18
- package/dist/components/ic/NumberInputController.svelte +23 -9
- package/dist/components/ic/NumberInputController.svelte.d.ts +18 -7
- package/dist/components/ic/PositionInputController.svelte +17 -5
- package/dist/components/ic/PositionInputController.svelte.d.ts +20 -11
- package/dist/components/ic/RadioGroupInputController.svelte +21 -7
- package/dist/components/ic/RadioGroupInputController.svelte.d.ts +22 -12
- package/dist/components/ic/RangeCalendarInputController.svelte +34 -16
- package/dist/components/ic/RangeCalendarInputController.svelte.d.ts +25 -11
- package/dist/components/ic/RoundedCornersInputController.svelte +24 -10
- package/dist/components/ic/RoundedCornersInputController.svelte.d.ts +26 -16
- package/dist/components/ic/SliderInputController.svelte +41 -18
- package/dist/components/ic/SliderInputController.svelte.d.ts +35 -19
- package/dist/components/ic/SliderRangeInputController.svelte +27 -11
- package/dist/components/ic/SliderRangeInputController.svelte.d.ts +22 -9
- package/dist/components/ic/SwitchInputController.svelte +17 -5
- package/dist/components/ic/SwitchInputController.svelte.d.ts +14 -5
- package/dist/components/ic/TagsInputController.svelte +21 -7
- package/dist/components/ic/TagsInputController.svelte.d.ts +16 -6
- package/dist/components/ic/TextAreaInputController.svelte +18 -12
- package/dist/components/ic/TextAreaInputController.svelte.d.ts +6 -4
- package/dist/components/ic/TextAreaPreviewInputController.svelte +21 -7
- package/dist/components/ic/TextAreaPreviewInputController.svelte.d.ts +16 -6
- package/dist/components/ic/TextInputController.svelte +23 -8
- package/dist/components/ic/TextInputController.svelte.d.ts +20 -8
- package/dist/components/ic/TimeInputController.svelte +17 -5
- package/dist/components/ic/TimeInputController.svelte.d.ts +14 -5
- package/dist/components/ic/VectorInputController.svelte +29 -10
- package/dist/components/ic/VectorInputController.svelte.d.ts +33 -18
- package/dist/index.d.ts +1 -0
- package/dist/schemaViews.d.ts +105 -0
- package/dist/schemaViews.js +11 -0
- package/dist/utils/FontManager.js +1 -1
- package/package.json +9 -6
|
@@ -1,4 +1,26 @@
|
|
|
1
|
+
import type { Writable } from 'svelte/store';
|
|
1
2
|
import type { InputControllerConfig } from './index';
|
|
3
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
4
|
+
* interface cannot drift from what the component actually reads. */
|
|
5
|
+
export interface DropdownInputControllerProps {
|
|
6
|
+
label: string;
|
|
7
|
+
defaultSelectedLabel?: string;
|
|
8
|
+
value: string | {
|
|
9
|
+
value: string;
|
|
10
|
+
label: string;
|
|
11
|
+
};
|
|
12
|
+
onChange: (newValue: string) => void;
|
|
13
|
+
config?: InputControllerConfig;
|
|
14
|
+
options?: {
|
|
15
|
+
value: string;
|
|
16
|
+
label: string;
|
|
17
|
+
}[];
|
|
18
|
+
description?: string;
|
|
19
|
+
controllerId: string;
|
|
20
|
+
openDropdowns: Writable<Set<string>>;
|
|
21
|
+
toggleDropdown: (id: string) => void;
|
|
22
|
+
onFocus?: () => void;
|
|
23
|
+
}
|
|
2
24
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
25
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
26
|
$$bindings?: Bindings;
|
|
@@ -16,26 +38,20 @@ declare const DropdownInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
16
38
|
/**
|
|
17
39
|
* Component Props
|
|
18
40
|
* External properties that configure the dropdown's behavior and appearance
|
|
19
|
-
*/ label:
|
|
20
|
-
defaultSelectedLabel?:
|
|
21
|
-
value:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
25
|
-
onChange: (newValue: string) => void;
|
|
26
|
-
config?: InputControllerConfig;
|
|
41
|
+
*/ label: DropdownInputControllerProps["label"];
|
|
42
|
+
defaultSelectedLabel?: DropdownInputControllerProps["defaultSelectedLabel"];
|
|
43
|
+
value: DropdownInputControllerProps["value"];
|
|
44
|
+
onChange: DropdownInputControllerProps["onChange"];
|
|
45
|
+
config?: DropdownInputControllerProps["config"];
|
|
27
46
|
/**
|
|
28
47
|
* Configuration Options
|
|
29
48
|
* Derived from config prop with fallbacks
|
|
30
|
-
*/ options?:
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
openDropdowns: any;
|
|
37
|
-
toggleDropdown: (id: string) => void;
|
|
38
|
-
onFocus?: () => void;
|
|
49
|
+
*/ options?: DropdownInputControllerProps["options"];
|
|
50
|
+
description?: DropdownInputControllerProps["description"];
|
|
51
|
+
controllerId: DropdownInputControllerProps["controllerId"];
|
|
52
|
+
openDropdowns: DropdownInputControllerProps["openDropdowns"];
|
|
53
|
+
toggleDropdown: DropdownInputControllerProps["toggleDropdown"];
|
|
54
|
+
onFocus?: DropdownInputControllerProps["onFocus"];
|
|
39
55
|
}, {
|
|
40
56
|
[evt: string]: CustomEvent<any>;
|
|
41
57
|
}, {}, {}, string>;
|
|
@@ -17,6 +17,26 @@
|
|
|
17
17
|
* - Manages dynamic SVG creation and disposal
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
|
+
<script module lang="ts">
|
|
21
|
+
/** The nine grid alignments the controller can select — shared between the
|
|
22
|
+
* props contract above and the instance script below. */
|
|
23
|
+
const positions = [
|
|
24
|
+
'top-left', 'top-center', 'top-right',
|
|
25
|
+
'center-left', 'center-center', 'center-right',
|
|
26
|
+
'bottom-left', 'bottom-center', 'bottom-right'
|
|
27
|
+
] as const;
|
|
28
|
+
type Position = typeof positions[number];
|
|
29
|
+
|
|
30
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
31
|
+
* interface cannot drift from what the component actually reads. */
|
|
32
|
+
export interface FixedPositionInputControllerProps {
|
|
33
|
+
value?: Position;
|
|
34
|
+
onChange: (newValue: Position) => void;
|
|
35
|
+
onFocus?: () => void;
|
|
36
|
+
id?: string;
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
39
|
+
|
|
20
40
|
<script lang="ts">
|
|
21
41
|
// Svelte imports
|
|
22
42
|
import { onDestroy } from 'svelte';
|
|
@@ -79,21 +99,15 @@
|
|
|
79
99
|
};
|
|
80
100
|
|
|
81
101
|
// Component props
|
|
82
|
-
export let value:
|
|
83
|
-
export let onChange:
|
|
84
|
-
export let onFocus:
|
|
85
|
-
export let id:
|
|
102
|
+
export let value: FixedPositionInputControllerProps['value'] = 'bottom-right';
|
|
103
|
+
export let onChange: FixedPositionInputControllerProps['onChange'];
|
|
104
|
+
export let onFocus: FixedPositionInputControllerProps['onFocus'] = () => {};
|
|
105
|
+
export let id: FixedPositionInputControllerProps['id'] = undefined;
|
|
86
106
|
|
|
87
107
|
/**
|
|
88
108
|
* Defines all valid position combinations in a 3x3 grid
|
|
89
109
|
* Order matters for visual layout and keyboard navigation
|
|
90
110
|
*/
|
|
91
|
-
const positions = [
|
|
92
|
-
'top-left', 'top-center', 'top-right',
|
|
93
|
-
'center-left', 'center-center', 'center-right',
|
|
94
|
-
'bottom-left', 'bottom-center', 'bottom-right'
|
|
95
|
-
] as const;
|
|
96
|
-
|
|
97
111
|
type Position = typeof positions[number];
|
|
98
112
|
|
|
99
113
|
// Map positions to their corresponding icons
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
/** The nine grid alignments the controller can select — shared between the
|
|
2
|
+
* props contract above and the instance script below. */
|
|
3
|
+
declare const positions: readonly ["top-left", "top-center", "top-right", "center-left", "center-center", "center-right", "bottom-left", "bottom-center", "bottom-right"];
|
|
4
|
+
type Position = typeof positions[number];
|
|
5
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
6
|
+
* interface cannot drift from what the component actually reads. */
|
|
7
|
+
export interface FixedPositionInputControllerProps {
|
|
8
|
+
value?: Position;
|
|
9
|
+
onChange: (newValue: Position) => void;
|
|
10
|
+
onFocus?: () => void;
|
|
11
|
+
id?: string;
|
|
12
|
+
}
|
|
1
13
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
14
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
15
|
$$bindings?: Bindings;
|
|
@@ -12,10 +24,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
12
24
|
z_$$bindings?: Bindings;
|
|
13
25
|
}
|
|
14
26
|
declare const FixedPositionInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
-
value?: "
|
|
16
|
-
onChange:
|
|
17
|
-
onFocus?:
|
|
18
|
-
id?:
|
|
27
|
+
value?: FixedPositionInputControllerProps["value"];
|
|
28
|
+
onChange: FixedPositionInputControllerProps["onChange"];
|
|
29
|
+
onFocus?: FixedPositionInputControllerProps["onFocus"];
|
|
30
|
+
id?: FixedPositionInputControllerProps["id"];
|
|
19
31
|
}, {
|
|
20
32
|
[evt: string]: CustomEvent<any>;
|
|
21
33
|
}, {}, {}, string>;
|
|
@@ -18,6 +18,23 @@
|
|
|
18
18
|
* - Uses font-display: swap for better loading UX
|
|
19
19
|
-->
|
|
20
20
|
|
|
21
|
+
<script module lang="ts">
|
|
22
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
23
|
+
* interface cannot drift from what the component actually reads. */
|
|
24
|
+
export interface FontInputControllerProps {
|
|
25
|
+
label?: string;
|
|
26
|
+
style?: string;
|
|
27
|
+
value?: { family: string; weight: string; category: string } | string | null;
|
|
28
|
+
onChange?: (newValue: { family: string; weight: string; category: string }) => void;
|
|
29
|
+
description?: string;
|
|
30
|
+
controllerId: string;
|
|
31
|
+
openDropdowns: Writable<Set<string>>;
|
|
32
|
+
toggleDropdown: (id: string) => void;
|
|
33
|
+
hideRecentFromList?: boolean;
|
|
34
|
+
hideTrashIcon?: boolean;
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
21
38
|
<script lang="ts">
|
|
22
39
|
// Svelte imports
|
|
23
40
|
import { onMount, onDestroy, tick } from 'svelte';
|
|
@@ -46,6 +63,7 @@
|
|
|
46
63
|
import FontManager, { mapGoogleVariantIdsToWeightNames } from '../../utils/FontManager';
|
|
47
64
|
|
|
48
65
|
import { shouldSkipFont } from '../../utils/skipFonts';
|
|
66
|
+
import type { Writable } from 'svelte/store';
|
|
49
67
|
|
|
50
68
|
import { InputControllerHeader } from './index';
|
|
51
69
|
|
|
@@ -77,16 +95,16 @@
|
|
|
77
95
|
* @prop {Function} toggleDropdown - Function to toggle dropdown state
|
|
78
96
|
* @prop {Function} onFocus - Optional focus handler
|
|
79
97
|
*/
|
|
80
|
-
export let label:
|
|
98
|
+
export let label: FontInputControllerProps['label'] = '';
|
|
81
99
|
let className = '';
|
|
82
100
|
export { className as class };
|
|
83
|
-
export let style = '';
|
|
84
|
-
export let value:
|
|
85
|
-
export let onChange:
|
|
86
|
-
export let description:
|
|
87
|
-
export let controllerId:
|
|
88
|
-
export let openDropdowns:
|
|
89
|
-
export let toggleDropdown:
|
|
101
|
+
export let style: FontInputControllerProps['style'] = '';
|
|
102
|
+
export let value: FontInputControllerProps['value'] = null;
|
|
103
|
+
export let onChange: FontInputControllerProps['onChange'] = undefined;
|
|
104
|
+
export let description: FontInputControllerProps['description'] = undefined;
|
|
105
|
+
export let controllerId: FontInputControllerProps['controllerId'];
|
|
106
|
+
export let openDropdowns: FontInputControllerProps['openDropdowns'];
|
|
107
|
+
export let toggleDropdown: FontInputControllerProps['toggleDropdown'];
|
|
90
108
|
|
|
91
109
|
// Initialize timeouts
|
|
92
110
|
let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
@@ -124,8 +142,8 @@
|
|
|
124
142
|
let isInitialLoading = true; // Start with loading state true
|
|
125
143
|
|
|
126
144
|
// Add new prop for controlling font list behavior
|
|
127
|
-
export let hideRecentFromList:
|
|
128
|
-
export let hideTrashIcon:
|
|
145
|
+
export let hideRecentFromList: FontInputControllerProps['hideRecentFromList'] = false;
|
|
146
|
+
export let hideTrashIcon: FontInputControllerProps['hideTrashIcon'] = true;
|
|
129
147
|
|
|
130
148
|
function updateFamilyPopoverBox() {
|
|
131
149
|
if (!familyTriggerEl || typeof window === 'undefined') return;
|
|
@@ -1,3 +1,26 @@
|
|
|
1
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
2
|
+
* interface cannot drift from what the component actually reads. */
|
|
3
|
+
export interface FontInputControllerProps {
|
|
4
|
+
label?: string;
|
|
5
|
+
style?: string;
|
|
6
|
+
value?: {
|
|
7
|
+
family: string;
|
|
8
|
+
weight: string;
|
|
9
|
+
category: string;
|
|
10
|
+
} | string | null;
|
|
11
|
+
onChange?: (newValue: {
|
|
12
|
+
family: string;
|
|
13
|
+
weight: string;
|
|
14
|
+
category: string;
|
|
15
|
+
}) => void;
|
|
16
|
+
description?: string;
|
|
17
|
+
controllerId: string;
|
|
18
|
+
openDropdowns: Writable<Set<string>>;
|
|
19
|
+
toggleDropdown: (id: string) => void;
|
|
20
|
+
hideRecentFromList?: boolean;
|
|
21
|
+
hideTrashIcon?: boolean;
|
|
22
|
+
}
|
|
23
|
+
import type { Writable } from 'svelte/store';
|
|
1
24
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
25
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
26
|
$$bindings?: Bindings;
|
|
@@ -23,25 +46,17 @@ declare const FontInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
23
46
|
* @prop {any} openDropdowns - Store tracking open dropdown states
|
|
24
47
|
* @prop {Function} toggleDropdown - Function to toggle dropdown state
|
|
25
48
|
* @prop {Function} onFocus - Optional focus handler
|
|
26
|
-
*/ label?:
|
|
49
|
+
*/ label?: FontInputControllerProps["label"];
|
|
27
50
|
class?: string;
|
|
28
|
-
style?:
|
|
29
|
-
value?:
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
category: string;
|
|
38
|
-
}) => void) | undefined;
|
|
39
|
-
description?: string | undefined;
|
|
40
|
-
controllerId: string;
|
|
41
|
-
openDropdowns: any;
|
|
42
|
-
toggleDropdown: (id: string) => void;
|
|
43
|
-
hideRecentFromList?: boolean;
|
|
44
|
-
hideTrashIcon?: boolean;
|
|
51
|
+
style?: FontInputControllerProps["style"];
|
|
52
|
+
value?: FontInputControllerProps["value"];
|
|
53
|
+
onChange?: FontInputControllerProps["onChange"];
|
|
54
|
+
description?: FontInputControllerProps["description"];
|
|
55
|
+
controllerId: FontInputControllerProps["controllerId"];
|
|
56
|
+
openDropdowns: FontInputControllerProps["openDropdowns"];
|
|
57
|
+
toggleDropdown: FontInputControllerProps["toggleDropdown"];
|
|
58
|
+
hideRecentFromList?: FontInputControllerProps["hideRecentFromList"];
|
|
59
|
+
hideTrashIcon?: FontInputControllerProps["hideTrashIcon"];
|
|
45
60
|
}, {
|
|
46
61
|
[evt: string]: CustomEvent<any>;
|
|
47
62
|
}, {}, {}, string>;
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { InputControllerConfig } from './index';
|
|
3
|
+
|
|
4
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
5
|
+
* interface cannot drift from what the component actually reads. */
|
|
6
|
+
export interface NumberInputControllerProps {
|
|
7
|
+
label: string;
|
|
8
|
+
value?: number;
|
|
9
|
+
onChange: (newValue: number) => void;
|
|
10
|
+
config?: InputControllerConfig;
|
|
11
|
+
helpText?: string;
|
|
12
|
+
description?: string;
|
|
13
|
+
onFocus?: () => void;
|
|
14
|
+
}
|
|
15
|
+
</script>
|
|
16
|
+
|
|
1
17
|
<script lang="ts">
|
|
2
18
|
/**
|
|
3
19
|
* NumberInputController Component
|
|
@@ -13,8 +29,6 @@
|
|
|
13
29
|
import { onDestroy } from 'svelte';
|
|
14
30
|
|
|
15
31
|
|
|
16
|
-
// Component config
|
|
17
|
-
import type { InputControllerConfig } from './index';
|
|
18
32
|
import InputControllerHeader from './InputControllerHeader.svelte';
|
|
19
33
|
import NumberControls from './NumberControls.svelte';
|
|
20
34
|
|
|
@@ -22,13 +36,13 @@
|
|
|
22
36
|
* Component Props
|
|
23
37
|
* External properties that configure the number input's behavior
|
|
24
38
|
*/
|
|
25
|
-
export let label:
|
|
26
|
-
export let value:
|
|
27
|
-
export let onChange:
|
|
28
|
-
export let config:
|
|
29
|
-
export let helpText:
|
|
30
|
-
export let description:
|
|
31
|
-
export let onFocus:
|
|
39
|
+
export let label: NumberInputControllerProps['label'];
|
|
40
|
+
export let value: NumberInputControllerProps['value'] = 0;
|
|
41
|
+
export let onChange: NumberInputControllerProps['onChange'];
|
|
42
|
+
export let config: NumberInputControllerProps['config'] = {};
|
|
43
|
+
export let helpText: NumberInputControllerProps['helpText'] = undefined;
|
|
44
|
+
export let description: NumberInputControllerProps['description'] = undefined;
|
|
45
|
+
export let onFocus: NumberInputControllerProps['onFocus'] = () => {};
|
|
32
46
|
|
|
33
47
|
/**
|
|
34
48
|
* Configuration Options
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
import type { InputControllerConfig } from './index';
|
|
2
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
3
|
+
* interface cannot drift from what the component actually reads. */
|
|
4
|
+
export interface NumberInputControllerProps {
|
|
5
|
+
label: string;
|
|
6
|
+
value?: number;
|
|
7
|
+
onChange: (newValue: number) => void;
|
|
8
|
+
config?: InputControllerConfig;
|
|
9
|
+
helpText?: string;
|
|
10
|
+
description?: string;
|
|
11
|
+
onFocus?: () => void;
|
|
12
|
+
}
|
|
2
13
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
14
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
15
|
$$bindings?: Bindings;
|
|
@@ -16,13 +27,13 @@ declare const NumberInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
16
27
|
/**
|
|
17
28
|
* Component Props
|
|
18
29
|
* External properties that configure the number input's behavior
|
|
19
|
-
*/ label:
|
|
20
|
-
value?:
|
|
21
|
-
onChange:
|
|
22
|
-
config?:
|
|
23
|
-
helpText?:
|
|
24
|
-
description?:
|
|
25
|
-
onFocus?:
|
|
30
|
+
*/ label: NumberInputControllerProps["label"];
|
|
31
|
+
value?: NumberInputControllerProps["value"];
|
|
32
|
+
onChange: NumberInputControllerProps["onChange"];
|
|
33
|
+
config?: NumberInputControllerProps["config"];
|
|
34
|
+
helpText?: NumberInputControllerProps["helpText"];
|
|
35
|
+
description?: NumberInputControllerProps["description"];
|
|
36
|
+
onFocus?: NumberInputControllerProps["onFocus"];
|
|
26
37
|
}, {
|
|
27
38
|
[evt: string]: CustomEvent<any>;
|
|
28
39
|
}, {}, {}, string>;
|
|
@@ -17,6 +17,18 @@
|
|
|
17
17
|
* - Maintains consistent state across input methods
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
|
+
<script module lang="ts">
|
|
21
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
22
|
+
* interface cannot drift from what the component actually reads. */
|
|
23
|
+
export interface PositionInputControllerProps {
|
|
24
|
+
value?: { x: number; y: number };
|
|
25
|
+
onChange: (newValue: { x: number; y: number }) => void;
|
|
26
|
+
onFocus?: () => void;
|
|
27
|
+
maskThumb?: boolean;
|
|
28
|
+
onDragStateChange?: (isDragging: boolean) => void;
|
|
29
|
+
}
|
|
30
|
+
</script>
|
|
31
|
+
|
|
20
32
|
<script lang="ts">
|
|
21
33
|
// Svelte imports
|
|
22
34
|
import { onMount, onDestroy } from 'svelte';
|
|
@@ -32,11 +44,11 @@
|
|
|
32
44
|
* onFocus: Focus event handler
|
|
33
45
|
* onDragStateChange: Callback for dragging state changes
|
|
34
46
|
*/
|
|
35
|
-
export let value:
|
|
36
|
-
export let onChange:
|
|
37
|
-
export let onFocus:
|
|
38
|
-
export let maskThumb:
|
|
39
|
-
export let onDragStateChange:
|
|
47
|
+
export let value: PositionInputControllerProps['value'] = undefined;
|
|
48
|
+
export let onChange: PositionInputControllerProps['onChange'];
|
|
49
|
+
export let onFocus: PositionInputControllerProps['onFocus'] = () => {};
|
|
50
|
+
export let maskThumb: PositionInputControllerProps['maskThumb'] = true;
|
|
51
|
+
export let onDragStateChange: PositionInputControllerProps['onDragStateChange'] = () => {};
|
|
40
52
|
|
|
41
53
|
/**
|
|
42
54
|
* DOM references and state
|
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
2
|
+
* interface cannot drift from what the component actually reads. */
|
|
3
|
+
export interface PositionInputControllerProps {
|
|
4
|
+
value?: {
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
};
|
|
8
|
+
onChange: (newValue: {
|
|
9
|
+
x: number;
|
|
10
|
+
y: number;
|
|
11
|
+
}) => void;
|
|
12
|
+
onFocus?: () => void;
|
|
13
|
+
maskThumb?: boolean;
|
|
14
|
+
onDragStateChange?: (isDragging: boolean) => void;
|
|
15
|
+
}
|
|
1
16
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
17
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
18
|
$$bindings?: Bindings;
|
|
@@ -19,17 +34,11 @@ declare const PositionInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
19
34
|
* config: Additional configuration options
|
|
20
35
|
* onFocus: Focus event handler
|
|
21
36
|
* onDragStateChange: Callback for dragging state changes
|
|
22
|
-
*/ value?:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
x: number;
|
|
28
|
-
y: number;
|
|
29
|
-
}) => void;
|
|
30
|
-
onFocus?: () => void;
|
|
31
|
-
maskThumb?: boolean;
|
|
32
|
-
onDragStateChange?: (isDragging: boolean) => void;
|
|
37
|
+
*/ value?: PositionInputControllerProps["value"];
|
|
38
|
+
onChange: PositionInputControllerProps["onChange"];
|
|
39
|
+
onFocus?: PositionInputControllerProps["onFocus"];
|
|
40
|
+
maskThumb?: PositionInputControllerProps["maskThumb"];
|
|
41
|
+
onDragStateChange?: PositionInputControllerProps["onDragStateChange"];
|
|
33
42
|
}, {
|
|
34
43
|
[evt: string]: CustomEvent<any>;
|
|
35
44
|
}, {}, {}, string>;
|
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { InputControllerConfig } from './index';
|
|
3
|
+
|
|
4
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
5
|
+
* interface cannot drift from what the component actually reads. */
|
|
6
|
+
export interface RadioGroupInputControllerProps {
|
|
7
|
+
value: string | { value: string; label: string };
|
|
8
|
+
onChange: (newValue: string) => void;
|
|
9
|
+
config?: InputControllerConfig;
|
|
10
|
+
description?: string;
|
|
11
|
+
onFocus?: () => void;
|
|
12
|
+
options?: { value: string; label: string }[];
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
|
|
1
16
|
<script lang="ts">
|
|
2
17
|
/**
|
|
3
18
|
* RadioGroupInputController Component
|
|
@@ -10,7 +25,6 @@
|
|
|
10
25
|
* Required for component setup and cleanup
|
|
11
26
|
*/
|
|
12
27
|
import { onMount, onDestroy } from 'svelte';
|
|
13
|
-
import type { InputControllerConfig } from './index';
|
|
14
28
|
|
|
15
29
|
/**
|
|
16
30
|
* UI Components Imports
|
|
@@ -22,17 +36,17 @@
|
|
|
22
36
|
* Component Props
|
|
23
37
|
* External properties that configure the radio group's behavior and appearance
|
|
24
38
|
*/
|
|
25
|
-
export let value:
|
|
26
|
-
export let onChange:
|
|
27
|
-
export let config:
|
|
28
|
-
export let description:
|
|
29
|
-
export let onFocus:
|
|
39
|
+
export let value: RadioGroupInputControllerProps['value']; // Currently selected value
|
|
40
|
+
export let onChange: RadioGroupInputControllerProps['onChange']; // Callback for value changes
|
|
41
|
+
export let config: RadioGroupInputControllerProps['config'] = {}; // Additional configuration options
|
|
42
|
+
export let description: RadioGroupInputControllerProps['description'] = undefined; // Optional help description text
|
|
43
|
+
export let onFocus: RadioGroupInputControllerProps['onFocus'] = () => {}; // Focus event handler
|
|
30
44
|
|
|
31
45
|
/**
|
|
32
46
|
* Configuration Options
|
|
33
47
|
* Derived from config prop with fallbacks
|
|
34
48
|
*/
|
|
35
|
-
export let options:
|
|
49
|
+
export let options: RadioGroupInputControllerProps['options'] = config.options || []; // Available options
|
|
36
50
|
|
|
37
51
|
/**
|
|
38
52
|
* Local state
|
|
@@ -1,4 +1,20 @@
|
|
|
1
1
|
import type { InputControllerConfig } from './index';
|
|
2
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
3
|
+
* interface cannot drift from what the component actually reads. */
|
|
4
|
+
export interface RadioGroupInputControllerProps {
|
|
5
|
+
value: string | {
|
|
6
|
+
value: string;
|
|
7
|
+
label: string;
|
|
8
|
+
};
|
|
9
|
+
onChange: (newValue: string) => void;
|
|
10
|
+
config?: InputControllerConfig;
|
|
11
|
+
description?: string;
|
|
12
|
+
onFocus?: () => void;
|
|
13
|
+
options?: {
|
|
14
|
+
value: string;
|
|
15
|
+
label: string;
|
|
16
|
+
}[];
|
|
17
|
+
}
|
|
2
18
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
19
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
20
|
$$bindings?: Bindings;
|
|
@@ -16,21 +32,15 @@ declare const RadioGroupInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
16
32
|
/**
|
|
17
33
|
* Component Props
|
|
18
34
|
* External properties that configure the radio group's behavior and appearance
|
|
19
|
-
*/ value:
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
config?: InputControllerConfig;
|
|
25
|
-
description?: string | undefined;
|
|
26
|
-
onFocus?: () => void;
|
|
35
|
+
*/ value: RadioGroupInputControllerProps["value"];
|
|
36
|
+
onChange: RadioGroupInputControllerProps["onChange"];
|
|
37
|
+
config?: RadioGroupInputControllerProps["config"];
|
|
38
|
+
description?: RadioGroupInputControllerProps["description"];
|
|
39
|
+
onFocus?: RadioGroupInputControllerProps["onFocus"];
|
|
27
40
|
/**
|
|
28
41
|
* Configuration Options
|
|
29
42
|
* Derived from config prop with fallbacks
|
|
30
|
-
*/ options?:
|
|
31
|
-
value: string;
|
|
32
|
-
label: string;
|
|
33
|
-
}[];
|
|
43
|
+
*/ options?: RadioGroupInputControllerProps["options"];
|
|
34
44
|
}, {
|
|
35
45
|
[evt: string]: CustomEvent<any>;
|
|
36
46
|
}, {}, {}, string>;
|
|
@@ -17,6 +17,32 @@
|
|
|
17
17
|
* - Preserves timezone consistency
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
|
+
<script module lang="ts">
|
|
21
|
+
import type { DateValue } from "@internationalized/date";
|
|
22
|
+
import type { DateRange as BitsDateRange } from "bits-ui";
|
|
23
|
+
|
|
24
|
+
// Use a more flexible local type
|
|
25
|
+
type DateRange = {
|
|
26
|
+
start?: DateValue;
|
|
27
|
+
end?: DateValue;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
import type { Writable } from 'svelte/store';
|
|
31
|
+
|
|
32
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
33
|
+
* interface cannot drift from what the component actually reads. */
|
|
34
|
+
export interface RangeCalendarInputControllerProps {
|
|
35
|
+
label: string;
|
|
36
|
+
value?: BitsDateRange;
|
|
37
|
+
onChange: (newValue: DateRange) => void;
|
|
38
|
+
helpText?: string;
|
|
39
|
+
controllerId: string;
|
|
40
|
+
openDropdowns: Writable<Set<string>>;
|
|
41
|
+
toggleDropdown: (id: string) => void;
|
|
42
|
+
onFocus?: () => void;
|
|
43
|
+
}
|
|
44
|
+
</script>
|
|
45
|
+
|
|
20
46
|
<script lang="ts">
|
|
21
47
|
// Svelte imports
|
|
22
48
|
import { onMount, onDestroy } from 'svelte';
|
|
@@ -29,24 +55,16 @@
|
|
|
29
55
|
|
|
30
56
|
// Shadcn aditional: Internationalized Date
|
|
31
57
|
import { CalendarDate, getLocalTimeZone } from "@internationalized/date";
|
|
32
|
-
import type { DateValue } from "@internationalized/date";
|
|
33
|
-
import type { DateRange as BitsDateRange } from "bits-ui";
|
|
34
|
-
|
|
35
|
-
// Use a more flexible local type
|
|
36
|
-
type DateRange = {
|
|
37
|
-
start?: DateValue;
|
|
38
|
-
end?: DateValue;
|
|
39
|
-
}
|
|
40
58
|
|
|
41
59
|
// Component props
|
|
42
|
-
export let label:
|
|
43
|
-
export let value:
|
|
44
|
-
export let onChange:
|
|
45
|
-
export let helpText:
|
|
46
|
-
export let controllerId:
|
|
47
|
-
export let openDropdowns:
|
|
48
|
-
export let toggleDropdown:
|
|
49
|
-
export let onFocus:
|
|
60
|
+
export let label: RangeCalendarInputControllerProps['label'];
|
|
61
|
+
export let value: RangeCalendarInputControllerProps['value'];
|
|
62
|
+
export let onChange: RangeCalendarInputControllerProps['onChange'];
|
|
63
|
+
export let helpText: RangeCalendarInputControllerProps['helpText'] = undefined;
|
|
64
|
+
export let controllerId: RangeCalendarInputControllerProps['controllerId'];
|
|
65
|
+
export let openDropdowns: RangeCalendarInputControllerProps['openDropdowns'];
|
|
66
|
+
export let toggleDropdown: RangeCalendarInputControllerProps['toggleDropdown'];
|
|
67
|
+
export let onFocus: RangeCalendarInputControllerProps['onFocus'] = () => {};
|
|
50
68
|
|
|
51
69
|
let currentValue: DateRange | undefined;
|
|
52
70
|
|