@luis-angel-martin-dzul/input-styles 0.0.26 → 0.0.29
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/README.md +80 -5
- package/dist/input-styles.css +1 -1
- package/dist/input-yuc.es.js +644 -228
- package/dist/input-yuc.umd.js +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,8 +6,8 @@ Incluye componentes de inputs, selects, botones, paginación y más, estilizados
|
|
|
6
6
|
|
|
7
7
|
------
|
|
8
8
|
|
|
9
|
-
|
|
10
|
+
|
|
11
11
|
|
|
12
12
|
------
|
|
13
13
|
|
|
@@ -119,7 +119,7 @@ configureStyles({
|
|
|
119
119
|
---
|
|
120
120
|
|
|
121
121
|
### Inputs de texto
|
|
122
|
-
_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`_
|
|
122
|
+
_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`, `InputAutocompleteStyle`_
|
|
123
123
|
|
|
124
124
|
| Token | Tipo | Default | Descripción |
|
|
125
125
|
| ----- | ---- | ------- | ----------- |
|
|
@@ -155,7 +155,7 @@ configureStyles({
|
|
|
155
155
|
---
|
|
156
156
|
|
|
157
157
|
### Select
|
|
158
|
-
_Afecta: `SelectStyle`_
|
|
158
|
+
_Afecta: `SelectStyle`, `InputAutocompleteStyle`_
|
|
159
159
|
|
|
160
160
|
| Token | Tipo | Default | Descripción |
|
|
161
161
|
| ----- | ---- | ------- | ----------- |
|
|
@@ -357,13 +357,14 @@ Input numérico con control preciso de dígitos, decimales, rango y formato de v
|
|
|
357
357
|
| `numeric` | `String` | `null` | Formato tipo SQL: `"10,2"` → 10 dígitos enteros, 2 decimales. Si se omite, usa `10,2` por defecto. |
|
|
358
358
|
| `min` | `String` | `null` | Valor mínimo (aplicado al perder el foco). Si es `null` o negativo, permite negativos. |
|
|
359
359
|
| `max` | `String` | `null` | Valor máximo (aplicado al perder el foco). |
|
|
360
|
+
| `alignLeft` | `Boolean` | `false` | Posición de los botones de paso (▲/▼) respecto al valor. `false` = botones a la izquierda, valor a la derecha (`Rows \| Input`); `true` = botones a la derecha, valor a la izquierda (`Input \| Rows`). |
|
|
360
361
|
| `disabled` | `Boolean` | `false` | |
|
|
361
362
|
| `required` | `Boolean` | `false` | |
|
|
362
363
|
| `validate` | `Boolean \| null` | `null` | |
|
|
363
364
|
| `mclass` | `String` | `null` | |
|
|
364
365
|
|
|
365
366
|
**Comportamiento:**
|
|
366
|
-
- Incluye botones **caret ▲ / ▼**
|
|
367
|
+
- Incluye botones **caret ▲ / ▼** para aumentar/disminuir el valor en unidades (respetando `min`/`max`). Por defecto se alinean a la izquierda del campo (con el valor a la derecha); con `alignLeft` se mueven a la derecha y el valor pasa a la izquierda. No tienen separador y usan el color global de los iconos (`ICON_STATIC`).
|
|
367
368
|
- Si **mantienes presionado** un botón, tras una breve pausa el valor cambia de forma **continua** hasta soltar.
|
|
368
369
|
- Puedes escribir `0` y luego `.` para empezar los decimales: el punto se conserva a la espera de los dígitos decimales (solo si los decimales están activados en `numeric`).
|
|
369
370
|
- Al **enfocar** el campo, si el valor es `0` (o está vacío) se limpia, para que al escribir reemplaces el valor en lugar de anteponerlo.
|
|
@@ -489,6 +490,78 @@ const ubicaciones = [
|
|
|
489
490
|
|
|
490
491
|
------
|
|
491
492
|
|
|
493
|
+
## InputAutocompleteStyle
|
|
494
|
+
|
|
495
|
+
Autocomplete basado en `SelectStyle`, pero con el **input editable**: el usuario escribe para filtrar las opciones en vivo. Mantiene el mismo formato de `list` (plana o agrupada) y la misma navegación por teclado y posicionamiento automático del dropdown.
|
|
496
|
+
|
|
497
|
+
Incluye un estado de **carga/búsqueda** controlado por la prop `loading`: cuando es `true`, oculta las opciones y muestra el mensaje _"Buscando coincidencias..."_ — pensado para búsquedas asíncronas donde el listado se resuelve en el servidor.
|
|
498
|
+
|
|
499
|
+
```vue
|
|
500
|
+
<InputAutocompleteStyle
|
|
501
|
+
v-model="pais"
|
|
502
|
+
label="País"
|
|
503
|
+
:list="paises"
|
|
504
|
+
placeholder="Escribe para buscar"
|
|
505
|
+
:loading="buscando"
|
|
506
|
+
return-value="value"
|
|
507
|
+
:validate="validate"
|
|
508
|
+
@search="onSearch"
|
|
509
|
+
/>
|
|
510
|
+
```
|
|
511
|
+
|
|
512
|
+
```js
|
|
513
|
+
// El evento @search se emite en cada tecleo; úsalo para disparar una
|
|
514
|
+
// búsqueda asíncrona y controlar la prop `loading`.
|
|
515
|
+
function onSearch(query) {
|
|
516
|
+
buscando.value = true
|
|
517
|
+
fetchPaises(query).then(res => {
|
|
518
|
+
paises.value = res
|
|
519
|
+
buscando.value = false
|
|
520
|
+
})
|
|
521
|
+
}
|
|
522
|
+
```
|
|
523
|
+
|
|
524
|
+
```js
|
|
525
|
+
// Formato del array `list` — idéntico a SelectStyle (plana o agrupada)
|
|
526
|
+
const paises = [
|
|
527
|
+
{ value: 1, text: 'México' },
|
|
528
|
+
{ value: 2, text: 'España' },
|
|
529
|
+
{ value: 3, text: 'Argentina' },
|
|
530
|
+
]
|
|
531
|
+
```
|
|
532
|
+
|
|
533
|
+
| Prop | Tipo | Default | Descripción |
|
|
534
|
+
| ---- | ---- | ------- | ----------- |
|
|
535
|
+
| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
|
|
536
|
+
| `list` | `Array` | `[]` | Array de opciones. Acepta lista plana `{ value, text }` o agrupada `{ label, options: [...] }`. El `value` es opcional: si se omite, se usa el `text` como valor. |
|
|
537
|
+
| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
|
|
538
|
+
| `loading` | `Boolean` | `false` | Cuando es `true`, oculta las opciones y muestra "Buscando coincidencias...". Úsalo mientras resuelves una búsqueda asíncrona. |
|
|
539
|
+
| `label` | `String` | `''` | |
|
|
540
|
+
| `description` | `String` | `''` | |
|
|
541
|
+
| `placeholder` | `String` | `''` | |
|
|
542
|
+
| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
|
|
543
|
+
| `disabled` | `Boolean` | `false` | |
|
|
544
|
+
| `required` | `Boolean` | `false` | |
|
|
545
|
+
| `validate` | `Boolean \| null` | `null` | |
|
|
546
|
+
| `mclass` | `String` | `null` | |
|
|
547
|
+
|
|
548
|
+
**Eventos:**
|
|
549
|
+
- `search` — se emite en cada cambio del texto escrito, con el `query` actual como payload. Ideal para búsquedas asíncronas.
|
|
550
|
+
- `update:modelValue` / `change` — emiten el valor al seleccionar una opción (según `returnValue`).
|
|
551
|
+
- `blur` — al cerrarse el dropdown.
|
|
552
|
+
|
|
553
|
+
**Comportamiento:**
|
|
554
|
+
- Al abrir (foco o clic en el chevron) muestra todas las opciones; al teclear, filtra por coincidencia de texto (sin distinguir mayúsculas).
|
|
555
|
+
- Al seleccionar una opción, el input muestra su `text`.
|
|
556
|
+
- Si se cierra el dropdown sin seleccionar, el input vuelve a reflejar la selección real (descarta el texto escrito sin confirmar).
|
|
557
|
+
|
|
558
|
+
**Navegación por teclado:**
|
|
559
|
+
- `↑` / `↓` — navegar opciones
|
|
560
|
+
- `Enter` — seleccionar la opción resaltada
|
|
561
|
+
- `Escape` — cerrar el dropdown
|
|
562
|
+
|
|
563
|
+
------
|
|
564
|
+
|
|
492
565
|
## InputCheckStyle
|
|
493
566
|
|
|
494
567
|
Checkbox estilizado con label y descripción.
|
|
@@ -921,6 +994,8 @@ UtilStyle.getUUID()
|
|
|
921
994
|
| `formatNumber(valor, digit?)` | `Number, Number` | Formatea un número con separadores de miles y decimales fijos. |
|
|
922
995
|
| `formatDateShort(dateString)` | `String` | Fecha en formato corto en español (ej: `9 jul 2026`). |
|
|
923
996
|
| `formatDateLong(dateString)` | `String` | Fecha en formato largo en español (ej: `9 de julio de 2026`). |
|
|
997
|
+
| `formatDateTimeShort(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato corto en español (ej: `9 jul 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
|
|
998
|
+
| `formatDateTimeLong(dateString, hour12?)` | `String, Boolean` | Fecha y hora en formato largo en español (ej: `9 de julio de 2026, 12:00 p. m.`). `hour12` (default `true`) alterna entre 12h y 24h. |
|
|
924
999
|
| `getDateTimeNow()` | — | Fecha y hora actual (zona `America/Mexico_City`) en formato `YYYY-MM-DDTHH:mm:ss`. |
|
|
925
1000
|
| `blockKeyNumber(event)` | `Event` | Bloquea las teclas `e`, `E`, `+`, `-` en un `@keydown`. |
|
|
926
1001
|
| `blockKeys(event, keys)` | `Event, Array` | Bloquea las teclas indicadas en un `@keydown`. |
|
package/dist/input-styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.alert-container{z-index:99999;flex-direction:column;gap:10px;width:340px;display:flex;position:fixed;top:20px;right:20px}.alert{opacity:0;background-color:#f9fafb;border:1px solid #0000;border-radius:.375rem;align-items:center;gap:12px;padding:12px 16px;transition:opacity .25s,transform .25s;display:flex;transform:translate(40px);box-shadow:0 2px 6px #0000001f}.alert.show{opacity:1;transform:translate(0)}.alert.hide{opacity:0;transform:translate(40px)}.alert-icon{justify-content:center;align-items:center;width:26px;display:flex}.alert-icon svg{width:22px;height:22px;display:block}.alert-icon svg path{fill:currentColor!important}.alert-texts{flex:1}.alert-title{text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.alert-message{-webkit-box-orient:vertical;margin-top:2px;font-size:13px;display:-webkit-box;overflow:hidden}.alert-close{cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;width:28px;height:28px;font-size:18px;font-weight:700;transition:all .2s;display:flex}.alert-close:hover{background:#d1d5db}.alert-success{color:#065f46;background-color:#ecfdf5;border-color:#b4dfc6}.alert-error{color:#991b1b;background-color:#fef2f2;border-color:#f0c5c5}.alert-warning{color:#92400e;background-color:#fffbeb;border-color:#f0dfa5}.alert-info{color:#1e40af;background-color:#eff6ff;border-color:#c7daf5}.alert-neutral{color:#374151;background-color:#f3f4f6;border-color:#cbd5e1}.dialog-overlay{z-index:99998;opacity:0;background:#00000073;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .25s;display:flex;position:fixed;top:0;left:0}.dialog-overlay.show{opacity:1}.dialog-box{background:#fff;border-radius:.5rem;flex-direction:column;width:400px;max-width:90%;max-height:90vh;padding:1rem;transition:transform .25s;display:flex;transform:translateY(-20px);box-shadow:0 25px 50px -12px #00000040}.dialog-overlay.show .dialog-box{transform:translateY(0)}.dialog-box.fixed-width{width:380px;max-width:90%}.dialog-title{color:#1f2937;font-size:18px;font-weight:700}.dialog-description{color:#374151;white-space:pre-line;margin-bottom:10px;font-size:14px}.dialog-buttons{gap:10px;margin-top:10px;display:flex}.dialog-buttons.two-buttons{grid-template-columns:1fr 1fr;gap:10px;display:grid}.dialog-buttons.one-button{display:flex}.dialog-buttons.one-button .dialog-btn{flex:1}.dialog-btn{cursor:pointer;text-align:center;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.dialog-buttons .dialog-btn{flex:1}.btn-blue{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.btn-blue:hover{background-color:#0ea5e9}.btn-blue:disabled{color:#6b7280;cursor:not-allowed;background-color:#7dd3fc}.btn-white{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.btn-white:hover{background-color:#f3f4f6}.btn-white:disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}.dialog-btn-cancel{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.dialog-btn-cancel:hover{background-color:#f3f4f6}.dialog-btn-cancel:disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}.dialog-btn-accept{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.dialog-btn-accept:hover{background-color:#0ea5e9}.dialog-btn-accept:disabled{color:#6b7280;cursor:not-allowed;background-color:#7dd3fc}.dialog-loading-layout{gap:16px;min-height:60px;margin-top:16px;display:flex}.dialog-loading-icon{flex-shrink:0;align-items:center;min-height:60px;display:flex}.dialog-loading-spinner{border:3px solid #e5e7eb;border-top-color:#0d9488;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite dialog-spin}.dialog-loading-texts{flex-direction:column;flex:1;justify-content:center;gap:4px;display:flex}.dialog-loading-title{color:#1f2937;font-size:15px;font-weight:600;line-height:1.4}.dialog-loading-message{color:#6b7280;font-size:13px;line-height:1.4}@keyframes dialog-spin{to{transform:rotate(360deg)}}@keyframes dialogShake{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(3px)}to{transform:translateY(0)}}.dialog-shake{animation:.25s dialogShake}.dialog-box:has(.dialog-loading-layout) .dialog-title{display:none}.dialog-box:has(.dialog-loading-layout) .dialog-description{display:none}.dialog-box:has(.dialog-loading-layout:only-child){padding:1rem}.dialog-box:has(.dialog-loading-layout):not(:has(.dialog-buttons)){padding-bottom:1rem}.dialog-box:has(.dialog-loading-layout:first-child:last-child) .dialog-loading-layout{margin-top:0}input[type=date][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-756569d8],input[type=datetime-local][data-v-756569d8],input[type=time][data-v-756569d8]{appearance:none;-moz-appearance:textfield}input[type=date][data-v-
|
|
1
|
+
.alert-container{z-index:99999;flex-direction:column;gap:10px;width:340px;display:flex;position:fixed;top:20px;right:20px}.alert{opacity:0;background-color:#f9fafb;border:1px solid #0000;border-radius:.375rem;align-items:center;gap:12px;padding:12px 16px;transition:opacity .25s,transform .25s;display:flex;transform:translate(40px);box-shadow:0 2px 6px #0000001f}.alert.show{opacity:1;transform:translate(0)}.alert.hide{opacity:0;transform:translate(40px)}.alert-icon{justify-content:center;align-items:center;width:26px;display:flex}.alert-icon svg{width:22px;height:22px;display:block}.alert-icon svg path{fill:currentColor!important}.alert-texts{flex:1}.alert-title{text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.alert-message{-webkit-box-orient:vertical;margin-top:2px;font-size:13px;display:-webkit-box;overflow:hidden}.alert-close{cursor:pointer;border-radius:.5rem;justify-content:center;align-items:center;width:28px;height:28px;font-size:18px;font-weight:700;transition:all .2s;display:flex}.alert-close:hover{background:#d1d5db}.alert-success{color:#065f46;background-color:#ecfdf5;border-color:#b4dfc6}.alert-error{color:#991b1b;background-color:#fef2f2;border-color:#f0c5c5}.alert-warning{color:#92400e;background-color:#fffbeb;border-color:#f0dfa5}.alert-info{color:#1e40af;background-color:#eff6ff;border-color:#c7daf5}.alert-neutral{color:#374151;background-color:#f3f4f6;border-color:#cbd5e1}.dialog-overlay{z-index:99998;opacity:0;background:#00000073;justify-content:center;align-items:center;width:100%;height:100%;transition:opacity .25s;display:flex;position:fixed;top:0;left:0}.dialog-overlay.show{opacity:1}.dialog-box{background:#fff;border-radius:.5rem;flex-direction:column;width:400px;max-width:90%;max-height:90vh;padding:1rem;transition:transform .25s;display:flex;transform:translateY(-20px);box-shadow:0 25px 50px -12px #00000040}.dialog-overlay.show .dialog-box{transform:translateY(0)}.dialog-box.fixed-width{width:380px;max-width:90%}.dialog-title{color:#1f2937;font-size:18px;font-weight:700}.dialog-description{color:#374151;white-space:pre-line;margin-bottom:10px;font-size:14px}.dialog-buttons{gap:10px;margin-top:10px;display:flex}.dialog-buttons.two-buttons{grid-template-columns:1fr 1fr;gap:10px;display:grid}.dialog-buttons.one-button{display:flex}.dialog-buttons.one-button .dialog-btn{flex:1}.dialog-btn{cursor:pointer;text-align:center;justify-content:center;align-items:center;gap:6px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.dialog-buttons .dialog-btn{flex:1}.btn-blue{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.btn-blue:hover{background-color:#0ea5e9}.btn-blue:disabled{color:#6b7280;cursor:not-allowed;background-color:#7dd3fc}.btn-white{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.btn-white:hover{background-color:#f3f4f6}.btn-white:disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}.dialog-btn-cancel{color:#374151;cursor:pointer;background-color:#fff;border:1px solid #d1d5db;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.dialog-btn-cancel:hover{background-color:#f3f4f6}.dialog-btn-cancel:disabled{color:#6b7280;cursor:not-allowed;background-color:#d1d5db}.dialog-btn-accept{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:.125rem;padding:.25rem .5rem;font-size:.75rem;transition:background-color .2s}.dialog-btn-accept:hover{background-color:#0ea5e9}.dialog-btn-accept:disabled{color:#6b7280;cursor:not-allowed;background-color:#7dd3fc}.dialog-loading-layout{gap:16px;min-height:60px;margin-top:16px;display:flex}.dialog-loading-icon{flex-shrink:0;align-items:center;min-height:60px;display:flex}.dialog-loading-spinner{border:3px solid #e5e7eb;border-top-color:#0d9488;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite dialog-spin}.dialog-loading-texts{flex-direction:column;flex:1;justify-content:center;gap:4px;display:flex}.dialog-loading-title{color:#1f2937;font-size:15px;font-weight:600;line-height:1.4}.dialog-loading-message{color:#6b7280;font-size:13px;line-height:1.4}@keyframes dialog-spin{to{transform:rotate(360deg)}}@keyframes dialogShake{0%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(3px)}to{transform:translateY(0)}}.dialog-shake{animation:.25s dialogShake}.dialog-box:has(.dialog-loading-layout) .dialog-title{display:none}.dialog-box:has(.dialog-loading-layout) .dialog-description{display:none}.dialog-box:has(.dialog-loading-layout:only-child){padding:1rem}.dialog-box:has(.dialog-loading-layout):not(:has(.dialog-buttons)){padding-bottom:1rem}.dialog-box:has(.dialog-loading-layout:first-child:last-child) .dialog-loading-layout{margin-top:0}input[type=date][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-756569d8]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-756569d8],input[type=datetime-local][data-v-756569d8],input[type=time][data-v-756569d8]{appearance:none;-moz-appearance:textfield}input[type=date][data-v-f9c04d0f]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-f9c04d0f]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-f9c04d0f]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-f9c04d0f],input[type=datetime-local][data-v-f9c04d0f],input[type=time][data-v-f9c04d0f]{appearance:none;-moz-appearance:textfield}input[type=date][data-v-3968f4d1]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-3968f4d1]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-3968f4d1]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-3968f4d1],input[type=datetime-local][data-v-3968f4d1],input[type=time][data-v-3968f4d1]{appearance:none;-moz-appearance:textfield}
|
|
2
2
|
/*$vite$:1*/
|