@luis-angel-martin-dzul/vue-input-styles 0.0.42
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 +730 -0
- package/dist/vite.svg +1 -0
- package/dist/vue-input-styles.css +1 -0
- package/dist/vue-input-styles.es.js +1138 -0
- package/dist/vue-input-styles.umd.js +8 -0
- package/package.json +35 -0
package/README.md
ADDED
|
@@ -0,0 +1,730 @@
|
|
|
1
|
+
# Vue Input Styles
|
|
2
|
+
|
|
3
|
+
Vue Input Styles es una librería personal diseñada para integrar, de forma sencilla y estandarizada, los tipos de inputs más utilizados según nuestra metodología de trabajo. Su propósito es ofrecer una interfaz más consistente, limpia y reutilizable en todos los proyectos.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 📦 Instalación
|
|
8
|
+
|
|
9
|
+
La instalación se realiza mediante **npm** utilizando el registro privado de GitHub.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
### 1️⃣ Crear archivo `.npmrc` en la raíz del proyecto
|
|
14
|
+
|
|
15
|
+
Agrega la siguiente configuración:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
@luis-angel-martin-dzul:registry=https://npm.pkg.github.com
|
|
19
|
+
//npm.pkg.github.com/:_authToken=[TOKEN]
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 2️⃣ Instalar el paquete
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @luis-angel-martin-dzul/vue-input-styles@0.0.42
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 🚀 Uso básico
|
|
29
|
+
|
|
30
|
+
Importa la librería en tu archivo principal **`main.js`**
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
import { createApp } from "vue";
|
|
34
|
+
import App from "./App.vue";
|
|
35
|
+
|
|
36
|
+
import "@luis-angel-martin-dzul/vue-input-styles/style.css"; //estilos
|
|
37
|
+
import VueInputStyles from "@luis-angel-martin-dzul/vue-input-styles"; //componentes
|
|
38
|
+
|
|
39
|
+
const app = createApp(App);
|
|
40
|
+
|
|
41
|
+
app.use(VueInputStyles);
|
|
42
|
+
|
|
43
|
+
app.mount("#app");
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Ahora podrás usar los componentes globalmente en tu proyecto.
|
|
47
|
+
|
|
48
|
+
### 🎨 Configuración adicional para TailwindCSS
|
|
49
|
+
|
|
50
|
+
Para asegurar que las clases dinámicas funcionen correctamente, se debe agregar una safelist en **`tailwind.config.js`**
|
|
51
|
+
Esto es temporal hasta encontrar una solución más óptima.
|
|
52
|
+
|
|
53
|
+
Ejemplo recomendado:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
/** @type {import('tailwindcss').Config} */
|
|
57
|
+
module.exports = {
|
|
58
|
+
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
|
|
59
|
+
|
|
60
|
+
theme: {
|
|
61
|
+
extend: {},
|
|
62
|
+
},
|
|
63
|
+
|
|
64
|
+
safelist: [
|
|
65
|
+
// =============================
|
|
66
|
+
// LAYOUT / DISPLAY
|
|
67
|
+
// =============================
|
|
68
|
+
"block",
|
|
69
|
+
"inline-flex",
|
|
70
|
+
"flex",
|
|
71
|
+
"flex-1",
|
|
72
|
+
"flex-col",
|
|
73
|
+
"grid",
|
|
74
|
+
"grid-cols-2",
|
|
75
|
+
|
|
76
|
+
// =============================
|
|
77
|
+
// ALIGNMENT / SPACING
|
|
78
|
+
// =============================
|
|
79
|
+
"items-center",
|
|
80
|
+
"justify-center",
|
|
81
|
+
"justify-between",
|
|
82
|
+
"gap-1",
|
|
83
|
+
"gap-2",
|
|
84
|
+
"space-y-1",
|
|
85
|
+
|
|
86
|
+
// =============================
|
|
87
|
+
// SIZING
|
|
88
|
+
// =============================
|
|
89
|
+
"w-full",
|
|
90
|
+
"min-w-full",
|
|
91
|
+
"w-4",
|
|
92
|
+
"w-5",
|
|
93
|
+
"w-6",
|
|
94
|
+
"w-9",
|
|
95
|
+
"w-11",
|
|
96
|
+
"h-3",
|
|
97
|
+
"h-4",
|
|
98
|
+
"h-5",
|
|
99
|
+
"h-6",
|
|
100
|
+
"h-9",
|
|
101
|
+
"h-min",
|
|
102
|
+
"h-[2px]",
|
|
103
|
+
"h-[600px]",
|
|
104
|
+
"max-h-48",
|
|
105
|
+
|
|
106
|
+
// =============================
|
|
107
|
+
// PADDING / MARGIN
|
|
108
|
+
// =============================
|
|
109
|
+
"px-1",
|
|
110
|
+
"px-3",
|
|
111
|
+
"px-4",
|
|
112
|
+
"py-1.5",
|
|
113
|
+
"py-2",
|
|
114
|
+
"py-10",
|
|
115
|
+
"pl-8",
|
|
116
|
+
"pl-10",
|
|
117
|
+
"pr-3",
|
|
118
|
+
"mx-3",
|
|
119
|
+
|
|
120
|
+
// =============================
|
|
121
|
+
// POSITION / TRANSFORM
|
|
122
|
+
// =============================
|
|
123
|
+
"relative",
|
|
124
|
+
"absolute",
|
|
125
|
+
"inset-0",
|
|
126
|
+
"-top-5",
|
|
127
|
+
"left-1",
|
|
128
|
+
"left-3",
|
|
129
|
+
"top-1/2",
|
|
130
|
+
"-translate-y-1/2",
|
|
131
|
+
"translate-x-0",
|
|
132
|
+
"translate-x-full",
|
|
133
|
+
"transform",
|
|
134
|
+
|
|
135
|
+
// =============================
|
|
136
|
+
// OVERFLOW
|
|
137
|
+
// =============================
|
|
138
|
+
"overflow-auto",
|
|
139
|
+
"overflow-x-auto",
|
|
140
|
+
|
|
141
|
+
// =============================
|
|
142
|
+
// TYPOGRAPHY
|
|
143
|
+
// =============================
|
|
144
|
+
"truncate",
|
|
145
|
+
"uppercase",
|
|
146
|
+
"whitespace-nowrap",
|
|
147
|
+
"text-left",
|
|
148
|
+
"text-center",
|
|
149
|
+
"text-xs",
|
|
150
|
+
"text-sm",
|
|
151
|
+
"text-3xl",
|
|
152
|
+
"font-medium",
|
|
153
|
+
"font-semibold",
|
|
154
|
+
|
|
155
|
+
// =============================
|
|
156
|
+
// CURSOR / INTERACTION
|
|
157
|
+
// =============================
|
|
158
|
+
"cursor-pointer",
|
|
159
|
+
"cursor-default",
|
|
160
|
+
"cursor-not-allowed",
|
|
161
|
+
"pointer-events-none",
|
|
162
|
+
"select-none",
|
|
163
|
+
"resize-none",
|
|
164
|
+
|
|
165
|
+
// =============================
|
|
166
|
+
// BORDER / RADIUS
|
|
167
|
+
// =============================
|
|
168
|
+
"border",
|
|
169
|
+
"border-b",
|
|
170
|
+
"border-2",
|
|
171
|
+
"rounded",
|
|
172
|
+
"rounded-md",
|
|
173
|
+
"rounded-l",
|
|
174
|
+
"rounded-r",
|
|
175
|
+
|
|
176
|
+
// =============================
|
|
177
|
+
// SHADOW / EFFECTS
|
|
178
|
+
// =============================
|
|
179
|
+
"shadow",
|
|
180
|
+
"mix-blend-overlay",
|
|
181
|
+
"animate-pulse",
|
|
182
|
+
|
|
183
|
+
// =============================
|
|
184
|
+
// TRANSITIONS
|
|
185
|
+
// =============================
|
|
186
|
+
"transition-all",
|
|
187
|
+
"transition-colors",
|
|
188
|
+
"duration-200",
|
|
189
|
+
"duration-300",
|
|
190
|
+
|
|
191
|
+
// =============================
|
|
192
|
+
// TEXT COLORS
|
|
193
|
+
// =============================
|
|
194
|
+
"text-white",
|
|
195
|
+
"text-gray-200",
|
|
196
|
+
"text-gray-400",
|
|
197
|
+
"text-gray-500",
|
|
198
|
+
"text-gray-600",
|
|
199
|
+
"text-gray-700",
|
|
200
|
+
"text-gray-800",
|
|
201
|
+
|
|
202
|
+
"text-slate-700",
|
|
203
|
+
"text-emerald-700",
|
|
204
|
+
"text-sky-700",
|
|
205
|
+
"text-rose-700",
|
|
206
|
+
"text-amber-700",
|
|
207
|
+
|
|
208
|
+
"text-green-600",
|
|
209
|
+
"text-green-700",
|
|
210
|
+
"text-blue-400",
|
|
211
|
+
"text-blue-700",
|
|
212
|
+
"text-red-400",
|
|
213
|
+
"text-red-700",
|
|
214
|
+
"text-red-800",
|
|
215
|
+
"text-yellow-600",
|
|
216
|
+
"text-yellow-700",
|
|
217
|
+
|
|
218
|
+
// =============================
|
|
219
|
+
// BACKGROUNDS
|
|
220
|
+
// =============================
|
|
221
|
+
"bg-white",
|
|
222
|
+
"bg-white/20",
|
|
223
|
+
|
|
224
|
+
"bg-gray-50",
|
|
225
|
+
"bg-gray-100",
|
|
226
|
+
"bg-gray-200",
|
|
227
|
+
"bg-gray-300",
|
|
228
|
+
"bg-gray-600",
|
|
229
|
+
"bg-gray-700",
|
|
230
|
+
"bg-gray-800",
|
|
231
|
+
|
|
232
|
+
"bg-slate-50",
|
|
233
|
+
"bg-slate-600",
|
|
234
|
+
"bg-slate-700",
|
|
235
|
+
|
|
236
|
+
"bg-emerald-50",
|
|
237
|
+
"bg-emerald-400",
|
|
238
|
+
"bg-emerald-600",
|
|
239
|
+
"bg-emerald-700",
|
|
240
|
+
|
|
241
|
+
"bg-sky-50",
|
|
242
|
+
"bg-sky-600",
|
|
243
|
+
"bg-sky-700",
|
|
244
|
+
|
|
245
|
+
"bg-rose-50",
|
|
246
|
+
"bg-rose-600",
|
|
247
|
+
"bg-rose-700",
|
|
248
|
+
|
|
249
|
+
"bg-amber-50",
|
|
250
|
+
"bg-amber-200",
|
|
251
|
+
"bg-amber-600",
|
|
252
|
+
"bg-amber-700",
|
|
253
|
+
|
|
254
|
+
"bg-green-500",
|
|
255
|
+
"bg-green-600",
|
|
256
|
+
"bg-green-700",
|
|
257
|
+
|
|
258
|
+
"bg-blue-600",
|
|
259
|
+
"bg-blue-700",
|
|
260
|
+
|
|
261
|
+
"bg-red-300",
|
|
262
|
+
"bg-red-400",
|
|
263
|
+
"bg-red-600",
|
|
264
|
+
"bg-red-700",
|
|
265
|
+
|
|
266
|
+
"bg-yellow-500",
|
|
267
|
+
"bg-yellow-600",
|
|
268
|
+
"bg-yellow-700",
|
|
269
|
+
|
|
270
|
+
"bg-indigo-300",
|
|
271
|
+
"bg-indigo-400",
|
|
272
|
+
|
|
273
|
+
// =============================
|
|
274
|
+
// HOVER STATES
|
|
275
|
+
// =============================
|
|
276
|
+
"hover:bg-gray-100",
|
|
277
|
+
"hover:bg-gray-200",
|
|
278
|
+
"hover:bg-gray-800",
|
|
279
|
+
|
|
280
|
+
"hover:bg-slate-700",
|
|
281
|
+
"hover:bg-emerald-700",
|
|
282
|
+
"hover:bg-sky-700",
|
|
283
|
+
"hover:bg-rose-700",
|
|
284
|
+
"hover:bg-amber-700",
|
|
285
|
+
|
|
286
|
+
"hover:bg-green-100",
|
|
287
|
+
"hover:bg-blue-100",
|
|
288
|
+
"hover:bg-red-100",
|
|
289
|
+
"hover:bg-yellow-100",
|
|
290
|
+
|
|
291
|
+
// =============================
|
|
292
|
+
// BORDERS (COLORS)
|
|
293
|
+
// =============================
|
|
294
|
+
"border-gray-200",
|
|
295
|
+
"border-gray-300",
|
|
296
|
+
"border-gray-400/70",
|
|
297
|
+
"border-gray-500/60",
|
|
298
|
+
"border-gray-600",
|
|
299
|
+
"border-gray-800",
|
|
300
|
+
|
|
301
|
+
"border-slate-700",
|
|
302
|
+
"border-emerald-700",
|
|
303
|
+
"border-sky-700",
|
|
304
|
+
"border-rose-700",
|
|
305
|
+
"border-amber-700",
|
|
306
|
+
|
|
307
|
+
"border-green-300",
|
|
308
|
+
"border-green-500",
|
|
309
|
+
"border-green-700",
|
|
310
|
+
|
|
311
|
+
"border-blue-300",
|
|
312
|
+
"border-blue-500",
|
|
313
|
+
"border-blue-700",
|
|
314
|
+
|
|
315
|
+
"border-red-300",
|
|
316
|
+
"border-red-500",
|
|
317
|
+
"border-red-700",
|
|
318
|
+
|
|
319
|
+
"border-yellow-300",
|
|
320
|
+
"border-yellow-500",
|
|
321
|
+
"border-yellow-600",
|
|
322
|
+
|
|
323
|
+
// =============================
|
|
324
|
+
// ENABLED STATES
|
|
325
|
+
// =============================
|
|
326
|
+
"enabled:hover:bg-slate-700",
|
|
327
|
+
"enabled:hover:bg-emerald-700",
|
|
328
|
+
"enabled:hover:bg-sky-700",
|
|
329
|
+
"enabled:hover:bg-rose-700",
|
|
330
|
+
"enabled:hover:bg-amber-700",
|
|
331
|
+
|
|
332
|
+
"enabled:hover:bg-slate-50",
|
|
333
|
+
"enabled:hover:bg-emerald-50",
|
|
334
|
+
"enabled:hover:bg-sky-50",
|
|
335
|
+
"enabled:hover:bg-rose-50",
|
|
336
|
+
"enabled:hover:bg-amber-50",
|
|
337
|
+
|
|
338
|
+
// =============================
|
|
339
|
+
// DISABLED STATES
|
|
340
|
+
// =============================
|
|
341
|
+
"disabled:opacity-60",
|
|
342
|
+
"disabled:opacity-80",
|
|
343
|
+
"disabled:pointer-events-none",
|
|
344
|
+
"disabled:cursor-not-allowed",
|
|
345
|
+
|
|
346
|
+
"disabled:text-gray-100",
|
|
347
|
+
"disabled:text-gray-200",
|
|
348
|
+
"disabled:text-gray-600",
|
|
349
|
+
|
|
350
|
+
"disabled:text-green-600",
|
|
351
|
+
"disabled:text-blue-400",
|
|
352
|
+
"disabled:text-red-400",
|
|
353
|
+
"disabled:text-yellow-600",
|
|
354
|
+
|
|
355
|
+
"disabled:bg-gray-50",
|
|
356
|
+
"disabled:bg-gray-100",
|
|
357
|
+
"disabled:bg-gray-400",
|
|
358
|
+
|
|
359
|
+
"disabled:bg-slate-50",
|
|
360
|
+
"disabled:bg-emerald-50",
|
|
361
|
+
"disabled:bg-emerald-400",
|
|
362
|
+
"disabled:bg-sky-50",
|
|
363
|
+
"disabled:bg-blue-50",
|
|
364
|
+
"disabled:bg-blue-300",
|
|
365
|
+
"disabled:bg-rose-50",
|
|
366
|
+
"disabled:bg-red-50",
|
|
367
|
+
"disabled:bg-red-300",
|
|
368
|
+
"disabled:bg-amber-50",
|
|
369
|
+
"disabled:bg-amber-200",
|
|
370
|
+
|
|
371
|
+
"disabled:border-gray-400",
|
|
372
|
+
"disabled:border-emerald-400",
|
|
373
|
+
"disabled:border-blue-400",
|
|
374
|
+
"disabled:border-red-400",
|
|
375
|
+
"disabled:border-yellow-400",
|
|
376
|
+
|
|
377
|
+
// =============================
|
|
378
|
+
// EXTRA
|
|
379
|
+
// =============================
|
|
380
|
+
"stroke-current",
|
|
381
|
+
"bg-gradient-to-r",
|
|
382
|
+
"from-gray-200",
|
|
383
|
+
"to-gray-300",
|
|
384
|
+
],
|
|
385
|
+
|
|
386
|
+
plugins: [],
|
|
387
|
+
};
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
### 📌 Notas finales
|
|
391
|
+
|
|
392
|
+
- La librería se encuentra en **desarrollo activo**, por lo que pueden añadirse nuevas funciones y mejoras constantemente.
|
|
393
|
+
- Las clases en la **safelist** deben ajustarse de acuerdo con los estilos utilizados por cada componente dentro del proyecto.
|
|
394
|
+
- Se recomienda **mantener la librería actualizada** para asegurar compatibilidad y obtener las últimas optimizaciones.
|
|
395
|
+
|
|
396
|
+
## 📘 Lista de componentes disponibles
|
|
397
|
+
|
|
398
|
+
Incluye en el README:
|
|
399
|
+
|
|
400
|
+
| Componente | Nombre en Vue | Alternativa (kebab-case) |
|
|
401
|
+
| ----------------- | ----------------------- | ------------------------- |
|
|
402
|
+
| ButtonStyle | `<ButtonStyle />` | `<button-style />` |
|
|
403
|
+
| CheckStyle | `<CheckStyle />` | `<check-style />` |
|
|
404
|
+
| ComboBoxStyle | `<ComboBoxStyle />` | `<combo-box-style />` |
|
|
405
|
+
| DateTimeStyle | `<DateTimeStyle />` | `<date-time-style />` |
|
|
406
|
+
| InputDecimalStyle | `<InputDecimalStyle />` | `<input-decimal-style />` |
|
|
407
|
+
| InputStyle | `<InputStyle />` | `<input-style />` |
|
|
408
|
+
| SelectStyle | `<SelectStyle />` | `<select-style />` |
|
|
409
|
+
| TextAreaStyle | `<TextAreaStyle />` | `<text-area-style />` |
|
|
410
|
+
| ToggleStyle | `<ToggleStyle />` | `<toggle-style />` |
|
|
411
|
+
| StepperStyle | `<StepperStyle />` | `<stepper-style />` |
|
|
412
|
+
|
|
413
|
+
### 🔘 ButtonStyle — Funcionamiento básico
|
|
414
|
+
|
|
415
|
+
Es un botón estilizado que permite personalizar rápidamente su apariencia usando cuatro propiedades principales:
|
|
416
|
+
|
|
417
|
+
#### Props disponibles
|
|
418
|
+
|
|
419
|
+
| Propiedad | Tipo | Descripción |
|
|
420
|
+
| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
421
|
+
| class | String | Define el tipo de estilo del botón de forma manual, `"Nota: Incluye un disabled y un opacity por defecto"` |
|
|
422
|
+
| variant | String | Define el tipo de estilo del botón. Ejemplo: `"solid"` (relleno), `"outline"`, etc. _(Por defecto: `"solid"`)_ |
|
|
423
|
+
| color | String | Establece el color principal del botón. Ejemplo: `"gray"`, `"blue"`, `"red"`, `"green"`, `"yellow"`. _(Por defecto: `"gray"`)_ |
|
|
424
|
+
| disabled | Boolean | Desactiva el botón, bloqueando su interacción y aplicando un estilo visual correspondiente. _(Por defecto: `false`)_ |
|
|
425
|
+
| delay | String | Tiempo (seg) que estara desactivado el boton, despues de presionar. _(Por defecto: `1.5`)_ |
|
|
426
|
+
| full | Boolean | Hace que el botón ocupe todo el ancho disponible (100%). _(Por defecto: `false`)_ |
|
|
427
|
+
|
|
428
|
+
#### ✔️ Ejemplo de uso
|
|
429
|
+
|
|
430
|
+
```bash
|
|
431
|
+
<button-style
|
|
432
|
+
color="gray"
|
|
433
|
+
variant="outline"
|
|
434
|
+
full="true"
|
|
435
|
+
delay="2"
|
|
436
|
+
disabled>
|
|
437
|
+
Boton</button-style>
|
|
438
|
+
```
|
|
439
|
+
|
|
440
|
+
### ☑️ CheckStyle — Funcionamiento básico
|
|
441
|
+
|
|
442
|
+
Este componente permite seleccionar uno o varios elementos desde una lista, mostrando las opciones en formato de checkboxes.
|
|
443
|
+
|
|
444
|
+
#### Props disponibles
|
|
445
|
+
|
|
446
|
+
| Propiedad | Tipo | Descripción |
|
|
447
|
+
| ---------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
|
|
448
|
+
| title | String | Título o etiqueta que se muestra encima del grupo de checkboxes. _(Opcional)_ |
|
|
449
|
+
| name | String | Nombre del grupo de checkboxes, útil para identificarlo en formularios. |
|
|
450
|
+
| list | Array | Lista de opciones a mostrar. Cada opción debe ser un objeto. |
|
|
451
|
+
| grid | String | Clases Tailwind para definir el layout en grid. _(Por defecto: `"grid grid-cols-4"`)_ |
|
|
452
|
+
| all | Boolean | Muestra una opción adicional para seleccionar/deseleccionar todos los elementos. _(Por defecto: `false`)_ |
|
|
453
|
+
| modelValue | Array / String | Puede manejar selección múltiple o simple. _(Por defecto: `[]`)_ |
|
|
454
|
+
| returnAll | Boolean | Devuelve la lista completa en el `v-model` en lugar de los valores seleccionados. _(Por defecto: `false`)_ |
|
|
455
|
+
| returnType | String | Define qué valor se regresará al seleccionar: `"id"`, `"text"`, `"object"`. _(Por defecto: `"id"`)_ |
|
|
456
|
+
|
|
457
|
+
#### ✔️ Ejemplo de uso
|
|
458
|
+
|
|
459
|
+
```html
|
|
460
|
+
<check-style
|
|
461
|
+
title="Selecciona los permisos"
|
|
462
|
+
name="permisos"
|
|
463
|
+
:list="[
|
|
464
|
+
{ id: 1, text: 'Crear' },
|
|
465
|
+
{ id: 2, text: 'Editar' },
|
|
466
|
+
{ id: 3, text: 'Eliminar' }
|
|
467
|
+
]"
|
|
468
|
+
grid="grid grid-cols-3"
|
|
469
|
+
:all="true"
|
|
470
|
+
v-model="selectedPermisos"
|
|
471
|
+
returnType="id"
|
|
472
|
+
/>
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
### 🔽 ComboBoxStyle — Funcionamiento básico
|
|
476
|
+
|
|
477
|
+
Es un cuadro de selección con buscador integrado (autocomplete). Permite elegir un elemento de una lista filtrable.
|
|
478
|
+
|
|
479
|
+
#### Props disponibles
|
|
480
|
+
|
|
481
|
+
| Propiedad | Tipo | Descripción |
|
|
482
|
+
| ----------- | --------------- | -------------------------------------------------------------------------------- |
|
|
483
|
+
| modelValue | String / Number | Valor vinculado mediante `v-model`. |
|
|
484
|
+
| label | String | Etiqueta que aparece sobre el campo. _(Por defecto: `""`)_ |
|
|
485
|
+
| placeholder | String | Texto mostrado cuando no hay búsqueda activa. _(Por defecto: `"Buscar..."`)_ |
|
|
486
|
+
| oEmpty | String | Texto que aparece cuando no hay resultados. _(Por defecto: `"- Sin registros"`)_ |
|
|
487
|
+
| disabled | Boolean | Desactiva el componente e impide su interacción. _(Por defecto: `false`)_ |
|
|
488
|
+
| list | Array | Lista de elementos a mostrar |
|
|
489
|
+
|
|
490
|
+
#### ✔️ Ejemplo de uso
|
|
491
|
+
|
|
492
|
+
```html
|
|
493
|
+
<combo-box-style
|
|
494
|
+
v-model="productoSeleccionado"
|
|
495
|
+
label="Productos"
|
|
496
|
+
placeholder="Buscar producto..."
|
|
497
|
+
oEmpty="- No hay productos disponibles -"
|
|
498
|
+
:list="productos.map(p => ({ id: p.id, name: p.descripcion }))"
|
|
499
|
+
disabled
|
|
500
|
+
required
|
|
501
|
+
/>
|
|
502
|
+
```
|
|
503
|
+
|
|
504
|
+
### 🕒 DateTimeStyle — Funcionamiento básico
|
|
505
|
+
|
|
506
|
+
Es un componente de selección de fecha y/o hora con diferentes modos de uso. Permite configurar el tipo de entrada (solo fecha, solo hora o ambos).
|
|
507
|
+
|
|
508
|
+
#### Props disponibles
|
|
509
|
+
|
|
510
|
+
| Propiedad | Tipo | Descripción |
|
|
511
|
+
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |
|
|
512
|
+
| modelValue | String | Valor vinculado mediante `v-model`. Se recibe y devuelve una cadena formateada. |
|
|
513
|
+
| disabled | Boolean | Desactiva el componente e impide interacción. _(Por defecto: `false`)_ |
|
|
514
|
+
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
515
|
+
| mode | String | Define el tipo de selector: `"date"`, `"time"`, `"datetime"`, `"datetime2"`. _(Por defecto: `"datetime"`)_ |
|
|
516
|
+
| label | String | Etiqueta del campo mostrada sobre el input. _(Por defecto: `"Seleccionar fecha"`)_ |
|
|
517
|
+
| secondsMode | String | Configura los segundos: `"default"` (≈01) o `"max"` (≈59). _(Por defecto: `"default"`)_ |
|
|
518
|
+
|
|
519
|
+
#### ✔️ Ejemplo de uso
|
|
520
|
+
|
|
521
|
+
```html
|
|
522
|
+
<date-time-style
|
|
523
|
+
v-model="fechaEntrega"
|
|
524
|
+
label="Fecha de entrega"
|
|
525
|
+
mode="datetime"
|
|
526
|
+
secondsMode="max"
|
|
527
|
+
disabled
|
|
528
|
+
required
|
|
529
|
+
/>
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
### 🔢 InputDecimalStyle — Funcionamiento básico
|
|
533
|
+
|
|
534
|
+
Es un campo numérico formateado que permite controlar fácilmente la cantidad de decimales, el tamaño máximo.
|
|
535
|
+
Ideal para montos, precios, porcentajes y cantidades numéricas.
|
|
536
|
+
|
|
537
|
+
#### Props disponibles
|
|
538
|
+
|
|
539
|
+
| Propiedad | Tipo | Descripción |
|
|
540
|
+
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
|
|
541
|
+
| modelValue | String | Valor vinculado mediante `v-model`. Se formatea automáticamente según los decimales configurados. _(Por defecto: `""`)_ |
|
|
542
|
+
| label | String | Etiqueta visible sobre el input. _(Por defecto: `""`)_ |
|
|
543
|
+
| placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
|
|
544
|
+
| decimals | Number | Número de decimales permitidos. _(Por defecto: `2`)_ |
|
|
545
|
+
| maxlength | String | Límite máximo de caracteres del input. _(Por defecto: `14` Decimales incluidos) _ |
|
|
546
|
+
| disabled | Boolean | Desactiva el campo y evita que pueda editarse. _(Por defecto: `false`)_ |
|
|
547
|
+
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
548
|
+
|
|
549
|
+
#### ✔️ Ejemplo de uso
|
|
550
|
+
|
|
551
|
+
```html
|
|
552
|
+
<input-decimal-style
|
|
553
|
+
v-model="precio"
|
|
554
|
+
label="Precio del producto"
|
|
555
|
+
placeholder="0"
|
|
556
|
+
decimals="2"
|
|
557
|
+
maxlength="14"
|
|
558
|
+
disabled
|
|
559
|
+
required
|
|
560
|
+
/>
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
### 📝 InputStyle — Funcionamiento básico
|
|
564
|
+
|
|
565
|
+
Es un campo de texto estándar mejorado, útil para capturar valores simples como nombres, correos, números, palabras clave y más.
|
|
566
|
+
|
|
567
|
+
#### Props disponibles
|
|
568
|
+
|
|
569
|
+
| Propiedad | Tipo | Descripción |
|
|
570
|
+
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------- |
|
|
571
|
+
| modelValue | String | Valor vinculado mediante `v-model`. _(Por defecto: `""`)_ |
|
|
572
|
+
| label | String | Texto que aparece como etiqueta del input. _(Por defecto: `""`)_ |
|
|
573
|
+
| type | String | Tipo de input HTML. Ejemplos: `"text"`, `"number"`, `"email"`, `"password"`, etc. _(Por defecto: `"text"`)_ |
|
|
574
|
+
| maxlength | String | Límite máximo de caracteres del input. _(Por defecto: `null` Sin limites) _ |
|
|
575
|
+
| placeholder | String | Texto guía mostrado dentro del input. _(Por defecto: `""`)_ |
|
|
576
|
+
| disabled | Boolean | Desactiva el campo e impide su edición. _(Por defecto: `false`)_ |
|
|
577
|
+
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
578
|
+
|
|
579
|
+
#### ✔️ Ejemplo de uso
|
|
580
|
+
|
|
581
|
+
```html
|
|
582
|
+
<input-style
|
|
583
|
+
v-model="nombre"
|
|
584
|
+
label="Nombre completo"
|
|
585
|
+
type="text"
|
|
586
|
+
placeholder="Ingresa tu nombre"
|
|
587
|
+
maxlength="255"
|
|
588
|
+
disabled
|
|
589
|
+
required
|
|
590
|
+
/>
|
|
591
|
+
```
|
|
592
|
+
|
|
593
|
+
### 🔽 SelectStyle — Funcionamiento básico
|
|
594
|
+
|
|
595
|
+
Es un componente de lista desplegable (select) estilizado, diseñado para seleccionar un valor de una lista predefinida.
|
|
596
|
+
|
|
597
|
+
#### Props disponibles
|
|
598
|
+
|
|
599
|
+
| Propiedad | Tipo | Descripción |
|
|
600
|
+
| ---------- | -------------- | ------------------------------------------------------------------------------------------- |
|
|
601
|
+
| modelValue | String, Number | Valor seleccionado mediante `v-model`. |
|
|
602
|
+
| label | String | Texto mostrado como etiqueta del campo. _(Por defecto: `""`)_ |
|
|
603
|
+
| disabled | Boolean | Desactiva el select e impide interacción. _(Por defecto: `false`)_ |
|
|
604
|
+
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
605
|
+
| list | Array | Lista de opciones.. _(Por defecto: `[]`)_ |
|
|
606
|
+
| option | String | Texto que se mostrará como primera opción (placeholder). _(Por defecto: `"- Seleccione…"`)_ |
|
|
607
|
+
| oEmpty | String | Texto mostrado cuando la lista está vacía. _(Por defecto: `"- Sin registros"`)_ |
|
|
608
|
+
|
|
609
|
+
#### ✔️ Ejemplo de uso
|
|
610
|
+
|
|
611
|
+
```html
|
|
612
|
+
<select-style
|
|
613
|
+
v-model="categoria"
|
|
614
|
+
label="Categoría"
|
|
615
|
+
:list="[{ id: 1, name: 'Opción A' }, { id: 2, name: 'Opción B' }]"
|
|
616
|
+
option="- Seleccione una categoría -"
|
|
617
|
+
disabled
|
|
618
|
+
required
|
|
619
|
+
/>
|
|
620
|
+
```
|
|
621
|
+
|
|
622
|
+
### 📝 TextAreaStyle — Funcionamiento básico
|
|
623
|
+
|
|
624
|
+
Es un campo de texto multilínea estilizado, ideal para comentarios, descripciones o contenido extenso.
|
|
625
|
+
|
|
626
|
+
#### Props disponibles
|
|
627
|
+
|
|
628
|
+
| Propiedad | Tipo | Descripción |
|
|
629
|
+
| ----------- | ------- | ------------------------------------------------------------------------------------ |
|
|
630
|
+
| modelValue | String | Valor del texto, enlazado mediante `v-model`. |
|
|
631
|
+
| label | String | Texto mostrado como etiqueta del campo. _(Por defecto: `""`)_ |
|
|
632
|
+
| note | String | Texto informativo o ayuda que aparece debajo del campo. _(Por defecto: `""`)_ |
|
|
633
|
+
| placeholder | String | Texto que se muestra como sugerencia dentro del área de texto. _(Por defecto: `""`)_ |
|
|
634
|
+
| disabled | Boolean | Desactiva el campo, impidiendo interacción. _(Por defecto: `false`)_ |
|
|
635
|
+
| required | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_ |
|
|
636
|
+
| rows | String | Número de filas visibles del textarea. _(Por defecto: `3`)_ |
|
|
637
|
+
| maxlength | String | Número de caracteres para escribir del textarea. _(Por defecto: `null`, Sin limite)_ |
|
|
638
|
+
|
|
639
|
+
#### ✔️ Ejemplo de uso
|
|
640
|
+
|
|
641
|
+
```html
|
|
642
|
+
<text-area-style
|
|
643
|
+
v-model="comentarios"
|
|
644
|
+
label="Comentarios"
|
|
645
|
+
note="Máximo 500 caracteres."
|
|
646
|
+
placeholder="Escribe tus comentarios aquí..."
|
|
647
|
+
rows="5"
|
|
648
|
+
maxlength="5"
|
|
649
|
+
disabled
|
|
650
|
+
required
|
|
651
|
+
/>
|
|
652
|
+
```
|
|
653
|
+
|
|
654
|
+
### 🔁 ToggleStyle — Funcionamiento básico
|
|
655
|
+
|
|
656
|
+
Es un interruptor (switch) estilizado que permite activar o desactivar una opción booleana.
|
|
657
|
+
|
|
658
|
+
#### Props disponibles
|
|
659
|
+
|
|
660
|
+
| Propiedad | Tipo | Descripción |
|
|
661
|
+
| ---------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
|
|
662
|
+
| modelValue | Boolean | Valor del interruptor controlado a través de `v-model`. _(Por defecto: `false`)_ |
|
|
663
|
+
| label | String | Etiqueta descriptiva que acompaña al toggle. _(Por defecto: `""`)_ |
|
|
664
|
+
| color | String | Color del interruptor cuando está activado. Opciones: `"gray"`, `"green"`, `"blue"`, `"red"`, `"yellow"`. _(Por defecto: `"gray"`)_ |
|
|
665
|
+
| shape | String | Define la forma del toggle. Opciones: `"round"` (bordes circulares) o `"square"` (bordes rectos). _(Por defecto: `"round"`)_ |
|
|
666
|
+
| disabled | Boolean | Deshabilita el toggle, evitando interacción y aplicando estilo visual correspondiente. _(Por defecto: `false`)_ |
|
|
667
|
+
|
|
668
|
+
#### ✔️ Ejemplo de uso
|
|
669
|
+
|
|
670
|
+
```html
|
|
671
|
+
<toggle-style v-model="activo" label="Estado" color="green" shape="round" />
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
### 🚨 AlertStyle — Funcionamiento básico
|
|
675
|
+
|
|
676
|
+
Permite mostrar notificaciones rápidas y estilizadas mediante un sistema global accesible desde cualquier componente usando:
|
|
677
|
+
|
|
678
|
+
Existen diferentes tipos de alertas disponibles para mostrar
|
|
679
|
+
| Tipo | Descripción |
|
|
680
|
+
| ------- | ----------------------------------------------------------- |
|
|
681
|
+
| success | Indica una operación realizada correctamente. |
|
|
682
|
+
| error | Muestra un mensaje cuando ocurre un error o falla. |
|
|
683
|
+
| warning | Útil para advertencias o acciones que requieren precaución. |
|
|
684
|
+
| info | Para mostrar información relevante al usuario. |
|
|
685
|
+
| neutral | Mensaje estándar sin énfasis especial. |
|
|
686
|
+
|
|
687
|
+
#### ✔️ Ejemplo de uso
|
|
688
|
+
|
|
689
|
+
```
|
|
690
|
+
this.$alertstyle.success("Mensaje enviado a destinatario", "Completado");
|
|
691
|
+
```
|
|
692
|
+
|
|
693
|
+
### 🧭 Stepper — Funcionamiento básico
|
|
694
|
+
|
|
695
|
+
El Stepper es un componente de navegación por pasos que permite guiar al usuario a través de un proceso secuencial (formularios, flujos de configuración, registros, etc.), mostrando el progreso actual y permitiendo avanzar, retroceder o finalizar.
|
|
696
|
+
|
|
697
|
+
| Propiedad | Tipo | Descripción |
|
|
698
|
+
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
699
|
+
| modelValue | Number | Índice del paso actual controlado mediante `v-model`. _(Por defecto: `0`)_ **(Requerido)** |
|
|
700
|
+
| steps | Array | Lista de pasos a mostrar. Cada elemento representa un paso del proceso. **(Requerido)** |
|
|
701
|
+
| type | String | Define el estilo visual del indicador del paso. Opciones: `"circle"` o `"line"`. _(Por defecto: `"circle"`)_ |
|
|
702
|
+
| text | String | Controla la visibilidad del texto del paso. Opciones: `"all"` (todos), `"only"` (solo activo), `"none"` (ninguno). _(Por defecto: `"all"`)_ |
|
|
703
|
+
| color | String | Color principal del stepper. Opciones: `"gray"`, `"green"`, `"blue"`, `"red"`, `"yellow"`. _(Por defecto: `"green"`)_ |
|
|
704
|
+
| btnPrevious | String | Texto del botón para retroceder al paso anterior. _(Por defecto: `"Anterior"`)_ |
|
|
705
|
+
| btnNext | String | Texto del botón para avanzar al siguiente paso. _(Por defecto: `"Siguiente"`)_ |
|
|
706
|
+
| btnFinish | String | Texto del botón mostrado en el último paso. _(Por defecto: `"Finalizar"`)_ |
|
|
707
|
+
| button | String | Muestra u oculta los botones de navegación. Valores: `"true"` o `"false"`. _(Por defecto: `"true"`)_ |
|
|
708
|
+
| selected | String | Permite cambiar directamente el paso. Valores: `"true"` o `"false"`. _(Por defecto: `"false"`)_ |
|
|
709
|
+
|
|
710
|
+
#### ✔️ Ejemplo de uso
|
|
711
|
+
|
|
712
|
+
```
|
|
713
|
+
<stepper-style
|
|
714
|
+
v-model="currentStep"
|
|
715
|
+
:steps="['Datos', 'Dirección', 'Confirmación']"
|
|
716
|
+
color="green"
|
|
717
|
+
type="circle"
|
|
718
|
+
text="all"
|
|
719
|
+
/>
|
|
720
|
+
|
|
721
|
+
```
|
|
722
|
+
|
|
723
|
+
### 📌 Nota:
|
|
724
|
+
|
|
725
|
+
El método recibe dos parámetros:
|
|
726
|
+
|
|
727
|
+
- Primer parámetro (título): Es el encabezado o título de la alerta.
|
|
728
|
+
- Segundo parámetro (mensaje/descripción opcional): Es el texto secundario que explica qué está ocurriendo.
|
|
729
|
+
|
|
730
|
+
|