feature(vue): support v-model binding on smart-select

[peitschie]

This merge request adds a v-model:smart-selection model binding for the smart list element when used on an f7-list-item. Example syntax (as per the kitchen sink update) is something like:

 <f7-list-item
  v-model:smart-selection="predictedCoinFlip"
  title="Predicted outcome"
  smart-select
  :smart-select-params="{ openIn: 'sheet' }"
>
  <select name="coin-flip">
    <option value="heads">Heads</option>
    <option value="tails">Tails</option>
  </select>
</f7-list-item>

The key driver for this change is I wanted a more ergonomic way to programmatically control which item is selected in a smart-select component.

I don't particularly love the model name of smart-selection. Alternatives I considered:

1. extend the existing value prop to be a model (i.e., add a update:value emit)
2. call it selection or event select instead, but I felt this dropped the clear link to the smart-select component?

This is a completely random drive-by feature, so I'm absolutely fine with it being closed if it's not something you want. If you like the concept but want changes made, I'd be thrilled to adjust the patch to your liking 🙂

Also, I'd be happy to update the docs as well if this feature is accepted.

Thanks for all your hard work on the framework!

[wxfred]

@peitschie Hello, I have a problem.
framework7 8.3.4
framework7-vue 8.3.4

<f7-list-item title="title" smart-select v-model:smart-selection="input.selectedId" :smart-select-params="{ openIn: 'popup' }">

I changed input.selectedId in script, the text on the f7-list is not updated, and only the selection in the popup is updated, is there a bug?
By the way, if i click option in popup, the text on the f7-list will update.

[wxfred]

Sorry, v-model:smart-selection is still not accepted. I'll start another issue.

[peitschie]

Ah good... I was about to ask @wxfred 🙂

[wxfred]

#4339 here is the issue