Custom input fields, format/parse

[amery]

Description

sometimes what you prompt and show is not what you send, I have a particular need to ask users for distances in Imperial units (feet' inch") but the form should send total inches. Other frameworks solve this by allowing the developer to pass a formatter function and a parser to go back and forth. error handling becomes quite nasty when hacking a manual solution.

Suggestions obviously welcomed

Additional context

No response

[moshetanzer]

Hi @amery

What can't you on submit first run a parsing script and then submit? Or alternatively define body explicitly and create a function to convert value?

[amery]

Hi @amery

What can't you on submit first run a parsing script and then submit? Or alternatively define body explicitly and create a function to convert value?

mask and reformatting happens on change, and the functionality is to reduce the boilerplate integration between parsing, reformatting, validation and error feedback. Think of a price input component receiving a ref, creating a computed and passing that as v-model to the underlying input, displayed with prefix/suffix, commas every 3 digits, and a fixed amount of decimals.

currency is the most common use, but there are many other types of data that require the same kind of on-change fiddling and validation.

[moshetanzer]

Have you tried using a library like imask on @change? https://github.com/uNmAnNeR/imaskjs/tree/master/packages/vue-imask

[amery]

Have you tried using a library like imask on @change? https://github.com/uNmAnNeR/imaskjs/tree/master/packages/vue-imask

Thanks, I'll give that a try.

(I deleted this response accidentally because the GitHub app was showing everything twice)

[amery]

Have you tried using a library like imask on @change? https://github.com/uNmAnNeR/imaskjs/tree/master/packages/vue-imask

I'm trying to bind imask to UInput but it explodes :sob:

TypeError: this.input.addEventListener is not a function

<template>
<u-input ref="el" v-model="value" />
</template>
<script setup lang="ts">
import { useIMask } from 'vue-imask';
const value = ref(0);
const { el, masked } = useIMask({
  mask: Number,
  radix: '.',
  thousandsSeparator: '',
  scale: 3,
});
</script>