Vue Multiselect Versions Save

#Fixes

f9010b91a6747b95b53eea7ae1265b710e10d8e6 Add TypeScript typings to files in package.json.

New

f5ad5af Added selection slot around multiselect tags 2a4da0c Add getLabel method to tag slot (#744) 3169143 Added type definition file (#747) 496937b Add slot that shows message about empty options (#699) 60e2884 Retain class 'multiselect__option--group' even groupSelect prop is set to false (#799) 8024d61 Fix #815: Tabbing in firefox when there is a horizontal scroll bar (#817)

Fixes

6483cfa make index of visibleValues the unique key 16cd900 Update bower.json (#774) 0874091 Fix placeholder markup (#700) b833c68 matches docs with source code. correct slot event name (#722) 65b9895 Fix #690, enter and leave field with tab (#697)

P.S. Please accept my apology for delaying the release for such a long time. 😞

Important

• Finally got rid of deep cloning of the value prop into local state, that was later mutated. The internalValue is now completely derived from the value. This means that the Multiselect won’t update if you don’t use v-model or handle the @input event properly. It also solves problems with circular structures as well as dynamic i18n of options etc.
• Groups (all values from a group) can be now selected by clicking on the label thanks to @kubacode! 🚀
• Those release notes include everything that happened since the 2.0.3 release.
• I’m terribly sorry for the time it took me to get back on the project...
• Thanks everyone for the patience and your help with closing issues / submitting PRs!
• The next release will probably be the long-awaited rewrite – v3.0.

Fixes

• #659 Setting padding to 0 when option is selected to prevent a small text input from appearing below select (#659) (@cpepin)
• c2fb318 Fix: #489 Manually implement #675 (@shentao)
• 9223aa6 Fix #606, adjust colors and paddings. (@shentao)
• #583 Increased font-size of input to sensible minimum. (#583) (@keeganstreet)
• #625 Adjust pointer position when currently selected option is a label. This can happen when multiselect was opened as empty and group was added at runtime. (#625) (@Frizi)
• f2a15c8 Solve issue with groupHighlight (@shentao)
• #588 Fix for new tags changing to lowercase (#588) (@rickbolton)
• b6993ce Fix styling
• #534 Fix ios double click selection (#534) (@ptrhoffmann)
• 42b18cf Fix #473
• f985a43 Fix #483
• b238735 Fix #484
• #515 Set tabindex on input instead of container if searchable. Fixes #411 (#515) (@havgry)

New

• 7e07c0e Implement #674 (@shentao)
• 6715a18 No longer DeepClone value into internalValue (@shentao)
• #645 Single select custom html label (#645) (@fanckush)
• 13f7fb6 Improve the singleLabel slot feature (@shentao)
• eca59ac Implement Group Select by clicking on the group label by (@kubacode) 🎉
• #528 Add option to change the tag position (#528) (@rickbolton)

Maintenance & Docs

• f3f76bd Update ISSUE_TEMPLATE.md (@shentao)
• 1f6e2f2 Remove props docs from README to make it easier to maintain (@shentao)
• 65a0cb8 Migrate tests to use Jest 🚀 (@shentao)
• 8848669 Add Jest through vue-cli (@shentao)
• #639 Fix example code for multiple select to match newest vue api (#639) (@M-Zuber)
• #646 Update SelectedLabel to lowercase selectedLabel (#646) (@bm2ilabs)
• #579 Docs typo fixes: seach vs. search (#579) (@jbruni)
• #564 Spelling fix (#564) (@Brimstedt)
• #613 doc: typo (#613) (@Yuliang-Lee)
• #591 In the Props section of the documentation, the props are now written in camel case, the same as they are in component itself (#591) (@AndrewGardhouse)
• 09ad71f Rework Docs
• b3a5649 Fix #345, update docs, add promise polyfil

Fixes

• 41a8914 Fix #486 #488
• bf4775f Fix #510, Adjust previously mergd fixes
• #395 add mousedown event to multiselect-single (#395) (@mmsch)
• #491 Fix bug about the display of dropdown list when click on scrollbar in IE11 (#491) (@tuanna45)
• #427 Fix the predicted number of visible options (#427) (@pczarn)
• #415 [Fix] Option label on non-empty options (#415) (@hiendv)
• #430 Fix User Experience with tab navigation (#430) (@pczarn)
• #479 Fix Closure Compiler Errors (#479) (@zeronone)
• abb7c28 [Fix #454] Hide selected should work with internalSearch = false
• 63e7d73 Remove empty space at content bottom (@leanniby)
• ca9b78d Fix active bottom border. (@frandiox)
• 3a6c6ef Fix group labels
• 24cd226 Fix showNoResults.
• 32c558b Fix #230
• a711ff5 Add innertia to options, rename inputName to name, fix #357
• b134709 Correct the way to check whether an variable is empty array (@riophae)
• 41fc501 Fix #303, #71 potential fix for #363
• 9be8e87 Fix #337
• dcd8ba0 Fix #374
• 0a49f90 Fix #382
• db46a91 Fix #393, #379
• 3ecdad5 Added fix for defect #313 to prevent clicks on scrollbar from clearing the input
• cbde1b6 Fix external stylesheet reference (@mega667)
• #346 Fix search prop being cleared on scrollbar click (@dmungin)

New

• #419 Add RTL support (#419) (@PejmanNik)
• c4591e7 Change and document caret slot (@pczarn)
• a35d40d Add #176
• fbb076b Add #401. Add toggle :show-no-results message

Maintenace & Docs

• #511 mulitple -> multiple in docs (#511) (@callumacrae)
• #509 Fix component declaration in Getting Started guide (#509) (@Herteby)
• #452 Limit prop comments (@guibarscevicius)
• 3e6b419 Added NPM badge (@304NotModified)
• 1e6a337 [fix] Typo in the docs (@Zip753)
• 59c2e81 Update comments on limit prop (@guibarscevicius)
• 3b6e316 Fix typo in getting started example (@yeonhoyoon)
• 89ad940 language fixes (@sandbox-services)
• 80648da test for null (@sandbox-services)
• #326 Fix style link mistake (@mega667)
• e6fdd6e Fix typo (@dobromir-hristov)

Fixes

• #290, #295, #264 Clearing the value should not throw any errors by @pczarn and me

At last!

Important

Styles are now contained inside a separate css file. This should enable usage in SSR apps. It should also make it easier to customize the styles without having redundant CSS rules. However, you have to add the styles manually. Usually this can be done by adding:

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

inside a root component or in the place where vue-multiselect is used or as a static asset along with your component-agnostic CSS code. When used without a bundler, you can add the file as a static asset with this CDN link:

<style src="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css"></style>

New

• #136 Options list appear on top if there is no space below the component
• Enable SSR support

Changes

• #164 Refactor single vs multiple selects by @pczarn
• #196 Added warning for conflicting configuration
• #211 noResults slot won’t be displayed if loading is set to true
• #234 Creating a tag when in single-select mode should close the dropdown by @innominata
• Migrated to webpack 2

Fixes:

• #188 Prevent enter submit the form by @slevy85
• #197 New tagging entries are not transformed to lowercase
• #204 Full options list should not flash when the component loses focus
• #190 Closing the multiselect should not cause any isLabel related errors in any case
• #195 Pointer should now correctly point to the first non-label option when using option groups
• #188 Pressing enter key should not submit the form by @slevy85
• #208 Placeholder should now behave correctly in every case
• #187 Search query is no longer trimmed
• #274 Custom search should not interfere with option groups by Eidan Spiegel

Docs:

• New docs https://monterail.github.io/vue-multiselect

Breaking:

• Introduced scoped slots for custom option templates
• Changed :local-search to :internal-search.
• Rebuilt for Vue 2.1.7

New:

Support for option groups #111

Example grouped options:

options: [
  {
    label: 'Group A',
    values: [1, 2, 3]
  },
  {
    label: 'Group B',
    values: [4, 5, 6]
  }
}

And here’s how to configure the dropdown. group-values should point to the property where the option list is located. group-label should point to the group label.

<multiselect :options="options" group-values="values" group-label="label">

Complete docs soon. :)

Fixed:

#150 #144 #147 #128 #109 #102

Fixed

• Fix #129

New

• Added options-limit prop (expecting a number) that limits the visible options to the first x matching results. By default, the options-limit is set to 1000. This should provide a simple way to improve performance by reducing the number of options rendered. (same as in 1.x)