feat(SelectMenu): add value-attribute prop

[mcastagnetti]

Resolves #415
Resolves #262

Add the possibility to specify which key of an array of objects can be picked in the modelValue

Sometimes, you need the whole objects only for display purposes, but the bound values are needed to be only one attribute of those objects

The image below depict how it works with the the value-attribute="id" prop on the select-menu#async-search section of the docs

Maybe we should add a note telling that by and value-attribute are completely different mechanism?

What are your thoughts on such a feature?

[nuxt-studio]

✅ Live Preview ready!

Name	Edit	Preview	Latest Commit
ui	Edit on Studio ↗︎	View Live Preview	3b4dedf

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	Jul 20, 2023 10:08am

[benjamincanac]

Great idea! This does solve #415 and #262, right?

[benjamincanac]

Maybe we could add an example of this under the select-menu-example-objects one?

[mcastagnetti]

Great idea! This does solve #415 and #262, right?

Oh sure! I didn't even saw those issues, thx for pointing it, i'll add them to the PR description

Maybe we could add an example of this under the select-menu-example-objects one?

Sure, i'll add a section in the docs :)

[mcastagnetti]

I've added a callout in 7c2a401 saying that the display might be broken as this line is not suited to work with the new valueAttribute prop

I thought of using a computed like so instead :

const modelValueLabelToDisplay = computed(() => {
  if (!props.modelValue) {
    return undefined
  }

  if (props.valueAttribute && typeof props.modelValue !== 'object') {
    const current = (props.options as { [key: string]: any, disabled?: boolean }[]).find((option) => option[props.valueAttribute] === props.modelValue)
    return current[props.optionAttribute]
  }

  if (typeof props.modelValue === 'string') {
    return props.modelValue
  }

  return props.modelValue[props.optionAttribute]
})

But it would have broke with the searchable prop anyway so my call was to keep it simple and let the user display what he wants in this particular situation. What do you think?

[benjamincanac]

Why is your callout mentioning the multiple prop? The display will be broken in both case.

[mcastagnetti]

Why is your callout mentioning the multiple prop? The display will be broken in both case.

In multiple mode it displays ${n} selected by default
But you are right, it is quite confusing

Maybe I'll just display the example with the label template usage instead of explaining it in a callout. It will be clearer.