hamzus-ui 0.0.57 → 0.0.59

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/hamzus-ui/Input/Input.svelte +137 -127
  3. package/src/components/hamzus-ui/InputFile/InputFile.svelte +0 -1
  4. package/src/components/hamzus-ui/Toast/Toast.svelte +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hamzus-ui",
3
- "version": "0.0.57",
3
+ "version": "0.0.59",
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,27 @@
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
+
41
51
  if (formatPattern.length == 0) {
42
52
  return inputValue;
43
53
  }
44
54
 
45
- inputValue = inputValue.replace(/\s+/g, '')
55
+ inputValue = inputValue.replace(/\s+/g, '');
46
56
 
47
57
  let formattedValue = '';
48
58
  let currentIndex = 0;
@@ -70,12 +80,11 @@
70
80
 
71
81
  onMount(() => {
72
82
  value = formatInput(value);
73
- if (formatPattern.length !== 0) {
74
- initialValue = value
75
- }
83
+ if (formatPattern.length !== 0) {
84
+ initialValue = value;
85
+ }
76
86
  });
77
87
 
78
-
79
88
  function handleDisplay() {
80
89
  isVisible = !isVisible;
81
90
  }
@@ -92,12 +101,14 @@
92
101
 
93
102
  <div
94
103
  class="input-container {variant == 'default' ? variant : ''} {className}"
95
- style={(fullWidth ? "width:100%;" : "") + style}
104
+ style={(fullWidth ? 'width:100%;' : '') + style}
96
105
  {...$$restProps}
97
106
  >
98
107
  <label
99
108
  class="input {errorMessage ? ' error' : ''}"
100
- style="{variant == 'collapse' ? `padding:${padding};` : ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
109
+ style="{variant == 'collapse'
110
+ ? `padding:${padding};`
111
+ : ''}--radius:{borderRadius};--default-bg:var({defaultBg});"
101
112
  >
102
113
  <div class="top-line">
103
114
  {#if label}
@@ -118,18 +129,17 @@
118
129
  >
119
130
  <slot name="startContent" />
120
131
  <input
121
- on:focus={onFocus}
122
- on:blur={onBlur}
132
+ on:focus={onFocus}
133
+ on:blur={onBlur}
123
134
  on:input={handleChange}
124
135
  class="h4"
125
136
  {placeholder}
126
- type={isVisible && type == 'password' ? 'text' : type}
137
+ type={(isVisible && type == 'password') || type === "number" ? 'text' : type}
127
138
  {name}
128
- {value}
139
+ bind:value
129
140
  {required}
130
- disabled={isLoading ? true : disabled}
131
- {step}
132
-
141
+ disabled={isLoading ? true : disabled}
142
+ {step}
133
143
  />
134
144
  {#if type == 'password'}
135
145
  <IconButton size="24px" variant="ghost" onClick={handleDisplay}>
@@ -193,119 +203,119 @@
193
203
  <h5 class="error-message">{errorMessage}</h5>
194
204
  {/if}
195
205
  </div>
196
- <style>
197
206
 
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
- }
207
+ <style>
208
+ .input-container {
209
+ display: flex;
210
+ flex-direction: column;
211
+ transition-property: transform opacity;
212
+ transition-duration: 0.2s;
213
+ transition-timing-function: ease-out;
214
+ user-select: none;
215
+ cursor: text;
216
+ }
217
+ .input-container :global(svg) {
218
+ padding: 2px;
219
+ }
220
+ .input-container :global(svg path) {
221
+ fill: var(--font-2);
222
+ }
223
+ .input-container input {
224
+ text-align: left;
225
+ }
226
+ .input-container.default .input {
227
+ display: flex;
228
+ flex-direction: column;
229
+ row-gap: 0px;
230
+ }
231
+ .input-container:not(.default) .input {
232
+ display: flex;
233
+ flex-direction: column;
234
+ border-radius: var(--radius);
235
+ background-color: var(--default-bg);
236
+ border: 2px solid var(--default-bg);
237
+ transition-property: background, border;
238
+ transition-duration: 0.2s;
239
+ transition-timing-function: ease-out;
240
+ }
231
241
 
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
- }
242
+ .input-container:not(.default):has(input:user-invalid) .input {
243
+ border: 2px solid var(--red);
244
+ }
245
+ .input-container:not(.default) .input:hover {
246
+ background-color: var(--bg-3);
247
+ }
248
+ .input-container:not(.default) .input:has(input:focus) {
249
+ background-color: var(--bg-1);
250
+ /* border: 2px solid var(--accent); */
251
+ }
252
+ .input svg path {
253
+ fill: var(--font-2);
254
+ }
245
255
 
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
- }
256
+ .input h6 {
257
+ color: var(--font-2);
258
+ }
259
+ .input .required {
260
+ color: var(--red);
261
+ }
262
+ .input .top-line {
263
+ display: flex;
264
+ align-items: center;
265
+ justify-content: space-between;
266
+ column-gap: var(--pad-m);
267
+ }
268
+ .input .top-line .input-loader {
269
+ position: static;
270
+ }
271
+ .input-container.default .input .input-line {
272
+ border-radius: var(--radius);
273
+ background-color: var(--default-bg);
274
+ border: 2px solid var(--default-bg);
275
+ transition-property: background, border;
276
+ transition-duration: 0.2s;
277
+ transition-timing-function: ease-out;
278
+ }
279
+ .input-container.default .input:hover .input-line {
280
+ background-color: var(--bg-3);
281
+ }
282
+ .input-container.default .input:has(input:focus) .input-line {
283
+ background-color: var(--bg-1);
284
+ /* border: 2px solid var(--accent); */
285
+ }
286
+ .input-container.default:has(input:user-invalid) .input-line {
287
+ border: 2px solid var(--red);
288
+ }
289
+ .input .input-line {
290
+ display: flex;
291
+ align-items: center;
292
+ column-gap: var(--pad-s);
293
+ }
294
+ .input input {
295
+ color: var(--font-1);
296
+ width: 100%;
297
+ flex: 1;
298
+ font-weight: 300;
299
+ }
300
+ .input input::placeholder {
301
+ color: var(--font-3);
302
+ }
303
+ .input .input-line svg {
304
+ height: var(--icon-size);
305
+ width: auto;
306
+ }
297
307
 
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
- }
308
+ .input.error {
309
+ border: 2px solid var(--red) !important;
310
+ border-radius: var(--radius);
311
+ }
312
+ .input-container .error-message {
313
+ color: var(--red);
314
+ margin-left: 4px;
315
+ }
306
316
 
307
- .input-container:has(input:disabled) .input {
308
- opacity: 0.6;
309
- cursor: not-allowed;
310
- }
317
+ .input-container:has(input:disabled) .input {
318
+ opacity: 0.6;
319
+ cursor: not-allowed;
320
+ }
311
321
  </style>
package/src/components/hamzus-ui/InputFile/InputFile.svelte CHANGED
@@ -43,7 +43,6 @@
43
43
  dt.items.add(file);
44
44
  });
45
45
  inputRef.files = dt.files;
46
- console.log(inputRef.files);
47
46
  }
48
47
 
49
48
  function handleDelete(fileName) {
package/src/components/hamzus-ui/Toast/Toast.svelte CHANGED
@@ -21,7 +21,6 @@
21
21
 
22
22
  const resizeObserver = new ResizeObserver(entries => {
23
23
  for (const entry of entries) {
24
- console.log(entry);
25
24
 
26
25
  toastSize = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
27
26
  }