TotomInc / vue3-select-component

A flexible & modern select-input control for Vue 3.
https://vue3-select-component.vercel.app/
MIT License
51 stars 6 forks source link

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

Open rudokemper opened 2 weeks ago

rudokemper commented 2 weeks ago

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:

image

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 :slightly_smiling_face:

TotomInc commented 2 weeks ago

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:

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!