npm package: @luis-angel-martin-dzul/vue-input-styles
Description: 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 to
Latest version: 0.0.48

# Vue Input Styles

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.

---

## 📦 Instalación

La instalación se realiza mediante **npm** utilizando el registro privado de GitHub.

---

### 1️⃣ Instalar el paquete

```bash
npm i @luis-angel-martin-dzul/vue-input-styles@latest
```

### 🚀 Uso básico

Importa la librería en tu archivo principal **`main.js`**

```bash
import { createApp } from "vue";
import App from "./App.vue";

import "@luis-angel-martin-dzul/vue-input-styles/style.css";            //estilos
import VueInputStyles from "@luis-angel-martin-dzul/vue-input-styles";  //componentes

const app = createApp(App);

app.use(VueInputStyles);

app.mount("#app");
```

Ahora podrás usar los componentes globalmente en tu proyecto.

### 🎨 Configuración adicional para TailwindCSS

Para asegurar que las clases dinámicas funcionen correctamente, se debe agregar una safelist en **`tailwind.config.js`**
Esto es temporal hasta encontrar una solución más óptima.

Ejemplo recomendado:

```bash
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],

  theme: {
    extend: {},
  },

    safelist: [
      /* =============================
      * DISPLAY / LAYOUT
      * ============================= */
      "block",
      "inline-flex",
      "flex",
      "grid",
      "relative",
      "absolute",
      "overflow-auto",
      "overflow-hidden",
      "overflow-x-auto",
      "min-w-full",
      "w-full",
      "h-full",
      "h-min",
      "flex-1",
      "flex-col",
      "flex-row",
      "items-center",
      "items-start",
      "items-end",
      "justify-center",
      "justify-between",
      "gap-1",
      "gap-2",
      "gap-3",
      "gap-6",
      "space-y-1",

      /* =============================
      * GRID
      * ============================= */
      "grid-cols-2",
      "grid-cols-4",

      /* =============================
      * SPACING
      * ============================= */
      "px-2",
      "px-3",
      "px-4",
      "px-2.5",
      "py-1",
      "py-1.5",
      "py-2",
      "py-10",
      "pl-8",
      "pl-10",
      "pr-3",
      "mx-3",
      "mt-0.5",
      "mb-1",

      /* =============================
      * TEXT
      * ============================= */
      "text-xs",
      "text-sm",
      "text-gray-400",
      "text-gray-500",
      "text-gray-600",
      "text-gray-700",
      "text-gray-800",
      "text-white",
      "text-red-800",
      "font-medium",
      "font-semibold",
      "uppercase",
      "truncate",
      "whitespace-nowrap",
      "text-left",
      "text-center",

      /* =============================
      * BACKGROUNDS
      * ============================= */
      "bg-white",
      "bg-gray-50",
      "bg-gray-100",
      "bg-gray-200",
      "bg-gray-300",
      "bg-gray-800",

      "bg-slate-600",
      "bg-slate-700",

      "bg-emerald-600",
      "bg-emerald-700",

      "bg-sky-600",
      "bg-sky-700",

      "bg-rose-600",
      "bg-rose-700",

      "bg-amber-600",
      "bg-amber-700",

      /* =============================
      * BORDERS
      * ============================= */
      "border",
      "border-2",
      "border-gray-200",
      "border-gray-300",
      "border-gray-600",
      "border-gray-700",
      "border-slate-700",
      "border-emerald-700",
      "border-sky-700",
      "border-rose-700",
      "border-amber-700",
      "rounded",
      "rounded-l",
      "rounded-r",
      "rounded-full",

      /* =============================
      * EFFECTS
      * ============================= */
      "shadow",
      "shadow-sm",
      "shadow-md",
      "opacity-60",
      "opacity-90",
      "cursor-pointer",
      "cursor-default",
      "select-none",
      "-translate-y-1/2",

      /* =============================
      * POSITION
      * ============================= */
      "left-0",
      "right-0",
      "left-2",
      "top-1/2",
      "inset-0",
      "z-10",

      /* =============================
      * FORMS
      * ============================= */
      "accent-indigo-600",
      "focus:outline-none",
      "focus:ring-2",
      "focus:ring-indigo-200",
      "disabled:bg-gray-100",
      "disabled:text-gray-600",
      "disabled:opacity-60",
      "disabled:cursor-not-allowed",
      "disabled:pointer-events-none",

      /* =============================
      * HOVER / ENABLED
      * ============================= */
      "hover:bg-gray-50",
      "hover:bg-gray-100",

      "enabled:hover:bg-slate-700",
      "enabled:hover:bg-emerald-700",
      "enabled:hover:bg-sky-700",
      "enabled:hover:bg-rose-700",
      "enabled:hover:bg-amber-700",

      /* =============================
      * ANIMATION
      * ============================= */
      "transition-colors",
      "transition-all",
      "duration-200",
      "duration-300",
      "animate-pulse",

      /* =============================
      * MIX / UTILITIES
      * ============================= */
      "pointer-events-none",
      "mix-blend-overlay",
    ],

  plugins: [],
};
```

### 📌 Notas finales

- La librería se encuentra en **desarrollo activo**, por lo que pueden añadirse nuevas funciones y mejoras constantemente.
- Las clases en la **safelist** deben ajustarse de acuerdo con los estilos utilizados por cada componente dentro del proyecto.
- Se recomienda **mantener la librería actualizada** para asegurar compatibilidad y obtener las últimas optimizaciones.

## 📘 Lista de componentes disponibles

Incluye en el README:

| Componente        | Nombre en Vue           | Alternativa (kebab-case)  |
| ----------------- | ----------------------- | ------------------------- |
| ButtonStyle       | `<ButtonStyle />`       | `<button-style />`        |
| CheckStyle        | `<CheckStyle />`        | `<check-style />`         |
| ComboBoxStyle     | `<ComboBoxStyle />`     | `<combo-box-style />`     |
| DateTimeStyle     | `<DateTimeStyle />`     | `<date-time-style />`     |
| InputDecimalStyle | `<InputDecimalStyle />` | `<input-decimal-style />` |
| InputStyle        | `<InputStyle />`        | `<input-style />`         |
| SelectStyle       | `<SelectStyle />`       | `<select-style />`        |
| TextAreaStyle     | `<TextAreaStyle />`     | `<text-area-style />`     |
| ToggleStyle       | `<ToggleStyle />`       | `<toggle-style />`        |
| StepperStyle      | `<StepperStyle />`      | `<stepper-style />`       |

### 🔘 ButtonStyle — Funcionamiento básico

Es un botón estilizado que permite personalizar rápidamente su apariencia usando cuatro propiedades principales:

#### Props disponibles

| Propiedad | Tipo    | Descripción                                                                                                                    |
| --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------ |
| type      | String  | Define el compartamiento del boton, `"button"`, `"submit"`. _(Por defecto: `"button"`)_                                        |
| class     | String  | Define el tipo de estilo del botón de forma manual.                                                                            |
| variant   | String  | Define el tipo de estilo del botón. Ejemplo: `"solid"` (relleno), `"outline"`, etc. _(Por defecto: `"solid"`)_                 |
| color     | String  | Establece el color principal del botón. Ejemplo: `"gray"`, `"blue"`, `"red"`, `"green"`, `"yellow"`. _(Por defecto: `"gray"`)_ |
| disabled  | Boolean | Desactiva el botón, bloqueando su interacción y aplicando un estilo visual correspondiente. _(Por defecto: `false`)_           |
| delay     | String  | Tiempo (seg) que estara desactivado el boton, despues de presionar. _(Por defecto: `1.5`)_                                     |

#### ✔️ Ejemplo de uso

```bash
<button-style
    type="submit"
    color="gray"
    variant="outline"
    delay="2"
    disabled>
  Boton
</button-style>
```

### ☑️ CheckStyle — Funcionamiento básico

Este componente permite seleccionar uno o varios elementos desde una lista, mostrando las opciones en formato de checkboxes.

#### Props disponibles

| Propiedad  | Tipo           | Descripción                                                                                                |
| ---------- | -------------- | ---------------------------------------------------------------------------------------------------------- |
| title      | String         | Título o etiqueta que se muestra encima del grupo de checkboxes. _(Opcional)_                              |
| name       | String         | Nombre del grupo de checkboxes, útil para identificarlo en formularios.                                    |
| list       | Array          | Lista de opciones a mostrar. Cada opción debe ser un objeto.                                               |
| grid       | String         | Clases Tailwind para definir el layout en grid. _(Por defecto: `"grid grid-cols-4"`)_                      |
| all        | Boolean        | Muestra una opción adicional para seleccionar/deseleccionar todos los elementos. _(Por defecto: `false`)_  |
| modelValue | Array / String | Puede manejar selección múltiple o simple. _(Por defecto: `[]`)_                                           |
| returnAll  | Boolean        | Devuelve la lista completa en el `v-model` en lugar de los valores seleccionados. _(Por defecto: `false`)_ |
| returnType | String         | Define qué valor se regresará al seleccionar: `"id"`, `"text"`, `"object"`. _(Por defecto: `"id"`)_        |

#### ✔️ Ejemplo de uso

```html
<check-style
  title="Selecciona los permisos"
  name="permisos"
  :list="[
        { id: 1, text: 'Crear' },
        { id: 2, text: 'Editar' },
        { id: 3, text: 'Eliminar' }
    ]"
  grid="grid grid-cols-3"
  :all="true"
  v-model="selectedPermisos"
  returnType="id"
/>
```

### 🔽 ComboBoxStyle — Funcionamiento básico

Es un cuadro de selección con buscador integrado (autocomplete). Permite elegir un elemento de una lista filtrable.

#### Props disponibles

| Propiedad   | Tipo            | Descripción                                                                      |
| ----------- | --------------- | -------------------------------------------------------------------------------- |
| modelValue  | String / Number | Valor vinculado mediante `v-model`.                                              |
| label       | String          | Etiqueta que aparece sobre el campo. _(Por defecto: `""`)_                       |
| placeholder | String          | Texto mostrado cuando no hay búsqueda activa. _(Por defecto: `"Buscar..."`)_     |
| oEmpty      | String          | Texto que aparece cuando no hay resultados. _(Por defecto: `"- Sin registros"`)_ |
| disabled    | Boolean         | Desactiva el componente e impide su interacción. _(Por defecto: `false`)_        |
| list        | Array           | Lista de elementos a mostrar                                                     |

#### ✔️ Ejemplo de uso

```html
<combo-box-style
  v-model="productoSeleccionado"
  label="Productos"
  placeholder="Buscar producto..."
  oEmpty="- No hay productos disponibles -"
  :list="productos.map(p => ({ id: p.id, name: p.descripcion }))"
  disabled
  required
/>
```

### 🕒 DateTimeStyle — Funcionamiento básico

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).

#### Props disponibles

| Propiedad   | Tipo    | Descripción                                                                                                |
| ----------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| modelValue  | String  | Valor vinculado mediante `v-model`. Se recibe y devuelve una cadena formateada.                            |
| disabled    | Boolean | Desactiva el componente e impide interacción. _(Por defecto: `false`)_                                     |
| required    | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_                            |
| mode        | String  | Define el tipo de selector: `"date"`, `"time"`, `"datetime"`, `"datetime2"`. _(Por defecto: `"datetime"`)_ |
| label       | String  | Etiqueta del campo mostrada sobre el input. _(Por defecto: `""`)_                         |
| secondsMode | String  | Configura los segundos: `"default"` (≈01) o `"max"` (≈59). _(Por defecto: `"default"`)_                    |

#### ✔️ Ejemplo de uso

```html
<date-time-style
  v-model="fechaEntrega"
  label="Fecha de entrega"
  mode="datetime"
  secondsMode="max"
  disabled
  required
/>
```

### 🔢 InputDecimalStyle — Funcionamiento básico

Es un campo numérico formateado que permite controlar fácilmente la cantidad de decimales, el tamaño máximo.  
Ideal para montos, precios, porcentajes y cantidades numéricas.

#### Props disponibles

| Propiedad   | Tipo    | Descripción                                                                                                             |
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------------------- |
| modelValue  | String  | Valor vinculado mediante `v-model`. Se formatea automáticamente según los decimales configurados. _(Por defecto: `""`)_ |
| label       | String  | Etiqueta visible sobre el input. _(Por defecto: `""`)_                                                                  |
| placeholder | String  | Texto guía mostrado dentro del input. _(Por defecto: `""`)_                                                             |
| digits      | String  | Número de enteros permitidos. _(Por defecto: `10`)_                                                                     |
| decimals    | String  | Número de decimales permitidos. _(Por defecto: `2`)_                                                                    |
| disabled    | Boolean | Desactiva el campo y evita que pueda editarse. _(Por defecto: `false`)_                                                 |
| required    | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_                                         |

#### ✔️ Ejemplo de uso

```html
<input-decimal-style
  v-model="precio"
  label="Precio del producto"
  placeholder="Introduzca el precio del producto"
  digits="10"
  decimals="2"
  disabled
  required
/>
```

### 📝 InputStyle — Funcionamiento básico

Es un campo de texto estándar mejorado, útil para capturar valores simples como nombres, correos, números, palabras clave y más.

#### Props disponibles

| Propiedad   | Tipo    | Descripción                                                                                                 |
| ----------- | ------- | ----------------------------------------------------------------------------------------------------------- |
| modelValue  | String  | Valor vinculado mediante `v-model`. _(Por defecto: `""`)_                                                   |
| label       | String  | Texto que aparece como etiqueta del input. _(Por defecto: `""`)_                                            |
| placeholder | String  | Texto guía mostrado dentro del input. _(Por defecto: `""`)_                                                 |
| type        | String  | Tipo de input HTML. Ejemplos: `"text"`, `"number"`, `"email"`, `"password"`, etc. _(Por defecto: `"text"`)_ |
| maxlength   | String  | Límite máximo de caracteres del input. _(Por defecto: `null` Sin limites) _                                 |
| disabled    | Boolean | Desactiva el campo e impide su edición. _(Por defecto: `false`)_                                            |
| required    | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_                             |

#### ✔️ Ejemplo de uso

```html
<input-style
  v-model="nombre"
  label="Nombre completo"
  type="text"
  placeholder="Ingresa tu nombre"
  maxlength="255"
  disabled
  required
/>
```

### 🔽 SelectStyle — Funcionamiento básico

Es un componente de lista desplegable (select) estilizado, diseñado para seleccionar un valor de una lista predefinida.

#### Props disponibles

| Propiedad  | Tipo           | Descripción                                                                                 |
| ---------- | -------------- | ------------------------------------------------------------------------------------------- |
| modelValue | String, Number | Valor seleccionado mediante `v-model`.                                                      |
| label      | String         | Texto mostrado como etiqueta del campo. _(Por defecto: `""`)_                               |
| disabled   | Boolean        | Desactiva el select e impide interacción. _(Por defecto: `false`)_                          |
| required   | Boolean        | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_             |
| list       | Array          | Lista de opciones.. _(Por defecto: `[]`)_                                                   |
| option     | String         | Texto que se mostrará como primera opción (placeholder). _(Por defecto: `"- Seleccione…"`)_ |
| oEmpty     | String         | Texto mostrado cuando la lista está vacía. _(Por defecto: `"- Sin registros"`)_             |

#### ✔️ Ejemplo de uso

```html
<select-style
  v-model="categoria"
  label="Categoría"
  :list="[{ id: 1, name: 'Opción A' }, { id: 2, name: 'Opción B' }]"
  option="- Seleccione una categoría -"
  disabled
  required
/>
```

### 📝 TextAreaStyle — Funcionamiento básico

Es un campo de texto multilínea estilizado, ideal para comentarios, descripciones o contenido extenso.

#### Props disponibles

| Propiedad   | Tipo    | Descripción                                                                          |
| ----------- | ------- | ------------------------------------------------------------------------------------ |
| modelValue  | String  | Valor del texto, enlazado mediante `v-model`.                                        |
| label       | String  | Texto mostrado como etiqueta del campo. _(Por defecto: `""`)_                        |
| note        | String  | Texto informativo o ayuda que aparece debajo del campo. _(Por defecto: `""`)_        |
| placeholder | String  | Texto que se muestra como sugerencia dentro del área de texto. _(Por defecto: `""`)_ |
| disabled    | Boolean | Desactiva el campo, impidiendo interacción. _(Por defecto: `false`)_                 |
| required    | Boolean | Marca el botón como asociado a una acción obligatoria. _(Por defecto: `false`)_      |
| rows        | String  | Número de filas visibles del textarea. _(Por defecto: `3`)_                          |
| maxlength   | String  | Número de caracteres para escribir del textarea. _(Por defecto: `null`, Sin limite)_ |

#### ✔️ Ejemplo de uso

```html
<text-area-style
  v-model="comentarios"
  label="Comentarios"
  note="Máximo 500 caracteres."
  placeholder="Escribe tus comentarios aquí..."
  rows="5"
  maxlength="5"
  disabled
  required
/>
```

### 🔁 ToggleStyle — Funcionamiento básico

Es un interruptor (switch) estilizado que permite activar o desactivar una opción booleana.

#### Props disponibles

| Propiedad  | Tipo    | Descripción                                                                                                                         |
| ---------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| modelValue | Boolean | Valor del interruptor controlado a través de `v-model`. _(Por defecto: `false`)_                                                    |
| label      | String  | Etiqueta descriptiva que acompaña al toggle. _(Por defecto: `""`)_                                                                  |
| color      | String  | Color del interruptor cuando está activado. Opciones: `"gray"`, `"green"`, `"blue"`, `"red"`, `"yellow"`. _(Por defecto: `"gray"`)_ |
| shape      | String  | Define la forma del toggle. Opciones: `"round"` (bordes circulares) o `"square"` (bordes rectos). _(Por defecto: `"round"`)_        |
| disabled   | Boolean | Deshabilita el toggle, evitando interacción y aplicando estilo visual correspondiente. _(Por defecto: `false`)_                     |

#### ✔️ Ejemplo de uso

```html
<toggle-style v-model="activo" label="Estado" color="green" shape="round" />
```

### 🚨 AlertStyle — Funcionamiento básico

Permite mostrar notificaciones rápidas y estilizadas mediante un sistema global accesible desde cualquier componente usando:

Existen diferentes tipos de alertas disponibles para mostrar
| Tipo | Descripción |
| ------- | ----------------------------------------------------------- |
| success | Indica una operación realizada correctamente. |
| error | Muestra un mensaje cuando ocurre un error o falla. |
| warning | Útil para advertencias o acciones que requieren precaución. |
| info | Para mostrar información relevante al usuario. |
| neutral | Mensaje estándar sin énfasis especial. |

#### ✔️ Ejemplo de uso

```
this.$alertstyle.success("Mensaje enviado a destinatario", "Completado");
```

### 🧭 Stepper — Funcionamiento básico

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.

| Propiedad   | Tipo   | Descripción                                                                                                                                 |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| modelValue  | Number | Índice del paso actual controlado mediante `v-model`. _(Por defecto: `0`)_ **(Requerido)**                                                  |
| steps       | Array  | Lista de pasos a mostrar. Cada elemento representa un paso del proceso. **(Requerido)**                                                     |
| type        | String | Define el estilo visual del indicador del paso. Opciones: `"circle"` o `"line"`. _(Por defecto: `"circle"`)_                                |
| text        | String | Controla la visibilidad del texto del paso. Opciones: `"all"` (todos), `"only"` (solo activo), `"none"` (ninguno). _(Por defecto: `"all"`)_ |
| color       | String | Color principal del stepper. Opciones: `"gray"`, `"green"`, `"blue"`, `"red"`, `"yellow"`. _(Por defecto: `"green"`)_                       |
| btnPrevious | String | Texto del botón para retroceder al paso anterior. _(Por defecto: `"Anterior"`)_                                                             |
| btnNext     | String | Texto del botón para avanzar al siguiente paso. _(Por defecto: `"Siguiente"`)_                                                              |
| btnFinish   | String | Texto del botón mostrado en el último paso. _(Por defecto: `"Finalizar"`)_                                                                  |
| button      | String | Muestra u oculta los botones de navegación. Valores: `"true"` o `"false"`. _(Por defecto: `"true"`)_                                        |
| selected    | String | Permite cambiar directamente el paso. Valores: `"true"` o `"false"`. _(Por defecto: `"false"`)_                                             |

#### ✔️ Ejemplo de uso

```
<stepper-style
  v-model="currentStep"
  :steps="['Datos', 'Dirección', 'Confirmación']"
  color="green"
  type="circle"
  text="all"
/>

```

### 📌 Nota:

El método recibe dos parámetros:

- Primer parámetro (título): Es el encabezado o título de la alerta.
- Segundo parámetro (mensaje/descripción opcional): Es el texto secundario que explica qué está ocurriendo.

![Última actualización](https://img.shields.io/badge/Actualizado-13%20de%20Ene%20del%202026-blue)