vue-numeric-keypad
Advanced tools
vue-numeric-keypad - npm Package Compare versions
Comparing version 1.1.2 to 1.2.0
@@ -48,35 +48,39 @@ // | ||
| }, | ||
| encryptFunc: { | ||
| type: Function, | ||
| default: c => c | ||
| }, | ||
| encryptedValue: { | ||
| type: Array, | ||
| default: () => [] | ||
| }, | ||
| options: { | ||
| type: Object, | ||
| default: function () { | ||
| return {}; | ||
| }, | ||
| default: () => ({}), | ||
| validator: function (value) { | ||
| if (!value.keyArray) return true; | ||
| for (let i = 0; i < value.keyArray; i++) { | ||
| const key = value.keyArray[i]; | ||
| const keyArrayDisable = (value.keyArray || []).some(key => { | ||
| switch (typeof key) { | ||
| case 'number': | ||
| if (!Number.isInteger(key) || key < -1 || key > 9) { | ||
| console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."); | ||
| return false; | ||
| } | ||
| return !Number.isInteger(key) || key < -1 || key > 9; | ||
| break; | ||
| case 'string': | ||
| if (key) { | ||
| console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."); | ||
| return false; | ||
| } | ||
| return key; | ||
| break; | ||
| default: | ||
| return false; | ||
| } | ||
| }); | ||
| if (keyArrayDisable) { | ||
| console.error("KeyArray can contain only an integer 'number' between -1 and 9 and an empty 'string'."); | ||
| return false; | ||
| } | ||
| const classDisable = Object.keys(value).some(key => /Class/.test(key) && /[^0-9A-z\-_ ]/.test(value[key])); | ||
| if (classDisable) { | ||
| console.error("Class name can contain only 'a-z' and 'A-Z', '0-9', '_', '-', ' '."); | ||
| return false; | ||
| } | ||
| return true; | ||
@@ -90,18 +94,29 @@ }, | ||
| 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 { | ||
| keyArray: this.options.keyArray === undefined ? columns === 3 ? [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1] : this.options.keyArray, | ||
| keyRandomize: this.options.keyRandomize === undefined ? true : Boolean(this.options.keyRandomize), | ||
| randomizeWhenClick: this.options.randomizeWhenClick === undefined ? false : Boolean(this.options.randomizeWhenClick), | ||
| fixDeleteKey: this.options.fixDeleteKey === undefined ? true : Boolean(this.options.fixDeleteKey), | ||
| stopPropagation: this.options.stopPropagation === undefined ? true : Boolean(this.options.stopPropagation), | ||
| keypadClass: this.options.keypadClass === undefined ? 'numeric-keypad' : String(this.options.keypadClass), | ||
| buttonWrapClass: this.options.buttonWrapClass === undefined ? 'numeric-keypad__button-wrap' : String(this.options.buttonWrapClass), | ||
| buttonClass: this.options.buttonClass === undefined ? 'numeric-keypad__button' : String(this.options.buttonClass), | ||
| deleteButtonClass: this.options.deleteButtonClass === undefined ? 'numeric-keypad__button--delete' : String(this.options.deleteButtonClass), | ||
| blankButtonClass: this.options.blankButtonClass === undefined ? 'numeric-keypad__button--blank' : String(this.options.blankButtonClass), | ||
| encryptedChar: typeof this.options.encryptedChar === 'string' ? this.options.encryptedChar.substring(0, 1) : "0", | ||
| onEncrypt: Boolean(this.options.onEncrypt), | ||
| keyArray: this.options.keyArray || (columns === 3 ? arr1 : arr2), | ||
| keyRandomize: Boolean(this.options.keyRandomize ?? true), | ||
| randomizeWhenClick: Boolean(this.options.randomizeWhenClick), | ||
| fixDeleteKey: Boolean(this.options.fixDeleteKey ?? true), | ||
| stopPropagation: Boolean(this.options.stopPropagation ?? true), | ||
| 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: columns, | ||
| columns, | ||
| zIndex: Number(this.options.zIndex) || 1, | ||
| cellWidth: 0, | ||
| cellHeight: 0 | ||
| cellHeight: 0, | ||
| defaultStyleSheet: document.createElement('style'), | ||
| setDefaultStyle: ['all', 'button', 'wrap', 'none'].find(s => s === this.options.setDefaultStyle) || 'all', | ||
| keypadStylesIndex: null | ||
| }; | ||
@@ -113,11 +128,5 @@ }, | ||
| this.$nextTick(function () { | ||
| if (this.show) { | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| } | ||
| }.bind(this)); | ||
| if (this.keyRandomize) { | ||
| this.randomize(this.fixDeleteKey); | ||
| } | ||
| if (this.show) this.resize(); | ||
| }); | ||
| if (this.keyRandomize) this.randomize(); | ||
| } | ||
@@ -127,65 +136,82 @@ }, | ||
| keypadStyles: function () { | ||
| const fontSize = Math.min(this.cellWidth, this.cellHeight) * 0.3; | ||
| return this.options.keypadStyles || { | ||
| position: 'fixed', | ||
| zIndex: this.zIndex, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| height: '40vh', | ||
| padding: '10px', | ||
| backgroundColor: '#fff', | ||
| borderRadius: '10px 10px 0 0', | ||
| boxShadow: '0 -4px 4px rgba(0, 0, 0, 0.1)', | ||
| color: '#000', | ||
| overflow: 'hidden', | ||
| fontSize: fontSize + 'px' | ||
| }; | ||
| const fontSize = Math.round(Math.min(this.cellWidth, this.cellHeight) * 0.3); | ||
| return ` | ||
| position: fixed; | ||
| z-index: ${this.zIndex}; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 40vh; | ||
| padding: 10px; | ||
| background-color: #fff; | ||
| border-radius: 12px 12px 0 0; | ||
| box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15); | ||
| color: #000; | ||
| overflow: hidden; | ||
| font-size: ${fontSize}px; | ||
| `; | ||
| }, | ||
| buttonWrapStyles: function () { | ||
| return this.options.buttonWrapStyles || { | ||
| display: 'grid', | ||
| width: '100%', | ||
| height: '100%', | ||
| gridTemplateColumns: `repeat(${this.columns}, 1fr)`, | ||
| gridTemplateRows: `repeat(${this.rows}, 1fr)`, | ||
| gridGap: '5px' | ||
| }; | ||
| return ` | ||
| display: flex; | ||
| witdth: 100%; | ||
| height: 100%; | ||
| justify-content: space-between; | ||
| align-content: space-between; | ||
| flex-wrap: wrap; | ||
| gridGap: 5px; | ||
| `; | ||
| }, | ||
| buttonStyles: function () { | ||
| return this.options.buttonStyles || { | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: '#fff', | ||
| border: '1px solid #000', | ||
| borderRadius: '5px', | ||
| fontSize: 'inherit' | ||
| }; | ||
| }, | ||
| deleteButtonStyles: function () { | ||
| return this.options.deleteButtonStyles || this.options.buttonStyles || this.buttonStyles; | ||
| }, | ||
| blankButtonStyles: function () { | ||
| return this.options.blankButtonStyles || this.options.buttonStyles || this.buttonStyles; | ||
| const width = `calc(${Math.round(1000 / this.columns) / 10}% - ${Math.ceil(5 * (this.columns - 1) / this.columns)}px)`; | ||
| const height = `calc(${Math.round(1000 / this.rows) / 10}% - ${Math.ceil(5 * (this.rows - 1) / this.rows)}px)`; | ||
| return ` | ||
| flex: 0 0 auto; | ||
| display: flex; | ||
| width: ${width}; | ||
| height: ${height}; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background-color: #fff; | ||
| border: 1px solid #000; | ||
| border-radius: 8px; | ||
| font-size: inherit; | ||
| `; | ||
| } | ||
| }, | ||
| methods: { | ||
| click(key) { | ||
| 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); | ||
| } | ||
| let newVal = ""; | ||
| const encryptedValue = [...this.encryptedValue]; | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| if (this.onEncrypt) { | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| encryptedValue.pop(); | ||
| } else if (key !== '') { | ||
| newVal = this.value + this.encryptedChar; | ||
| encryptedValue.push(this.encryptFunc(key.toString())); | ||
| } | ||
| } else { | ||
| newVal = this.value + key; | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| } else { | ||
| newVal = this.value + key; | ||
| } | ||
| } | ||
| this.$emit("update:value", String(newVal)); | ||
| if (this.keyRandomize && this.randomizeWhenClick) { | ||
| this.randomize(this.fixDeleteKey); | ||
| } | ||
| this.$emit("update:encryptedValue", encryptedValue); | ||
| if (this.keyRandomize && this.randomizeWhenClick) this.randomize(); | ||
| }, | ||
| randomize(fixDeleteKey) { | ||
| randomize() { | ||
| let newkeyArray = []; | ||
@@ -197,3 +223,3 @@ let delKeyCnt = 0; | ||
| if (fixDeleteKey && this.keyArray[i] == -1) { | ||
| if (this.fixDeleteKey && this.keyArray[i] == -1) { | ||
| delKeyCnt++; | ||
@@ -218,13 +244,69 @@ continue; | ||
| btnStyle(key) { | ||
| resize() { | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| const sheet = this.defaultStyleSheet.sheet; | ||
| if (sheet && this.keypadStylesIndex !== null) { | ||
| sheet.deleteRule(0); | ||
| sheet.insertRule(`.${this.keypadClass.trim().split(' ')[0]} {${this.keypadStyles}}`, 0); | ||
| } | ||
| }, | ||
| setClass(key, idx) { | ||
| const classArr = [this.buttonClass]; | ||
| if (key === -1) { | ||
| return this.deleteButtonStyles; | ||
| } else if (typeof key === 'number') { | ||
| return this.buttonStyles; | ||
| } else return this.blankButtonStyles; | ||
| classArr.push(this.deleteButtonClass); | ||
| } | ||
| if (key === '') { | ||
| classArr.push(this.blankButtonClass); | ||
| } | ||
| if (this.activeButtonIndexes[idx]) { | ||
| classArr.push(this.activeButtonClass); | ||
| } | ||
| return classArr; | ||
| }, | ||
| resize() { | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| activeButton(idx) { | ||
| if (this.activeButtonIndexes[idx]) { | ||
| clearTimeout(this.activeButtonIndexes[idx]); | ||
| } else { | ||
| this.$refs.button[idx].classList.add(this.activeButtonClass); | ||
| } | ||
| this.activeButtonIndexes[idx] = setTimeout(() => { | ||
| this.$refs.button[idx].classList.remove(this.activeButtonClass); | ||
| clearTimeout(this.activeButtonIndexes[idx]); | ||
| delete this.activeButtonIndexes[idx]; | ||
| }, this.activeButtonDelay); | ||
| }, | ||
| initDefaultStyles(sheet) { | ||
| const test = /[^0-9A-z\-_ ]/; | ||
| let padIndex = 0; | ||
| if (this.setDefaultStyle !== 'button') { | ||
| if (!test.test(this.keypadClass)) { | ||
| this.keypadStylesIndex = padIndex; | ||
| sheet.insertRule(`.${this.keypadClass.trim().split(' ')[0]} {${this.keypadStyles}}`, padIndex++); | ||
| } | ||
| if (!test.test(this.buttonWrapClass)) { | ||
| sheet.insertRule(`.${this.buttonWrapClass.trim().split(' ')[0]} {${this.buttonWrapStyles}}`, padIndex++); | ||
| } | ||
| } | ||
| if (this.setDefaultStyle !== 'wrap') { | ||
| if (!test.test(this.buttonClass)) { | ||
| sheet.insertRule(`.${this.buttonClass.trim().split(' ')[0]} {${this.buttonStyles}}`, padIndex++); | ||
| if (!test.test(this.activeButtonClass)) { | ||
| sheet.insertRule(`.${this.buttonClass.trim().split(' ')[0]}.${this.activeButtonClass.trim().split(' ')[0]} {background-color: #eaeaea;}`, padIndex++); | ||
| } | ||
| } | ||
| } | ||
| } | ||
@@ -236,8 +318,10 @@ | ||
| window.addEventListener('resize', this.resize); | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| if (this.keyRandomize) { | ||
| this.randomize(this.fixDeleteKey); | ||
| if (this.setDefaultStyle !== 'none') { | ||
| document.head.appendChild(this.defaultStyleSheet); | ||
| this.initDefaultStyles(this.defaultStyleSheet.sheet); | ||
| } | ||
| if (this.keyRandomize) this.randomize(); | ||
| this.resize(); | ||
| }, | ||
@@ -345,3 +429,2 @@ | ||
| class: _vm.keypadClass, | ||
| style: _vm.keypadStyles, | ||
| attrs: { | ||
@@ -356,4 +439,3 @@ "id": _vm.id | ||
| }, [_c('div', { | ||
| class: _vm.buttonWrapClass, | ||
| style: _vm.buttonWrapStyles | ||
| class: _vm.buttonWrapClass | ||
| }, _vm._l(_vm.keyArray, function (val, idx) { | ||
@@ -364,4 +446,3 @@ return _c('button', { | ||
| refInFor: true, | ||
| class: _vm.buttonClass + ' ' + (val === -1 ? _vm.deleteButtonClass : val === '' ? _vm.blankButtonClass : ''), | ||
| style: _vm.btnStyle(val), | ||
| class: _vm.setClass(val, idx), | ||
| attrs: { | ||
@@ -372,7 +453,7 @@ "type": "button" | ||
| "click": function ($event) { | ||
| return _vm.click(val); | ||
| return _vm.click(val, idx); | ||
| } | ||
| } | ||
| }, [_vm._v("\n " + _vm._s(_vm.showKey(val)) + "\n ")]); | ||
| }), 0)]); | ||
| }), 0), _vm._v(" "), _vm._t("default")], 2); | ||
| }; | ||
@@ -379,0 +460,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 o,i,r=[],s=!0,a=!1;try{for(n=n.call(t);!(s=(o=n.next()).done)&&(r.push(o.value),!e||r.length!==e);s=!0);}catch(t){a=!0,i=t}finally{try{s||null==n.return||n.return()}finally{if(a)throw i}}return r}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var o=Object.prototype.toString.call(t).slice(8,-1);"Object"===o&&t.constructor&&(o=t.constructor.name);if("Map"===o||"Set"===o)return Array.from(t);if("Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o))return n(t,e)}(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,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}function o(t,e,n,o,i,r,s,a,l,u){"boolean"!=typeof s&&(l=a,a=s,s=!1);const d="function"==typeof n?n.options:n;let h;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,i&&(d.functional=!0)),o&&(d._scopeId=o),r?(h=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(r)},d._ssrRegister=h):e&&(h=s?function(t){e.call(this,u(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),h)if(d.functional){const t=d.render;d.render=function(e,n){return h.call(n),t(e,n)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,h):[h]}return n}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 i=o({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,style:t.keypadStyles,attrs:{id:t.id},on:{click:function(e){t.stopPropagation&&e.stopPropagation()}}},[n("div",{class:t.buttonWrapClass,style:t.buttonWrapStyles},t._l(t.keyArray,(function(e,o){return n("button",{key:o,ref:"button",refInFor:!0,class:t.buttonClass+" "+(-1===e?t.deleteButtonClass:""===e?t.blankButtonClass:""),style:t.btnStyle(e),attrs:{type:"button"},on:{click:function(n){return t.click(e)}}},[t._v("\n "+t._s(t.showKey(e))+"\n ")])})),0)])},staticRenderFns:[]},undefined,{name:"VueNumericKeypad",props:{id:{type:String,required:!1},value:{type:String,default:"",required:!0},show:{type:[Boolean,Number],default:!1,required:!0},options:{type:Object,default:function(){return{}},validator:function(e){if(!e.keyArray)return!0;for(var n=0;n<e.keyArray;n++){var o=e.keyArray[n];switch(t(o)){case"number":if(!Number.isInteger(o)||o<-1||o>9)return console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."),!1;break;case"string":if(o)return console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."),!1;break;default:return!1}}return!0},required:!1}},data:function(){var t=Number(this.options.columns)||3;return{keyArray:void 0===this.options.keyArray?3===t?[1,2,3,4,5,6,7,8,9,"",0,-1]:[1,2,3,4,5,6,7,8,9,0,"",-1]:this.options.keyArray,keyRandomize:void 0===this.options.keyRandomize||Boolean(this.options.keyRandomize),randomizeWhenClick:void 0!==this.options.randomizeWhenClick&&Boolean(this.options.randomizeWhenClick),fixDeleteKey:void 0===this.options.fixDeleteKey||Boolean(this.options.fixDeleteKey),stopPropagation:void 0===this.options.stopPropagation||Boolean(this.options.stopPropagation),keypadClass:void 0===this.options.keypadClass?"numeric-keypad":String(this.options.keypadClass),buttonWrapClass:void 0===this.options.buttonWrapClass?"numeric-keypad__button-wrap":String(this.options.buttonWrapClass),buttonClass:void 0===this.options.buttonClass?"numeric-keypad__button":String(this.options.buttonClass),deleteButtonClass:void 0===this.options.deleteButtonClass?"numeric-keypad__button--delete":String(this.options.deleteButtonClass),blankButtonClass:void 0===this.options.blankButtonClass?"numeric-keypad__button--blank":String(this.options.blankButtonClass),rows:Number(this.options.rows)||4,columns:t,zIndex:Number(this.options.zIndex)||1,cellWidth:0,cellHeight:0}},watch:{show:function(){this.$nextTick(function(){this.show&&(this.cellWidth=this.$refs.button[0].offsetWidth,this.cellHeight=this.$refs.button[0].offsetHeight)}.bind(this)),this.keyRandomize&&this.randomize(this.fixDeleteKey)}},computed:{keypadStyles:function(){var t=.3*Math.min(this.cellWidth,this.cellHeight);return this.options.keypadStyles||{position:"fixed",zIndex:this.zIndex,bottom:0,left:0,right:0,height:"40vh",padding:"10px",backgroundColor:"#fff",borderRadius:"10px 10px 0 0",boxShadow:"0 -4px 4px rgba(0, 0, 0, 0.1)",color:"#000",overflow:"hidden",fontSize:t+"px"}},buttonWrapStyles:function(){return this.options.buttonWrapStyles||{display:"grid",width:"100%",height:"100%",gridTemplateColumns:"repeat(".concat(this.columns,", 1fr)"),gridTemplateRows:"repeat(".concat(this.rows,", 1fr)"),gridGap:"5px"}},buttonStyles:function(){return this.options.buttonStyles||{display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:"#fff",border:"1px solid #000",borderRadius:"5px",fontSize:"inherit"}},deleteButtonStyles:function(){return this.options.deleteButtonStyles||this.options.buttonStyles||this.buttonStyles},blankButtonStyles:function(){return this.options.blankButtonStyles||this.options.buttonStyles||this.buttonStyles}},methods:{click:function(t){var e="";e=-1===t?this.value.slice(0,-1):this.value+t,this.$emit("update:value",String(e)),this.keyRandomize&&this.randomizeWhenClick&&this.randomize(this.fixDeleteKey)},randomize:function(t){for(var e=[],n=0,o=0;o<this.keyArray.length;o++){var i=Math.random();t&&-1==this.keyArray[o]?n++:i<.5?e.push(this.keyArray[o]):e.unshift(this.keyArray[o])}if(n)for(var r=0;r<n;r++)e.push(-1);this.keyArray=e},showKey:function(t){return-1===t?"del":t},btnStyle:function(t){return-1===t?this.deleteButtonStyles:"number"==typeof t?this.buttonStyles:this.blankButtonStyles},resize:function(){this.cellWidth=this.$refs.button[0].offsetWidth,this.cellHeight=this.$refs.button[0].offsetHeight}},mounted:function(){window.addEventListener("resize",this.resize),this.cellWidth=this.$refs.button[0].offsetWidth,this.cellHeight=this.$refs.button[0].offsetHeight,this.keyRandomize&&this.randomize(this.fixDeleteKey)},beforeDestroy:function(){window.removeEventListener("resize",this.resize)}},undefined,false,undefined,!1,void 0,void 0,void 0),r=function(){var t=i;return t.install=function(e){e.component("VueNumericKeypad",t)},t}(),s=Object.freeze({__proto__:null,default:r});return Object.entries(s).forEach((function(t){var n=e(t,2),o=n[0],i=n[1];"default"!==o&&(r[o]=i)})),r}(); | ||
| 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}function s(t,e,n,o,i,s,r,a,u,l){"boolean"!=typeof r&&(u=a,a=r,r=!1);const c="function"==typeof n?n.options:n;let h;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,i&&(c.functional=!0)),o&&(c._scopeId=o),s?(h=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=h):e&&(h=r?function(t){e.call(this,l(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),h)if(c.functional){const t=c.render;c.render=function(e,n){return h.call(n),t(e,n)}}else{const t=c.beforeCreate;c.beforeCreate=t?[].concat(t,h):[h]}return n}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 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,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,e,n,o=this,i=Number(this.options.columns)||3;return{encryptedChar:"string"==typeof this.options.encryptedChar?this.options.encryptedChar.substring(0,1):"0",onEncrypt:Boolean(this.options.onEncrypt),keyArray:this.options.keyArray||(3===i?[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:i,zIndex:Number(this.options.zIndex)||1,cellWidth:0,cellHeight:0,defaultStyleSheet:document.createElement("style"),setDefaultStyle:["all","button","wrap","none"].find((function(t){return t===o.options.setDefaultStyle}))||"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 o=this.keyArray.length,i=Math.floor(Math.random()*(o-1)+e+1)%o;this.activeButton(i)}var s="",r=n(this.encryptedValue);this.onEncrypt?-1===t?(s=this.value.slice(0,-1),r.pop()):""!==t&&(s=this.value+this.encryptedChar,r.push(this.encryptFunc(t.toString()))):s=-1===t?this.value.slice(0,-1):this.value+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){var e=/[^0-9A-z\-_ ]/,n=0;"button"!==this.setDefaultStyle&&(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.setDefaultStyle&&(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.setDefaultStyle&&(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),o=n[0],i=n[1];"default"!==o&&(a[o]=i)})),a}(); |
@@ -21,2 +21,10 @@ 'use strict';function _typeof(obj) { | ||
| function _toConsumableArray(arr) { | ||
| return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); | ||
| } | ||
| function _arrayWithoutHoles(arr) { | ||
| if (Array.isArray(arr)) return _arrayLikeToArray(arr); | ||
| } | ||
| function _arrayWithHoles(arr) { | ||
@@ -26,2 +34,6 @@ if (Array.isArray(arr)) return arr; | ||
| function _iterableToArray(iter) { | ||
| if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); | ||
| } | ||
| function _iterableToArrayLimit(arr, i) { | ||
@@ -74,2 +86,6 @@ var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; | ||
| function _nonIterableSpread() { | ||
| 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 _nonIterableRest() { | ||
@@ -126,2 +142,14 @@ throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
| }, | ||
| encryptFunc: { | ||
| type: Function, | ||
| default: function _default(c) { | ||
| return c; | ||
| } | ||
| }, | ||
| encryptedValue: { | ||
| type: Array, | ||
| default: function _default() { | ||
| return []; | ||
| } | ||
| }, | ||
| options: { | ||
@@ -133,29 +161,29 @@ type: Object, | ||
| validator: function validator(value) { | ||
| if (!value.keyArray) return true; | ||
| for (var i = 0; i < value.keyArray; i++) { | ||
| var key = value.keyArray[i]; | ||
| var keyArrayDisable = (value.keyArray || []).some(function (key) { | ||
| switch (_typeof(key)) { | ||
| case 'number': | ||
| if (!Number.isInteger(key) || key < -1 || key > 9) { | ||
| console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."); | ||
| return false; | ||
| } | ||
| return !Number.isInteger(key) || key < -1 || key > 9; | ||
| break; | ||
| case 'string': | ||
| if (key) { | ||
| console.error("keyArray can only have an integer 'number' between -1 and 9 and an empty 'string' type."); | ||
| return false; | ||
| } | ||
| return key; | ||
| break; | ||
| default: | ||
| return false; | ||
| } | ||
| }); | ||
| if (keyArrayDisable) { | ||
| console.error("KeyArray can contain only an integer 'number' between -1 and 9 and an empty 'string'."); | ||
| return false; | ||
| } | ||
| var classDisable = Object.keys(value).some(function (key) { | ||
| return /Class/.test(key) && /[^0-9A-z\-_ ]/.test(value[key]); | ||
| }); | ||
| if (classDisable) { | ||
| console.error("Class name can contain only 'a-z' and 'A-Z', '0-9', '_', '-', ' '."); | ||
| return false; | ||
| } | ||
| return true; | ||
@@ -167,14 +195,27 @@ }, | ||
| data: function data() { | ||
| var _this$options$keyRand, | ||
| _this$options$fixDele, | ||
| _this$options$stopPro, | ||
| _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 { | ||
| keyArray: this.options.keyArray === undefined ? columns === 3 ? [1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1] : this.options.keyArray, | ||
| keyRandomize: this.options.keyRandomize === undefined ? true : Boolean(this.options.keyRandomize), | ||
| randomizeWhenClick: this.options.randomizeWhenClick === undefined ? false : Boolean(this.options.randomizeWhenClick), | ||
| fixDeleteKey: this.options.fixDeleteKey === undefined ? true : Boolean(this.options.fixDeleteKey), | ||
| stopPropagation: this.options.stopPropagation === undefined ? true : Boolean(this.options.stopPropagation), | ||
| keypadClass: this.options.keypadClass === undefined ? 'numeric-keypad' : String(this.options.keypadClass), | ||
| buttonWrapClass: this.options.buttonWrapClass === undefined ? 'numeric-keypad__button-wrap' : String(this.options.buttonWrapClass), | ||
| buttonClass: this.options.buttonClass === undefined ? 'numeric-keypad__button' : String(this.options.buttonClass), | ||
| deleteButtonClass: this.options.deleteButtonClass === undefined ? 'numeric-keypad__button--delete' : String(this.options.deleteButtonClass), | ||
| blankButtonClass: this.options.blankButtonClass === undefined ? 'numeric-keypad__button--blank' : String(this.options.blankButtonClass), | ||
| encryptedChar: typeof this.options.encryptedChar === 'string' ? this.options.encryptedChar.substring(0, 1) : "0", | ||
| onEncrypt: Boolean(this.options.onEncrypt), | ||
| 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), | ||
| 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), | ||
| 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, | ||
@@ -184,3 +225,8 @@ columns: columns, | ||
| cellWidth: 0, | ||
| cellHeight: 0 | ||
| cellHeight: 0, | ||
| defaultStyleSheet: document.createElement('style'), | ||
| setDefaultStyle: ['all', 'button', 'wrap', 'none'].find(function (s) { | ||
| return s === _this.options.setDefaultStyle; | ||
| }) || 'all', | ||
| keypadStylesIndex: null | ||
| }; | ||
@@ -191,11 +237,5 @@ }, | ||
| this.$nextTick(function () { | ||
| if (this.show) { | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| } | ||
| }.bind(this)); | ||
| if (this.keyRandomize) { | ||
| this.randomize(this.fixDeleteKey); | ||
| } | ||
| if (this.show) this.resize(); | ||
| }); | ||
| if (this.keyRandomize) this.randomize(); | ||
| } | ||
@@ -205,64 +245,49 @@ }, | ||
| keypadStyles: function keypadStyles() { | ||
| var fontSize = Math.min(this.cellWidth, this.cellHeight) * 0.3; | ||
| return this.options.keypadStyles || { | ||
| position: 'fixed', | ||
| zIndex: this.zIndex, | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| height: '40vh', | ||
| padding: '10px', | ||
| backgroundColor: '#fff', | ||
| borderRadius: '10px 10px 0 0', | ||
| boxShadow: '0 -4px 4px rgba(0, 0, 0, 0.1)', | ||
| color: '#000', | ||
| overflow: 'hidden', | ||
| fontSize: fontSize + 'px' | ||
| }; | ||
| 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 "); | ||
| }, | ||
| buttonWrapStyles: function buttonWrapStyles() { | ||
| return this.options.buttonWrapStyles || { | ||
| display: 'grid', | ||
| width: '100%', | ||
| height: '100%', | ||
| gridTemplateColumns: "repeat(".concat(this.columns, ", 1fr)"), | ||
| gridTemplateRows: "repeat(".concat(this.rows, ", 1fr)"), | ||
| gridGap: '5px' | ||
| }; | ||
| 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 buttonStyles() { | ||
| return this.options.buttonStyles || { | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: '#fff', | ||
| border: '1px solid #000', | ||
| borderRadius: '5px', | ||
| fontSize: 'inherit' | ||
| }; | ||
| }, | ||
| deleteButtonStyles: function deleteButtonStyles() { | ||
| return this.options.deleteButtonStyles || this.options.buttonStyles || this.buttonStyles; | ||
| }, | ||
| blankButtonStyles: function blankButtonStyles() { | ||
| return this.options.blankButtonStyles || this.options.buttonStyles || this.buttonStyles; | ||
| var width = "calc(".concat(Math.round(1000 / this.columns) / 10, "% - ").concat(Math.ceil(5 * (this.columns - 1) / this.columns), "px)"); | ||
| var height = "calc(".concat(Math.round(1000 / 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(width, ";\n height: ").concat(height, ";\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 click(key) { | ||
| 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); | ||
| } | ||
| var newVal = ""; | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| var encryptedValue = _toConsumableArray(this.encryptedValue); | ||
| if (this.onEncrypt) { | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| encryptedValue.pop(); | ||
| } else if (key !== '') { | ||
| newVal = this.value + this.encryptedChar; | ||
| encryptedValue.push(this.encryptFunc(key.toString())); | ||
| } | ||
| } else { | ||
| newVal = this.value + key; | ||
| if (key === -1) { | ||
| newVal = this.value.slice(0, -1); | ||
| } else { | ||
| newVal = this.value + key; | ||
| } | ||
| } | ||
| this.$emit("update:value", String(newVal)); | ||
| if (this.keyRandomize && this.randomizeWhenClick) { | ||
| this.randomize(this.fixDeleteKey); | ||
| } | ||
| this.$emit("update:encryptedValue", encryptedValue); | ||
| if (this.keyRandomize && this.randomizeWhenClick) this.randomize(); | ||
| }, | ||
| randomize: function randomize(fixDeleteKey) { | ||
| randomize: function randomize() { | ||
| var newkeyArray = []; | ||
@@ -274,3 +299,3 @@ var delKeyCnt = 0; | ||
| if (fixDeleteKey && this.keyArray[i] == -1) { | ||
| if (this.fixDeleteKey && this.keyArray[i] == -1) { | ||
| delKeyCnt++; | ||
@@ -295,12 +320,69 @@ continue; | ||
| }, | ||
| btnStyle: function btnStyle(key) { | ||
| if (key === -1) { | ||
| return this.deleteButtonStyles; | ||
| } else if (typeof key === 'number') { | ||
| return this.buttonStyles; | ||
| } else return this.blankButtonStyles; | ||
| }, | ||
| resize: function resize() { | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| var sheet = this.defaultStyleSheet.sheet; | ||
| if (sheet && this.keypadStylesIndex !== null) { | ||
| sheet.deleteRule(0); | ||
| sheet.insertRule(".".concat(this.keypadClass.trim().split(' ')[0], " {").concat(this.keypadStyles, "}"), 0); | ||
| } | ||
| }, | ||
| setClass: function setClass(key, idx) { | ||
| var classArr = [this.buttonClass]; | ||
| if (key === -1) { | ||
| classArr.push(this.deleteButtonClass); | ||
| } | ||
| if (key === '') { | ||
| classArr.push(this.blankButtonClass); | ||
| } | ||
| if (this.activeButtonIndexes[idx]) { | ||
| classArr.push(this.activeButtonClass); | ||
| } | ||
| return classArr; | ||
| }, | ||
| activeButton: function activeButton(idx) { | ||
| var _this2 = this; | ||
| if (this.activeButtonIndexes[idx]) { | ||
| clearTimeout(this.activeButtonIndexes[idx]); | ||
| } else { | ||
| this.$refs.button[idx].classList.add(this.activeButtonClass); | ||
| } | ||
| this.activeButtonIndexes[idx] = setTimeout(function () { | ||
| _this2.$refs.button[idx].classList.remove(_this2.activeButtonClass); | ||
| clearTimeout(_this2.activeButtonIndexes[idx]); | ||
| delete _this2.activeButtonIndexes[idx]; | ||
| }, this.activeButtonDelay); | ||
| }, | ||
| initDefaultStyles: function initDefaultStyles(sheet) { | ||
| var test = /[^0-9A-z\-_ ]/; | ||
| var padIndex = 0; | ||
| if (this.setDefaultStyle !== 'button') { | ||
| if (!test.test(this.keypadClass)) { | ||
| this.keypadStylesIndex = padIndex; | ||
| sheet.insertRule(".".concat(this.keypadClass.trim().split(' ')[0], " {").concat(this.keypadStyles, "}"), padIndex++); | ||
| } | ||
| if (!test.test(this.buttonWrapClass)) { | ||
| sheet.insertRule(".".concat(this.buttonWrapClass.trim().split(' ')[0], " {").concat(this.buttonWrapStyles, "}"), padIndex++); | ||
| } | ||
| } | ||
| if (this.setDefaultStyle !== 'wrap') { | ||
| if (!test.test(this.buttonClass)) { | ||
| sheet.insertRule(".".concat(this.buttonClass.trim().split(' ')[0], " {").concat(this.buttonStyles, "}"), padIndex++); | ||
| if (!test.test(this.activeButtonClass)) { | ||
| sheet.insertRule(".".concat(this.buttonClass.trim().split(' ')[0], ".").concat(this.activeButtonClass.trim().split(' ')[0], " {background-color: #eaeaea;}"), padIndex++); | ||
| } | ||
| } | ||
| } | ||
| } | ||
@@ -310,8 +392,10 @@ }, | ||
| window.addEventListener('resize', this.resize); | ||
| this.cellWidth = this.$refs.button[0].offsetWidth; | ||
| this.cellHeight = this.$refs.button[0].offsetHeight; | ||
| if (this.keyRandomize) { | ||
| this.randomize(this.fixDeleteKey); | ||
| if (this.setDefaultStyle !== 'none') { | ||
| document.head.appendChild(this.defaultStyleSheet); | ||
| this.initDefaultStyles(this.defaultStyleSheet.sheet); | ||
| } | ||
| if (this.keyRandomize) this.randomize(); | ||
| this.resize(); | ||
| }, | ||
@@ -413,3 +497,2 @@ beforeDestroy: function beforeDestroy() { | ||
| class: _vm.keypadClass, | ||
| style: _vm.keypadStyles, | ||
| attrs: { | ||
@@ -423,5 +506,5 @@ "id": _vm.id | ||
| } | ||
| }, [_vm._ssrNode("<div" + _vm._ssrClass(null, _vm.buttonWrapClass) + _vm._ssrStyle(null, _vm.buttonWrapStyles, null) + ">" + _vm._ssrList(_vm.keyArray, function (val, idx) { | ||
| return "<button type=\"button\"" + _vm._ssrClass(null, _vm.buttonClass + ' ' + (val === -1 ? _vm.deleteButtonClass : val === '' ? _vm.blankButtonClass : '')) + _vm._ssrStyle(null, _vm.btnStyle(val), null) + ">" + _vm._ssrEscape("\n " + _vm._s(_vm.showKey(val)) + "\n ") + "</button>"; | ||
| }) + "</div>")]); | ||
| }, [_vm._ssrNode("<div" + _vm._ssrClass(null, _vm.buttonWrapClass) + ">" + _vm._ssrList(_vm.keyArray, function (val, idx) { | ||
| return "<button type=\"button\"" + _vm._ssrClass(null, _vm.setClass(val, idx)) + ">" + _vm._ssrEscape("\n " + _vm._s(_vm.showKey(val)) + "\n ") + "</button>"; | ||
| }) + "</div> "), _vm._t("default")], 2); | ||
| }; | ||
@@ -438,3 +521,3 @@ | ||
| var __vue_module_identifier__ = "data-v-6e789d66"; | ||
| var __vue_module_identifier__ = "data-v-ba42e108"; | ||
| /* functional template */ | ||
@@ -441,0 +524,0 @@ |
| { | ||
| "name": "vue-numeric-keypad", | ||
| "version": "1.1.2", | ||
| "version": "1.2.0", | ||
| "description": "The virtual numeric keypad that can be used on Vue.", | ||
@@ -5,0 +5,0 @@ "main": "dist/vue-numeric-keypad.ssr.js", |
139
README.md
@@ -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.0.1/dist/vue-numeric-keypad.min.js"></script> | ||
| <script src="https://cdn.jsdelivr.net/npm/vue-numeric-keypad@1.2.0/dist/vue-numeric-keypad.min.js"></script> | ||
| <script> | ||
@@ -83,3 +83,3 @@ Vue.use(VueNumericKeypad); | ||
| The props have to deliver changing values or objects, so bind them with `v-bind:` or `:`. | ||
| In addition, `value` and `show` require two-way binding, so add the `.sync` modifier. | ||
| In addition, `value` and `show`, `encryptedValue` require two-way binding, so add the `.sync` modifier. | ||
| ### props | ||
@@ -90,3 +90,5 @@ |property|Description|Required|type| | ||
| |`:value.sync`|The value to change when entering the keypad.|True|String variable| | ||
| |`:show.sync`|Bind to the v-show on the keypad. And adjust the font size and randomize the key arrangement.|True|Boolean or Number variable| | ||
| |`:encryptedValue.sync` \| `:encrypted-value.sync`|Array in which encrypted values will be entered<br>when `options.onEncrypt: true`.|False|Array variable| | ||
| |`:show.sync`|Bind to the v-show on the keypad. And adjust the font size and randomize the key arrangement.|True|(Boolean \| Number) variable| | ||
| |`:encryptFunc` \| `:encrypt-func`|A function that encrypts the input<br>when `options.onEncrypt: true`.|False|Function| | ||
| |`:options`|Set several values.<br>(details can be found below)|False|Object| | ||
@@ -96,58 +98,88 @@ ### options | ||
| |-|-|-|-| | ||
| |`keyRandomize`|If the value is true, randomize the key array whenever the `show` prop changes.|Boolean|True| | ||
| |`randomizeWhenClick`|If the value is true and `keyRandomize` is true, randomize the key array whenever you press the key.|Boolean|False| | ||
| |`fixDeleteKey`|If the value is true, the delete key is fixed at the end when the key array is randomized.|Boolean|True| | ||
| |`keypadStyles`|Set the style of the keypad.|Object<br>(Style Object)|Check below.| | ||
| |`buttonWrapStyles`|Set the style of wrapping the button.|Object<br>(Style Object)|Check below.| | ||
| |`buttonStyles`|Set the style of the button.|Object<br>(Style Object)|Check below.| | ||
| |`deleteButtonStyles`|Set the style of the delete button.|Object<br>(Style Object)|`buttonStyles`| | ||
| |`blankButtonStyles`|Set the style of the blank button.|Object<br>(Style Object)|`buttonStyles`| | ||
| |`keyRandomize`|Randomize the key array whenever the `show` prop changes.|Boolean|true| | ||
| |`randomizeWhenClick`|If the value is true and `keyRandomize` is true, randomize the key array whenever you press the key.|Boolean|false| | ||
| |`fixDeleteKey`|The delete key is fixed at the end when the key array is randomized.|Boolean|true| | ||
| |`zIndex`|Sets the z-index value.<br>Valid when `keypadStyles` is the default.|Number|1| | ||
| |`rows`|Sets the number of rows in the key array.<br>Valid when `buttonWrapStyles` is the default.|Number|4| | ||
| |`columns`|Sets the number of columns in the key array.<br>Valid when `buttonWrapStyles` is the default.| | ||
| |`keyArray`|`keyArray` can only have an integer 'number' between -1 and 9 and an empty 'string' type.<br>-1 means the delete key|Array|`columns` === 3 ?<br>[1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1] :<br>[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]|Number|3| | ||
| #### styles defaults | ||
| |`columns`|Sets the number of columns in the key array.<br>Valid when `buttonWrapStyles` is the default.|Number|3| | ||
| |`keyArray`|Can only have an integer 'number' between -1 and 9 and an empty 'string' type.<br>-1 means the delete key|Array|`columns` === 3 ?<br>[1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1] :<br>[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]| | ||
| |`onEncrypt`|Using encryption|Boolean|false| | ||
| |`encryptedChar`|Will be placed in `:value.sync` of the original value.<br>For strings of length greater than 1, only the first character is valid.|String|'0'| | ||
| |`activeButtonDelay`|The time when `activeButtonClass` is maintained (ms)|Number|300| | ||
| |`pseudoClick`|Clicking a button triggers a pseudo click on another button|Boolean|false| | ||
| |`setDefaultStyle`|'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'| | ||
| |`stopPropagation`|Prevents the propagation of events that turn off `:show.sync`.|Boolean|true| | ||
| > #### class option | ||
| > The class option must meet the following conditions: | ||
| > - Only 'a-z' and 'A-Z', '0-9', '_', '-', ' ' can be contained | ||
| > - Use ' ' to separate classes. | ||
| > - The default style applies to the first class. | ||
| > | ||
| > |property|default| | ||
| > |-|-| | ||
| > |`keypadClass`|'numeric-keypad'| | ||
| > |`buttonWrapClass`|'numeric-keypad__button-wrap'| | ||
| > |`buttonClass`|'numeric-keypad__button'| | ||
| > |`deleteButtonClass`|'numeric-keypad__button--delete'| | ||
| > |`blankButtonClass`|'numeric-keypad__button--blank'| | ||
| > |`activeButtonClass`|'numeric-keypad__button--active'| | ||
| ### styles defaults | ||
| `keypadStyles` : | ||
| ```js | ||
| const fontSize = Math.min(this.cellWidth, this.cellHeight) * 0.3; | ||
| { | ||
| position: 'fixed', | ||
| bottom: 0, | ||
| left: 0, | ||
| right: 0, | ||
| height: '40vh', | ||
| padding: '10px', | ||
| backgroundColor: '#fff', | ||
| borderRadius: '10px 10px 0 0', | ||
| boxShadow: '0 -4px 4px rgba(0, 0, 0, 0.1)', | ||
| color: '#000', | ||
| overflow: 'hidden', | ||
| fontSize: fontSize + 'px' | ||
| ```css | ||
| // The font size changes automatically when the button size changes. | ||
| // fontSize = Math.min(cellWidth, cellHeight) * 0.3; | ||
| .${keypadClass} { | ||
| position: fixed; | ||
| z-index: ${zIndex}; | ||
| bottom: 0; | ||
| left: 0; | ||
| right: 0; | ||
| height: 40vh; | ||
| padding: 10px; | ||
| background-color: #fff; | ||
| border-radius: 12px 12px 0 0; | ||
| box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15); | ||
| color: #000; | ||
| overflow: hidden; | ||
| font-size: ${fontSize}px; | ||
| } | ||
| ``` | ||
| `buttonWrapStyles` : | ||
| ```js | ||
| // columns = button columns | ||
| // rows = button rows | ||
| { | ||
| display: 'grid', | ||
| width: '100%', | ||
| height: '100%', | ||
| gridTemplateColumns: `repeat(${columns}, 1fr)`, | ||
| gridTemplateRows: `repeat(${rows}, 1fr)`, | ||
| gridGap: '5px' | ||
| ```css | ||
| .${buttonWrapClass} { | ||
| display: flex; | ||
| witdth: 100%; | ||
| height: 100%; | ||
| justify-content: space-between; | ||
| align-content: space-between; | ||
| flex-wrap: wrap; | ||
| gridGap: 5px; | ||
| } | ||
| ``` | ||
| `buttonStyles` : | ||
| ```js | ||
| { | ||
| display: 'flex', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| backgroundColor: '#fff', | ||
| border: '1px solid #000', | ||
| borderRadius: '5px', | ||
| fontSize: 'inherit' | ||
| ```css | ||
| // const width = `calc(${Math.round(1000 / columns) / 10}% - ${Math.ceil(5 * (columns - 1) / columns)}px)`; | ||
| // const height = `calc(${Math.round(1000 / rows) / 10}% - ${Math.ceil(5 * (rows - 1) / rows)}px)`; | ||
| .${buttonClass} { | ||
| flex: 0 0 auto; | ||
| display: flex; | ||
| width: ${width}; | ||
| height: ${height}; | ||
| justify-content: center; | ||
| align-items: center; | ||
| background-color: #fff; | ||
| border: 1px solid #000; | ||
| border-radius: 8px; | ||
| font-size: inherit; | ||
| } | ||
| ``` | ||
| `activeButtonStyles` : | ||
| ```css | ||
| // Specificity (0, 2, 0) | ||
| .${buttonClass}.${activeButtonClass} { | ||
| background-color: #eaeaea; | ||
| } | ||
| ``` | ||
@@ -159,4 +191,13 @@ ## Tip | ||
| - You don't have to always bind the visible value. | ||
| - If you want to customize a style using css, initialize the style by putting an empty object in the style-related option. | ||
| - If you match the total length of the optional `keyArray` with the total length of the keypad, the design will not break. | ||
| - You can use `Slot` | ||
| ```html | ||
| <VueNumericKeypad | ||
| :value.sync="value" | ||
| :show.sync="show" | ||
| :options="options" | ||
| > | ||
| <div>Something you want</div> | ||
| </VueNumericKeypad> | ||
| ``` | ||
@@ -163,0 +204,0 @@ ## License |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by25.91%
62358
- Lines of code
- increased by17.44%
909
- Number of lines in readme file
- increased by24.85%
206
No dependency changes