Allow a custom option slot for #value when isMulti is set

[rudokemper]

As far as I can tell, a custom option slot for #value does not render anything when isMulti is true. That is to say, the following code will not template selected options any differently:

<VueSelect
  :is-multi="true"
  :options="options"
  v-model="values"
>
  <template #value="{ option }">
    {{ option.label }} (selected)
  </template>
  <template #option="{ option }">
    {{ option.label }}
  </template>
</VueSelect>

It would be nice to have this. vue-select permitted this with the v-slot:selected-option parameter, which I used to style my multiple select dropdowns like this:

If you agree that this is a nice feature to have, I can take a shot at adding this, unless you prefer to take it on 🙂

[TotomInc]

That's a nice catch @rudokemper, you're right the #value slot isn't used when :is-multi="true".

I believe we can introduce a new slot called #tag. This new slot should replace these lines. It should also allow access to the following values:

• option: the option object of the tag
• removeOption(): function to remove the tag from the selected values

If you have some time to work on this, a pull-request would be awesome 🙏

Feel free to also work on the Vitepress documentation if you have the time.

Thanks!

[TotomInc]

Added in v0.7.0: https://vue3-select-component.vercel.app/slots.html#tag

Thanks for your help! 🙂