[Feature]: formatted input

[amery]

Describe the feature

Specialized input fields like currency and date are the most common case for "masked" inputs. However, could you consider adding a generic formatted input receiving parse and format functions for custom conversions?

In my case, I need to present and edit feet' inch" but store decimal inches in the variables.

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[zernonia]

Hey @amery .. could you provide more description for this component? Perhaps some example you found online for reference? 😁

[amery]

Hey @amery .. could you provide more description for this component? Perhaps some example you found online for reference? 😁

There are many out there, e.g. https://vueform.com/docs/input-mask, which uses https://imask.js.org/guide.html.

The most straightforward implementation would use a function to convert (format) the value to the presentation form and another to convert (parse) the modified formatted value back to its "raw" form.
There are also 3-form implementations, but I can't find any currently. Those keep the value in its raw form internally but show pretty formatting when the field is inactive and simplified formatting when active (for the human to edit). This way, the pretty representation doesn't need parsing; only the simplified formatting does.

[amery]

https://github.com/mustafacagri/vue-mask-next is a simple implementation of pattern based input masks