@luis-angel-martin-dzul/vue-input-styles 0.0.43 → 0.0.45

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 CHANGED
@@ -13,7 +13,7 @@ La instalación se realiza mediante **npm** utilizando el registro privado de Gi
13
13
  ### 1️⃣ Instalar el paquete
14
14
 
15
15
  ```bash
16
- npm i @luis-angel-martin-dzul/vue-input-styles
16
+ npm i @luis-angel-martin-dzul/vue-input-styles@latest
17
17
  ```
18
18
 
19
19
  ### 🚀 Uso básico
@@ -53,53 +53,50 @@ module.exports = {
53
53
  },
54
54
 
55
55
  safelist: [
56
- // =============================
57
- // LAYOUT / DISPLAY
58
- // =============================
56
+ /* =============================
57
+ * DISPLAY / LAYOUT
58
+ * ============================= */
59
59
  "block",
60
60
  "inline-flex",
61
61
  "flex",
62
+ "grid",
63
+ "relative",
64
+ "absolute",
65
+ "overflow-auto",
66
+ "overflow-hidden",
67
+ "overflow-x-auto",
68
+ "min-w-full",
69
+ "w-full",
70
+ "h-full",
71
+ "h-min",
62
72
  "flex-1",
63
73
  "flex-col",
64
- "grid",
65
- "grid-cols-2",
66
-
67
- // =============================
68
- // ALIGNMENT / SPACING
69
- // =============================
74
+ "flex-row",
70
75
  "items-center",
76
+ "items-start",
77
+ "items-end",
71
78
  "justify-center",
72
79
  "justify-between",
73
80
  "gap-1",
74
81
  "gap-2",
82
+ "gap-3",
83
+ "gap-6",
75
84
  "space-y-1",
76
85
 
77
- // =============================
78
- // SIZING
79
- // =============================
80
- "w-full",
81
- "min-w-full",
82
- "w-4",
83
- "w-5",
84
- "w-6",
85
- "w-9",
86
- "w-11",
87
- "h-3",
88
- "h-4",
89
- "h-5",
90
- "h-6",
91
- "h-9",
92
- "h-min",
93
- "h-[2px]",
94
- "h-[600px]",
95
- "max-h-48",
96
-
97
- // =============================
98
- // PADDING / MARGIN
99
- // =============================
100
- "px-1",
86
+ /* =============================
87
+ * GRID
88
+ * ============================= */
89
+ "grid-cols-2",
90
+ "grid-cols-4",
91
+
92
+ /* =============================
93
+ * SPACING
94
+ * ============================= */
95
+ "px-2",
101
96
  "px-3",
102
97
  "px-4",
98
+ "px-2.5",
99
+ "py-1",
103
100
  "py-1.5",
104
101
  "py-2",
105
102
  "py-10",
@@ -107,271 +104,135 @@ module.exports = {
107
104
  "pl-10",
108
105
  "pr-3",
109
106
  "mx-3",
107
+ "mt-0.5",
108
+ "mb-1",
110
109
 
111
- // =============================
112
- // POSITION / TRANSFORM
113
- // =============================
114
- "relative",
115
- "absolute",
116
- "inset-0",
117
- "-top-5",
118
- "left-1",
119
- "left-3",
120
- "top-1/2",
121
- "-translate-y-1/2",
122
- "translate-x-0",
123
- "translate-x-full",
124
- "transform",
125
-
126
- // =============================
127
- // OVERFLOW
128
- // =============================
129
- "overflow-auto",
130
- "overflow-x-auto",
131
-
132
- // =============================
133
- // TYPOGRAPHY
134
- // =============================
135
- "truncate",
136
- "uppercase",
137
- "whitespace-nowrap",
138
- "text-left",
139
- "text-center",
110
+ /* =============================
111
+ * TEXT
112
+ * ============================= */
140
113
  "text-xs",
141
114
  "text-sm",
142
- "text-3xl",
143
- "font-medium",
144
- "font-semibold",
145
-
146
- // =============================
147
- // CURSOR / INTERACTION
148
- // =============================
149
- "cursor-pointer",
150
- "cursor-default",
151
- "cursor-not-allowed",
152
- "pointer-events-none",
153
- "select-none",
154
- "resize-none",
155
-
156
- // =============================
157
- // BORDER / RADIUS
158
- // =============================
159
- "border",
160
- "border-b",
161
- "border-2",
162
- "rounded",
163
- "rounded-md",
164
- "rounded-l",
165
- "rounded-r",
166
-
167
- // =============================
168
- // SHADOW / EFFECTS
169
- // =============================
170
- "shadow",
171
- "mix-blend-overlay",
172
- "animate-pulse",
173
-
174
- // =============================
175
- // TRANSITIONS
176
- // =============================
177
- "transition-all",
178
- "transition-colors",
179
- "duration-200",
180
- "duration-300",
181
-
182
- // =============================
183
- // TEXT COLORS
184
- // =============================
185
- "text-white",
186
- "text-gray-200",
187
115
  "text-gray-400",
188
116
  "text-gray-500",
189
117
  "text-gray-600",
190
118
  "text-gray-700",
191
119
  "text-gray-800",
192
-
193
- "text-slate-700",
194
- "text-emerald-700",
195
- "text-sky-700",
196
- "text-rose-700",
197
- "text-amber-700",
198
-
199
- "text-green-600",
200
- "text-green-700",
201
- "text-blue-400",
202
- "text-blue-700",
203
- "text-red-400",
204
- "text-red-700",
120
+ "text-white",
205
121
  "text-red-800",
206
- "text-yellow-600",
207
- "text-yellow-700",
122
+ "font-medium",
123
+ "font-semibold",
124
+ "uppercase",
125
+ "truncate",
126
+ "whitespace-nowrap",
127
+ "text-left",
128
+ "text-center",
208
129
 
209
- // =============================
210
- // BACKGROUNDS
211
- // =============================
130
+ /* =============================
131
+ * BACKGROUNDS
132
+ * ============================= */
212
133
  "bg-white",
213
- "bg-white/20",
214
-
215
134
  "bg-gray-50",
216
135
  "bg-gray-100",
217
136
  "bg-gray-200",
218
137
  "bg-gray-300",
219
- "bg-gray-600",
220
- "bg-gray-700",
221
138
  "bg-gray-800",
222
139
 
223
- "bg-slate-50",
224
140
  "bg-slate-600",
225
141
  "bg-slate-700",
226
142
 
227
- "bg-emerald-50",
228
- "bg-emerald-400",
229
143
  "bg-emerald-600",
230
144
  "bg-emerald-700",
231
145
 
232
- "bg-sky-50",
233
146
  "bg-sky-600",
234
147
  "bg-sky-700",
235
148
 
236
- "bg-rose-50",
237
149
  "bg-rose-600",
238
150
  "bg-rose-700",
239
151
 
240
- "bg-amber-50",
241
- "bg-amber-200",
242
152
  "bg-amber-600",
243
153
  "bg-amber-700",
244
154
 
245
- "bg-green-500",
246
- "bg-green-600",
247
- "bg-green-700",
248
-
249
- "bg-blue-600",
250
- "bg-blue-700",
251
-
252
- "bg-red-300",
253
- "bg-red-400",
254
- "bg-red-600",
255
- "bg-red-700",
256
-
257
- "bg-yellow-500",
258
- "bg-yellow-600",
259
- "bg-yellow-700",
260
-
261
- "bg-indigo-300",
262
- "bg-indigo-400",
263
-
264
- // =============================
265
- // HOVER STATES
266
- // =============================
267
- "hover:bg-gray-100",
268
- "hover:bg-gray-200",
269
- "hover:bg-gray-800",
270
-
271
- "hover:bg-slate-700",
272
- "hover:bg-emerald-700",
273
- "hover:bg-sky-700",
274
- "hover:bg-rose-700",
275
- "hover:bg-amber-700",
276
-
277
- "hover:bg-green-100",
278
- "hover:bg-blue-100",
279
- "hover:bg-red-100",
280
- "hover:bg-yellow-100",
281
-
282
- // =============================
283
- // BORDERS (COLORS)
284
- // =============================
155
+ /* =============================
156
+ * BORDERS
157
+ * ============================= */
158
+ "border",
159
+ "border-2",
285
160
  "border-gray-200",
286
161
  "border-gray-300",
287
- "border-gray-400/70",
288
- "border-gray-500/60",
289
162
  "border-gray-600",
290
- "border-gray-800",
291
-
163
+ "border-gray-700",
292
164
  "border-slate-700",
293
165
  "border-emerald-700",
294
166
  "border-sky-700",
295
167
  "border-rose-700",
296
168
  "border-amber-700",
169
+ "rounded",
170
+ "rounded-l",
171
+ "rounded-r",
172
+ "rounded-full",
297
173
 
298
- "border-green-300",
299
- "border-green-500",
300
- "border-green-700",
301
-
302
- "border-blue-300",
303
- "border-blue-500",
304
- "border-blue-700",
174
+ /* =============================
175
+ * EFFECTS
176
+ * ============================= */
177
+ "shadow",
178
+ "shadow-sm",
179
+ "shadow-md",
180
+ "opacity-60",
181
+ "opacity-90",
182
+ "cursor-pointer",
183
+ "cursor-default",
184
+ "select-none",
185
+ "-translate-y-1/2",
305
186
 
306
- "border-red-300",
307
- "border-red-500",
308
- "border-red-700",
187
+ /* =============================
188
+ * POSITION
189
+ * ============================= */
190
+ "left-0",
191
+ "right-0",
192
+ "left-2",
193
+ "top-1/2",
194
+ "inset-0",
195
+ "z-10",
196
+
197
+ /* =============================
198
+ * FORMS
199
+ * ============================= */
200
+ "accent-indigo-600",
201
+ "focus:outline-none",
202
+ "focus:ring-2",
203
+ "focus:ring-indigo-200",
204
+ "disabled:bg-gray-100",
205
+ "disabled:text-gray-600",
206
+ "disabled:opacity-60",
207
+ "disabled:cursor-not-allowed",
208
+ "disabled:pointer-events-none",
309
209
 
310
- "border-yellow-300",
311
- "border-yellow-500",
312
- "border-yellow-600",
210
+ /* =============================
211
+ * HOVER / ENABLED
212
+ * ============================= */
213
+ "hover:bg-gray-50",
214
+ "hover:bg-gray-100",
313
215
 
314
- // =============================
315
- // ENABLED STATES
316
- // =============================
317
216
  "enabled:hover:bg-slate-700",
318
217
  "enabled:hover:bg-emerald-700",
319
218
  "enabled:hover:bg-sky-700",
320
219
  "enabled:hover:bg-rose-700",
321
220
  "enabled:hover:bg-amber-700",
322
221
 
323
- "enabled:hover:bg-slate-50",
324
- "enabled:hover:bg-emerald-50",
325
- "enabled:hover:bg-sky-50",
326
- "enabled:hover:bg-rose-50",
327
- "enabled:hover:bg-amber-50",
328
-
329
- // =============================
330
- // DISABLED STATES
331
- // =============================
332
- "disabled:opacity-60",
333
- "disabled:opacity-80",
334
- "disabled:pointer-events-none",
335
- "disabled:cursor-not-allowed",
336
-
337
- "disabled:text-gray-100",
338
- "disabled:text-gray-200",
339
- "disabled:text-gray-600",
340
-
341
- "disabled:text-green-600",
342
- "disabled:text-blue-400",
343
- "disabled:text-red-400",
344
- "disabled:text-yellow-600",
222
+ /* =============================
223
+ * ANIMATION
224
+ * ============================= */
225
+ "transition-colors",
226
+ "transition-all",
227
+ "duration-200",
228
+ "duration-300",
229
+ "animate-pulse",
345
230
 
346
- "disabled:bg-gray-50",
347
- "disabled:bg-gray-100",
348
- "disabled:bg-gray-400",
349
-
350
- "disabled:bg-slate-50",
351
- "disabled:bg-emerald-50",
352
- "disabled:bg-emerald-400",
353
- "disabled:bg-sky-50",
354
- "disabled:bg-blue-50",
355
- "disabled:bg-blue-300",
356
- "disabled:bg-rose-50",
357
- "disabled:bg-red-50",
358
- "disabled:bg-red-300",
359
- "disabled:bg-amber-50",
360
- "disabled:bg-amber-200",
361
-
362
- "disabled:border-gray-400",
363
- "disabled:border-emerald-400",
364
- "disabled:border-blue-400",
365
- "disabled:border-red-400",
366
- "disabled:border-yellow-400",
367
-
368
- // =============================
369
- // EXTRA
370
- // =============================
371
- "stroke-current",
372
- "bg-gradient-to-r",
373
- "from-gray-200",
374
- "to-gray-300",
231
+ /* =============================
232
+ * MIX / UTILITIES
233
+ * ============================= */
234
+ "pointer-events-none",
235
+ "mix-blend-overlay",
375
236
  ],
376
237
 
377
238
  plugins: [],
@@ -409,23 +270,24 @@ Es un botón estilizado que permite personalizar rápidamente su apariencia usan
409
270
 
410
271
  | Propiedad | Tipo | Descripción |
411
272
  | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
412
- | class | String | Define el tipo de estilo del botón de forma manual, `"Nota: Incluye un disabled y un opacity por defecto"` |
273
+ | type | String | Define el compartamiento del boton, `"button"`, `"submit"`. _(Por defecto: `"button"`)_ |
274
+ | class | String | Define el tipo de estilo del botón de forma manual. |
413
275
  | variant | String | Define el tipo de estilo del botón. Ejemplo: `"solid"` (relleno), `"outline"`, etc. _(Por defecto: `"solid"`)_ |
414
276
  | color | String | Establece el color principal del botón. Ejemplo: `"gray"`, `"blue"`, `"red"`, `"green"`, `"yellow"`. _(Por defecto: `"gray"`)_ |
415
277
  | disabled | Boolean | Desactiva el botón, bloqueando su interacción y aplicando un estilo visual correspondiente. _(Por defecto: `false`)_ |
416
278
  | delay | String | Tiempo (seg) que estara desactivado el boton, despues de presionar. _(Por defecto: `1.5`)_ |
417
- | full | Boolean | Hace que el botón ocupe todo el ancho disponible (100%). _(Por defecto: `false`)_ |
418
279
 
419
280
  #### ✔️ Ejemplo de uso
420
281
 
421
282
  ```bash
422
283
  <button-style
284
+ type="submit"
423
285
  color="gray"
424
286
  variant="outline"
425
- full="true"
426
287
  delay="2"
427
288
  disabled>
428
- Boton</button-style>
289
+ Boton
290
+ </button-style>
429
291
  ```
430
292
 
431
293
  ### ☑️ CheckStyle — Funcionamiento básico
@@ -502,7 +364,7 @@ Es un componente de selección de fecha y/o hora con diferentes modos de uso. Pe
502
364
  | ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |
503
365
  | modelValue | String | Valor vinculado mediante `v-model`. Se recibe y devuelve una cadena formateada. |
504
366
  | disabled | Boolean | Desactiva el componente e impide interacción. _(Por defecto: `false`)_ |
505
- | required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
367
+ | required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
506
368
  | mode | String | Define el tipo de selector: `"date"`, `"time"`, `"datetime"`, `"datetime2"`. _(Por defecto: `"datetime"`)_ |
507
369
  | label | String | Etiqueta del campo mostrada sobre el input. _(Por defecto: `"Seleccionar fecha"`)_ |
508
370
  | secondsMode | String | Configura los segundos: `"default"` (≈01) o `"max"` (≈59). _(Por defecto: `"default"`)_ |
@@ -532,8 +394,8 @@ Ideal para montos, precios, porcentajes y cantidades numéricas.
532
394
  | modelValue | String | Valor vinculado mediante `v-model`. Se formatea automáticamente según los decimales configurados. _(Por defecto: `""`)_ |
533
395
  | label | String | Etiqueta visible sobre el input. _(Por defecto: `""`)_ |
534
396
  | placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
535
- | decimals | Number | Número de decimales permitidos. _(Por defecto: `2`)_ |
536
- | maxlength | String | Límite máximo de caracteres del input. _(Por defecto: `14` Decimales incluidos) _ |
397
+ | digits | String | Número de enteros permitidos. _(Por defecto: `10`)_ |
398
+ | decimals | String | Número de decimales permitidos. _(Por defecto: `2`)_ |
537
399
  | disabled | Boolean | Desactiva el campo y evita que pueda editarse. _(Por defecto: `false`)_ |
538
400
  | required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
539
401
 
@@ -543,9 +405,9 @@ Ideal para montos, precios, porcentajes y cantidades numéricas.
543
405
  <input-decimal-style
544
406
  v-model="precio"
545
407
  label="Precio del producto"
546
- placeholder="0"
408
+ placeholder="Introduzca el precio del producto"
409
+ digits="10"
547
410
  decimals="2"
548
- maxlength="14"
549
411
  disabled
550
412
  required
551
413
  />
@@ -561,9 +423,9 @@ Es un campo de texto estándar mejorado, útil para capturar valores simples com
561
423
  | ----------- | ------- | ----------------------------------------------------------------------------------------------------------- |
562
424
  | modelValue | String | Valor vinculado mediante `v-model`. _(Por defecto: `""`)_ |
563
425
  | label | String | Texto que aparece como etiqueta del input. _(Por defecto: `""`)_ |
426
+ | placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
564
427
  | type | String | Tipo de input HTML. Ejemplos: `"text"`, `"number"`, `"email"`, `"password"`, etc. _(Por defecto: `"text"`)_ |
565
428
  | maxlength | String | Límite máximo de caracteres del input. _(Por defecto: `null` Sin limites) _ |
566
- | placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
567
429
  | disabled | Boolean | Desactiva el campo e impide su edición. _(Por defecto: `false`)_ |
568
430
  | required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
569
431
 
@@ -718,4 +580,4 @@ El método recibe dos parámetros:
718
580
  - Primer parámetro (título): Es el encabezado o título de la alerta.
719
581
  - Segundo parámetro (mensaje/descripción opcional): Es el texto secundario que explica qué está ocurriendo.
720
582
 
721
- ![Última actualización](https://img.shields.io/badge/Actualizado-22%20de%20Dic%20del%202025-blue)
583
+ ![Última actualización](https://img.shields.io/badge/Actualizado-13%20de%20Ene%20del%202026-blue)