https://github.com/pavish/select-madu

SelectMadu is a replacement for the select menu with support for searching, multiple selections, async loading, animations and more.
https://github.com/pavish/select-madu

autocomplete dropdown multiselect select select-multiple selectbox selectmenu selector svelte svelte-v3 tag tagging typeahead typescript

Last synced: about 1 month ago
JSON representation

SelectMadu is a replacement for the select menu with support for searching, multiple selections, async loading, animations and more.

• Host: GitHub
• URL: https://github.com/pavish/select-madu
• Owner: pavish
• License: mit
• Archived: true
• Created: 2020-04-05T08:14:23.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T23:35:47.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T13:38:13.163Z (3 months ago)
• Topics: autocomplete, dropdown, multiselect, select, select-multiple, selectbox, selectmenu, selector, svelte, svelte-v3, tag, tagging, typeahead, typescript
• Language: Svelte
• Homepage: https://www.pavishkrg.com/select-madu
• Size: 1.24 MB
• Stars: 50
• Watchers: 3
• Forks: 6
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - pavish/select-madu

README

        
# SelectMadu



  





  





SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.

To get started, checkout documentation and examples at https://pavishkrg.com/select-madu

## Features

* Searching through options.

* Multi-select interface with tags.

* Async data loading.

* Dynamic state changes.

* Multi-level nesting of options as groups.

* Support for custom animations.

* Pass custom option components.

* Easily themable.

* Better Accessibility.

## Installation

### Manual

Download or source the javascript file and css file from [unpkg][unpkg-url]

You can also download it directly from the [releases listed in select-madu repository][release-url]

```html

  

  

```

### NPM

You can install SelectMadu from npm using the following command.

```bash

npm install select-madu --save

```

and then import it in your javascript file

```javascript

import SelectMadu from 'select-madu';

```

Note: CSS file has to be included separately

### Basic usage

```javascript

  import SelectMadu from 'select-madu';

  //To create

  let instance = new SelectMadu({

    //SelectMadu dom elements will be rendered within the specified parent element in target.

    target: document.querySelector("#parentElement"),

    //Properties for initializing SelectMadu. Refer Properties info below.

    props: {

      datasource: [

        { text: "Ferrai" }, 

        { text: "Lamborghini" },

        { text: "Aston Martin" }

      ]

    }

  });

  //To destroy and remove

  instance.$destroy();

```

### Svelte

Optionally, if you are using Svelte you can import SelectMadu as a component.

```javascript

import SelectMadu from 'select-madu';

```

Note: CSS file has to be included separately

Check out [Select madu home page][select-madu-url] for usage documentation and examples.

## API and Documentation

Check out [SelectMadu home page][select-madu-url] for detailed documentation with properties information and API methods.

## Contribute

Pull requests are encouraged and always welcome. Help make SelectMadu better!

To work on SelectMadu

```bash

git clone https://github.com/pavish/select-madu.git

cd select-madu

npm install

```

The component is written in [Svelte][svelte-url]. 

It's an awesome library, you should check it out!

SCSS is used for styling. It is separate from the component and is within styles folder.  

To build, run

```bash

npm run build

```

Build generates the build folder, which contains the iife variant, with and without minimization.

It also generates the nodesrc folder which contains the esm and umd variants for importing the component within your app.

You can also contribute by writing additional tests, adding issues that you encounter, or by helping with the documentation.

## License

[MIT](LICENSE)

[bundle-folder-url]: https://github.com/pavish/select-madu/tree/master/bundle

[docs-folder-url]: https://github.com/pavish/select-madu/tree/master/docs

[svelte-url]: https://svelte.dev/

[select-madu-url]: https://pavishkrg.com/select-madu

[unpkg-url]: https://unpkg.com/browse/select-madu/dist/

[release-url]: https://github.com/pavish/select-madu/releases