@finsweet/webflow-apps-utils 1.0.43 → 1.0.45
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/dist/ui/components/Loader.stories.js +163 -0
- package/dist/ui/components/LoadingScreen.stories.js +242 -0
- package/dist/ui/components/button-group/ButtonGroup.svelte +10 -11
- package/dist/ui/components/checkbox/Checkbox.svelte +9 -9
- package/dist/ui/components/select/Select.svelte +10 -6
- package/dist/ui/components/shared/ImageUpload.svelte +2 -2
- package/dist/ui/components/tooltip/Tooltip.svelte +9 -1
- package/dist/ui/icons/DeleteIcon.svelte +7 -1
- package/dist/ui/icons/SettingsIcon.svelte +6 -2
- package/dist/ui/icons/index.d.ts +1 -2
- package/dist/ui/icons/index.js +1 -2
- package/dist/ui/index.css +4 -1
- package/package.json +1 -1
- package/dist/ui/icons/DeleteOutlinedIcon.svelte +0 -8
- package/dist/ui/icons/DeleteOutlinedIcon.svelte.d.ts +0 -26
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import Loader from './Loader.svelte';
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Ui/Loader',
|
|
4
|
+
component: Loader,
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: 'centered',
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: 'A customizable loading spinner component with proportional sizing, configurable colors, and adjustable animation speed.'
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
size: {
|
|
16
|
+
control: { type: 'range', min: 16, max: 200, step: 4 },
|
|
17
|
+
description: 'The size of the loader in pixels'
|
|
18
|
+
},
|
|
19
|
+
color: {
|
|
20
|
+
control: 'color',
|
|
21
|
+
description: 'The color of the spinning arc'
|
|
22
|
+
},
|
|
23
|
+
speed: {
|
|
24
|
+
control: { type: 'range', min: 0.5, max: 3, step: 0.1 },
|
|
25
|
+
description: 'Animation speed in seconds (lower is faster)'
|
|
26
|
+
},
|
|
27
|
+
margin: {
|
|
28
|
+
control: 'text',
|
|
29
|
+
description: 'CSS margin value for the loader wrapper'
|
|
30
|
+
},
|
|
31
|
+
trackColor: {
|
|
32
|
+
control: 'color',
|
|
33
|
+
description: 'The color of the background track circle'
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
export default meta;
|
|
38
|
+
// Basic stories
|
|
39
|
+
export const Default = {
|
|
40
|
+
args: {}
|
|
41
|
+
};
|
|
42
|
+
export const Small = {
|
|
43
|
+
args: {
|
|
44
|
+
size: 24
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
export const Medium = {
|
|
48
|
+
args: {
|
|
49
|
+
size: 48
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
export const Large = {
|
|
53
|
+
args: {
|
|
54
|
+
size: 96
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
export const ExtraLarge = {
|
|
58
|
+
args: {
|
|
59
|
+
size: 150
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
// Color variants
|
|
63
|
+
export const Primary = {
|
|
64
|
+
args: {
|
|
65
|
+
color: '#3b82f6',
|
|
66
|
+
size: 64
|
|
67
|
+
}
|
|
68
|
+
};
|
|
69
|
+
export const Success = {
|
|
70
|
+
args: {
|
|
71
|
+
color: '#22c55e',
|
|
72
|
+
size: 64
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
export const Warning = {
|
|
76
|
+
args: {
|
|
77
|
+
color: '#f59e0b',
|
|
78
|
+
size: 64
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
export const Error = {
|
|
82
|
+
args: {
|
|
83
|
+
color: '#ef4444',
|
|
84
|
+
size: 64
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
export const CustomColors = {
|
|
88
|
+
args: {
|
|
89
|
+
color: '#8b5cf6',
|
|
90
|
+
trackColor: '#c084fc',
|
|
91
|
+
size: 64
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
// Speed variants
|
|
95
|
+
export const Slow = {
|
|
96
|
+
args: {
|
|
97
|
+
speed: 2,
|
|
98
|
+
size: 64
|
|
99
|
+
},
|
|
100
|
+
parameters: {
|
|
101
|
+
docs: {
|
|
102
|
+
description: {
|
|
103
|
+
story: 'Slower animation speed (2 seconds per rotation)'
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
export const Fast = {
|
|
109
|
+
args: {
|
|
110
|
+
speed: 0.5,
|
|
111
|
+
size: 64
|
|
112
|
+
},
|
|
113
|
+
parameters: {
|
|
114
|
+
docs: {
|
|
115
|
+
description: {
|
|
116
|
+
story: 'Faster animation speed (0.5 seconds per rotation)'
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
};
|
|
121
|
+
// With margin
|
|
122
|
+
export const WithMargin = {
|
|
123
|
+
args: {
|
|
124
|
+
margin: '20px',
|
|
125
|
+
size: 64
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
// Dark background showcase
|
|
129
|
+
export const OnDarkBackground = {
|
|
130
|
+
args: {
|
|
131
|
+
color: 'white',
|
|
132
|
+
trackColor: 'rgba(255, 255, 255, 0.2)',
|
|
133
|
+
size: 64
|
|
134
|
+
},
|
|
135
|
+
parameters: {
|
|
136
|
+
backgrounds: { default: 'dark' }
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
// Light background showcase
|
|
140
|
+
export const OnLightBackground = {
|
|
141
|
+
args: {
|
|
142
|
+
color: '#1e293b',
|
|
143
|
+
trackColor: 'rgba(30, 41, 59, 0.2)',
|
|
144
|
+
size: 64
|
|
145
|
+
},
|
|
146
|
+
parameters: {
|
|
147
|
+
backgrounds: { default: 'light' }
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
// Multiple sizes comparison
|
|
151
|
+
export const SizeComparison = {
|
|
152
|
+
render: () => ({
|
|
153
|
+
Component: Loader,
|
|
154
|
+
props: {}
|
|
155
|
+
}),
|
|
156
|
+
parameters: {
|
|
157
|
+
docs: {
|
|
158
|
+
description: {
|
|
159
|
+
story: 'Visual comparison of different loader sizes'
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
};
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import LoadingScreen from './LoadingScreen.svelte';
|
|
2
|
+
const meta = {
|
|
3
|
+
title: 'Ui/LoadingScreen',
|
|
4
|
+
component: LoadingScreen,
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: 'fullscreen',
|
|
7
|
+
docs: {
|
|
8
|
+
description: {
|
|
9
|
+
component: 'A full-screen loading overlay component with customizable messaging, error states, and support for both fixed and absolute positioning.'
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
tags: ['autodocs'],
|
|
14
|
+
argTypes: {
|
|
15
|
+
message: {
|
|
16
|
+
control: 'text',
|
|
17
|
+
description: 'The message to display below the loader or error icon'
|
|
18
|
+
},
|
|
19
|
+
position: {
|
|
20
|
+
control: { type: 'select' },
|
|
21
|
+
options: ['fixed', 'absolute'],
|
|
22
|
+
description: 'CSS position property for the loading screen'
|
|
23
|
+
},
|
|
24
|
+
active: {
|
|
25
|
+
control: 'boolean',
|
|
26
|
+
description: 'Controls visibility of the loading screen'
|
|
27
|
+
},
|
|
28
|
+
error: {
|
|
29
|
+
control: 'boolean',
|
|
30
|
+
description: 'If true, displays error state with warning icon'
|
|
31
|
+
},
|
|
32
|
+
raw: {
|
|
33
|
+
control: 'boolean',
|
|
34
|
+
description: 'If true, renders HTML in the message (use with caution)'
|
|
35
|
+
},
|
|
36
|
+
backgroundColor: {
|
|
37
|
+
control: 'color',
|
|
38
|
+
description: 'Background color of the overlay'
|
|
39
|
+
},
|
|
40
|
+
spinnerSize: {
|
|
41
|
+
control: { type: 'range', min: 24, max: 120, step: 4 },
|
|
42
|
+
description: 'Size of the spinner in pixels'
|
|
43
|
+
},
|
|
44
|
+
className: {
|
|
45
|
+
control: 'text',
|
|
46
|
+
description: 'Additional CSS class for the main loader container'
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
export default meta;
|
|
51
|
+
// Basic stories
|
|
52
|
+
export const Default = {
|
|
53
|
+
args: {
|
|
54
|
+
active: true,
|
|
55
|
+
message: 'Loading...'
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
export const WithCustomMessage = {
|
|
59
|
+
args: {
|
|
60
|
+
active: true,
|
|
61
|
+
message: 'Please wait while we fetch your data'
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
export const LongMessage = {
|
|
65
|
+
args: {
|
|
66
|
+
active: true,
|
|
67
|
+
message: 'This might take a few moments. Please do not close this window or navigate away.'
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
export const NoMessage = {
|
|
71
|
+
args: {
|
|
72
|
+
active: true,
|
|
73
|
+
message: ''
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
// Spinner sizes
|
|
77
|
+
export const SmallSpinner = {
|
|
78
|
+
args: {
|
|
79
|
+
active: true,
|
|
80
|
+
message: 'Loading...',
|
|
81
|
+
spinnerSize: 30
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
export const LargeSpinner = {
|
|
85
|
+
args: {
|
|
86
|
+
active: true,
|
|
87
|
+
message: 'Loading...',
|
|
88
|
+
spinnerSize: 80
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
// Position variants
|
|
92
|
+
export const FixedPosition = {
|
|
93
|
+
args: {
|
|
94
|
+
active: true,
|
|
95
|
+
message: 'Fixed position loading screen',
|
|
96
|
+
position: 'fixed'
|
|
97
|
+
},
|
|
98
|
+
parameters: {
|
|
99
|
+
docs: {
|
|
100
|
+
description: {
|
|
101
|
+
story: 'Fixed positioning covers the entire viewport regardless of scroll position'
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
export const AbsolutePosition = {
|
|
107
|
+
args: {
|
|
108
|
+
active: true,
|
|
109
|
+
message: 'Absolute position loading screen',
|
|
110
|
+
position: 'absolute'
|
|
111
|
+
},
|
|
112
|
+
parameters: {
|
|
113
|
+
docs: {
|
|
114
|
+
description: {
|
|
115
|
+
story: 'Absolute positioning is relative to the nearest positioned ancestor'
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
// Error states
|
|
121
|
+
export const ErrorState = {
|
|
122
|
+
args: {
|
|
123
|
+
active: true,
|
|
124
|
+
error: true,
|
|
125
|
+
message: 'Something went wrong while loading your data.'
|
|
126
|
+
}
|
|
127
|
+
};
|
|
128
|
+
export const ErrorWithDetails = {
|
|
129
|
+
args: {
|
|
130
|
+
active: true,
|
|
131
|
+
error: true,
|
|
132
|
+
message: 'Failed to connect to the server. Please check your internet connection and try again.'
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
export const ErrorMinimal = {
|
|
136
|
+
args: {
|
|
137
|
+
active: true,
|
|
138
|
+
error: true,
|
|
139
|
+
message: 'An error occurred.'
|
|
140
|
+
}
|
|
141
|
+
};
|
|
142
|
+
// Background colors
|
|
143
|
+
export const LightBackground = {
|
|
144
|
+
args: {
|
|
145
|
+
active: true,
|
|
146
|
+
message: 'Loading with light background',
|
|
147
|
+
backgroundColor: 'rgba(255, 255, 255, 0.95)'
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
export const DarkBackground = {
|
|
151
|
+
args: {
|
|
152
|
+
active: true,
|
|
153
|
+
message: 'Loading with dark background',
|
|
154
|
+
backgroundColor: 'rgba(0, 0, 0, 0.9)'
|
|
155
|
+
}
|
|
156
|
+
};
|
|
157
|
+
export const SemiTransparent = {
|
|
158
|
+
args: {
|
|
159
|
+
active: true,
|
|
160
|
+
message: 'Semi-transparent overlay',
|
|
161
|
+
backgroundColor: 'rgba(30, 30, 30, 0.7)'
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
export const ColoredBackground = {
|
|
165
|
+
args: {
|
|
166
|
+
active: true,
|
|
167
|
+
message: 'Custom colored background',
|
|
168
|
+
backgroundColor: 'rgba(59, 130, 246, 0.9)'
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
// HTML message with raw prop
|
|
172
|
+
export const RawHTMLMessage = {
|
|
173
|
+
args: {
|
|
174
|
+
active: true,
|
|
175
|
+
raw: true,
|
|
176
|
+
message: 'Loading <strong>important</strong> data<br/>Please wait...'
|
|
177
|
+
},
|
|
178
|
+
parameters: {
|
|
179
|
+
docs: {
|
|
180
|
+
description: {
|
|
181
|
+
story: 'Using raw=true to render HTML in the message. Use with caution and only with trusted content.'
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
// Inactive (hidden)
|
|
187
|
+
export const Inactive = {
|
|
188
|
+
args: {
|
|
189
|
+
active: false,
|
|
190
|
+
message: 'This should not be visible'
|
|
191
|
+
},
|
|
192
|
+
parameters: {
|
|
193
|
+
docs: {
|
|
194
|
+
description: {
|
|
195
|
+
story: 'When active is false, the loading screen is hidden'
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
// Use cases
|
|
201
|
+
export const InitialPageLoad = {
|
|
202
|
+
args: {
|
|
203
|
+
active: true,
|
|
204
|
+
message: 'Initializing application...',
|
|
205
|
+
spinnerSize: 60
|
|
206
|
+
}
|
|
207
|
+
};
|
|
208
|
+
export const DataFetch = {
|
|
209
|
+
args: {
|
|
210
|
+
active: true,
|
|
211
|
+
message: 'Fetching data from server...',
|
|
212
|
+
spinnerSize: 50
|
|
213
|
+
}
|
|
214
|
+
};
|
|
215
|
+
export const FileUpload = {
|
|
216
|
+
args: {
|
|
217
|
+
active: true,
|
|
218
|
+
message: 'Uploading files... This may take a moment.',
|
|
219
|
+
spinnerSize: 50
|
|
220
|
+
}
|
|
221
|
+
};
|
|
222
|
+
export const Processing = {
|
|
223
|
+
args: {
|
|
224
|
+
active: true,
|
|
225
|
+
message: 'Processing your request...',
|
|
226
|
+
spinnerSize: 50
|
|
227
|
+
}
|
|
228
|
+
};
|
|
229
|
+
export const NetworkError = {
|
|
230
|
+
args: {
|
|
231
|
+
active: true,
|
|
232
|
+
error: true,
|
|
233
|
+
message: 'Unable to connect to the server. Please check your network connection.'
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
export const ServerError = {
|
|
237
|
+
args: {
|
|
238
|
+
active: true,
|
|
239
|
+
error: true,
|
|
240
|
+
message: 'The server encountered an error. Our team has been notified.'
|
|
241
|
+
}
|
|
242
|
+
};
|
|
@@ -52,19 +52,18 @@
|
|
|
52
52
|
<style>
|
|
53
53
|
.btn-group {
|
|
54
54
|
display: flex;
|
|
55
|
-
background: var(
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
box-shadow: var(--boxShadows-action-secondary);
|
|
55
|
+
background: var(--actionSecondaryBackground);
|
|
56
|
+
border-radius: 4px;
|
|
57
|
+
box-shadow:
|
|
58
|
+
0 0.5px 1px 0 #000,
|
|
59
|
+
0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
.btn {
|
|
64
63
|
padding: 4px 8px;
|
|
65
64
|
cursor: pointer;
|
|
66
65
|
background: transparent;
|
|
67
|
-
border-radius:
|
|
66
|
+
border-radius: 4px;
|
|
68
67
|
margin: 2px 0px;
|
|
69
68
|
color: var(--text1);
|
|
70
69
|
}
|
|
@@ -76,14 +75,14 @@
|
|
|
76
75
|
|
|
77
76
|
.btn-group .btn:first-of-type {
|
|
78
77
|
margin-left: 2px;
|
|
79
|
-
border-top-left-radius:
|
|
80
|
-
border-bottom-left-radius:
|
|
78
|
+
border-top-left-radius: 4px;
|
|
79
|
+
border-bottom-left-radius: 4px;
|
|
81
80
|
}
|
|
82
81
|
|
|
83
82
|
.btn-group .btn:last-of-type {
|
|
84
83
|
margin-right: 2px;
|
|
85
|
-
border-top-right-radius:
|
|
86
|
-
border-bottom-right-radius:
|
|
84
|
+
border-top-right-radius: 4px;
|
|
85
|
+
border-bottom-right-radius: 4px;
|
|
87
86
|
}
|
|
88
87
|
|
|
89
88
|
.btn.active {
|
|
@@ -88,8 +88,8 @@
|
|
|
88
88
|
.checkbox {
|
|
89
89
|
width: 16px;
|
|
90
90
|
height: 16px;
|
|
91
|
-
border-radius:
|
|
92
|
-
border: 2px solid
|
|
91
|
+
border-radius: 1px;
|
|
92
|
+
border: 2px solid var(--actionSecondaryBorder);
|
|
93
93
|
display: flex;
|
|
94
94
|
justify-content: center;
|
|
95
95
|
align-items: center;
|
|
@@ -106,14 +106,14 @@
|
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
.checkbox--checked {
|
|
109
|
-
color:
|
|
109
|
+
color: var(--text1);
|
|
110
110
|
border: none;
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
.checkbox--checked :global(svg) {
|
|
114
|
-
color:
|
|
115
|
-
background:
|
|
116
|
-
border-radius:
|
|
114
|
+
color: var(--text1);
|
|
115
|
+
background: var(--actionPrimaryBackground);
|
|
116
|
+
border-radius: 1px;
|
|
117
117
|
padding: 2px;
|
|
118
118
|
}
|
|
119
119
|
|
|
@@ -127,15 +127,15 @@
|
|
|
127
127
|
}
|
|
128
128
|
|
|
129
129
|
.checkbox:focus-visible {
|
|
130
|
-
outline: 2px solid var(--
|
|
130
|
+
outline: 2px solid var(--actionPrimaryBackground);
|
|
131
131
|
outline-offset: 2px;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
.checkbox:hover:not(.checkbox--disabled) {
|
|
135
|
-
border-color:
|
|
135
|
+
border-color: var(--actionSecondaryBorder);
|
|
136
136
|
}
|
|
137
137
|
|
|
138
138
|
.checkbox--checked:hover:not(.checkbox--disabled) :global(svg) {
|
|
139
|
-
background:
|
|
139
|
+
background: var(--actionPrimaryBackground);
|
|
140
140
|
}
|
|
141
141
|
</style>
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
const dropdownStyles = $derived(() => {
|
|
96
96
|
const base = {
|
|
97
97
|
borderRadius: 'var(--border-radius, 4px)',
|
|
98
|
-
background: 'var(--
|
|
98
|
+
background: 'var(--actionSecondaryBackground)',
|
|
99
99
|
boxShadow: '0px 0.5px 1px 0px #000, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset'
|
|
100
100
|
};
|
|
101
101
|
|
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
if (isHovered) {
|
|
124
124
|
return {
|
|
125
125
|
...base,
|
|
126
|
-
background: 'var(--
|
|
126
|
+
background: 'var(--actionSecondaryBackground)'
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
129
|
|
|
@@ -665,7 +665,7 @@
|
|
|
665
665
|
}
|
|
666
666
|
|
|
667
667
|
.dropdown-list :global(.dropdown-item.hover-state) {
|
|
668
|
-
background: var(--
|
|
668
|
+
background: var(--background5);
|
|
669
669
|
}
|
|
670
670
|
|
|
671
671
|
.dropdown-list {
|
|
@@ -677,8 +677,8 @@
|
|
|
677
677
|
align-items: flex-start;
|
|
678
678
|
gap: 4px;
|
|
679
679
|
border-radius: 4px;
|
|
680
|
-
border: 1px solid var(--
|
|
681
|
-
background: var(--
|
|
680
|
+
border: 1px solid var(--border1);
|
|
681
|
+
background: var(--background3);
|
|
682
682
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
|
|
683
683
|
|
|
684
684
|
overflow-y: auto;
|
|
@@ -690,7 +690,7 @@
|
|
|
690
690
|
align-items: center;
|
|
691
691
|
gap: 4px;
|
|
692
692
|
align-self: stretch;
|
|
693
|
-
color: var(--text2
|
|
693
|
+
color: var(--text2);
|
|
694
694
|
|
|
695
695
|
font-size: 11px;
|
|
696
696
|
font-style: normal;
|
|
@@ -748,4 +748,8 @@
|
|
|
748
748
|
justify-content: center;
|
|
749
749
|
align-items: center;
|
|
750
750
|
}
|
|
751
|
+
.arrow :global(svg) {
|
|
752
|
+
width: 10px;
|
|
753
|
+
height: 10px;
|
|
754
|
+
}
|
|
751
755
|
</style>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { createEventDispatcher } from 'svelte';
|
|
3
3
|
import { onDestroy } from 'svelte';
|
|
4
4
|
|
|
5
|
-
import {
|
|
5
|
+
import { DeleteIcon, FileUploadIcon, RefreshIcon } from '../../icons';
|
|
6
6
|
import { Button } from '../button';
|
|
7
7
|
import { Text } from '../text';
|
|
8
8
|
|
|
@@ -134,7 +134,7 @@
|
|
|
134
134
|
{#if previewUrl}
|
|
135
135
|
<div class="action-buttons">
|
|
136
136
|
<Button text="Replace" variant="secondary" onclick={triggerFileInput} icon={RefreshIcon} />
|
|
137
|
-
<Button text="Delete" variant="secondary" onclick={reset} icon={
|
|
137
|
+
<Button text="Delete" variant="secondary" onclick={reset} icon={DeleteIcon} />
|
|
138
138
|
</div>
|
|
139
139
|
{/if}
|
|
140
140
|
|
|
@@ -276,8 +276,10 @@
|
|
|
276
276
|
|
|
277
277
|
// Svelte 5 effect for hidden prop
|
|
278
278
|
$effect(() => {
|
|
279
|
+
let timeoutId: ReturnType<typeof setTimeout> | undefined;
|
|
280
|
+
|
|
279
281
|
if (hidden) {
|
|
280
|
-
setTimeout(() => {
|
|
282
|
+
timeoutId = setTimeout(() => {
|
|
281
283
|
tooltipInstance?.hideTooltip();
|
|
282
284
|
const wrapper = document.querySelector<HTMLDivElement>('.finsweet-components');
|
|
283
285
|
if (wrapper) {
|
|
@@ -286,6 +288,12 @@
|
|
|
286
288
|
}
|
|
287
289
|
}, 10);
|
|
288
290
|
}
|
|
291
|
+
|
|
292
|
+
return () => {
|
|
293
|
+
if (timeoutId !== undefined) {
|
|
294
|
+
clearTimeout(timeoutId);
|
|
295
|
+
}
|
|
296
|
+
};
|
|
289
297
|
});
|
|
290
298
|
|
|
291
299
|
let isClickTarget = $state(listener === 'click' && listenerout === 'click');
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
<svg
|
|
1
|
+
<svg
|
|
2
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
3
|
+
width="100%"
|
|
4
|
+
height="100%"
|
|
5
|
+
viewBox="2.25 1.5 8.25 8.25"
|
|
6
|
+
fill="none"
|
|
7
|
+
>
|
|
2
8
|
<path
|
|
3
9
|
fill-rule="evenodd"
|
|
4
10
|
clip-rule="evenodd"
|
|
@@ -1,8 +1,12 @@
|
|
|
1
|
-
<svg width="100%" height="100%" viewBox="0 0
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 11 11" fill="none">
|
|
2
|
+
<path
|
|
3
|
+
d="M4.92591 6C5.2941 6 5.59257 5.70152 5.59257 5.33333C5.59257 4.96514 5.2941 4.66667 4.92591 4.66667C4.55772 4.66667 4.25924 4.96514 4.25924 5.33333C4.25924 5.70152 4.55772 6 4.92591 6Z"
|
|
4
|
+
fill="currentColor"
|
|
5
|
+
/>
|
|
2
6
|
<path
|
|
3
7
|
fill-rule="evenodd"
|
|
4
8
|
clip-rule="evenodd"
|
|
5
|
-
d="
|
|
9
|
+
d="M4.49027 0C4.21237 0 3.96363 0.172382 3.86605 0.432584L3.16926 2.29068L1.21173 1.96507C0.937596 1.91947 0.663936 2.0487 0.524988 2.28937L0.0893211 3.04397C-0.0496271 3.28463 -0.0247135 3.58624 0.151841 3.80085L1.41262 5.33334L0.151869 6.8658C-0.0246854 7.08041 -0.049599 7.38202 0.0893492 7.62268L0.525016 8.37728C0.663964 8.61795 0.937625 8.74718 1.21175 8.70158L3.16926 8.37597L3.86605 10.2341C3.96363 10.4943 4.21237 10.6667 4.49027 10.6667H5.3616C5.6395 10.6667 5.88825 10.4943 5.98582 10.2341L6.68261 8.37598L8.64019 8.7016C8.91432 8.74719 9.18798 8.61796 9.32693 8.3773L9.76259 7.6227C9.90154 7.38204 9.87663 7.08042 9.70007 6.86582L8.43931 5.33334L9.7001 3.80083C9.87666 3.58623 9.90157 3.28461 9.76262 3.04395L9.32696 2.28935C9.18801 2.04869 8.91435 1.91946 8.64022 1.96505L6.68261 2.29068L5.98582 0.432584C5.88825 0.172382 5.6395 0 5.3616 0H4.49027ZM4.49027 0.666667H5.3616L6.05839 2.52476C6.17027 2.82312 6.47766 3.00059 6.792 2.94831L8.74961 2.62269L9.18527 3.37728L7.92448 4.90979C7.72203 5.15587 7.72203 5.51081 7.92448 5.75689L9.18524 7.28937L8.74958 8.04396L6.792 7.71835C6.47766 7.66606 6.17028 7.84353 6.05839 8.1419L5.3616 10H4.49027L3.79348 8.14189C3.68159 7.84353 3.3742 7.66606 3.05987 7.71834L1.10237 8.04395L0.6667 7.28935L1.92745 5.75689C2.12989 5.51081 2.12989 5.15587 1.92745 4.90979L0.666671 3.3773L1.10234 2.6227L3.05988 2.94831C3.37421 3.0006 3.6816 2.82313 3.79348 2.52476L4.49027 0.666667Z"
|
|
6
10
|
fill="currentColor"
|
|
7
11
|
/>
|
|
8
12
|
</svg>
|
package/dist/ui/icons/index.d.ts
CHANGED
|
@@ -35,7 +35,6 @@ import CookieBannerIcon from './CookieBannerIcon.svelte';
|
|
|
35
35
|
import CookieIcon from './CookieIcon.svelte';
|
|
36
36
|
import CopyIcon from './CopyIcon.svelte';
|
|
37
37
|
import DeleteIcon from './DeleteIcon.svelte';
|
|
38
|
-
import DeleteOutlinedIcon from './DeleteOutlinedIcon.svelte';
|
|
39
38
|
import Desktop from './Desktop.svelte';
|
|
40
39
|
import DesktopWithStar from './DesktopWithStar.svelte';
|
|
41
40
|
import DivBlock from './DivBlock.svelte';
|
|
@@ -134,4 +133,4 @@ import WorkspaceIcon from './WorkspaceIcon.svelte';
|
|
|
134
133
|
import XL from './XL.svelte';
|
|
135
134
|
import XXL from './XXL.svelte';
|
|
136
135
|
import XXXL from './XXXL.svelte';
|
|
137
|
-
export { AccordionDownArrow, AccordionUpArrow, AccountIcon, AiIcon, AnalyticsIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CalendarIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CircleTimesIcon, CloseCircleIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CookieBannerIcon, CopyIcon, DeleteIcon,
|
|
136
|
+
export { AccordionDownArrow, AccordionUpArrow, AccountIcon, AiIcon, AnalyticsIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CalendarIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CircleTimesIcon, CloseCircleIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CookieBannerIcon, CopyIcon, DeleteIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, EssentialIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, GlobeCheckedIcon, GlobeWarningIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, LogoutIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PolicyIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SearchCancelIcon, SelectIcon, SettingsIcon, ShopIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, TeamIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UncategorizedIcon, UndoIcon, UpgradeIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };
|
package/dist/ui/icons/index.js
CHANGED
|
@@ -35,7 +35,6 @@ import CookieBannerIcon from './CookieBannerIcon.svelte';
|
|
|
35
35
|
import CookieIcon from './CookieIcon.svelte';
|
|
36
36
|
import CopyIcon from './CopyIcon.svelte';
|
|
37
37
|
import DeleteIcon from './DeleteIcon.svelte';
|
|
38
|
-
import DeleteOutlinedIcon from './DeleteOutlinedIcon.svelte';
|
|
39
38
|
import Desktop from './Desktop.svelte';
|
|
40
39
|
import DesktopWithStar from './DesktopWithStar.svelte';
|
|
41
40
|
import DivBlock from './DivBlock.svelte';
|
|
@@ -134,4 +133,4 @@ import WorkspaceIcon from './WorkspaceIcon.svelte';
|
|
|
134
133
|
import XL from './XL.svelte';
|
|
135
134
|
import XXL from './XXL.svelte';
|
|
136
135
|
import XXXL from './XXXL.svelte';
|
|
137
|
-
export { AccordionDownArrow, AccordionUpArrow, AccountIcon, AiIcon, AnalyticsIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CalendarIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CircleTimesIcon, CloseCircleIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CookieBannerIcon, CopyIcon, DeleteIcon,
|
|
136
|
+
export { AccordionDownArrow, AccordionUpArrow, AccountIcon, AiIcon, AnalyticsIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CalendarIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CircleTimesIcon, CloseCircleIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CookieBannerIcon, CopyIcon, DeleteIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, EssentialIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, GlobeCheckedIcon, GlobeWarningIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, LogoutIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PolicyIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, ReceiptIcon, RepairIcon, SaveIcon, SearchIcon, SearchCancelIcon, SelectIcon, SettingsIcon, ShopIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, TeamIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UncategorizedIcon, UndoIcon, UpgradeIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, WorkspaceIcon, XL, XXL, XXXL };
|
package/dist/ui/index.css
CHANGED
|
@@ -13,6 +13,9 @@ body,
|
|
|
13
13
|
--background3: #383838;
|
|
14
14
|
--background4: #373737;
|
|
15
15
|
--background5: #444444;
|
|
16
|
+
--actionSecondaryBackground:
|
|
17
|
+
linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
|
|
18
|
+
rgba(255, 255, 255, 0.08);
|
|
16
19
|
--backgroundInactive: #2e2e2e;
|
|
17
20
|
--backgroundInverse: #ebebeb;
|
|
18
21
|
--black: #000000;
|
|
@@ -445,7 +448,7 @@ input::-webkit-inner-spin-button {
|
|
|
445
448
|
align-self: stretch;
|
|
446
449
|
}
|
|
447
450
|
/* Global SVG styles */
|
|
448
|
-
svg {
|
|
451
|
+
svg:not(.loader-svg) {
|
|
449
452
|
display: block;
|
|
450
453
|
width: 14px;
|
|
451
454
|
height: 14px;
|
package/package.json
CHANGED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
|
|
2
|
-
<path
|
|
3
|
-
fill-rule="evenodd"
|
|
4
|
-
clip-rule="evenodd"
|
|
5
|
-
d="M7 2C6.44772 2 6 2.44772 6 3V4H3V5H4V11.5C4 12.3284 4.67157 13 5.5 13H11.5C12.3284 13 13 12.3284 13 11.5V5H14V4H11V3C11 2.44772 10.5523 2 10 2H7ZM10 4V3H7V4H10ZM5 11.5V5H12V11.5C12 11.7761 11.7761 12 11.5 12H5.5C5.22386 12 5 11.7761 5 11.5Z"
|
|
6
|
-
fill="currentColor"
|
|
7
|
-
/>
|
|
8
|
-
</svg>
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export default DeleteOutlinedIcon;
|
|
2
|
-
type DeleteOutlinedIcon = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const DeleteOutlinedIcon: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
|
-
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> {
|
|
15
|
-
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
-
$$bindings?: Bindings;
|
|
17
|
-
} & Exports;
|
|
18
|
-
(internal: unknown, props: {
|
|
19
|
-
$$events?: Events;
|
|
20
|
-
$$slots?: Slots;
|
|
21
|
-
}): Exports & {
|
|
22
|
-
$set?: any;
|
|
23
|
-
$on?: any;
|
|
24
|
-
};
|
|
25
|
-
z_$$bindings?: Bindings;
|
|
26
|
-
}
|