index.js

"use strict";var script={name:"VerificationCodeInput",props:{maxLength:{default:6},type:{default:"tel",type:String},wrong:{type:Boolean,default:!1},itemClass:{type:String,default:"verification-code__item-class"},itemWrongClass:{type:String,default:"wrong"},itemActiveClass:{type:String,default:"active"},itemMargin:{type:String,default:"10px 0"}},data:function(){return{code:"",lock:!1,itemList:new Array(Number(this.maxLength))}},watch:{code:function(e,n){if(e.length===Number(this.maxLength)&&this.endCallback(),e.length>n.length){this.lock=!1;for(var t=e.split(""),i=0;i<t.length;i++)this.itemList[i]=t[i]}else""===e&&1!==n.length||this.lock||(this.lock=!0,this.itemList=new Array(Number(this.maxLength)),this.code="",this.deleteCallback(n))}},methods:{deleteCallback:function(e){this.$emit("deleteEvent",e)},triggerInput:function(){this.$refs.codeInput.focus()},endCallback:function(){this.$emit("finishEvent",this.code)}}};function normalizeComponent(e,n,t,i,o,a,r,s,c,l){"boolean"!=typeof r&&(c=s,s=r,r=!1);var d,A="function"==typeof t?t.options:t;if(e&&e.render&&(A.render=e.render,A.staticRenderFns=e.staticRenderFns,A._compiled=!0,o&&(A.functional=!0)),i&&(A._scopeId=i),a?(d=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},A._ssrRegister=d):n&&(d=r?function(e){n.call(this,l(e,this.$root.$options.shadowRoot))}:function(e){n.call(this,s(e))}),d)if(A.functional){var _=A.render;A.render=function(e,n){return d.call(n),_(e,n)}}else{var f=A.beforeCreate;A.beforeCreate=f?[].concat(f,d):[d]}return t}var HEAD,isOldIE="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());function createInjector(e){return function(e,n){return addStyle(e,n)}}var styles={};function addStyle(e,n){var t=isOldIE?n.media||"default":e,i=styles[t]||(styles[t]={ids:new Set,styles:[]});if(!i.ids.has(e)){i.ids.add(e);var o=n.source;if(n.map&&(o+="\n/*# sourceURL="+n.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",n.media&&i.element.setAttribute("media",n.media),void 0===HEAD&&(HEAD=document.head||document.getElementsByTagName("head")[0]),HEAD.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var a=i.ids.size-1,r=document.createTextNode(o),s=i.element.childNodes;s[a]&&i.element.removeChild(s[a]),s.length?i.element.insertBefore(r,s[a]):i.element.appendChild(r)}}}var __vue_script__=script,__vue_render__=function(){var a=this,e=a.$createElement,t=a._self._c||e;return t("div",{staticClass:"verification-code"},["checkbox"===a.type?t("input",{directives:[{name:"model",rawName:"v-model",value:a.code,expression:"code"}],ref:"codeInput",staticClass:"verification-code__input",attrs:{maxlength:a.maxLength,onselectstart:"return false;",type:"checkbox"},domProps:{checked:Array.isArray(a.code)?-1<a._i(a.code,null):a.code},on:{change:function(e){var n=a.code,t=e.target,i=!!t.checked;if(Array.isArray(n)){var o=a._i(n,null);t.checked?o<0&&(a.code=n.concat([null])):-1<o&&(a.code=n.slice(0,o).concat(n.slice(o+1)))}else a.code=i}}}):"radio"===a.type?t("input",{directives:[{name:"model",rawName:"v-model",value:a.code,expression:"code"}],ref:"codeInput",staticClass:"verification-code__input",attrs:{maxlength:a.maxLength,onselectstart:"return false;",type:"radio"},domProps:{checked:a._q(a.code,null)},on:{change:function(){a.code=null}}}):t("input",{directives:[{name:"model",rawName:"v-model",value:a.code,expression:"code"}],ref:"codeInput",staticClass:"verification-code__input",attrs:{maxlength:a.maxLength,onselectstart:"return false;",type:a.type},domProps:{value:a.code},on:{input:function(e){e.target.composing||(a.code=e.target.value)}}}),a._v(" "),t("table",{staticClass:"verification-code__box",style:{borderSpacing:a.itemMargin},on:{click:a.triggerInput}},[t("tr",a._l(a.itemList,function(e,n){return t("td",{key:n,class:["verification-code__item",a.itemClass,a.wrong?a.itemWrongClass:"",e?a.itemActiveClass:""]},[a._v("\n        "+a._s(e)+"\n      ")])}),0)])])},__vue_staticRenderFns__=[],__vue_inject_styles__=function(e){e&&e("data-v-f5c9e43a_0",{source:"\n.verification-code[data-v-f5c9e43a] {\n  text-align: center;\n  position: relative;\n}\n.verification-code__box[data-v-f5c9e43a] {\n  margin: 0 auto;\n  position: relative;\n  background: #ffffff;\n}\n.verification-code__input[data-v-f5c9e43a] {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 0;\n  opacity: 0;\n  outline: none;\n  border: 0;\n}\n.verification-code__item[data-v-f5c9e43a] {\n  text-align: center;\n  vertical-align: middle;\n}\n.verification-code__item-class[data-v-f5c9e43a] {\n  height: 50px;\n  width: 40px;\n  border: 1px solid #f8f8f8;\n  background: #f8f8f8;\n  border-radius: 5px;\n  font-size: 22px;\n  color: #333333;\n}\n.verification-code__item.active[data-v-f5c9e43a] {\n  border: 1px solid #14B9C8;\n}\n.verification-code__item.wrong[data-v-f5c9e43a] {\n  border: 1px solid #F25A5A;\n}\n",map:{version:3,sources:["/Users/yasinchan/Code/project/vue-verification-input/src/VerificationCodeInput.vue"],names:[],mappings:";AA+FA;EACA,kBAAA;EACA,kBAAA;AACA;AACA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA;AACA;AAEA;EACA,kBAAA;EACA,OAAA;EACA,MAAA;EACA,SAAA;EACA,UAAA;EACA,aAAA;EACA,SAAA;AACA;AAEA;EACA,kBAAA;EACA,sBAAA;AACA;AACA;EACA,YAAA;EACA,WAAA;EACA,yBAAA;EACA,mBAAA;EACA,kBAAA;EACA,eAAA;EACA,cAAA;AACA;AACA;EACA,yBAAA;AACA;AACA;EACA,yBAAA;AACA",file:"VerificationCodeInput.vue",sourcesContent:["<template>\n  <div class=\"verification-code\">\n    <input\n        :maxlength=\"maxLength\"\n        ref=\"codeInput\"\n        v-model=\"code\"\n        class=\"verification-code__input\"\n        :type=\"type\"\n        onselectstart=\"return false;\"\n    />\n    <table class=\"verification-code__box\" :style=\"{ borderSpacing: itemMargin }\" @click=\"triggerInput\">\n      <tr>\n        <td\n            v-for=\"(item, index) in itemList\"\n            :key=\"index\"\n            :class=\"['verification-code__item', itemClass, wrong ? itemWrongClass : '', item ? itemActiveClass : '']\"\n        >\n          {{ item }}\n        </td>\n      </tr>\n    </table>\n  </div>\n</template>\n<script>\n  export default {\n    name: 'VerificationCodeInput',\n    props: {\n      maxLength: {\n        default: 6\n      },\n      type: {\n        default: 'tel',\n        type: String\n      },\n      wrong: {\n        type: Boolean,\n        default: false\n      },\n      itemClass: {\n        type: String,\n        default: 'verification-code__item-class'\n      },\n      itemWrongClass: {\n        type: String,\n        default: 'wrong'\n      },\n      itemActiveClass: {\n        type: String,\n        default: 'active'\n      },\n      itemMargin: {\n        type: String,\n        default: '10px 0'\n      }\n    },\n    data() {\n      return {\n        code: '',\n        lock: false,\n        itemList: new Array(Number(this.maxLength))\n      }\n    },\n    watch: {\n      code(newVal, oldVal) {\n        if (newVal.length === Number(this.maxLength)) {\n          this.endCallback()\n        }\n        if (newVal.length > oldVal.length) {\n          this.lock = false\n          const valArr = newVal.split('')\n          for (let i = 0; i < valArr.length; i++) {\n            this.itemList[i] = valArr[i]\n          }\n        } else if ((newVal !== '' || oldVal.length === 1) && !this.lock) {\n          this.lock = true\n          this.itemList = new Array(Number(this.maxLength))\n          this.code = ''\n          this.deleteCallback(oldVal)\n        }\n      }\n    },\n    methods: {\n      deleteCallback(val) {\n        this.$emit('deleteEvent', val)\n      },\n      triggerInput() {\n        this.$refs.codeInput.focus()\n      },\n      endCallback() {\n        this.$emit('finishEvent', this.code)\n      }\n    }\n  }\n<\/script>\n<style scoped>\n  .verification-code {\n    text-align: center;\n    position: relative;\n  }\n  .verification-code__box {\n    margin: 0 auto;\n    position: relative;\n    background: #ffffff;\n  }\n\n  .verification-code__input {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 0;\n    opacity: 0;\n    outline: none;\n    border: 0;\n  }\n\n  .verification-code__item {\n    text-align: center;\n    vertical-align: middle;\n  }\n  .verification-code__item-class {\n    height: 50px;\n    width: 40px;\n    border: 1px solid #f8f8f8;\n    background: #f8f8f8;\n    border-radius: 5px;\n    font-size: 22px;\n    color: #333333;\n  }\n  .verification-code__item.active {\n    border: 1px solid #14B9C8;\n  }\n  .verification-code__item.wrong {\n    border: 1px solid #F25A5A;\n  }\n</style>\n"]},media:void 0})},__vue_scope_id__="data-v-f5c9e43a",__vue_module_identifier__=void 0,__vue_is_functional_template__=!(__vue_render__._withStripped=!0),__vue_component__=normalizeComponent({render:__vue_render__,staticRenderFns:__vue_staticRenderFns__},__vue_inject_styles__,__vue_script__,__vue_scope_id__,__vue_is_functional_template__,__vue_module_identifier__,!1,createInjector,void 0,void 0);"undefined"!=typeof window&&window.Vue&&Vue.component("VerificationCodeInput",__vue_component__),module.exports=__vue_component__;