@honatas/multi-select-webcomponent
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    Multi Select Webcomponent

    GitHub npm Published on webcomponents.org typescript coffee

    A fully styleable multiselect with no polyfills.

    Live demo

    Install

    You can get it from npm:

    npm install @honatas/multi-select-webcomponent
    

    Or you can get it from a CDN:

    <script src="https://cdn.jsdelivr.net/npm/@honatas/multi-select-webcomponent/dist/multi-select-webcomponent.min.js" crossorigin="anonymous"></script>

    If you use Typescript, add the definitions file to the includes section of your tsconfig.json:

    "include": [
      "node_modules/@honatas/multi-select-webcomponent/dist/multi-select-webcomponent.d.ts",
      ...
    ],

    Usage

    At first, you'll have to register the component with your application. I chose to leave this to you because this allows for avoiding naming conflicts with other WebComponents you may be using. So, in order to register the component, execute the following code during the initialization of your application (eg. at the first lines of code):

      window.customElements.define('multi-select', MultiselectWebcomponent);

    After that you can use the newly defined tag multi-select wherever you want on your html. The tag works the same as the select tag:

      <multi-select id="planetIds">
        <option id="1">Mercury</option>
        <option id="2">Venus</option>
        <option id="3">Earth</option>
      </multi-select>

    Styling

    In order to be fully styleable, this WebComponent ships with no style at all! If you just copy/paste the code above, your component will look ... well, unstylish.

    To add style to your component, you can either add attributes to your tag or create css classes:

    Tag attribute CSS class Target
    selected .msw-selected Selected items box
    selecteditem .msw-selecteditem Selected item
    dropdown .msw-dropdown Dropdown box
    dropdownitem .msw-dropdownitem Dropdown item
    searchbox .msw-searchbox Search input field
    clearbutton .msw-clearbutton "Clear Selection" button
    clearbuttonspan .msw-clearbuttonspan "Clear Selection" button's inner span
    selectallbutton .msw-selectallbutton "Select All" button
    selectallbuttonspan .msw-selectallbuttonspan "Select All" button's inner span

    So, if you want to add classes to every item that shows when you click the component, you can either add the attribute dropdownitem to your tag and populate it with css classes of your own or from whichever lib you are using, or create the .msw-dropdownitem class on your own css file. You can see a neatly styled example using Bootstrap 5 on the Live demo.

    Also, if you need to change the default titles for the buttons, you can add the following tag attributes:

    Tag attribute Target
    clearbuttontitle "Clear Selection" button's title
    selectallbuttontitle "Select All" button's title

    Options

    You may realize that as soon as you render the component, your option tags will be removed from the DOM. This is desired, since other elements are going to be rendered in substitution to them. However, internal control is still made using those tags, so they are kept int memory and you can access them through javascprit. In the example above we create another option and add it to the component:

    const pluto = document.createElement('option');
    pluto.value = 9;
    pluto.innerHTML = 'Pluto';
    
    const msw = document.getElementById('planetIds');
    msw.options.push(pluto);
    msw.build();

    Older browsers warning

    This WebComponent is created with pure Javascript, so no polyfills are being used. Do not use this component if the target browser is not listed in the compatibility list of the WebComponents website. At the time of writing of this documentation, all major browsers already have full support.

    Contributions

    Feel free to open an issue or add a pull request. Anytime. Really, I mean it.

    Also, if you like my work, I'll let you know that I love coffee.

    Install

    npm i @honatas/multi-select-webcomponent

    DownloadsWeekly Downloads

    118

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    29.7 kB

    Total Files

    8

    Last publish

    Collaborators

    • honatas