@weslink/vue-pincode
Version:
Neumorphism styled pincode input field for Vue.js
2 lines • 5.51 kB
JavaScript
(function(n){function e(e){for(var c,r,s=e[0],u=e[1],a=e[2],d=0,l=[];d<s.length;d++)r=s[d],Object.prototype.hasOwnProperty.call(i,r)&&i[r]&&l.push(i[r][0]),i[r]=0;for(c in u)Object.prototype.hasOwnProperty.call(u,c)&&(n[c]=u[c]);p&&p(e);while(l.length)l.shift()();return o.push.apply(o,a||[]),t()}function t(){for(var n,e=0;e<o.length;e++){for(var t=o[e],c=!0,s=1;s<t.length;s++){var u=t[s];0!==i[u]&&(c=!1)}c&&(o.splice(e--,1),n=r(r.s=t[0]))}return n}var c={},i={app:0},o=[];function r(e){if(c[e])return c[e].exports;var t=c[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}r.m=n,r.c=c,r.d=function(n,e,t){r.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:t})},r.r=function(n){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},r.t=function(n,e){if(1&e&&(n=r(n)),8&e)return n;if(4&e&&"object"===typeof n&&n&&n.__esModule)return n;var t=Object.create(null);if(r.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var c in n)r.d(t,c,function(e){return n[e]}.bind(null,c));return t},r.n=function(n){var e=n&&n.__esModule?function(){return n["default"]}:function(){return n};return r.d(e,"a",e),e},r.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},r.p="";var s=window["webpackJsonp"]=window["webpackJsonp"]||[],u=s.push.bind(s);s.push=e,s=s.slice();for(var a=0;a<s.length;a++)e(s[a]);var p=u;o.push([0,"chunk-vendors"]),t()})({0:function(n,e,t){n.exports=t("56d7")},"2bc1":function(n,e,t){"use strict";var c=t("435a"),i=t.n(c);i.a},"435a":function(n,e,t){},"56d7":function(n,e,t){"use strict";t.r(e);t("e260"),t("e6cf"),t("cca6"),t("a79d");var c=t("2b0e"),i=function(){var n=this,e=n.$createElement,c=n._self._c||e;return c("div",{attrs:{id:"app"}},[c("img",{attrs:{alt:"Vue logo",src:t("cf05")}}),c("div",{staticClass:"container"},[c("vue-pincode",{ref:"pincodeInput",on:{pincode:n.checkPincode}})],1)])},o=[],r=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("div",{staticClass:"vue-pincode",class:n.pincodeSuccess?"vue-pincode--success":""},[t("div",{staticClass:"vue-pincode__fields",class:n.pincodeError?"vue-pincode__fields--miss":""},[t("span",{class:n.pincode.length>=1?"active":""}),t("span",{class:n.pincode.length>=2?"active":""}),t("span",{class:n.pincode.length>=3?"active":""}),t("span",{class:n.pincode.length>=4?"active":""})]),t("div",{staticClass:"vue-pincode__numbers"},[n._l([1,2,3,4,5,6,7,8,9],(function(e,c){return t("button",{key:c,staticClass:"shadow",attrs:{disabled:n.buttonDisabled},on:{click:function(t){return n.clickPinButton(e)}}},[t("span",[n._v(n._s(e))])])})),t("div"),t("button",{attrs:{disabled:n.buttonDisabled},on:{click:function(e){return n.clickPinButton(0)}}},[t("span",[n._v("0")])]),t("button",{staticClass:"vue-pincode__undo",attrs:{disabled:n.buttonDisabled},on:{click:n.resetPincode}},[t("span",[t("undo-icon")],1)])],2)])},s=[],u=function(){var n=this,e=n.$createElement,t=n._self._c||e;return t("svg",{attrs:{height:"512pt",viewBox:"0 0 512 512",width:"512pt",xmlns:"http://www.w3.org/2000/svg"}},[t("path",{attrs:{d:"m154.667969 213.332031h-138.667969c-8.832031 0-16-7.167969-16-16v-138.664062c0-8.832031 7.167969-16 16-16s16 7.167969 16 16v122.664062h122.667969c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"}}),t("path",{attrs:{d:"m256 512c-68.351562 0-132.628906-26.644531-180.96875-75.03125-6.253906-6.25-6.253906-16.382812 0-22.632812 6.269531-6.273438 16.402344-6.230469 22.632812 0 42.304688 42.347656 98.515626 65.664062 158.335938 65.664062 123.519531 0 224-100.480469 224-224s-100.480469-224-224-224c-105.855469 0-200.257812 71.148438-224.449219 169.171875-2.132812 8.597656-10.75 13.824219-19.371093 11.714844-8.574219-2.132813-13.800782-10.796875-11.710938-19.371094 27.691406-112.148437 135.148438-193.515625 255.53125-193.515625 141.164062 0 256 114.835938 256 256s-114.835938 256-256 256zm0 0"}})])},a=[],p={name:"UndoIcon"},d=p,l=t("2877"),f=Object(l["a"])(d,u,a,!1,null,null,null),h=f.exports,v={name:"VuePincode",components:{UndoIcon:h},data:function(){return{pincode:"",pincodeError:!1,pincodeSuccess:!1}},computed:{pincodeLength:function(){return this.pincode.length},buttonDisabled:function(){return this.pincodeError||this.pincodeSuccess}},watch:{pincode:function(){4===this.pincodeLength&&this.$emit("pincode",this.pincode)}},destroyed:function(){this.resetPincode()},methods:{clickPinButton:function(n){this.pincodeLength<4&&(this.pincode=this.pincode+n)},resetPincode:function(){this.pincode="",this.pincodeError=!1,this.pincodeSuccess=!1},triggerMiss:function(){var n=this;this.pincodeError=!0,setTimeout((function(){return n.resetPincode()}),800)},triggerSuccess:function(){var n=this;this.pincodeSuccess=!0,setTimeout((function(){return n.resetPincode()}),2500)}}},b=v,g=(t("2bc1"),Object(l["a"])(b,r,s,!1,null,"69af37d9",null)),m=g.exports,_={name:"App",components:{VuePincode:m},methods:{checkPincode:function(n){var e=this;setTimeout((function(){"1234"===n?e.$refs.pincodeInput.triggerSuccess():e.$refs.pincodeInput.triggerMiss()}),700)}}},w=_,y=(t("5c0b"),Object(l["a"])(w,i,o,!1,null,null,null)),P=y.exports;c["a"].config.productionTip=!1,new c["a"]({render:function(n){return n(P)}}).$mount("#app")},"5c0b":function(n,e,t){"use strict";var c=t("9c0c"),i=t.n(c);i.a},"9c0c":function(n,e,t){},cf05:function(n,e,t){n.exports=t.p+"img/logo.82b9c7a5.png"}});
//# sourceMappingURL=app.2e8b82d7.js.map