Skip to content

Conversation

peitschie
Copy link
Contributor

@peitschie peitschie commented Feb 2, 2025

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant