hamzus-ui 0.0.32 → 0.0.33
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
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
export let label = 'date';
|
|
3
|
+
export let required = false;
|
|
4
|
+
export let name = 'date';
|
|
5
|
+
export let value = '';
|
|
6
|
+
export let onChange = undefined;
|
|
7
|
+
|
|
8
|
+
function handleChange(){
|
|
9
|
+
if (onChange !== undefined) {
|
|
10
|
+
onChange(value)
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div {...$$restProps} class="date-input-container">
|
|
16
|
+
<label for="date" class="h5">
|
|
17
|
+
{label}
|
|
18
|
+
{#if required}
|
|
19
|
+
<span style="color:var(--red);">*</span>
|
|
20
|
+
{/if}
|
|
21
|
+
</label>
|
|
22
|
+
<input type="date" on:change={handleChange} bind:value {name} {required} class="date-input h4" />
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<style>
|
|
26
|
+
.date-input-container {
|
|
27
|
+
display: flex;
|
|
28
|
+
flex-direction: column;
|
|
29
|
+
gap: var(--pad-l);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.date-input {
|
|
33
|
+
appearance: none; /* Enlève le style par défaut des navigateurs */
|
|
34
|
+
border: 1px solid var(--stroke);
|
|
35
|
+
border-radius: var(--radius-xl);
|
|
36
|
+
padding: var(--pad-xl);
|
|
37
|
+
font-size: 16px;
|
|
38
|
+
color: var(--font-d);
|
|
39
|
+
background-color: var(--bg-u);
|
|
40
|
+
outline: none;
|
|
41
|
+
}
|
|
42
|
+
.date-input:has(input:user-invalid){
|
|
43
|
+
border: 1px solid var(--red);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.date-input:hover {
|
|
47
|
+
background-color: var(--bg-d);
|
|
48
|
+
}
|
|
49
|
+
</style>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
import RadioGroup from '../Radios/RadioGroup/RadioGroup.svelte';
|
|
9
9
|
import Switch from '../Switch/Switch.svelte';
|
|
10
10
|
import { onDestroy } from 'svelte';
|
|
11
|
-
import DatePicker from '../
|
|
11
|
+
import DatePicker from '../OldDatePicker/OldDatePicker.svelte';
|
|
12
12
|
import MonthPicker from '../MonthPicker/MonthPicker.svelte';
|
|
13
13
|
import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
|
|
14
14
|
// props
|