{"id":17856833,"url":"https://github.com/jsmith01/vue-selectable","last_synced_at":"2025-06-25T08:36:42.846Z","repository":{"id":57184697,"uuid":"91099606","full_name":"JSmith01/vue-selectable","owner":"JSmith01","description":"Directive to create mouse selection of objects in Vue.js applications","archived":false,"fork":false,"pushed_at":"2020-06-21T21:32:43.000Z","size":68,"stargazers_count":69,"open_issues_count":3,"forks_count":21,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-21T19:02:57.425Z","etag":null,"topics":["directive","plugin","vuejs","vuejs2"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JSmith01.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-12T14:28:23.000Z","updated_at":"2024-09-19T07:18:19.000Z","dependencies_parsed_at":"2022-09-14T09:00:56.251Z","dependency_job_id":null,"html_url":"https://github.com/JSmith01/vue-selectable","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/JSmith01/vue-selectable","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSmith01%2Fvue-selectable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSmith01%2Fvue-selectable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSmith01%2Fvue-selectable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSmith01%2Fvue-selectable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JSmith01","download_url":"https://codeload.github.com/JSmith01/vue-selectable/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JSmith01%2Fvue-selectable/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261836723,"owners_count":23217281,"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":["directive","plugin","vuejs","vuejs2"],"created_at":"2024-10-28T03:09:42.895Z","updated_at":"2025-06-25T08:36:42.821Z","avatar_url":"https://github.com/JSmith01.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vue-selectable\n\n## Overview\n\nIt's common task to make mouse selection of some objects on the page. This directive makes this task\nextremely easy, all you need to implement object selection is few lines of code.\nIt was designed after jQuery Selectable interaction, with some details borrowed from `angular-multiple-selection`.\nIt supports plain mouse selection and adding to previously selected values with\n`Ctrl` key pressed during selection. Single items can be excluded from selection \nwith Ctrl + click on them. Scrolling of document or some specified block while selecting \nis also supported now, but only on Y axis.\n\n## Requirements\n\n* vue: ^1.0\n* vue2: ^2.0\n* Browsers - briefly tested on Chrome 58 \u0026 83, IE 11, Firefox 53\n\n## Install\n\nFrom npm:\n```\n$ npm install vue-selectable  --save\n```\n\n## Usage\n\nTo use directive normally you'll need two arrays, one for selected items - with boolean values for \nevery selectable item, another for items under selection box. By default elements identified by\n`selectable` class will be considered as selectable items.\nAnother thing that you'll definitely need is a element that will be selection box. Directive\nwill change `height`, `width`, `top`, and `left` attributes of this element, and toggle its\nvisibility by changing `display` attribute from `block` to `none` and vise versa.\n\n### Vue 1.x (ES6 syntax)\n\nNB: for Vue 2.x all you need is to write `v-for` as `v-for=\"(item, i) in items\"`\n\n```html\n\u003cdiv v-selectable=\"{ \n         selectedGetter: selectedGetter, \n         selectedSetter: selectedSetter, \n         selectingSetter: selectingSetter\n         }\" id=\"app\"\u003e\n        \u003cdiv class=\"selection\"\u003e\u003c/div\u003e\n        \u003cdiv v-for=\"(i, item) in items\"\n             :class=\"{ selected: !!selected[i], selecting: !!selecting[i] }\"\n         \t class=\"selectable\" \u003e{{ item }}\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nimport selectable from 'vue-selectable';\n\nnew Vue({\n\tel: '#app',\n    data: {\n        selected: [],\n        selecting: [],\n        items: ['abc', 'bcd', 'cde']\n    },\n    directives: { selectable },\n    methods: {\n        selectedGetter() { return this.selected; },\n        selectedSetter(v) { this.selected = v; },\n        selectingSetter(v) { this.selecting = v; }\n    }\n});\n```\n\nSelection items list in directive can be updated by calling `setSelectableItems(el, itemSelector)`,\nwhere `el` is element where directive applied. Optional argument `itemSelector` can be used to change\nselectable items selector. Function returns number of selectable items added or -1 in case of error.\n\n## Options\n\n`v-selectable` requires one mandatory parameter - directive parameter - object with 3 functions,\n`selectedGetter`, `selectedSetter`, and `selectingSetter`, to get/set arrays 'selected' (selection \nstatus - array of boolean), 'selecting' (array of items selection status during selection drag, \narray of boolean; must be used to display realtime selection visual feedback). \n\n`selectedSetter` function also receives \"selecting\" array as a second argument. This could help when \nwe need some custom selection logic.\n\nIf you have 5 selectable items, `selected` array will have 5 elements initially\nset to `false`. When user selects some item(s), values change to `true` accordingly. The same applies\nfor `selecting` array.\n\nAlso you can specify additional parameters in the object for JS `selectable` component underneath.\nFor example you can set `rootElement` to some element other than \"document\" \n(to attach event listeners to it). Also it's possible to set `rootElement` to `null` initially and then\nset it when necessary element appears in the DOM tree; event listeners will attach right after\n(but the trick will work only once). Or you can set `renderSelecting/renderSelection` options to true to have\ndirective manage CSS classes instead of Vue.js framework.\n\nOther parameters available:\n* `data-items` - CSS selector to identify selectable items, by default it is set to `.selectable`\n  (elements with CSS class \"selectable\")\n* `data-box` - selection box element. By default it tries to use element with `selection` CSS class\n* `data-constraint` - box that constrains selection area (selection box can be only inside area\n  limited to this element), by default selection area limited to element with directive\n\n## Exported util functions\nTwo utility functions are exported with a directive to help configuring directive. Both require DOM node\nwith directive as a first argument (\"el\").\n* `setSelectableItems(el, [itemSelector])` - if used without second argument, rereads DOM to fetch\n  selectable items (useful after e.g. AJAX load of items). Another CSS selector can be specified to\n  create a new list of selectable items.\n* `setOptions(el, options)` - sets directive options on the fly. For now is required to set \n  `scrollingFrame` internal parameter for Vue.js v2 (see `examples-vue2/example3.html`).\n  \n## Internal options\nExcept already described `selectedGetter`, `selectedSetter`, and `selectingSetter`, directive has these\ninternal options, that can be set using directive declaration (as getters/setters) or on the fly:\n* `disableTextSelection` (boolean) - disable browser text selection when selection box is active (turned on by default)\n* `scrollingFrame` (DOM node) - element with scrollbar, that contains list of selectable items\n* `scrollSpeed` (int) - speed of scroll (in px per 16ms, default 10px)\n* `scrollDistance` (int) - distance from borders (in px, default 10px) when scroll begins to work\n* `scrollDocumentEnabled` (boolean) - enable (default)/disable document scrolling while selecting items, ignored when scrollingFrame is configured\n* `renderSelected` (boolean) - add CSS selectedClass to elements currently selected (w/o framework)\n* `renderSelecting` (boolean) - add CSS selectedClass to elements currently under selection box (w/o framework)\n* `selectingClass` (string) - CSS class used to mark items under selection box (\".selecting\" by default)\n* `selectedClass` (string) - CSS class used to mark selected items (\".selected\" by default)\n* `overrideAddMode` (boolean) - selection frame always adds items to selection when this flag is true, despite \"Ctrl\" or \"Meta\" keys being pressed (false by default)\n\n## Examples\n\nExample usages can be found in `examples-vue1` directory for Vue.js v1 and `examples-vue2` for Vue.js v2.\nExamples for v2 were tested against version 2.3.3 and 2.6.11.\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmith01%2Fvue-selectable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsmith01%2Fvue-selectable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsmith01%2Fvue-selectable/lists"}