├── .circleci └── config.yml ├── .github ├── ISSUE_TEMPLATE │ ├── 1_bugs.md │ └── 2_other.md └── stale.yml ├── .gitignore ├── .npmignore ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── LICENSE.md ├── README.md ├── assets ├── builder-banner.png ├── logo-horizontal.svg ├── logo.svg ├── screenshot-1.png ├── tailwind.svg ├── vueform-banner-new.png └── vueform-banner.png ├── babel.config.js ├── build ├── themes.rollup.config.js ├── vue2.rollup.config.js └── vue3.rollup.config.js ├── dist ├── multiselect.global.js ├── multiselect.js ├── multiselect.min.js ├── multiselect.mjs ├── multiselect.vue2.global.js ├── multiselect.vue2.js └── multiselect.vue2.min.js ├── jest ├── jest.config.vue2.js └── jest.config.vue3.js ├── package.json ├── postcss.config.js ├── src ├── Multiselect.d.ts ├── Multiselect.vue ├── composables │ ├── useA11y.js │ ├── useClasses.js │ ├── useData.js │ ├── useDropdown.js │ ├── useI18n.js │ ├── useKeyboard.js │ ├── useMultiselect.js │ ├── useOptions.js │ ├── usePointer.js │ ├── usePointerAction.js │ ├── useRefs.js │ ├── useScroll.js │ ├── useSearch.js │ └── useValue.js ├── index.d.ts └── utils │ ├── arraysEqual.js │ ├── isNullish.js │ ├── isObject.js │ ├── normalize.js │ ├── objectsEqual.js │ ├── resolveDeps.js │ └── toRef.js ├── tests └── unit │ ├── Multiselect.spec.js │ ├── __mocks__ │ └── @popperjs │ │ └── core │ │ └── lib │ │ ├── modifiers │ │ ├── flip.js │ │ └── preventOverflow.js │ │ └── popper-lite.js │ ├── composables │ ├── useA11y.spec.js │ ├── useClasses.spec.js │ ├── useData.spec.js │ ├── useDropdown.spec.js │ ├── useKeyboard.spec.js │ ├── useMultiselect.spec.js │ ├── useOptions.spec.js │ ├── usePointer.spec.js │ ├── usePointerAction.spec.js │ ├── useScroll.spec.js │ ├── useSearch.spec.js │ └── useValue.spec.js │ ├── helpers │ ├── testSearch.js │ ├── vue2.js │ └── vue3.js │ ├── i18n.spec.js │ └── utils │ └── normalize.spec.js └── themes ├── default.css ├── default.scss ├── tailwind.css └── tailwind.scss /.circleci/config.yml: -------------------------------------------------------------------------------- 1 | version: 2.1 2 | 3 | orbs: 4 | codecov: codecov/codecov@1.1.3 5 | 6 | jobs: 7 | build: 8 | docker: 9 | - image: cimg/node:15.4.0 10 | 11 | steps: 12 | - checkout 13 | 14 | # Download and cache dependencies 15 | - restore_cache: 16 | keys: 17 | - v4-dependencies-{{ checksum "package.json" }} 18 | # fallback to using the latest cache if no exact match is found 19 | - v4-dependencies- 20 | 21 | - run: npm install --legacy-peer-deps 22 | 23 | - save_cache: 24 | paths: 25 | - node_modules 26 | key: v4-dependencies-{{ checksum "package.json" }} 27 | 28 | - run: npm run test:vue3 29 | 30 | - codecov/upload: 31 | file: './coverage/coverage-final.json' 32 | flags: 'vue3' 33 | 34 | - run: npm run test:vue2 35 | 36 | - codecov/upload: 37 | file: './coverage/coverage-final.json' 38 | flags: 'vue2' -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/1_bugs.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Bug report" 3 | about: "If you've found a bug." 4 | --- 5 | 6 | 10 | 11 | ### Version 12 | 13 | * Vue version: 14 | 15 | ### Description 16 | 17 | 18 | 19 | ### Demo 20 | 21 | Please use our [JSFiddle template](https://jsfiddle.net/5yxpmw4v/) to reproduce the bug. Issues without working reproduction might be ignored. -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/2_other.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Other" 3 | about: "Open an issue about anything else than a bug." 4 | --- -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 360 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 15 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | - upcoming 10 | - enhancement 11 | # Label to use when marking an issue as stale 12 | staleLabel: stale 13 | # Comment to post when marking an issue as stale. Set to `false` to disable 14 | markComment: Hi 👋 this issue has been automatically marked as `stale` 📌 because it has not had recent activity 😴. It will be closed if no further activity occurs. 15 | # Comment to post when closing a stale issue. Set to `false` to disable 16 | closeComment: Hi again 👋 we would like to inform you that this issue has been automatically closed 🔒 because it had not recent activity during the stale period. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode 2 | .DS_Store 3 | node_modules/ 4 | npm-debug.log 5 | stats.json 6 | .npmrc 7 | coverage/ 8 | .idea 9 | package-lock.json -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .editorconfig 3 | .DS_Store 4 | npm-debug.log 5 | node_modules/ 6 | .circleci 7 | assets/ 8 | build/ 9 | coverage/ 10 | jest/ 11 | node_modules/ 12 | tests/ 13 | .gitignore 14 | babel.config.js 15 | CODE_OF_CONDUCT.md -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## v2.6.11 2 | 3 | > `2024-11-23` 4 | 5 | ### 🐞 Bug Fixes 6 | - Don't throw error when endpoint type `options` is undefined 7 | 8 | ## v2.6.10 9 | 10 | > `2024-09-16` 11 | 12 | ### 🐞 Bug Fixes 13 | - Option should display as selected even when value is an object 14 | 15 | ## v2.6.9 16 | 17 | > `2024-07-29` 18 | 19 | ### 🐞 Bug Fixes 20 | - Removed optional chaining, fixes #420 21 | 22 | ## v2.6.8 23 | 24 | > `2024-06-14` 25 | 26 | ### 🎉 Feature 27 | - export `resolvedOptions` 28 | 29 | ### 🐞 Bug Fixes 30 | - Typing fixes (Thanks to @nurbek0298 🙏) 31 | - Always scroll to selected option on open #406 32 | - Use `click` instead of `mousedown` event #387 33 | 34 | ### 🧹 Chore 35 | - Performance optimization (Thanks to @negezor 🙏) 36 | 37 | ## v2.6.7 38 | 39 | > `2024-03-20` 40 | 41 | ### 🐞 Bug Fixes 42 | - Clicking on scroll bar closes the dropdown fix #383 43 | - Types for scoped slots #391 44 | - Missing method types and typo fixes #376 #392 45 | - Don't show dropdown id when id is not defined 46 | - Avoid error when multiselect does not exist #394 47 | 48 | ## v2.6.6 49 | 50 | > `2023-10-18` 51 | 52 | ### 🎉 Feature 53 | - Added `appendTo` option. 54 | - Added `${id}-dropdown` to dropdown DOM. 55 | 56 | ### 🐞 Bug Fixes 57 | - Included `@popperjs/core` for `appendToBody` / `appendTo` position fixes. 58 | 59 | ## v2.6.5 60 | 61 | > `2023-10-16` 62 | 63 | ### 🐞 Bug Fixes 64 | - Type fixes. 65 | 66 | ## v2.6.4 67 | 68 | > `2023-10-14` 69 | 70 | ### 🐞 Bug Fixes 71 | - Type fixes. 72 | 73 | ## v2.6.3 74 | 75 | > `2023-10-07` 76 | 77 | ### 🎉 Feature 78 | - Added `appendToBody` **experimental** feature for **Vue.js 3 only**. #133 #341 79 | - `trackBy` can now accept array. #314 80 | - Auto truncate long tags. Added `breakTags` prop. #346 81 | - Added `handleCaretClick` and `isOpen` to `caret` slot. #320 82 | - The externalValue (from `v-model`) is now reactive. #356 83 | 84 | ### 🐞 Bug Fixes 85 | - `limit` prop was not reactive. #342 86 | - Trigger `deselect` on tags backspace. #335 87 | - Keyboard nav on group select fix. #354 88 | - TypeScript fixes. Thanks @antpngl92 @Adeiko @mathildaax 🙏 #287 #282 #260 #230 89 | - `searchFilter` did not receive proper args. #338 #337 90 | - Open dropdown when it has search, it's focued and dropdown is closed. #333 91 | - Options are cleared before `clear` event is emitted. #332 92 | 93 | ## v2.6.2 94 | 95 | > `2023-04-17` 96 | 97 | ### 🐞 Bug Fixes 98 | - Removed `sideEffects: false` from `package.json`. 99 | 100 | ## v2.6.1 101 | 102 | > `2023-03-14` 103 | 104 | ### 🐞 Bug Fixes 105 | - Use `.mjs` for `import`. 106 | 107 | ## v2.6.0 108 | 109 | > `2023-03-11` 110 | 111 | ### 🎉 Feature 112 | - All texts including, option & group labels can now be provided in multiple languages. Added `locale` and `fallbackLocale` props. 113 | - Added `searchFilter` prop that allow to provide a custom search algorithm #313. 114 | - Added `allowAbsent` option to allow adding values that are not among the options. 115 | - Added `closeOnDeselect` prop. 116 | - Deprecated `option` event, added `create` instead (`option` still works). 117 | - Tags that added can also be disabled, which will prevent their removal. 118 | 119 | ### 🐞 Bug Fixes 120 | - Fix for new option display when using `groups`, `createOption` and `tags` #254 #291. 121 | - String pointer equality #316. 122 | - Disabled tags will not be removed on backspace #318. 123 | - Added `.mjs` extension build and referenced `module` to that #290 #258. 124 | - The `selectAll()` now does not select disabled options and does not duplicate already selected options. 125 | 126 | ## v2.5.8 127 | 128 | > `2022-12-21` 129 | 130 | ### 🎉 Feature 131 | - Added `--ms-border-width-active` and `--ms-border-color-active` CSS vars #213. 132 | - Added `@max` event #269. 133 | - Added `clearOnBlur` option #251. 134 | 135 | ### 🐞 Bug Fixes 136 | - Removed `max-height` duplicate from default theme #240. 137 | - Norwegian chars fix #243. 138 | - Trigger `@change` event on updating external value #259. 139 | - Docs fix for 2.7 installation instructions #294. 140 | - Docs fix fiddle url. 141 | - Tags dropdown focus fix #286 #300. 142 | - Stop propagation on tag remove click #295. 143 | 144 | ## v2.5.7 145 | 146 | > `2022-11-21` 147 | 148 | ### 🎉 Feature 149 | - **BREAKING**: added a wrapper `div` and related classes inside the main container next to the dropdown container. 150 | - Accessibility improvements. 151 | 152 | ### 🐞 Bug Fixes 153 | - Don't select new tag on IME enter #226. 154 | - Removed `v-html` from option & single label for XSS security #278. 155 | - Arrow left should not throw error when not using tags #271. 156 | 157 | ## v2.5.6 158 | 159 | > `2022-09-28` 160 | 161 | ### 🐞 Bug Fixes 162 | - Async options resolve fix [#266](https://github.com/vueform/multiselect/issues/266). 163 | 164 | ## v2.5.5 165 | 166 | > `2022-09-26` 167 | 168 | ### 🎉 Feature 169 | - Unnecessary ES6 feature removed. 170 | 171 | ## v2.5.4 172 | 173 | > `2022-09-26` 174 | 175 | ### 🎉 Feature 176 | - A11y improvements. 177 | 178 | ## v2.5.3 179 | 180 | > `2022-09-22` 181 | 182 | ### 🎉 Feature 183 | - A11y improvements. 184 | 185 | ## v2.5.2 186 | 187 | > `2022-07-22` 188 | 189 | ### 🐞 Bug Fixes 190 | - Fix for `tailwind.css`. 191 | 192 | ## v2.5.1 193 | 194 | > `2022-07-11` 195 | 196 | ### 🎉 Feature 197 | - Vue `2.7` compatibility. 198 | 199 | ## v2.5.0 200 | 201 | > `2022-07-11` 202 | 203 | ### 🎉 Feature 204 | - Vue `2.7` compatibility. 205 | 206 | ## v2.4.2 207 | 208 | > `2022-05-31` 209 | 210 | ### 🐞 Bug Fixes 211 | - Hotfix for ES6 [#235](https://github.com/vueform/multiselect/issues/235) 212 | - 213 | ## v2.4.1 214 | 215 | > `2022-05-31` 216 | 217 | ### 🐞 Bug Fixes 218 | - Hotfix for SSR [#235](https://github.com/vueform/multiselect/issues/235) 219 | 220 | ## v2.4.0 221 | 222 | > `2022-05-30` 223 | 224 | ### 🎉 Feature 225 | - 🎉 Added accessibility (a11y) support [#22](https://github.com/vueform/multiselect/issues/22), [#179](https://github.com/vueform/multiselect/issues/179). 226 | - 🎉 Added infinite scroll [#76](https://github.com/vueform/multiselect/issues/76), [#165](https://github.com/vueform/multiselect/issues/165), [#198](https://github.com/vueform/multiselect/issues/198). 227 | - 🎉 Added RTL support [#206](https://github.com/vueform/multiselect/issues/206). 228 | - 🎉 Close on click if opened [#162](https://github.com/vueform/multiselect/issues/162). 229 | - Added `id` to input when searchable. 230 | - Re-open input on arrows & search type if closed. 231 | - Close dropdown instead of blur on select. 232 | - Added `regex` option [#138](https://github.com/vueform/multiselect/issues/138). 233 | - Scroll to first selected on open [#168](https://github.com/vueform/multiselect/issues/168). 234 | - Options are not reversed when `openPosition: true`. 235 | - Added `reverse` option. 236 | - Added `searchStart` option [#169](https://github.com/vueform/multiselect/issues/169). 237 | - Added `disabledProp` option [#202](https://github.com/vueform/multiselect/issues/202). 238 | - Added `onCreate` option [#204](https://github.com/vueform/multiselect/issues/204). 239 | - Added `select$` as second param to events and async options. 240 | - Added `isSelected` & `isPointed` to `option` slot scope [#195](https://github.com/vueform/multiselect/issues/195). 241 | 242 | ### 🐞 Bug Fixes 243 | - Headless UI conflict resolved [#182](https://github.com/vueform/multiselect/issues/182). 244 | - Keep selected options when async [#228](https://github.com/vueform/multiselect/issues/228). 245 | - Show spinner even when not active [#223](https://github.com/vueform/multiselect/issues/223). 246 | - Allow `false` value [#222](https://github.com/vueform/multiselect/issues/222). 247 | - Resolve options on `minChars: 0` too [#230](https://github.com/vueform/multiselect/issues/230). 248 | - Added `keyup`, `keydown` events. 249 | - Resolved number tag creation duplicate bug. 250 | - Input height fix when `searchable` for FF. 251 | - CSS: moved max height to dropdown container from wrapper. 252 | - Vite & Nuxt 3 build warn fixes.). 253 | 254 | ## v2.3.4 255 | 256 | > `2022-05-11` 257 | 258 | ### 🎉 Feature 259 | - Async options change detectiion. 260 | - Label prop change detection. 261 | - Option & label texts can contain HTML. 262 | 263 | ## v2.3.3 264 | 265 | > `2022-02-26` 266 | 267 | ### 🎉 Feature 268 | - Added `attrs` prop. 269 | 270 | ## v2.3.2 271 | 272 | > `2022-02-06` 273 | 274 | ### 🐞 Bug Fixes 275 | - Removed `@apply` from default theme. 276 | 277 | ## v2.3.1 278 | 279 | > `2021-12-16` 280 | 281 | ### 🐞 Bug Fixes 282 | - Removed `exports` from `package.json` [#178](https://github.com/vueform/multiselect/issues/178). 283 | 284 | ## v2.3.0 285 | 286 | > `2021-12-16` 287 | 288 | ### 🎉 Feature 289 | - **Deprecated:** `appendNewTag`, `createTag`, `addTagOn` props and `@tag` event. 290 | - Added `appendNewOption`, `createOption`, `addOptionOn` props and `@option` event [#150](https://github.com/vueform/multiselect/issues/150). 291 | - Added `selectAll` method [#172](https://github.com/vueform/multiselect/issues/172). 292 | - The `trackBy` prop now defaults to `label` [#175](https://github.com/vueform/multiselect/issues/175). 293 | - Replaces focus on search when an option is selected [#163](https://github.com/vueform/multiselect/issues/163). 294 | - Added `` wrapper for single label with `singleLabelText` class key [#157](https://github.com/vueform/multiselect/issues/157). 295 | 296 | ### 🐞 Bug Fixes 297 | - Don't show spinner when not active [#156](https://github.com/vueform/multiselect/issues/156). 298 | - Tailwind CSS 3 compatibility issue fix [#176](https://github.com/vueform/multiselect/issues/176). 299 | - Don't show caret when `showOptions` are disabled [#173](https://github.com/vueform/multiselect/issues/173). 300 | - Resolved headless UI modal click issue [#148](https://github.com/vueform/multiselect/issues/148). 301 | - Resolved Tailwind CSS/form ring issue [#135](https://github.com/vueform/multiselect/issues/135). 302 | - Made classes reactive [#126](https://github.com/vueform/multiselect/issues/126). 303 | - The `addTagOn` prop uses `key` instead of `keyCode` internally [#125](https://github.com/vueform/multiselect/issues/125). 304 | 305 | ## v2.2.1 306 | 307 | > `2021-11-23` 308 | 309 | ### 🐞 Bug Fixes 310 | - Added missing CSS vars. 311 | 312 | ## v2.2.0 313 | 314 | > `2021-09-09` 315 | 316 | ### 🎉 Feature 317 | - 🎉🎉 Added `groups` and related props which allow groupping options. 🎉🎉 318 | - Added `tailwind.scss` theme to use instead of `classes` if needed. 319 | - Added support for case sensitive tags when `createTag` is `true` [#119](https://github.com/vueform/multiselect/issues/119). 320 | - Added `inputType` prop [#108](https://github.com/vueform/multiselect/issues/116), [#116](https://github.com/vueform/multiselect/issues/116). 321 | - Added `@paste` event [#105](https://github.com/vueform/multiselect/issues/105). 322 | - Added `tab` as option for `addTagOn` [#117](https://github.com/vueform/multiselect/issues/117). 323 | - Updated default `max-height` for dropdown (to `15rem`). 324 | 325 | ### 🐞 Bug Fixes 326 | - When `closeOnSelect` is `true` in `searchable` `tags` and `multiple` mode the input now blurs upon selecting an option. 327 | - Fix for empty dropdown when async options are loading [#115](https://github.com/vueform/multiselect/issues/115). 328 | - Fixed dropdown auto-scrolling when using arrows. 329 | 330 | ## v2.1.2 331 | 332 | > `2021-08-09` 333 | 334 | ### 🐞 Bug Fixes 335 | - Removed async/await. 336 | 337 | ## v2.1.1 338 | 339 | > `2021-08-09` 340 | 341 | ### 🎉 Feature 342 | - Added `closeOnSelect` prop. 343 | 344 | ### 🐞 Bug Fixes 345 | - Clear search on single option select [#99](https://github.com/vueform/multiselect/issues/99) and [#106](https://github.com/vueform/multiselect/issues/106). 346 | - No blur when tags are being removed. 347 | 348 | 349 | ## v2.1.0 350 | 351 | > `2021-07-26` 352 | 353 | ### 🎉 Feature 354 | - **BREAKING**: `dropdown` class now has `dropdownHidden` when it is closed instead of using `v-show` (requires using 2.1.0's `themes/default.css`) 355 | - **BREAKING**: removed `:maxHeight` prop. Use `var(--ms-max-height)` instead. 356 | - **BREAKING**: tags search layout has changed -> added a wrapper div and an extra span to calculate input width. 357 | - Dropddown can be closed on caret click [#88](https://github.com/vueform/multiselect/issues/88). 358 | - Added `:strict` prop to achieve accent-free search [#82](https://github.com/vueform/multiselect/issues/82). 359 | - Removed inline styles, CSP compilance [#84](https://github.com/vueform/multiselect/issues/84). 360 | - Background images are now customizable via `background-color` [#85](https://github.com/vueform/multiselect/issues/85). 361 | 362 | ### 🐞 Bug Fixes 363 | - Free typed tags fix [#96](https://github.com/vueform/multiselect/issues/96). 364 | - Tabindex becomes `-1` when `:disabled`. 365 | 366 | ## v2.0.1 367 | 368 | > `2021-06-27` 369 | 370 | ### 🎉 Feature 371 | - Classname fixes. 372 | - Readme update. 373 | 374 | ## v2.0.0 375 | 376 | > `2021-06-20` 377 | 378 | ### 🎉 Feature 379 | - **BREAKING**: Completely rewritten `