hamzus-ui 0.0.30 → 0.0.32
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 +1 -1
- package/src/components/hamzus-ui/MonthPicker/MonthPicker.svelte +136 -0
- package/src/components/hamzus-ui/Skeleton/Skeleton.svelte +25 -0
- package/src/components/hamzus-ui/Table/ActionsBar.svelte +510 -26
- package/src/components/hamzus-ui/Table/Content.svelte +155 -23
- package/src/components/hamzus-ui/Table/FilterDropdown.svelte +332 -0
- package/src/components/hamzus-ui/Table/Header.svelte +232 -93
- package/src/components/hamzus-ui/Table/Root.svelte +109 -14
- package/src/components/hamzus-ui/Table/TableLoader.svelte +61 -0
- package/src/components/hamzus-ui/Table/table.js +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import ScrollArea from "../ScrollArea/ScrollArea.svelte";
|
|
3
|
+
import Button from "../Button/Button.svelte";
|
|
4
|
+
import * as DropdownMenu from "../DropdownMenu"
|
|
5
|
+
|
|
6
|
+
export let name = ""
|
|
7
|
+
export let label = ""
|
|
8
|
+
export let value = ""
|
|
9
|
+
export let onChange = undefined
|
|
10
|
+
|
|
11
|
+
let targetMonth = ""
|
|
12
|
+
let targetYear = ""
|
|
13
|
+
|
|
14
|
+
$: updateAfterValueHasChanged(value)
|
|
15
|
+
|
|
16
|
+
const monthList = {
|
|
17
|
+
1:"janvier",
|
|
18
|
+
2:"février",
|
|
19
|
+
3:"mars",
|
|
20
|
+
4:"avril",
|
|
21
|
+
5:"mai",
|
|
22
|
+
6:"juin",
|
|
23
|
+
7:"juillet",
|
|
24
|
+
8:"août",
|
|
25
|
+
9:"septembre",
|
|
26
|
+
10:"octobre",
|
|
27
|
+
11:"novembre",
|
|
28
|
+
12:"décembre",
|
|
29
|
+
}
|
|
30
|
+
const yearList = getYearList()
|
|
31
|
+
|
|
32
|
+
function getYearList(startYear = 1997) {
|
|
33
|
+
const currentYear = new Date().getFullYear();
|
|
34
|
+
return Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
function updateAfterValueHasChanged(value) {
|
|
38
|
+
if (!value) {
|
|
39
|
+
targetMonth = ""
|
|
40
|
+
targetYear = ""
|
|
41
|
+
}
|
|
42
|
+
// separer la valuer
|
|
43
|
+
const splittedValue = value.split("-")
|
|
44
|
+
|
|
45
|
+
targetYear = splittedValue[0]
|
|
46
|
+
targetMonth = parseInt(splittedValue[1])
|
|
47
|
+
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
function handleSelectMonth(newValue) {
|
|
51
|
+
targetMonth = newValue
|
|
52
|
+
|
|
53
|
+
checkIfComplete()
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
function handleSelectYear(newValue) {
|
|
57
|
+
targetYear = newValue
|
|
58
|
+
|
|
59
|
+
checkIfComplete()
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
function checkIfComplete() {
|
|
63
|
+
if (!targetMonth || !targetYear) {
|
|
64
|
+
value = ""
|
|
65
|
+
return
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
let formatedMonth = targetMonth
|
|
69
|
+
if (targetMonth < 10) {
|
|
70
|
+
formatedMonth = `0${targetMonth}`
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
value = `${targetYear}-${formatedMonth}`
|
|
74
|
+
|
|
75
|
+
if (onChange !== undefined) {
|
|
76
|
+
onChange(value)
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
</script>
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
<input type="hidden" {name} {value}>
|
|
83
|
+
|
|
84
|
+
{#if label}
|
|
85
|
+
<h5>{label}</h5>
|
|
86
|
+
{/if}
|
|
87
|
+
<div class="date-input">
|
|
88
|
+
<DropdownMenu.Root triggerFullWidth>
|
|
89
|
+
<DropdownMenu.Trigger slot="trigger">
|
|
90
|
+
<Button style="width:100%;" label="{targetYear || "aaaa"}-{monthList[targetMonth] || "mm"}" variant="ghost"></Button>
|
|
91
|
+
</DropdownMenu.Trigger>
|
|
92
|
+
<DropdownMenu.Content slot="content">
|
|
93
|
+
<div class="content">
|
|
94
|
+
<ScrollArea style="max-height:350px;">
|
|
95
|
+
{#each yearList as year}
|
|
96
|
+
<Button onClick={()=>{handleSelectYear(year)}} style="width:100%;" variant="ghost"><h4 style="{targetYear == year ? "color:var(--accent);" : ""}">{year}</h4></Button>
|
|
97
|
+
{/each}
|
|
98
|
+
</ScrollArea>
|
|
99
|
+
<ScrollArea style="max-height:350px;">
|
|
100
|
+
{#each Object.entries(monthList) as [inputValue, month]}
|
|
101
|
+
<Button style="width:100%;" variant="ghost" onClick={()=>{handleSelectMonth(inputValue)}}><h4 style="{targetMonth == inputValue ? "color:var(--accent);" : ""}">{month}</h4></Button>
|
|
102
|
+
{/each}
|
|
103
|
+
</ScrollArea>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
</DropdownMenu.Content>
|
|
107
|
+
</DropdownMenu.Root>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<style>
|
|
111
|
+
|
|
112
|
+
.date-input {
|
|
113
|
+
appearance: none; /* Enlève le style par défaut des navigateurs */
|
|
114
|
+
border: 1px solid var(--stroke);
|
|
115
|
+
border-radius: var(--radius-xl);
|
|
116
|
+
padding: var(--pad-xl);
|
|
117
|
+
font-size: 16px;
|
|
118
|
+
color: var(--font-d);
|
|
119
|
+
background-color: var(--bg-u);
|
|
120
|
+
outline: none;
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
display: flex;
|
|
123
|
+
column-gap: var(--pad-m);
|
|
124
|
+
}
|
|
125
|
+
.date-input:has(input:user-invalid){
|
|
126
|
+
border: 1px solid var(--red);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.date-input:hover {
|
|
130
|
+
background-color: var(--bg-d);
|
|
131
|
+
}
|
|
132
|
+
.content{
|
|
133
|
+
display: flex;
|
|
134
|
+
max-height: 350px;
|
|
135
|
+
}
|
|
136
|
+
</style>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<span class="skeleton" {...$$restProps}>
|
|
4
|
+
|
|
5
|
+
</span>
|
|
6
|
+
|
|
7
|
+
<style>
|
|
8
|
+
.skeleton {
|
|
9
|
+
background: linear-gradient(90deg, var(--bg-d) 25%, var(--bg-t) 50%, var(--bg-d) 75%);
|
|
10
|
+
background-size: 200% 100%;
|
|
11
|
+
animation: skeleton-loading 1.5s infinite;
|
|
12
|
+
border-radius: 4px; /* Pour arrondir les coins */
|
|
13
|
+
flex-shrink: 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Animation */
|
|
17
|
+
@keyframes skeleton-loading {
|
|
18
|
+
0% {
|
|
19
|
+
background-position: 200% 0;
|
|
20
|
+
}
|
|
21
|
+
100% {
|
|
22
|
+
background-position: -200% 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
</style>
|