{"id":13637469,"url":"https://github.com/iliyaZelenko/vue-cool-select","last_synced_at":"2025-04-19T08:34:15.004Z","repository":{"id":33168710,"uuid":"153887953","full_name":"iliyaZelenko/vue-cool-select","owner":"iliyaZelenko","description":"Select with autocomplete, slots, bootstrap and material design themes.","archived":false,"fork":false,"pushed_at":"2024-02-28T13:51:26.000Z","size":8528,"stargazers_count":244,"open_issues_count":84,"forks_count":33,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-19T07:17:25.923Z","etag":null,"topics":["autocomplete","bootstrap","input","material-design","search","searching","select","vue"],"latest_commit_sha":null,"homepage":"https://iliyazelenko.github.io/vue-cool-select","language":"JavaScript","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/iliyaZelenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-10-20T09:04:22.000Z","updated_at":"2024-04-11T13:52:53.000Z","dependencies_parsed_at":"2024-04-13T12:45:07.815Z","dependency_job_id":"c5d0632c-a699-4f92-b474-884dba987b68","html_url":"https://github.com/iliyaZelenko/vue-cool-select","commit_stats":{"total_commits":311,"total_committers":15,"mean_commits":"20.733333333333334","dds":"0.28938906752411575","last_synced_commit":"8217ee5f440735ce3614a0eb17e4b5661dfa2e95"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Fvue-cool-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Fvue-cool-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Fvue-cool-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iliyaZelenko%2Fvue-cool-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iliyaZelenko","download_url":"https://codeload.github.com/iliyaZelenko/vue-cool-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249650618,"owners_count":21306037,"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","bootstrap","input","material-design","search","searching","select","vue"],"created_at":"2024-08-02T00:01:17.952Z","updated_at":"2025-04-19T08:34:14.317Z","avatar_url":"https://github.com/iliyaZelenko.png","language":"JavaScript","funding_links":[],"categories":["Components \u0026 Libraries","Vue","UI Components","UI Components [🔝](#readme)"],"sub_categories":["UI Components","Components","Form"],"readme":"  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://codecov.io/gh/iliyaZelenko/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/codecov/c/github/iliyaZelenko/vue-cool-select.svg\" alt=\"Coverage\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dm/vue-cool-select.svg\" alt=\"Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/v/vue-cool-select.svg\" alt=\"Version\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/l/vue-cool-select.svg\" alt=\"License\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://circleci.com/gh/iliyaZelenko/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://circleci.com/gh/iliyaZelenko/vue-cool-select.svg?style=shield\" alt=\"CircleCI Build Status\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://lgtm.com/projects/g/iliyaZelenko/vue-cool-select/context:javascript\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg alt=\"Language grade: JavaScript\" src=\"https://img.shields.io/lgtm/grade/javascript/g/iliyaZelenko/vue-cool-select.svg?logo=lgtm\u0026logoWidth=18\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://codebeat.co/projects/github-com-iliyazelenko-vue-cool-select-master\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg alt=\"codebeat badge\" src=\"https://codebeat.co/badges/a6d9cfc8-529e-48c7-ae04-7d69fe6b1239\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://standardjs.com/\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg alt=\"codebeat badge\" src=\"https://badgen.net/badge/code%20style/standard/f2a\" /\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-cool-select\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/npm/dt/vue-cool-select?color=red\u0026label=total%20downloads\" alt=\"Downloads\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/iliyaZelenko/vue-cool-select/graphs/contributors\" rel=\"noopener noreferrer\" target=\"_blank\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/contributors/iliyaZelenko/vue-cool-select.svg\" alt=\"Contributors\"\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\nThe current version is `3.x`, if you are looking for `2.x`, you can find [it here](README_2VERSION.md) (also, see [breaking changes](https://github.com/iliyaZelenko/vue-cool-select/blob/master/CHANGELOG.md#300-2019-09-18)).\n\n# [Flexible select](https://iliyazelenko.github.io/vue-cool-select) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Vue%20select%20component%20with%20autocomplete,%20slots,%20bootstrap%20and%20material%20design%20themes.\u0026url=https://github.com/iliyaZelenko/vue-cool-select\u0026via=IlyaZelenko\u0026hashtags=vue,bootstrap,developers,github,html,js,web,npm,material-design)\n\n\u003cdiv style=\"text-align: center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/z7XdAkb.png?3\" width=\"210px;\"\u003e\n  \u003cimg src=\"https://i.imgur.com/Ko1XsvT.png\" width=\"210px;\"\u003e\n  \u003cimg src=\"https://i.imgur.com/FeOD4Go.png\" width=\"210px;\"\u003e\n  \u003cimg src=\"https://i.imgur.com/38xQWCg.png\" width=\"210px;\"\u003e\n\u003c/div\u003e\n\n## [Demo + Documentation](https://iliyazelenko.github.io/vue-cool-select)\n\n[![](https://i.imgur.com/b7wxLPT.png)](https://iliyazelenko.github.io/vue-cool-select)\n\n## Features\n\n- no dependencies\n- props (30) allow you to customize a component in a various ways\n- slots (13) allow content to be changed anywhere\n- events (8) will let you know about everything\n- autocomplete (you can use custom search, you can also disable the search input)\n- keyboard controls (not only through the arrows)\n- support on mobile devices\n- validation, state of error and success\n- disabled and readonly\n- small and large sizes (as in bootstrap)\n- the ability to set your styles, you can write theme from scratch. 2 themes: Bootstrap 4 (equal styles), Material Design\n- TypeScript support\n- tab navigation\n- SSR (Server-Side Rendering)\n\n- auto determine the suitable position for the menu if it goes beyond the viewport\n\nWrite your suggestions, glad to add.\n\n## Installation\n\n`yarn add vue-cool-select` or `npm install --save vue-cool-select`\n\n## Get started\n\n### NPM\n\n1. Import this plugin, css (theme) and add plugin via `Vue.use`:\n```js\nimport { CoolSelectPlugin } from 'vue-cool-select'\n\n// paste the line below only if you need \"bootstrap\" theme\nimport 'vue-cool-select/dist/themes/bootstrap.css'\n// paste the line below only if you need \"material-design\" theme\nimport 'vue-cool-select/dist/themes/material-design.css'\n// you can also import your theme\n\nVue.use(CoolSelectPlugin)\n```\n\n2. Use inside another component:\n```js\nimport { CoolSelect } from 'vue-cool-select'\n\nexport default {\n  components: { CoolSelect },\n  data () {\n    return {\n      // simple example of items\n      items: ['Item 1', 'Item 2', 'Item 3'],\n      // there will be a selected item\n      selected: null\n    }\n  }\n}\n```\n\n3. Add to `\u003ctemplate\u003e`:\n\n```vue\n\u003ccool-select\n  v-model=\"selected\"\n  :items=\"items\"\n/\u003e\n```\n\n### Browser (CDN)\n\nInclude vue-cool-select in the page.\n\n```html\n\u003cscript src=\"https://unpkg.com/vue-cool-select\"\u003e\u003c/script\u003e\n\n\u003c!-- paste the line below only if you need \"bootstrap\" theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css\"\u003e\n\u003c!-- paste the line below only if you need \"material-design\" theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-cool-select/dist/themes/material-design.css\"\u003e\n```\n\nIf Vue is detected in the Page, the plugin is installed automatically.\n\n---\n\nDocumentation and examples [here](https://iliyazelenko.github.io/vue-cool-select).\n\n#### TODO\n- multi-select\n- 100% tests coverage\n\nI am happy to add something or improve, you can write what you want to see.\nI also have more motivation to work if you give a star, thanks! :smile:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiliyaZelenko%2Fvue-cool-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FiliyaZelenko%2Fvue-cool-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FiliyaZelenko%2Fvue-cool-select/lists"}