[Vue] Better control on inputs
Is your feature request related to a problem? Please describe.
As
There are some instances when we can't use the <f7-input> at all, for instance, when using row and cells in a <f7-list>. In this regard, there's also a bug where required code will not run (because it doesn't exist) for example: to fix the floating label when filling a field after it is rendered.
Describe the solution you'd like Two solutions:
- A slot for
<f7-input>that replaces the<input>,<textarea>, etc. Perhaps a slot for each component (input[type], textarea, radio, checkbox, select, etc.) Example:
<f7-input>
<input slot="input" type="text" v-mask="foo bar" v-model="something" />
</f7-input>
- A directive that can be applied to a
<input>,<textarea>, etc. that will fix https://github.com/framework7io/framework7/issues/2644:
<f7-list>
<li class="item-content">
<div class="item-inner item-cell">
<div class="item-row">
<div class="item-cell item-input">
<div class="item-title item-floating-label">Zip Code</div>
<div class="item-input-wrap">
<the-mask type="tel" required v-model="zipCode" mask="#####-###" f7-input />
</div>
</div>
<div class="item-cell item-input">
<div class="item-title item-floating-label">State</div>
<div class="item-input-wrap">
<input type="text" readonly :value="state" f7-input />
</div>
</div>
</div>
</div>
</li>
That f7-input directive will inject all the events and handlers to make floating label to work (and whatever stuff f7 does behind the scenes).
The same kind of solution can be used to fix the smart-select (as the initial value must be set by hand)
Describe alternatives you've considered
Additional context
This will help also people who don't like or understand the lack of v-model support in f7 (I guess slots will make it possible).