@luis-angel-martin-dzul/input-styles 0.0.15 → 0.0.20
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 +85 -19
- package/dist/input-styles.css +2 -1
- package/dist/input-yuc.es.js +6429 -12785
- package/dist/input-yuc.umd.js +12 -12
- package/package.json +5 -6
package/README.md
CHANGED
|
@@ -6,7 +6,8 @@ Incluye componentes de inputs, selects, botones, paginación y más, estilizados
|
|
|
6
6
|
|
|
7
7
|
------
|
|
8
8
|
|
|
9
|
-
|
|
10
|
+
|
|
10
11
|
|
|
11
12
|
------
|
|
12
13
|
|
|
@@ -18,12 +19,6 @@ La librería se distribuye mediante **npm**:
|
|
|
18
19
|
npm install @luis-angel-martin-dzul/input-styles
|
|
19
20
|
```
|
|
20
21
|
|
|
21
|
-
### Dependencias peer requeridas
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
npm install vue@^3.3.0 v-calendar@^3.0.0
|
|
25
|
-
```
|
|
26
|
-
|
|
27
22
|
------
|
|
28
23
|
|
|
29
24
|
# 🚀 Uso en Vue + Vite
|
|
@@ -34,14 +29,12 @@ En `main.js` o `main.ts`:
|
|
|
34
29
|
import { createApp } from 'vue'
|
|
35
30
|
import App from './App.vue'
|
|
36
31
|
|
|
37
|
-
import 'v-calendar/style.css'
|
|
38
32
|
import '@luis-angel-martin-dzul/input-styles/style.css'
|
|
39
33
|
import InputStyle from '@luis-angel-martin-dzul/input-styles'
|
|
40
34
|
|
|
41
35
|
const app = createApp(App)
|
|
42
36
|
|
|
43
|
-
app.
|
|
44
|
-
app.use(VCalendar, { locale: 'es', firstDayOfWeek: 1 })
|
|
37
|
+
app.use(InputStyle)
|
|
45
38
|
app.mount('#app')
|
|
46
39
|
```
|
|
47
40
|
|
|
@@ -64,17 +57,32 @@ La librería expone un sistema de **tokens de estilo configurables** que permite
|
|
|
64
57
|
|
|
65
58
|
Los estilos se configuran **antes de montar la app**, importando `configureStyles` directamente.
|
|
66
59
|
|
|
60
|
+
## Opción A — vía `app.use` (recomendado)
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
import VueInputYuc from '@luis-angel-martin-dzul/input-styles'
|
|
64
|
+
|
|
65
|
+
app.use(VueInputYuc, {
|
|
66
|
+
styles: {
|
|
67
|
+
INPUT_BASE: 'w-full px-0 py-2 bg-transparent border-b focus:outline-none ...',
|
|
68
|
+
ICON_VALID: 'text-emerald-500',
|
|
69
|
+
// solo los tok ens que quieras cambiar
|
|
70
|
+
}
|
|
71
|
+
})
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Opción B — importación directa
|
|
75
|
+
|
|
67
76
|
```js
|
|
68
77
|
import { configureStyles } from '@luis-angel-martin-dzul/input-styles'
|
|
69
78
|
|
|
70
79
|
configureStyles({
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
// solo los tokens que quieras cambiar
|
|
80
|
+
LOADER_ARC_STROKE: '#3B82F6',
|
|
81
|
+
REQUIRED_ASTERISK: 'text-red-500',
|
|
74
82
|
})
|
|
75
83
|
```
|
|
76
84
|
|
|
77
|
-
|
|
85
|
+
⚠️ `configureStyles()` debe llamarse **antes** de que los componentes se monten. Los cambios no son reactivos después del montaje inicial.
|
|
78
86
|
|
|
79
87
|
------
|
|
80
88
|
|
|
@@ -521,7 +529,9 @@ Toggle switch estilizado.
|
|
|
521
529
|
|
|
522
530
|
## InputDateStyle
|
|
523
531
|
|
|
524
|
-
Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual (
|
|
532
|
+
Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secciones y calendario visual nativo (sin dependencias externas). El valor se emite en formato `YYYY-MM-DD`.
|
|
533
|
+
|
|
534
|
+
El calendario incluye vistas de días, meses y años, y un botón **Hoy** para navegar rápidamente a la fecha actual.
|
|
525
535
|
|
|
526
536
|
```vue
|
|
527
537
|
<InputDateStyle
|
|
@@ -540,8 +550,9 @@ Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secci
|
|
|
540
550
|
| `description` | `String` | `''` | |
|
|
541
551
|
| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable en el calendario (formato `YYYY-MM-DD`). |
|
|
542
552
|
| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable en el calendario (formato `YYYY-MM-DD`). |
|
|
543
|
-
| `disabledDates` | `Array
|
|
553
|
+
| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o objetos `Date`. |
|
|
544
554
|
| `disabled` | `Boolean` | `false` | |
|
|
555
|
+
| `readonly` | `Boolean` | `false` | Solo lectura: muestra el valor pero bloquea la edición por teclado. |
|
|
545
556
|
| `required` | `Boolean` | `false` | |
|
|
546
557
|
| `validate` | `Boolean \| null` | `null` | |
|
|
547
558
|
| `mclass` | `String` | `null` | |
|
|
@@ -550,6 +561,7 @@ Selector de fecha con máscara `dd/mm/aaaa`, navegación por teclado entre secci
|
|
|
550
561
|
|
|
551
562
|
**Navegación por teclado:**
|
|
552
563
|
- Escribe los dígitos y el foco avanza automáticamente entre día → mes → año
|
|
564
|
+
- `↑` / `↓` — incrementar/decrementar la sección activa
|
|
553
565
|
- `←` / `→` — mover entre secciones
|
|
554
566
|
- `Backspace` / `Delete` — limpiar la sección activa
|
|
555
567
|
- Clic en el ícono 📅 — abre/cierra el calendario visual
|
|
@@ -588,6 +600,53 @@ Selector de hora con picker de columnas scrollables. Soporta formato 12h (AM/PM)
|
|
|
588
600
|
|
|
589
601
|
------
|
|
590
602
|
|
|
603
|
+
## InputDateTimeStyle
|
|
604
|
+
|
|
605
|
+
Selector combinado de fecha y hora con máscara `dd/mm/aaaa hh:mm` (o `dd/mm/aaaa hh:mm a.m.` en modo 12h), calendario visual nativo y picker de columnas scrollables para la hora. El valor se emite en formato `YYYY-MM-DDTHH:mm:00.000`.
|
|
606
|
+
|
|
607
|
+
```vue
|
|
608
|
+
<InputDateTimeStyle
|
|
609
|
+
v-model="fechaHora"
|
|
610
|
+
label="Fecha y hora"
|
|
611
|
+
min="2000-01-01"
|
|
612
|
+
max="2100-12-31"
|
|
613
|
+
:is24h="true"
|
|
614
|
+
:validate="validate"
|
|
615
|
+
/>
|
|
616
|
+
```
|
|
617
|
+
|
|
618
|
+
| Prop | Tipo | Default | Descripción |
|
|
619
|
+
| ---- | ---- | ------- | ----------- |
|
|
620
|
+
| `modelValue` | `String \| Date` | — | Valor en formato `YYYY-MM-DDTHH:mm:00.000` o `Date`. |
|
|
621
|
+
| `label` | `String` | `''` | |
|
|
622
|
+
| `description` | `String` | `''` | |
|
|
623
|
+
| `min` | `String` | `'1900-01-01'` | Fecha mínima seleccionable (formato `YYYY-MM-DD`). |
|
|
624
|
+
| `max` | `String` | `'2100-12-31'` | Fecha máxima seleccionable (formato `YYYY-MM-DD`). |
|
|
625
|
+
| `disabledDates` | `Array` | `[]` | Fechas deshabilitadas. Array de strings `'YYYY-MM-DD'` o `Date`. |
|
|
626
|
+
| `is24h` | `Boolean` | `false` | `true` = formato 24h, `false` = formato 12h con selector a.m./p.m. |
|
|
627
|
+
| `disabled` | `Boolean` | `false` | |
|
|
628
|
+
| `readonly` | `Boolean` | `false` | Solo lectura. |
|
|
629
|
+
| `required` | `Boolean` | `false` | |
|
|
630
|
+
| `validate` | `Boolean \| null` | `null` | |
|
|
631
|
+
| `mclass` | `String` | `null` | |
|
|
632
|
+
|
|
633
|
+
**Valor emitido:** `'YYYY-MM-DDTHH:mm:00.000'` (string) o `''` si la fecha/hora es inválida o está vacía.
|
|
634
|
+
|
|
635
|
+
**Comportamiento del picker:**
|
|
636
|
+
- El calendario permanece abierto al seleccionar la fecha, para que puedas ajustar también la hora.
|
|
637
|
+
- El selector de hora embebido en el picker usa las mismas columnas scrollables que `InputTimeStyle`.
|
|
638
|
+
- Botón **Ahora** — establece la fecha y hora actuales de un solo clic.
|
|
639
|
+
|
|
640
|
+
**Navegación por teclado:**
|
|
641
|
+
- 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
|
|
643
|
+
- `←` / `→` — mover entre secciones
|
|
644
|
+
- `Backspace` / `Delete` — limpiar la sección activa
|
|
645
|
+
- `a` / `p` — cambiar entre a.m. y p.m. (solo modo 12h)
|
|
646
|
+
- Clic en el ícono 📅 — abre/cierra el picker
|
|
647
|
+
|
|
648
|
+
------
|
|
649
|
+
|
|
591
650
|
## InputFileUploadStyle
|
|
592
651
|
|
|
593
652
|
Botón para adjuntar archivos con validación de tamaño y formato.
|
|
@@ -758,6 +817,13 @@ El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay
|
|
|
758
817
|
:validate="validaciones.fecha"
|
|
759
818
|
/>
|
|
760
819
|
|
|
820
|
+
<InputDateTimeStyle
|
|
821
|
+
v-model="form.fechaHora"
|
|
822
|
+
label="Fecha y hora"
|
|
823
|
+
:is24h="true"
|
|
824
|
+
:validate="validaciones.fechaHora"
|
|
825
|
+
/>
|
|
826
|
+
|
|
761
827
|
<InputTimeStyle
|
|
762
828
|
v-model="form.hora"
|
|
763
829
|
label="Hora"
|
|
@@ -784,18 +850,18 @@ El paginador muestra hasta 7 botones con elipsis (`...`) inteligentes cuando hay
|
|
|
784
850
|
import { ref } from 'vue'
|
|
785
851
|
import {
|
|
786
852
|
InputTextStyle, InputNumberStyle, InputPasswordStyle,
|
|
787
|
-
SelectStyle, InputDateStyle, InputTimeStyle,
|
|
853
|
+
SelectStyle, InputDateStyle, InputDateTimeStyle, InputTimeStyle,
|
|
788
854
|
InputCheckStyle, ButtonStyle
|
|
789
855
|
} from '@luis-angel-martin-dzul/input-styles'
|
|
790
856
|
|
|
791
857
|
const form = ref({
|
|
792
858
|
nombre: '', monto: '', password: '',
|
|
793
|
-
pais: null, fecha: '', hora: '', acepta: false
|
|
859
|
+
pais: null, fecha: '', fechaHora: '', hora: '', acepta: false
|
|
794
860
|
})
|
|
795
861
|
|
|
796
862
|
const validaciones = ref({
|
|
797
863
|
nombre: null, monto: null, password: null,
|
|
798
|
-
pais: null, fecha: null
|
|
864
|
+
pais: null, fecha: null, fechaHora: null
|
|
799
865
|
})
|
|
800
866
|
|
|
801
867
|
const paises = [
|
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-327f156b]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local][data-v-327f156b]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time][data-v-327f156b]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date][data-v-327f156b],input[type=datetime-local][data-v-327f156b],input[type=time][data-v-327f156b]{appearance:none;-moz-appearance:textfield}
|
|
2
|
+
/*$vite$:1*/
|