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

npm i @luis-angel-martin-dzul/vue-input-styles@latest

🚀 Uso básico

Importa la librería en tu archivo principal main.js

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:

/** @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

<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

<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

<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

<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

<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

<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

<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

<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

<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.