vue-input-facade - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0-beta.1

dist/vue-input-facade.common.js

@@ -652,3 +652,3 @@ module.exports =
 function FacadeValue(val = '') {
-  this.masked = this.raw = val;
+  this.masked = this.unmasked = val;
 }
@@ -693,5 +693,5 @@ /**
   const inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input');
+  /* istanbul ignore next */
 
   if (!inputElement) {
-    /* istanbul ignore next */
     throw new Error('facade directive requires an input element');
@@ -723,7 +723,13 @@ }
   const originalPosition = target.selectionEnd;
+  const {
+    oldValue
+  } = target[CONFIG_KEY];
   updateValue(target, {
     emit: false
-  });
+  }, event);
   updateCursor(event, originalValue, originalPosition);
-  target.dispatchEvent(FacadeInputEvent());
+
+  if (oldValue !== target.value) {
+    target.dispatchEvent(FacadeInputEvent());
+  }
 }
@@ -783,5 +789,6 @@ /**
  * @param {HTMLInputElement} el The input element to update
- * @param {object} options
+ * @param {object} [options]
  * @param {Boolean} options.emit Wether to dispatch a new InputEvent or not
  * @param {Boolean} options.force Forces the update even if the old value and the new value are the same
+ * @param {Event} [event] The event that triggered this this update, null if not triggered by an input event
  */
@@ -792,3 +799,3 @@
   force = false
-} = {}) {
+} = {}, event) {
   const {
@@ -800,6 +807,18 @@ config,
   if (force || oldValue !== el.value) {
-    const newValue = masker(el.value, config);
+    let newValue = masker(el.value, config);
+
+    if (event && typeof config.pipe === 'function') {
+      const pipeValue = config.pipe(newValue, event);
+
+      if (typeof pipeValue === 'string') {
+        newValue = masker(pipeValue, config);
+      } else if (pipeValue === false) {
+        el.value = oldValue;
+        return;
+      }
+    }
+
     el[CONFIG_KEY].oldValue = newValue.masked;
     el.value = newValue.masked;
-    el.unmaskedValue = newValue.raw;
+    el.unmaskedValue = newValue.unmasked;
     emit && el.dispatchEvent(FacadeInputEvent());
@@ -900,3 +919,3 @@ }
         char = masker.transform ? masker.transform(char) : char;
-        output.raw += char;
+        output.unmasked += char;
         output.masked += accumulator + char;
@@ -915,7 +934,7 @@ accumulator = '';
     }
-  } // if there is no raw value, set masked to empty to avoid
+  } // if there is no unmasked value, set masked to empty to avoid
   // showing masking characters in an otherwise empty input
 
 
-  if (output.raw && !short) {
+  if (output.unmasked && !short) {
     output.masked += accumulator;
@@ -978,8 +997,8 @@ }
 });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9eb248da-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=template&id=29578026&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{directives:[{name:"facade",rawName:"v-facade",value:(_vm.config),expression:"config"}],attrs:{"type":"text"},domProps:{"value":_vm.maskedValue},on:{"input":_vm.input,"blur":function($event){return _vm.$emit('blur')},"focus":function($event){return _vm.$emit('focus')}}})}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9eb248da-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=template&id=28e80b95&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{directives:[{name:"facade",rawName:"v-facade",value:(_vm.config),expression:"config"}],attrs:{"type":"text"},domProps:{"value":_vm.maskedValue},on:{"input":_vm.onInput,"change":_vm.onChange,"blur":function($event){return _vm.$emit('blur')},"focus":function($event){return _vm.$emit('focus')}}})}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/component.vue?vue&type=template&id=29578026&
+// CONCATENATED MODULE: ./src/component.vue?vue&type=template&id=28e80b95&
 
@@ -998,2 +1017,3 @@ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=script&lang=js&
 //
+//
 
@@ -1013,8 +1033,19 @@ /**
     /**
-     * The mask pattern for this input
+     * Vue's v-model .lazy modifier does not currently work with custom components. If you wish to have your v-model
+     * updated only during the change event instead of on input, enable this property. <b>Note: This works by supressing
+     * input events and only emitting a single input event at the same time as the change event.</b>
+     * @since v1.2
      */
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The mask pattern for this input, it could be a single pattern or multiple patterns when its an array.
+     */
     mask: [String, Array],
 
     /**
-     * Weather to emit the value masked or unmasked
+     * Whether to emit the value masked or unmasked
      */
@@ -1027,2 +1058,14 @@ masked: {
     /**
+     * A function to pipe the value through before commiting the value to the input element. The function
+     * will receipt an object with the masked and unmasked value after passing through the masker function.
+     * The result of this pipe function will determine what happens with the value.
+     * <br />
+     * If a string is returned, then that string will pass through the masker function once more and its value
+     * will be set to the input.  If false (boolean) is returned, the input will be rejected and the
+     * previous value will be restored.  Otherwise the facade logic will continue as usual.
+     * @since v1.2
+     */
+    pipe: Function,
+
+    /**
      * Token object to override the defaults with
@@ -1044,3 +1087,2 @@ */
     return {
-      emittedValue: this.value,
       maskedValue: this.value,
@@ -1069,3 +1111,3 @@ unmaskedValue: null
     masked() {
-      this.refresh();
+      this.emitInput();
     }
@@ -1078,4 +1120,9 @@
         mask: this.mask,
-        tokens: this.tokens
+        tokens: this.tokens,
+        pipe: this.pipe
       };
+    },
+
+    emittedValue() {
+      return this.mask && this.masked ? this.maskedValue : this.unmaskedValue;
     }
@@ -1085,3 +1132,3 @@
   methods: {
-    input({
+    onInput({
       target
@@ -1091,17 +1138,26 @@ }) {
       this.unmaskedValue = target.unmaskedValue;
-      this.refresh();
+
+      if (!this.lazy) {
+        this.emitInput();
+      }
     },
 
-    refresh() {
-      let newEmittedValue = this.mask && this.masked ? this.maskedValue : this.unmaskedValue; // avoid unecessary emit when has no change
+    onChange() {
+      /**
+       * Fires when the value has been commited on the input. Usually on blur.
+       * @param {String} value The input's current value, masked or unmasked.
+       */
+      this.$emit('change', this.emittedValue);
 
-      if (this.emittedValue !== newEmittedValue) {
-        this.emittedValue = newEmittedValue;
-        /**
-         * Input event when the value changes
-         * @param {value}
-         */
+      if (this.lazy) {
+        this.emitInput();
+      }
+    },
 
-        this.$emit('input', newEmittedValue);
-      }
+    emitInput() {
+      /**
+       * Fires when the value of the input has been changed.
+       * @param {String} value The input's current value, masked or unmasked.
+       */
+      this.$emit('input', this.emittedValue);
     }
@@ -1108,0 +1164,0 @@

dist/vue-input-facade.umd.js

@@ -661,3 +661,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 function FacadeValue(val = '') {
-  this.masked = this.raw = val;
+  this.masked = this.unmasked = val;
 }
@@ -702,5 +702,5 @@ /**
   const inputElement = el instanceof HTMLInputElement ? el : el.querySelector('input');
+  /* istanbul ignore next */
 
   if (!inputElement) {
-    /* istanbul ignore next */
     throw new Error('facade directive requires an input element');
@@ -732,7 +732,13 @@ }
   const originalPosition = target.selectionEnd;
+  const {
+    oldValue
+  } = target[CONFIG_KEY];
   updateValue(target, {
     emit: false
-  });
+  }, event);
   updateCursor(event, originalValue, originalPosition);
-  target.dispatchEvent(FacadeInputEvent());
+
+  if (oldValue !== target.value) {
+    target.dispatchEvent(FacadeInputEvent());
+  }
 }
@@ -792,5 +798,6 @@ /**
  * @param {HTMLInputElement} el The input element to update
- * @param {object} options
+ * @param {object} [options]
  * @param {Boolean} options.emit Wether to dispatch a new InputEvent or not
  * @param {Boolean} options.force Forces the update even if the old value and the new value are the same
+ * @param {Event} [event] The event that triggered this this update, null if not triggered by an input event
  */
@@ -801,3 +808,3 @@
   force = false
-} = {}) {
+} = {}, event) {
   const {
@@ -809,6 +816,18 @@ config,
   if (force || oldValue !== el.value) {
-    const newValue = masker(el.value, config);
+    let newValue = masker(el.value, config);
+
+    if (event && typeof config.pipe === 'function') {
+      const pipeValue = config.pipe(newValue, event);
+
+      if (typeof pipeValue === 'string') {
+        newValue = masker(pipeValue, config);
+      } else if (pipeValue === false) {
+        el.value = oldValue;
+        return;
+      }
+    }
+
     el[CONFIG_KEY].oldValue = newValue.masked;
     el.value = newValue.masked;
-    el.unmaskedValue = newValue.raw;
+    el.unmaskedValue = newValue.unmasked;
     emit && el.dispatchEvent(FacadeInputEvent());
@@ -909,3 +928,3 @@ }
         char = masker.transform ? masker.transform(char) : char;
-        output.raw += char;
+        output.unmasked += char;
         output.masked += accumulator + char;
@@ -924,7 +943,7 @@ accumulator = '';
     }
-  } // if there is no raw value, set masked to empty to avoid
+  } // if there is no unmasked value, set masked to empty to avoid
   // showing masking characters in an otherwise empty input
 
 
-  if (output.raw && !short) {
+  if (output.unmasked && !short) {
     output.masked += accumulator;
@@ -987,8 +1006,8 @@ }
 });
-// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9eb248da-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=template&id=29578026&
-var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{directives:[{name:"facade",rawName:"v-facade",value:(_vm.config),expression:"config"}],attrs:{"type":"text"},domProps:{"value":_vm.maskedValue},on:{"input":_vm.input,"blur":function($event){return _vm.$emit('blur')},"focus":function($event){return _vm.$emit('focus')}}})}
+// CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9eb248da-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=template&id=28e80b95&
+var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('input',{directives:[{name:"facade",rawName:"v-facade",value:(_vm.config),expression:"config"}],attrs:{"type":"text"},domProps:{"value":_vm.maskedValue},on:{"input":_vm.onInput,"change":_vm.onChange,"blur":function($event){return _vm.$emit('blur')},"focus":function($event){return _vm.$emit('focus')}}})}
 var staticRenderFns = []
 
 
-// CONCATENATED MODULE: ./src/component.vue?vue&type=template&id=29578026&
+// CONCATENATED MODULE: ./src/component.vue?vue&type=template&id=28e80b95&
 
@@ -1007,2 +1026,3 @@ // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/component.vue?vue&type=script&lang=js&
 //
+//
 
@@ -1022,8 +1042,19 @@ /**
     /**
-     * The mask pattern for this input
+     * Vue's v-model .lazy modifier does not currently work with custom components. If you wish to have your v-model
+     * updated only during the change event instead of on input, enable this property. <b>Note: This works by supressing
+     * input events and only emitting a single input event at the same time as the change event.</b>
+     * @since v1.2
      */
+    lazy: {
+      type: Boolean,
+      default: false
+    },
+
+    /**
+     * The mask pattern for this input, it could be a single pattern or multiple patterns when its an array.
+     */
     mask: [String, Array],
 
     /**
-     * Weather to emit the value masked or unmasked
+     * Whether to emit the value masked or unmasked
      */
@@ -1036,2 +1067,14 @@ masked: {
     /**
+     * A function to pipe the value through before commiting the value to the input element. The function
+     * will receipt an object with the masked and unmasked value after passing through the masker function.
+     * The result of this pipe function will determine what happens with the value.
+     * <br />
+     * If a string is returned, then that string will pass through the masker function once more and its value
+     * will be set to the input.  If false (boolean) is returned, the input will be rejected and the
+     * previous value will be restored.  Otherwise the facade logic will continue as usual.
+     * @since v1.2
+     */
+    pipe: Function,
+
+    /**
      * Token object to override the defaults with
@@ -1053,3 +1096,2 @@ */
     return {
-      emittedValue: this.value,
       maskedValue: this.value,
@@ -1078,3 +1120,3 @@ unmaskedValue: null
     masked() {
-      this.refresh();
+      this.emitInput();
     }
@@ -1087,4 +1129,9 @@
         mask: this.mask,
-        tokens: this.tokens
+        tokens: this.tokens,
+        pipe: this.pipe
       };
+    },
+
+    emittedValue() {
+      return this.mask && this.masked ? this.maskedValue : this.unmaskedValue;
     }
@@ -1094,3 +1141,3 @@
   methods: {
-    input({
+    onInput({
       target
@@ -1100,17 +1147,26 @@ }) {
       this.unmaskedValue = target.unmaskedValue;
-      this.refresh();
+
+      if (!this.lazy) {
+        this.emitInput();
+      }
     },
 
-    refresh() {
-      let newEmittedValue = this.mask && this.masked ? this.maskedValue : this.unmaskedValue; // avoid unecessary emit when has no change
+    onChange() {
+      /**
+       * Fires when the value has been commited on the input. Usually on blur.
+       * @param {String} value The input's current value, masked or unmasked.
+       */
+      this.$emit('change', this.emittedValue);
 
-      if (this.emittedValue !== newEmittedValue) {
-        this.emittedValue = newEmittedValue;
-        /**
-         * Input event when the value changes
-         * @param {value}
-         */
+      if (this.lazy) {
+        this.emitInput();
+      }
+    },
 
-        this.$emit('input', newEmittedValue);
-      }
+    emitInput() {
+      /**
+       * Fires when the value of the input has been changed.
+       * @param {String} value The input's current value, masked or unmasked.
+       */
+      this.$emit('input', this.emittedValue);
     }
@@ -1117,0 +1173,0 @@

dist/vue-input-facade.umd.min.js

@@ -1,1 +0,1 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-input-facade"]=t():e["vue-input-facade"]=t()})("undefined"!==typeof self?self:this,(function(){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="fb15")}({"0cfb":function(e,t,n){var r=n("83ab"),o=n("d039"),i=n("cc12");e.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},"25f0":function(e,t,n){"use strict";var r=n("6eeb"),o=n("825a"),i=n("d039"),a=n("ad6d"),u="toString",c=RegExp.prototype,s=c[u],f=i((function(){return"/a/b"!=s.call({source:"a",flags:"b"})})),l=s.name!=u;(f||l)&&r(RegExp.prototype,u,(function(){var e=o(this),t=String(e.source),n=e.flags,r=String(void 0===n&&e instanceof RegExp&&!("flags"in c)?a.call(e):n);return"/"+t+"/"+r}),{unsafe:!0})},5135:function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},5692:function(e,t,n){var r=n("c430"),o=n("c6cd");(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.4.2",mode:r?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"5c6c":function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},"69f3":function(e,t,n){var r,o,i,a=n("7f9a"),u=n("da84"),c=n("861d"),s=n("9112"),f=n("5135"),l=n("f772"),d=n("d012"),p=u.WeakMap,m=function(e){return i(e)?o(e):r(e,{})},v=function(e){return function(t){var n;if(!c(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}};if(a){var h=new p,g=h.get,b=h.has,y=h.set;r=function(e,t){return y.call(h,e,t),t},o=function(e){return g.call(h,e)||{}},i=function(e){return b.call(h,e)}}else{var k=l("state");d[k]=!0,r=function(e,t){return s(e,k,t),t},o=function(e){return f(e,k)?e[k]:{}},i=function(e){return f(e,k)}}e.exports={set:r,get:o,has:i,enforce:m,getterFor:v}},"6eeb":function(e,t,n){var r=n("da84"),o=n("5692"),i=n("9112"),a=n("5135"),u=n("ce4e"),c=n("9e81"),s=n("69f3"),f=s.get,l=s.enforce,d=String(c).split("toString");o("inspectSource",(function(e){return c.call(e)})),(e.exports=function(e,t,n,o){var c=!!o&&!!o.unsafe,s=!!o&&!!o.enumerable,f=!!o&&!!o.noTargetGet;"function"==typeof n&&("string"!=typeof t||a(n,"name")||i(n,"name",t),l(n).source=d.join("string"==typeof t?t:"")),e!==r?(c?!f&&e[t]&&(s=!0):delete e[t],s?e[t]=n:i(e,t,n)):s?e[t]=n:u(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&f(this).source||c.call(this)}))},"7f9a":function(e,t,n){var r=n("da84"),o=n("9e81"),i=r.WeakMap;e.exports="function"===typeof i&&/native code/.test(o.call(i))},"825a":function(e,t,n){var r=n("861d");e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},"83ab":function(e,t,n){var r=n("d039");e.exports=!r((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},"861d":function(e,t){e.exports=function(e){return"object"===typeof e?null!==e:"function"===typeof e}},"90e3":function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++n+r).toString(36)}},9112:function(e,t,n){var r=n("83ab"),o=n("9bf2"),i=n("5c6c");e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},"9bf2":function(e,t,n){var r=n("83ab"),o=n("0cfb"),i=n("825a"),a=n("c04e"),u=Object.defineProperty;t.f=r?u:function(e,t,n){if(i(e),t=a(t,!0),i(n),o)try{return u(e,t,n)}catch(r){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},"9e81":function(e,t,n){var r=n("5692");e.exports=r("native-function-to-string",Function.toString)},ad6d:function(e,t,n){"use strict";var r=n("825a");e.exports=function(){var e=r(this),t="";return e.global&&(t+="g"),e.ignoreCase&&(t+="i"),e.multiline&&(t+="m"),e.dotAll&&(t+="s"),e.unicode&&(t+="u"),e.sticky&&(t+="y"),t}},c04e:function(e,t,n){var r=n("861d");e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},c430:function(e,t){e.exports=!1},c6cd:function(e,t,n){var r=n("da84"),o=n("ce4e"),i="__core-js_shared__",a=r[i]||o(i,{});e.exports=a},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},cc12:function(e,t,n){var r=n("da84"),o=n("861d"),i=r.document,a=o(i)&&o(i.createElement);e.exports=function(e){return a?i.createElement(e):{}}},ce4e:function(e,t,n){var r=n("da84"),o=n("9112");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},d012:function(e,t){e.exports={}},d039:function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},da84:function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n("c8ba"))},f772:function(e,t,n){var r=n("5692"),o=n("90e3"),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},fb15:function(e,t,n){"use strict";var r;(n.r(t),"undefined"!==typeof window)&&((r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o={"#":{pattern:/\d/},X:{pattern:/[0-9a-z]/i},S:{pattern:/[a-z]/i},A:{pattern:/[a-z]/i,transform:e=>e.toLocaleUpperCase()},a:{pattern:/[a-z]/i,transform:e=>e.toLocaleLowerCase()},"\\":{escape:!0}};n("25f0");const i="__input-facade__";function a(e=""){this.masked=this.raw=e}function u(){return new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{facade:!0}})}function c(e={}){return(Array.isArray(e)||"string"===typeof e)&&(e={mask:e}),e}function s(e){const t=e instanceof HTMLInputElement?e:e.querySelector("input");if(!t)throw new Error("facade directive requires an input element");return t}function f(e){const{target:t,detail:n}=e;if(n&&n.facade)return!1;e.stopPropagation();const r=t.value,o=t.selectionEnd;d(t,{emit:!1}),l(e,r,o),t.dispatchEvent(u())}function l(e,t,n){const{target:r}=e,o=["text","tel","search",null].includes(r.getAttribute("type")),a=r[i]&&r[i].config;if(r!==document.activeElement||!o||!a.mask)return;const u="insertFromPaste"===e.inputType,c=(e.data||u)&&n==t.length;let s=t[n-1];const f=r.value.toLocaleLowerCase();let l=n;if(c)l=f.length;else if(s){s=s.toLocaleLowerCase();let e=l;while(e<=f.length&&f.charAt(e-1)!==s)e++;l=e<=f.length?e:l-1}r.setSelectionRange(l,l),setTimeout((function(){r.setSelectionRange(l,l)}),0)}function d(e,{emit:t=!0,force:n=!1}={}){const{config:r,oldValue:o}=e[i];if(n||o!==e.value){const n=g(e.value,r);e[i].oldValue=n.masked,e.value=n.masked,e.unmaskedValue=n.raw,t&&e.dispatchEvent(u())}}let p=o;function m(e){p=e}function v(e,t={}){const n=t.masks.slice().sort((e,t)=>e.length-t.length),r=e=>Object.assign({},t,e),o=(t,n)=>{const o=h(e,r({mask:n,short:!0}));return o.masked.length>t.length};for(let i=0;i<n.length;i++){const t=n[i],a=n[i+1];if(!a||!o(t,a))return h(e,r({mask:t}))}return new a}function h(e="",t={}){let{mask:n="",tokens:r,short:o=!1}=t;r=r?Object.assign({},p,r):p,e=e.toString();let i=new a,u=!1,c=0,s=0,f="";while(s<n.length){const t=n[s],a=r[t];let l=e[c];if(!l&&(o||a))break;if(a&&!u){if(a.escape){u=!0,s++;continue}a.pattern.test(l)&&(l=a.transform?a.transform(l):l,i.raw+=l,i.masked+=f+l,f="",s++),c++}else f+=t,l===t&&c++,u=!1,s++}return i.raw&&!o&&(i.masked+=f),i}function g(e,t){return t=c(t),t.mask?Array.isArray(t.mask)?v(e,Object.assign({},t,{masks:t.mask})):h(e,t):new a(e)}const b=i;var y={bind:function(e,t){e=s(e),e.addEventListener("input",f,!0),e[b]={config:c(t.value)},d(e)},update:(e,{value:t,oldValue:n})=>{e=s(e),t!==n?(e[b].config=c(t),d(e,{force:!0})):d(e)},unbind:e=>e.removeEventListener("input",f,!0)},k=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("input",{directives:[{name:"facade",rawName:"v-facade",value:e.config,expression:"config"}],attrs:{type:"text"},domProps:{value:e.maskedValue},on:{input:e.input,blur:function(t){return e.$emit("blur")},focus:function(t){return e.$emit("focus")}}})},w=[],x={name:"InputFacade",props:{mask:[String,Array],masked:{type:Boolean,default:!1},tokens:Object,value:[String,Number]},directives:{facade:y},data(){return{emittedValue:this.value,maskedValue:this.value,unmaskedValue:null}},watch:{value(e){e!==this.emittedValue&&(this.maskedValue=e)},mask(e){e||(this.maskedValue=this.unmaskedValue)},masked(){this.refresh()}},computed:{config(){return{mask:this.mask,tokens:this.tokens}}},methods:{input({target:e}){this.maskedValue=e.value,this.unmaskedValue=e.unmaskedValue,this.refresh()},refresh(){let e=this.mask&&this.masked?this.maskedValue:this.unmaskedValue;this.emittedValue!==e&&(this.emittedValue=e,this.$emit("input",e))}}},_=x;function S(e,t,n,r,o,i,a,u){var c,s="function"===typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),a?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},s._ssrRegister=c):o&&(c=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(s.functional){s._injectStyles=c;var f=s.render;s.render=function(e,t){return c.call(t),f(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,c):[c]}return{exports:e,options:s}}var j=S(_,k,w,!1,null,null,null),E=j.exports;function V(e,t={}){t.tokens&&m(t.tokens),e.component(E.name,E),e.directive(t.name||"facade",y),e.filter(t.name||"facade",O)}function O(e,t){return g(e,t).masked}var T=V;"undefined"!==typeof window&&window.Vue&&window.Vue.use(V),n.d(t,"InputFacade",(function(){return E})),n.d(t,"facade",(function(){return y})),n.d(t,"tokens",(function(){return o})),n.d(t,"masker",(function(){return g})),n.d(t,"filter",(function(){return O}));t["default"]=T}})}));
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t():"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue-input-facade"]=t():e["vue-input-facade"]=t()})("undefined"!==typeof self?self:this,(function(){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="fb15")}({"0cfb":function(e,t,n){var r=n("83ab"),o=n("d039"),i=n("cc12");e.exports=!r&&!o((function(){return 7!=Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},"25f0":function(e,t,n){"use strict";var r=n("6eeb"),o=n("825a"),i=n("d039"),a=n("ad6d"),u="toString",c=RegExp.prototype,s=c[u],f=i((function(){return"/a/b"!=s.call({source:"a",flags:"b"})})),l=s.name!=u;(f||l)&&r(RegExp.prototype,u,(function(){var e=o(this),t=String(e.source),n=e.flags,r=String(void 0===n&&e instanceof RegExp&&!("flags"in c)?a.call(e):n);return"/"+t+"/"+r}),{unsafe:!0})},5135:function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},5692:function(e,t,n){var r=n("c430"),o=n("c6cd");(e.exports=function(e,t){return o[e]||(o[e]=void 0!==t?t:{})})("versions",[]).push({version:"3.4.2",mode:r?"pure":"global",copyright:"© 2019 Denis Pushkarev (zloirock.ru)"})},"5c6c":function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},"69f3":function(e,t,n){var r,o,i,a=n("7f9a"),u=n("da84"),c=n("861d"),s=n("9112"),f=n("5135"),l=n("f772"),d=n("d012"),p=u.WeakMap,m=function(e){return i(e)?o(e):r(e,{})},v=function(e){return function(t){var n;if(!c(t)||(n=o(t)).type!==e)throw TypeError("Incompatible receiver, "+e+" required");return n}};if(a){var h=new p,g=h.get,y=h.has,b=h.set;r=function(e,t){return b.call(h,e,t),t},o=function(e){return g.call(h,e)||{}},i=function(e){return y.call(h,e)}}else{var k=l("state");d[k]=!0,r=function(e,t){return s(e,k,t),t},o=function(e){return f(e,k)?e[k]:{}},i=function(e){return f(e,k)}}e.exports={set:r,get:o,has:i,enforce:m,getterFor:v}},"6eeb":function(e,t,n){var r=n("da84"),o=n("5692"),i=n("9112"),a=n("5135"),u=n("ce4e"),c=n("9e81"),s=n("69f3"),f=s.get,l=s.enforce,d=String(c).split("toString");o("inspectSource",(function(e){return c.call(e)})),(e.exports=function(e,t,n,o){var c=!!o&&!!o.unsafe,s=!!o&&!!o.enumerable,f=!!o&&!!o.noTargetGet;"function"==typeof n&&("string"!=typeof t||a(n,"name")||i(n,"name",t),l(n).source=d.join("string"==typeof t?t:"")),e!==r?(c?!f&&e[t]&&(s=!0):delete e[t],s?e[t]=n:i(e,t,n)):s?e[t]=n:u(t,n)})(Function.prototype,"toString",(function(){return"function"==typeof this&&f(this).source||c.call(this)}))},"7f9a":function(e,t,n){var r=n("da84"),o=n("9e81"),i=r.WeakMap;e.exports="function"===typeof i&&/native code/.test(o.call(i))},"825a":function(e,t,n){var r=n("861d");e.exports=function(e){if(!r(e))throw TypeError(String(e)+" is not an object");return e}},"83ab":function(e,t,n){var r=n("d039");e.exports=!r((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},"861d":function(e,t){e.exports=function(e){return"object"===typeof e?null!==e:"function"===typeof e}},"90e3":function(e,t){var n=0,r=Math.random();e.exports=function(e){return"Symbol("+String(void 0===e?"":e)+")_"+(++n+r).toString(36)}},9112:function(e,t,n){var r=n("83ab"),o=n("9bf2"),i=n("5c6c");e.exports=r?function(e,t,n){return o.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},"9bf2":function(e,t,n){var r=n("83ab"),o=n("0cfb"),i=n("825a"),a=n("c04e"),u=Object.defineProperty;t.f=r?u:function(e,t,n){if(i(e),t=a(t,!0),i(n),o)try{return u(e,t,n)}catch(r){}if("get"in n||"set"in n)throw TypeError("Accessors not supported");return"value"in n&&(e[t]=n.value),e}},"9e81":function(e,t,n){var r=n("5692");e.exports=r("native-function-to-string",Function.toString)},ad6d:function(e,t,n){"use strict";var r=n("825a");e.exports=function(){var e=r(this),t="";return e.global&&(t+="g"),e.ignoreCase&&(t+="i"),e.multiline&&(t+="m"),e.dotAll&&(t+="s"),e.unicode&&(t+="u"),e.sticky&&(t+="y"),t}},c04e:function(e,t,n){var r=n("861d");e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},c430:function(e,t){e.exports=!1},c6cd:function(e,t,n){var r=n("da84"),o=n("ce4e"),i="__core-js_shared__",a=r[i]||o(i,{});e.exports=a},c8ba:function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(r){"object"===typeof window&&(n=window)}e.exports=n},cc12:function(e,t,n){var r=n("da84"),o=n("861d"),i=r.document,a=o(i)&&o(i.createElement);e.exports=function(e){return a?i.createElement(e):{}}},ce4e:function(e,t,n){var r=n("da84"),o=n("9112");e.exports=function(e,t){try{o(r,e,t)}catch(n){r[e]=t}return t}},d012:function(e,t){e.exports={}},d039:function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},da84:function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n("c8ba"))},f772:function(e,t,n){var r=n("5692"),o=n("90e3"),i=r("keys");e.exports=function(e){return i[e]||(i[e]=o(e))}},fb15:function(e,t,n){"use strict";var r;(n.r(t),"undefined"!==typeof window)&&((r=window.document.currentScript)&&(r=r.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(n.p=r[1]));var o={"#":{pattern:/\d/},X:{pattern:/[0-9a-z]/i},S:{pattern:/[a-z]/i},A:{pattern:/[a-z]/i,transform:e=>e.toLocaleUpperCase()},a:{pattern:/[a-z]/i,transform:e=>e.toLocaleLowerCase()},"\\":{escape:!0}};n("25f0");const i="__input-facade__";function a(e=""){this.masked=this.unmasked=e}function u(){return new CustomEvent("input",{bubbles:!0,cancelable:!0,detail:{facade:!0}})}function c(e={}){return(Array.isArray(e)||"string"===typeof e)&&(e={mask:e}),e}function s(e){const t=e instanceof HTMLInputElement?e:e.querySelector("input");if(!t)throw new Error("facade directive requires an input element");return t}function f(e){const{target:t,detail:n}=e;if(n&&n.facade)return!1;e.stopPropagation();const r=t.value,o=t.selectionEnd,{oldValue:a}=t[i];d(t,{emit:!1},e),l(e,r,o),a!==t.value&&t.dispatchEvent(u())}function l(e,t,n){const{target:r}=e,o=["text","tel","search",null].includes(r.getAttribute("type")),a=r[i]&&r[i].config;if(r!==document.activeElement||!o||!a.mask)return;const u="insertFromPaste"===e.inputType,c=(e.data||u)&&n==t.length;let s=t[n-1];const f=r.value.toLocaleLowerCase();let l=n;if(c)l=f.length;else if(s){s=s.toLocaleLowerCase();let e=l;while(e<=f.length&&f.charAt(e-1)!==s)e++;l=e<=f.length?e:l-1}r.setSelectionRange(l,l),setTimeout((function(){r.setSelectionRange(l,l)}),0)}function d(e,{emit:t=!0,force:n=!1}={},r){const{config:o,oldValue:a}=e[i];if(n||a!==e.value){let n=g(e.value,o);if(r&&"function"===typeof o.pipe){const t=o.pipe(n,r);if("string"===typeof t)n=g(t,o);else if(!1===t)return void(e.value=a)}e[i].oldValue=n.masked,e.value=n.masked,e.unmaskedValue=n.unmasked,t&&e.dispatchEvent(u())}}let p=o;function m(e){p=e}function v(e,t={}){const n=t.masks.slice().sort((e,t)=>e.length-t.length),r=e=>Object.assign({},t,e),o=(t,n)=>{const o=h(e,r({mask:n,short:!0}));return o.masked.length>t.length};for(let i=0;i<n.length;i++){const t=n[i],a=n[i+1];if(!a||!o(t,a))return h(e,r({mask:t}))}return new a}function h(e="",t={}){let{mask:n="",tokens:r,short:o=!1}=t;r=r?Object.assign({},p,r):p,e=e.toString();let i=new a,u=!1,c=0,s=0,f="";while(s<n.length){const t=n[s],a=r[t];let l=e[c];if(!l&&(o||a))break;if(a&&!u){if(a.escape){u=!0,s++;continue}a.pattern.test(l)&&(l=a.transform?a.transform(l):l,i.unmasked+=l,i.masked+=f+l,f="",s++),c++}else f+=t,l===t&&c++,u=!1,s++}return i.unmasked&&!o&&(i.masked+=f),i}function g(e,t){return t=c(t),t.mask?Array.isArray(t.mask)?v(e,Object.assign({},t,{masks:t.mask})):h(e,t):new a(e)}const y=i;var b={bind:function(e,t){e=s(e),e.addEventListener("input",f,!0),e[y]={config:c(t.value)},d(e)},update:(e,{value:t,oldValue:n})=>{e=s(e),t!==n?(e[y].config=c(t),d(e,{force:!0})):d(e)},unbind:e=>e.removeEventListener("input",f,!0)},k=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("input",{directives:[{name:"facade",rawName:"v-facade",value:e.config,expression:"config"}],attrs:{type:"text"},domProps:{value:e.maskedValue},on:{input:e.onInput,change:e.onChange,blur:function(t){return e.$emit("blur")},focus:function(t){return e.$emit("focus")}}})},x=[],w={name:"InputFacade",props:{lazy:{type:Boolean,default:!1},mask:[String,Array],masked:{type:Boolean,default:!1},pipe:Function,tokens:Object,value:[String,Number]},directives:{facade:b},data(){return{maskedValue:this.value,unmaskedValue:null}},watch:{value(e){e!==this.emittedValue&&(this.maskedValue=e)},mask(e){e||(this.maskedValue=this.unmaskedValue)},masked(){this.emitInput()}},computed:{config(){return{mask:this.mask,tokens:this.tokens,pipe:this.pipe}},emittedValue(){return this.mask&&this.masked?this.maskedValue:this.unmaskedValue}},methods:{onInput({target:e}){this.maskedValue=e.value,this.unmaskedValue=e.unmaskedValue,this.lazy||this.emitInput()},onChange(){this.$emit("change",this.emittedValue),this.lazy&&this.emitInput()},emitInput(){this.$emit("input",this.emittedValue)}}},_=w;function S(e,t,n,r,o,i,a,u){var c,s="function"===typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),r&&(s.functional=!0),i&&(s._scopeId="data-v-"+i),a?(c=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"===typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),o&&o.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},s._ssrRegister=c):o&&(c=u?function(){o.call(this,this.$root.$options.shadowRoot)}:o),c)if(s.functional){s._injectStyles=c;var f=s.render;s.render=function(e,t){return c.call(t),f(e,t)}}else{var l=s.beforeCreate;s.beforeCreate=l?[].concat(l,c):[c]}return{exports:e,options:s}}var j=S(_,k,x,!1,null,null,null),V=j.exports;function E(e,t={}){t.tokens&&m(t.tokens),e.component(V.name,V),e.directive(t.name||"facade",b),e.filter(t.name||"facade",O)}function O(e,t){return g(e,t).masked}var C=E;"undefined"!==typeof window&&window.Vue&&window.Vue.use(E),n.d(t,"InputFacade",(function(){return V})),n.d(t,"facade",(function(){return b})),n.d(t,"tokens",(function(){return o})),n.d(t,"masker",(function(){return g})),n.d(t,"filter",(function(){return O}));t["default"]=C}})}));

package.json

 {
   "name": "vue-input-facade",
-  "version": "1.1.4",
-  "description": "A lightweight and dependency free input facade created specific for Vue",
+  "version": "1.2.0-beta.1",
+  "description": "A lightweight and dependency free input masking library created specific for Vue",
   "author": "Ronald Jerez <[e-mail]> (https://github.com/RonaldJerez/)",
@@ -6,0 +6,0 @@ "scripts": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

90909

increased by5.03%

Lines of code

2134

increased by4.71%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes