1.2.0 • Published 3 years ago
@vue-bag/directives v1.2.0
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);
});
1.2.0
3 years ago
1.1.91
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
4 years ago
1.1.4
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.1
4 years ago
1.1.0
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago