Selected item slot for Select component

This function solves the problem

It would be great to have selected-item(or any other name) slot to improve customization of selected value.

Expected API

Also instead of render-label property, it would be great to have scoped slot as I think it is more suitable for Vue. Having prop to customize render is kind of React thing.

<template>
<n-select :options="options" >
  <template #selected-item="{ item }">
    {{item.label}} - {{item.value}} 
  </template>
  <template #option="{ item }">
    This is {{item.label}}
  </template>
</n-select>
</template>

[07akioni]

I don’t think the API is gonna change as vue is in stable release now, though it was discussed a lot in RFCs. As a consumer it would be great to have more slot oriented customization. Please consider using slots more.

Anyway, thank you for your work naive-ui is really great framework, I liked it a lot so far.

Thanks! I know many people perfer slot API (if it is typed, I would too). However now the typed slot rfc is still pending (the same for generic types), I think it’s risky to implement it before the rfc is merged. If there’re some changes, it will cost a lot to change all the related codes.

https://github.com/vuejs/rfcs/pull/192

[07akioni]

and my usage example is also for display-only purposes. slots itself are meant to be display only purposes.

I mean it doesn’t mix too much logic (with complex slot props) in it. Since Vue doesn’t has good typescript support for slots. I think it is dangerous to rely too much on slots now (nor API and implementation may break a lot if vue change its API).

However the feature will be provided (not by slot api). It’s necessary.