@widgetic/editor 4.0.6 → 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 +42 -1
- package/dist/components/WidgetPreview.svelte.d.ts +8 -0
- package/dist/components/editors/EmbedEditor.svelte +101 -530
- package/dist/components/editors/EmbedEditor.svelte.d.ts +7 -17
- package/dist/components/editors/PropsEditor.svelte +328 -142
- package/dist/components/editors/PropsEditor.svelte.d.ts +13 -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 -21
- package/dist/components/ic/ColorPickerInputController.svelte.d.ts +42 -19
- 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 +69 -19
- 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 +53 -18
- package/dist/components/ic/FontInputController.svelte.d.ts +33 -18
- package/dist/components/ic/InputControllerRenderer.svelte +98 -0
- package/dist/components/ic/InputControllerRenderer.svelte.d.ts +40 -0
- 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 +26 -22
- package/dist/components/ic/RoundedCornersInputController.svelte.d.ts +26 -18
- 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 +44 -25
- 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/components/icons/locked.svelte +5 -1
- package/dist/components/icons/locked.svelte.d.ts +11 -24
- package/dist/components/icons/unlocked.svelte +5 -1
- package/dist/components/icons/unlocked.svelte.d.ts +11 -24
- 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 +11 -4
- package/package.json +16 -12
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
2
|
+
import type { InputControllerConfig } from './index';
|
|
3
|
+
import type { SliderProps } from '@widgetic/design-system/components';
|
|
4
|
+
|
|
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 SliderInputControllerProps {
|
|
8
|
+
height?: number;
|
|
9
|
+
elementsGap?: number;
|
|
10
|
+
thumbSize?: number;
|
|
11
|
+
sliderType?: SliderProps['type'];
|
|
12
|
+
barHeight?: number;
|
|
13
|
+
label?: string;
|
|
14
|
+
value: number | number[];
|
|
15
|
+
onChange: (newValue: number | number[]) => void;
|
|
16
|
+
config?: InputControllerConfig;
|
|
17
|
+
helpText?: string;
|
|
18
|
+
min?: number;
|
|
19
|
+
max?: number;
|
|
20
|
+
step?: number;
|
|
21
|
+
onFocus?: () => void;
|
|
22
|
+
autofocus?: boolean;
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
|
|
1
26
|
<script lang="ts">
|
|
2
27
|
/**
|
|
3
28
|
* SliderInputController Component
|
|
@@ -16,11 +41,9 @@
|
|
|
16
41
|
/**
|
|
17
42
|
* Shadcn UI components from Widgetic design-system package
|
|
18
43
|
*/
|
|
19
|
-
import { Slider
|
|
44
|
+
import { Slider } from '@widgetic/design-system/components';
|
|
20
45
|
import { InputControllerHeader } from './index';
|
|
21
46
|
|
|
22
|
-
// Component config
|
|
23
|
-
import type { InputControllerConfig } from './index';
|
|
24
47
|
|
|
25
48
|
/**
|
|
26
49
|
* Component Props
|
|
@@ -28,26 +51,26 @@
|
|
|
28
51
|
*/
|
|
29
52
|
let className = '';
|
|
30
53
|
export { className as class };
|
|
31
|
-
export let height = 48;
|
|
32
|
-
export let elementsGap = 8;
|
|
33
|
-
export let thumbSize = 24;
|
|
34
|
-
export let sliderType:
|
|
35
|
-
export let barHeight = 8;
|
|
36
|
-
export let label:
|
|
37
|
-
export let value:
|
|
38
|
-
export let onChange:
|
|
39
|
-
export let config:
|
|
40
|
-
export let helpText:
|
|
54
|
+
export let height: SliderInputControllerProps['height'] = 48;
|
|
55
|
+
export let elementsGap: SliderInputControllerProps['elementsGap'] = 8;
|
|
56
|
+
export let thumbSize: SliderInputControllerProps['thumbSize'] = 24;
|
|
57
|
+
export let sliderType: SliderInputControllerProps['sliderType'] = "single";
|
|
58
|
+
export let barHeight: SliderInputControllerProps['barHeight'] = 8;
|
|
59
|
+
export let label: SliderInputControllerProps['label'] = '';
|
|
60
|
+
export let value: SliderInputControllerProps['value'];
|
|
61
|
+
export let onChange: SliderInputControllerProps['onChange'];
|
|
62
|
+
export let config: SliderInputControllerProps['config'] = {};
|
|
63
|
+
export let helpText: SliderInputControllerProps['helpText'] = undefined;
|
|
41
64
|
|
|
42
65
|
/**
|
|
43
66
|
* Configuration Options
|
|
44
67
|
* Derived from config prop with fallbacks
|
|
45
68
|
*/
|
|
46
|
-
export let min:
|
|
47
|
-
export let max:
|
|
48
|
-
export let step:
|
|
49
|
-
export let onFocus:
|
|
50
|
-
export let autofocus:
|
|
69
|
+
export let min: SliderInputControllerProps['min'] = config.min || 0;
|
|
70
|
+
export let max: SliderInputControllerProps['max'] = config.max || 100;
|
|
71
|
+
export let step: SliderInputControllerProps['step'] = config.step || 1;
|
|
72
|
+
export let onFocus: SliderInputControllerProps['onFocus'] = () => {};
|
|
73
|
+
export let autofocus: SliderInputControllerProps['autofocus'] = false; // Auto-focus on mount
|
|
51
74
|
|
|
52
75
|
/**
|
|
53
76
|
* Internal State
|
|
@@ -1,8 +1,24 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Shadcn UI components from Widgetic design-system package
|
|
3
|
-
*/
|
|
4
|
-
import { type SliderProps } from '@widgetic/design-system/components';
|
|
5
1
|
import type { InputControllerConfig } from './index';
|
|
2
|
+
import type { SliderProps } from '@widgetic/design-system/components';
|
|
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 SliderInputControllerProps {
|
|
6
|
+
height?: number;
|
|
7
|
+
elementsGap?: number;
|
|
8
|
+
thumbSize?: number;
|
|
9
|
+
sliderType?: SliderProps['type'];
|
|
10
|
+
barHeight?: number;
|
|
11
|
+
label?: string;
|
|
12
|
+
value: number | number[];
|
|
13
|
+
onChange: (newValue: number | number[]) => void;
|
|
14
|
+
config?: InputControllerConfig;
|
|
15
|
+
helpText?: string;
|
|
16
|
+
min?: number;
|
|
17
|
+
max?: number;
|
|
18
|
+
step?: number;
|
|
19
|
+
onFocus?: () => void;
|
|
20
|
+
autofocus?: boolean;
|
|
21
|
+
}
|
|
6
22
|
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> {
|
|
7
23
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
8
24
|
$$bindings?: Bindings;
|
|
@@ -21,24 +37,24 @@ declare const SliderInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
|
21
37
|
* Component Props
|
|
22
38
|
* External properties that configure the slider's behavior
|
|
23
39
|
*/ class?: string;
|
|
24
|
-
height?:
|
|
25
|
-
elementsGap?:
|
|
26
|
-
thumbSize?:
|
|
27
|
-
sliderType?:
|
|
28
|
-
barHeight?:
|
|
29
|
-
label?:
|
|
30
|
-
value:
|
|
31
|
-
onChange:
|
|
32
|
-
config?:
|
|
33
|
-
helpText?:
|
|
40
|
+
height?: SliderInputControllerProps["height"];
|
|
41
|
+
elementsGap?: SliderInputControllerProps["elementsGap"];
|
|
42
|
+
thumbSize?: SliderInputControllerProps["thumbSize"];
|
|
43
|
+
sliderType?: SliderInputControllerProps["sliderType"];
|
|
44
|
+
barHeight?: SliderInputControllerProps["barHeight"];
|
|
45
|
+
label?: SliderInputControllerProps["label"];
|
|
46
|
+
value: SliderInputControllerProps["value"];
|
|
47
|
+
onChange: SliderInputControllerProps["onChange"];
|
|
48
|
+
config?: SliderInputControllerProps["config"];
|
|
49
|
+
helpText?: SliderInputControllerProps["helpText"];
|
|
34
50
|
/**
|
|
35
51
|
* Configuration Options
|
|
36
52
|
* Derived from config prop with fallbacks
|
|
37
|
-
*/ min?:
|
|
38
|
-
max?:
|
|
39
|
-
step?:
|
|
40
|
-
onFocus?:
|
|
41
|
-
autofocus?:
|
|
53
|
+
*/ min?: SliderInputControllerProps["min"];
|
|
54
|
+
max?: SliderInputControllerProps["max"];
|
|
55
|
+
step?: SliderInputControllerProps["step"];
|
|
56
|
+
onFocus?: SliderInputControllerProps["onFocus"];
|
|
57
|
+
autofocus?: SliderInputControllerProps["autofocus"];
|
|
42
58
|
}, {
|
|
43
59
|
[evt: string]: CustomEvent<any>;
|
|
44
60
|
}, {}, {}, string>;
|
|
@@ -17,6 +17,24 @@
|
|
|
17
17
|
* - Manages focus states across multiple inputs
|
|
18
18
|
-->
|
|
19
19
|
|
|
20
|
+
<script module lang="ts">
|
|
21
|
+
import type { InputControllerConfig } from './index';
|
|
22
|
+
|
|
23
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
24
|
+
* interface cannot drift from what the component actually reads. */
|
|
25
|
+
export interface SliderRangeInputControllerProps {
|
|
26
|
+
label: string;
|
|
27
|
+
value?: [number, number];
|
|
28
|
+
onChange: (newValue: [number, number]) => void;
|
|
29
|
+
config?: InputControllerConfig;
|
|
30
|
+
helpText?: string;
|
|
31
|
+
min?: number;
|
|
32
|
+
max?: number;
|
|
33
|
+
step?: number;
|
|
34
|
+
onFocus?: () => void;
|
|
35
|
+
}
|
|
36
|
+
</script>
|
|
37
|
+
|
|
20
38
|
<script lang="ts">
|
|
21
39
|
// Svelte imports
|
|
22
40
|
import { onMount, tick } from 'svelte';
|
|
@@ -24,26 +42,24 @@
|
|
|
24
42
|
// local components imports
|
|
25
43
|
import SliderInputController from './SliderInputController.svelte';
|
|
26
44
|
|
|
27
|
-
// Component config
|
|
28
|
-
import type { InputControllerConfig } from './index';
|
|
29
45
|
|
|
30
46
|
// Component props
|
|
31
47
|
let className = '';
|
|
32
48
|
export { className as class };
|
|
33
|
-
export let label:
|
|
34
|
-
export let value: [
|
|
35
|
-
export let onChange:
|
|
36
|
-
export let config:
|
|
37
|
-
export let helpText:
|
|
49
|
+
export let label: SliderRangeInputControllerProps['label'];
|
|
50
|
+
export let value: SliderRangeInputControllerProps['value'] = [0, 100];
|
|
51
|
+
export let onChange: SliderRangeInputControllerProps['onChange'];
|
|
52
|
+
export let config: SliderRangeInputControllerProps['config'] = {};
|
|
53
|
+
export let helpText: SliderRangeInputControllerProps['helpText'] = undefined;
|
|
38
54
|
|
|
39
55
|
/**
|
|
40
56
|
* Configuration Options
|
|
41
57
|
* Derived from config prop with fallbacks
|
|
42
58
|
*/
|
|
43
|
-
export let min:
|
|
44
|
-
export let max:
|
|
45
|
-
export let step:
|
|
46
|
-
export let onFocus:
|
|
59
|
+
export let min: SliderRangeInputControllerProps['min'] = config.min || 0;
|
|
60
|
+
export let max: SliderRangeInputControllerProps['max'] = config.max || 100;
|
|
61
|
+
export let step: SliderRangeInputControllerProps['step'] = config.step || 1;
|
|
62
|
+
export let onFocus: SliderRangeInputControllerProps['onFocus'] = () => {};
|
|
47
63
|
// export let autofocus: boolean = false;
|
|
48
64
|
|
|
49
65
|
// Store initial scroll position
|
|
@@ -1,4 +1,17 @@
|
|
|
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 SliderRangeInputControllerProps {
|
|
5
|
+
label: string;
|
|
6
|
+
value?: [number, number];
|
|
7
|
+
onChange: (newValue: [number, number]) => void;
|
|
8
|
+
config?: InputControllerConfig;
|
|
9
|
+
helpText?: string;
|
|
10
|
+
min?: number;
|
|
11
|
+
max?: number;
|
|
12
|
+
step?: number;
|
|
13
|
+
onFocus?: () => void;
|
|
14
|
+
}
|
|
2
15
|
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
16
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
17
|
$$bindings?: Bindings;
|
|
@@ -14,18 +27,18 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
14
27
|
}
|
|
15
28
|
declare const SliderRangeInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
16
29
|
class?: string;
|
|
17
|
-
label:
|
|
18
|
-
value?: [
|
|
19
|
-
onChange:
|
|
20
|
-
config?:
|
|
21
|
-
helpText?:
|
|
30
|
+
label: SliderRangeInputControllerProps["label"];
|
|
31
|
+
value?: SliderRangeInputControllerProps["value"];
|
|
32
|
+
onChange: SliderRangeInputControllerProps["onChange"];
|
|
33
|
+
config?: SliderRangeInputControllerProps["config"];
|
|
34
|
+
helpText?: SliderRangeInputControllerProps["helpText"];
|
|
22
35
|
/**
|
|
23
36
|
* Configuration Options
|
|
24
37
|
* Derived from config prop with fallbacks
|
|
25
|
-
*/ min?:
|
|
26
|
-
max?:
|
|
27
|
-
step?:
|
|
28
|
-
onFocus?:
|
|
38
|
+
*/ min?: SliderRangeInputControllerProps["min"];
|
|
39
|
+
max?: SliderRangeInputControllerProps["max"];
|
|
40
|
+
step?: SliderRangeInputControllerProps["step"];
|
|
41
|
+
onFocus?: SliderRangeInputControllerProps["onFocus"];
|
|
29
42
|
}, {
|
|
30
43
|
[evt: string]: CustomEvent<any>;
|
|
31
44
|
}, {}, {}, string>;
|
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
<script module lang="ts">
|
|
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 SwitchInputControllerProps {
|
|
5
|
+
label: string;
|
|
6
|
+
value: boolean;
|
|
7
|
+
onChange: (newValue: boolean) => void;
|
|
8
|
+
description?: string;
|
|
9
|
+
onFocus?: () => void;
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
1
13
|
<script lang="ts">
|
|
2
14
|
// Svelte imports
|
|
3
15
|
import { onMount } from 'svelte';
|
|
@@ -7,11 +19,11 @@
|
|
|
7
19
|
import { InputControllerHeader } from './index';
|
|
8
20
|
|
|
9
21
|
// Component props
|
|
10
|
-
export let label:
|
|
11
|
-
export let value:
|
|
12
|
-
export let onChange:
|
|
13
|
-
export let description:
|
|
14
|
-
export let onFocus:
|
|
22
|
+
export let label: SwitchInputControllerProps['label'];
|
|
23
|
+
export let value: SwitchInputControllerProps['value'];
|
|
24
|
+
export let onChange: SwitchInputControllerProps['onChange'];
|
|
25
|
+
export let description: SwitchInputControllerProps['description'] = undefined;
|
|
26
|
+
export let onFocus: SwitchInputControllerProps['onFocus'] = () => {};
|
|
15
27
|
|
|
16
28
|
function toggle(newValue?: boolean) {
|
|
17
29
|
value = typeof newValue === 'boolean' ? newValue : !value;
|
|
@@ -1,3 +1,12 @@
|
|
|
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 SwitchInputControllerProps {
|
|
4
|
+
label: string;
|
|
5
|
+
value: boolean;
|
|
6
|
+
onChange: (newValue: boolean) => void;
|
|
7
|
+
description?: string;
|
|
8
|
+
onFocus?: () => void;
|
|
9
|
+
}
|
|
1
10
|
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
11
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
12
|
$$bindings?: Bindings;
|
|
@@ -12,11 +21,11 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
12
21
|
z_$$bindings?: Bindings;
|
|
13
22
|
}
|
|
14
23
|
declare const SwitchInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
-
label:
|
|
16
|
-
value:
|
|
17
|
-
onChange:
|
|
18
|
-
description?:
|
|
19
|
-
onFocus?:
|
|
24
|
+
label: SwitchInputControllerProps["label"];
|
|
25
|
+
value: SwitchInputControllerProps["value"];
|
|
26
|
+
onChange: SwitchInputControllerProps["onChange"];
|
|
27
|
+
description?: SwitchInputControllerProps["description"];
|
|
28
|
+
onFocus?: SwitchInputControllerProps["onFocus"];
|
|
20
29
|
}, {
|
|
21
30
|
[evt: string]: CustomEvent<any>;
|
|
22
31
|
}, {}, {}, string>;
|
|
@@ -11,19 +11,33 @@
|
|
|
11
11
|
* - Prevents duplicate tags
|
|
12
12
|
-->
|
|
13
13
|
|
|
14
|
+
<script module lang="ts">
|
|
15
|
+
import type { InputControllerConfig } from './index';
|
|
16
|
+
|
|
17
|
+
/** Declared props contract — export lets below are annotated from it so the
|
|
18
|
+
* interface cannot drift from what the component actually reads. */
|
|
19
|
+
export interface TagsInputControllerProps {
|
|
20
|
+
label: string;
|
|
21
|
+
value?: string[];
|
|
22
|
+
onChange: (newValue: string[]) => void;
|
|
23
|
+
config?: InputControllerConfig;
|
|
24
|
+
helpText?: string;
|
|
25
|
+
onFocus?: () => void;
|
|
26
|
+
}
|
|
27
|
+
</script>
|
|
28
|
+
|
|
14
29
|
<script lang="ts">
|
|
15
30
|
import { onMount, onDestroy } from 'svelte';
|
|
16
31
|
import InputControllerHeader from './InputControllerHeader.svelte';
|
|
17
|
-
import type { InputControllerConfig } from './index';
|
|
18
32
|
import { IconX } from '@widgetic/design-system/icons';
|
|
19
33
|
|
|
20
34
|
// Required props
|
|
21
|
-
export let label:
|
|
22
|
-
export let value:
|
|
23
|
-
export let onChange:
|
|
24
|
-
export let config:
|
|
25
|
-
export let helpText:
|
|
26
|
-
export let onFocus:
|
|
35
|
+
export let label: TagsInputControllerProps['label'];
|
|
36
|
+
export let value: TagsInputControllerProps['value'] = [];
|
|
37
|
+
export let onChange: TagsInputControllerProps['onChange'];
|
|
38
|
+
export let config: TagsInputControllerProps['config'] = {};
|
|
39
|
+
export let helpText: TagsInputControllerProps['helpText'] = undefined;
|
|
40
|
+
export let onFocus: TagsInputControllerProps['onFocus'] = () => {};
|
|
27
41
|
|
|
28
42
|
// Optional: Class prop for external styling
|
|
29
43
|
let className = '';
|
|
@@ -1,4 +1,14 @@
|
|
|
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 TagsInputControllerProps {
|
|
5
|
+
label: string;
|
|
6
|
+
value?: string[];
|
|
7
|
+
onChange: (newValue: string[]) => void;
|
|
8
|
+
config?: InputControllerConfig;
|
|
9
|
+
helpText?: string;
|
|
10
|
+
onFocus?: () => void;
|
|
11
|
+
}
|
|
2
12
|
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
13
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
14
|
$$bindings?: Bindings;
|
|
@@ -13,12 +23,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
13
23
|
z_$$bindings?: Bindings;
|
|
14
24
|
}
|
|
15
25
|
declare const TagsInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
16
|
-
label:
|
|
17
|
-
value?:
|
|
18
|
-
onChange:
|
|
19
|
-
config?:
|
|
20
|
-
helpText?:
|
|
21
|
-
onFocus?:
|
|
26
|
+
label: TagsInputControllerProps["label"];
|
|
27
|
+
value?: TagsInputControllerProps["value"];
|
|
28
|
+
onChange: TagsInputControllerProps["onChange"];
|
|
29
|
+
config?: TagsInputControllerProps["config"];
|
|
30
|
+
helpText?: TagsInputControllerProps["helpText"];
|
|
31
|
+
onFocus?: TagsInputControllerProps["onFocus"];
|
|
22
32
|
class?: string;
|
|
23
33
|
}, {
|
|
24
34
|
[evt: string]: CustomEvent<any>;
|
|
@@ -22,14 +22,29 @@
|
|
|
22
22
|
- Maintains formatting consistency across operations
|
|
23
23
|
-->
|
|
24
24
|
|
|
25
|
+
<script module lang="ts">
|
|
26
|
+
import type { InputControllerConfig } from './index';
|
|
27
|
+
|
|
28
|
+
/** Declared props contract — the instance script's $props() below is
|
|
29
|
+
* annotated from it so the interface cannot drift from what is read. */
|
|
30
|
+
export interface TextAreaInputControllerProps {
|
|
31
|
+
class?: string;
|
|
32
|
+
label: string;
|
|
33
|
+
value: string;
|
|
34
|
+
onChange: (newValue: string) => void;
|
|
35
|
+
config?: InputControllerConfig;
|
|
36
|
+
description?: string;
|
|
37
|
+
onFocus?: () => void;
|
|
38
|
+
onClose?: () => void;
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
25
42
|
<script lang="ts">
|
|
26
43
|
// Svelte imports
|
|
27
44
|
import { onMount, onDestroy } from 'svelte';
|
|
28
45
|
import { writable } from 'svelte/store';
|
|
29
46
|
import type { ComponentEvents } from 'svelte';
|
|
30
47
|
|
|
31
|
-
// Component config
|
|
32
|
-
import type { InputControllerConfig } from './index';
|
|
33
48
|
|
|
34
49
|
// Import Shadcn UI components
|
|
35
50
|
import { Button, ToggleGroup, Popover, Command } from '@widgetic/design-system/components';
|
|
@@ -71,19 +86,10 @@
|
|
|
71
86
|
description = undefined,
|
|
72
87
|
onFocus = () => {},
|
|
73
88
|
onClose = undefined
|
|
74
|
-
} = $props
|
|
75
|
-
class: string;
|
|
76
|
-
label: string;
|
|
77
|
-
value: string;
|
|
78
|
-
onChange: (newValue: string) => void;
|
|
79
|
-
config?: InputControllerConfig;
|
|
80
|
-
description?: string;
|
|
81
|
-
onFocus?: () => void;
|
|
82
|
-
onClose?: () => void;
|
|
83
|
-
}>();
|
|
89
|
+
}: TextAreaInputControllerProps = $props();
|
|
84
90
|
|
|
85
91
|
// Use config values with fallbacks
|
|
86
|
-
const textColor = config.textColor || '#1a1a1a';
|
|
92
|
+
const textColor = $derived(config.textColor || '#1a1a1a');
|
|
87
93
|
|
|
88
94
|
/**
|
|
89
95
|
* State Variables
|
|
@@ -121,7 +127,7 @@
|
|
|
121
127
|
let currentTextStyle = $state('text'); // Track current text style
|
|
122
128
|
|
|
123
129
|
let showColorPicker = $state(false);
|
|
124
|
-
let currentColor = $
|
|
130
|
+
let currentColor = $derived(textColor);
|
|
125
131
|
let selectedTextRange: { from: number, to: number } | null = $state(null);
|
|
126
132
|
|
|
127
133
|
const textOptions = [
|
|
@@ -159,16 +165,16 @@
|
|
|
159
165
|
|
|
160
166
|
|
|
161
167
|
|
|
162
|
-
//
|
|
163
|
-
const editorStyle =
|
|
168
|
+
// Static styles — avoid $derived so teardown does not leave inert derived reads.
|
|
169
|
+
const editorStyle = `
|
|
164
170
|
--editor-min-height: auto;
|
|
165
171
|
--editor-max-height: none;
|
|
166
172
|
--transition-duration: 0ms;
|
|
167
173
|
--transition-timing: ease-out;
|
|
168
|
-
|
|
174
|
+
`;
|
|
169
175
|
|
|
170
176
|
// Add this with other state declarations
|
|
171
|
-
let editorClass =
|
|
177
|
+
let editorClass = 'border-none overflow-auto editor-height';
|
|
172
178
|
|
|
173
179
|
// Add state to track if any dropdown is open
|
|
174
180
|
let isDropdownOpen = $state(false);
|
|
@@ -191,6 +197,7 @@
|
|
|
191
197
|
// Add these new state variables after the other state declarations
|
|
192
198
|
let lastKnownContent = $state('');
|
|
193
199
|
let wasVisible = $state(true);
|
|
200
|
+
let isDestroyed = false;
|
|
194
201
|
|
|
195
202
|
function handleEditorMount(e: any) {
|
|
196
203
|
editorInstance = e.detail.editor;
|
|
@@ -361,6 +368,7 @@
|
|
|
361
368
|
// Only update if there's a change to prevent unnecessary rerenders
|
|
362
369
|
if (JSON.stringify(newFormats) !== JSON.stringify($state.snapshot(activeFormats))) {
|
|
363
370
|
activeFormats = newFormats;
|
|
371
|
+
syncToggleValues();
|
|
364
372
|
// console.log('Active formats updated:', $state.snapshot(activeFormats));
|
|
365
373
|
}
|
|
366
374
|
}
|
|
@@ -440,11 +448,20 @@
|
|
|
440
448
|
}
|
|
441
449
|
}
|
|
442
450
|
|
|
443
|
-
//
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
451
|
+
// Compute toggle values without $derived — TipTap callbacks can run after unmount
|
|
452
|
+
// and reading an inert derived triggers Svelte's derived_inert warning.
|
|
453
|
+
function getToggleValues(): string[] {
|
|
454
|
+
if (isDestroyed) return [];
|
|
455
|
+
return Object.entries(activeFormats)
|
|
456
|
+
.filter(([_, isActive]) => isActive)
|
|
457
|
+
.map(([format]) => formatMapping[format as FormatType].value);
|
|
458
|
+
}
|
|
459
|
+
|
|
460
|
+
let toggleValues = $state<string[]>([]);
|
|
461
|
+
function syncToggleValues() {
|
|
462
|
+
if (isDestroyed) return;
|
|
463
|
+
toggleValues = getToggleValues();
|
|
464
|
+
}
|
|
448
465
|
|
|
449
466
|
// Restore handleTextStyleChange for other style changes
|
|
450
467
|
function handleTextStyleChange(value: string) {
|
|
@@ -823,7 +840,9 @@
|
|
|
823
840
|
|
|
824
841
|
// Add effect to handle clicks outside Color Select
|
|
825
842
|
$effect(() => {
|
|
843
|
+
if (isDestroyed) return;
|
|
826
844
|
const handleClickOutside = (event: MouseEvent) => {
|
|
845
|
+
if (isDestroyed) return;
|
|
827
846
|
const colorSelectModal = document.querySelector('[data-radix-popper-content-wrapper]');
|
|
828
847
|
const isClickingColorSelect = colorSelectModal?.contains(event.target as Node);
|
|
829
848
|
|
|
@@ -896,6 +915,7 @@
|
|
|
896
915
|
|
|
897
916
|
// Update the effect that maintains selection during color picker interactions
|
|
898
917
|
$effect(() => {
|
|
918
|
+
if (isDestroyed) return;
|
|
899
919
|
if (showColorPicker && selectedTextRange && editorInstance) {
|
|
900
920
|
const { from, to } = selectedTextRange;
|
|
901
921
|
editorInstance.chain()
|
|
@@ -1020,6 +1040,7 @@
|
|
|
1020
1040
|
|
|
1021
1041
|
// Add cleanup function
|
|
1022
1042
|
onDestroy(() => {
|
|
1043
|
+
isDestroyed = true;
|
|
1023
1044
|
if (editorInstance) {
|
|
1024
1045
|
// Store the current content before unmounting
|
|
1025
1046
|
lastKnownContent = editorInstance.getHTML();
|
|
@@ -1336,8 +1357,6 @@
|
|
|
1336
1357
|
handleColorChange(color);
|
|
1337
1358
|
}}
|
|
1338
1359
|
controllerId="text-color-picker"
|
|
1339
|
-
{openDropdowns}
|
|
1340
|
-
{toggleDropdown}
|
|
1341
1360
|
saveRecentColors={true}
|
|
1342
1361
|
showOpacityControls={false}
|
|
1343
1362
|
showRing={false}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import type { InputControllerConfig } from './index';
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
/** Declared props contract — the instance script's $props() below is
|
|
3
|
+
* annotated from it so the interface cannot drift from what is read. */
|
|
4
|
+
export interface TextAreaInputControllerProps {
|
|
5
|
+
class?: string;
|
|
4
6
|
label: string;
|
|
5
7
|
value: string;
|
|
6
8
|
onChange: (newValue: string) => void;
|
|
@@ -8,7 +10,7 @@ type $$ComponentProps = {
|
|
|
8
10
|
description?: string;
|
|
9
11
|
onFocus?: () => void;
|
|
10
12
|
onClose?: () => void;
|
|
11
|
-
}
|
|
12
|
-
declare const TextAreaInputController: import("svelte").Component
|
|
13
|
+
}
|
|
14
|
+
declare const TextAreaInputController: import("svelte").Component<TextAreaInputControllerProps, {}, "value">;
|
|
13
15
|
type TextAreaInputController = ReturnType<typeof TextAreaInputController>;
|
|
14
16
|
export default TextAreaInputController;
|
|
@@ -1,20 +1,34 @@
|
|
|
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 TextAreaPreviewInputControllerProps {
|
|
7
|
+
label?: string;
|
|
8
|
+
value?: string;
|
|
9
|
+
onChange: (newValue: string) => void;
|
|
10
|
+
config?: InputControllerConfig;
|
|
11
|
+
description?: string;
|
|
12
|
+
portalTarget?: string | HTMLElement;
|
|
13
|
+
}
|
|
14
|
+
</script>
|
|
15
|
+
|
|
1
16
|
<script lang="ts">
|
|
2
17
|
import { Portal } from '@widgetic/design-system/components';
|
|
3
18
|
import { IconArrowsDiagonal } from '@widgetic/design-system/icons';
|
|
4
19
|
import { onMount, onDestroy } from 'svelte';
|
|
5
20
|
|
|
6
21
|
import { TextAreaInputController } from './index';
|
|
7
|
-
import type { InputControllerConfig } from './index';
|
|
8
22
|
|
|
9
23
|
/**
|
|
10
24
|
* Component props
|
|
11
25
|
*/
|
|
12
|
-
export let label:
|
|
13
|
-
export let value:
|
|
14
|
-
export let onChange:
|
|
15
|
-
export let config:
|
|
16
|
-
export let description:
|
|
17
|
-
export let portalTarget:
|
|
26
|
+
export let label: TextAreaPreviewInputControllerProps['label'] = '';
|
|
27
|
+
export let value: TextAreaPreviewInputControllerProps['value'] = '';
|
|
28
|
+
export let onChange: TextAreaPreviewInputControllerProps['onChange'];
|
|
29
|
+
export let config: TextAreaPreviewInputControllerProps['config'] = {};
|
|
30
|
+
export let description: TextAreaPreviewInputControllerProps['description'] = undefined;
|
|
31
|
+
export let portalTarget: TextAreaPreviewInputControllerProps['portalTarget'] = '';
|
|
18
32
|
/**
|
|
19
33
|
* Local Variables
|
|
20
34
|
*/
|
|
@@ -1,4 +1,14 @@
|
|
|
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 TextAreaPreviewInputControllerProps {
|
|
5
|
+
label?: string;
|
|
6
|
+
value?: string;
|
|
7
|
+
onChange: (newValue: string) => void;
|
|
8
|
+
config?: InputControllerConfig;
|
|
9
|
+
description?: string;
|
|
10
|
+
portalTarget?: string | HTMLElement;
|
|
11
|
+
}
|
|
2
12
|
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
13
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
14
|
$$bindings?: Bindings;
|
|
@@ -15,12 +25,12 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
|
|
|
15
25
|
declare const TextAreaPreviewInputController: $$__sveltets_2_IsomorphicComponent<{
|
|
16
26
|
/**
|
|
17
27
|
* Component props
|
|
18
|
-
*/ label?:
|
|
19
|
-
value?:
|
|
20
|
-
onChange:
|
|
21
|
-
config?:
|
|
22
|
-
description?:
|
|
23
|
-
portalTarget?:
|
|
28
|
+
*/ label?: TextAreaPreviewInputControllerProps["label"];
|
|
29
|
+
value?: TextAreaPreviewInputControllerProps["value"];
|
|
30
|
+
onChange: TextAreaPreviewInputControllerProps["onChange"];
|
|
31
|
+
config?: TextAreaPreviewInputControllerProps["config"];
|
|
32
|
+
description?: TextAreaPreviewInputControllerProps["description"];
|
|
33
|
+
portalTarget?: TextAreaPreviewInputControllerProps["portalTarget"];
|
|
24
34
|
}, {
|
|
25
35
|
[evt: string]: CustomEvent<any>;
|
|
26
36
|
}, {}, {}, string>;
|