https://github.com/kanety/stimulus-multi-select

https://github.com/kanety/stimulus-multi-select

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/kanety/stimulus-multi-select
• Owner: kanety
• License: mit
• Created: 2021-09-25T04:05:41.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2024-06-27T07:29:31.000Z (7 months ago)
• Last Synced: 2024-09-30T23:38:00.183Z (4 months ago)
• Language: JavaScript
• Size: 33.2 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stimulus-multi-select

A stimulus controller for simple multiple select.

## Dependencies

* @hotwired/stimulus 3.0+

## Installation

Install from npm:

    $ npm install @kanety/stimulus-multi-select --save

## Usage

Register controller:

```javascript

import { Application } from '@hotwired/stimulus';

import MultiSelectController from '@kanety/stimulus-multi-select';

const application = Application.start();

application.register('multi-select', MultiSelectController);

```

Import css:

```css

@import '@kanety/stimulus-multi-select';

```

Build html as follows:

```html



  


    

      option1

      option2

      option3

    

  

  


    


    


  

  


    

  



```


### Options

#### max-options

Set max number of addable options:

```html





```


#### sort-options

Enable sorting when options moved:

```html





```


### Callbacks

```javascript

let element = document.querySelector('[data-controller="multi-select"]')

element.addEventListener('multi-select:added', (e) => {

  console.log(e.detail.option);  // added option

});

element.addEventListener('multi-select:removed', (e) => {

  console.log(e.detail.option);  // removed option

});

```

## License

The library is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).