Display custom label in place of selected options

[andreasvirkus]

This PR resolves #1003 with an additional prop, whose textual value would override the vs__selected-options contents.

Maybe collapseTags would be a better name, seems that Element UI uses that as mentioned in https://github.com/sagalbot/vue-select/issues/1003#issuecomment-567502356

An example use case for this new prop would be:

<v-select
  v-model="userIds"
  label="name"
  placeholder="Everyone"
  :options="users"
  :customFieldLabel="userIds.length > 2 ? `${userIds.length} selected` : null"
  :reduce="option => option.id"
  :closeOnSelect="false"
  @search="getUsers"
/>

[coveralls]

Coverage remained the same at 95.964% when pulling 6cbb9be9d3c1ee30791cc9adf0bde3739f08788c on klausapp:ft/custom-field-label into d6f0557449d0ab7f957f102c88533b3f7338d592 on sagalbot:master.

[andreasvirkus]

@sagalbot could this be reviewed please? 🙏 We're really looking forward to getting back to using the new versions of vue-select

[dekadentno]

Is there a way to fix and merge this? Sorry for being pushy, I just hope this marvelops feature isn't forgotten. Also thank you for your time and effort on this lib @andreasvirkus @sagalbot

[andreasvirkus]

ping @sagalbot

[adamdyderski]

I'm afraid that it will not be possible to deselect the selected options when the tags will not be rendered? (clicking on an option in the list does not deselect it now). Correct me if I'm wrong

[andreasvirkus]

@adamdyderski I think the functionality you're looking for is in a different PR - https://github.com/sagalbot/vue-select/pull/1033

This just adds the functionality to show a custom label, so it's only a visual change in that sense. It would greatly benefit from https://github.com/sagalbot/vue-select/pull/1033 of course, but I've decoupled the features into 2 separate PRs

[sagalbot]

@andreasvirkus this one will be next up after #1033 goes in.

[gautam-patadiya]

new Limit property added: https://github.com/sagalbot/vue-select/issues/1559#issuecomment-1978789674