Installation

npm install --save @vue-bag/directives
or
yarn add @vue-bag/directives

Sandbox demo

Directives

• maskDirective - formats input data for a given mask
• typeDirective - restricts input by data type (any regex)
• maxLengthDirective - limits input data by length

import {
  maskDirective,
  typeDirective,
  maxLengthDirective
} from "@vue-bag/directives";

Vue.directive("mask", function(el, binding) {
  maskDirective(el, binding);
});
<input v-mask="'##.##'">

Vue.directive("type", function(el, binding) {
  typeDirective(el, binding);
});
<input v-type="'float'">

Vue.directive("max-length", function(el, binding) {
  maxLengthDirective(el, binding);
});
<input v-max-length="3">

      

Default tokens of maskDirective

'#': {pattern: /\d/},
X: {pattern: /[0-9a-zA-Z]/}
S: {pattern: /[a-zA-Z]/}
A: {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()}
a: {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()}
'!': {escape: true}

Default types of typeDirective

'float': /^\d*\.?\d*/
'number': /\d*/
'word': /[A-zА-я]*\s?/g
'ruWord': /[А-я]\s*/g
'enWord': /[А-я]\s*/g

Customize directives

import {
  maskDirective,
  typeDirective,
} from "@vue-bag/directives";

const customTypes = {
  'float': /^\d*\.?\d*/,
  'number': /\d*/,
  'any': /.*/,
  'lowCase': /[а-я]/g
};
const customTokens = {
  Q: {pattern: /./},
  A: {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
};

Vue.directive("type", function(el, binding) {
  typeDirective(el, binding, customTypes);
});
Vue.directive("mask", function(el, binding) {
  maskDirective(el, binding, customTokens);
});