SelectMenu: Compound label

Description

For SelectMenu seems to be no option to customize the label of the selected item, e.g. use multiple values to compose the label. Currently only one item value can be selected by prop labelKey, but it is not possible to use multiple values OR to even add custom html-code.

Example:

const items = [
    {
        id: 1,
        firstName: 'Max',
        lastName: 'Mustermann',
    },
    ...
]

The items to select can be fully customized, even with custom html code:

<template #item-label="{ item }">
   {{ item.firstName }} <span class="text-highlighted">{{ item.lastName}}</span>
   <div class="text-xs text-muted">#{{ item.customerId }}</div>
</template>

But when an item is selected, the selected item can only be one value:

<USelectMenu label-key="lastName" />

Possible solutions:

1. Make a new label prop that accepts a function, so values can be compound:

<USelectMenu :label="(item) => item.firstName + ' ' + item.lastName"

2. Optionally make a slot to customize the labels:

<USelectMenu>
   <template #label="{ item }">
      {{ item.firstName }} <span class="text-highlighted">{{ item.lastName}}</span>
      <span class="text-xs text-muted">#{{ item.customerId }}</span>
   </template>
</USelectMenu>

P.S. the prop labelKey is not documented https://ui.nuxt.com/components/select-menu#props

Start with the SelectMenu component and its documentation at ui.nuxt.com/components/select-menu, focusing on how labelKey and the item-label slot are currently exposed. Define and implement a way to compose or customize the selected item label, then update the props documentation so labelKey is documented and the completed behavior is shown with the provided item shape.