@softwareone/spi-sv5-library 1.7.9 → 1.7.11
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.
|
@@ -40,10 +40,10 @@
|
|
|
40
40
|
const componentId = $props.id();
|
|
41
41
|
const inputId = id || componentId;
|
|
42
42
|
|
|
43
|
-
const isInvalid = $derived(!!error);
|
|
44
|
-
const isValid = $derived(!isInvalid && (!!value || optional));
|
|
43
|
+
const isInvalid = $derived(!!error && !disabled);
|
|
44
|
+
const isValid = $derived(!isInvalid && (!!value || optional) && !disabled);
|
|
45
45
|
const hasStatus = $derived(isInvalid || isValid);
|
|
46
|
-
const showIcon = $derived(hasStatus || ['password', 'money'].includes(type));
|
|
46
|
+
const showIcon = $derived((hasStatus || ['password', 'money'].includes(type)) && !disabled);
|
|
47
47
|
const showDatePicker = $derived(type === 'date');
|
|
48
48
|
|
|
49
49
|
const transformationType = $derived<Record<string, string>>({
|
|
@@ -176,9 +176,9 @@
|
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
.form-input-disabled {
|
|
179
|
-
background-color: #
|
|
180
|
-
border-color: #
|
|
181
|
-
color: #
|
|
179
|
+
background-color: #e0e5e8;
|
|
180
|
+
border-color: #6b7180;
|
|
181
|
+
color: #000;
|
|
182
182
|
cursor: not-allowed;
|
|
183
183
|
}
|
|
184
184
|
|
|
@@ -346,12 +346,14 @@
|
|
|
346
346
|
--white: #fff;
|
|
347
347
|
--black: #000;
|
|
348
348
|
--error: #dc2626;
|
|
349
|
-
--success: #
|
|
349
|
+
--success: #008556;
|
|
350
350
|
--info-1: #eaecff;
|
|
351
351
|
--gray-1: #f4f6f8;
|
|
352
352
|
--gray-2: #e0e5e8;
|
|
353
353
|
--gray-3: #aeb1b9;
|
|
354
354
|
--gray-4: #6b7180;
|
|
355
|
+
--readonly-bg: #f9fafb;
|
|
356
|
+
--readonly-border: #d1d5db;
|
|
355
357
|
--border: 1px solid var(--gray-4);
|
|
356
358
|
|
|
357
359
|
display: flex;
|
|
@@ -396,8 +398,8 @@
|
|
|
396
398
|
|
|
397
399
|
> .dropdown-container {
|
|
398
400
|
cursor: default;
|
|
399
|
-
background:
|
|
400
|
-
border-color:
|
|
401
|
+
background: var(--readonly-bg);
|
|
402
|
+
border-color: var(--readonly-border);
|
|
401
403
|
}
|
|
402
404
|
}
|
|
403
405
|
|
|
@@ -2,9 +2,10 @@
|
|
|
2
2
|
interface SpinnerProps {
|
|
3
3
|
show: boolean;
|
|
4
4
|
size?: 'sm' | 'md' | 'lg';
|
|
5
|
+
isFixedPosition?: boolean;
|
|
5
6
|
}
|
|
6
7
|
|
|
7
|
-
let { show = $bindable(false), size = 'lg' }: SpinnerProps = $props();
|
|
8
|
+
let { show = $bindable(false), size = 'lg', isFixedPosition = false }: SpinnerProps = $props();
|
|
8
9
|
|
|
9
10
|
const pixelSizes: Record<string, number> = {
|
|
10
11
|
sm: 16,
|
|
@@ -14,20 +15,20 @@
|
|
|
14
15
|
</script>
|
|
15
16
|
|
|
16
17
|
{#if show}
|
|
17
|
-
<div class=
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
18
|
+
<div class={['spinner-container', isFixedPosition ? 'fixed' : 'absolute']}>
|
|
19
|
+
<div class="spinner" style="width: {pixelSizes[size]}px; height: {pixelSizes[size]}px;">
|
|
20
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="none">
|
|
21
|
+
<path
|
|
22
|
+
d="M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20ZM6.27298 20C6.27298 27.5812 12.4188 33.727 20 33.727C27.5812 33.727 33.727 27.5812 33.727 20C33.727 12.4188 27.5812 6.27298 20 6.27298C12.4188 6.27298 6.27298 12.4188 6.27298 20Z"
|
|
23
|
+
fill="#E0E5E8"
|
|
24
|
+
/>
|
|
25
|
+
<path
|
|
26
|
+
d="M20 3.13649C20 1.40425 21.4128 -0.0251732 23.1238 0.245376C27.2709 0.901143 31.1358 2.85154 34.1421 5.85786C37.8929 9.60859 40 14.6957 40 20C40 25.3043 37.8929 30.3914 34.1421 34.1421C31.1358 37.1485 27.2709 39.0989 23.1238 39.7546C21.4128 40.0252 20 38.5957 20 36.8635C20 35.1313 21.4222 33.7627 23.1094 33.3703C25.5876 32.7939 27.8783 31.5346 29.7065 29.7065C32.2808 27.1322 33.727 23.6406 33.727 20C33.727 16.3594 32.2808 12.8678 29.7065 10.2935C27.8783 8.46537 25.5876 7.20612 23.1094 6.62973C21.4222 6.23731 20 4.86873 20 3.13649Z"
|
|
27
|
+
fill="#472AFF"
|
|
28
|
+
/>
|
|
29
|
+
</svg>
|
|
30
|
+
</div>
|
|
29
31
|
</div>
|
|
30
|
-
</div>
|
|
31
32
|
{/if}
|
|
32
33
|
|
|
33
34
|
<style>
|
|
@@ -37,13 +38,20 @@
|
|
|
37
38
|
align-items: center;
|
|
38
39
|
width: 100%;
|
|
39
40
|
height: 100%;
|
|
40
|
-
position: absolute;
|
|
41
41
|
top: 0;
|
|
42
42
|
left: 0;
|
|
43
43
|
background-color: rgba(255, 255, 255, 0.8);
|
|
44
44
|
z-index: 1000;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
+
.fixed {
|
|
48
|
+
position: fixed;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.absolute {
|
|
52
|
+
position: absolute;
|
|
53
|
+
}
|
|
54
|
+
|
|
47
55
|
.spinner {
|
|
48
56
|
animation: spin 0.8s linear infinite;
|
|
49
57
|
}
|
package/dist/Tabs/Tabs.svelte
CHANGED