🔡 Tiny input mask library for Vue.js (directive)

Overview

🔡 Vue input mask

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

🎨 Playground on the Web

✔️ Browser Support

Chrome Firefox Safari Opera Edge IE iOS Safari Android WebView Android WebView
74+ ✔️ 66+ ✔️ 12+ ✔️ 46+ ✔️ 17+ ✔️ 11+ ✔️ 12+ ✔️ 67+ ✔️ 8.2+ ✔️

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.

💿 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'

// Prefered: as a plugin (directive + filter) + custom placeholders support
import VueMask from 'v-mask'
Vue.use(VueMask);

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

// Or only as a filter-only
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>

🚀 Usage

">
<input type="text" v-mask="'####-##'" v-model="myInputModel">

<input type="text" v-mask="variableWithMask" 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

The filter accepts a mask similarly to the directive, and might be useful when you need to render a raw value as masked without using an input (e.g. formatting currency).

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

<span>{{ variableWithRawValue | VMask(variableWithMask) span>

⚙️ 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)

.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 tricky 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, {   // (!) custom placeholders support requires registration as a plugin to
  placeholders: {
    '#': null,       // passing `null` removes default placeholder, so `#` is treated as character
    D: /\d/,         // define new placeholder
    Я: /[\wа-яА-Я]/, // cyrillic letter as a placeholder
  }
})

.vue :

{{ 123456 | VMask(mask) }} ">
<template>
  <input type="text" v-mask="'###-DDD-###-DDD'" v-model="myInputModel">
  
  <span>{{ 123456 | VMask(mask) }}span>
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 expressions or static characters to v-mask.

app.js:

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

.vue :

{{ 5555551234 | VMask(mask) }} ">
<template>
  <input type="text" v-mask="mask" v-model="myInputModel">
  
  <span>{{ 5555551234 | VMask(mask) }}span>
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 to 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)

.vue :

{{ '02532137' | VMask(timeRangeMask) }} ">
<template>
  <input type="text" v-mask="timeRangeMask" v-model="myInputModel" placeholder="00:00-23:59">
  
  <span>{{ '02532137' | VMask(timeRangeMask) }}span>
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: () => ({
      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 you 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)

.vue :

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

💉 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

Semantic Versioning Policy

This plugin follows semantic versioning.

📰 Changelog

We're using GitHub Releases.

🍻 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. Moreover, adding a proper tests for your PR drastically improves chances of merging.

🔒 License

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

Comments
  • Adds optional character to mask

    Adds optional character to mask

    Using "(##) ####-####?#" as mask allows to have the last character as optional character.

    Also avoids value loss on filled inputs mask changing. Try the demo with 111.222.333/444 then change ther mask, the value will change to 111.222.333

    opened by DawTaylor 21
  • Enable/disable mask on condition

    Enable/disable mask on condition

    Sometimes mask need to be apply to some fields on condition. For now we solve this by duplicating markup with all attributes:

    <input
        v-if="field.mask"
        v-mask="field.mask"
        v-model="value"
        ... another attributes ...
    />
    <input
        v-else
        v-model="value"
        ... another attributes ...
    />
    

    In documentation there is X character for any symbol, but it reduce total characters count

    Will be useful when possible to set mask on condition. For example:

    <input
        v-mask="field.mask || false"
        v-model="value"
    />
    
    <!-- OR -->
    <input
        v-mask="field.mask || '*'"
        v-model="value"
    />
    
    <!-- OR -->
    <input
        v-mask="someComputedMask"
        v-model="value"
    />
    
    bug 🐛 released 
    opened by Alex-Sokolov 14
  • Caret issue on mobile chrome leading to incorrect input

    Caret issue on mobile chrome leading to incorrect input

    Trying a simple mask (##/##) on mobile chrome.

    The caret positions itself before the '/' and stays one char behind (entering 1234 actually displays 12/43)

    bug 🐛 help wanted :hand: 
    opened by paraboul 14
  • Currency Mask

    Currency Mask

    Is there any plan on implementing it? :)

    If it helps, I do have a filter that does this:

    currency (amountInCents) { amountInCents = amountInCents / 100 amountInCents = amountInCents.toFixed(2) return 'R$ ' + amountInCents.replace(/\D/g, ',') }

    But, of course, it does not work as a mask for v-model input

    feature request :rocket: intend to implement released 
    opened by alicesouto 14
  • Filter not working on null values

    Filter not working on null values

    V-Mask and Vue versions

    2.2.3, 2.6.12

    What is Expected?

    (55) 5 5555-5555

    What is actually happening?

    (

    I'm using v-mask in browser from UMD and I get data from database and looping through it using v-for. I use mask as a filter but it's getting empty when I apply the mask. Only ( is displayed on the screen;

    <p>Contato: {{ 'user.cellphone' | VMask('(##) # ####-####') }}</p>

    main.js: Vue.use(VueMask.VueMaskPlugin);

    Is there any other configuration that must be done?

    bug 🐛 intend to implement released 
    opened by madsongr 13
  • Not applying mask on Android mobile devices

    Not applying mask on Android mobile devices

    V-Mask and Vue versions

    1.3.3, 2.6.10

    Reproduction Link

    Any usage examples. Let it be your page: https://v-mask-demo.netlify.com/

    Steps to reproduce

    1. Find an Android mobile device.
    2. Visit the link mentioned above.
    3. Start typing in any input.
    4. See that functionality is not working.

    What is Expected?

    Mask to be properly applied to the input value.

    What is actually happening?

    We can see a raw (neither modified nor masked) value, that we've entered, despite the mask.

    My best approach to somehow solve this thing, was just calling this.$forceUpdate() after every input event firing. As far as I can tell there is something wrong with componentUpdated hook, which is not called on android devices, so all related methods are just not executing at all.

    Maybe there is a better way to solve this thing, I'm not aware of. If so, hit me up.

    Cheers.

    needs investigation :mag: 
    opened by lennoximus 10
  • Regexp mask array in v-mask.2.2.0 version.

    Regexp mask array in v-mask.2.2.0 version.

    Hello! Very thank you for your work! I did try use regexp array in the new version:

    In my model: car_number_mask: [/[АВЕКМНОРСТУХ]/, /[1-9]/, /[1-9]/, /[1-9]/, /[АВЕКМНОРСТУХ]/, /[АВЕКМНОРСТУХ]/, ' ', /[1-9]/, /[1-9]/, /[1-9]?/, /[A-Z]/, /[A-Z]/, /[A-Z]/],

    In my form: <b-form-input v-model="edit_form.truck.number" v-mask="car_number_mask" >

    But when I open my form, I see in input field:

    /[АВЕКМНОРСТУХ]/,/[1-9]/,/[1-9]/,/[1-9]/,/[АВЕКМНОРСТУХ]/,/[АВЕКМНОРСТУХ]/, ,/[1-9]/,/[1-9]/,/[1-9]

    The browser console is clear, with no errors. Please advise what I make wrong.

    bug 🐛 released 
    opened by moveax3 8
  • v-mask not working in android chrome with v-validate

    v-mask not working in android chrome with v-validate

    V-Mask and Vue versions 1.3.2, 2.5

    <input type="tel" v-mask="'## ### ### ###'" name="ABN" v-model="abnDetails.abn" v-validate="{ required: true, min: 14}" :class="{'is-danger': errors.has('ABN') }">

    What is Expected?

    Input should be in form XX XXX XXX XXX.

    What is actually happening?

    In chrome in OnePlus3 the input does not format and displays as XXXXXXXXXXXXX without spaces.

    opened by purvishah165 8
  • [nuxt.js] [FF] Not working on FireFox 45.0.2 (and later)

    [nuxt.js] [FF] Not working on FireFox 45.0.2 (and later)

    Hello. I use your awesome plugin with Nuxt.js project and see simple blink mask after input any symbols.

    If I watch on Safari (os x 10.11) or Opera/Chrome — all WebKit browsers working fine with v-mask plugin.

    How to fix it?

    bug 🐛 help wanted :hand: intend to implement 
    opened by koddr 8
  • Directive on chrome browser (android) not apply the mask.

    Directive on chrome browser (android) not apply the mask.

    Directive on chrome browser (android) not apply the mask.

    On desktop (macOS, windows, etc) using chrome and iOS 10 (chrome and safari), works fine.

    I think the componentUpdated hook of directive is "overriding" the value (masked) to a value not masked after the parent component has a change.

    Seems that problem has relation with this code:

     function triggerInputUpdate(el) {
        var fn = trigger.bind(null, el, 'input');
    
        if (isAndroid && isChrome) {
          setTimeout(fn, 0);
        } else {
          fn();
        }
      }
    

    Changing the code above to:

       function triggerInputUpdate(el) {
            trigger.bind(null, el, 'input')();
        }
    

    Seems fix the bug.

    V-Mask and Vue versions

    2.0.2, 2.6.10

    Reproduction Link

    Steps to reproduce

    1. Use the directive on Chrome for Android
    2. Type a value
    3. The mask won't be applied
    bug 🐛 needs investigation :mag: released 
    opened by henriquecustodia 7
  • IE 9+: Unable to set property 'mask' of undefined or null

    IE 9+: Unable to set property 'mask' of undefined or null

    When I test v-mask on IE10 I get

    Unable to set property 'mask' of undefined or null reference

    I works in Chrome and Firefox with no issues I have Polyfill enabled in my application.

    I resolved these isues by making the changes below: Bbasically using getAttribute on elements instead of the dataset notation, which is only supported on IE 11+

     function updateValue(el) {
      var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
      var value = el.value,
          //_el$dataset = el.dataset,
          //_el$dataset$previousV = _el$dataset.previousValue,
          _el$dataset$previousV = el.getAttribute('data-previous-value'),
          previousValue = (_el$dataset$previousV === undefined ? "" : _el$dataset$previousV,
          //mask = _el$dataset.mask;
          mask = el.getAttribute('data-mask');
    
    
      if (force || value && value !== previousValue && value.length > previousValue.length) {
        el.value = (0, _format2.default)(value, mask);
        (0, _utils.trigger)(el, 'input');
      }
    
      //el.dataset.previousValue = value;
      el.setAttribute('data-previous-value', value);
    }
    
    function updateMask(el, mask) {
      //el.dataset.mask = mask;
      el.setAttribute('data-mask', mask)
    } 
    
    bug 🐛 intend to implement 
    opened by jpozosrc 7
  • Editing v-text-field with phone number mask (NNN) NNN-NNNN causes cursor to move to end of field

    Editing v-text-field with phone number mask (NNN) NNN-NNNN causes cursor to move to end of field

    V-Mask and Vue versions

    2.3.0

    Reproduction Link

    https://codesandbox.io/s/m3q1m5yp9x

    Steps to reproduce

    1. Enter a phone number in the phone number field with mask '(###) ###-#### image

    2. Highlight three characters in area code part of phone number. image

    3. Change highlighted text eg. enter 123

    4. First two characters are replaced, but cursor moves to the end of the field and last character does not get entered. image

    This seems to happen when there is a special character in the mask. eg. ()-. I found that this also happenened on

    What is Expected?

    When you highlight any number of characters(numbers) and you begin typing, the numbers(characters) should be deleted and the new values should replace the old values...

    What is actually happening?

    First two characters get changed and cursor move to the end of field and last character does not get entered..

    opened by ChasBoucher 0
  • chore(deps): bump terser from 5.3.0 to 5.15.0

    chore(deps): bump terser from 5.3.0 to 5.15.0

    Bumps terser from 5.3.0 to 5.15.0.

    Changelog

    Sourced from terser's changelog.

    v5.15.0

    • Basic support for ES2022 class static initializer blocks.
    • Add AudioWorkletNode constructor options to domprops list (#1230)
    • Make identity function inliner not inline id(...expandedArgs)

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency

    v5.10.0

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 📦 
    opened by dependabot[bot] 0
  • chore(deps): update dependency testcafe to v2

    chore(deps): update dependency testcafe to v2

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | testcafe (source) | 1.20.1 -> 2.0.1 | age | adoption | passing | confidence |


    Release Notes

    DevExpress/testcafe

    v2.0.1

    Compare Source

    Bug Fixes
    • TestCafe yields incomplete video recordings in concurrency mode (#​7218).
    • Video recordings in concurrency mode yield EPIPE errors that cause crashes (#​7216).
    • Running TestCafe 1.20.1 and up with a high concurrency factor may nonetheless result in a MaxListenersExceededWarning warning (#​7188).

    v2.0.0

    Compare Source

    TypeScript update

    :warning: TestCafe 2.0 includes a breaking change. The framework’s built-in TypeScript compiler has been updated from version 3.9 to version 4.7. The vast majority of TestCafe users should not experience any issues during the upgrade. However, since TypeScript does not follow the semver versioning policy, even minor TypeScript updates contain breaking changes. Some TypeScript users may need to perform additional actions to ensure the compatibility of their test code.

    Read the TestCafe 2.0 Migration Guide to learn more.

    Improvement: New ways to ignore JavaScript errors

    TestCafe v2.0 introduces new ways to ignore JavaScript errors during test runs.

    Two new methods allow you to ignore errors on a per-test or a per-fixture basis.

    • Use the test.skipJsErrors method to ignore JavaScript errors in specific tests.
    • Use the fixture.skipJsErrors method to ignore JavaScript errors for specific fixtures.
    • The t.skipJsErrors action lets you ignore JavaScript errors at specific points in the test.

    For each of the methods above, you can define the following options:

    • The pageUrl option filters errors by page URL.
    • The message option filters errors by message.
    • The stack option filters errors by call stack.

    Read the Skip JavaScript Errors recipe to learn more.


    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): update dependency eslint-plugin-jest to v27

    chore(deps): update dependency eslint-plugin-jest to v27

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-plugin-jest | 26.9.0 -> 27.0.4 | age | adoption | passing | confidence |


    Release Notes

    jest-community/eslint-plugin-jest

    v27.0.4

    Compare Source

    Bug Fixes

    v27.0.3

    Compare Source

    Bug Fixes

    v27.0.2

    Compare Source

    Bug Fixes
    • no-restricted-matchers: improve check to not be solely based on the start of the matcher chain (#​1236) (5fe4568), closes #​1235

    v27.0.1

    Compare Source

    Bug Fixes
    • prefer-expect-assertions: report on concise arrow functions with expect call (#​1225) (64ec9c1)

    v27.0.0

    Compare Source

    Bug Fixes
    • unbound-method: don't suppress errors from base rule (#​1219) (7c1389e)
    Features
    BREAKING CHANGES
    • no-alias-methods is now recommended as the methods themselves will be removed in the next major version of Jest
    • no-jest-import: removed no-jest-import rule
    • unbound-method: errors thrown by the unbound-method base rule are no longer suppressed - really this means that if you don't specify project when this rule is enabled and @typescript-eslint/eslint-plugin is present, that error will no longer be suppressed instead of silently doing nothing; it will still not throw if this rule is enabled without the base rule being present
    • no-restricted-matchers: no-restricted-matchers now checks against the start of the expect chain, meaning you have to explicitly list each possible matcher & modifier permutations that you want to restrict
    • Support for ESLint version 6 is removed
    • Node versions 12 and 17 are no longer supported

    Configuration

    📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

    🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

    Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • chore(deps): bump moment from 2.29.3 to 2.29.4

    chore(deps): bump moment from 2.29.3 to 2.29.4

    Bumps moment from 2.29.3 to 2.29.4.

    Changelog

    Sourced from moment's changelog.

    2.29.4

    • Release Jul 6, 2022
      • #6015 [bugfix] Fix ReDoS in preprocessRFC2822 regex
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 📦 
    opened by dependabot[bot] 0
Releases(v2.3.0)
  • v2.3.0(Sep 27, 2021)

    2.3.0 (2021-09-27)

    Features

    • filter: make filter work with RegExps, functions and respect custom replacers similarly to directive (286deda), closes #499

    One of the common use cases for that is number as formatting currencies:

    <template>
      <span>{{ '1000' | VMask(currencyMask) }</span>
      <!-- prints `$1,000` -->
    </template>
    <script>
      import createNumberMask from 'text-mask-addons/dist/createNumberMask';
      const currencyMask = createNumberMask({
        prefix: '$',
        allowDecimal: true,
        includeThousandsSeparator: true,
        allowNegative: false,
      });
      export default {
        data: () => ({
          currencyMask,
          myInputModel: ''
        })
      }
    </script>
    

    Thanks to @CristianUser for the idea.

    Source code(tar.gz)
    Source code(zip)
  • v2.2.4(Jan 23, 2021)

  • v2.2.3(Jul 21, 2020)

  • v2.2.2(Jul 21, 2020)

  • v2.2.1(May 26, 2020)

  • v2.2.0(May 24, 2020)

  • v2.1.0(Mar 27, 2020)

    Features

    • Filter for static values (closes #147)
    <template>
      <span>{{ '9999999999' | VMask('(###) ###-####') }}</span>
      <!-- renders -->
      <span> (999) 999-9999</span>
    </template>
    

    Thanks, @JotaVeUltra

    Other changes

    • re-build with latest dependencies
    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Aug 3, 2019)

    Bug Fixes:

    • IE 11 support

    Other changes

    • No more polyfilling IE10 (it's a dead browser guys), if you need to support old browsers just add polyfill in your bundle
    • No more relying on dataset for storing previous value
    Source code(tar.gz)
    Source code(zip)
  • v2.0.1(Jul 20, 2019)

  • v2.0.0(Jul 19, 2019)

    Bug Fixes

    • #423
    • #282
    • #146
    • #126
    • #65
    • #53

    Features

    BREAKING CHANGES

    • format: re-written from the scratch by using text-mask-core.

    May not work as expected but it bring some future to the library. Please create an issue if you have any issues with v2.X If you satisfied with v1 - keep using it. It was almost 2x times smaller

    More improvements soon!

    Source code(tar.gz)
    Source code(zip)
  • v1.3.4(Jul 11, 2019)

  • v1.3.3(Oct 23, 2018)

  • v1.3.2(Feb 14, 2018)

    Bug Fixes

    • deps: update dependency conventional-changelog to v1.1.15 (5d51764)
    • incorrect input on mobile chrome (12205fd), closes #41 #61

    Other changes

    • update dev dependencies
    • add ISSUE_TEMPLATE.md (helps to gather more info about an issue and fix quicker)
    • add jsfiddle and codesandbox playgrounds (check docs)
    • lint and fix codebase with eslint and Airbnb styleguide
    • separate directive and plugin registration from implementation
    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Feb 5, 2018)

  • v1.3.0(Jul 13, 2017)

    It's possible to use v-mask in jsfiddle / codepen / jsbin / etc 🎉

    • v-mask can be used as directive, thanks to @shrpne (#54, #51)
    • added precompiled version / UMD build for usage in browser without any bundlers, thanks to @shrpne (#17, #55)
    • plugin uses rollup instead of raw babel thanks to @shrpne (#55)
    • added package-lock.json for better [email protected] support
    • updated deps (jest / rollup)
    Source code(tar.gz)
    Source code(zip)
  • v1.1.1(Apr 25, 2017)

  • v1.1.0(Apr 25, 2017)

  • v1.0.3(Feb 13, 2017)

    #13, #20 Fixed issue when first mask char can't be common (e.g. () (thanks @alittlebrighter for PR ) #11 Plugin should do nothing if mask is not specified (thanks @c01nd01r for PR) #10 Added basic ability to change mask dynamically (thanks, @lucassmacedo and @iCaio for issue)

    Source code(tar.gz)
    Source code(zip)
  • v1.0.2(Dec 14, 2016)

    #8 Fixed first keydown now working properly for Vue 2.X (thanks @flip-santos for PR) #7 Fixed issue when any value can be pasted in, e.g. with Ctrl+V (thanks @pinguinjkeke)

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Oct 27, 2016)

  • v1.0.0(Oct 27, 2016)

    • Vue 2.X support
    • Sources now in ES6 + Babel
    • Added demo
    • Mask format changed due to Vue 2.X (limitations):

    in version 0.X:

    <input type="text" v-mask format="####-##">
    

    in version 1.X

    <input type="text" v-mask="'####-##'">
    
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Oct 27, 2016)

Owner
Max Liashuk
JavaScript enthusiast
Max Liashuk
Tiny (2k gzipped) input/directive mask for currency

v-money Mask for Vue.js Features Lightweight (<2KB gzipped) Dependency free Mobile support Component or Directive flavors Accept copy/paste Editable F

Vue.js Tips 741 Sep 23, 2022
Tiny (2k gzipped) and dependency free mask input for Vue.js

The Mask A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js Docs and Demo JsFiddle Install yarn add vue-the-mask o

Vue.js Tips 1.6k Sep 20, 2022
Easy formatted numbers, currency and percentage with input/directive mask for Vue.js

vue-number-format Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of

CodersTM 34 Sep 24, 2022
Input mask for React, Angular, Ember, Vue, & plain JavaScript

⚠️ This library is not maintained. Pull-requests and issues are not monitored. Alternatives to text-mask include: https://github.com/uNmAnNeR/imaskjs

Text Mask 8.2k Sep 30, 2022
Simple zero-dependency input mask for Vue.js and vanilla JS.

Simple zero-dependency input mask for Vue.js and vanilla JS.

Alexander Shabunevich 451 Oct 6, 2022
vue-r-mask - Directive with template similar to javascript regular expression.

vue-r-mask mask directive for vue.js Template similar to javascript regular expression. /\d{2}/ Directive useful for your own input or textarea. Arbit

null 22 May 1, 2022
The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks.

The awesome-mask runs with Vue.js and uses the vanilla-masker to make your form awesome with masks. You can use patterns like: <input type="text" v-ma

Wirecard Brasil 164 Aug 3, 2022
Vue.js component for jQuery mask plugin

Vue jQuery Mask Component Vue.js component for jQuery Mask Plugin Demo on JSFiddle Version matrix Vue.js version Package version Branch 2.x 1.x 1.x 3.

Ankur Kumar 19 Mar 4, 2022
Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue.

Nice-Numeric-Input is a modern, rich featured and highly customisable numeric input built on Vue. Capable of formatting as the user types, including currency formatting. With no extra dependencies other than Vue itself.

Jack Steel 4 Dec 9, 2021
Vue Currency Input component allows an easy input of currency formatted numbers

Vue Currency Input The Vue Currency Input component allows an easy input of currency formatted numbers. It provides both standalone component (<curren

WeblineIndia 1 May 25, 2022
🛡 Vue directive to restrict an input by unicode values

v-unicode Vue directive to restrict an input by unicode values. It allows the input to be used just with the defined unicodes. It also sanitizes the v

Nicolas Del Valle 14 Sep 15, 2022
A Vue.js component that wraps the awesome autoNumeric input formatter library

vue-autoNumeric A Vue.js component that wraps the awesome AutoNumeric input formatter library Get in touch on vue-autoNumeric wraps the awesome AutoNu

AutoNumeric 86 Sep 27, 2022
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

Ronald Jerez 139 Sep 14, 2022
Vue.js directive to add inputmask library to your inputs (vanilla javascript).

vue-inputmask Vue.js directive to add a mask to your inputs (vanilla javascript). It's a binding for the inputmask library by Robin Herbots https://gi

Simon Cleriot 117 Jul 17, 2022
Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let me know if you encounter any issues, bugs, or improvement. Thanks!

label-edit Click to show input text box Vue Component ... inspired by Trello. This is my first time publishing Vue Component via npm package and let m

Myo Kyaw Htun 22 Apr 24, 2022
Vue Fake input is a Vue.js based component to create custom inputs for individual characters.

Vue Fake Input Vue Fake input is a Vue.js based component to create custom inputs for individual characters. Table of Contents Installation Usage Lice

Cláudio Luiz Castro 84 Jul 26, 2022
A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API.

vue-otp-input A fully customizable, OTP (one-time-password) input component built with Vue 3.x and Vue Composition API. Installation To install the la

Ejiro Asiuwhu 39 Sep 23, 2022
Set of vue directives to add text restriction to your vue input

Vue-Input-Restriction-Directives Set of useful vue directives to add text restriction to your input No keyboard key validation, just regular expressio

Benjamin Arambide 5 Nov 19, 2021
Masked input component for Vue.js

Vue Masked Input Dead simple masked input component for Vue.js 2.X. Based on inputmask-core. Live Demo Install npm npm install vue-masked-input --save

null 452 Sep 3, 2022