v-digits-separator

Digits Separator - Mask

💿 Project setup

npm install v-digits-separator

import globally

//On Vue 2
import Vue from "vue";
import { separator, mask, separatorFilter, maskFilter } from "v-digits-separator";

Vue.directive("separator", separator);
Vue.directive("mask", mask);

Vue.filter("separator", separatorFilter);
Vue.filter("mask", maskFilter);


//On Vue 3
import { createApp } from "vue";
import App from "./App.vue";
import { separator, mask, separatorFilter, maskFilter } from "v-digits-separator";

const app = createApp(App);
app.directive("separator", separator);
app.directive("mask", mask);

Notice: For using Filters on Vue3, You should import and use them locally, which is stated below.

For custom-directive, I have named those "separator" and "mask". You can change their name to anything. In above case, you should use them like v-separator and v-mask in the input tags or a tag which will be finally reached to the input tag in its children.

For Filter, I have named those "separator" and "mask". You can change their name to anything. In above case, you should use them in the HTML tags of components like

{{ '1256789' | separator({ separator: { sign: ',', afterEach: '3' } }) }}

for filter of separator. And

{{ '1256789' | mask('##/-###-#') }}

for filter of mask. (Consider you can put a variable instead '123456789' before pipe symbol)

Notice: You are not forced to import all of them, meaning separator, mask, separatorFilter, and maskFilter. If you just want to use one of them, you can import just that one.

You should keep in mind that you do not have to use both directives in one input. You can import both directives and put one of them in some of your inputs and put another one in others, based on your need.

But you can have many filters one after the other such as

{{ '123456789' | separator({ separator: { sign: ',', afterEach: '3' } }) | mask('##/-###-#') | mask('##{###')}}

and the output will be 12{345

These commands must be written in the main.js file.

import locally

import { separatorFilter, maskFilter } from "v-digits-separator";

export default {
  data() {
    return {
      separatorFilter,
      maskFilter,
      ...
    }
  },
  ...
}

Filters can also define and use locally.

Consider when you define them locally, you should use them in the Tags in different format, rather than when you define them globally.

Notice: Since Vue's Filters does not exist in the Vue3, you can define and use them locally.

call in the format

// Use Custom-Directive:
<Input v-separator="{ separator: { sign: ',', afterEach: '3' }, dot: { afterDot: '2' }, maxDigits: '11', zeroAtBegin: true }" v-model="variable1" />
<Input v-mask="'##-A/#,W.#)#W)'" v-model="variable2"/>

// Use Filters Globally:
<div> {{ '12345.67089' | separator({ separator: { sign: ',', afterEach: '3' }, dot: { afterDot: '2' }, maxDigits: '11', zeroAtBegin: true }) }} </div> // output will be 12,345.67
<div> {{ '123456a7bvd8dfs9' | mask('##-A/#,W.#)#W)') }} </div> // output will be 12-3/4,a.7)8d)

// Use Filters Locally / you can also use it in Vue3:
<div> {{ separatorFilter('12345.67089', { separator: { sign: ',', afterEach: '3' }, dot: { afterDot: '2' }, maxDigits: '11', zeroAtBegin: true }) }} </div>  // output will be 12,345.67
<div> {{ maskFilter('123456a7bvd8dfs9', '##-A/#,W.#)#W)' ) }} </div> // output will be 12-3/4,a.7)8d)

First off, the Persian numbers (Farsi numbers) and English numbers are both defined and work.

Second, You can use globally filters in any tag like p

<p> {{ '123456a7bvd8dfs9' | mask('##-A/#,W.#)#W)') }} </p> // Before pipe can be a fixed characters or a variable, and after pipe should call the filter function name and then specify the template which can be mask or separator with your own requested formats.

Third, You can use locally filters in vue2/vue3 in any tag like span

<span> {{ maskFilter('123456a7bvd8dfs9', '##-A/#,W.#)#W)' ) }} </span> //call the maskFilter or separatorFilter and then the first parameter must be your fixed or variable input, and the second parameter must be your requested template, according to the filter function format.

Fourth, you can use directives in any input tag or any tag which will lead to input tag in the lower tags, with the following format as a complete format for separator with v-separator and a required template for v-mask, such as

<Input
v-model="variable1"
v-separator="{ separator: { sign: ',', afterEach: '3' }, dot: { afterDot: '2' }, maxDigits: '11', zeroAtBegin: true }"
...
/>

<!--or-->

<Input
v-model="variable2"
v-mask="'##-A/#,W.#)#W)'"
...
/>

Consider the format of v-mask can be anything.

One point: As I mentioned above, since I named the "separator" and "mask", I used v-separator and v-mask in different Input tags. If you call a directive like Vue.directive("se", separator) or Vue.directive("ma", mask), you can use it in the tag like v-se or v-ma.

Custom Directive Samples

Some samples in different formats for SEPARATOR (v-separator)

1- <input v-separator v-model="variable" /> // just digits without any separator, dot, and limitation in number of digits can be inputted, such as 1234509876 (consider you cannot have zero at the beginning)
2- <input v-separator="{zeroAtBegin: true }" v-model="variable" /> // just digits without any separator, dot, and limitation in number of digits can be inputted, but zeros are allowed to be added at the beginning, such as 0063394723
3- <input v-separator="{dot: true}" v-model="variable" /> // digits with a dot without separator and digits limitation can be inputted, such as 12345.0986
4- <input v-separator="{separator: true, dot: {afterDot: '2'} }" v-model="variable" /> // digits with separator, which is comma after 3 digits, by default, and one dot with generally 4 digits after dot, without any digits limitation can be inputted that separators will be added automatically, such as 12,345,678.0078
5- <input v-separator="{separator: {sign: '-', afterEach: '4'}, maxDigits: '16'}" v-model="variable" /> // digits with dash separator after each 4 digits, without any dot, with a digits limitation of 16 digits can be inputted that separators will be added automatically, such as 1234-5678-0987-6543
6- <input v-separator="{separator: {sign: ',', afterEach: '3'}, dot: {afterDot: '2'}, maxDigits: '11', zeroAtBegin: true}" v-model="variable" /> // digits with comma separator after 3 digits with one dot which generally 2 digits after dot are allowed to come, and we have digits limitation of 11 digits can be inputted that separators will be added automatically, such as 123,456,789.02

The advantages of this 'separator' package

1- The input textBox shows the inputted numbers and doesn't show any irrespective characters such as alphabet.
2- It works on both English and Persian numbers. (All numbers transform to the English ones)
3- When an irrespective character is pressed, the caret will stay on the right place, not getting reset.
4- When a right character, such as number or dot (if it is requested), gets added or deleted in the middle of the input textBox, the caret stay on the right place, not getting reset.
5- You can specify if you have separator or not. If you want it, You can specify after each character the separator appears. The separator can be everything even space, but numbers and dot. (Consider not more than one character as a separator and if you want to use backslash sign (\) as separator, you should put double backslash (\\) as separator, which will be => separator: {sign: '\\', afterEach: '4'})
6- You can specify if you have dot sign as decimal or not. If you want it, you can specify how many characters will be allowed to appear after a dot if there is a limitation. (Consider if you specify this allowed digits after dot, the last number won't be rounded based on last next numbers)
7- You can specify a limitation based on the number of digits you expect to see. In other words, you can specify the max digits, without considering the separators and dot.
8- It's considered that you cannot start that by zero, but 0.(zero Dot)  by default. But if you need to input a bunch of number that it may have one or many zero at the beginning, you can add an attribute, named zeroAtBegin, to the relevant tag to be possible to have one or many zero at the beginning.
9- If you copy a number from somewhere out of the format and paste it in the input textBox, the numbers will be set based on the requested format. For instance, if you copy a bunch of characters with many alphabets and dots in the middle of them. All alphabet characters and dot signs, but the last one, will be removed and numbers will be remained and set based on your requested format.
10- If you request to have dot sign, you can have just one dot in the input textBox. If you input the second dot in the input textBox the first one will be removed. Also, you should consider the digits before dot will be separated if any separator sign is specified, and the digits after dot won't have any separator.

Some samples in different formats for MASK (v-mask)

Separator Symbol	Format
#	Number (0-9,۰-۹)
W	Letter in any case (a-z,A-Z)
A	Number or letter (a-z,A-Z,0-9,۰-۹)

1- <input v-mask="'#####'" v-model="variable" /> // just 5 digits without any separator symbol can be inputted even you can input 0 at the beginning or even 5 zeros, such as 02194 (to show this format you can also use v-separator="{maxDigits: '5', zeroAtBegin: true}")
2- <input v-mask="'####-####-####-####'" v-model="variable" />  // 16 digits can be inputted that dash separator after each 4 digits will be added automatically, such as 1234-5678-0987-6543 (to show this format you can also use v-separator="{separator: {sign: '-', afterEach: '4'}, maxDigits: '16', zeroAtBegin: true}")
3- <input v-mask="'(#--##}#{{#/#\\#)#'" v-model="variable" /> // 8 digits can be inputted that separators symbols will be added automatically, such as (1--50}2{{4/4\\9)5 (You can use any format you want , and also consider if you want to use backSlash for the separator symbol, you must put 2 backslashes)
4- <input v-mask="'/#A,##WW.-'" v-model="variable" /> // 3 digits (#), 2 alphabet word (W), and 1 digit/alphabet word (A) based on the format can be inputted, and separator symbols will be added automatically, such as /1e,09Ar.-

The advantages of this 'mask' package

1- You can specify a template which can be filled just with numbers (English and Persian Numbers) along with different symbols based on your request.
2- You can specify a template which can be filled just with English letters along with different symbols based on your request.
3- You can specify a combination template of numbers and English alphabet letters with different symbols based on your request.
4- It works on both English and Persian numbers. (All numbers transform to the English ones)
5- The input textBox shows the inputted numbers and English alphabet letters based on your template and doesn't show any irrespective characters such as English alphabet letters when we have just symbol # in the template, meaning just numbers are allowed to be inputted.
6- When an irrespective character is pressed, the caret will stay on the right place, not getting reset.
7- When a right character, such as number or alphabet letter (if any of them is requested), gets added or deleted in the middle of the input textBox, the caret stay on the right place, not getting reset.
8- Your template can have any symbol with even iterative symbols one after the other without any limitation. (consider if you want to use backslash sign (\) as symbol, you should put double backslash (\\) as symbol, such as v-mask="'##\\####'")
9- Based on your template, the max number of characters will be specified and more than those max numbers won't be displayed, for instance if you chose this template #W,A#/ , you cannot to have more than 4 characters.
10- If you copy a bunch of numbers and English alphabet characters from somewhere out of the format and paste it in the input textBox, the numbers and alphabets will go through your requested template. For instance, if you have this directive template v-mask="'##W##A'"  and then copy and paste the characters like 1234r56789, the outcome will be 12r567 in the input textbox.

One more point for Sheba Address

This will be useful for Iranian, if they want to use Sheba format, which needs to have an IR letters in the first of input and 24 digits in the rest. All you need to do is putting the id=sheba in the input tag, then put the v-mask="'WW########################'" or any other format like v-mask="'WW##-####-####-####-####-####-##'" to make it work properly.

<input id="sheba" v-mask="'WW##-####-####-####-####-####-##'" v-model="variable" />

Filter Samples

Some samples in different formats for SEPARATOR (Separator Filter)

1- <div>{{ '0012a34b5.67hf089' | separator() }}</div> // just digits without any separator, dot, and limitation in number of digits will be displayed. The output of this sample will be 1,234,567,089 (Consider you cannot have zero at the beginning)
2- <div>{{ '0012a34b5.67hf089' | separator({ zeroAtBegin: true }) }}</div> // just digits without any separator, dot, and limitation in number of digits will be displayed, but zeros are allowed to be added at the beginning. The output of this sample will be 001,234,567,089
3- <div>{{ '0012a34b5.67hf089' | separator({ dot: true }) }}</div> // digits with a dot without separator and digits' limitation will be displayed.The output of this sample will be 12345.67089
4- <div>{{ '0012a34b5.67hf089' | separator({ separator: true, dot: { afterDot: '2'} }) }}</div> // digits with separator, which is comma after 3 digits, by default, and one dot with generally 4 digits after dot, without any digits' limitation will be displayed. The output of this sample will be 12,345.67
5- <div>{{ '0012a34b5.67hf089' | separator({ separator: { sign: '-', afterEach: '4'}, maxDigits: '16' }) }}</div> // digits with dash separator after each 4 digits, without any dot, with a digits' limitation of 16 digits will be displayed. The output of this sample will be 12-3456-7089
6- <div>{{ '0012a34b5.67hf089' | separator({ separator: { sign: ',', afterEach: '3'}, dot: { afterDot: '2' }, maxDigits: '11', zeroAtBegin: true }) }}</div> // digits with comma separator after 3 digits with one dot which generally 2 digits after dot are allowed to come, plus zero is allowed to come at the beginning, and we have digits' limitation of 11 digits will be displayed. The output of this sample will be 0,012,345.67

The advantages of this 'separatorFilter' package

1- All irrespective characters such as alphabet will be removed.
2- It works on both English and Persian numbers. (All numbers transform to the English ones)
3- You can specify if you have separator or not. If you want it, You can specify after each character the separator appears. The separator can be everything even space, but numbers and dot. (Consider not more than one character as a separator and if you want to use backslash sign (\) as separator, you should put double backslash (\\) as separator, which will be => separator: {sign: '\\', afterEach: '4'})
4- You can specify if you have dot sign as decimal or not. If you want it, you can specify how many characters will be allowed to appear after a dot if there is a limitation. (Consider if you specify this allowed digits after dot, the last number won't be rounded based on last next numbers)
5- You can specify a limitation based on the number of digits you expect to see. In other words, you can specify the max digits, without considering the separators and dot.
6- It's considered that numbers cannot be started by zero, but 0.(zero Dot) by default. But if you need to have one or many zero at the beginning, you can add an attribute to the template, named zeroAtBegin, to be possible to have one or many zero at the beginning.

Some samples in different formats for MASK (Mask Filter)

Separator Symbol	Format
#	Number (0-9,۰-۹)
W	Letter in any case (a-z,A-Z)
A	Number or letter (a-z,A-Z,0-9,۰-۹)

1- <div>{{ '0012a34b5.67hf089' | mask('#####') }}</div> // just 5 digits without any separator symbol will be displayed even you can have 0 at the beginning or even 5 zeros. The output of this sample will be 00123 (to show this format you can also use <div>{{ '0012a34b5.67hf089' | separator({ maxDigits: '5', zeroAtBegin: true }) }}</div> )
2- <div>{{ '0012a34b5.67hf0891234' | mask('####-####-####-####') }}</div> // 16 digits are allowed to be displayed that dash separator after each 4 digits will be added automatically. The output of this sample will be 0012-3456-7089-1234 (to show this format you can also use <div>{{ '0012a34b5.67hf0891234' | separator({separator: {sign: '-', afterEach: '4'}, maxDigits: '16', zeroAtBegin: true}) }}</div> )
3- <div>{{ '0012a34b5.67hf089' | mask('(#--##}#{{#/#\\#)#') }}</div> // 8 digits will be displayed that separators symbols will be added automatically. The output of this sample will be (0--01}2{{3/4\\5)6 (Consider you can use any format you want , and also consider if you want to use backSlash for the separator symbol, you must put 2 backslashes)
4- <div>{{ '0012a34b5.67hf089' | mask('/#A,##WW.-') }}</div> // 3 digits (#), 2 alphabet words (W), and 1 digit/alphabet word (A) based on the format will be displayed, and separator symbols will be added automatically. The output of this sample will be /00,12ab.-

The advantages of this 'maskFilter' package

1- You can specify a template which can be filled just with numbers (English and Persian Numbers) along with different symbols based on your request.
2- You can specify a template which can be filled just with English letters along with different symbols based on your request.
3- You can specify a combination template of numbers and English alphabet letters with different symbols based on your request.
4- It works on both English and Persian numbers. (All numbers transform to the English ones)
5- All irrespective characters such as English alphabet letters when we have just symbol # in the template, meaning just numbers are allowed to be displayed.
6- Your template can have any symbol with even iterative symbols one after the other without any limitation. ( Consider if you want to use backslash sign (\) as symbol, you should put double backslash (\\) as symbol, such as {{ '0012a34b5.67hf089' | mask('##\\####') }} )
7- Based on your template, the max number of characters will be specified and more than those max numbers won't be displayed, for instance if you chose this template #W,A#/ , you cannot to have more than 4 characters.
8- If you have a bunch of numbers and English alphabet characters out of the format, the numbers and alphabets will go through your requested template. For instance, if you have this {{ '0012a34b5.67hf089' | mask('##W##A') }}, the outcome will be 00a34b .

Contact Me

I hope these packages will be useful for you. If you see any issue or concern in this case, please let me know through this email [e-mail]. to get them fixed ASAP.