ywana-core8 0.1.76 → 0.1.77
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/dist/index.cjs +2781 -142
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1772 -72
- package/dist/index.css.map +1 -1
- package/dist/index.modern.js +2775 -143
- package/dist/index.modern.js.map +1 -1
- package/dist/index.umd.js +2781 -142
- package/dist/index.umd.js.map +1 -1
- package/package.json +1 -1
- package/src/html/index.js +3 -0
- package/src/html/tab.css +4 -3
- package/src/html/table2.example.js +1 -1
- package/src/html/table2.js +1 -1
- package/src/html/textfield2.css +3 -4
- package/src/html/textfield2.example.js +1013 -142
- package/src/html/textfield2.js +22 -9
- package/src/html/tree.css +18 -16
- package/src/html/tree.js +6 -4
|
@@ -111,12 +111,108 @@ export const TextField2Examples = () => {
|
|
|
111
111
|
</ul>
|
|
112
112
|
</div>
|
|
113
113
|
|
|
114
|
-
{/*
|
|
114
|
+
{/* Comparación de Estilos */}
|
|
115
115
|
<section style={{ marginBottom: '2rem' }}>
|
|
116
|
-
<h3
|
|
117
|
-
<div style={{
|
|
118
|
-
background: '#fff',
|
|
119
|
-
padding: '1.5rem',
|
|
116
|
+
<h3>🎨 Comparación de Estilos: Normal vs Outlined</h3>
|
|
117
|
+
<div style={{
|
|
118
|
+
background: '#fff',
|
|
119
|
+
padding: '1.5rem',
|
|
120
|
+
borderRadius: '8px',
|
|
121
|
+
border: '1px solid #ddd'
|
|
122
|
+
}}>
|
|
123
|
+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
|
|
124
|
+
<div>
|
|
125
|
+
<h4 style={{
|
|
126
|
+
background: '#e3f2fd',
|
|
127
|
+
padding: '0.5rem',
|
|
128
|
+
borderRadius: '4px',
|
|
129
|
+
textAlign: 'center',
|
|
130
|
+
margin: '0 0 1rem 0'
|
|
131
|
+
}}>
|
|
132
|
+
📝 Estilo NORMAL (default)
|
|
133
|
+
</h4>
|
|
134
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
135
|
+
<TextField2
|
|
136
|
+
id="normalBasic"
|
|
137
|
+
label="Campo Normal"
|
|
138
|
+
placeholder="Placeholder text"
|
|
139
|
+
value={formData.normalBasic || ''}
|
|
140
|
+
onChange={handleFieldChange}
|
|
141
|
+
helperText="Estilo normal con underline"
|
|
142
|
+
/>
|
|
143
|
+
|
|
144
|
+
<TextField2
|
|
145
|
+
id="normalWithValue"
|
|
146
|
+
label="Con Valor"
|
|
147
|
+
value="Texto de ejemplo"
|
|
148
|
+
onChange={handleFieldChange}
|
|
149
|
+
helperText="Campo normal con valor"
|
|
150
|
+
/>
|
|
151
|
+
|
|
152
|
+
<TextField2
|
|
153
|
+
id="normalRequired"
|
|
154
|
+
label="Campo Requerido"
|
|
155
|
+
placeholder="Campo obligatorio"
|
|
156
|
+
value={formData.normalRequired || ''}
|
|
157
|
+
required={true}
|
|
158
|
+
onChange={handleFieldChange}
|
|
159
|
+
helperText="Campo requerido estilo normal"
|
|
160
|
+
/>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div>
|
|
165
|
+
<h4 style={{
|
|
166
|
+
background: '#f3e5f5',
|
|
167
|
+
padding: '0.5rem',
|
|
168
|
+
borderRadius: '4px',
|
|
169
|
+
textAlign: 'center',
|
|
170
|
+
margin: '0 0 1rem 0'
|
|
171
|
+
}}>
|
|
172
|
+
🔲 Estilo OUTLINED
|
|
173
|
+
</h4>
|
|
174
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
175
|
+
<TextField2
|
|
176
|
+
id="outlinedBasic"
|
|
177
|
+
label="Campo Outlined"
|
|
178
|
+
placeholder="Placeholder text"
|
|
179
|
+
value={formData.outlinedBasic || ''}
|
|
180
|
+
outlined={true}
|
|
181
|
+
onChange={handleFieldChange}
|
|
182
|
+
helperText="Estilo outlined con borde"
|
|
183
|
+
/>
|
|
184
|
+
|
|
185
|
+
<TextField2
|
|
186
|
+
id="outlinedWithValue"
|
|
187
|
+
label="Con Valor"
|
|
188
|
+
value="Texto de ejemplo"
|
|
189
|
+
outlined={true}
|
|
190
|
+
onChange={handleFieldChange}
|
|
191
|
+
helperText="Campo outlined con valor"
|
|
192
|
+
/>
|
|
193
|
+
|
|
194
|
+
<TextField2
|
|
195
|
+
id="outlinedRequired"
|
|
196
|
+
label="Campo Requerido"
|
|
197
|
+
placeholder="Campo obligatorio"
|
|
198
|
+
value={formData.outlinedRequired || ''}
|
|
199
|
+
required={true}
|
|
200
|
+
outlined={true}
|
|
201
|
+
onChange={handleFieldChange}
|
|
202
|
+
helperText="Campo requerido estilo outlined"
|
|
203
|
+
/>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
</section>
|
|
209
|
+
|
|
210
|
+
{/* Tipos de Input - Normal */}
|
|
211
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
212
|
+
<h3>📝 Tipos de Input - Estilo NORMAL</h3>
|
|
213
|
+
<div style={{
|
|
214
|
+
background: '#fff',
|
|
215
|
+
padding: '1.5rem',
|
|
120
216
|
borderRadius: '8px',
|
|
121
217
|
border: '1px solid #ddd',
|
|
122
218
|
display: 'grid',
|
|
@@ -124,80 +220,220 @@ export const TextField2Examples = () => {
|
|
|
124
220
|
gap: '1rem'
|
|
125
221
|
}}>
|
|
126
222
|
<TextField2
|
|
127
|
-
id="
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
223
|
+
id="textNormal"
|
|
224
|
+
type="text"
|
|
225
|
+
label="Texto"
|
|
226
|
+
placeholder="Ingresa texto"
|
|
227
|
+
value={formData.textNormal || ''}
|
|
132
228
|
onChange={handleFieldChange}
|
|
133
|
-
helperText="
|
|
229
|
+
helperText="Tipo: text (normal)"
|
|
134
230
|
/>
|
|
135
|
-
|
|
231
|
+
|
|
232
|
+
<TextField2
|
|
233
|
+
id="emailNormal"
|
|
234
|
+
type="email"
|
|
235
|
+
label="Email"
|
|
236
|
+
placeholder="usuario@ejemplo.com"
|
|
237
|
+
value={formData.emailNormal || ''}
|
|
238
|
+
validation={validateEmail}
|
|
239
|
+
onChange={handleFieldChange}
|
|
240
|
+
onValidation={handleValidation}
|
|
241
|
+
helperText="Tipo: email (normal)"
|
|
242
|
+
/>
|
|
243
|
+
|
|
244
|
+
<TextField2
|
|
245
|
+
id="passwordNormal"
|
|
246
|
+
type="password"
|
|
247
|
+
label="Contraseña"
|
|
248
|
+
placeholder="Contraseña segura"
|
|
249
|
+
value={formData.passwordNormal || ''}
|
|
250
|
+
onChange={handleFieldChange}
|
|
251
|
+
helperText="Tipo: password (normal)"
|
|
252
|
+
/>
|
|
253
|
+
|
|
254
|
+
<TextField2
|
|
255
|
+
id="telNormal"
|
|
256
|
+
type="tel"
|
|
257
|
+
label="Teléfono"
|
|
258
|
+
placeholder="+34 123 456 789"
|
|
259
|
+
value={formData.telNormal || ''}
|
|
260
|
+
onChange={handleFieldChange}
|
|
261
|
+
helperText="Tipo: tel (normal)"
|
|
262
|
+
/>
|
|
263
|
+
|
|
264
|
+
<TextField2
|
|
265
|
+
id="urlNormal"
|
|
266
|
+
type="url"
|
|
267
|
+
label="Sitio Web"
|
|
268
|
+
placeholder="https://ejemplo.com"
|
|
269
|
+
value={formData.urlNormal || ''}
|
|
270
|
+
onChange={handleFieldChange}
|
|
271
|
+
helperText="Tipo: url (normal)"
|
|
272
|
+
/>
|
|
273
|
+
|
|
274
|
+
<TextField2
|
|
275
|
+
id="numberNormal"
|
|
276
|
+
type="number"
|
|
277
|
+
label="Número"
|
|
278
|
+
placeholder="123"
|
|
279
|
+
value={formData.numberNormal || ''}
|
|
280
|
+
min="0"
|
|
281
|
+
max="999"
|
|
282
|
+
onChange={handleFieldChange}
|
|
283
|
+
helperText="Tipo: number (normal)"
|
|
284
|
+
/>
|
|
285
|
+
|
|
286
|
+
<TextField2
|
|
287
|
+
id="dateNormal"
|
|
288
|
+
type="date"
|
|
289
|
+
label="Fecha"
|
|
290
|
+
value={formData.dateNormal || ''}
|
|
291
|
+
onChange={handleFieldChange}
|
|
292
|
+
helperText="Tipo: date (normal)"
|
|
293
|
+
/>
|
|
294
|
+
|
|
295
|
+
<TextField2
|
|
296
|
+
id="timeNormal"
|
|
297
|
+
type="time"
|
|
298
|
+
label="Hora"
|
|
299
|
+
value={formData.timeNormal || ''}
|
|
300
|
+
onChange={handleFieldChange}
|
|
301
|
+
helperText="Tipo: time (normal)"
|
|
302
|
+
/>
|
|
303
|
+
|
|
136
304
|
<TextField2
|
|
137
|
-
id="
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
305
|
+
id="searchNormal"
|
|
306
|
+
type="search"
|
|
307
|
+
label="Búsqueda"
|
|
308
|
+
placeholder="Buscar..."
|
|
309
|
+
value={formData.searchNormal || ''}
|
|
310
|
+
onChange={handleFieldChange}
|
|
311
|
+
helperText="Tipo: search (normal)"
|
|
312
|
+
/>
|
|
313
|
+
</div>
|
|
314
|
+
</section>
|
|
315
|
+
|
|
316
|
+
{/* Tipos de Input - Outlined */}
|
|
317
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
318
|
+
<h3>🔲 Tipos de Input - Estilo OUTLINED</h3>
|
|
319
|
+
<div style={{
|
|
320
|
+
background: '#fff',
|
|
321
|
+
padding: '1.5rem',
|
|
322
|
+
borderRadius: '8px',
|
|
323
|
+
border: '1px solid #ddd',
|
|
324
|
+
display: 'grid',
|
|
325
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
326
|
+
gap: '1rem'
|
|
327
|
+
}}>
|
|
328
|
+
<TextField2
|
|
329
|
+
id="textOutlined"
|
|
330
|
+
type="text"
|
|
331
|
+
label="Texto"
|
|
332
|
+
placeholder="Ingresa texto"
|
|
333
|
+
value={formData.textOutlined || ''}
|
|
141
334
|
outlined={true}
|
|
142
335
|
onChange={handleFieldChange}
|
|
336
|
+
helperText="Tipo: text (outlined)"
|
|
143
337
|
/>
|
|
144
|
-
|
|
338
|
+
|
|
145
339
|
<TextField2
|
|
146
|
-
id="
|
|
340
|
+
id="emailOutlined"
|
|
147
341
|
type="email"
|
|
148
|
-
label="Email
|
|
149
|
-
placeholder="
|
|
150
|
-
value={formData.
|
|
151
|
-
required={true}
|
|
342
|
+
label="Email"
|
|
343
|
+
placeholder="usuario@ejemplo.com"
|
|
344
|
+
value={formData.emailOutlined || ''}
|
|
152
345
|
outlined={true}
|
|
153
346
|
validation={validateEmail}
|
|
154
347
|
onChange={handleFieldChange}
|
|
155
348
|
onValidation={handleValidation}
|
|
156
|
-
|
|
349
|
+
helperText="Tipo: email (outlined)"
|
|
157
350
|
/>
|
|
158
|
-
|
|
351
|
+
|
|
159
352
|
<TextField2
|
|
160
|
-
id="
|
|
353
|
+
id="passwordOutlined"
|
|
354
|
+
type="password"
|
|
355
|
+
label="Contraseña"
|
|
356
|
+
placeholder="Contraseña segura"
|
|
357
|
+
value={formData.passwordOutlined || ''}
|
|
358
|
+
outlined={true}
|
|
359
|
+
onChange={handleFieldChange}
|
|
360
|
+
helperText="Tipo: password (outlined)"
|
|
361
|
+
/>
|
|
362
|
+
|
|
363
|
+
<TextField2
|
|
364
|
+
id="telOutlined"
|
|
161
365
|
type="tel"
|
|
162
|
-
label="
|
|
163
|
-
placeholder="+
|
|
164
|
-
value={formData.
|
|
165
|
-
|
|
366
|
+
label="Teléfono"
|
|
367
|
+
placeholder="+34 123 456 789"
|
|
368
|
+
value={formData.telOutlined || ''}
|
|
369
|
+
outlined={true}
|
|
166
370
|
onChange={handleFieldChange}
|
|
167
|
-
|
|
168
|
-
autoComplete="tel"
|
|
371
|
+
helperText="Tipo: tel (outlined)"
|
|
169
372
|
/>
|
|
170
|
-
|
|
373
|
+
|
|
171
374
|
<TextField2
|
|
172
|
-
id="
|
|
375
|
+
id="urlOutlined"
|
|
173
376
|
type="url"
|
|
174
|
-
label="
|
|
175
|
-
placeholder="https://
|
|
176
|
-
value={formData.
|
|
377
|
+
label="Sitio Web"
|
|
378
|
+
placeholder="https://ejemplo.com"
|
|
379
|
+
value={formData.urlOutlined || ''}
|
|
177
380
|
outlined={true}
|
|
178
381
|
onChange={handleFieldChange}
|
|
179
|
-
|
|
382
|
+
helperText="Tipo: url (outlined)"
|
|
180
383
|
/>
|
|
181
|
-
|
|
384
|
+
|
|
182
385
|
<TextField2
|
|
183
|
-
id="
|
|
386
|
+
id="numberOutlined"
|
|
184
387
|
type="number"
|
|
185
|
-
label="
|
|
186
|
-
placeholder="
|
|
187
|
-
value={formData.
|
|
188
|
-
|
|
189
|
-
|
|
388
|
+
label="Número"
|
|
389
|
+
placeholder="123"
|
|
390
|
+
value={formData.numberOutlined || ''}
|
|
391
|
+
outlined={true}
|
|
392
|
+
min="0"
|
|
393
|
+
max="999"
|
|
394
|
+
onChange={handleFieldChange}
|
|
395
|
+
helperText="Tipo: number (outlined)"
|
|
396
|
+
/>
|
|
397
|
+
|
|
398
|
+
<TextField2
|
|
399
|
+
id="dateOutlined"
|
|
400
|
+
type="date"
|
|
401
|
+
label="Fecha"
|
|
402
|
+
value={formData.dateOutlined || ''}
|
|
403
|
+
outlined={true}
|
|
404
|
+
onChange={handleFieldChange}
|
|
405
|
+
helperText="Tipo: date (outlined)"
|
|
406
|
+
/>
|
|
407
|
+
|
|
408
|
+
<TextField2
|
|
409
|
+
id="timeOutlined"
|
|
410
|
+
type="time"
|
|
411
|
+
label="Hora"
|
|
412
|
+
value={formData.timeOutlined || ''}
|
|
413
|
+
outlined={true}
|
|
190
414
|
onChange={handleFieldChange}
|
|
415
|
+
helperText="Tipo: time (outlined)"
|
|
416
|
+
/>
|
|
417
|
+
|
|
418
|
+
<TextField2
|
|
419
|
+
id="searchOutlined"
|
|
420
|
+
type="search"
|
|
421
|
+
label="Búsqueda"
|
|
422
|
+
placeholder="Buscar..."
|
|
423
|
+
value={formData.searchOutlined || ''}
|
|
424
|
+
outlined={true}
|
|
425
|
+
onChange={handleFieldChange}
|
|
426
|
+
helperText="Tipo: search (outlined)"
|
|
191
427
|
/>
|
|
192
428
|
</div>
|
|
193
429
|
</section>
|
|
194
430
|
|
|
195
|
-
{/* PasswordField2 */}
|
|
431
|
+
{/* PasswordField2 - Normal */}
|
|
196
432
|
<section style={{ marginBottom: '2rem' }}>
|
|
197
|
-
<h3
|
|
198
|
-
<div style={{
|
|
199
|
-
background: '#fff',
|
|
200
|
-
padding: '1.5rem',
|
|
433
|
+
<h3>🔐 PasswordField2 - Estilo NORMAL</h3>
|
|
434
|
+
<div style={{
|
|
435
|
+
background: '#fff',
|
|
436
|
+
padding: '1.5rem',
|
|
201
437
|
borderRadius: '8px',
|
|
202
438
|
border: '1px solid #ddd',
|
|
203
439
|
display: 'grid',
|
|
@@ -205,74 +441,273 @@ export const TextField2Examples = () => {
|
|
|
205
441
|
gap: '1rem'
|
|
206
442
|
}}>
|
|
207
443
|
<PasswordField2
|
|
208
|
-
id="
|
|
209
|
-
label="
|
|
210
|
-
placeholder="
|
|
211
|
-
value={formData.
|
|
444
|
+
id="passwordNormal"
|
|
445
|
+
label="Contraseña"
|
|
446
|
+
placeholder="Contraseña segura"
|
|
447
|
+
value={formData.passwordNormal || ''}
|
|
448
|
+
required={true}
|
|
449
|
+
validation={validatePassword}
|
|
450
|
+
onChange={handleFieldChange}
|
|
451
|
+
onValidation={handleValidation}
|
|
452
|
+
helperText="Estilo normal - 8+ chars, mayús, minús, número"
|
|
453
|
+
autoComplete="new-password"
|
|
454
|
+
/>
|
|
455
|
+
|
|
456
|
+
<PasswordField2
|
|
457
|
+
id="confirmPasswordNormal"
|
|
458
|
+
label="Confirmar Contraseña"
|
|
459
|
+
placeholder="Confirma tu contraseña"
|
|
460
|
+
value={formData.confirmPasswordNormal || ''}
|
|
461
|
+
required={true}
|
|
462
|
+
validation={(value) => value === formData.passwordNormal}
|
|
463
|
+
error={formData.confirmPasswordNormal && formData.confirmPasswordNormal !== formData.passwordNormal ? 'Las contraseñas no coinciden' : ''}
|
|
464
|
+
onChange={handleFieldChange}
|
|
465
|
+
helperText="Estilo normal - Debe coincidir"
|
|
466
|
+
autoComplete="new-password"
|
|
467
|
+
/>
|
|
468
|
+
|
|
469
|
+
<PasswordField2
|
|
470
|
+
id="currentPasswordNormal"
|
|
471
|
+
label="Contraseña Actual"
|
|
472
|
+
placeholder="Tu contraseña actual"
|
|
473
|
+
value={formData.currentPasswordNormal || ''}
|
|
474
|
+
onChange={handleFieldChange}
|
|
475
|
+
helperText="Estilo normal - Contraseña existente"
|
|
476
|
+
autoComplete="current-password"
|
|
477
|
+
/>
|
|
478
|
+
</div>
|
|
479
|
+
</section>
|
|
480
|
+
|
|
481
|
+
{/* PasswordField2 - Outlined */}
|
|
482
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
483
|
+
<h3>🔐 PasswordField2 - Estilo OUTLINED</h3>
|
|
484
|
+
<div style={{
|
|
485
|
+
background: '#fff',
|
|
486
|
+
padding: '1.5rem',
|
|
487
|
+
borderRadius: '8px',
|
|
488
|
+
border: '1px solid #ddd',
|
|
489
|
+
display: 'grid',
|
|
490
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
491
|
+
gap: '1rem'
|
|
492
|
+
}}>
|
|
493
|
+
<PasswordField2
|
|
494
|
+
id="passwordOutlined"
|
|
495
|
+
label="Contraseña"
|
|
496
|
+
placeholder="Contraseña segura"
|
|
497
|
+
value={formData.passwordOutlined || ''}
|
|
212
498
|
required={true}
|
|
213
499
|
outlined={true}
|
|
214
500
|
validation={validatePassword}
|
|
215
501
|
onChange={handleFieldChange}
|
|
216
502
|
onValidation={handleValidation}
|
|
217
|
-
helperText="
|
|
503
|
+
helperText="Estilo outlined - 8+ chars, mayús, minús, número"
|
|
218
504
|
autoComplete="new-password"
|
|
219
505
|
/>
|
|
220
|
-
|
|
506
|
+
|
|
221
507
|
<PasswordField2
|
|
222
|
-
id="
|
|
223
|
-
label="
|
|
224
|
-
placeholder="
|
|
225
|
-
value={formData.
|
|
508
|
+
id="confirmPasswordOutlined"
|
|
509
|
+
label="Confirmar Contraseña"
|
|
510
|
+
placeholder="Confirma tu contraseña"
|
|
511
|
+
value={formData.confirmPasswordOutlined || ''}
|
|
226
512
|
required={true}
|
|
227
513
|
outlined={true}
|
|
228
|
-
validation={(value) => value === formData.
|
|
229
|
-
error={formData.
|
|
514
|
+
validation={(value) => value === formData.passwordOutlined}
|
|
515
|
+
error={formData.confirmPasswordOutlined && formData.confirmPasswordOutlined !== formData.passwordOutlined ? 'Las contraseñas no coinciden' : ''}
|
|
230
516
|
onChange={handleFieldChange}
|
|
517
|
+
helperText="Estilo outlined - Debe coincidir"
|
|
231
518
|
autoComplete="new-password"
|
|
232
519
|
/>
|
|
520
|
+
|
|
521
|
+
<PasswordField2
|
|
522
|
+
id="currentPasswordOutlined"
|
|
523
|
+
label="Contraseña Actual"
|
|
524
|
+
placeholder="Tu contraseña actual"
|
|
525
|
+
value={formData.currentPasswordOutlined || ''}
|
|
526
|
+
outlined={true}
|
|
527
|
+
onChange={handleFieldChange}
|
|
528
|
+
helperText="Estilo outlined - Contraseña existente"
|
|
529
|
+
autoComplete="current-password"
|
|
530
|
+
/>
|
|
233
531
|
</div>
|
|
234
532
|
</section>
|
|
235
533
|
|
|
236
|
-
{/* TextArea2 */}
|
|
534
|
+
{/* TextArea2 - Normal */}
|
|
237
535
|
<section style={{ marginBottom: '2rem' }}>
|
|
238
|
-
<h3
|
|
239
|
-
<div style={{
|
|
240
|
-
background: '#fff',
|
|
241
|
-
padding: '1.5rem',
|
|
536
|
+
<h3>📝 TextArea2 - Estilo NORMAL</h3>
|
|
537
|
+
<div style={{
|
|
538
|
+
background: '#fff',
|
|
539
|
+
padding: '1.5rem',
|
|
242
540
|
borderRadius: '8px',
|
|
243
541
|
border: '1px solid #ddd'
|
|
244
542
|
}}>
|
|
245
543
|
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
246
544
|
<TextArea2
|
|
247
|
-
id="
|
|
248
|
-
label="
|
|
249
|
-
placeholder="
|
|
250
|
-
value={formData.
|
|
545
|
+
id="bioNormal"
|
|
546
|
+
label="Biografía"
|
|
547
|
+
placeholder="Cuéntanos sobre ti..."
|
|
548
|
+
value={formData.bioNormal || ''}
|
|
549
|
+
rows={4}
|
|
550
|
+
maxLength={500}
|
|
551
|
+
onChange={handleFieldChange}
|
|
552
|
+
helperText={`Estilo normal - ${(formData.bioNormal || '').length}/500 caracteres`}
|
|
553
|
+
/>
|
|
554
|
+
|
|
555
|
+
<TextArea2
|
|
556
|
+
id="commentsNormal"
|
|
557
|
+
label="Comentarios Adicionales"
|
|
558
|
+
placeholder="Información adicional..."
|
|
559
|
+
value={formData.commentsNormal || ''}
|
|
560
|
+
rows={3}
|
|
561
|
+
onChange={handleFieldChange}
|
|
562
|
+
helperText="Estilo normal - Campo opcional"
|
|
563
|
+
/>
|
|
564
|
+
|
|
565
|
+
<TextArea2
|
|
566
|
+
id="descriptionNormal"
|
|
567
|
+
label="Descripción del Proyecto"
|
|
568
|
+
placeholder="Describe tu proyecto en detalle..."
|
|
569
|
+
value={formData.descriptionNormal || ''}
|
|
570
|
+
rows={5}
|
|
571
|
+
required={true}
|
|
572
|
+
onChange={handleFieldChange}
|
|
573
|
+
helperText="Estilo normal - Campo requerido"
|
|
574
|
+
/>
|
|
575
|
+
</div>
|
|
576
|
+
</div>
|
|
577
|
+
</section>
|
|
578
|
+
|
|
579
|
+
{/* TextArea2 - Outlined */}
|
|
580
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
581
|
+
<h3>📝 TextArea2 - Estilo OUTLINED</h3>
|
|
582
|
+
<div style={{
|
|
583
|
+
background: '#fff',
|
|
584
|
+
padding: '1.5rem',
|
|
585
|
+
borderRadius: '8px',
|
|
586
|
+
border: '1px solid #ddd'
|
|
587
|
+
}}>
|
|
588
|
+
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
589
|
+
<TextArea2
|
|
590
|
+
id="bioOutlined"
|
|
591
|
+
label="Biografía"
|
|
592
|
+
placeholder="Cuéntanos sobre ti..."
|
|
593
|
+
value={formData.bioOutlined || ''}
|
|
251
594
|
rows={4}
|
|
252
595
|
maxLength={500}
|
|
253
596
|
outlined={true}
|
|
254
597
|
onChange={handleFieldChange}
|
|
255
|
-
helperText={
|
|
598
|
+
helperText={`Estilo outlined - ${(formData.bioOutlined || '').length}/500 caracteres`}
|
|
256
599
|
/>
|
|
257
|
-
|
|
600
|
+
|
|
258
601
|
<TextArea2
|
|
259
|
-
id="
|
|
260
|
-
label="
|
|
261
|
-
placeholder="
|
|
262
|
-
value={formData.
|
|
602
|
+
id="commentsOutlined"
|
|
603
|
+
label="Comentarios Adicionales"
|
|
604
|
+
placeholder="Información adicional..."
|
|
605
|
+
value={formData.commentsOutlined || ''}
|
|
263
606
|
rows={3}
|
|
607
|
+
outlined={true}
|
|
608
|
+
onChange={handleFieldChange}
|
|
609
|
+
helperText="Estilo outlined - Campo opcional"
|
|
610
|
+
/>
|
|
611
|
+
|
|
612
|
+
<TextArea2
|
|
613
|
+
id="descriptionOutlined"
|
|
614
|
+
label="Descripción del Proyecto"
|
|
615
|
+
placeholder="Describe tu proyecto en detalle..."
|
|
616
|
+
value={formData.descriptionOutlined || ''}
|
|
617
|
+
rows={5}
|
|
618
|
+
required={true}
|
|
619
|
+
outlined={true}
|
|
620
|
+
onChange={handleFieldChange}
|
|
621
|
+
helperText="Estilo outlined - Campo requerido"
|
|
622
|
+
/>
|
|
623
|
+
|
|
624
|
+
<TextArea2
|
|
625
|
+
id="feedbackOutlined"
|
|
626
|
+
label="Feedback"
|
|
627
|
+
placeholder="Comparte tu opinión..."
|
|
628
|
+
value={formData.feedbackOutlined || ''}
|
|
629
|
+
rows={6}
|
|
630
|
+
outlined={true}
|
|
631
|
+
maxLength={1000}
|
|
264
632
|
onChange={handleFieldChange}
|
|
633
|
+
helperText={`Estilo outlined - ${(formData.feedbackOutlined || '').length}/1000 caracteres`}
|
|
265
634
|
/>
|
|
266
635
|
</div>
|
|
267
636
|
</div>
|
|
268
637
|
</section>
|
|
269
638
|
|
|
270
|
-
{/* DropDown2 */}
|
|
639
|
+
{/* DropDown2 - Normal */}
|
|
271
640
|
<section style={{ marginBottom: '2rem' }}>
|
|
272
|
-
<h3
|
|
273
|
-
<div style={{
|
|
274
|
-
background: '#fff',
|
|
275
|
-
padding: '1.5rem',
|
|
641
|
+
<h3>📋 DropDown2 - Estilo NORMAL</h3>
|
|
642
|
+
<div style={{
|
|
643
|
+
background: '#fff',
|
|
644
|
+
padding: '1.5rem',
|
|
645
|
+
borderRadius: '8px',
|
|
646
|
+
border: '1px solid #ddd',
|
|
647
|
+
display: 'grid',
|
|
648
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
649
|
+
gap: '1rem'
|
|
650
|
+
}}>
|
|
651
|
+
<DropDown2
|
|
652
|
+
id="countryNormal"
|
|
653
|
+
label="País"
|
|
654
|
+
placeholder="Selecciona tu país"
|
|
655
|
+
options={countryOptions}
|
|
656
|
+
value={formData.countryNormal || ''}
|
|
657
|
+
searchable={true}
|
|
658
|
+
clearable={true}
|
|
659
|
+
onChange={handleFieldChange}
|
|
660
|
+
helperText="Estilo normal - Búsqueda habilitada"
|
|
661
|
+
/>
|
|
662
|
+
|
|
663
|
+
<DropDown2
|
|
664
|
+
id="skillsNormal"
|
|
665
|
+
label="Habilidades"
|
|
666
|
+
placeholder="Selecciona tus habilidades"
|
|
667
|
+
options={skillOptions}
|
|
668
|
+
value={formData.skillsNormal || []}
|
|
669
|
+
multiple={true}
|
|
670
|
+
searchable={true}
|
|
671
|
+
clearable={true}
|
|
672
|
+
groupBy="category"
|
|
673
|
+
onChange={handleFieldChange}
|
|
674
|
+
helperText="Estilo normal - Selección múltiple con agrupación"
|
|
675
|
+
/>
|
|
676
|
+
|
|
677
|
+
<DropDown2
|
|
678
|
+
id="priorityNormal"
|
|
679
|
+
label="Nivel de Prioridad"
|
|
680
|
+
placeholder="Selecciona prioridad"
|
|
681
|
+
options={priorityOptions}
|
|
682
|
+
value={formData.priorityNormal || ''}
|
|
683
|
+
onChange={handleFieldChange}
|
|
684
|
+
helperText="Estilo normal - Opciones con iconos"
|
|
685
|
+
/>
|
|
686
|
+
|
|
687
|
+
<DropDown2
|
|
688
|
+
id="statusNormal"
|
|
689
|
+
label="Estado"
|
|
690
|
+
placeholder="Selecciona estado"
|
|
691
|
+
options={[
|
|
692
|
+
{ value: 'active', label: 'Activo' },
|
|
693
|
+
{ value: 'inactive', label: 'Inactivo' },
|
|
694
|
+
{ value: 'pending', label: 'Pendiente' },
|
|
695
|
+
{ value: 'suspended', label: 'Suspendido' }
|
|
696
|
+
]}
|
|
697
|
+
value={formData.statusNormal || ''}
|
|
698
|
+
required={true}
|
|
699
|
+
onChange={handleFieldChange}
|
|
700
|
+
helperText="Estilo normal - Campo requerido"
|
|
701
|
+
/>
|
|
702
|
+
</div>
|
|
703
|
+
</section>
|
|
704
|
+
|
|
705
|
+
{/* DropDown2 - Outlined */}
|
|
706
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
707
|
+
<h3>📋 DropDown2 - Estilo OUTLINED</h3>
|
|
708
|
+
<div style={{
|
|
709
|
+
background: '#fff',
|
|
710
|
+
padding: '1.5rem',
|
|
276
711
|
borderRadius: '8px',
|
|
277
712
|
border: '1px solid #ddd',
|
|
278
713
|
display: 'grid',
|
|
@@ -280,56 +715,89 @@ export const TextField2Examples = () => {
|
|
|
280
715
|
gap: '1rem'
|
|
281
716
|
}}>
|
|
282
717
|
<DropDown2
|
|
283
|
-
id="
|
|
284
|
-
label="
|
|
285
|
-
placeholder="
|
|
718
|
+
id="countryOutlined"
|
|
719
|
+
label="País"
|
|
720
|
+
placeholder="Selecciona tu país"
|
|
286
721
|
options={countryOptions}
|
|
287
|
-
value={formData.
|
|
722
|
+
value={formData.countryOutlined || ''}
|
|
288
723
|
outlined={true}
|
|
289
724
|
searchable={true}
|
|
290
725
|
clearable={true}
|
|
291
726
|
onChange={handleFieldChange}
|
|
292
|
-
helperText="
|
|
727
|
+
helperText="Estilo outlined - Búsqueda habilitada"
|
|
293
728
|
/>
|
|
294
|
-
|
|
729
|
+
|
|
295
730
|
<DropDown2
|
|
296
|
-
id="
|
|
297
|
-
label="
|
|
298
|
-
placeholder="
|
|
731
|
+
id="skillsOutlined"
|
|
732
|
+
label="Habilidades"
|
|
733
|
+
placeholder="Selecciona tus habilidades"
|
|
299
734
|
options={skillOptions}
|
|
300
|
-
value={formData.
|
|
735
|
+
value={formData.skillsOutlined || []}
|
|
301
736
|
multiple={true}
|
|
302
737
|
outlined={true}
|
|
303
738
|
searchable={true}
|
|
304
739
|
clearable={true}
|
|
305
740
|
groupBy="category"
|
|
306
741
|
onChange={handleFieldChange}
|
|
307
|
-
helperText="
|
|
742
|
+
helperText="Estilo outlined - Selección múltiple con agrupación"
|
|
308
743
|
/>
|
|
309
|
-
|
|
744
|
+
|
|
310
745
|
<DropDown2
|
|
311
|
-
id="
|
|
312
|
-
label="
|
|
313
|
-
placeholder="
|
|
746
|
+
id="priorityOutlined"
|
|
747
|
+
label="Nivel de Prioridad"
|
|
748
|
+
placeholder="Selecciona prioridad"
|
|
314
749
|
options={priorityOptions}
|
|
315
|
-
value={formData.
|
|
750
|
+
value={formData.priorityOutlined || ''}
|
|
316
751
|
outlined={true}
|
|
317
752
|
onChange={handleFieldChange}
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
753
|
+
helperText="Estilo outlined - Opciones con iconos"
|
|
754
|
+
/>
|
|
755
|
+
|
|
756
|
+
<DropDown2
|
|
757
|
+
id="statusOutlined"
|
|
758
|
+
label="Estado"
|
|
759
|
+
placeholder="Selecciona estado"
|
|
760
|
+
options={[
|
|
761
|
+
{ value: 'active', label: 'Activo' },
|
|
762
|
+
{ value: 'inactive', label: 'Inactivo' },
|
|
763
|
+
{ value: 'pending', label: 'Pendiente' },
|
|
764
|
+
{ value: 'suspended', label: 'Suspendido' }
|
|
765
|
+
]}
|
|
766
|
+
value={formData.statusOutlined || ''}
|
|
767
|
+
required={true}
|
|
768
|
+
outlined={true}
|
|
769
|
+
onChange={handleFieldChange}
|
|
770
|
+
helperText="Estilo outlined - Campo requerido"
|
|
771
|
+
/>
|
|
772
|
+
|
|
773
|
+
<DropDown2
|
|
774
|
+
id="categoryOutlined"
|
|
775
|
+
label="Categoría"
|
|
776
|
+
placeholder="Selecciona categoría"
|
|
777
|
+
options={[
|
|
778
|
+
{ value: 'tech', label: 'Tecnología', category: 'Trabajo' },
|
|
779
|
+
{ value: 'design', label: 'Diseño', category: 'Trabajo' },
|
|
780
|
+
{ value: 'marketing', label: 'Marketing', category: 'Trabajo' },
|
|
781
|
+
{ value: 'sports', label: 'Deportes', category: 'Personal' },
|
|
782
|
+
{ value: 'music', label: 'Música', category: 'Personal' },
|
|
783
|
+
{ value: 'travel', label: 'Viajes', category: 'Personal' }
|
|
784
|
+
]}
|
|
785
|
+
value={formData.categoryOutlined || ''}
|
|
786
|
+
outlined={true}
|
|
787
|
+
searchable={true}
|
|
788
|
+
groupBy="category"
|
|
789
|
+
onChange={handleFieldChange}
|
|
790
|
+
helperText="Estilo outlined - Con agrupación personalizada"
|
|
323
791
|
/>
|
|
324
792
|
</div>
|
|
325
793
|
</section>
|
|
326
794
|
|
|
327
|
-
{/* DateRange2 */}
|
|
795
|
+
{/* DateRange2 - Normal */}
|
|
328
796
|
<section style={{ marginBottom: '2rem' }}>
|
|
329
|
-
<h3
|
|
330
|
-
<div style={{
|
|
331
|
-
background: '#fff',
|
|
332
|
-
padding: '1.5rem',
|
|
797
|
+
<h3>📅 DateRange2 - Estilo NORMAL</h3>
|
|
798
|
+
<div style={{
|
|
799
|
+
background: '#fff',
|
|
800
|
+
padding: '1.5rem',
|
|
333
801
|
borderRadius: '8px',
|
|
334
802
|
border: '1px solid #ddd',
|
|
335
803
|
display: 'grid',
|
|
@@ -337,35 +805,147 @@ export const TextField2Examples = () => {
|
|
|
337
805
|
gap: '1rem'
|
|
338
806
|
}}>
|
|
339
807
|
<DateRange2
|
|
340
|
-
id="
|
|
341
|
-
label="
|
|
342
|
-
value={formData.
|
|
808
|
+
id="projectDatesNormal"
|
|
809
|
+
label="Duración del Proyecto"
|
|
810
|
+
value={formData.projectDatesNormal || {}}
|
|
811
|
+
required={true}
|
|
812
|
+
minDate="2024-01-01"
|
|
813
|
+
maxDate="2025-12-31"
|
|
814
|
+
onChange={handleFieldChange}
|
|
815
|
+
onValidation={handleValidation}
|
|
816
|
+
helperText="Estilo normal - Fechas de inicio y fin del proyecto"
|
|
817
|
+
/>
|
|
818
|
+
|
|
819
|
+
<DateRange2
|
|
820
|
+
id="vacationDatesNormal"
|
|
821
|
+
label="Período de Vacaciones"
|
|
822
|
+
value={formData.vacationDatesNormal || {}}
|
|
823
|
+
onChange={handleFieldChange}
|
|
824
|
+
helperText="Estilo normal - Fechas de vacaciones opcionales"
|
|
825
|
+
/>
|
|
826
|
+
</div>
|
|
827
|
+
</section>
|
|
828
|
+
|
|
829
|
+
{/* DateRange2 - Outlined */}
|
|
830
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
831
|
+
<h3>📅 DateRange2 - Estilo OUTLINED</h3>
|
|
832
|
+
<div style={{
|
|
833
|
+
background: '#fff',
|
|
834
|
+
padding: '1.5rem',
|
|
835
|
+
borderRadius: '8px',
|
|
836
|
+
border: '1px solid #ddd',
|
|
837
|
+
display: 'grid',
|
|
838
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))',
|
|
839
|
+
gap: '1rem'
|
|
840
|
+
}}>
|
|
841
|
+
<DateRange2
|
|
842
|
+
id="projectDatesOutlined"
|
|
843
|
+
label="Duración del Proyecto"
|
|
844
|
+
value={formData.projectDatesOutlined || {}}
|
|
343
845
|
outlined={true}
|
|
344
846
|
required={true}
|
|
345
847
|
minDate="2024-01-01"
|
|
346
848
|
maxDate="2025-12-31"
|
|
347
849
|
onChange={handleFieldChange}
|
|
348
850
|
onValidation={handleValidation}
|
|
349
|
-
helperText="
|
|
851
|
+
helperText="Estilo outlined - Fechas de inicio y fin del proyecto"
|
|
350
852
|
/>
|
|
351
|
-
|
|
853
|
+
|
|
854
|
+
<DateRange2
|
|
855
|
+
id="vacationDatesOutlined"
|
|
856
|
+
label="Período de Vacaciones"
|
|
857
|
+
value={formData.vacationDatesOutlined || {}}
|
|
858
|
+
outlined={true}
|
|
859
|
+
onChange={handleFieldChange}
|
|
860
|
+
helperText="Estilo outlined - Fechas de vacaciones opcionales"
|
|
861
|
+
/>
|
|
862
|
+
|
|
352
863
|
<DateRange2
|
|
353
|
-
id="
|
|
354
|
-
label="
|
|
355
|
-
value={formData.
|
|
864
|
+
id="eventDatesOutlined"
|
|
865
|
+
label="Fechas del Evento"
|
|
866
|
+
value={formData.eventDatesOutlined || {}}
|
|
356
867
|
outlined={true}
|
|
868
|
+
required={true}
|
|
357
869
|
onChange={handleFieldChange}
|
|
358
|
-
helperText="
|
|
870
|
+
helperText="Estilo outlined - Fechas de inicio y fin del evento"
|
|
359
871
|
/>
|
|
360
872
|
</div>
|
|
361
873
|
</section>
|
|
362
874
|
|
|
363
|
-
{/* Estados
|
|
875
|
+
{/* Estados Especiales - Normal */}
|
|
364
876
|
<section style={{ marginBottom: '2rem' }}>
|
|
365
|
-
<h3
|
|
366
|
-
<div style={{
|
|
367
|
-
background: '#fff',
|
|
368
|
-
padding: '1.5rem',
|
|
877
|
+
<h3>⚙️ Estados Especiales - Estilo NORMAL</h3>
|
|
878
|
+
<div style={{
|
|
879
|
+
background: '#fff',
|
|
880
|
+
padding: '1.5rem',
|
|
881
|
+
borderRadius: '8px',
|
|
882
|
+
border: '1px solid #ddd',
|
|
883
|
+
display: 'grid',
|
|
884
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
885
|
+
gap: '1rem'
|
|
886
|
+
}}>
|
|
887
|
+
<TextField2
|
|
888
|
+
id="disabledFieldNormal"
|
|
889
|
+
label="Campo Deshabilitado"
|
|
890
|
+
value="No se puede editar"
|
|
891
|
+
disabled={true}
|
|
892
|
+
helperText="Estilo normal - Campo deshabilitado"
|
|
893
|
+
/>
|
|
894
|
+
|
|
895
|
+
<TextField2
|
|
896
|
+
id="readOnlyFieldNormal"
|
|
897
|
+
label="Campo Solo Lectura"
|
|
898
|
+
value="Valor de solo lectura"
|
|
899
|
+
readOnly={true}
|
|
900
|
+
helperText="Estilo normal - Campo de solo lectura"
|
|
901
|
+
/>
|
|
902
|
+
|
|
903
|
+
<TextField2
|
|
904
|
+
id="errorFieldNormal"
|
|
905
|
+
label="Campo con Error"
|
|
906
|
+
value="Valor inválido"
|
|
907
|
+
error="Este campo tiene un error"
|
|
908
|
+
helperText="Estilo normal - Campo con error"
|
|
909
|
+
/>
|
|
910
|
+
|
|
911
|
+
<TextField2
|
|
912
|
+
id="debouncedFieldNormal"
|
|
913
|
+
label="Campo con Debounce"
|
|
914
|
+
placeholder="Escribe para ver el debouncing..."
|
|
915
|
+
value={formData.debouncedFieldNormal || ''}
|
|
916
|
+
debounceMs={500}
|
|
917
|
+
onChange={handleFieldChange}
|
|
918
|
+
helperText="Estilo normal - Cambios con debounce de 500ms"
|
|
919
|
+
/>
|
|
920
|
+
|
|
921
|
+
<TextField2
|
|
922
|
+
id="requiredFieldNormal"
|
|
923
|
+
label="Campo Requerido"
|
|
924
|
+
placeholder="Este campo es obligatorio"
|
|
925
|
+
value={formData.requiredFieldNormal || ''}
|
|
926
|
+
required={true}
|
|
927
|
+
onChange={handleFieldChange}
|
|
928
|
+
helperText="Estilo normal - Campo obligatorio"
|
|
929
|
+
/>
|
|
930
|
+
|
|
931
|
+
<TextField2
|
|
932
|
+
id="maxLengthFieldNormal"
|
|
933
|
+
label="Campo con Límite"
|
|
934
|
+
placeholder="Máximo 50 caracteres"
|
|
935
|
+
value={formData.maxLengthFieldNormal || ''}
|
|
936
|
+
maxLength={50}
|
|
937
|
+
onChange={handleFieldChange}
|
|
938
|
+
helperText={`Estilo normal - ${(formData.maxLengthFieldNormal || '').length}/50 caracteres`}
|
|
939
|
+
/>
|
|
940
|
+
</div>
|
|
941
|
+
</section>
|
|
942
|
+
|
|
943
|
+
{/* Estados Especiales - Outlined */}
|
|
944
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
945
|
+
<h3>⚙️ Estados Especiales - Estilo OUTLINED</h3>
|
|
946
|
+
<div style={{
|
|
947
|
+
background: '#fff',
|
|
948
|
+
padding: '1.5rem',
|
|
369
949
|
borderRadius: '8px',
|
|
370
950
|
border: '1px solid #ddd',
|
|
371
951
|
display: 'grid',
|
|
@@ -373,47 +953,338 @@ export const TextField2Examples = () => {
|
|
|
373
953
|
gap: '1rem'
|
|
374
954
|
}}>
|
|
375
955
|
<TextField2
|
|
376
|
-
id="
|
|
377
|
-
label="
|
|
378
|
-
value="
|
|
956
|
+
id="disabledFieldOutlined"
|
|
957
|
+
label="Campo Deshabilitado"
|
|
958
|
+
value="No se puede editar"
|
|
379
959
|
disabled={true}
|
|
380
960
|
outlined={true}
|
|
381
|
-
helperText="
|
|
961
|
+
helperText="Estilo outlined - Campo deshabilitado"
|
|
382
962
|
/>
|
|
383
|
-
|
|
963
|
+
|
|
384
964
|
<TextField2
|
|
385
|
-
id="
|
|
386
|
-
label="
|
|
387
|
-
value="
|
|
965
|
+
id="readOnlyFieldOutlined"
|
|
966
|
+
label="Campo Solo Lectura"
|
|
967
|
+
value="Valor de solo lectura"
|
|
388
968
|
readOnly={true}
|
|
389
969
|
outlined={true}
|
|
390
|
-
helperText="
|
|
970
|
+
helperText="Estilo outlined - Campo de solo lectura"
|
|
391
971
|
/>
|
|
392
|
-
|
|
972
|
+
|
|
393
973
|
<TextField2
|
|
394
|
-
id="
|
|
395
|
-
label="
|
|
396
|
-
value="
|
|
974
|
+
id="errorFieldOutlined"
|
|
975
|
+
label="Campo con Error"
|
|
976
|
+
value="Valor inválido"
|
|
397
977
|
outlined={true}
|
|
398
|
-
error="
|
|
978
|
+
error="Este campo tiene un error"
|
|
979
|
+
helperText="Estilo outlined - Campo con error"
|
|
399
980
|
/>
|
|
400
|
-
|
|
981
|
+
|
|
401
982
|
<TextField2
|
|
402
|
-
id="
|
|
403
|
-
label="
|
|
404
|
-
placeholder="
|
|
405
|
-
value={formData.
|
|
983
|
+
id="debouncedFieldOutlined"
|
|
984
|
+
label="Campo con Debounce"
|
|
985
|
+
placeholder="Escribe para ver el debouncing..."
|
|
986
|
+
value={formData.debouncedFieldOutlined || ''}
|
|
406
987
|
outlined={true}
|
|
407
988
|
debounceMs={500}
|
|
408
989
|
onChange={handleFieldChange}
|
|
409
|
-
helperText="
|
|
990
|
+
helperText="Estilo outlined - Cambios con debounce de 500ms"
|
|
991
|
+
/>
|
|
992
|
+
|
|
993
|
+
<TextField2
|
|
994
|
+
id="requiredFieldOutlined"
|
|
995
|
+
label="Campo Requerido"
|
|
996
|
+
placeholder="Este campo es obligatorio"
|
|
997
|
+
value={formData.requiredFieldOutlined || ''}
|
|
998
|
+
required={true}
|
|
999
|
+
outlined={true}
|
|
1000
|
+
onChange={handleFieldChange}
|
|
1001
|
+
helperText="Estilo outlined - Campo obligatorio"
|
|
1002
|
+
/>
|
|
1003
|
+
|
|
1004
|
+
<TextField2
|
|
1005
|
+
id="maxLengthFieldOutlined"
|
|
1006
|
+
label="Campo con Límite"
|
|
1007
|
+
placeholder="Máximo 50 caracteres"
|
|
1008
|
+
value={formData.maxLengthFieldOutlined || ''}
|
|
1009
|
+
maxLength={50}
|
|
1010
|
+
outlined={true}
|
|
1011
|
+
onChange={handleFieldChange}
|
|
1012
|
+
helperText={`Estilo outlined - ${(formData.maxLengthFieldOutlined || '').length}/50 caracteres`}
|
|
410
1013
|
/>
|
|
1014
|
+
|
|
1015
|
+
<TextField2
|
|
1016
|
+
id="validationFieldOutlined"
|
|
1017
|
+
label="Campo con Validación"
|
|
1018
|
+
placeholder="Solo números"
|
|
1019
|
+
value={formData.validationFieldOutlined || ''}
|
|
1020
|
+
outlined={true}
|
|
1021
|
+
validation={(value) => /^\d*$/.test(value)}
|
|
1022
|
+
onChange={handleFieldChange}
|
|
1023
|
+
onValidation={handleValidation}
|
|
1024
|
+
helperText="Estilo outlined - Solo acepta números"
|
|
1025
|
+
/>
|
|
1026
|
+
|
|
1027
|
+
<TextField2
|
|
1028
|
+
id="autoCompleteFieldOutlined"
|
|
1029
|
+
label="Campo con AutoComplete"
|
|
1030
|
+
placeholder="Ingresa tu email"
|
|
1031
|
+
value={formData.autoCompleteFieldOutlined || ''}
|
|
1032
|
+
outlined={true}
|
|
1033
|
+
type="email"
|
|
1034
|
+
autoComplete="email"
|
|
1035
|
+
onChange={handleFieldChange}
|
|
1036
|
+
helperText="Estilo outlined - Con autocompletado"
|
|
1037
|
+
/>
|
|
1038
|
+
</div>
|
|
1039
|
+
</section>
|
|
1040
|
+
|
|
1041
|
+
{/* Validación Avanzada */}
|
|
1042
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
1043
|
+
<h3>🔍 Validación Avanzada y Casos Especiales</h3>
|
|
1044
|
+
<div style={{
|
|
1045
|
+
background: '#fff',
|
|
1046
|
+
padding: '1.5rem',
|
|
1047
|
+
borderRadius: '8px',
|
|
1048
|
+
border: '1px solid #ddd',
|
|
1049
|
+
display: 'grid',
|
|
1050
|
+
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
1051
|
+
gap: '1rem'
|
|
1052
|
+
}}>
|
|
1053
|
+
<TextField2
|
|
1054
|
+
id="emailValidation"
|
|
1055
|
+
type="email"
|
|
1056
|
+
label="Email con Validación"
|
|
1057
|
+
placeholder="usuario@dominio.com"
|
|
1058
|
+
value={formData.emailValidation || ''}
|
|
1059
|
+
outlined={true}
|
|
1060
|
+
validation={validateEmail}
|
|
1061
|
+
onChange={handleFieldChange}
|
|
1062
|
+
onValidation={handleValidation}
|
|
1063
|
+
helperText="Validación en tiempo real de email"
|
|
1064
|
+
/>
|
|
1065
|
+
|
|
1066
|
+
<PasswordField2
|
|
1067
|
+
id="passwordValidation"
|
|
1068
|
+
label="Contraseña Segura"
|
|
1069
|
+
placeholder="Contraseña compleja"
|
|
1070
|
+
value={formData.passwordValidation || ''}
|
|
1071
|
+
outlined={true}
|
|
1072
|
+
validation={validatePassword}
|
|
1073
|
+
onChange={handleFieldChange}
|
|
1074
|
+
onValidation={handleValidation}
|
|
1075
|
+
helperText="8+ chars, mayús, minús, número"
|
|
1076
|
+
/>
|
|
1077
|
+
|
|
1078
|
+
<TextField2
|
|
1079
|
+
id="phoneValidation"
|
|
1080
|
+
type="tel"
|
|
1081
|
+
label="Teléfono con Validación"
|
|
1082
|
+
placeholder="+34 123 456 789"
|
|
1083
|
+
value={formData.phoneValidation || ''}
|
|
1084
|
+
outlined={true}
|
|
1085
|
+
validation={validatePhone}
|
|
1086
|
+
onChange={handleFieldChange}
|
|
1087
|
+
onValidation={handleValidation}
|
|
1088
|
+
helperText="Formato internacional válido"
|
|
1089
|
+
/>
|
|
1090
|
+
|
|
1091
|
+
<TextField2
|
|
1092
|
+
id="customValidation"
|
|
1093
|
+
label="Validación Personalizada"
|
|
1094
|
+
placeholder="Solo letras y espacios"
|
|
1095
|
+
value={formData.customValidation || ''}
|
|
1096
|
+
outlined={true}
|
|
1097
|
+
validation={(value) => {
|
|
1098
|
+
const isValid = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]*$/.test(value)
|
|
1099
|
+
return {
|
|
1100
|
+
valid: isValid,
|
|
1101
|
+
message: isValid ? '' : 'Solo se permiten letras y espacios'
|
|
1102
|
+
}
|
|
1103
|
+
}}
|
|
1104
|
+
onChange={handleFieldChange}
|
|
1105
|
+
onValidation={handleValidation}
|
|
1106
|
+
helperText="Validación de solo letras"
|
|
1107
|
+
/>
|
|
1108
|
+
|
|
1109
|
+
<TextField2
|
|
1110
|
+
id="rangeValidation"
|
|
1111
|
+
type="number"
|
|
1112
|
+
label="Número en Rango"
|
|
1113
|
+
placeholder="Entre 1 y 100"
|
|
1114
|
+
value={formData.rangeValidation || ''}
|
|
1115
|
+
outlined={true}
|
|
1116
|
+
min="1"
|
|
1117
|
+
max="100"
|
|
1118
|
+
validation={(value) => {
|
|
1119
|
+
const num = parseInt(value)
|
|
1120
|
+
const isValid = !isNaN(num) && num >= 1 && num <= 100
|
|
1121
|
+
return {
|
|
1122
|
+
valid: isValid,
|
|
1123
|
+
message: isValid ? '' : 'El número debe estar entre 1 y 100'
|
|
1124
|
+
}
|
|
1125
|
+
}}
|
|
1126
|
+
onChange={handleFieldChange}
|
|
1127
|
+
onValidation={handleValidation}
|
|
1128
|
+
helperText="Número entre 1 y 100"
|
|
1129
|
+
/>
|
|
1130
|
+
|
|
1131
|
+
<TextField2
|
|
1132
|
+
id="asyncValidation"
|
|
1133
|
+
label="Validación Asíncrona"
|
|
1134
|
+
placeholder="Simula validación en servidor"
|
|
1135
|
+
value={formData.asyncValidation || ''}
|
|
1136
|
+
outlined={true}
|
|
1137
|
+
debounceMs={1000}
|
|
1138
|
+
validation={(value) => {
|
|
1139
|
+
// Simular validación asíncrona
|
|
1140
|
+
return new Promise((resolve) => {
|
|
1141
|
+
setTimeout(() => {
|
|
1142
|
+
const isValid = value.length >= 3 && !value.includes('admin')
|
|
1143
|
+
resolve({
|
|
1144
|
+
valid: isValid,
|
|
1145
|
+
message: isValid ? 'Disponible' : 'No disponible o muy corto'
|
|
1146
|
+
})
|
|
1147
|
+
}, 500)
|
|
1148
|
+
})
|
|
1149
|
+
}}
|
|
1150
|
+
onChange={handleFieldChange}
|
|
1151
|
+
onValidation={handleValidation}
|
|
1152
|
+
helperText="Validación con delay (simula servidor)"
|
|
1153
|
+
/>
|
|
1154
|
+
</div>
|
|
1155
|
+
</section>
|
|
1156
|
+
|
|
1157
|
+
{/* Casos de Uso Reales */}
|
|
1158
|
+
<section style={{ marginBottom: '2rem' }}>
|
|
1159
|
+
<h3>🏢 Casos de Uso Reales</h3>
|
|
1160
|
+
<div style={{
|
|
1161
|
+
background: '#fff',
|
|
1162
|
+
padding: '1.5rem',
|
|
1163
|
+
borderRadius: '8px',
|
|
1164
|
+
border: '1px solid #ddd'
|
|
1165
|
+
}}>
|
|
1166
|
+
<h4>Formulario de Registro de Usuario</h4>
|
|
1167
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
|
|
1168
|
+
<TextField2
|
|
1169
|
+
id="userFirstName"
|
|
1170
|
+
label="Nombre"
|
|
1171
|
+
placeholder="Tu nombre"
|
|
1172
|
+
value={formData.userFirstName || ''}
|
|
1173
|
+
required={true}
|
|
1174
|
+
outlined={true}
|
|
1175
|
+
onChange={handleFieldChange}
|
|
1176
|
+
autoComplete="given-name"
|
|
1177
|
+
/>
|
|
1178
|
+
|
|
1179
|
+
<TextField2
|
|
1180
|
+
id="userLastName"
|
|
1181
|
+
label="Apellidos"
|
|
1182
|
+
placeholder="Tus apellidos"
|
|
1183
|
+
value={formData.userLastName || ''}
|
|
1184
|
+
required={true}
|
|
1185
|
+
outlined={true}
|
|
1186
|
+
onChange={handleFieldChange}
|
|
1187
|
+
autoComplete="family-name"
|
|
1188
|
+
/>
|
|
1189
|
+
|
|
1190
|
+
<TextField2
|
|
1191
|
+
id="userEmail"
|
|
1192
|
+
type="email"
|
|
1193
|
+
label="Email"
|
|
1194
|
+
placeholder="tu@email.com"
|
|
1195
|
+
value={formData.userEmail || ''}
|
|
1196
|
+
required={true}
|
|
1197
|
+
outlined={true}
|
|
1198
|
+
validation={validateEmail}
|
|
1199
|
+
onChange={handleFieldChange}
|
|
1200
|
+
onValidation={handleValidation}
|
|
1201
|
+
autoComplete="email"
|
|
1202
|
+
/>
|
|
1203
|
+
|
|
1204
|
+
<PasswordField2
|
|
1205
|
+
id="userPassword"
|
|
1206
|
+
label="Contraseña"
|
|
1207
|
+
placeholder="Contraseña segura"
|
|
1208
|
+
value={formData.userPassword || ''}
|
|
1209
|
+
required={true}
|
|
1210
|
+
outlined={true}
|
|
1211
|
+
validation={validatePassword}
|
|
1212
|
+
onChange={handleFieldChange}
|
|
1213
|
+
onValidation={handleValidation}
|
|
1214
|
+
autoComplete="new-password"
|
|
1215
|
+
/>
|
|
1216
|
+
</div>
|
|
1217
|
+
|
|
1218
|
+
<h4>Información de Contacto</h4>
|
|
1219
|
+
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem', marginBottom: '2rem' }}>
|
|
1220
|
+
<TextField2
|
|
1221
|
+
id="contactPhone"
|
|
1222
|
+
type="tel"
|
|
1223
|
+
label="Teléfono"
|
|
1224
|
+
placeholder="+34 123 456 789"
|
|
1225
|
+
value={formData.contactPhone || ''}
|
|
1226
|
+
outlined={true}
|
|
1227
|
+
validation={validatePhone}
|
|
1228
|
+
onChange={handleFieldChange}
|
|
1229
|
+
onValidation={handleValidation}
|
|
1230
|
+
autoComplete="tel"
|
|
1231
|
+
/>
|
|
1232
|
+
|
|
1233
|
+
<TextField2
|
|
1234
|
+
id="contactAddress"
|
|
1235
|
+
label="Dirección"
|
|
1236
|
+
placeholder="Calle, número, ciudad"
|
|
1237
|
+
value={formData.contactAddress || ''}
|
|
1238
|
+
outlined={true}
|
|
1239
|
+
onChange={handleFieldChange}
|
|
1240
|
+
autoComplete="street-address"
|
|
1241
|
+
/>
|
|
1242
|
+
|
|
1243
|
+
<DropDown2
|
|
1244
|
+
id="contactCountry"
|
|
1245
|
+
label="País"
|
|
1246
|
+
placeholder="Selecciona tu país"
|
|
1247
|
+
options={countryOptions}
|
|
1248
|
+
value={formData.contactCountry || ''}
|
|
1249
|
+
outlined={true}
|
|
1250
|
+
searchable={true}
|
|
1251
|
+
onChange={handleFieldChange}
|
|
1252
|
+
/>
|
|
1253
|
+
</div>
|
|
1254
|
+
|
|
1255
|
+
<h4>Información Adicional</h4>
|
|
1256
|
+
<div style={{ display: 'grid', gap: '1rem' }}>
|
|
1257
|
+
<TextArea2
|
|
1258
|
+
id="userBio"
|
|
1259
|
+
label="Biografía"
|
|
1260
|
+
placeholder="Cuéntanos sobre ti..."
|
|
1261
|
+
value={formData.userBio || ''}
|
|
1262
|
+
outlined={true}
|
|
1263
|
+
rows={4}
|
|
1264
|
+
maxLength={500}
|
|
1265
|
+
onChange={handleFieldChange}
|
|
1266
|
+
helperText={`${(formData.userBio || '').length}/500 caracteres`}
|
|
1267
|
+
/>
|
|
1268
|
+
|
|
1269
|
+
<DropDown2
|
|
1270
|
+
id="userSkills"
|
|
1271
|
+
label="Habilidades"
|
|
1272
|
+
placeholder="Selecciona tus habilidades"
|
|
1273
|
+
options={skillOptions}
|
|
1274
|
+
value={formData.userSkills || []}
|
|
1275
|
+
multiple={true}
|
|
1276
|
+
outlined={true}
|
|
1277
|
+
searchable={true}
|
|
1278
|
+
groupBy="category"
|
|
1279
|
+
onChange={handleFieldChange}
|
|
1280
|
+
/>
|
|
1281
|
+
</div>
|
|
411
1282
|
</div>
|
|
412
1283
|
</section>
|
|
413
1284
|
|
|
414
1285
|
{/* Estado actual del formulario */}
|
|
415
1286
|
<section style={{ marginBottom: '2rem' }}>
|
|
416
|
-
<h3
|
|
1287
|
+
<h3>📊 Estado Actual del Formulario</h3>
|
|
417
1288
|
<div style={{
|
|
418
1289
|
background: '#f8f9fa',
|
|
419
1290
|
padding: '1rem',
|