hamzus-ui 0.0.187 → 0.0.189
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/package.json
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
export let input
|
|
16
16
|
export let name = '';
|
|
17
17
|
export let value = '';
|
|
18
|
+
export let conditions = [];
|
|
18
19
|
export let initialValue = value;
|
|
19
20
|
export let hasChanged = false;
|
|
20
21
|
export let disabled = false;
|
|
@@ -99,6 +100,17 @@
|
|
|
99
100
|
if (newValue !== value) {
|
|
100
101
|
value = newValue;
|
|
101
102
|
}
|
|
103
|
+
|
|
104
|
+
// on verifie si les conditions sont remplis
|
|
105
|
+
for (let i = 0; i < conditions.length; i++) {
|
|
106
|
+
const condition = conditions[i];
|
|
107
|
+
|
|
108
|
+
const result = condition.function(value)
|
|
109
|
+
|
|
110
|
+
conditions[i].validate = result
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
conditions = [...conditions]
|
|
102
114
|
|
|
103
115
|
|
|
104
116
|
onChange(value)
|
|
@@ -221,6 +233,26 @@
|
|
|
221
233
|
{/if}
|
|
222
234
|
</div>
|
|
223
235
|
</label>
|
|
236
|
+
{#if conditions.length > 0}
|
|
237
|
+
{#each conditions as condition}
|
|
238
|
+
<div class="completed">
|
|
239
|
+
{#if condition.validate}
|
|
240
|
+
<svg class="{condition.validate ? "success" : "error"}" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
241
|
+
<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#34C759"/>
|
|
242
|
+
<path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#34C759"/>
|
|
243
|
+
</svg>
|
|
244
|
+
|
|
245
|
+
{:else}
|
|
246
|
+
<svg class="{condition.validate ? "success" : "error"}" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
247
|
+
<path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#FF383C"/>
|
|
248
|
+
<path d="M13.0594 12.0001L15.3594 9.70011C15.6494 9.41011 15.6494 8.93011 15.3594 8.64011C15.0694 8.35011 14.5894 8.35011 14.2994 8.64011L11.9994 10.9401L9.69937 8.64011C9.40937 8.35011 8.92937 8.35011 8.63938 8.64011C8.34938 8.93011 8.34938 9.41011 8.63938 9.70011L10.9394 12.0001L8.63938 14.3001C8.34938 14.5901 8.34938 15.0701 8.63938 15.3601C8.78938 15.5101 8.97937 15.5801 9.16937 15.5801C9.35937 15.5801 9.54937 15.5101 9.69937 15.3601L11.9994 13.0601L14.2994 15.3601C14.4494 15.5101 14.6394 15.5801 14.8294 15.5801C15.0194 15.5801 15.2094 15.5101 15.3594 15.3601C15.6494 15.0701 15.6494 14.5901 15.3594 14.3001L13.0594 12.0001Z" fill="#FF383C"/>
|
|
249
|
+
</svg>
|
|
250
|
+
|
|
251
|
+
{/if}
|
|
252
|
+
<h5>{condition.text}</h5>
|
|
253
|
+
</div>
|
|
254
|
+
{/each}
|
|
255
|
+
{/if}
|
|
224
256
|
{#if errorMessage}
|
|
225
257
|
<h5 class="error-message">{errorMessage}</h5>
|
|
226
258
|
{/if}
|
|
@@ -340,4 +372,17 @@
|
|
|
340
372
|
opacity: 0.6;
|
|
341
373
|
cursor: not-allowed;
|
|
342
374
|
}
|
|
375
|
+
|
|
376
|
+
.completed {
|
|
377
|
+
display: flex;
|
|
378
|
+
align-items: center;
|
|
379
|
+
column-gap: var(--pad-s);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
.completed > svg.success > path {
|
|
383
|
+
fill: var(--green);
|
|
384
|
+
}
|
|
385
|
+
.completed > svg.error > path {
|
|
386
|
+
fill: var(--red);
|
|
387
|
+
}
|
|
343
388
|
</style>
|