npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

v-mask-persian

v1.0.6

Published

Tiny input mask library for Vue.js based on text-mask-core (~5kb) exposed as directive. No dependencies - add persian and arabic numbers support

Downloads

23

Readme

:abcd: Vue input mask (SUPPORT PERSIAN AND ARABIC NUMBERS)

npm npm bundle size npm GitHub license Vue2 jsDelivr Tested with TestCafe

Tiny input mask library for vue.js based on text-mask-core (~5kb) exposed as directive. No dependencies

:art: Playground on the Web

  • https://codesandbox.io/s/m3q1m5yp9x (interactive playground with webpack and ESM)
  • https://jsfiddle.net/probil/c6fjjzn6/ (simple interactive playground with UMD)
  • https://v-mask-demo.netlify.com/ (just preview)

:heavy_check_mark: Browser Support

| Chrome | Firefox | Safari | Opera | Edge | IE | iOS Safari | Android WebView | Android WebView | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | 74+ :heavy_check_mark: | 66+ :heavy_check_mark: | 12+ :heavy_check_mark: | 46+ :heavy_check_mark: | 17+ :heavy_check_mark: | 11+ :heavy_check_mark: | 12+ :heavy_check_mark: | 67+ :heavy_check_mark: | 8.2+ :heavy_check_mark: |

We support only browsers with global usage statistics greater then 1%, last 2 version of each browser but not dead browsers. Library may work in older browser but we don't not guarantee that. You may need addition polyfills to make it work.

:cd: Installation

This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.

npm install v-mask

Initialization

ES2015 (Webpack/Rollup/Browserify/etc)

import Vue from "vue";

// As a plugin
import VueMask from "v-mask";
Vue.use(VueMask);

// Or as a directive
import { VueMaskDirective } from "v-mask";
Vue.directive("mask", VueMaskDirective);

// Or only as a filter
import { VueMaskFilter } from "v-mask";
Vue.filter("VMask", VueMaskFilter);

UMD (Browser)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
  // As a plugin
  Vue.use(VueMask.VueMaskPlugin);

  // Or as a directive
  Vue.directive("mask", VueMask.VueMaskDirective);
</script>

:rocket: Usage

<input type="text" v-mask="'####-##'" v-model="myInputModel" />
<!-- OR -->
<input type="text" v-mask="nameOfVariableWithMask" v-model="myInputModel" />

Notice: v-model is required starting from v1.1.0, because a lot of bugs with HTMLElement event listeners and sync with Vue internals.

There is no reason to support using this lib for using without v-model but open the door for using on custom inputs.

Filter usage

<span>{{ '9999999999' | VMask('(###) ###-####') }}</span>

:gear: Configuration

Library provides several ways to apply the mask.

The first and the easiest one is to use default placeholders.

Default placeholders

This approach is good for simple cases. No configuration is required.

app.js:

import Vue from "vue";
import VueMask from "v-mask";
Vue.use(VueMask);

<your_component>.vue:

<template>
  <input type="text" v-mask="'####-##'" v-model="myInputModel" />
</template>
<script>
export default {
  data: () => ({
    myInputModel: "",
  }),
};
</script>

Entering 56f473d4 in the input field will produce value 5647-34 in myInputModel variable.

Here is a list placeholders you can utilize by default:

| Placeholder | Format | | ----------- | ------------------------------ | | # | Number (0-9) | | A | Letter in any case (a-z,A-Z) | | N | Number or letter (a-z,A-Z,0-9) | | X | Any symbol | | ? | Optional (next character) |

Custom placeholders

While default placeholders are easy to use and straightforward in reality we have to deal with more complex cases where validation can be a bit more complex and unpredictable. In such cases it makes sense to define custom placeholders specific to the project or the domain.

To define them you should pass them as an object while installing plugin. Where:

  • key is the character in a mask
  • value is regular expression used to verify entered symbol

You can disable any default placeholder by passing placeholder as a key and null as a value.

Any valid string character can be used as a placeholder (e.g. Cyrillic or Arabic)

app.js:

import Vue from "vue";
import VueMask from "v-mask";

Vue.use(VueMask, {
  placeholders: {
    "#": null, // passing `null` removes default placeholder, so `#` is treated as character
    D: /\d/, // define new placeholder
    Я: /[\wа-яА-Я]/, // cyrillic letter as a placeholder
  },
});

<your_component>.vue:

<template>
  <input type="text" v-mask="'###-DDD-###-DDD'" v-model="myInputModel" />
</template>
<script>
export default {
  data: () => ({
    myInputModel: "",
  }),
};
</script>

Entering 123456 in that input field will produce value ###-123-###-456 in myInputModel variable.

Array of RegExp

In some cases you might not want to define global placeholders either because you are dealing with unique input or you are facing conflicts for placeholders in several places.

In such cases you can supply array of per-char regular excursions or static characters to v-mask.

app.js:

import Vue from "vue";
import VueMask from "v-mask";
Vue.use(VueMask);

<your_component>.vue:

<template>
  <input type="text" v-mask="mask" v-model="myInputModel" />
</template>
<script>
export default {
  data: () => ({
    mask: [
      "(",
      /\d/,
      /\d/,
      /\d/,
      ") ",
      /\d/,
      /\d/,
      /\d/,
      "-",
      /\d/,
      /\d/,
      /\d/,
      /\d/,
    ],
    myInputModel: "",
  }),
};
</script>

In this example entering 5555551234 in the input field will produce value (555) 555-1234 in myInputModel variable.

Notice: Keep in mind that library always verifies one character per regular expression. Trying verify multiple charters in the same RegExp won't work.

Function

If custom placeholder and array of RegExps can't fit your needs there is one more way you can use to mask a value. The idea beneath is that you can write a function that is used by library to format the output.

This approach is super powerful but also more complex to write and understand so try previous ones first.

The function will be given a value from the input. It should return array of per-char regular expressions & static characters:

app.js:

import Vue from "vue";
import VueMask from "v-mask";
Vue.use(VueMask);

<your_component>.vue:

<template>
  <input
    type="text"
    v-mask="mask"
    v-model="myInputModel"
    placeholder="00:00-23:59"
  />
</template>
<script>
/**
 * Generate a time mask based on input value (23:59)
 * @param {string} value
 */
export function timeMask(value) {
  const hours = [/[0-2]/, value.charAt(0) === "2" ? /[0-3]/ : /[0-9]/];
  const minutes = [/[0-5]/, /[0-9]/];
  return value.length > 2 ? [...hours, ":", ...minutes] : hours;
}

/**
 * Generate a time range mask based on input value (00:00-23:59)
 * @param {string} value
 */
export function timeRangeMask(value) {
  const numbers = value.replace(/[^0-9]/g, "");
  if (numbers.length > 4) {
    return [
      ...timeMask(numbers.substring(0, 4)),
      "-",
      ...timeMask(numbers.substring(4)),
    ];
  }
  return [...timeMask(numbers)];
}

export default {
  data: () => ({
    mask: timeRangeMask,
    myInputModel: "",
  }),
};
</script>

In this example entering 02532137 in the input field will produce valid time range 02:53-21:37 in myInputModel variable.

Text Mask Addons

Library supports Text Mask Addons, they are basically pre-generated functions (describe above) for advanced functionality like currency masking.

The usage is simple. Configure the addon as want and pass the result to the v-mask as you would to text-mask-core.

app.js:

import Vue from "vue";
import VueMask from "v-mask";
Vue.use(VueMask);

<your_component>.vue:

<template>
  <input
    type="text"
    v-mask="mask"
    v-model="myInputModel"
    placeholder="$100.00"
  />
</template>
<script>
import createNumberMask from "text-mask-addons/dist/createNumberMask";
const currencyMask = createNumberMask({
  prefix: "$",
  allowDecimal: true,
  includeThousandsSeparator: true,
  allowNegative: false,
});
export default {
  data: () => ({
    mask: currencyMask,
    myInputModel: "",
  }),
};
</script>

In this example:

  • entering 1000000.00 in the input field will produce $1,000,000.00 in myInputModel variable
  • while entering 100 in the input field will produce $100

View the createNumberMask documentation for a full list of options available.

:syringe: Tests

Jest is used for unit-tests.

Unit-tests can be executed by typing this command in your terminal:

npm test

TestCafe is used of E2E testing.

E2E-tests can be executed by typing this command in your terminal:

npm test:e2e

:anchor: Semantic Versioning Policy

This plugin follows semantic versioning.

:newspaper: Changelog

We're using GitHub Releases.

:beers: Contributing

We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new issue, but first please make sure your question does not repeat previous ones.

Notice: You should make your changes only in src folder, don't try to edit files from dist as it compiled from src by babel and shouldn't be changes manually.

:lock: License

See the LICENSE file for license rights and limitations (MIT).