@square/maker/components/PinInput/script.js

Maker Design System by Square

!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("../../components/BlockFormControlLayout"));else if("function"==typeof define&&define.amd)define(["../../components/BlockFormControlLayout"],e);else{var n="object"==typeof exports?e(require("../../components/BlockFormControlLayout")):e(t["../../components/BlockFormControlLayout"]);for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(this,(function(t){return(()=>{"use strict";var e={662:e=>{e.exports=t}},n={};function i(t){var o=n[t];if(void 0!==o)return o.exports;var s=n[t]={exports:{}};return e[t](s,s.exports,i),s.exports}i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),i.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var o={};return(()=>{i.r(o),i.d(o,{MPinInput:()=>u});var t=i(662);const e=/\D/gimu,n=/\d/,s={props:{pinLength:{type:Number,default:6,validator:t=>t>0},variant:{type:String,default:"fill",validator:t=>["fill","outline"].includes(t)},invalid:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},data:()=>({inputValue:"",isFocused:!1,caretPosition:void 0,shakeTimeout:void 0,isShaking:!1}),computed:{computedStyles(){const t=50*this.pinLength+8*(this.pinLength-1),e=this.shouldShowCaret?"var(--maker-color-body, #000000)":"transparent";return{"--pin-input-width":"".concat(t,"px"),"--pin-cell-caret-color":e}},shouldShowCaret(){return!!this.isFocused&&(this.caretPosition===this.inputValue.length&&this.caretPosition!==this.pinLength)}},watch:{disabled(t){t||this.$refs.input.focus()}},beforeDestroy(){clearTimeout(this.shakeTimeout)},methods:{setFocus(t){this.isFocused=t,this.isFocused&&this.$nextTick((()=>this.setCaretPositionToEnd()))},isCellFocused(t){const e=this.caretPosition===t,n=this.pinLength===t+1?e||this.caretPosition===this.pinLength:e;return!!this.isFocused&&(this.isFocused&&n)},onInputPin(t){var e;const n=null==t||null===(e=t.target)||void 0===e?void 0:e.value;this.handlePinChange(n)},handlePinChange(t){this.updateCaretPosition(),t?(this.inputValue=this.sanitizePinValue(t),this.inputValue.length===this.pinLength&&this.handleComplete(this.inputValue)):this.inputValue=null!=t?t:""},handleKeyDown(t){"Backspace"===t.key&&this.handleBackspace(t)},sanitizePinValue(t=""){return t.replace(e,"").slice(0,this.pinLength)},sanitizePinInput(t){var e;null!==(e=t.key)&&void 0!==e&&e.match(n)||(t.preventDefault(),t.stopPropagation())},updateCaretPosition(){this.caretPosition=this.isFocused?this.$refs.input.selectionStart:void 0},setCaretPositionToEnd(){this.caretPosition=this.inputValue.length,this.$refs.input.selectionStart=this.caretPosition,this.$refs.input.selectionEnd=this.caretPosition},handleComplete(t){this.$emit("complete",t)},handleBackspace(t){if(this.caretPosition<this.inputValue.length){t.preventDefault(),t.stopPropagation();const e=this.caretPosition;this.inputValue=this.inputValue.slice(0,e)+this.inputValue.slice(e+1),this.$nextTick((()=>{this.$refs.input.selectionStart=e,this.$refs.input.selectionEnd=e}))}},shakeAndClearInputs(){this.inputValue="",this.isShaking=!0,clearTimeout(this.shakeTimeout),this.shakeTimeout=setTimeout((()=>{this.isShaking=!1,this.$refs.input.focus()}),1e3)}}},r={PinInputContainer:"📚19-10-2v_pBV",PinInput:"📚19-10-2MRf7g",PinInputCells:"📚19-10-2Kj4bu",PinInputCell:"📚19-10-2J1Wqf",isFocused:"📚19-10-2xNoa_",fill:"📚19-10-2pmZ3g",error:"📚19-10-2iRlyg",disabled:"📚19-10-2xSJ8u",isShaking:"📚19-10-2q7Jjz",invalidpinshake:"📚19-10-2wb7XY"};function a(t,e,n,i,o,s,r,a){var l,u="function"==typeof t?t.options:t;if(e&&(u.render=e,u.staticRenderFns=n,u._compiled=!0),i&&(u.functional=!0),s&&(u._scopeId="data-v-"+s),r?(l=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__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(r)},u._ssrRegister=l):o&&(l=a?function(){o.call(this,(u.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(u.functional){u._injectStyles=l;var p=u.render;u.render=function(t,e){return l.call(e),p(t,e)}}else{var c=u.beforeCreate;u.beforeCreate=c?[].concat(c,l):[l]}return{exports:t,options:u}}const l=a(s,(function(){var t,e=this,n=e.$createElement,i=e._self._c||n;return i("div",{class:e.$s.PinInputContainer,style:e.computedStyles},[i("input",{ref:"input",class:e.$s.PinInput,attrs:{maxlength:e.pinLength,type:"text",inputmode:"numeric",pattern:"[0-9]*",disabled:e.disabled||e.isShaking},domProps:{value:e.inputValue},on:{keydown:e.handleKeyDown,keypress:e.sanitizePinInput,input:e.onInputPin,keyup:e.updateCaretPosition,click:e.updateCaretPosition,focus:function(t){return e.setFocus(!0)},blur:function(t){return e.setFocus(!1)}}}),e._v(" "),i("div",{class:(t={},t[e.$s.PinInputCells]=!0,t[e.$s.isShaking]=e.isShaking,t)},e._l(e.pinLength,(function(t){var n;return i("div",{key:t,class:(n={},n[e.$s.PinInputCell]=!0,n[e.$s.isFocused]=e.isCellFocused(t-1),n[e.$s.fill]="fill"===e.variant,n[e.$s.error]=e.invalid,n[e.$s.disabled]=e.disabled||e.isShaking,n)},[e._v("\n\t\t\t"+e._s(e.inputValue[t-1])+"\n\t\t")])})),0)])}),[],!1,(function(t){this.$s=r.locals||r}),null,null).exports;const u=a({components:{MBlockFormControlLayout:t.MBlockFormControlLayout,PinInputControl:l},inheritAttrs:!1,computed:{isInvalid(){return""===this.$attrs.invalid||this.$attrs.invalid||!!this.$slots.error}},methods:{shakeAndClearInputs(){this.$refs.pinInputControl.shakeAndClearInputs()}}},(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("m-block-form-control-layout",{scopedSlots:t._u([{key:"control",fn:function(){return[n("pin-input-control",t._g(t._b({ref:"pinInputControl",attrs:{invalid:t.isInvalid},scopedSlots:t._u([t._l(t.$slots,(function(e,n){return{key:n,fn:function(){return[t._t(n)]},proxy:!0}}))],null,!0)},"pin-input-control",t.$attrs,!1),t.$listeners))]},proxy:!0},{key:"error",fn:function(){return[t._t("error")]},proxy:!0}],null,!0)})}),[],!1,null,null,null).exports})(),o})()}));
//# sourceMappingURL=script.js.map