@luis-angel-martin-dzul/vue-input-styles 0.0.44 → 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 +115 -254
- package/dist/vue-input-styles.es.js +440 -445
- package/dist/vue-input-styles.umd.js +4 -4
- package/package.json +1 -1
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
|
-
|
|
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
|
-
"
|
|
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
|
-
|
|
79
|
-
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"
|
|
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
|
-
|
|
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
|
-
"
|
|
207
|
-
"
|
|
122
|
+
"font-medium",
|
|
123
|
+
"font-semibold",
|
|
124
|
+
"uppercase",
|
|
125
|
+
"truncate",
|
|
126
|
+
"whitespace-nowrap",
|
|
127
|
+
"text-left",
|
|
128
|
+
"text-center",
|
|
208
129
|
|
|
209
|
-
|
|
210
|
-
|
|
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
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
"
|
|
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-
|
|
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
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
"
|
|
303
|
-
"
|
|
304
|
-
"
|
|
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
|
-
|
|
307
|
-
|
|
308
|
-
|
|
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
|
-
|
|
311
|
-
|
|
312
|
-
|
|
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
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
"
|
|
327
|
-
"
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
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
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
"
|
|
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: [],
|
|
@@ -503,7 +364,7 @@ Es un componente de selección de fecha y/o hora con diferentes modos de uso. Pe
|
|
|
503
364
|
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |
|
|
504
365
|
| modelValue | String | Valor vinculado mediante `v-model`. Se recibe y devuelve una cadena formateada. |
|
|
505
366
|
| disabled | Boolean | Desactiva el componente e impide interacción. _(Por defecto: `false`)_ |
|
|
506
|
-
| 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`)_ |
|
|
507
368
|
| mode | String | Define el tipo de selector: `"date"`, `"time"`, `"datetime"`, `"datetime2"`. _(Por defecto: `"datetime"`)_ |
|
|
508
369
|
| label | String | Etiqueta del campo mostrada sobre el input. _(Por defecto: `"Seleccionar fecha"`)_ |
|
|
509
370
|
| secondsMode | String | Configura los segundos: `"default"` (≈01) o `"max"` (≈59). _(Por defecto: `"default"`)_ |
|
|
@@ -533,8 +394,8 @@ Ideal para montos, precios, porcentajes y cantidades numéricas.
|
|
|
533
394
|
| modelValue | String | Valor vinculado mediante `v-model`. Se formatea automáticamente según los decimales configurados. _(Por defecto: `""`)_ |
|
|
534
395
|
| label | String | Etiqueta visible sobre el input. _(Por defecto: `""`)_ |
|
|
535
396
|
| placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
|
|
536
|
-
|
|
|
537
|
-
|
|
|
397
|
+
| digits | String | Número de enteros permitidos. _(Por defecto: `10`)_ |
|
|
398
|
+
| decimals | String | Número de decimales permitidos. _(Por defecto: `2`)_ |
|
|
538
399
|
| disabled | Boolean | Desactiva el campo y evita que pueda editarse. _(Por defecto: `false`)_ |
|
|
539
400
|
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
540
401
|
|
|
@@ -544,9 +405,9 @@ Ideal para montos, precios, porcentajes y cantidades numéricas.
|
|
|
544
405
|
<input-decimal-style
|
|
545
406
|
v-model="precio"
|
|
546
407
|
label="Precio del producto"
|
|
547
|
-
placeholder="
|
|
408
|
+
placeholder="Introduzca el precio del producto"
|
|
409
|
+
digits="10"
|
|
548
410
|
decimals="2"
|
|
549
|
-
maxlength="14"
|
|
550
411
|
disabled
|
|
551
412
|
required
|
|
552
413
|
/>
|
|
@@ -719,4 +580,4 @@ El método recibe dos parámetros:
|
|
|
719
580
|
- Primer parámetro (título): Es el encabezado o título de la alerta.
|
|
720
581
|
- Segundo parámetro (mensaje/descripción opcional): Es el texto secundario que explica qué está ocurriendo.
|
|
721
582
|
|
|
722
|
-
|