fix(masker.js): first character escaped

[dima-bzz]

Fix first escaped character with prefill

Before fix: \\A # 5 ->

After fix: \\A # 5 -> A

[RonaldJerez]

I am not seen the issue you are describing. I am able to escape the first character just fine. The escape is one slash only, not two.

[dima-bzz]

Doesn't insert A into input if value is empty

Codesandbox

<input v-facade.prefill="'\A # 5'" name="test" />

I tested and mask = A # 5 and empty string not working for token A and char = undefined. But if i using two slash like this

<input v-facade.prefill="'\\A # 5'" name="test" />

the mask = \A # 5

...
let { mask = '', tokens, prefill = false, short = false } = config
console.log(mask)
...

So if using two slash, first mask character = \ but cycle stopped and not insert next character from mask A into input.

// no more input characters and next character is a masked one
if (!char && masker) break

We need to escape two characters, \ and A or any character from tokens like this

\\A or \\a or \\S...

[RonaldJerez]

Ok I see what you mean. One issue with your solution though, the slash cannot be escaped. when using multiple slashes then you are really trying to escape the slash it self.

So in this case: \\A # the output should be a slash with A been a masking character. If you wanted to escape the A, then it should be \A with just a single slash, and if you wanted to escape both the slash and the A, then it should be \\\A

I took a look at the code, I think we can just move the if (!char) check to be below the escape check and that would fix both issues. I'll write that on the code review to be more clear.

edit: github escaped the slashes, editted to shows as intended.

[dima-bzz]

So in this case: \\A # the output should be a slash with A been a masking character. If you wanted to escape the A, then it should be \A with just a single slash, and if you wanted to escape both the slash and the A, then it should be \\\A

if I set the mask to \\A #, then the slash was parsed as an escape character from tokens.

Mask: \A # console.log(mask) -> A #

Mask: \\A # console.log(mask) -> \A #

Mask: \\\A # console.log(mask) -> \A #

Your can see Codesandbox

Directive and component work in different ways

[RonaldJerez]

if I set the mask to \\A #, then the slash was parsed as an escape character from tokens.

I think this is due to Vue parsing the value passed into the directive. If you test via the component where the value of mask is an actual string you'll notice you only need to to use one \ character to escape. Would need to check if there's a way to not have vue parse the string in the directive without losing the option to pass an object too.

However your new code does in-fact fix the issue you highlighted.

[github-actions[bot]]

:tada: This PR is included in version 1.4.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[dima-bzz]

Good. I will study this question. We could update the beta branch. I have new functionality.

[RonaldJerez]

Good. I will study this question. We could update the beta branch. I have new functionality.

Beta branch as been updated with all the latest changes. I also added repeating functionality.

[dima-bzz]

You beat me to it. I also made this functionality.