Selector de Color - Web Component

Este proyecto implementa un componente web personalizado para seleccionar colores, diseñado para ser fácilmente integrado en formularios HTML.

Características

• 🎨 Selector de color personalizable
• 📝 Compatible con formularios HTML (formAssociated)
• 🎯 Fácil integración
• 🔧 Altamente configurable
• 📱 Diseño responsive

Instalación

Instala el paquete usando npm:

npm install color-selector-component

Uso

Importación

Primero, importa el componente en tu proyecto:

import 'color-selector-component';

Uso Básico

Para usar el selector de color con la configuración predeterminada:

<color-selector name="color1"></color-selector>

Uso Personalizado

Puedes personalizar el selector de color con diferentes opciones:

<color-selector
  name="color2"
  width="120px"
  height="25px"
  colors='[
    {"value":"#f44336","label":"Rojo intenso"},
    {"value":"#4caf50","label":"Verde brillante"},
    {"value":"#2196f3","label":"Azul claro"},
    {"value":"#ffeb3b","label":"Amarillo sol"}
  ]'
></color-selector>

Atributos Disponibles

• name: Nombre del campo para el formulario (requerido)
• width: Ancho del selector (opcional)
• height: Alto del selector (opcional)
• colors: Array JSON de colores personalizados (opcional)
  • Cada color debe tener:
    • value: Código hexadecimal del color
    • label: Etiqueta descriptiva del color

Integración con Formularios

El componente está diseñado para funcionar perfectamente con formularios HTML:

<form method="POST" action="/tu-endpoint">
  <color-selector name="color"></color-selector>
  <button type="submit">Enviar</button>
</form>

Ejemplo Completo

<!DOCTYPE html>
<html>
<head>
  <title>Selector de Color</title>
</head>
<body>
  <form method="POST" action="/enviar">
    <!-- Selector básico -->
    <color-selector name="color1"></color-selector>

    <!-- Selector personalizado -->
    <color-selector
      name="color2"
      width="120px"
      height="25px"
      colors='[
        {"value":"#f44336","label":"Rojo intenso"},
        {"value":"#4caf50","label":"Verde brillante"}
      ]'
    ></color-selector>

    <button type="submit">Enviar</button>
  </form>

  <script type="module">
    import 'color-selector-component';
  </script>
</body>
</html>

Licencia

Este proyecto está bajo la Licencia MIT.