hamzus-ui 0.0.134 → 0.0.136

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 (14) hide show
  1. package/index.d.ts +9 -1
  2. package/index.js +9 -1
  3. package/package.json +1 -1
  4. package/src/components/hamzus-ui/DatePicker/DatePicker.svelte +4 -1
  5. package/src/components/hamzus-ui/DateTimePicker/DateTimePicker.svelte +467 -0
  6. package/src/components/hamzus-ui/DayPicker/DayPicker.svelte +138 -0
  7. package/src/components/hamzus-ui/DropdownMenu/Root.svelte +4 -0
  8. package/src/components/hamzus-ui/Input/Input.svelte +3 -0
  9. package/src/components/hamzus-ui/MonthOfYearPicker/MonthOfYearPicker.svelte +164 -0
  10. package/src/components/hamzus-ui/MonthPicker/MonthPicker.svelte +110 -118
  11. package/src/components/hamzus-ui/Table/FilterDropdown.svelte +1 -1
  12. package/src/components/hamzus-ui/Table/Header.svelte +1 -1
  13. package/src/components/hamzus-ui/TimePicker/TimePicker.svelte +145 -0
  14. package/src/components/hamzus-ui/YearPicker/YearPicker.svelte +111 -0
package/src/components/hamzus-ui/DropdownMenu/Root.svelte CHANGED
@@ -133,6 +133,10 @@
133
133
  // recuperer le contenue du trigger
134
134
  const triggerContent = getFirstChild(trigger);
135
135
 
136
+ if (triggerContent === null) {
137
+ return
138
+ }
139
+
136
140
  // recuperer la position du trigger par rapport a la fenetre
137
141
  const triggerRect = triggerContent.getBoundingClientRect();
138
142
 
package/src/components/hamzus-ui/Input/Input.svelte CHANGED
@@ -12,6 +12,7 @@
12
12
  export let onChange = () => {};
13
13
  export let onFocus = () => {};
14
14
  export let onBlur = () => {};
15
+ export let input
15
16
  export let name = '';
16
17
  export let value = '';
17
18
  export let initialValue = value;
@@ -39,6 +40,7 @@
39
40
 
40
41
  // fnctions
41
42
  function formatInput(inputValue) {
43
+
42
44
  // verifier que c est un nombre
43
45
  if (type === 'number') {
44
46
  // Remplace les virgules par des points
@@ -151,6 +153,7 @@
151
153
  {required}
152
154
  disabled={isLoading ? true : disabled}
153
155
  {step}
156
+ bind:this={input}
154
157
  />
155
158
  <slot name="endContent" />
156
159
  {#if type == 'password'}
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>