@mouridev/dropdown-menu

@mouridev/dropdown-menu est un composant dropdown simple, flexible et léger en Vanilla JavaScript.

Crée facilement des menus déroulants dynamiques, avec prise en charge des groupes d’options, de la gestion des événements, et personnalisable via des attributs et du style.

🚀 Installation

npm install @mouridev/dropdown-menu

💻 Utilisation basique

import { createDropdown } from "@mouridev/dropdown-menu";

const dropdown = createDropdown({
  items: [
    { value: "apple", label: "Apple 🍎" },
    { value: "banana", label: "Banana 🍌" },
    {
      label: "Other Fruits",
      options: [
        { value: "grape", label: "Grape 🍇" },
        { value: "melon", label: "Melon 🍈" },
      ],
    },
  ],
  placeholder: "Choose a fruit",
  selectedValue: "banana",
  className: "my-dropdown",
  onChange: (val) => {
    console.log("Selected:", val);
  },
});

document.body.appendChild(dropdown);

⚙️ Options

| Option | Type | Par défaut | Description | | --------------- | ---------- | -------------------- | ---------------------------------------------------- | | disabled | boolean | false | Désactive le dropdown | | items | array | [] | Liste des options ou des groupes d’options | | placeholder | string | "Select an option" | Texte affiché quand aucune option n’est sélectionnée | | selectedValue | string | "" | Valeur sélectionnée par défaut | | className | string | "" | Classe CSS pour le <select> | | id | string | "" | Attribut id du <select> | | name | string | "" | Attribut name du <select> | | onChange | function | null | Fonction appelée à chaque changement de valeur | | attributes | object | {} | Autres attributs HTML à ajouter au <select> |

🛠️ Méthodes

reset()
Remet la sélection au placeholder (première option).

dropdown.reset();

🎯 Événements personnalisés

En plus du callback onChange, le dropdown émet un événement personnalisé :

dropdownChange → Déclenché à chaque changement. → Contient event.detail.value avec la nouvelle valeur. Exemple :

dropdown.addEventListener("dropdownChange", (e) => {
  console.log("Custom event value:", e.detail.value);
});

✨ Exemples d’utilisation

/* Simple dropdown */
const dropdown = createDropdown({
  items: ["Apple", "Banana", "Cherry"],
});

document.body.appendChild(dropdown);

/* Avec optgroups et labels */
const dropdown = createDropdown({
  items: [
    {
      label: "Citrus",
      options: [
        { value: "orange", label: "Orange 🍊" },
        { value: "lemon", label: "Lemon 🍋" },
      ],
    },
    { value: "apple", label: "Apple 🍎" },
  ],
  placeholder: "Pick a fruit",
});

🤝 Contribution

Les contributions sont les bienvenues ! N’hésite pas à ouvrir une issue ou une pull request sur GitHub.

📄 Licence

MIT © [@mouridev]