{"id":21958090,"url":"https://github.com/ineoo/vue-multi-select","last_synced_at":"2025-04-10T01:12:55.820Z","repository":{"id":55536367,"uuid":"101665383","full_name":"iNeoO/vue-multi-select","owner":"iNeoO","description":"This component gives you a multi/single select with the power of Vuejs components.","archived":false,"fork":false,"pushed_at":"2020-12-23T09:24:16.000Z","size":4914,"stargazers_count":100,"open_issues_count":6,"forks_count":20,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T01:12:51.231Z","etag":null,"topics":["multi-select","vue","vue-components","vuejs","vuejs-components","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/iNeoO.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2017-08-28T16:46:54.000Z","updated_at":"2024-12-18T06:31:42.000Z","dependencies_parsed_at":"2022-08-15T02:50:14.392Z","dependency_job_id":null,"html_url":"https://github.com/iNeoO/vue-multi-select","commit_stats":null,"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iNeoO%2Fvue-multi-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iNeoO%2Fvue-multi-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iNeoO%2Fvue-multi-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iNeoO%2Fvue-multi-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iNeoO","download_url":"https://codeload.github.com/iNeoO/vue-multi-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248137891,"owners_count":21053775,"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":["multi-select","vue","vue-components","vuejs","vuejs-components","vuejs2"],"created_at":"2024-11-29T08:59:38.265Z","updated_at":"2025-04-10T01:12:55.794Z","avatar_url":"https://github.com/iNeoO.png","language":"Vue","readme":"This component gives you a multi/single select with the power of Vuejs components.\n\n## Demo and doc site\n[vue-multi-select](https://vue-multi-select.tuturu.io)\n\n[https://github.com/IneoO/vue-multi-select](https://github.com/IneoO/vue-multi-select)\n\n## What's new in v4.6.0\nSet a props for label when empty data\n\n## Dependencies\n- required: Vuejs \u003e= 2.x\n\n## Install\n1. Clone the repo or `npm install vue-multi-select --save`\n2. Include the file in your app\n  `import vueMultiSelect from 'vue-multi-select';`\n  `import 'vue-multi-select/dist/lib/vue-multi-select.min.css'`\n\n## Contributing\nIssues and PR's are much appreciated.\nWhen you create a new PR please make it against the develop branch when adding new features and to the fix branch when fixing small issues instead of master.\n\n## Usage and Documentation\n| Params        | Type        |\n| ------------- | ----------- |\n| options       | Object      |\n| filters       | Array       |\n| selectOptions | Array       |\n| v-model       | Array       |\n| reloadInit    | Boolean     |\n| btnLabel      | Function    |\n| btnClass      | String      |\n| popoverClass  | String      |\n| search        | Boolean     |\n| eventName     | String      |\n| position      | String      |\n| searchPlaceholder | String  |\n| historyButton | Boolean     |\n| historyButtonText | String  |\n| disabled      | Boolean     |\n| disabledUnSelect | Boolean     |\n| emptyTabText  | String      |\n\n(NB. position is a string ex: 'top-left', 'top-right', default is 'bottom-left')\n\n| Events        | params      |\n| ------------- | ----------- |\n| selectionChanged | values selected |\n| open          | -           |\n| close          | -           |\n\n(NB. selectionChanged naming can be change with eventName)\n\n### 1. options (Contains options to set the multi-select)\n\n| Params        | Type     | Default                                                                 | Description                           |\n| ------------- | -------- | ----------------------------------------------------------------------- | ------------------------------------- |\n| cssSelected   | Function | (option) =\u003e  option['selected'] ? {  'font-weight': 'bold',color: '#5755d9',} : ''  | Css passed to value       |\n| groups        | Boolean  | false                                                                   | Display or not groups selection       |\n| multi         | Boolean  | false                                                                   | Set single or multiple selection      |\n| labelList     | String   | 'list'                                                                  | Name Attributes for list              |\n| labelName     | String   | 'name'                                                                  | Name Attributes for value to display  |\n| labelValue    | String   | labelName                                                               | Name Attributes for value to comparaison between them  |\n| labelSelected | String   | 'selected'                                                              | Name attributes for value selected    |\n| labelDisabled | String   | 'disabled'                                                              | Name attributes for value disabled    |\n| groupName     | String   | 'name'                                                                  | Name Attributes for groups to display |\n\n\\*if you use html balise and don't want to have them find in the search use labelHtml, search will just check the property labelName but v-html the labelHtml.\n\n### 2. filters to apply to select many options\n```javascript\n// Exemple with Select/Deselect all\nconst filters = [];\nfilters.push({\n  nameAll: 'Select all', // label when want to select all elements who answer yes to the function\n  nameNotAll: 'Deselect all', //label when want to deselect all elements who answer yes to the function\n  func(elem) {\n    return true;\n  },\n});\n\n// Second exemple to select all elements who contain 2\nfilters.push({\n  nameAll: 'Select all elements with 2',\n  nameNotAll: 'Deselect all elements with 2',\n  func(elem) {\n    return elem.name.indexOf('2') !== -1;\n  }\n});\n```\n\n### 3. elements to select/deselect\n``` javascript\n\n// when groups not set or false\ndata = [\n  {name: 'choice 1'}, // Name can be changed with labelName in options\n  {name: 'choice 2'},\n  {name: 'choice 3'},\n  {name: 'choice 4'},\n  {name: 'choice 5'},\n]\n\n// or just an array\n// it's also possible when to have an array of strings\n// in list when groups is set to true.\ndata = [\n  'choice 1',\n  'choice 2',\n  'choice 3',\n  'choice 4',\n  'choice 5',\n]\n\n// when groups set to true\n\ndata = [{\n  name: 'choice 1', // Can be changed with tabName in options\n  list: [\n    {name: 'choice 1'}, // Name can be changed with labelName in options\n    {name: 'choice 2'},\n    {name: 'choice 3'},\n    {name: 'choice 4'},\n    {name: 'choice 5'},\n  ]\n}, {\n  name: 'choice 10', // Can be changed with tabName in options\n  list: [\n    {name: 'choice 11'}, // Name can be changed with labelName in options\n    {name: 'choice 12'},\n    {name: 'choice 13'},\n    {name: 'choice 14'},\n    {name: 'choice 15'},\n  ]\n}]\n```\n\n### 4. values selected\n``` javascript\n[ {name: 'choice 1'}, {name: 'choice 11'}] // In the case we selected choice 1 and choice 11\n```\n\n### 5. Manual open/close\nyou can access to openMultiSelect()/closeMultiSelect() by ref to manualy open/close the mutliSelect\n```html\n\u003ctemplate\u003e\n  \u003cmult-select ref=\"multiSelect\" /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  mounted() {\n    this.refs.multiSelect.openMultiSelect();\n  },\n};\n\u003c/script\u003e\n```\n\n\n### 6. Examples\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cmulti-select\n      v-model=\"values\"\n      :options=\"options\"\n      :filters=\"filters\"\n      :btnLabel=\"btnLabel\"\n      search\n      historyButton\n      :searchPlaceholder=\"Search\"\n      :selectOptions=\"data\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport vueMultiSelect from 'vue-multi-select';\nimport 'vue-multi-select/dist/lib/vue-multi-select.css';\n\nexport default {\n  data() {\n    return {\n      search: 'Search things',\n      btnLabel: values =\u003e `A simple vue multi select (${values.length})`,\n      name: 'first group',\n      values: [],\n      data: [{\n        name: 'first group',\n        list: [\n          { name: '0' },\n          { name: '2' },\n          { name: '3' },\n          { name: '8' },\n          { name: '9' },\n          { name: '11' },\n          { name: '13' },\n          { name: '14' },\n          { name: '15' },\n          { name: '18' },\n        ],\n      }, {\n        name: 'second group',\n        list: [\n          { name: '21' },\n          { name: '22' },\n          { name: '24' },\n          { name: '27' },\n          { name: '28' },\n          { name: '29' },\n          { name: '31' },\n          { name: '33' },\n          { name: '35' },\n          { name: '39' },\n        ],\n      }],\n      filters: [{\n        nameAll: 'select \u003c= 10',\n        nameNotAll: 'Deselect \u003c= 10',\n        func(elem) {\n          return elem.name \u003c= 10;\n        },\n      }, {\n        nameAll: 'Select contains 2',\n        nameNotAll: 'Deselect contains 2',\n        func(elem) {\n          return elem.name.indexOf('2') !== -1;\n        },\n      }],\n      options: {\n        multi: true,\n        groups: true,\n      },\n    };\n  },\n  methods: {\n  },\n  components: {\n    vueMultiSelect,\n  },\n};\n\u003c/script\u003e\n```\n\nIt's possible to use slot-scope to custom option\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-multi-select\n      v-model=\"values\"\n      search\n      historyButton\n      :options=\"options\"\n      :filters=\"filters\"\n      :btnLabel=\"btnLabel\"\n      @open=\"open\"\n      @close=\"close\"\n      :selectOptions=\"data\"\u003e\n      \u003ctemplate v-slot:option=\"{option}\"\u003e\n        \u003cinput type=\"checkbox\" :checked=\"option.selected\"/\u003e\n        \u003cspan\u003e{{option.name}}\u003c/span\u003e\n      \u003c/template\u003e\n    \u003c/vue-multi-select\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Build Setup\n\n``` bash\n- `npm run dev`: Shortcut to run dev\n\n- `npm run doc`: Shortcut to run dev-doc\n\n- `npm run build:doc`: Shortcut to build doc.\n\n- `npm run build:lib`: Production ready build of your library as an ES6 module (via UMD), ready to import into another project via npm.\n\n```\n\nTesting Supported By\u003cbr/\u003e\n\u003cimg width=\"160\" src=\"http://foundation.zurb.com/sites/docs/assets/img/logos/browser-stack.svg\" alt=\"BrowserStack\"/\u003e\n\n## thanks\n\n[Patrice Clément](https://github.com/monsieurp)\n\n[Pierre Guilbert](https://github.com/guilbep)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fineoo%2Fvue-multi-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fineoo%2Fvue-multi-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fineoo%2Fvue-multi-select/lists"}