@finsweet/webflow-apps-utils 1.0.11 → 1.0.12
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.
|
@@ -35,8 +35,8 @@
|
|
|
35
35
|
|
|
36
36
|
<Story name="With Initial Color" args={{ color: '#00ff00' }} />
|
|
37
37
|
|
|
38
|
-
<Story name="Store Controlled" args={{ color: controlledColor, onchange: handleChange }} />
|
|
39
|
-
|
|
40
38
|
<Story name="Edge: Invalid Color" args={{ color: '#xyzxyz' }} />
|
|
41
39
|
|
|
42
40
|
<Story name="Edge: No Color" args={{ color: undefined }} />
|
|
41
|
+
|
|
42
|
+
<Story name="Disabled Picker" args={{ color: '#ebebeb', disabled: true }} />
|
|
@@ -2,15 +2,26 @@
|
|
|
2
2
|
import Tooltip from '../tooltip/Tooltip.svelte';
|
|
3
3
|
import ColorSelect from './ColorSelect.svelte';
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} = $props<{
|
|
5
|
+
interface Props {
|
|
6
|
+
/**
|
|
7
|
+
* The color to display in the picker.
|
|
8
|
+
*/
|
|
10
9
|
color?: string;
|
|
10
|
+
/**
|
|
11
|
+
* The function to call when the color changes.
|
|
12
|
+
*/
|
|
11
13
|
onchange?: (color: string) => void;
|
|
14
|
+
/**
|
|
15
|
+
* The width of the picker.
|
|
16
|
+
*/
|
|
12
17
|
width?: string;
|
|
13
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Whether the picker is disabled.
|
|
20
|
+
*/
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
let { color = $bindable('#fff'), onchange, width = '80px', disabled = false }: Props = $props();
|
|
14
25
|
|
|
15
26
|
function normalizeHex(value: string): string {
|
|
16
27
|
let v = value.trim();
|
|
@@ -74,13 +85,14 @@
|
|
|
74
85
|
listenerout="click"
|
|
75
86
|
showArrow={false}
|
|
76
87
|
padding="0"
|
|
88
|
+
{disabled}
|
|
77
89
|
stopPropagation={true}
|
|
78
90
|
width="241px"
|
|
79
91
|
placement="bottom"
|
|
80
92
|
fallbackPlacements={['top-end', 'top', 'bottom-end', 'bottom', 'top-start', 'bottom-start']}
|
|
81
93
|
>
|
|
82
94
|
{#snippet target()}
|
|
83
|
-
<div class="color-picker__swatch" data-testid="color-swatch">
|
|
95
|
+
<div class="color-picker__swatch" data-testid="color-swatch" class:disabled>
|
|
84
96
|
<div class="color-swatch" style="background-color: {color || '#000000'}"></div>
|
|
85
97
|
</div>
|
|
86
98
|
{/snippet}
|
|
@@ -92,7 +104,10 @@
|
|
|
92
104
|
<input
|
|
93
105
|
type="text"
|
|
94
106
|
class="color-picker__input"
|
|
107
|
+
class:disabled
|
|
95
108
|
bind:value={color}
|
|
109
|
+
{disabled}
|
|
110
|
+
readonly={disabled}
|
|
96
111
|
oninput={handleInputChange}
|
|
97
112
|
onkeydown={handleInputKeydown}
|
|
98
113
|
onpaste={handleInputPaste}
|
|
@@ -1,8 +1,21 @@
|
|
|
1
|
-
|
|
1
|
+
interface Props {
|
|
2
|
+
/**
|
|
3
|
+
* The color to display in the picker.
|
|
4
|
+
*/
|
|
2
5
|
color?: string;
|
|
6
|
+
/**
|
|
7
|
+
* The function to call when the color changes.
|
|
8
|
+
*/
|
|
3
9
|
onchange?: (color: string) => void;
|
|
10
|
+
/**
|
|
11
|
+
* The width of the picker.
|
|
12
|
+
*/
|
|
4
13
|
width?: string;
|
|
5
|
-
|
|
6
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Whether the picker is disabled.
|
|
16
|
+
*/
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
}
|
|
19
|
+
declare const ColorPicker: import("svelte").Component<Props, {}, "color">;
|
|
7
20
|
type ColorPicker = ReturnType<typeof ColorPicker>;
|
|
8
21
|
export default ColorPicker;
|