{"id":13765692,"url":"https://github.com/pavish/select-madu","last_synced_at":"2025-05-10T21:31:27.391Z","repository":{"id":40800018,"uuid":"253186163","full_name":"pavish/select-madu","owner":"pavish","description":"SelectMadu is a replacement for the select menu with support for searching, multiple selections, async loading, animations and more.","archived":true,"fork":false,"pushed_at":"2023-01-07T23:35:47.000Z","size":1302,"stargazers_count":50,"open_issues_count":11,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-09-30T13:38:13.163Z","etag":null,"topics":["autocomplete","dropdown","multiselect","select","select-multiple","selectbox","selectmenu","selector","svelte","svelte-v3","tag","tagging","typeahead","typescript"],"latest_commit_sha":null,"homepage":"https://www.pavishkrg.com/select-madu","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pavish.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-05T08:14:23.000Z","updated_at":"2024-07-29T17:50:06.000Z","dependencies_parsed_at":"2023-02-08T03:31:16.506Z","dependency_job_id":null,"html_url":"https://github.com/pavish/select-madu","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavish%2Fselect-madu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavish%2Fselect-madu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavish%2Fselect-madu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pavish%2Fselect-madu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pavish","download_url":"https://codeload.github.com/pavish/select-madu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224989379,"owners_count":17403408,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","dropdown","multiselect","select","select-multiple","selectbox","selectmenu","selector","svelte","svelte-v3","tag","tagging","typeahead","typescript"],"created_at":"2024-08-03T16:00:44.089Z","updated_at":"2024-11-17T01:31:16.568Z","avatar_url":"https://github.com/pavish.png","language":"Svelte","funding_links":[],"categories":["UI Components"],"sub_categories":["Form Components"],"readme":"# SelectMadu\n\n\u003ca href=\"https://www.npmjs.com/package/select-madu\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/select-madu\" alt=\"npm version\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/pavish/select-madu/blob/master/LICENSE\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/select-madu\" alt=\"license\"\u003e\n\u003c/a\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\nSelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.\n\nTo get started, checkout documentation and examples at https://pavishkrg.com/select-madu\n\n\n## Features\n* Searching through options.\n* Multi-select interface with tags.\n* Async data loading.\n* Dynamic state changes.\n* Multi-level nesting of options as groups.\n* Support for custom animations.\n* Pass custom option components.\n* Easily themable.\n* Better Accessibility.\n\n\n## Installation\n\n### Manual\nDownload or source the javascript file and css file from [unpkg][unpkg-url]\n\nYou can also download it directly from the [releases listed in select-madu repository][release-url]\n\n```html\n\u003chead\u003e\n  \u003cscript type=\"text/javascript\" src=\"selectmadu.min.js\"\u003e\u003c/script\u003e\n  \u003clink rel=\"stylesheet\" href=\"selectmadu.css\"\u003e\n\u003c/head\u003e\n```\n\n### NPM\nYou can install SelectMadu from npm using the following command.\n\n```bash\nnpm install select-madu --save\n```\nand then import it in your javascript file\n```javascript\nimport SelectMadu from 'select-madu';\n```\nNote: CSS file has to be included separately\n\n### Basic usage\n```javascript\n  import SelectMadu from 'select-madu';\n\n  //To create\n  let instance = new SelectMadu({\n    //SelectMadu dom elements will be rendered within the specified parent element in target.\n    target: document.querySelector(\"#parentElement\"),\n\n    //Properties for initializing SelectMadu. Refer Properties info below.\n    props: {\n      datasource: [\n        { text: \"Ferrai\" }, \n        { text: \"Lamborghini\" },\n        { text: \"Aston Martin\" }\n      ]\n    }\n  });\n\n  //To destroy and remove\n  instance.$destroy();\n```\n\n### Svelte\nOptionally, if you are using Svelte you can import SelectMadu as a component.\n\n```javascript\nimport SelectMadu from 'select-madu';\n\n\u003cSelectMadu {...props}/\u003e\n```\nNote: CSS file has to be included separately\n\nCheck out [Select madu home page][select-madu-url] for usage documentation and examples.\n\n\n## API and Documentation\nCheck out [SelectMadu home page][select-madu-url] for detailed documentation with properties information and API methods.\n\n\n## Contribute\nPull requests are encouraged and always welcome. Help make SelectMadu better!\n\nTo work on SelectMadu\n```bash\ngit clone https://github.com/pavish/select-madu.git\ncd select-madu\nnpm install\n```\n\nThe component is written in [Svelte][svelte-url]. \nIt's an awesome library, you should check it out!\n\nSCSS is used for styling. It is separate from the component and is within styles folder.  \n\nTo build, run\n```bash\nnpm run build\n```\n\nBuild generates the build folder, which contains the iife variant, with and without minimization.\nIt also generates the nodesrc folder which contains the esm and umd variants for importing the component within your app.\n\nYou can also contribute by writing additional tests, adding issues that you encounter, or by helping with the documentation.\n\n\n## License\n[MIT](LICENSE)\n\n[bundle-folder-url]: https://github.com/pavish/select-madu/tree/master/bundle\n[docs-folder-url]: https://github.com/pavish/select-madu/tree/master/docs\n[svelte-url]: https://svelte.dev/\n[select-madu-url]: https://pavishkrg.com/select-madu\n\n[unpkg-url]: https://unpkg.com/browse/select-madu/dist/\n[release-url]: https://github.com/pavish/select-madu/releases\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavish%2Fselect-madu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpavish%2Fselect-madu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpavish%2Fselect-madu/lists"}