awesome-mask - npm Package Compare versions

Comparing version 0.3.9 to 0.4.1

index.js

@@ -15,25 +15,6 @@ 'use strict';
 
-var _isCharacterKeypress = require('./is-character-keypress');
+var _eventListener = require('./event-listener');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var allowedKeys = [9, // 'tab'
-37, // 'left'
-38, // 'up'
-39, // 'right'
-40];
-
-var inputHandler = function inputHandler(ev) {
-  var mask = ev.target.dataset.mask;
-  var isCharacter = (0, _isCharacterKeypress.isCharacterKeyPress)(ev);
-  var isAllowedKey = allowedKeys.indexOf(ev.keyCode) > -1;
-  if (isAllowedKey) return;
-  if (isCharacter && ev.target.value.length >= mask.length) {
-    ev.preventDefault();
-  }
-  setTimeout(function () {
-    ev.target.value = mask && mask.length > 0 ? _vanillaMasker2.default.toPattern(ev.target.value, mask) : ev.target.value;
-  }, 0);
-};
-
 var applyMaskToDefault = function applyMaskToDefault(el, mask) {
@@ -54,3 +35,3 @@ var isInputText = el instanceof HTMLInputElement;
     el.setAttribute('maxlength', el.dataset.mask.length);
-    el.addEventListener('keyup', inputHandler);
+    el.addEventListener('keyup', _eventListener.inputHandler);
   },
@@ -60,2 +41,4 @@ update: function update(el, binding) {
     if (binding.value.length < 1) return;
+    el.dataset.mask = binding.value;
+    el.setAttribute('maxlength', el.dataset.mask.length);
     applyMaskToDefault(el, binding.value);
@@ -66,4 +49,4 @@ },
     el.removeAttribute('maxlength');
-    el.removeEventListener('keyup', inputHandler);
+    el.removeEventListener('keyup', _eventListener.inputHandler);
   }
 };

package.json

 {
   "name": "awesome-mask",
-  "version": "0.3.9",
+  "version": "0.4.1",
   "description": "An awesome mask directive for Vue.js using vanilla-masker from `https://github.com/BankFacil/vanilla-masker`",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
     "build": "babel src --presets babel-preset-es2015 --out-dir . "
@@ -29,16 +29,21 @@ },
     "index.js",
-    "is-character-keypress.js"
+    "is-character-keypress.js",
+    "event-listener.js"
   ],
   "devDependencies": {
     "autoprefixer": "^6.7.2",
+    "babel-cli": "^6.18.0",
     "babel-core": "^6.22.1",
-    "babel-loader": "^6.2.10",
-    "babel-cli": "^6.18.0",
+    "babel-loader": "^6.3.2",
+    "babel-plugin-istanbul": "^3.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-es2015": "^6.22.0",
     "babel-preset-latest": "^6.22.0",
     "babel-preset-stage-2": "^6.22.0",
     "babel-register": "^6.22.0",
+    "chai": "^3.5.0",
     "chalk": "^1.1.3",
     "connect-history-api-fallback": "^1.3.0",
     "copy-webpack-plugin": "^4.0.1",
+    "cross-env": "^3.1.4",
     "css-loader": "^0.26.1",
@@ -53,4 +58,3 @@ "eventsource-polyfill": "^0.9.6",
     "http-proxy-middleware": "^0.17.3",
-    "webpack-bundle-analyzer": "^2.2.1",
-    "cross-env": "^3.1.4",
+    "inject-loader": "^2.0.1",
     "karma": "^1.4.1",
@@ -66,13 +70,10 @@ "karma-coverage": "^1.1.1",
     "mocha": "^3.2.0",
-    "chai": "^3.5.0",
-    "sinon": "^1.17.7",
-    "sinon-chai": "^2.8.0",
-    "inject-loader": "^2.0.1",
-    "babel-plugin-istanbul": "^3.1.2",
-    "phantomjs-prebuilt": "^2.1.14",
-    "semver": "^5.3.0",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.1.0",
+    "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.7",
@@ -83,2 +84,3 @@ "vue-loader": "^11.0.0",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",
@@ -85,0 +87,0 @@ "webpack-hot-middleware": "^2.16.1",

README.md

@@ -1,27 +0,62 @@
-# mask
+The awesome-mask runs with `Vue.js` and uses the `vanilla-masker` to make your form awesome with masks.
 
-> A Vue.js project
+[Examples](https://moip.github.io/awesome-examples/)
 
-## Build Setup
+You can use patterns like:
 
-``` bash
-# install dependencies
-npm install
+```vue
+<input type="text" v-mask="'99/99'" />
+// Turns 1224 in 12/24
+```
 
-# serve with hot reload at localhost:8080
-npm run dev
+```vue
+<input type="text" v-mask="'(99) 9999-9999'" />
+// Turns 1149949944 in (11) 4994-9944
+```
 
-# build for production with minification
-npm run build
 
-# build for production and view the bundle analyzer report
-npm run build --report
 
-# run unit tests
-npm run unit
+```vue
+<input type="text" v-mask="'AAA-9999'" />
+// Turns ABC1234 in ABC-1234
+```
 
-# run all tests
-npm test
+
+This directive can also receive a object from your `data` like:
+
+```vue
+<template>
+  <p>
+    <input v-mask="mask" type="text">
+  </p>
+</template>
+
+<script>
+ export default {
+   data() {
+     return {
+       mask: '999.999.999-99'
+     }
+   }
+ }
+</script>
 ```
 
-For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
+Sample using import:
+
+```vue
+<script>
+import Component from './components/Component'
+import AwesomeMask from 'awesome-mask'
+
+export default {
+  name: 'app',
+  components: {
+    Component
+  },
+  directives: {
+    'mask': AwesomeMask
+  }
+}
+</script>
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6493

increased by20.37%

Number of package files

5

increased by25%

Lines of code

74

increased by15.63%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

63

increased by125%

Worsened metrics

Dev dependency count

52

increased by1.96%

No dependency changes