vue-numeric-keypad
Advanced tools
Comparing version 1.2.2 to 1.2.3
@@ -31,2 +31,4 @@ // | ||
| const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1]; | ||
| const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]; | ||
| var script = { | ||
@@ -94,4 +96,2 @@ name: "VueNumericKeypad", | ||
| const columns = Number(this.options.columns) || 3; | ||
| const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1]; | ||
| const arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]; | ||
| return { | ||
@@ -101,6 +101,6 @@ encryptedChar: typeof this.options.encryptedChar === 'string' ? this.options.encryptedChar.substring(0, 1) : "0", | ||
| keyArray: this.options.keyArray || (columns === 3 ? arr1 : arr2), | ||
| keyRandomize: Boolean(this.options.keyRandomize ?? true), | ||
| keyRandomize: Boolean(this.options.keyRandomize === undefined || this.options.keyRandomize), | ||
| randomizeWhenClick: Boolean(this.options.randomizeWhenClick), | ||
| fixDeleteKey: Boolean(this.options.fixDeleteKey ?? true), | ||
| stopPropagation: Boolean(this.options.stopPropagation ?? true), | ||
| fixDeleteKey: Boolean(this.options.fixDeleteKey === undefined || this.options.fixDeleteKey), | ||
| stopPropagation: Boolean(this.options.stopPropagation === undefined || this.options.stopPropagation), | ||
| keypadClass: this.options.keypadClass || 'numeric-keypad', | ||
@@ -115,2 +115,4 @@ buttonWrapClass: this.options.buttonWrapClass || 'numeric-keypad__button-wrap', | ||
| pseudoClick: Boolean(this.options.pseudoClick), | ||
| pseudoClickDeleteKey: this.options.pseudoClickDeleteKey === undefined ? Boolean(this.options.pseudoClick) : Boolean(this.options.pseudoClickDeleteKey), | ||
| pseudoClickBlankKey: this.options.pseudoClickBlankKey === undefined ? Boolean(this.options.pseudoClick) : Boolean(this.options.pseudoClickBlankKey), | ||
| rows: Number(this.options.rows) || 4, | ||
@@ -133,2 +135,37 @@ columns, | ||
| if (this.keyRandomize) this.randomize(); | ||
| }, | ||
| options: { | ||
| deep: true, | ||
| handler(options) { | ||
| if (typeof options !== 'object') return; | ||
| const columns = Number(options.columns) || 3; | ||
| this.encryptedChar = typeof options.encryptedChar === 'string' ? options.encryptedChar.substring(0, 1) : "0"; | ||
| this.keyArray = options.keyArray || (columns === 3 ? arr1 : arr2); | ||
| this.keyRandomize = Boolean(options.keyRandomize === undefined || options.keyRandomize); | ||
| this.randomizeWhenClick = Boolean(options.randomizeWhenClick); | ||
| this.fixDeleteKey = Boolean(options.fixDeleteKey === undefined || options.fixDeleteKey); | ||
| this.stopPropagation = Boolean(options.stopPropagation === undefined || options.stopPropagation); | ||
| this.activeButtonDelay = Number(options.activeButtonDelay) || 300; | ||
| this.pseudoClick = Boolean(options.pseudoClick); | ||
| this.pseudoClickDeleteKey = options.pseudoClickDeleteKey === undefined ? Boolean(options.pseudoClick) : Boolean(options.pseudoClickDeleteKey); | ||
| this.pseudoClickBlankKey = options.pseudoClickBlankKey === undefined ? Boolean(options.pseudoClick) : Boolean(options.pseudoClickBlankKey); | ||
| this.rows = Number(options.rows) || 4; | ||
| this.zIndex = Number(options.zIndex) || 1; | ||
| const defaultStyle = ['all', 'button', 'wrap', 'none'].find(s => s === options.defaultStyle) || 'all'; | ||
| if (this.defaultStyle !== defaultStyle) { | ||
| this.defaultStyle = defaultStyle; | ||
| document.head.removeChild(this.defaultStyleSheet); | ||
| this.defaultStyleSheet = document.createElement('style'); | ||
| if (this.defaultStyle !== 'none') { | ||
| document.head.appendChild(this.defaultStyleSheet); | ||
| this.initDefaultStyles(this.defaultStyleSheet.sheet); | ||
| } | ||
| } | ||
| if (this.keyRandomize) this.randomize(); | ||
| } | ||
| } | ||
@@ -139,3 +176,3 @@ }, | ||
| const fontSize = Math.round(Math.min(this.cellWidth, this.cellHeight) * 0.3); | ||
| return ` | ||
| const style = ` | ||
| position: fixed; | ||
@@ -153,4 +190,4 @@ z-index: ${this.zIndex}; | ||
| overflow: hidden; | ||
| font-size: ${fontSize}px; | ||
| `; | ||
| return fontSize ? style + `\nfont-size: ${fontSize}px;` : style; | ||
| }, | ||
@@ -187,10 +224,11 @@ buttonWrapStyles: function () { | ||
| click(key, idx) { | ||
| this.activeButton(idx); | ||
| if (this.pseudoClick) { | ||
| const l = this.keyArray.length; | ||
| const pIdx = Math.floor(Math.random() * (l - 1) + idx + 1) % l; | ||
| this.activeButton(pIdx); | ||
| if (!(key == -1 && !this.pseudoClickDeleteKey || key == '' && !this.pseudoClickBlankKey)) { | ||
| const l = this.keyArray.length; | ||
| const pIdx = Math.floor(Math.random() * (l - 1) + idx + 1) % l; | ||
| this.activeButton(pIdx); | ||
| } | ||
| } | ||
| this.activeButton(idx); | ||
| let newVal = this.value; | ||
@@ -291,2 +329,3 @@ const encryptedValue = [...this.encryptedValue]; | ||
| initDefaultStyles(sheet) { | ||
| if (this.defaultStyle === 'none') return; | ||
| const test = /[^0-9A-z\-_ ]/; | ||
@@ -293,0 +332,0 @@ let padIndex = 0; |
@@ -1,1 +0,1 @@ | ||
| var VueNumericKeypad=function(){"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var i,o,s=[],r=!0,a=!1;try{for(n=n.call(t);!(r=(i=n.next()).done)&&(s.push(i.value),!e||s.length!==e);r=!0);}catch(t){a=!0,o=t}finally{try{r||null==n.return||n.return()}finally{if(a)throw o}}return s}(t,e)||i(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||i(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){if(t){if("string"==typeof t)return o(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?o(t,e):void 0}}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function s(t,e,n,i,o,s,r,a,u,l){"boolean"!=typeof r&&(u=a,a=r,r=!1);const c="function"==typeof n?n.options:n;let d;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),i&&(c._scopeId=i),s?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,u(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=d):e&&(d=r?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),d)if(c.functional){const t=c.render;c.render=function(e,n){return d.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,d):[d]}return n}Object.entries||(Object.entries=function(t){for(var e=Object.keys(t),n=e.length,i=new Array(n);n--;)i[n]=[e[n],t[e[n]]];return i});var r=s({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:t.keypadClass,attrs:{id:t.id},on:{click:function(e){t.stopPropagation&&e.stopPropagation()}}},[n("div",{class:t.buttonWrapClass},t._l(t.keyArray,(function(e,i){return n("button",{key:i,ref:"button",refInFor:!0,class:t.setClass(e,i),attrs:{type:"button"},on:{click:function(n){return t.click(e,i)}}},[t._v("\n "+t._s(t.showKey(e))+"\n ")])})),0),t._v(" "),t._t("default")],2)},staticRenderFns:[]},undefined,{name:"VueNumericKeypad",props:{id:{type:String,required:!1},value:{type:String,default:"",required:!0},show:{type:[Boolean,Number],default:!1,required:!0},encryptFunc:{type:Function,default:function(t){return t}},encryptedValue:{type:Array,default:function(){return[]}},options:{type:Object,default:function(){return{}},validator:function(e){return(e.keyArray||[]).some((function(e){switch(t(e)){case"number":return!Number.isInteger(e)||e<-1||e>9;case"string":return e;default:return!1}}))?(console.error("KeyArray can contain only an integer 'number' between -1 and 9 and an empty 'string'."),!1):!Object.keys(e).some((function(t){return/Class/.test(t)&&/[^0-9A-z\-_ ]/.test(e[t])}))||(console.error("Class name can contain only 'a-z' and 'A-Z', '0-9', '_', '-', ' '."),!1)},required:!1}},data:function(){var t,e,n,i=this,o=Number(this.options.columns)||3;return{encryptedChar:"string"==typeof this.options.encryptedChar?this.options.encryptedChar.substring(0,1):"0",encrypt:Boolean(this.options.encrypt),keyArray:this.options.keyArray||(3===o?[1,2,3,4,5,6,7,8,9,"",0,-1]:[1,2,3,4,5,6,7,8,9,0,"",-1]),keyRandomize:Boolean(null===(t=this.options.keyRandomize)||void 0===t||t),randomizeWhenClick:Boolean(this.options.randomizeWhenClick),fixDeleteKey:Boolean(null===(e=this.options.fixDeleteKey)||void 0===e||e),stopPropagation:Boolean(null===(n=this.options.stopPropagation)||void 0===n||n),keypadClass:this.options.keypadClass||"numeric-keypad",buttonWrapClass:this.options.buttonWrapClass||"numeric-keypad__button-wrap",buttonClass:this.options.buttonClass||"numeric-keypad__button",deleteButtonClass:this.options.deleteButtonClass||"numeric-keypad__button--delete",blankButtonClass:this.options.blankButtonClass||"numeric-keypad__button--blank",activeButtonClass:this.options.activeButtonClass||"numeric-keypad__button--active",activeButtonIndexes:{},activeButtonDelay:Number(this.options.activeButtonDelay)||300,pseudoClick:Boolean(this.options.pseudoClick),rows:Number(this.options.rows)||4,columns:o,zIndex:Number(this.options.zIndex)||1,cellWidth:0,cellHeight:0,defaultStyleSheet:document.createElement("style"),defaultStyle:["all","button","wrap","none"].find((function(t){return t===i.options.defaultStyle}))||"all",keypadStylesIndex:null}},watch:{show:function(){this.$nextTick((function(){this.show&&this.resize()})),this.keyRandomize&&this.randomize()}},computed:{keypadStyles:function(){var t=Math.round(.3*Math.min(this.cellWidth,this.cellHeight));return"\n position: fixed;\n z-index: ".concat(this.zIndex,";\n bottom: 0;\n left: 0;\n right: 0;\n height: 40vh;\n padding: 10px;\n background-color: #fff;\n border-radius: 12px 12px 0 0;\n box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);\n color: #000;\n overflow: hidden;\n font-size: ").concat(t,"px;\n ")},buttonWrapStyles:function(){return"\n display: flex;\n witdth: 100%;\n height: 100%;\n justify-content: space-between;\n align-content: space-between;\n flex-wrap: wrap;\n gridGap: 5px;\n "},buttonStyles:function(){var t="calc(".concat(Math.round(1e3/this.columns)/10,"% - ").concat(Math.ceil(5*(this.columns-1)/this.columns),"px)"),e="calc(".concat(Math.round(1e3/this.rows)/10,"% - ").concat(Math.ceil(5*(this.rows-1)/this.rows),"px)");return"\n flex: 0 0 auto;\n display: flex;\n width: ".concat(t,";\n height: ").concat(e,";\n justify-content: center;\n align-items: center;\n background-color: #fff;\n border: 1px solid #000;\n border-radius: 8px;\n font-size: inherit;\n ")}},methods:{click:function(t,e){if(this.activeButton(e),this.pseudoClick){var i=this.keyArray.length,o=Math.floor(Math.random()*(i-1)+e+1)%i;this.activeButton(o)}var s=this.value,r=n(this.encryptedValue);this.encrypt?-1===t?(s=this.value.slice(0,-1),r.pop()):""!==t&&(s+=this.encryptedChar,r.push(this.encryptFunc(t.toString()))):-1===t?s=this.value.slice(0,-1):s+=t,this.$emit("update:value",String(s)),this.$emit("update:encryptedValue",r),this.keyRandomize&&this.randomizeWhenClick&&this.randomize()},randomize:function(){for(var t=[],e=0,n=0;n<this.keyArray.length;n++){var i=Math.random();this.fixDeleteKey&&-1==this.keyArray[n]?e++:i<.5?t.push(this.keyArray[n]):t.unshift(this.keyArray[n])}if(e)for(var o=0;o<e;o++)t.push(-1);this.keyArray=t},showKey:function(t){return-1===t?"del":t},resize:function(){this.cellWidth=this.$refs.button[0].offsetWidth,this.cellHeight=this.$refs.button[0].offsetHeight;var t=this.defaultStyleSheet.sheet;t&&null!==this.keypadStylesIndex&&(t.deleteRule(0),t.insertRule(".".concat(this.keypadClass.trim().split(" ")[0]," {").concat(this.keypadStyles,"}"),0))},setClass:function(t,e){var n=[this.buttonClass];return-1===t&&n.push(this.deleteButtonClass),""===t&&n.push(this.blankButtonClass),this.activeButtonIndexes[e]&&n.push(this.activeButtonClass),n},activeButton:function(t){var e=this;this.activeButtonIndexes[t]?clearTimeout(this.activeButtonIndexes[t]):this.$refs.button[t].classList.add(this.activeButtonClass),this.activeButtonIndexes[t]=setTimeout((function(){e.$refs.button[t].classList.remove(e.activeButtonClass),clearTimeout(e.activeButtonIndexes[t]),delete e.activeButtonIndexes[t]}),this.activeButtonDelay)},initDefaultStyles:function(t){var e=/[^0-9A-z\-_ ]/,n=0;"button"!==this.defaultStyle&&(e.test(this.keypadClass)||(this.keypadStylesIndex=n,t.insertRule(".".concat(this.keypadClass.trim().split(" ")[0]," {").concat(this.keypadStyles,"}"),n++)),e.test(this.buttonWrapClass)||t.insertRule(".".concat(this.buttonWrapClass.trim().split(" ")[0]," {").concat(this.buttonWrapStyles,"}"),n++)),"wrap"!==this.defaultStyle&&(e.test(this.buttonClass)||(t.insertRule(".".concat(this.buttonClass.trim().split(" ")[0]," {").concat(this.buttonStyles,"}"),n++),e.test(this.activeButtonClass)||t.insertRule(".".concat(this.buttonClass.trim().split(" ")[0],".").concat(this.activeButtonClass.trim().split(" ")[0]," {background-color: #eaeaea;}"),n++)))}},mounted:function(){window.addEventListener("resize",this.resize),"none"!==this.defaultStyle&&(document.head.appendChild(this.defaultStyleSheet),this.initDefaultStyles(this.defaultStyleSheet.sheet)),this.keyRandomize&&this.randomize(),this.resize()},beforeDestroy:function(){window.removeEventListener("resize",this.resize)}},undefined,false,undefined,!1,void 0,void 0,void 0),a=function(){var t=r;return t.install=function(e){e.component("VueNumericKeypad",t)},t}(),u=Object.freeze({__proto__:null,default:a});return Object.entries(u).forEach((function(t){var n=e(t,2),i=n[0],o=n[1];"default"!==i&&(a[i]=o)})),a}(); | ||
| var VueNumericKeypad=function(){"use strict";function t(e){return t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t(e)}function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var o,i,s=[],r=!0,a=!1;try{for(n=n.call(t);!(r=(o=n.next()).done)&&(s.push(o.value),!e||s.length!==e);r=!0);}catch(t){a=!0,i=t}finally{try{r||null==n.return||n.return()}finally{if(a)throw i}}return s}(t,e)||o(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t){return function(t){if(Array.isArray(t))return i(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||o(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,e){if(t){if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(t,e):void 0}}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}Object.entries||(Object.entries=function(t){for(var e=Object.keys(t),n=e.length,o=new Array(n);n--;)o[n]=[e[n],t[e[n]]];return o});var s=[1,2,3,4,5,6,7,8,9,"",0,-1],r=[1,2,3,4,5,6,7,8,9,0,"",-1];function a(t,e,n,o,i,s,r,a,l,u){"boolean"!=typeof r&&(l=a,a=r,r=!1);const c="function"==typeof n?n.options:n;let d;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),s?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=d):e&&(d=r?function(t){e.call(this,u(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),d)if(c.functional){const t=c.render;c.render=function(e,n){return d.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,d):[d]}return n}var l=a({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:t.keypadClass,attrs:{id:t.id},on:{click:function(e){t.stopPropagation&&e.stopPropagation()}}},[n("div",{class:t.buttonWrapClass},t._l(t.keyArray,(function(e,o){return n("button",{key:o,ref:"button",refInFor:!0,class:t.setClass(e,o),attrs:{type:"button"},on:{click:function(n){return t.click(e,o)}}},[t._v("\n "+t._s(t.showKey(e))+"\n ")])})),0),t._v(" "),t._t("default")],2)},staticRenderFns:[]},undefined,{name:"VueNumericKeypad",props:{id:{type:String,required:!1},value:{type:String,default:"",required:!0},show:{type:[Boolean,Number],default:!1,required:!0},encryptFunc:{type:Function,default:function(t){return t}},encryptedValue:{type:Array,default:function(){return[]}},options:{type:Object,default:function(){return{}},validator:function(e){return(e.keyArray||[]).some((function(e){switch(t(e)){case"number":return!Number.isInteger(e)||e<-1||e>9;case"string":return e;default:return!1}}))?(console.error("KeyArray can contain only an integer 'number' between -1 and 9 and an empty 'string'."),!1):!Object.keys(e).some((function(t){return/Class/.test(t)&&/[^0-9A-z\-_ ]/.test(e[t])}))||(console.error("Class name can contain only 'a-z' and 'A-Z', '0-9', '_', '-', ' '."),!1)},required:!1}},data:function(){var t=this,e=Number(this.options.columns)||3;return{encryptedChar:"string"==typeof this.options.encryptedChar?this.options.encryptedChar.substring(0,1):"0",encrypt:Boolean(this.options.encrypt),keyArray:this.options.keyArray||(3===e?s:r),keyRandomize:Boolean(void 0===this.options.keyRandomize||this.options.keyRandomize),randomizeWhenClick:Boolean(this.options.randomizeWhenClick),fixDeleteKey:Boolean(void 0===this.options.fixDeleteKey||this.options.fixDeleteKey),stopPropagation:Boolean(void 0===this.options.stopPropagation||this.options.stopPropagation),keypadClass:this.options.keypadClass||"numeric-keypad",buttonWrapClass:this.options.buttonWrapClass||"numeric-keypad__button-wrap",buttonClass:this.options.buttonClass||"numeric-keypad__button",deleteButtonClass:this.options.deleteButtonClass||"numeric-keypad__button--delete",blankButtonClass:this.options.blankButtonClass||"numeric-keypad__button--blank",activeButtonClass:this.options.activeButtonClass||"numeric-keypad__button--active",activeButtonIndexes:{},activeButtonDelay:Number(this.options.activeButtonDelay)||300,pseudoClick:Boolean(this.options.pseudoClick),pseudoClickDeleteKey:void 0===this.options.pseudoClickDeleteKey?Boolean(this.options.pseudoClick):Boolean(this.options.pseudoClickDeleteKey),pseudoClickBlankKey:void 0===this.options.pseudoClickBlankKey?Boolean(this.options.pseudoClick):Boolean(this.options.pseudoClickBlankKey),rows:Number(this.options.rows)||4,columns:e,zIndex:Number(this.options.zIndex)||1,cellWidth:0,cellHeight:0,defaultStyleSheet:document.createElement("style"),defaultStyle:["all","button","wrap","none"].find((function(e){return e===t.options.defaultStyle}))||"all",keypadStylesIndex:null}},watch:{show:function(){this.$nextTick((function(){this.show&&this.resize()})),this.keyRandomize&&this.randomize()},options:{deep:!0,handler:function(e){if("object"===t(e)){var n=Number(e.columns)||3;this.encryptedChar="string"==typeof e.encryptedChar?e.encryptedChar.substring(0,1):"0",this.keyArray=e.keyArray||(3===n?s:r),this.keyRandomize=Boolean(void 0===e.keyRandomize||e.keyRandomize),this.randomizeWhenClick=Boolean(e.randomizeWhenClick),this.fixDeleteKey=Boolean(void 0===e.fixDeleteKey||e.fixDeleteKey),this.stopPropagation=Boolean(void 0===e.stopPropagation||e.stopPropagation),this.activeButtonDelay=Number(e.activeButtonDelay)||300,this.pseudoClick=Boolean(e.pseudoClick),this.pseudoClickDeleteKey=void 0===e.pseudoClickDeleteKey?Boolean(e.pseudoClick):Boolean(e.pseudoClickDeleteKey),this.pseudoClickBlankKey=void 0===e.pseudoClickBlankKey?Boolean(e.pseudoClick):Boolean(e.pseudoClickBlankKey),this.rows=Number(e.rows)||4,this.zIndex=Number(e.zIndex)||1;var o=["all","button","wrap","none"].find((function(t){return t===e.defaultStyle}))||"all";this.defaultStyle!==o&&(this.defaultStyle=o,document.head.removeChild(this.defaultStyleSheet),this.defaultStyleSheet=document.createElement("style"),"none"!==this.defaultStyle&&(document.head.appendChild(this.defaultStyleSheet),this.initDefaultStyles(this.defaultStyleSheet.sheet))),this.keyRandomize&&this.randomize()}}}},computed:{keypadStyles:function(){var t=Math.round(.3*Math.min(this.cellWidth,this.cellHeight)),e="\n position: fixed;\n z-index: ".concat(this.zIndex,";\n bottom: 0;\n left: 0;\n right: 0;\n height: 40vh;\n padding: 10px;\n background-color: #fff;\n border-radius: 12px 12px 0 0;\n box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);\n color: #000;\n overflow: hidden;\n ");return t?e+"\nfont-size: ".concat(t,"px;"):e},buttonWrapStyles:function(){return"\n display: flex;\n witdth: 100%;\n height: 100%;\n justify-content: space-between;\n align-content: space-between;\n flex-wrap: wrap;\n gridGap: 5px;\n "},buttonStyles:function(){var t="calc(".concat(Math.round(1e3/this.columns)/10,"% - ").concat(Math.ceil(5*(this.columns-1)/this.columns),"px)"),e="calc(".concat(Math.round(1e3/this.rows)/10,"% - ").concat(Math.ceil(5*(this.rows-1)/this.rows),"px)");return"\n flex: 0 0 auto;\n display: flex;\n width: ".concat(t,";\n height: ").concat(e,";\n justify-content: center;\n align-items: center;\n background-color: #fff;\n border: 1px solid #000;\n border-radius: 8px;\n font-size: inherit;\n ")}},methods:{click:function(t,e){if(this.pseudoClick&&(-1!=t||this.pseudoClickDeleteKey)&&(""!=t||this.pseudoClickBlankKey)){var o=this.keyArray.length,i=Math.floor(Math.random()*(o-1)+e+1)%o;this.activeButton(i)}this.activeButton(e);var s=this.value,r=n(this.encryptedValue);this.encrypt?-1===t?(s=this.value.slice(0,-1),r.pop()):""!==t&&(s+=this.encryptedChar,r.push(this.encryptFunc(t.toString()))):-1===t?s=this.value.slice(0,-1):s+=t,this.$emit("update:value",String(s)),this.$emit("update:encryptedValue",r),this.keyRandomize&&this.randomizeWhenClick&&this.randomize()},randomize:function(){for(var t=[],e=0,n=0;n<this.keyArray.length;n++){var o=Math.random();this.fixDeleteKey&&-1==this.keyArray[n]?e++:o<.5?t.push(this.keyArray[n]):t.unshift(this.keyArray[n])}if(e)for(var i=0;i<e;i++)t.push(-1);this.keyArray=t},showKey:function(t){return-1===t?"del":t},resize:function(){this.cellWidth=this.$refs.button[0].offsetWidth,this.cellHeight=this.$refs.button[0].offsetHeight;var t=this.defaultStyleSheet.sheet;t&&null!==this.keypadStylesIndex&&(t.deleteRule(0),t.insertRule(".".concat(this.keypadClass.trim().split(" ")[0]," {").concat(this.keypadStyles,"}"),0))},setClass:function(t,e){var n=[this.buttonClass];return-1===t&&n.push(this.deleteButtonClass),""===t&&n.push(this.blankButtonClass),this.activeButtonIndexes[e]&&n.push(this.activeButtonClass),n},activeButton:function(t){var e=this;this.activeButtonIndexes[t]?clearTimeout(this.activeButtonIndexes[t]):this.$refs.button[t].classList.add(this.activeButtonClass),this.activeButtonIndexes[t]=setTimeout((function(){e.$refs.button[t].classList.remove(e.activeButtonClass),clearTimeout(e.activeButtonIndexes[t]),delete e.activeButtonIndexes[t]}),this.activeButtonDelay)},initDefaultStyles:function(t){if("none"!==this.defaultStyle){var e=/[^0-9A-z\-_ ]/,n=0;"button"!==this.defaultStyle&&(e.test(this.keypadClass)||(this.keypadStylesIndex=n,t.insertRule(".".concat(this.keypadClass.trim().split(" ")[0]," {").concat(this.keypadStyles,"}"),n++)),e.test(this.buttonWrapClass)||t.insertRule(".".concat(this.buttonWrapClass.trim().split(" ")[0]," {").concat(this.buttonWrapStyles,"}"),n++)),"wrap"!==this.defaultStyle&&(e.test(this.buttonClass)||(t.insertRule(".".concat(this.buttonClass.trim().split(" ")[0]," {").concat(this.buttonStyles,"}"),n++),e.test(this.activeButtonClass)||t.insertRule(".".concat(this.buttonClass.trim().split(" ")[0],".").concat(this.activeButtonClass.trim().split(" ")[0]," {background-color: #eaeaea;}"),n++)))}}},mounted:function(){window.addEventListener("resize",this.resize),"none"!==this.defaultStyle&&(document.head.appendChild(this.defaultStyleSheet),this.initDefaultStyles(this.defaultStyleSheet.sheet)),this.keyRandomize&&this.randomize(),this.resize()},beforeDestroy:function(){window.removeEventListener("resize",this.resize)}},undefined,false,undefined,!1,void 0,void 0,void 0),u=function(){var t=l;return t.install=function(e){e.component("VueNumericKeypad",t)},t}(),c=Object.freeze({__proto__:null,default:u});return Object.entries(c).forEach((function(t){var n=e(t,2),o=n[0],i=n[1];"default"!==o&&(u[o]=i)})),u}(); |
@@ -122,2 +122,4 @@ 'use strict';function _typeof(obj) { | ||
| var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1]; | ||
| var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]; | ||
| var script = { | ||
@@ -191,10 +193,5 @@ name: "VueNumericKeypad", | ||
| data: function data() { | ||
| var _this$options$keyRand, | ||
| _this$options$fixDele, | ||
| _this$options$stopPro, | ||
| _this = this; | ||
| var _this = this; | ||
| var columns = Number(this.options.columns) || 3; | ||
| var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1]; | ||
| var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]; | ||
| return { | ||
@@ -204,6 +201,6 @@ encryptedChar: typeof this.options.encryptedChar === 'string' ? this.options.encryptedChar.substring(0, 1) : "0", | ||
| keyArray: this.options.keyArray || (columns === 3 ? arr1 : arr2), | ||
| keyRandomize: Boolean((_this$options$keyRand = this.options.keyRandomize) !== null && _this$options$keyRand !== void 0 ? _this$options$keyRand : true), | ||
| keyRandomize: Boolean(this.options.keyRandomize === undefined || this.options.keyRandomize), | ||
| randomizeWhenClick: Boolean(this.options.randomizeWhenClick), | ||
| fixDeleteKey: Boolean((_this$options$fixDele = this.options.fixDeleteKey) !== null && _this$options$fixDele !== void 0 ? _this$options$fixDele : true), | ||
| stopPropagation: Boolean((_this$options$stopPro = this.options.stopPropagation) !== null && _this$options$stopPro !== void 0 ? _this$options$stopPro : true), | ||
| fixDeleteKey: Boolean(this.options.fixDeleteKey === undefined || this.options.fixDeleteKey), | ||
| stopPropagation: Boolean(this.options.stopPropagation === undefined || this.options.stopPropagation), | ||
| keypadClass: this.options.keypadClass || 'numeric-keypad', | ||
@@ -218,2 +215,4 @@ buttonWrapClass: this.options.buttonWrapClass || 'numeric-keypad__button-wrap', | ||
| pseudoClick: Boolean(this.options.pseudoClick), | ||
| pseudoClickDeleteKey: this.options.pseudoClickDeleteKey === undefined ? Boolean(this.options.pseudoClick) : Boolean(this.options.pseudoClickDeleteKey), | ||
| pseudoClickBlankKey: this.options.pseudoClickBlankKey === undefined ? Boolean(this.options.pseudoClick) : Boolean(this.options.pseudoClickBlankKey), | ||
| rows: Number(this.options.rows) || 4, | ||
@@ -237,2 +236,37 @@ columns: columns, | ||
| if (this.keyRandomize) this.randomize(); | ||
| }, | ||
| options: { | ||
| deep: true, | ||
| handler: function handler(options) { | ||
| if (_typeof(options) !== 'object') return; | ||
| var columns = Number(options.columns) || 3; | ||
| this.encryptedChar = typeof options.encryptedChar === 'string' ? options.encryptedChar.substring(0, 1) : "0"; | ||
| this.keyArray = options.keyArray || (columns === 3 ? arr1 : arr2); | ||
| this.keyRandomize = Boolean(options.keyRandomize === undefined || options.keyRandomize); | ||
| this.randomizeWhenClick = Boolean(options.randomizeWhenClick); | ||
| this.fixDeleteKey = Boolean(options.fixDeleteKey === undefined || options.fixDeleteKey); | ||
| this.stopPropagation = Boolean(options.stopPropagation === undefined || options.stopPropagation); | ||
| this.activeButtonDelay = Number(options.activeButtonDelay) || 300; | ||
| this.pseudoClick = Boolean(options.pseudoClick); | ||
| this.pseudoClickDeleteKey = options.pseudoClickDeleteKey === undefined ? Boolean(options.pseudoClick) : Boolean(options.pseudoClickDeleteKey); | ||
| this.pseudoClickBlankKey = options.pseudoClickBlankKey === undefined ? Boolean(options.pseudoClick) : Boolean(options.pseudoClickBlankKey); | ||
| this.rows = Number(options.rows) || 4; | ||
| this.zIndex = Number(options.zIndex) || 1; | ||
| var defaultStyle = ['all', 'button', 'wrap', 'none'].find(function (s) { | ||
| return s === options.defaultStyle; | ||
| }) || 'all'; | ||
| if (this.defaultStyle !== defaultStyle) { | ||
| this.defaultStyle = defaultStyle; | ||
| document.head.removeChild(this.defaultStyleSheet); | ||
| this.defaultStyleSheet = document.createElement('style'); | ||
| if (this.defaultStyle !== 'none') { | ||
| document.head.appendChild(this.defaultStyleSheet); | ||
| this.initDefaultStyles(this.defaultStyleSheet.sheet); | ||
| } | ||
| } | ||
| if (this.keyRandomize) this.randomize(); | ||
| } | ||
| } | ||
@@ -243,3 +277,4 @@ }, | ||
| var fontSize = Math.round(Math.min(this.cellWidth, this.cellHeight) * 0.3); | ||
| return "\n position: fixed;\n z-index: ".concat(this.zIndex, ";\n bottom: 0;\n left: 0;\n right: 0;\n height: 40vh;\n padding: 10px;\n background-color: #fff;\n border-radius: 12px 12px 0 0;\n box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);\n color: #000;\n overflow: hidden;\n font-size: ").concat(fontSize, "px;\n "); | ||
| var style = "\n position: fixed;\n z-index: ".concat(this.zIndex, ";\n bottom: 0;\n left: 0;\n right: 0;\n height: 40vh;\n padding: 10px;\n background-color: #fff;\n border-radius: 12px 12px 0 0;\n box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);\n color: #000;\n overflow: hidden;\n "); | ||
| return fontSize ? style + "\nfont-size: ".concat(fontSize, "px;") : style; | ||
| }, | ||
@@ -257,10 +292,11 @@ buttonWrapStyles: function buttonWrapStyles() { | ||
| click: function click(key, idx) { | ||
| this.activeButton(idx); | ||
| if (this.pseudoClick) { | ||
| var l = this.keyArray.length; | ||
| var pIdx = Math.floor(Math.random() * (l - 1) + idx + 1) % l; | ||
| this.activeButton(pIdx); | ||
| if (!(key == -1 && !this.pseudoClickDeleteKey || key == '' && !this.pseudoClickBlankKey)) { | ||
| var l = this.keyArray.length; | ||
| var pIdx = Math.floor(Math.random() * (l - 1) + idx + 1) % l; | ||
| this.activeButton(pIdx); | ||
| } | ||
| } | ||
| this.activeButton(idx); | ||
| var newVal = this.value; | ||
@@ -361,2 +397,3 @@ | ||
| initDefaultStyles: function initDefaultStyles(sheet) { | ||
| if (this.defaultStyle === 'none') return; | ||
| var test = /[^0-9A-z\-_ ]/; | ||
@@ -515,3 +552,3 @@ var padIndex = 0; | ||
| var __vue_module_identifier__ = "data-v-e2a4b598"; | ||
| var __vue_module_identifier__ = "data-v-758f4dcf"; | ||
| /* functional template */ | ||
@@ -518,0 +555,0 @@ |
| { | ||
| "name": "vue-numeric-keypad", | ||
| "version": "1.2.2", | ||
| "version": "1.2.3", | ||
| "description": "The virtual numeric keypad that can be used on Vue.", | ||
@@ -15,3 +15,3 @@ "main": "dist/vue-numeric-keypad.ssr.js", | ||
| "scripts": { | ||
| "serve": "vue-cli-service serve dev/serve.js", | ||
| "serve": "vue-cli-service serve dev/demo.js", | ||
| "prebuild": "rimraf ./dist", | ||
@@ -21,3 +21,4 @@ "build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js", | ||
| "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es", | ||
| "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife" | ||
| "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife", | ||
| "demo": "vue-cli-service build dev/demo.js" | ||
| }, | ||
@@ -36,2 +37,4 @@ "dependencies": {}, | ||
| "cross-env": "^7.0.3", | ||
| "gh-pages": "^4.0.0", | ||
| "jsencrypt": "^3.2.1", | ||
| "minimist": "^1.2.5", | ||
@@ -66,3 +69,6 @@ "rimraf": "^3.0.2", | ||
| "keyboard", | ||
| "keypad" | ||
| "keypad", | ||
| "encrypt", | ||
| "encryption", | ||
| "pseudo" | ||
| ], | ||
@@ -69,0 +75,0 @@ "author": "Chae-Sumin(cotnmin)", |
@@ -63,3 +63,3 @@ # Vue Numeric Keypad [](https://www.npmjs.com/package/vue-numeric-keypad) [](https://www.npmjs.com/package/vue/v/2.6.14) | ||
| <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-numeric-keypad@1.2.2/dist/vue-numeric-keypad.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-numeric-keypad@1.2.3/dist/vue-numeric-keypad.min.js"></script> | ||
| <script> | ||
@@ -78,3 +78,3 @@ Vue.use(VueNumericKeypad); | ||
| https://chae-sumin.github.io/vue-numeric-keypad-demo/ | ||
| https://chae-sumin.github.io/vue-numeric-keypad/ | ||
@@ -108,2 +108,4 @@ ## Props and Options | ||
| |`pseudoClick`|Clicking a button triggers a pseudo click on another button|Boolean|false| | ||
| |`pseudoClickDeleteKey`|Clicking the delete button triggers a pseudo click on another button|Boolean|`pseudoClick`| | ||
| |`pseudoClickBlankKey`|Clicking the blank button triggers a pseudo click on another button|Boolean|`pseudoClick`| | ||
| |`defaultStyle`|'all': Use All default styles<br>'button': Use `buttonStyles`, `activeButtonStyles` default styles<br>'wrap': Use `keypadStyles`, `buttonWrapStyles` default styles<br>'none': Not use all default styles|['all', 'button', 'wrap', 'none']|'all'| | ||
@@ -145,3 +147,3 @@ |`stopPropagation`|Prevents the propagation of events that turn off `:show.sync`.|Boolean|true| | ||
| overflow: hidden; | ||
| font-size: ${fontSize}px; | ||
| font-size: ${fontSize}px; // When fontSize != 0 | ||
| } | ||
@@ -187,3 +189,4 @@ ``` | ||
| ## Tip | ||
| - Detect and act on when options are changed. (However, class-related options and `encrypt` are excluded) | ||
| - When options are changed, if `keyRandomize` is true, the key array is changed randomly. | ||
| - You can bind only one value to one keypad, or you can bind multiple values. | ||
@@ -190,0 +193,0 @@ - You can always keep the value of the show true and adjust the position of the keypad so that the keypad can always be located in a fixed layout. |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by15.06%
71577
- Lines of code
- increased by7.59%
978
- Number of lines in readme file
- increased by1.46%
209
Worsened metrics
- Dev dependency count
- increased by11.76%
19
No dependency changes