framework7 icon indicating copy to clipboard operation
framework7 copied to clipboard

[Vue] Better control on inputs

Open JCKodel opened this issue 7 years ago • 0 comments

Is your feature request related to a problem? Please describe. As is a complex component, we don't have access to the HTML element itself. Sometimes, we want to use a custom directive (ex.: masked input directive) or even a entire custom input component (ex.: from https://github.com/vuejs-tips/vue-the-mask).

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:

  1. 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>
  1. 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).

JCKodel avatar Sep 15 '18 21:09 JCKodel