vue-cleave-component - npm Package Compare versions

Comparing version 2.1.1 to 2.1.2

CHANGELOG.md

 # Changelog
 
+## [2.1.2](https://github.com/ankurk91/vue-cleave-component/compare/2.1.1...2.1.2)
+* Change: 
+    - removed `type` prop, however this should work as before
+    - convert template to render function to reduce build size
+
 ## [2.1.1](https://github.com/ankurk91/vue-cleave-component/compare/2.1.0...2.1.1)
@@ -4,0 +9,0 @@ * Fix: `blur` event implementation, [#13](https://github.com/ankurk91/vue-cleave-component/issues/13)

dist/vue-cleave.js

@@ -110,9 +110,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=template&id=1a5e727c&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{attrs:{"type":_vm.type},on:{"blur":_vm.onBlur}})}
-var staticRenderFns = []
-
-
-// CONCATENATED MODULE: ./src/component.vue?vue&type=template&id=1a5e727c&
-
 // EXTERNAL MODULE: external {"commonjs":"cleave.js","commonjs2":"cleave.js","amd":"cleave.js","root":"Cleave"}
@@ -122,14 +115,18 @@ var external_commonjs_cleave_js_commonjs2_cleave_js_amd_cleave_js_root_Cleave_ = __webpack_require__(0);
 
-// CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=script&lang=js&
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+// CONCATENATED MODULE: ./src/component.js
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-//
-//
-//
-//
 
-
-
-/* harmony default export */ var componentvue_type_script_lang_js_ = ({
+/* harmony default export */ var component = ({
   name: 'cleave',
+  render: function render(el) {
+    return el('input', {
+      attrs: {
+        type: 'text'
+      },
+      on: {
+        blur: this.onBlur
+      }
+    });
+  },
   props: {
@@ -154,7 +151,2 @@ value: {
       default: true
-    },
-    // Input type, for example `tel`
-    type: {
-      type: String,
-      default: 'text'
     }
@@ -173,7 +165,5 @@ },
     if (this.cleave) return;
-
     this.cleave = new external_commonjs_cleave_js_commonjs2_cleave_js_amd_cleave_js_root_Cleave_default.a(this.$el, this.getOptions(this.options));
     this.cleave.setRawValue(this.value);
   },
-
   methods: {
@@ -188,3 +178,2 @@ /**
       this.onValueChangedFn = options.onValueChanged;
-
       return _extends({}, options, {
@@ -202,5 +191,4 @@ onValueChanged: this.onValueChanged
       var value = this.raw ? event.target.rawValue : event.target.value;
-      this.$emit('input', value);
+      this.$emit('input', value); // Call original callback method
 
-      // Call original callback method
       if (typeof this.onValueChangedFn === 'function') {
@@ -236,12 +224,12 @@ this.onValueChangedFn.call(this, event);
       /* istanbul ignore if */
-      if (!this.cleave) return;
+      if (!this.cleave) return; // when v-model is not masked (raw)
 
-      // when v-model is not masked (raw)
-      if (this.raw && newValue === this.cleave.getRawValue()) return;
-      //  when v-model is masked (NOT raw)
-      if (!this.raw && newValue === this.$el.value) return;
-      // Lastly set newValue
+      if (this.raw && newValue === this.cleave.getRawValue()) return; //  when v-model is masked (NOT raw)
+
+      if (!this.raw && newValue === this.$el.value) return; // Lastly set newValue
+
       this.cleave.setRawValue(newValue);
     }
   },
+
   /**
@@ -253,3 +241,2 @@ * Free up memory
     if (!this.cleave) return;
-
     this.cleave.destroy();
@@ -260,122 +247,5 @@ this.cleave = null;
 });
-// CONCATENATED MODULE: ./src/component.vue?vue&type=script&lang=js&
- /* harmony default export */ var src_componentvue_type_script_lang_js_ = (componentvue_type_script_lang_js_); 
-// CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
-/* globals __VUE_SSR_CONTEXT__ */
-
-// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
-// This module is a runtime utility for cleaner component module output and will
-// be included in the final webpack user bundle.
-
-function normalizeComponent (
-  scriptExports,
-  render,
-  staticRenderFns,
-  functionalTemplate,
-  injectStyles,
-  scopeId,
-  moduleIdentifier, /* server only */
-  shadowMode /* vue-cli only */
-) {
-  // Vue.extend constructor export interop
-  var options = typeof scriptExports === 'function'
-    ? scriptExports.options
-    : scriptExports
-
-  // render functions
-  if (render) {
-    options.render = render
-    options.staticRenderFns = staticRenderFns
-    options._compiled = true
-  }
-
-  // functional template
-  if (functionalTemplate) {
-    options.functional = true
-  }
-
-  // scopedId
-  if (scopeId) {
-    options._scopeId = 'data-v-' + scopeId
-  }
-
-  var hook
-  if (moduleIdentifier) { // server build
-    hook = function (context) {
-      // 2.3 injection
-      context =
-        context || // cached call
-        (this.$vnode && this.$vnode.ssrContext) || // stateful
-        (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
-      // 2.2 with runInNewContext: true
-      if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
-        context = __VUE_SSR_CONTEXT__
-      }
-      // inject component styles
-      if (injectStyles) {
-        injectStyles.call(this, context)
-      }
-      // register component module identifier for async chunk inferrence
-      if (context && context._registeredComponents) {
-        context._registeredComponents.add(moduleIdentifier)
-      }
-    }
-    // used by ssr in case component is cached and beforeCreate
-    // never gets called
-    options._ssrRegister = hook
-  } else if (injectStyles) {
-    hook = shadowMode
-      ? function () { injectStyles.call(this, this.$root.$options.shadowRoot) }
-      : injectStyles
-  }
-
-  if (hook) {
-    if (options.functional) {
-      // for template-only hot-reload because in that case the render fn doesn't
-      // go through the normalizer
-      options._injectStyles = hook
-      // register for functioal component in vue file
-      var originalRender = options.render
-      options.render = function renderWithStyleInjection (h, context) {
-        hook.call(context)
-        return originalRender(h, context)
-      }
-    } else {
-      // inject component registration as beforeCreate hook
-      var existing = options.beforeCreate
-      options.beforeCreate = existing
-        ? [].concat(existing, hook)
-        : [hook]
-    }
-  }
-
-  return {
-    exports: scriptExports,
-    options: options
-  }
-}
-
-// CONCATENATED MODULE: ./src/component.vue
-
-
-
-
-
-/* normalize component */
-
-var component = normalizeComponent(
-  src_componentvue_type_script_lang_js_,
-  render,
-  staticRenderFns,
-  false,
-  null,
-  null,
-  null
-  
-)
-
-/* harmony default export */ var src_component = (component.exports);
 // CONCATENATED MODULE: ./src/index.js
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "plugin", function() { return src_plugin; });
-/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "component", function() { return src_component; });
+/* concated harmony reexport component */__webpack_require__.d(__webpack_exports__, "component", function() { return component; });
 
@@ -386,14 +256,13 @@
   /* istanbul ignore else */
+
   if (typeof params === 'string') name = params;
-
-  Vue.component(name, src_component);
+  Vue.component(name, component);
 };
 
-src_component.install = src_plugin;
+component.install = src_plugin;
+/* harmony default export */ var src = __webpack_exports__["default"] = (component);
 
-/* harmony default export */ var src = __webpack_exports__["default"] = (src_component);
 
-
 /***/ })
 /******/ ])["default"];
 });

dist/vue-cleave.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("cleave.js")):"function"==typeof define&&define.amd?define("VueCleave",["cleave.js"],t):"object"==typeof exports?exports.VueCleave=t(require("cleave.js")):e.VueCleave=t(e.Cleave)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r),a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},u=function(e,t,n,r,o,a,u,i){var l,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),l)if(s.functional){s._injectStyles=l;var c=s.render;s.render=function(e,t){return l.call(t),c(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,l):[l]}return{exports:e,options:s}}({name:"cleave",props:{value:{default:null,required:!0,validator:function(e){return null===e||"string"==typeof e||e instanceof String||"number"==typeof e}},options:{type:Object,default:function(){return{}}},raw:{type:Boolean,default:!0},type:{type:String,default:"text"}},data:function(){return{cleave:null,onValueChangedFn:null}},mounted:function(){this.cleave||(this.cleave=new o.a(this.$el,this.getOptions(this.options)),this.cleave.setRawValue(this.value))},methods:{getOptions:function(e){return this.onValueChangedFn=e.onValueChanged,a({},e,{onValueChanged:this.onValueChanged})},onValueChanged:function(e){var t=this.raw?e.target.rawValue:e.target.value;this.$emit("input",t),"function"==typeof this.onValueChangedFn&&this.onValueChangedFn.call(this,e)},onBlur:function(e){this.$emit("blur",this.value)}},watch:{options:{deep:!0,handler:function(e){this.cleave.destroy(),this.cleave=new o.a(this.$el,this.getOptions(e)),this.cleave.setRawValue(this.value)}},value:function(e){this.cleave&&(this.raw&&e===this.cleave.getRawValue()||(this.raw||e!==this.$el.value)&&this.cleave.setRawValue(e))}},beforeDestroy:function(){this.cleave&&(this.cleave.destroy(),this.cleave=null,this.onValueChangedFn=null)}},function(){var e=this.$createElement;return(this._self._c||e)("input",{attrs:{type:this.type},on:{blur:this.onBlur}})}).exports;n.d(t,"plugin",function(){return i}),n.d(t,"component",function(){return u});var i=function(e,t){var n="cleave";"string"==typeof t&&(n=t),e.component(n,u)};u.install=i,t.default=u}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("cleave.js")):"function"==typeof define&&define.amd?define("VueCleave",["cleave.js"],t):"object"==typeof exports?exports.VueCleave=t(require("cleave.js")):e.VueCleave=t(e.Cleave)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var r=n(0),o=n.n(r);function u(){return(u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}var a={name:"cleave",render:function(e){return e("input",{attrs:{type:"text"},on:{blur:this.onBlur}})},props:{value:{default:null,required:!0,validator:function(e){return null===e||"string"==typeof e||e instanceof String||"number"==typeof e}},options:{type:Object,default:function(){return{}}},raw:{type:Boolean,default:!0}},data:function(){return{cleave:null,onValueChangedFn:null}},mounted:function(){this.cleave||(this.cleave=new o.a(this.$el,this.getOptions(this.options)),this.cleave.setRawValue(this.value))},methods:{getOptions:function(e){return this.onValueChangedFn=e.onValueChanged,u({},e,{onValueChanged:this.onValueChanged})},onValueChanged:function(e){var t=this.raw?e.target.rawValue:e.target.value;this.$emit("input",t),"function"==typeof this.onValueChangedFn&&this.onValueChangedFn.call(this,e)},onBlur:function(e){this.$emit("blur",this.value)}},watch:{options:{deep:!0,handler:function(e){this.cleave.destroy(),this.cleave=new o.a(this.$el,this.getOptions(e)),this.cleave.setRawValue(this.value)}},value:function(e){this.cleave&&(this.raw&&e===this.cleave.getRawValue()||(this.raw||e!==this.$el.value)&&this.cleave.setRawValue(e))}},beforeDestroy:function(){this.cleave&&(this.cleave.destroy(),this.cleave=null,this.onValueChangedFn=null)}};n.d(t,"plugin",function(){return i}),n.d(t,"component",function(){return a});var i=function(e,t){var n="cleave";"string"==typeof t&&(n=t),e.component(n,a)};a.install=i;t.default=a}]).default});

package.json

 {
   "name": "vue-cleave-component",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Vue.js component for cleave.js",
@@ -32,7 +32,7 @@ "main": "dist/vue-cleave.js",
     "test": "jest",
-    "test:watch": "npm run test -- --watch --onlyChanged --notify",
-    "start": "npm run dev",
-    "dev": "cross-env NODE_ENV=development webpack-serve --config=webpack.config.dev.js",
+    "test:watch": "yarn run test -- --watch --onlyChanged --notify",
+    "start": "yarn run dev",
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --hot --config=webpack.config.dev.js",
     "build": "cross-env NODE_ENV=production webpack --mode production",
-    "prepublishOnly": "npm run test && npm run build"
+    "prepublishOnly": "yarn run test && yarn run build"
   },
@@ -43,26 +43,25 @@ "dependencies": {
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.21",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-transform-object-assign": "^6.22.0",
-    "babel-preset-env": "^1.7.0",
+    "@babel/core": "^7.1.6",
+    "@babel/plugin-transform-object-assign": "^7.0.0",
+    "@babel/preset-env": "^7.1.6",
+    "@vue/test-utils": "^1.0.0-beta.26",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^23.6.0",
+    "babel-loader": "^8.0.4",
     "bootstrap": "^4.1.3",
-    "clean-webpack-plugin": "^0.1.18",
+    "clean-webpack-plugin": "^1.0.0",
     "cross-env": "^5.2.0",
-    "css-loader": "^1.0.0",
-    "file-loader": "^1.1.6",
+    "css-loader": "^1.0.1",
+    "file-loader": "^2.0.0",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.4.1",
-    "jquery": "^3.3.1",
-    "popper.js": "^1.12.9",
-    "style-loader": "^0.21.0",
+    "jest": "^23.6.0",
+    "style-loader": "^0.23.1",
     "unminified-webpack-plugin": "^2.0.0",
-    "vee-validate": "^2.1.0-beta.6",
+    "vee-validate": "^2.1.3",
     "vue": "^2.5.13",
-    "vue-jest": "^2.6.0",
     "vue-loader": "^15.2.6",
     "vue-template-compiler": "^2.5.13",
-    "webpack": "^4.16.2",
-    "webpack-command": "^0.4.1",
-    "webpack-serve": "^2.0.2"
+    "webpack": "^4.26.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
@@ -85,7 +84,7 @@ "peerDependencies": {
     "transform": {
-      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
-      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+      "^.+\\.js$": "babel-jest"
     },
-    "collectCoverage": true
+    "collectCoverage": true,
+    "testURL": "http://localhost"
   }
 }

README.md

@@ -11,3 +11,3 @@ # Vue Cleave Component
 
-Vue.js v2.x component for [Cleave.js](http://nosir.github.io/cleave.js/) 
+Vue.js component for [Cleave.js](http://nosir.github.io/cleave.js/) 
 
@@ -19,3 +19,3 @@ ## Demo on [JSFiddle](https://jsfiddle.net/ankurk91/aza302c7/)
     - You can change input value programmatically 
-* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md) 
+* Reactive [options](https://github.com/nosir/cleave.js/blob/master/doc/options.md), read [caveats](#caveats) below
     - You can change config options dynamically
@@ -25,2 +25,3 @@ - Component will watch for any changes and redraw itself
 * Compatible with [Bootstrap](http://getbootstrap.com/), [Bulma](http://bulma.io/) or any other CSS framework
+* Works with validation libraries
 * Option to disable `raw` mode to get masked value 
@@ -81,3 +82,2 @@
 | raw              | Boolean                | `true`      | When set to `false`; emits formatted value with format pattern and delimiter |
-| type             | String                 | `text`      | Set input type; for eg: `tel` |
 
@@ -130,3 +130,11 @@ ## Install in non-module environments (without webpack)
 
+## Caveats
+* :warning: Don't pass config option as inline literal object to `:options` prop.
+```html
+<!-- This will cause an infinite loop -->
+<cleave v-model="card" :options="{creditCard:true}"></cleave>
+```
+* Vue.js can not detect changes when literal object/arrays passed within template, [see](https://github.com/vuejs/vue/issues/4060)
+
 ## License
 [MIT](LICENSE.txt) License

src/index.js

@@ -1,2 +0,2 @@
-import component from './component.vue';
+import component from './component.js';
 
@@ -3,0 +3,0 @@ const plugin = (Vue, params) => {

No alert changes

Improved metrics

Dev dependency count

23

decreased by-4.17%

Lines of code

365

increased by3.11%

Number of lines in readme file

136

increased by6.25%

Worsened metrics

Total package byte prevSize

24435

decreased by-13.68%

No dependency changes