Add a hook mechanism for manipulating the input model (Original: Ability to mask input values).

[paulogr]

Describe the new feature you'd like

Many times we have to mask input values for better UX.

VueFormulate already have really good features and be able to mask a value is the only missing feature that makes me add an extra dependency to handle my forms.

Today I use vue-the-mask (https://github.com/vuejs-tips/vue-the-mask) but it seen dead, doesn't have any activity from the maintainer and a lot of good contributors PR to get merged.

What percentage of vue-formulate users would benefit?

80%

Let's talk about it.

[justin-schroeder]

I've wondered about adding support for something like this too. I think my approach to this would be to add this kind of support via a VueFormulate plugin. I like the syntax that vue-the-mask was using with a simple prop. It would take a very slight shift to the internal model to make it work, but nothing dramatic.

Ideally it could use something like https://nosir.github.io/cleave.js/ under the hood.

[justin-schroeder]

Putting this on the roadmap for 2.x.x. The only implementation in formulate itself will be a "mask" prop and config option that takes a function and will be used as in the model setter, but we'll leave it up to external libraries like cleave to do the actual masking.

[frankdors]

Support for Money
https://github.com/vuejs-tips/v-money
https://github.com/autoNumeric/autoNumeric
https://github.com/probil/v-mask

[hmaesta]

Upvote for this 👍

vue-the-mask and v-money are both by @neves, so it may share some standardisations that can allow an easier integration with vue-formulate – but both projects haven't received commits for years and have a lot of pending pull requests 😢

text-mask is very popular, but also not maintained anymore. They recommend imaskjs, which appears to be a nice option and has an official Vue implementation.

I didn't know about cleave.js – as suggested by @justin-schroeder, but it has a lot of favs and a Vue example. Did you guys already worked with this?

[gahabeen]

Hey, I've implemented a solution to have masks with https://imask.js.org/ with FormulateForm or FormulateInput.

You can check working demos here: https://codesandbox.io/s/vue-formulate-extended-masks-9i1wy?file=/src/App.vue.
Currently available from vue-formulate-extended (with peer depedencies, careful). Repo

I'd be happy to discuss how this could become a cleaner solution @justin-schroeder ;)

[atharva3010]

+1 for @gahabeen's solution

[gahabeen]

I like this idea of creating a modelHook (similar to the nodeHook and componentHook we discussed and I implemented in `vue-formulate-extended).

We could build tiny plugins based on it like a vue-formulate-mask for ex or do you see these like features you'ld want to have in-house? @justin-schroeder

[gahabeen]

I've just made a PR (#166) to have a modelHook on FormulateInput (available through a schema with FormulateForm too).

It'll be super easy to have the mask feature once it's pushed!
I made an example for a mask/format feature in a test there:

vue-formulate/test/unit/FormulateForm.test.js

Lines 828 to 876 in b0dfc0d

	it('allows setting custom modelHooks on fields - text mask', async () => {
	// Found here: https://codepen.io/007design/pen/ZRxpxr
	function doFormat(x, pattern, mask) {
	var strippedValue = x.replace(/[^0-9]/g, "");
	var chars = strippedValue.split('');
	var count = 0;
	var formatted = '';
	for (var i=0; i<pattern.length; i++) {
	const c = pattern[i];
	if (chars[count]) {
	if (/\*/.test(c)) {
	formatted += chars[count];
	count++;
	} else {
	formatted += c;
	}
	} else if (mask) {
	if (mask.split('')[i])
	formatted += mask.split('')[i];
	}
	}
	return formatted;
	}
	const wrapper = mount({
	template: `
	<FormulateForm v-model="formData" :schema="schema"></FormulateForm>
	`,
	data () {
	return {
	schema: [{
	type: "text",
	name: "phone",
	format: "(***) ***-****",
	mask: "(###) ###-####",
	modelHook(value, { context }){
	return doFormat(value, context.attributes.format, context.attributes.mask)
	}
	}],
	formData: {}
	}
	}
	})
	const phone = wrapper.find('input[type="text"]')
	phone.setValue('123456')
	await flushPromises()
	expect(wrapper.vm.formData).toEqual({ phone: "(123) 456-####" })
	})

[gahabeen]

@paulogr @hmaesta @frankdors Text Mask is now part of the - now stabilized - plugin vue-formulate-extended.

Check it out in a live demo: https://codesandbox.io/s/text-mask-04dh5?file=/src/components/Sandbox.vue