@luis-angel-martin-dzul/input-styles 0.0.17 → 0.0.22
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 +132 -7
- package/dist/input-styles.css +2 -1
- package/dist/input-yuc.es.js +6493 -6728
- package/dist/input-yuc.umd.js +13 -13
- package/package.json +2 -2
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
|
|
|
@@ -38,6 +38,14 @@ app.use(InputStyle)
|
|
|
38
38
|
app.mount('#app')
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
+
Al instalar el plugin se registran automáticamente todos los componentes y las siguientes **propiedades globales** (disponibles en cualquier componente con la Options API):
|
|
42
|
+
|
|
43
|
+
| Propiedad global | Equivale a | Descripción |
|
|
44
|
+
| ---------------- | ---------- | ----------- |
|
|
45
|
+
| `$alertstyle` | `AlertStyle` | Notificaciones tipo toast (ver [AlertStyle](#alertstyle-notificaciones-tipo-toast)). |
|
|
46
|
+
| `$dialogstyle` | `DialogStyle` | Diálogos de confirmación / info / carga (ver [DialogStyle](#dialogstyle-diálogos-modales)). |
|
|
47
|
+
| `$utilstyle` | `UtilStyle` | Utilidades internas (ej: generación de UUID). |
|
|
48
|
+
|
|
41
49
|
------
|
|
42
50
|
|
|
43
51
|
# Estilos default
|
|
@@ -111,7 +119,7 @@ configureStyles({
|
|
|
111
119
|
---
|
|
112
120
|
|
|
113
121
|
### Inputs de texto
|
|
114
|
-
_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputTimeStyle`, `SelectStyle`_
|
|
122
|
+
_Afecta: `InputTextStyle`, `InputNumberStyle`, `InputPasswordStyle`, `TextAreaStyle`, `InputDateStyle`, `InputDateTimeStyle`, `InputTimeStyle`, `SelectStyle`_
|
|
115
123
|
|
|
116
124
|
| Token | Tipo | Default | Descripción |
|
|
117
125
|
| ----- | ---- | ------- | ----------- |
|
|
@@ -155,6 +163,7 @@ _Afecta: `SelectStyle`_
|
|
|
155
163
|
| `SELECT_DROPDOWN` | `string` | `'absolute z-20 w-full bg-white border ...'` | Clases del contenedor `<ul>` del dropdown. |
|
|
156
164
|
| `SELECT_OPTION_BASE` | `string` | `'px-3 py-1 cursor-pointer text-md'` | Clases base de cada `<li>` del dropdown. |
|
|
157
165
|
| `selectOptionClass` | `function(isSelected, isHighlighted)` | Ver abajo | Retorna clases dinámicas por opción según su estado. |
|
|
166
|
+
| `SELECT_OPTGROUP` | `string` | `'px-2 pt-1 pb-0.5 text-xs font-semibold uppercase ...'` | Clases del encabezado de un grupo de opciones (`optgroup`). |
|
|
158
167
|
| `SELECT_EMPTY` | `string` | `'px-3 py-1 text-gray-400 cursor-not-allowed'` | Clases del mensaje "Sin registros". |
|
|
159
168
|
|
|
160
169
|
```js
|
|
@@ -353,6 +362,14 @@ Input numérico con control preciso de dígitos, decimales, rango y formato de v
|
|
|
353
362
|
| `validate` | `Boolean \| null` | `null` | |
|
|
354
363
|
| `mclass` | `String` | `null` | |
|
|
355
364
|
|
|
365
|
+
**Comportamiento:**
|
|
366
|
+
- 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`).
|
|
367
|
+
- 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.
|
|
368
|
+
- Al **perder el foco**, si el campo queda vacío o en `0`, se conserva el valor `0` formateado (ej: `"0.00"`), aplicando además los límites `min`/`max`.
|
|
369
|
+
|
|
370
|
+
**Navegación por teclado:**
|
|
371
|
+
- `↑` / `↓` — aumentar/disminuir el valor en unidades, respetando `min`/`max`.
|
|
372
|
+
|
|
356
373
|
------
|
|
357
374
|
|
|
358
375
|
## InputPasswordStyle
|
|
@@ -429,21 +446,34 @@ Select personalizado con dropdown, navegación por teclado y búsqueda por tipeo
|
|
|
429
446
|
```
|
|
430
447
|
|
|
431
448
|
```js
|
|
432
|
-
// Formato
|
|
449
|
+
// Formato del array `list` — lista plana
|
|
433
450
|
const paises = [
|
|
434
451
|
{ value: 1, text: 'México' },
|
|
435
452
|
{ value: 2, text: 'España' },
|
|
436
453
|
{ value: 3, text: 'Argentina' },
|
|
437
454
|
]
|
|
455
|
+
|
|
456
|
+
// El `value` es opcional: si se omite, se usa el `text` como valor
|
|
457
|
+
const colores = [
|
|
458
|
+
{ text: 'Rojo' },
|
|
459
|
+
{ text: 'Verde' },
|
|
460
|
+
]
|
|
461
|
+
|
|
462
|
+
// Lista agrupada — cada grupo tiene un `label` y sus `options`
|
|
463
|
+
const ubicaciones = [
|
|
464
|
+
{ label: 'América', options: [{ value: 1, text: 'México' }, { value: 2, text: 'Argentina' }] },
|
|
465
|
+
{ label: 'Europa', options: [{ value: 3, text: 'España' }, { value: 4, text: 'Francia' }] },
|
|
466
|
+
]
|
|
438
467
|
```
|
|
439
468
|
|
|
440
469
|
| Prop | Tipo | Default | Descripción |
|
|
441
470
|
| ---- | ---- | ------- | ----------- |
|
|
442
471
|
| `modelValue` | `String \| Number \| Object` | — | Valor seleccionado. |
|
|
443
|
-
| `list` | `Array` | `[]` | Array de opciones
|
|
472
|
+
| `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. |
|
|
444
473
|
| `returnValue` | `String` | `'value'` | Qué se emite al seleccionar: `'value'` (item.value), `'text'` (item.text) u `'object'` (el item completo). |
|
|
445
474
|
| `label` | `String` | `''` | |
|
|
446
475
|
| `description` | `String` | `''` | |
|
|
476
|
+
| `wrapOptions` | `Boolean` | `false` | `true` = permite que el texto de cada opción haga salto de línea; `false` = lo trunca con elipsis. |
|
|
447
477
|
| `disabled` | `Boolean` | `false` | |
|
|
448
478
|
| `required` | `Boolean` | `false` | |
|
|
449
479
|
| `validate` | `Boolean \| null` | `null` | |
|
|
@@ -561,8 +591,9 @@ El calendario incluye vistas de días, meses y años, y un botón **Hoy** para n
|
|
|
561
591
|
|
|
562
592
|
**Navegación por teclado:**
|
|
563
593
|
- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
|
|
564
|
-
- `↑` / `↓` — incrementar/decrementar la sección activa
|
|
594
|
+
- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha resultante se ajusta a los límites `min`/`max`)
|
|
565
595
|
- `←` / `→` — mover entre secciones
|
|
596
|
+
- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
|
|
566
597
|
- `Backspace` / `Delete` — limpiar la sección activa
|
|
567
598
|
- Clic en el ícono 📅 — abre/cierra el calendario visual
|
|
568
599
|
|
|
@@ -639,8 +670,9 @@ Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaa
|
|
|
639
670
|
|
|
640
671
|
**Navegación por teclado:**
|
|
641
672
|
- Escribe los dígitos y el foco avanza automáticamente: día → mes → año → hora → minuto → a.m./p.m.
|
|
642
|
-
- `↑` / `↓` — incrementar/decrementar la sección activa
|
|
673
|
+
- `↑` / `↓` — incrementar/decrementar la sección activa (la fecha se ajusta a los límites `min`/`max`)
|
|
643
674
|
- `←` / `→` — mover entre secciones
|
|
675
|
+
- `Tab` / `Shift + Tab` — mover entre secciones (al llegar al extremo, el foco sale del campo)
|
|
644
676
|
- `Backspace` / `Delete` — limpiar la sección activa
|
|
645
677
|
- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
|
|
646
678
|
- Clic en el ícono 📅 — abre/cierra el picker
|
|
@@ -774,6 +806,99 @@ El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay
|
|
|
774
806
|
|
|
775
807
|
------
|
|
776
808
|
|
|
809
|
+
## ModalStyle
|
|
810
|
+
|
|
811
|
+
Ventana modal con `Teleport` al `body`, animaciones de entrada/salida, bloqueo del scroll de fondo y cierre por tecla `Escape`. El estado de apertura se controla con `v-model`.
|
|
812
|
+
|
|
813
|
+
```vue
|
|
814
|
+
<ButtonStyle @click="showModal = true">Abrir modal</ButtonStyle>
|
|
815
|
+
|
|
816
|
+
<ModalStyle v-model="showModal" title="Detalles" size="lg">
|
|
817
|
+
<p>Contenido del modal...</p>
|
|
818
|
+
|
|
819
|
+
<template #footer="{ close }">
|
|
820
|
+
<div class="flex justify-end gap-2">
|
|
821
|
+
<ButtonStyle class="px-4 py-2 border rounded" @click="close">Cerrar</ButtonStyle>
|
|
822
|
+
</div>
|
|
823
|
+
</template>
|
|
824
|
+
</ModalStyle>
|
|
825
|
+
```
|
|
826
|
+
|
|
827
|
+
| Prop | Tipo | Default | Descripción |
|
|
828
|
+
| ---- | ---- | ------- | ----------- |
|
|
829
|
+
| `modelValue` | `Boolean` | `false` | Controla la visibilidad del modal (`v-model`). |
|
|
830
|
+
| `title` | `String` | `'Sin titulo asignado'` | Título mostrado en el header (si no se usa el slot `title`). |
|
|
831
|
+
| `size` | `String` | `'lg'` | Ancho máximo: `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`, `'3xl'`, `'4xl'`, `'5xl'`, `'full'`. |
|
|
832
|
+
| `showCloseButton` | `Boolean` | `true` | Muestra el botón `✕` de cierre en el header. |
|
|
833
|
+
| `closeOnEscape` | `Boolean` | `true` | Permite cerrar el modal con la tecla `Escape`. |
|
|
834
|
+
| `closeOnOverlayClick` | `Boolean` | `true` | Permite cerrar el modal al hacer clic en el fondo. |
|
|
835
|
+
|
|
836
|
+
**Slots:**
|
|
837
|
+
- `title` — reemplaza el título del header.
|
|
838
|
+
- *default* — contenido principal. Recibe `{ close }` para cerrar desde dentro.
|
|
839
|
+
- `footer` — pie del modal (solo se renderiza si se provee). Recibe `{ close }`.
|
|
840
|
+
|
|
841
|
+
**Eventos:**
|
|
842
|
+
- `update:modelValue` — emite `false` al cerrarse.
|
|
843
|
+
|
|
844
|
+
------
|
|
845
|
+
|
|
846
|
+
## AlertStyle (notificaciones tipo toast)
|
|
847
|
+
|
|
848
|
+
Utilidad JavaScript (no es un componente) para mostrar notificaciones flotantes que se auto-descartan. Disponible como propiedad global `$alertstyle` tras instalar el plugin, o mediante importación directa.
|
|
849
|
+
|
|
850
|
+
```js
|
|
851
|
+
// Vía global property (Options API)
|
|
852
|
+
this.$alertstyle.success('Guardado', 'Los cambios se guardaron correctamente')
|
|
853
|
+
|
|
854
|
+
// Vía importación directa
|
|
855
|
+
import { AlertStyle } from '@luis-angel-martin-dzul/input-styles'
|
|
856
|
+
AlertStyle.error('Error', 'No se pudo completar la operación')
|
|
857
|
+
```
|
|
858
|
+
|
|
859
|
+
| Método | Parámetros | Descripción |
|
|
860
|
+
| ------ | ---------- | ----------- |
|
|
861
|
+
| `success(title, message?)` | `String, String` | Notificación verde de éxito. |
|
|
862
|
+
| `error(title, message?)` | `String, String` | Notificación roja de error. |
|
|
863
|
+
| `warning(title, message?)` | `String, String` | Notificación de advertencia. |
|
|
864
|
+
| `info(title, message?)` | `String, String` | Notificación informativa. |
|
|
865
|
+
| `neutral(title, message?)` | `String, String` | Notificación neutral. |
|
|
866
|
+
|
|
867
|
+
Cada notificación se cierra automáticamente a los 4 segundos o manualmente con su botón `×`.
|
|
868
|
+
|
|
869
|
+
------
|
|
870
|
+
|
|
871
|
+
## DialogStyle (diálogos modales)
|
|
872
|
+
|
|
873
|
+
Utilidad JavaScript para diálogos de confirmación, información y carga, con interfaz fluida (encadenable). Disponible como global `$dialogstyle` o por importación directa.
|
|
874
|
+
|
|
875
|
+
```js
|
|
876
|
+
// Confirmación
|
|
877
|
+
this.$dialogstyle.confirm('¿Eliminar registro?', 'Esta acción no se puede deshacer')
|
|
878
|
+
.onAccept(() => eliminar())
|
|
879
|
+
.onCancel(() => console.log('Cancelado'))
|
|
880
|
+
|
|
881
|
+
// Información (un solo botón)
|
|
882
|
+
this.$dialogstyle.info('Operación completada')
|
|
883
|
+
.onConfirm(() => console.log('Aceptado'))
|
|
884
|
+
|
|
885
|
+
// Carga (bloqueante, se cierra manualmente)
|
|
886
|
+
const loader = this.$dialogstyle.loading('Procesando...', 'Espere un momento')
|
|
887
|
+
loader.updateMessage('Casi listo...')
|
|
888
|
+
loader.close()
|
|
889
|
+
```
|
|
890
|
+
|
|
891
|
+
| Método | Retorna | Descripción |
|
|
892
|
+
| ------ | ------- | ----------- |
|
|
893
|
+
| `confirm(title, description?)` | controlador con `.onAccept(cb)` / `.onCancel(cb)` | Diálogo con botones Aceptar / Cancelar. |
|
|
894
|
+
| `info(title, description?)` | controlador con `.onConfirm(cb)` | Diálogo informativo con un solo botón Aceptar. |
|
|
895
|
+
| `loading(title, description?)` | `{ close, updateTitle, updateMessage }` | Diálogo de carga con spinner; se cierra con `.close()`. |
|
|
896
|
+
| `finish(immediate?)` | `Promise` | Cierra el diálogo abierto manualmente. |
|
|
897
|
+
|
|
898
|
+
> 💡 La tecla `Escape` no cierra el diálogo (hace una animación de "shake"), para forzar una decisión explícita del usuario.
|
|
899
|
+
|
|
900
|
+
------
|
|
901
|
+
|
|
777
902
|
## Ejemplo de uso completo
|
|
778
903
|
|
|
779
904
|
```vue
|
package/dist/input-styles.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
.alert-container{
|
|
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-2123222a]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-2123222a]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-2123222a]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-2123222a],input[type=datetime-local][data-v-2123222a],input[type=time][data-v-2123222a]{appearance:none;-moz-appearance:textfield}input[type=date][data-v-58705dfd]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-58705dfd]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-58705dfd]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-58705dfd],input[type=datetime-local][data-v-58705dfd],input[type=time][data-v-58705dfd]{appearance:none;-moz-appearance:textfield}input[type=date][data-v-b1413282]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-b1413282]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-b1413282]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-b1413282],input[type=datetime-local][data-v-b1413282],input[type=time][data-v-b1413282]{appearance:none;-moz-appearance:textfield}
|
|
2
|
+
/*$vite$:1*/
|