hamzus-ui 0.0.133 → 0.0.135

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.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/DatePicker/DatePicker.svelte +4 -1
  3. package/src/components/hamzus-ui/DateTimePicker/DateTimePicker.svelte +467 -0
  4. package/src/components/hamzus-ui/DayPicker/DayPicker.svelte +138 -0
  5. package/src/components/hamzus-ui/DropdownMenu/Root.svelte +4 -0
  6. package/src/components/hamzus-ui/Input/Input.svelte +3 -0
  7. package/src/components/hamzus-ui/MonthOfYearPicker/MonthOfYearPicker.svelte +164 -0
  8. package/src/components/hamzus-ui/MonthPicker/MonthPicker.svelte +110 -118
  9. package/src/components/hamzus-ui/Table/FilterDropdown.svelte +1 -1
  10. package/src/components/hamzus-ui/Table/Header.svelte +1 -1
  11. package/src/components/hamzus-ui/TimePicker/TimePicker.svelte +145 -0
  12. package/src/components/hamzus-ui/YearPicker/YearPicker.svelte +111 -0
  13. package/src/utils/polyfill.js +17 -2
package/src/components/hamzus-ui/MonthOfYearPicker/MonthOfYearPicker.svelte ADDED
@@ -0,0 +1,164 @@
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 variant = '';
10
+ export let onChange = undefined;
11
+ export let required = false;
12
+
13
+ let targetMonth = '';
14
+ let targetYear = '';
15
+
16
+ $: updateAfterValueHasChanged(value);
17
+
18
+ const monthList = {
19
+ 1: 'janvier',
20
+ 2: 'février',
21
+ 3: 'mars',
22
+ 4: 'avril',
23
+ 5: 'mai',
24
+ 6: 'juin',
25
+ 7: 'juillet',
26
+ 8: 'août',
27
+ 9: 'septembre',
28
+ 10: 'octobre',
29
+ 11: 'novembre',
30
+ 12: 'décembre'
31
+ };
32
+ const yearList = getYearList();
33
+
34
+ function getYearList(startYear = 1997) {
35
+ const currentYear = new Date().getFullYear();
36
+ return Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i);
37
+ }
38
+
39
+ function updateAfterValueHasChanged(value) {
40
+ if (!value) {
41
+ targetMonth = '';
42
+ targetYear = '';
43
+ }
44
+ // separer la valuer
45
+ const splittedValue = value.split('-');
46
+
47
+ targetYear = splittedValue[0];
48
+ targetMonth = parseInt(splittedValue[1]);
49
+ }
50
+
51
+ function handleSelectMonth(newValue) {
52
+ targetMonth = newValue;
53
+
54
+ checkIfComplete();
55
+ }
56
+
57
+ function handleSelectYear(newValue) {
58
+ targetYear = newValue;
59
+
60
+ checkIfComplete();
61
+ }
62
+
63
+ function checkIfComplete() {
64
+ if (!targetMonth || !targetYear) {
65
+ value = '';
66
+ return;
67
+ }
68
+
69
+ let formatedMonth = targetMonth;
70
+ if (targetMonth < 10) {
71
+ formatedMonth = `0${targetMonth}`;
72
+ }
73
+
74
+ value = `${targetYear}-${formatedMonth}`;
75
+
76
+ if (onChange !== undefined) {
77
+ onChange(value);
78
+ }
79
+ }
80
+ </script>
81
+
82
+
83
+ <div class="date-input-container {variant === "collapse" ? "collapse" : ""}">
84
+ {#if label}
85
+ <h5>
86
+ {label}
87
+ {#if required}
88
+ <span style="color:var(--red)">*</span>
89
+ {/if}
90
+ </h5>
91
+ {/if}
92
+ <div class="date-input">
93
+ <DropdownMenu.Root triggerFullWidth direction="bottom-left">
94
+ <DropdownMenu.Trigger slot="trigger">
95
+ <Button style="width:100%;" variant="outline">
96
+ <input class="date-input-value" {required} type="text" style="display: none;" {name} {value} />
97
+ <h4>{targetYear || 'aaaa'}-{monthList[targetMonth] || 'mm'}</h4>
98
+ </Button>
99
+ </DropdownMenu.Trigger>
100
+ <DropdownMenu.Content slot="content" width="var(--hamzus-tigger-width)">
101
+ <div class="content">
102
+ <ScrollArea proximity={10} style="max-height:350px;">
103
+ {#each yearList as year}
104
+ <Button
105
+ onClick={() => {
106
+ handleSelectYear(year);
107
+ }}
108
+ style="width:100%;"
109
+ variant="ghost"
110
+ ><h4 style={targetYear == year ? 'color:var(--accent);' : ''}>{year}</h4></Button
111
+ >
112
+ {/each}
113
+ </ScrollArea>
114
+ <ScrollArea proximity={10} style="max-height:350px;">
115
+ {#each Object.entries(monthList) as [inputValue, month]}
116
+ <Button
117
+ style="width:100%;"
118
+ variant="ghost"
119
+ onClick={() => {
120
+ handleSelectMonth(inputValue);
121
+ }}
122
+ ><h4 style={targetMonth == inputValue ? 'color:var(--accent);' : ''}>
123
+ {month}</h4></Button
124
+ >
125
+ {/each}
126
+ </ScrollArea>
127
+ </div>
128
+ </DropdownMenu.Content>
129
+ </DropdownMenu.Root>
130
+ </div>
131
+ </div>
132
+
133
+ <style>
134
+ .date-input-container.collapse {
135
+ display: flex;
136
+ flex-direction: column;
137
+ padding: var(--pad-s);
138
+ background-color: var(--bg-2);
139
+ border-radius: var(--radius-l);
140
+ }
141
+ .date-input-container.collapse .date-input {
142
+ padding: 0px;
143
+ }
144
+ .date-input {
145
+ display: flex;
146
+ flex-direction: column;
147
+ padding: var(--pad-s);
148
+ background-color: var(--bg-2);
149
+ border-radius: var(--radius-l);
150
+ }
151
+
152
+ .date-input:hover {
153
+ background-color: var(--bg-2);
154
+ }
155
+ .content {
156
+ display: flex;
157
+ max-height: 350px;
158
+ }
159
+
160
+ :global(button:has(.date-input-value:user-invalid)) {
161
+ border: 1px solid var(--red);
162
+ background-color: var(--red-b);
163
+ }
164
+ </style>
package/src/components/hamzus-ui/MonthPicker/MonthPicker.svelte CHANGED
@@ -1,136 +1,128 @@
1
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
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 variant = '';
10
+ export let onChange = undefined;
11
+ export let required = false;
12
+
13
+ let targetMonth = '';
14
+
15
+ const monthList = {
16
+ 1: 'janvier',
17
+ 2: 'février',
18
+ 3: 'mars',
19
+ 4: 'avril',
20
+ 5: 'mai',
21
+ 6: 'juin',
22
+ 7: 'juillet',
23
+ 8: 'août',
24
+ 9: 'septembre',
25
+ 10: 'octobre',
26
+ 11: 'novembre',
27
+ 12: 'décembre'
28
+ };
29
+
30
+
31
+
32
+ function handleSelectMonth(newValue) {
33
+ targetMonth = newValue;
34
+
35
+ checkIfComplete();
36
+ }
58
37
 
59
- checkIfComplete()
60
- }
61
38
 
62
- function checkIfComplete() {
63
- if (!targetMonth || !targetYear) {
64
- value = ""
65
- return
66
- }
39
+ function checkIfComplete() {
40
+ if (!targetMonth) {
41
+ value = '';
42
+ return;
43
+ }
67
44
 
68
- let formatedMonth = targetMonth
69
- if (targetMonth < 10) {
70
- formatedMonth = `0${targetMonth}`
71
- }
45
+ let formatedMonth = targetMonth;
46
+ if (targetMonth < 10) {
47
+ formatedMonth = `0${targetMonth}`;
48
+ }
72
49
 
73
- value = `${targetYear}-${formatedMonth}`
50
+ value = `${formatedMonth}`;
74
51
 
75
- if (onChange !== undefined) {
76
- onChange(value)
77
- }
78
- }
52
+ if (onChange !== undefined) {
53
+ onChange(value);
54
+ }
55
+ }
79
56
  </script>
80
57
 
81
58
 
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>
59
+ <div class="date-input-container {variant === "collapse" ? "collapse" : ""}">
60
+ {#if label}
61
+ <h5>
62
+ {label}
63
+ {#if required}
64
+ <span style="color:var(--red)">*</span>
65
+ {/if}
66
+ </h5>
67
+ {/if}
68
+ <div class="date-input">
69
+ <DropdownMenu.Root triggerFullWidth direction="bottom">
70
+ <DropdownMenu.Trigger slot="trigger">
71
+ <Button style="width:100%;" variant="outline">
72
+ <input class="date-input-value" {required} type="text" style="display: none;" {name} {value} />
73
+ <h4>{monthList[targetMonth] || 'mm'}</h4>
74
+ </Button>
75
+ </DropdownMenu.Trigger>
76
+ <DropdownMenu.Content slot="content" width="var(--hamzus-tigger-width)">
77
+ <div class="content">
78
+ <ScrollArea proximity={10} style="max-height:350px;">
79
+ {#each Object.entries(monthList) as [inputValue, month]}
80
+ <Button
81
+ style="width:100%;"
82
+ variant="ghost"
83
+ onClick={() => {
84
+ handleSelectMonth(inputValue);
85
+ }}
86
+ ><h4 style={targetMonth == inputValue ? 'color:var(--accent);' : ''}>
87
+ {month}</h4></Button
88
+ >
89
+ {/each}
90
+ </ScrollArea>
91
+ </div>
92
+ </DropdownMenu.Content>
93
+ </DropdownMenu.Root>
94
+ </div>
95
+ </div>
109
96
 
110
97
  <style>
111
-
98
+ .date-input-container.collapse {
99
+ display: flex;
100
+ flex-direction: column;
101
+ padding: var(--pad-s);
102
+ background-color: var(--bg-2);
103
+ border-radius: var(--radius-l);
104
+ }
105
+ .date-input-container.collapse .date-input {
106
+ padding: 0px;
107
+ }
112
108
  .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-2);
119
- background-color: var(--bg-1);
120
- outline: none;
121
- cursor: pointer;
122
- display: flex;
123
- column-gap: var(--pad-m);
109
+ display: flex;
110
+ flex-direction: column;
111
+ padding: var(--pad-s);
112
+ background-color: var(--bg-2);
113
+ border-radius: var(--radius-l);
124
114
  }
125
- .date-input:has(input:user-invalid){
126
- border: 1px solid var(--red);
127
- }
128
115
 
129
116
  .date-input:hover {
130
117
  background-color: var(--bg-2);
131
118
  }
132
- .content{
133
- display: flex;
134
- max-height: 350px;
119
+ .content {
120
+ display: flex;
121
+ max-height: 350px;
122
+ }
123
+
124
+ :global(button:has(.date-input-value:user-invalid)) {
125
+ border: 1px solid var(--red);
126
+ background-color: var(--red-b);
135
127
  }
136
- </style>
128
+ </style>
package/src/components/hamzus-ui/Table/FilterDropdown.svelte CHANGED
@@ -5,7 +5,7 @@
5
5
  import Switch from '../Switch/Switch.svelte';
6
6
  import * as Popover from '../Popover';
7
7
  import { tableData } from './table';
8
- import MonthPicker from '../MonthPicker/MonthPicker.svelte';
8
+ import MonthPicker from '../MonthOfYearPicker/MonthOfYearPicker.svelte';
9
9
  import DatePicker from '../DatePicker/DatePicker.svelte';
10
10
  import Input from '../Input/Input.svelte';
11
11
  import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
package/src/components/hamzus-ui/Table/Header.svelte CHANGED
@@ -9,7 +9,7 @@
9
9
  import Switch from '../Switch/Switch.svelte';
10
10
  import { onDestroy } from 'svelte';
11
11
  import DatePicker from '../DatePicker/DatePicker.svelte';
12
- import MonthPicker from '../MonthPicker/MonthPicker.svelte';
12
+ import MonthPicker from '../MonthOfYearPicker/MonthOfYearPicker.svelte';
13
13
  import Checkbox from '../Checkboxes/Checkbox/Checkbox.svelte';
14
14
  // props
15
15
  export let tableId = null;
package/src/components/hamzus-ui/TimePicker/TimePicker.svelte ADDED
@@ -0,0 +1,145 @@
1
+ <script>
2
+ import * as DropdownMenu from '../DropdownMenu';
3
+ import Button from '../Button/Button.svelte';
4
+ import IconButton from '../IconButton/IconButton.svelte';
5
+ import { onMount } from 'svelte';
6
+ import Input from '../Input/Input.svelte';
7
+
8
+ export let value = '';
9
+ export let onChange = undefined;
10
+ export let label = '';
11
+ export let name = '';
12
+ export let variant = 'default'; // "default" | "collapse"
13
+ export let required = false;
14
+
15
+ let inputMin;
16
+ let hour = '';
17
+ let min = '';
18
+
19
+ onMount(() => {
20
+ if (value === '') {
21
+ return;
22
+ }
23
+
24
+ const hourData = value.split(':');
25
+
26
+ hour = hourData[0];
27
+ min = hourData[1];
28
+ });
29
+
30
+ function handleUpdateValue() {
31
+ if (hour === '' || min === '' || hour.length < 2 || min.length < 2) {
32
+ return;
33
+ }
34
+
35
+ const formatNumber = (num) => num.toString().padStart(2, '0');
36
+
37
+ value = `${hour}:${min}`;
38
+
39
+ if (onChange !== undefined) {
40
+ onChange(value);
41
+ }
42
+ }
43
+ function handleUpdateHour(inputValue) {
44
+ if (inputValue.length === 1 && inputValue > 2) {
45
+ inputValue = `0${inputValue}`;
46
+ hour = inputValue;
47
+ inputMin.focus();
48
+ return;
49
+ }
50
+
51
+ if (inputValue.length > 2) {
52
+ inputValue = inputValue.slice(inputValue.length - 2, inputValue.length);
53
+ }
54
+ if (inputValue > 24) {
55
+ inputValue = 24;
56
+ }
57
+
58
+ hour = inputValue;
59
+
60
+ if (inputValue.length < 2) {
61
+ return;
62
+ }
63
+
64
+ inputMin.focus();
65
+ handleUpdateValue();
66
+ }
67
+ function handleUpdateMin(inputValue) {
68
+ if (inputValue.length === 1 && inputValue > 6) {
69
+ inputValue = `0${inputValue}`;
70
+ min = inputValue;
71
+ }
72
+
73
+ if (inputValue.length > 2) {
74
+ inputValue = inputValue.slice(inputValue.length - 2, inputValue.length);
75
+ }
76
+ if (inputValue > 60) {
77
+ inputValue = 60;
78
+ }
79
+
80
+ min = inputValue;
81
+ handleUpdateValue();
82
+ }
83
+ </script>
84
+
85
+ <div class="date-picker {variant}">
86
+ {#if label}
87
+ <h5>
88
+ {label}
89
+ {#if required}
90
+ <span style="color:var(--red)">*</span>
91
+ {/if}
92
+ </h5>
93
+ {/if}
94
+ <div class="date-container">
95
+ <input type="text" style="display: none;" class="input-value" {name} {value} {required}>
96
+ <Input
97
+ onChange={(inputValue) => {
98
+ handleUpdateHour(inputValue);
99
+ }}
100
+ bind:value={hour}
101
+ type="number"
102
+ style="width: 100%;"
103
+ placeholder="00"
104
+ >
105
+ <h4 slot="endContent">h</h4>
106
+ </Input>
107
+ <Input
108
+ bind:input={inputMin}
109
+ onChange={(inputValue) => {
110
+ handleUpdateMin(inputValue);
111
+ }}
112
+ bind:value={min}
113
+ type="number"
114
+ style="width: 100%;"
115
+ placeholder="00"
116
+ >
117
+ <h4 slot="endContent">min</h4>
118
+ </Input>
119
+ </div>
120
+ </div>
121
+
122
+ <style>
123
+ .date-picker.collapse {
124
+ display: flex;
125
+ flex-direction: column;
126
+ padding: var(--pad-s);
127
+ background-color: var(--bg-2);
128
+ border-radius: var(--radius-l);
129
+ }
130
+ .date-picker.collapse .date-container {
131
+ padding: 0;
132
+ }
133
+ .date-container {
134
+ display: flex;
135
+ width: 100%;
136
+ padding: var(--pad-s);
137
+ background-color: var(--bg-2);
138
+ border-radius: var(--radius-l);
139
+ }
140
+
141
+ .date-container:has( .input-value:user-invalid) {
142
+ border: 1px solid var(--red);
143
+ background-color: var(--red-b);
144
+ }
145
+ </style>
package/src/components/hamzus-ui/YearPicker/YearPicker.svelte ADDED
@@ -0,0 +1,111 @@
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 variant = '';
10
+ export let onChange = undefined;
11
+ export let required = false;
12
+
13
+ let targetYear = '';
14
+
15
+
16
+ const yearList = getYearList();
17
+
18
+ function getYearList(startYear = 1997) {
19
+ const currentYear = new Date().getFullYear();
20
+ return Array.from({ length: currentYear - startYear + 1 }, (_, i) => currentYear - i);
21
+ }
22
+
23
+ function handleSelectYear(newValue) {
24
+ targetYear = newValue;
25
+
26
+ checkIfComplete();
27
+ }
28
+
29
+ function checkIfComplete() {
30
+ if (!targetYear) {
31
+ value = '';
32
+ return;
33
+ }
34
+ value = `${targetYear}`;
35
+
36
+ if (onChange !== undefined) {
37
+ onChange(value);
38
+ }
39
+ }
40
+ </script>
41
+
42
+
43
+ <div class="date-input-container {variant === "collapse" ? "collapse" : ""}">
44
+ {#if label}
45
+ <h5>
46
+ {label}
47
+ {#if required}
48
+ <span style="color:var(--red)">*</span>
49
+ {/if}
50
+ </h5>
51
+ {/if}
52
+ <div class="date-input">
53
+ <DropdownMenu.Root triggerFullWidth direction="bottom-left">
54
+ <DropdownMenu.Trigger slot="trigger">
55
+ <Button style="width:100%;" variant="outline">
56
+ <input class="date-input-value" {required} type="text" style="display: none;" {name} {value} />
57
+ <h4>{targetYear || 'aaaa'}</h4>
58
+ </Button>
59
+ </DropdownMenu.Trigger>
60
+ <DropdownMenu.Content slot="content" width="var(--hamzus-tigger-width)">
61
+ <div class="content">
62
+ <ScrollArea proximity={10} style="max-height:350px;">
63
+ {#each yearList as year}
64
+ <Button
65
+ onClick={() => {
66
+ handleSelectYear(year);
67
+ }}
68
+ style="width:100%;"
69
+ variant="ghost"
70
+ ><h4 style={targetYear == year ? 'color:var(--accent);' : ''}>{year}</h4></Button
71
+ >
72
+ {/each}
73
+ </ScrollArea>
74
+ </div>
75
+ </DropdownMenu.Content>
76
+ </DropdownMenu.Root>
77
+ </div>
78
+ </div>
79
+
80
+ <style>
81
+ .date-input-container.collapse {
82
+ display: flex;
83
+ flex-direction: column;
84
+ padding: var(--pad-s);
85
+ background-color: var(--bg-2);
86
+ border-radius: var(--radius-l);
87
+ }
88
+ .date-input-container.collapse .date-input {
89
+ padding: 0px;
90
+ }
91
+ .date-input {
92
+ display: flex;
93
+ flex-direction: column;
94
+ padding: var(--pad-s);
95
+ background-color: var(--bg-2);
96
+ border-radius: var(--radius-l);
97
+ }
98
+
99
+ .date-input:hover {
100
+ background-color: var(--bg-2);
101
+ }
102
+ .content {
103
+ display: flex;
104
+ max-height: 350px;
105
+ }
106
+
107
+ :global(button:has(.date-input-value:user-invalid)) {
108
+ border: 1px solid var(--red);
109
+ background-color: var(--red-b);
110
+ }
111
+ </style>