hamzus-ui 0.0.56 → 0.0.58

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/Input/Input.svelte +138 -127
  3. package/src/layout/Sidebar/SideBarMenu/SideBarMenu.svelte +7 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.56",
3
+ "version": "0.0.58",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "svelte": "index.js",
package/src/components/hamzus-ui/Input/Input.svelte CHANGED
@@ -1,9 +1,9 @@
1
1
  <script>
2
- // import
2
+ // import
3
3
 
4
4
  import IconButton from '../IconButton/IconButton.svelte';
5
5
  import Loader from '../LoaderCircle/Loader.svelte';
6
- // props
6
+ // props
7
7
  export let variant = 'default';
8
8
  export let className = '';
9
9
  export let iconSize = '24px';
@@ -32,17 +32,28 @@
32
32
  export let formatPattern = [];
33
33
  import { onMount } from 'svelte';
34
34
 
35
- // local var
35
+ // local var
36
36
 
37
37
  $: value = formatInput(value);
38
38
 
39
39
  // fnctions
40
40
  function formatInput(inputValue) {
41
+ // verifier que c est un nombre
42
+ if (type === 'number') {
43
+ // Remplace les virgules par des points
44
+ inputValue = inputValue.replace(',', '.');
45
+
46
+ // Supprime tout sauf chiffres et un seul point
47
+ inputValue = inputValue.replace(/[^0-9.]/g, '');
48
+
49
+ }
50
+ console.log(inputValue);
51
+
41
52
  if (formatPattern.length == 0) {
42
53
  return inputValue;
43
54
  }
44
55
 
45
- inputValue = inputValue.replace(/\s+/g, '')
56
+ inputValue = inputValue.replace(/\s+/g, '');
46
57
 
47
58
  let formattedValue = '';
48
59
  let currentIndex = 0;
@@ -70,12 +81,11 @@
70
81
 
71
82
  onMount(() => {
72
83
  value = formatInput(value);
73
- if (formatPattern.length !== 0) {
74
- initialValue = value
75
- }
84
+ if (formatPattern.length !== 0) {
85
+ initialValue = value;
86
+ }
76
87
  });
77
88
 
78
-
79
89
  function handleDisplay() {
80
90
  isVisible = !isVisible;
81
91
  }
@@ -92,12 +102,14 @@
92
102
 
93
103
  <div
94
104
  class="input-container {variant == 'default' ? variant : ''} {className}"
95
- style={(fullWidth ? "width:100%;" : "") + style}
105
+ style={(fullWidth ? 'width:100%;' : '') + style}
96
106
  {...$$restProps}
97
107
  >
98
108
  <label
99
109
  class="input {errorMessage ? ' error' : ''}"
100
- style="{variant == 'collapse' ? `padding:${padding};` : ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
110
+ style="{variant == 'collapse'
111
+ ? `padding:${padding};`
112
+ : ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
101
113
  >
102
114
  <div class="top-line">
103
115
  {#if label}
@@ -118,18 +130,17 @@
118
130
  >
119
131
  <slot name="startContent" />
120
132
  <input
121
- on:focus={onFocus}
122
- on:blur={onBlur}
133
+ on:focus={onFocus}
134
+ on:blur={onBlur}
123
135
  on:input={handleChange}
124
136
  class="h4"
125
137
  {placeholder}
126
- type={isVisible && type == 'password' ? 'text' : type}
138
+ type={(isVisible && type == 'password') || type === "number" ? 'text' : type}
127
139
  {name}
128
- {value}
140
+ bind:value
129
141
  {required}
130
- disabled={isLoading ? true : disabled}
131
- {step}
132
-
142
+ disabled={isLoading ? true : disabled}
143
+ {step}
133
144
  />
134
145
  {#if type == 'password'}
135
146
  <IconButton size="24px" variant="ghost" onClick={handleDisplay}>
@@ -193,119 +204,119 @@
193
204
  <h5 class="error-message">{errorMessage}</h5>
194
205
  {/if}
195
206
  </div>
196
- <style>
197
207
 
198
- .input-container{
199
- display: flex;
200
- flex-direction: column;
201
- transition-property: transform opacity;
202
- transition-duration: .2s;
203
- transition-timing-function: ease-out;
204
- user-select: none;
205
- cursor: text;
206
- }
207
- .input-container :global(svg){
208
- padding: 2px;
209
- }
210
- .input-container :global(svg path){
211
- fill: var(--font-2);
212
- }
213
- .input-container input {
214
- text-align: left;
215
- }
216
- .input-container.default .input{
217
- display: flex;
218
- flex-direction: column;
219
- row-gap: 0px;
220
- }
221
- .input-container:not(.default) .input {
222
- display: flex;
223
- flex-direction: column;
224
- border-radius: var(--radius);
225
- background-color: var(--default-bg);
226
- border: 2px solid var(--default-bg);
227
- transition-property: background, border;
228
- transition-duration: .2s;
229
- transition-timing-function: ease-out;
230
- }
208
+ <style>
209
+ .input-container {
210
+ display: flex;
211
+ flex-direction: column;
212
+ transition-property: transform opacity;
213
+ transition-duration: 0.2s;
214
+ transition-timing-function: ease-out;
215
+ user-select: none;
216
+ cursor: text;
217
+ }
218
+ .input-container :global(svg) {
219
+ padding: 2px;
220
+ }
221
+ .input-container :global(svg path) {
222
+ fill: var(--font-2);
223
+ }
224
+ .input-container input {
225
+ text-align: left;
226
+ }
227
+ .input-container.default .input {
228
+ display: flex;
229
+ flex-direction: column;
230
+ row-gap: 0px;
231
+ }
232
+ .input-container:not(.default) .input {
233
+ display: flex;
234
+ flex-direction: column;
235
+ border-radius: var(--radius);
236
+ background-color: var(--default-bg);
237
+ border: 2px solid var(--default-bg);
238
+ transition-property: background, border;
239
+ transition-duration: 0.2s;
240
+ transition-timing-function: ease-out;
241
+ }
231
242
 
232
- .input-container:not(.default):has(input:user-invalid) .input {
233
- border: 2px solid var(--red);
234
- }
235
- .input-container:not(.default) .input:hover{
236
- background-color: var(--bg-3);
237
- }
238
- .input-container:not(.default) .input:has(input:focus){
239
- background-color: var(--bg-1);
240
- /* border: 2px solid var(--accent); */
241
- }
242
- .input svg path {
243
- fill: var(--font-2);
244
- }
243
+ .input-container:not(.default):has(input:user-invalid) .input {
244
+ border: 2px solid var(--red);
245
+ }
246
+ .input-container:not(.default) .input:hover {
247
+ background-color: var(--bg-3);
248
+ }
249
+ .input-container:not(.default) .input:has(input:focus) {
250
+ background-color: var(--bg-1);
251
+ /* border: 2px solid var(--accent); */
252
+ }
253
+ .input svg path {
254
+ fill: var(--font-2);
255
+ }
245
256
 
246
- .input h6{
247
- color: var(--font-2);
248
- }
249
- .input .required{
250
- color: var(--red);
251
- }
252
- .input .top-line {
253
- display: flex;
254
- align-items: center;
255
- justify-content: space-between;
256
- column-gap: var(--pad-m);
257
- }
258
- .input .top-line .input-loader{
259
- position: static;
260
- }
261
- .input-container.default .input .input-line{
262
- border-radius: var(--radius);
263
- background-color: var(--default-bg);
264
- border: 2px solid var(--default-bg);
265
- transition-property: background, border;
266
- transition-duration: .2s;
267
- transition-timing-function: ease-out;
268
- }
269
- .input-container.default .input:hover .input-line{
270
- background-color: var(--bg-3);
271
- }
272
- .input-container.default .input:has(input:focus) .input-line{
273
- background-color: var(--bg-1);
274
- /* border: 2px solid var(--accent); */
275
- }
276
- .input-container.default:has(input:user-invalid) .input-line {
277
- border: 2px solid var(--red);
278
- }
279
- .input .input-line{
280
- display: flex;
281
- align-items: center;
282
- column-gap: var(--pad-s);
283
- }
284
- .input input {
285
- color: var(--font-1);
286
- width: 100%;
287
- flex: 1;
288
- font-weight: 300;
289
- }
290
- .input input::placeholder{
291
- color: var(--font-3);
292
- }
293
- .input .input-line svg {
294
- height: var(--icon-size);
295
- width: auto;
296
- }
257
+ .input h6 {
258
+ color: var(--font-2);
259
+ }
260
+ .input .required {
261
+ color: var(--red);
262
+ }
263
+ .input .top-line {
264
+ display: flex;
265
+ align-items: center;
266
+ justify-content: space-between;
267
+ column-gap: var(--pad-m);
268
+ }
269
+ .input .top-line .input-loader {
270
+ position: static;
271
+ }
272
+ .input-container.default .input .input-line {
273
+ border-radius: var(--radius);
274
+ background-color: var(--default-bg);
275
+ border: 2px solid var(--default-bg);
276
+ transition-property: background, border;
277
+ transition-duration: 0.2s;
278
+ transition-timing-function: ease-out;
279
+ }
280
+ .input-container.default .input:hover .input-line {
281
+ background-color: var(--bg-3);
282
+ }
283
+ .input-container.default .input:has(input:focus) .input-line {
284
+ background-color: var(--bg-1);
285
+ /* border: 2px solid var(--accent); */
286
+ }
287
+ .input-container.default:has(input:user-invalid) .input-line {
288
+ border: 2px solid var(--red);
289
+ }
290
+ .input .input-line {
291
+ display: flex;
292
+ align-items: center;
293
+ column-gap: var(--pad-s);
294
+ }
295
+ .input input {
296
+ color: var(--font-1);
297
+ width: 100%;
298
+ flex: 1;
299
+ font-weight: 300;
300
+ }
301
+ .input input::placeholder {
302
+ color: var(--font-3);
303
+ }
304
+ .input .input-line svg {
305
+ height: var(--icon-size);
306
+ width: auto;
307
+ }
297
308
 
298
- .input.error{
299
- border: 2px solid var(--red) !important;
300
- border-radius: var(--radius);
301
- }
302
- .input-container .error-message {
303
- color: var(--red);
304
- margin-left: 4px;
305
- }
309
+ .input.error {
310
+ border: 2px solid var(--red) !important;
311
+ border-radius: var(--radius);
312
+ }
313
+ .input-container .error-message {
314
+ color: var(--red);
315
+ margin-left: 4px;
316
+ }
306
317
 
307
- .input-container:has(input:disabled) .input {
308
- opacity: 0.6;
309
- cursor: not-allowed;
310
- }
318
+ .input-container:has(input:disabled) .input {
319
+ opacity: 0.6;
320
+ cursor: not-allowed;
321
+ }
311
322
  </style>
package/src/layout/Sidebar/SideBarMenu/SideBarMenu.svelte CHANGED
@@ -4,13 +4,13 @@
4
4
  import { page } from '$app/stores';
5
5
 
6
6
  export let title = '';
7
- export let ref;
7
+ export let ref = "";
8
8
 
9
9
  let active = false;
10
10
  let open = false;
11
11
  $: currentPath = $page.url.pathname;
12
12
 
13
- $: if (typeof ref === 'string') {
13
+ $: if (ref && typeof ref === 'string') {
14
14
  if (currentPath.startsWith(ref)) {
15
15
  active = true;
16
16
  open = true;
@@ -19,15 +19,18 @@
19
19
  }
20
20
  } else {
21
21
  // parcourir les ref parce que c est un array et verifier si il y a un match ?
22
+ let isActive = false
22
23
  for (const route of ref) {
23
24
  if (currentPath.startsWith(route)) {
25
+ isActive = true
24
26
  active = true;
25
27
  open = true;
26
28
  break;
27
29
  }
28
30
  }
29
-
30
- active = false;
31
+ if (!isActive) {
32
+ active = false;
33
+ }
31
34
  }
32
35
 
33
36
  function handleClick() {