ronaldjerez/vue-input-facade

A lightweight and dependency free input masking library created specific for Vue

Vue Input Facade

A lightweight and dependency free input masking library created specific for Vue

Docs and Demo

---

Installing

npm i vue-input-facade

yarn add vue-input-facade

Importing

Globally

Installs the component, directive and filter for your entire application.

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)

Locally

Install per component as needed

import { InputFacade, facade, filter } from 'vue-input-facade'

export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
  // ... rest of component config
}

Default Mask Tokens

• S = alpha characters
• # = numerical characters
• X = alpha numerical characters
• A = alpha characters, transformed to uppercase
• a = alpha characters, transformed to lowercase
• \ = escape any of the above characters
• ? = mark the preceding character as optional [0 or 1]
• * = mark the preceding character as optional & repeating [0 or more]
• | = used for alternative static characters: A|B|C will accept A or B or C

See the token source file for definition signature

Note about special input types

The masking library does not currently work on special input types such as number, email etc. This is due to browsers treating these special inputs differently than text input and not supporting the same API. As such, only use vue-input-facade with <input type="text|tel|search">.

Usage

As Component

<label>Phone Number</label>
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

As Directive

<label>Date</label>
<input type="text" v-facade="'##/##/##'" />

Migrating existing projects

If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase. You may pass options during plugin installation to override the default tokens or directive name.

import InputFacade from 'vue-input-facade'

// migrating from v-mask
const options = {
  // rename the directive from: v-facade to: v-mask
  name: 'mask',

  // use these tokens instead of the default
  tokens: {
    '#': { pattern: /\d/ },
    'A': { pattern: /[a-z]/i },
    'N': { pattern: /[0-9a-z]/i },
    'X': { pattern: /./ }
  }
}

Vue.use(InputFacade, options)

See demo page for more usage examples

Contribution

You're free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. The project uses semantic-release to release new versions, therefore all commit messages should follow conventional commits, we are using commitizen to facilitate writting the commit messages.

License

This project is licensed under MIT License

vue-input-facade's Issues

Allow entering static character at start

Describe the bug
Users are unable to type a mask static character if it's the first character of the mask. For instance, if I have a mask for a US phone, (###) ###-####, and the user starts typing an open parenthesis, it just rejects it and nothing happens. The user assumes something is broken.

To Reproduce

1. Go to https://ronaldjerez.github.io/vue-input-facade/#!/InputFacade/1
2. Remove the default phone number
3. Attempt to type the open parenthesis. Nothing appears.

Expected behavior
Users should be able to type static characters and they should appear.

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome/Brave, Safari
• Version: 1.3.4

v-facade doesn't work with Vuetify

I switched from vue-the-mask to your library, however it doesn't work correctly with Vuetify's v-text-field. I appreciate you may not officially support Vuetify, but thought I would let you know.

The Issue:
If you update the model data value binded to v-text-field then sometimes the v-text-field will not be updated. This only occurs when using the v-facade directive.

I tried to do a codepen example, but couldn't work out how to import your library, but is easily reproducible with something like the below, which results in the input only updating on every second try.

<template>
    <div>
        <v-text-field v-model="containerNumber" label="Container #" v-facade="'XXXXXXXXXXXX'"></v-text-field>
        <v-btn @click="update">Update</v-btn>
    </div>
</template>

export default {
    name: 'home',
    data () {
        return {
            containerNumber: 'YYY'
        }
    },
    methods: {  
        update() {
            this.containerNumber = this.containerNumber + 'Z'; 
        }
    },
}

Delete of masked spaces in webkit Edge and IE11 not possible

Hey,
me and my team found an issue using input-facade in Edge.
You can't delete a space character if your mask has spaces in it.

Example Mask: DE## #### #### #### #### ##

You can also reproduce this behaviour with your own demo page on Edge:
https://ronaldjerez.github.io/vue-input-facade/
We tried the one in Basic Usage Section on this page. Try to delete the 4 last digits and the spaces with the dash by using only backspace, you will not be able delete the spaces but normal characters.

Kind Regards

Script 1002 Issue in IE

Hi,

I'm trying to use this plugin to mask some fields on a site that needs IE11 support and I'm getting a script 1002 error that says there is a syntax error. When I check out the syntax error it jumps to a line with an arrow function. It says this:

transform:e=>e.toLocalUpperCase

How would I go about resolving this?

The facade doesn't work quite well with mobile/tablet webview on mixed letters and numbers

First, thank you for putting this nice library together. Now to the issue:

The facade doesn't work quite well with mobile/tablet webview. The issue is when there are numbers and letters mixed.

To Reproduce

<v-text-field
type="text"
autocomplete="off"
placeholder="Mac address (required)"
v-facade="'XX:XX:XX:XX:XX:XX'"

try entering on a mobile device
12:a2:b2:c2:d2:e2

The pointer for entering is misplaced after entering numbers.

NOTE: It works fine on a browser but not mobile. I am using Android Webview.

Move the docs to storybook

I've been thinking of moving the documentation page to story book but haven't gotten around to it. Opening this issue in case anyone wants to contribute and make that happen.

Accessing the unmasked value in vuetify

Hi,
Im trying out vue-input-facade in vuetify and I can't seem to be able to get the unmasked value from a <v-text-field>.

<v-text-field
  v-model="value"
  v-mask="'##.##.##'"
  @input="logValue"
  hide-details
></v-text-field>
...
methods: {
  logValue(event) {
    console.log(event);    // 12.34.56
  }
}

The value is always masked, is there anyway we can access the unmasked value?

vuetify-2.2.28, I tried vue-input-facade-1.1.15 & latest v1.2.0-beta.4

Updated the code to include the input event.

Does not work with Vuetify inputs, masking breaks

Describe the bug

With vuetify inputs, following thedocs:

          <v-text-field
            :value="model.phone"
            @input.native="model.phone = $event.target.unmaskedValue"
            v-facade="`(###) ###-####`"
            label="Phone number"
            filled>
          </v-text-field>

With input: 1234567890 is displays 1234567890 with no masking. It only masks when another number is typed at the end. So input 12345678901 displays [phone] , and then immediately unmasks when the input is no longer focused.

The result of this is that the input is no longer masked.

Vue3 Support

Hi, I am wondering if there are any plans for vue3 support for this package? Thanks a lot

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Don't use npm as dependency

Hi,
Please, can you delete npm as dependency ?
"dependencies": {
"npm": "^8.4.1"
}

Thanks

Directive v-facade clearing value from first index of repeated fields

Describe the bug
I'm using vue-formulate to build forms. The mask doesnt works only on the first index. If v-facade is removed, everything works

To Reproduce
https://codesandbox.io/s/pybjv?file=/src/App.vue

Expected behavior
v-facade directive should works on every form field

mask is carrying over to new unrelated template and breaking it - Possible facade bug, or possible Vue bug

I do not have a test case yet, I am just digging into this, but it sounds like something others would have ran into so I'm hoping maybe by posting first, I might get some insight before diving into a rabbit hole.

I have a validate-pin component that uses a masked input via vue-input-facade to force only digits up to a set length, once these are verified by the API, the component renders its child template which typically contains another form... in this case, its an email address input, but out of the blue (potentially related to upgrading from 1.2.x beta to 1.3.x... the email input now inherits the mask from the PIN validation template.

Upon inspecting the DOM with dev tools, I can verify that the input is recycled between the 2 forms (which is where this might fall into a Vue bug?)...

I'll be working on a test case for this after I get out of my next meeting (happening now).

The ValidatePin template looks like this:

<template>
	<v-container class="validate-pin">
		<div v-if="!isValid" class="validate-pin">
			<v-form>
				<!-- eslint-disable -->
				<v-text-field
					class="input-pin"
					label="Please Enter Pin"
					type="password"
					persistent-hint
					hint="If you did not set up a PIN in the past, then your default PIN is the last 4 digits of your SSN."
					v-facade="'####'"
					:error-messages="pinErrors"
					@input="$v.pin.$touch()"
					@blur="$v.pin.$touch()"
					v-model="pin">
				</v-text-field>
				<!-- eslint-enable -->
				<v-btn
					class="button-submit"
					color="primary"
					:loading="loading"
					:disabled="$v.$invalid"
					@click="validatePin">
					Validate Pin
				</v-btn>
			</v-form>
		</div>
		<slot v-if="isValid" name="default">
			You must put guarded content as a child component to overide this.
		</slot>
	</v-container>
</template>

The template in the email view, as that might help for the ValidatePin component in use looks like this:

<ValidatePin :validated="pinValidated">
	<v-container>
		<v-form v-if="!verificationSent">
			<v-text-field
				required
				label="New Email Address"
				v-model="email">
			</v-text-field>
			<v-btn :loading="loading" @click.stop="verifyEmail">Send Verification Link</v-btn>
		</v-form>
		<div v-else>
			<div>
				We emailed a verification link to your new address. This link expires in 1
				hour. Note that your email address will not be changed in our system
				unless the link is clicked.
			</div>
			<v-btn :to="{name: 'profile'}">Back To My Profile</v-btn>
		</div>
	</v-container>
</ValidatePin>

Cannot set null value in v-model fields with mask array v-mask="['###.###.###-##', '##.###.### / ####-##']"

Describe the bug

When using a mask array in the v-mask directive, it is not possible to set a null value in the v-model. This makes it impossible to reset the form data.
Example of using the mask:
<input v-model="CpfCnpj" type="text" v-mask="['###.###.###-##', '##.###.###/####-##']" />
<button @click="CpfCnpj = null"> Clear </button>

To Reproduce
Steps to reproduce the behavior:

1. Use a mask array in the mask directive as in the example: v-mask="['###.###.###-##', '##.###.###/## ##-##']"
2. set value in v-model ex:
   <button @click="CpfCnpj = 00133266545"> Set Value </button>
   
3. Set a null value in the v-model of the component where the mask array is used.
   <button @click="CpfCnpj = null"> Clear </button>
4. When setting null value in v-model, it is not applied.

Expected behavior
It must be possible to set a null value in the v-model that has the mask array

Desktop (please complete the following information):

• OS: Microsoft Windows 11 Pro - v 10.0.22000 - 22000
• Browser [Chrome]
• Version [v 104.0.5112.82 - 64 bits]

Additional context
Only the component that uses a mascara array doesn't allow to set null value in v-model. So correctly a form is impossible.

Money amount masking

Having troubles using your amazing library to mask money amounts.
I'm using the following mask

["$###################", "$###,###,###,###", "$##,###,###,###", "$#,###,###,###", "$###,###,###", "$##,###,###", "$#,###,###", "$###,###", "$##,###", "$#,###", "$###"]

With the following masks the value 123 isn't properly formatted:
$1,23

I found that function dynamic is selecting mask that will be applied. Could you please suggest how to handle money amount?

Cannot set null or empty string on input fields with `v-facade="['#####', '#####-####']"`

Describe the bug
Please see #67 for a description.
It is not possible to clear values that are bound to text input fields when using the directive strategy with a array of mask values.
Factors that may play a role in this bug:

• Using a popular text input component from a component library like vuetify
• Using the directive with an array of mask strings for a value

To Reproduce
Please see https://codepen.io/MatthewAry/pen/MWXOzJV for a reproduction.
Please type in a value in the input field, then click the reset button. The input field only accepts number. The reset button should set the value to an empty string.

Expected behavior
It's expected to see the input field clear when the reset button is clicked.

What actually happens
It is not clearing. The input is reapplying the value.

Looking at Vue DevTools timeline. We can see that for some reason the input field is re-applying the value the moment it's cleared. See the video below. In my video you can also see another interesting behavior relating to how editing other input fields on the same object is causing the misbehaving field to also re-apply its value. In my video all input fields are bound to an object that looks something like this.

...
    data:() => ({
      customer: {
        name: '',
        website: '',
        contractStart: '',
        contractEnd: '',
        gracePeriod: 0,
        address: '',
        addressTwo: '',
        city: '',
        state: '',
        zip: '',
        phone: '',
        fax: '',
      }
    }),
...

And it seems that it's reacting to changes in state in a shared object. My Codepen however, is able to demonstrate that this way of structuring reactive data not a pre-requisite to reproduce this issue.

Screenshots
Here is a recording of an interesting behavior related to what I am seeing.
https://user-images.githubusercontent.com/157217/202818102-e3923269-ee07-4148-8eaf-b896563ce671.mov

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 107.0.5304.110 (Official Build) (x86_64)

Additional context
If you need more information I would be happy to provide it.

Directive not fully working with input[type="number"]

Describe the bug
When using v-facade directive with a ##### mask (allowing only numbers) inside an <input type="number /> tag, the mask works partially, avoiding letters and other non numeric chars, but incorrectly allowing some chars.

It also happens with a custom token based mask, avoiding all chars not in the token but allowing those same chars.

The chars always allowed on type="number" are: e + - , .

To Reproduce
Just put type="number" in the input element.
Here's a sandbox to easily test the issue: https://codesandbox.io/s/vue-input-facade-tests-qnt2z?file=/src/App.vue.

Expected behavior
Follow the mask behavior in the same way as it works on <input type="text" />.

Additional context
Yes, I know I could just remove the type=["number"], but keeping it is important for accessibility and for UX (since many mobile browsers can show a dedicated numeric virtual keyboard only for type=["number"]).

No type declaration

As the title says, there i no type declaration fr this, which requires a shim in TypeScript projects.

Otherwise it just throws

Could not find a declaration file for module 'vue-input-facade'.

optional value like v-mask

Describe the solution you'd like
Add a token optional to use on telephone or other on character not required, example
(021) 98689-2332 - (0?##) #####-####
(21) 98689-2332 - (##) #####-####
? | Optional (next character)

Describe alternatives you've considered
https://www.npmjs.com/package/v-mask

Should document differences to vue-the-mask

I'm looking for an alternative to vue-the-mask.

It would be great to mention in the README whether this is a drop-in-replacement, or if I need to change something. You only mention that it is a fork.

As far as I can tell, the tokens are the same except the escape token?

Documentation note regarding Vuetify

In order for the v-facade directive to work with Vuetify you have to call the Vue.use(InputFacade); after Vuetify plugin is loaded.

Hope this helps someone else until Vuetify integrates masking (or your handy plugin) again!

An question about :masked prop

First of all, thanks for the great plugin!

Describe the bug
I'm not sure if this is a bug - I would like to receive the raw format of the phone after submitting the form. But somehow it doesn't work ...

To Reproduce
Here is my input:

<input
  id="phone"
  v-facade="'+7 (###) ###-##-##'"
  :masked="masked"
  type="tel"
  name="phone"
  placeholder="+7 (___) ___−__−__"
>

Here i am defining parameter masked

data() {
  return {
    input: '',
    masked: false,
  };
},

I also tried to work with props:

  props: {
    masked: {
      type: Boolean,
      default: false,
    },
  },

But when submitting the form - I get the data after processing the mask:

Tell me please - is this a bug or am I doing something wrong?

Thanks!

Packaged code does not target ES5

Describe the bug
The NPM package for this library contains non-ES5 syntax, making it difficult to use in an application which needs to support IE11.

Expected behavior
The NPM package code should be ES5 compliant to simplify configuration for users needing to support IE11.

Alternatively, there could be a separate dist file in the package specifically for ES5.

Transform the masked output

Is there any way to hide the true value? For instance, say you have a field asking for a social security number. The mask would be ###-##-####, which normally would show like 123-45-6789. However, I would like it to display like this instead: ***-**-****

I've tried to use both the transform property of the tokens, as well as the pipe feature in the beta branch. However, I don't believe either of them are what I'm looking for.

P.S: This is only a counter measure to simply block someone looking over someones physical shoulder and easily seeing their ssn.

export formatter function to use it with strings

Let's say there is an input for entering information and a mask for input. So, after entering and saving information, it is advisable to store it without a mask, but output it with a mask.

Let's say you need a phone input for authorization. For convenience, Input with a mask. But value without a mask to send to the backend. Then somewhere on the page you need to display this phone number, which was received from backed. With the same mask.
It would be great to have masks in the same file in the project and use the same mask for both input and just a string. And use one library

// InputPhone.vue
import mask from 'masks'
<input-facade :mask="mask" />

//UserCard.vue
import { format } from 'vue-input-facade
import mask from 'masks'
{{ format(mask, phone) }}

Input value set in component mounted hook can lead to stale data

Describe the bug
Apologies in advance for the complicated scenario. If a masked input's value is set after the directive binds, the oldValue property won't be established when the directive binds, which can cause the input's value to be re-used when the component updates due to the underlying data that the input is binding to being updated. I know that's probably hard to follow, so hopefully a more long-winded explanation will help.

The oldValue property is set initially due to a call to updateValue from the bind method of the directive. If the input doesn't have a value yet then oldValue won't be set (and will remain undefined). If a component uses the mounted hook to set the input value programmatically (ex: element's input component), this will happen before the directive is inserted, but after bind, so it won't cause oldValue to be established. If the underlying data changes, the component will update, which will call the directive's update method. Since the oldValue was never established this will cause it to mask the input's value (which has not yet been updated to reflect the change to the data) and raise an input event. It seems like this depends on the exact configuration of components, but the input event may cause the component to capture the value of the input at that time rather than updating to use the new value from the underlying data.

To Reproduce
I have tried to reproduce the problem in a codepen, but haven't had luck so far. Unfortunately I can't currently send a demo link in the app where the issue was discovered.
Steps to reproduce the behavior:

1. Use an element input component to bind to some underlying string data, ex: "[phone]"
2. Attach the facade directive with a mask, ex: phone number. In my case the directive is attached to an ancestor of the input, but I'm not sure if that matters or not.
3. Update the underlying data, ex: to blank string
4. The input in the DOM retains the original value, ex: "[phone]"

Expected behavior
The element in the DOM should be updated to reflect the new value in the underlying data / object.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome (any)
• Version: 102.0.5005.115

Additional context
I know you'd like to have a repro, and if I'm able to I will send one. But hopefully its at least possible to see in the code how this could be a problem. In terms of a fix, if oldValue is established when the component mounts (and "inserted" is called), then the input event won't be raised when the component update occurs, which avoids the problem in my scenario. Please let me know if you have any thoughts on this, or better ideas for how to fix it.

Thanks!
- Bryan

Can i make the mask always shown?

E.g i want to have mask for phone number
Instead of waiting user to write their first digit first, i want to show +1 as prefix in my input indefinitely,

Is it possible right now with this plugin?

Thanks

"This dependency was not found" on 1.3.5

After updating to 1.3.5, I get "This dependency was not found" on nuxt dev build.

Steps to reproduce the behavior:

1. Update to 1.3.5
2. Try run dev build

Expected behavior
No breaking change from 1.3.4

Edit: setting "vue-input-facade": "1.3.4" on package.json fix the build.

Pre-project question RE IP address masking

I have an upcoming project where I'm going to need to mask vuetify text field inputs for IP addresses. I need to allow {0-255}.{0-255}.{0-255}.{0-255} so not only do I want to limit the number amount for each value to 255 (ie 256 not valid) and also I want them to be able to enter 8.8.8.8 (one number per octet) without having to do 008.008.008.008 by using a generic mask like ###.###.###.### would required - Is this going to be possible with this library?

[IE] Bug with the cursor with facade directive and mask with / delimiter

Hello !

Thanks for reading this issue ! I hope the description is clear enough, do not hesitate if you need more information !

Describe the bug

Bug version : 1.3.2
It seems there is a bug with the cursor on IE when we use masks with a character as delimiter (eg: the "/" for a date ##/##/####).
The bug appears when using v-facade directive but works fine with component.

I tried to downgrade the version and it seems 1.2.0 works well !

To Reproduce

• I created a simple VueJS app with vue-cli

• Add vue-input-facade and import it as global

import InputFacade from 'vue-input-facade';
Vue.use(InputFacade);

• Add custom-event-polyfill and import it in main.ts file (used for IE)
  import 'custom-event-polyfill';

• Add 2 inputs, one using facade directive and another with component

<h3>Test vue-input-facade</h3>
<input v-facade="'##/##/##'" type="text" />
<br>
<br>
<input-facade mask="##/##/##" type="text" />

Expected behavior
The cursor should follow the user's input when he is writing

Desktop (please complete the following information):

• OS: Windows 10
• Browser : IE
• Version 11

Additional context

Component and directive have different behaviours when deleting input. The directive deletes automatically the "/" but the component doesn't.

Thanks !

Cannot paste French IBAN with mask

The mask:
FR## #### #### ##XX XXXX XXXX X##

The pasted IBAN with different spacing:
FR 14 20041 01005 0500013M026 06
FR14 2004 1010 0505 0001 3M02 606
Copied from https://bank.codes/iban/structure/france/

The last number gets dropped after pasting in the IBAN.

Used as follows:

<el-input
                  :placeholder="ibanPlaceholder"
                  masked
                  v-facade="ibanMask"
                  @keyup.native="setIbanMask"
                  @blur="setIbanMask"
                  :maxlength="64"
                  v-model="formData.bankAccount.iban"></el-input>

Where setIbanMask is a function to switch to a matching iban placeholder.

Error with conditional slot content

Describe the bug
Error with v-if in VTextField slot's content where the directive is binded

To Reproduce
Reproduction link

<div class="input" v-facade="'##'">
  <v-text-field v-model="input">
    <template #prepend>
      <span v-if="toggle" />
    </template>
  </v-text-field>
</div>

Steps to reproduce the behavior:

1. Enter text in the VTextField, it works as expected (can only enter numbers)
2. Click the "toggle" button
3. Enter text again
4. See error in console, the directive is broken

"[Vue warn]: Error in directive facade update hook: 'TypeError: Cannot destructure property 'config' of 't2[a]' as it is undefined.'

Expected behavior
The directive doesn't break when using v-if in slot content

Workaround
When using v-show instead of v-if this issue doesn't occurs

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 86

Additional context
It seems that the config is lost, core.updateValue is called in the update hook. Inside, the config id read let { config, oldValue } = el[CONFIG_KEY] but it doesn't exists anymore

multimask

Hey, how to change mask for:

1. when I write "[phone]", @vue-input-facade rewrite to "[phone]".
2. when I write "[phone]", it rewrites to "[phone]"
3. when I write "1 [phone]" it rewrites to "[phone]"

I tried use @vue-the-mask, but I didn’t succeed.

Korean is not responding in v-model.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Add v-facade to input tag, add value to v-model
2. Enter a regular expression that allows you to enter only Korean in v-facade
   (Regular expression : /[ㄱ-ㅎ|가-힣]/i)
   (Optionally specify the key value K in token)
3. Enter Korean in the input tag
4. See error

Expected behavior
Automatically enter value when chrome checks vue in developer tool

Screenshots
1.

Desktop (please complete the following information):

• OS : window
• Browser : chrome
• Version : 92.0.4515.159

Additional context
Add any other context about the problem here.

How to display placeholder?

When using Inputmask, it always shown as: +1 (4__) ___-___, as placeholder, but with this package, mask only being shown when you type. Is it possible to always show a placeholder?

Empty value on some devices

Describe the bug
Hi, I'm faced with a bug that I really don't understand and that I'm unfornutalety unable to reproduce.

I'm using the directive v-facade on a VTextField from Vuetify, and in some cases it seems that we're unable to retreive the value entered by the user, resulting in null values in our logs.

Here's the implementation of one of the component where we're using Vue Input Facade:

<template>
	<VTextField
		v-facade="mask"
		:value="computedValue"
		:prepend-inner-icon="phoneIcon"
		label="Phone"
		@input.native="setInternalValue"
		@change="emitChangeEvent"
	/>
</template>

<script lang="ts">
	import Vue from 'vue';
	import Component, { mixins } from 'vue-class-component';

	interface InputFacadeEvent extends Event {
		target?: {
			unmaskedValue: string;
		};
	}

	const Props = Vue.extend({
		props: {
			value: {
				type: String,
				default: undefined
			}
		}
	});

	const MixinsDeclaration = mixins(Props);

	@Component({
		model: {
			prop: 'value',
			event: 'change'
		}
	})
	export default class PhoneField extends MixinsDeclaration {
		internalValue: string | null = null;

		mask = '## ## ## ## ##';

		get computedValue(): string | null {
			return this.value ? this.formatPhone(this.value) : null;
		}

		formatPhone(value: string): string {
			const phone = value.match(/.{1,2}/g);

			if (!phone) {
				return '';
			}

			return phone.join(' ');
		}

		setInternalValue(event: InputFacadeEvent): void {
			const unmaskedValue = event.target?.unmaskedValue ?? null;
			this.internalValue = unmaskedValue;
		}

		emitChangeEvent(): void {
			this.$emit('change', this.internalValue);
		}
	}
</script>

We're using event.target?.unmaskedValue, maybe this is related to our issue?

Devices

We're seeing this behavior on different devices, such as:

• iPhone with Safari 15.2, 15.1, 14.4.2
• Android 9, 10, 11 and 12 with Chrome 87.0.4280.101, 90.0.4430.210, 92.0.4515.166, 96.0.4664.92, 97.0.4692.98 and 98.0.4758.87

I'm sorry to open a bug report with so little information, hopefully you might be able to help us in some way!

Numeric masks do not work correctly with trailing zeros

Describe the bug

Numeric masks do not work correctly when you can have a decimal point and you are filling the number with zeros, it erases and rewrites input that should not be changed.

Example : ['#.##', '##.##', '###.##', '####.##']

• What is typed -> Result (Expected)
• 100 --> 1.00 (Expected: 1.00)
• 1000 -> 10 (Expected: 10.00)
• 10000 -> 1 (Expected: 100.00)
• 100000 -> 1.0 (Expected: 1000.00)
• 111 --> 1.11 (Expected: 1.11)
• 1111 -> 11.11 (Expected: 11.11)
• 11111 -> 111.11 (Expected: 111.11)
• 111111 -> 1111.11 (Expected: 1111.11)

To Reproduce
See above

Expected behavior
See above

Screenshots N/A

Desktop

• OS: Windows
• Browser Firefox
• Version 78

As you can see, typing in zeros does not have the same behavior as other numeric values, which is unexpected and seemingly incorrect behavior. This makes it practically impossible to actually write out numeric values that end in multiple zeros with a mask.

incorrectly triggers validation

Describe the bug
A clear and concise description of what the bug is.
I'm migration from vue-the-mask
I'm using a vuetify v-text-field

with vue-the-mask, when the page loads, no validation is triggered.
with vue-input-facade, when the page loads, it seems to set the field to empty string and triggers validation.

it seems the text box is initially null, but the directive sets it to '' empty string data, it triggers an input change

is there a way to force it to remain null?

 <v-text-field
      v-model="data"
      v-facade="mask"
      :rules="rules.required"
    >

"A plugin must either be a function or an object with an "install" function."

Describe the bug

I can't install this plugin.

To Reproduce

I included vue-input-facade like this in my code:

var inputFacade = require("vue-input-facade");

var app = Vue.createApp({ ... });

app.use(inputFacade);

When I run that, I get the following message in the browser's dev console:

[Vue warn]: A plugin must either be a function or an object with an "install" function.

These are my package.json dependencies:

"dependencies": {
    "jasmine": "^3.6.1",
    "jslint": "^0.12.1",
    "vue": "^3.0.5",
    "vue-input-facade": "^1.3.2",
    "webpack": "^4.44.1",
    "yaml": "^1.10.0",
    "yaml-import-loader": "^1.3.6"
}

Is this something I'm doing wrong on my end? Or is this is an issue with vue-input-facade?

Thanks!

question: when using multiple masks, what determines the priority?

masks = "+### ########", "+## ########"

When i type '12' then '3', i get '+12 3', so it seems to be matching the 2nd mask first.
Is there a way to match the 1st one instead?

Zero overwritten when Vue .number modifier used on v-model directive

When using the v-facade directive on a component that uses the .number (type cast value as a number) modifier on the v-model directive, the value is being set to an empty string if a 0 is entered.

<v-text-field v-model.number="myNumberThatCanBeZero" v-facade="'##'" />

Looks like a falsy check is being done which is setting the value to the empty string.

vue-input-facade/src/core.js

Line 156 in 35a95ee

currentValue = currentValue || ''

Would it be be possible update to look for zero there as well? Maybe something like...

currentValue = currentValue || currentValue === 0 ? currentValue : ''

Cannot change the value programmatically when using vuetify

Hi, my backend has a brazilian cep value as "23020180".
When my view is appearing on the browser, no mask is applied. The value shows as "23020180"
To view the mask formatted value, I have to edit the text-field, deleting or appending some number.
Is it the expected behaviour?
Is there a way to show the formatted value with mask without edit the field?
I'd like to see the text field showing "23020-180". Here is all text-fields as cep and telephones showing without masks when the view is loaded.

<v-col cols="12" md="2">
                  <v-text-field
                    label="CEP"
                    v-model="convenio.cep"
                    required
                    append-icon="search"
                    class="purple-input"
                    v-facade="'#####-###'"
                  />
</v-col>

mounted(){
  //from backend, to simulate I have set as bellow
  convenio.cep="23020180"
}

Safari: TypeError when `input type="color"` alongside input-facade

Describe the bug
When you have an input facade along side an input with type="color" it causes a TypeError in Safari when you select a colour.

To Reproduce
Steps to reproduce the behavior:

1. Create code such as:

<div>
	<input type="color" value="colorVal" @input="colorVal = $event">
	<input-facade type="text" value="colorVal" @input="colorVal = $event" />
</div>

2. Select a colour using the colour input
3. A type error will be seen in the console

Expected behavior
There should be no type error

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Mac OS 11.5.2
• Browser: Safari 14.1.2

Additional context
It appears that the root cause is that the input facade places a handler on the parent element. This handler now catches events from the color input. For some reason, Safari's color input throws a TypeError on event.target.selectionEnd.

Last update breaks mask behavior with Vuetify (only on Firefox?)

Describe the bug
After upgrading from 1.2 to 1.3 the mask doesn't work correctly in Vuetify's inputs. After typing a character that shouldn't be allowed it gets added to the value and the mask breaks.

To Reproduce
Steps to reproduce the behavior:
Just add the directive to the input.
<v-text-field v-facade="'AAAA####'" counter="8" label="AAAA####" />

Screenshots
I've got two gifs showing how it worked on 1.2 and the problem after upgrading to 1.3:
Version 1.2 (Working)
Version 1.3 (Nor Working)

Desktop (please complete the following information):

• OS: Windows
• Browser: Firefox
• Version: 77.0.1

Additional context
I've tried on Firefox, Chrome and Edge and it seems that this only happens on Firefox. Not sure about other Browsers. I had to downgrade to 1.2 for now as I need this feature to be working on Firefox.

Pass custom tokens with a directive

Hello,

according to the documentation:

The directive has all the same features as the component, however the interface may not be as straight forward

But I can't figure out how to pass custom tokens in runtime since the only directive defined seems to be the facade one.

Thank you very much and keep up the good work!