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 #1003 (comment)

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 6cbb9be on klausapp:ft/custom-field-label into d6f0557 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 - #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 #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.

[sagalbot]

I'm torn on whether this should be a string or a function (or both). If it was a function, it could be called from a computed property, passing along the currently selected values. Something like this:

props: {
  shouldTruncate: {
    type: Boolean,
    default: false
  },
  truncatedLabel: {
    type: [String, Function],
  }
},
computed: {
  truncatedLabelResult() {
    if( typeof this.truncatedLabel === 'function') {
      return this.truncatedLabel(this.value)
    }

    return this.truncatedLabel;
  }
}

You can easily make the string a computed property from the parent component, but people always seem to struggle with this. In my experience, I almost always wrap VueSelect in a parent component to handle that sort of thing. In a perfect world, the component wouldn't manage any state - only firing events, it'd be up to the developer to track it themselves.

Either way, I think we do need some sort of shouldTruncate flag that can be referenced from the template. That way you can truncate if more than X values are selected. Maybe it could be a slot? With a slot, we wouldn't need shouldTruncate, we can just check if the slot has any content, and if it does, we use that content instead of iterating the options.

Let me know if you've got any thoughts on the above! Thanks for all your work on this.

[andreasvirkus]

I feel like string gives us more control, since it's more strict & a function could return anything (e.g. what would we do with an array or an object?)

I don't have the statistics on what people struggle with though, so if it's a pain point that gets brought up often, having handling for both could be an option. 🤷

[gautam-patadiya]

new Limit property added:
#1559 (comment)