@progress/kendo-vue-inputs/maskedtextbox/MaskedTextBox.js

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),v=require("./masking.service.js"),p=require("./utils.js"),s=require("@progress/kendo-vue-common"),$=require("../package-metadata.js"),c=require("@progress/kendo-svg-icons"),V=n.defineComponent({model:{event:"changemodel"},emits:["change","focus","blur","update:modelValue","update:modelRawValue","changemodel"],props:{type:{type:String,default:"text"},modelValue:String,modelRawValue:String,value:String,defaultValue:String,placeholder:String,title:String,dir:String,id:String,ariaLabelledBy:String,ariaDescribedBy:String,tabIndex:Number,accessKey:String,disabled:Boolean,readonly:Boolean,size:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large"].includes(e)}},rounded:{type:String,default:"medium",validator:function(e){return[null,"small","medium","large","full"].includes(e)}},fillMode:{type:String,default:"solid",validator:function(e){return[null,"solid","flat","outline"].includes(e)}},prompt:{type:String,default:"_"},promptPlaceholder:{type:String,default:" "},includeLiterals:{type:Boolean,default:!1},maskValidation:{type:Boolean,default:!0},mask:String,rules:{type:Object,default:function(){return p.defaultRules}},selection:Object,name:String,label:String,validationMessage:String,required:{type:Boolean,default:!1},valid:{type:Boolean,default:void 0},validityStyles:{type:Boolean,default:!0},iconName:String,inputPrefix:s.templateDefinition,inputSuffix:s.templateDefinition,showValidationIcon:Boolean,showLoadingIcon:Boolean,showClearButton:Boolean,inputClass:String,wrapperClass:String,inputAttributes:Object},data(){return{currentValue:void 0,currentFocused:!1,inputValue:void 0,currentSelection:[null,null]}},created(){s.validatePackage($.packageMetadata),this.hasMounted=!1,this.valueDuringOnChange=void 0,this.inputId=`k-${s.guid()}`,this.service=new v.MaskingService,this.isPasted=!1},setup(){return{inputRef:n.ref(null)}},mounted(){this.hasMounted=!0,this.element=this.input=this.inputRef,this.updateService(),this.setValidity()},watch:{currentFocused:function(e,t){this.prevCurrentFocused=t},selection:function(e,t){this.prevSelection=t},includeLiterals:function(e,t){this.prevIncludeLiterals=t},mask:function(e,t){this.prevMask=t},prompt:function(e,t){this.prevPrompt=t},promptPlaceholder:function(e,t){this.prevPromptPlaceholder=t},rules:function(e,t){this.prevRules=t}},updated(){if(this.element&&this.currentFocused){let[t,i]=this.currentSelection;const a=this.prevSelection,l=this.$props.selection;(!a&&l||a&&l&&(a.start!==l.start||a.end!==l.end))&&(t=l.start,i=l.end),t!==null&&i!==null&&this.element.setSelectionRange(t,i)}const e={includeLiterals:this.prevIncludeLiterals,mask:this.prevMask,prompt:this.prevPrompt,promptPlaceholder:this.prevPromptPlaceholder,rules:this.prevRules};p.maskingChanged(e,this.$props)&&this.updateService(),this.setValidity()},computed:{computedRules(){return Object.assign({},p.defaultRules,this.$props.rules)},spanClassNames(){const e=!this.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.currentFocused,"k-empty":!this.computedValue(),"k-invalid":!e&&e!==void 0,"k-rtl":this.$props.dir==="rtl","k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},wrapperSpanClass(){const{size:e,fillMode:t,rounded:i}=this.$props,a=!this.$props.validityStyles||this.validity().valid;return{"k-maskedtextbox":!0,"k-input":!0,[`k-input-${s.kendoThemeMaps.sizeMap[e]||e}`]:e,[`k-input-${t}`]:t,[`k-rounded-${s.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!a,"k-required":this.required,"k-disabled":this.$props.disabled,"k-loading":this.showLoadingIcon,[this.wrapperClass]:this.wrapperClass}},inputInnerClass(){return{"k-input-inner":!0,[this.inputClass]:this.inputClass}}},methods:{focus(){this.input&&this.input.focus()},computedValue(){let e;return this.valueDuringOnChange!==void 0?e=this.valueDuringOnChange:this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0?e=this.$props.modelValue:this.currentValue!==void 0?e=this.currentValue:this.$props.defaultValue!==void 0&&(e=this.$props.defaultValue),e||""},rawValue(){return this.service.rawValue(this.computedValue())},validity(){const e=this.computedValue(),t=this.service.validationValue(e),i=this.$props.validationMessage!==void 0,a=this.$props.valid!==void 0?this.$props.valid:(!this.$props.required||!!t)&&(!this.$props.maskValidation||!this.$props.prompt||e.indexOf(this.$props.prompt)===-1);return{customError:i,valid:a,valueMissing:!t}},pasteHandler(e){const{selectionStart:t,selectionEnd:i}=e.target;i!==t&&(this.isPasted=!0,this.currentSelection=[t||0,i||0])},clearClick(e){this.triggerOnChange("",e)},onChangeHandler(e){const t=e.currentTarget,i=this.inputValue=t.value,a=this.currentSelection[0]||0,l=this.currentSelection[1]||0;if(!this.$props.mask){this.isPasted=!1,this.currentSelection=[null,null],this.triggerOnChange(i,e);return}const u=this.computedValue();let r;if(this.isPasted){this.isPasted=!1;const o=u.length-l,d=i.length-o;r=this.service.maskInRange(i.slice(a,d),u,a,l)}else r=this.service.maskInput(i,u,t.selectionStart||0);this.currentSelection=[r.selection,r.selection],this.triggerOnChange(r.value,e),this.inputValue=void 0},focusHandler(e){this.currentFocused||(this.currentFocused=!0,this.$emit("focus",{target:this,event:e}))},blurHandler(e){this.currentFocused&&(this.currentFocused=!1,this.$emit("blur",{target:this,event:e}))},triggerOnChange(e,t){this.currentValue=e,this.valueDuringOnChange=e,this.$emit("change",{event:t,selectionStart:this.currentSelection[0],selectionEnd:this.currentSelection[1],value:this.computedValue(),component:this,target:{name:this.$props.name,value:this.computedValue(),rawValue:this.rawValue()},validity:this.validity()}),this.$emit("update:modelValue",this.computedValue()),this.$emit("update:modelRawValue",this.rawValue()),this.$emit("changemodel",this.computedValue()),this.valueDuringOnChange=void 0},updateService(e){const t=Object.assign({includeLiterals:this.$props.includeLiterals,mask:this.$props.mask,prompt:this.$props.prompt,promptPlaceholder:this.$props.promptPlaceholder,rules:this.$props.rules},e);this.service.update(t)},setValidity(){this.element&&this.element.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")}},render(){const e=this.$props.id||this.inputId,{iconName:t,showValidationIcon:i,showLoadingIcon:a,showClearButton:l,inputAttributes:u}=this.$props,r=!this.$props.validityStyles||this.validity().valid,o=this.computedValue();this.inputValue;const d=s.templateRendering.call(this,this.$props.inputPrefix,s.getListeners.call(this)),f=s.templateRendering.call(this,this.$props.inputSuffix,s.getListeners.call(this)),m=s.getTemplate.call(this,{h:n.h,template:d,additionalProps:{value:o,valid:r}}),g=s.getTemplate.call(this,{h:n.h,template:f,additionalProps:{value:o,valid:r}}),h=n.createVNode("span",{dir:this.$props.dir,class:this.wrapperSpanClass,style:this.$props.label?void 0:{width:this.$props.width}},[t&&n.createVNode(s.Icon,{name:t,class:"k-input-icon"},null),this.$props.inputPrefix&&n.createVNode("span",{class:"k-input-prefix"},[m]),n.createVNode("input",n.mergeProps({type:this.$props.type,autocomplete:"off",autocorrect:"off",autocapitalize:"off",spellcheck:!1,class:this.inputInnerClass,value:o,id:e,"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy,"aria-disabled":this.$props.disabled,name:this.$props.name,tabindex:s.getTabIndex(this.$props.tabIndex,this.$props.disabled,!0),accesskey:this.$props.accessKey,title:this.$props.title,disabled:this.$props.disabled||void 0,readonly:this.$props.readonly||void 0,placeholder:this.$props.placeholder,"aria-placeholder":this.$props.placeholder,required:this.$props.required,ref:s.setRef(this,"input")},u,{onInput:this.onChangeHandler,onPaste:this.pasteHandler,onFocus:this.focusHandler,onBlur:this.blurHandler,onDragstart:p.returnFalse,onDrop:p.returnFalse}),null),this.$props.inputSuffix&&n.createVNode("span",{class:"k-input-suffix"},[g]),i&&r&&n.createVNode(s.Icon,{name:"check",icon:c.checkIcon,class:"k-input-validation-icon"},null),i&&!r&&n.createVNode(s.Icon,{name:"exclamation-circle",icon:c.exclamationCircleIcon,class:"k-input-validation-icon"},null),a&&n.createVNode(s.Icon,{name:"loading",class:"k-input-loading-icon"},null),l&&o&&n.createVNode("span",{onClick:this.clearClick,class:"k-clear-value"},[n.createVNode(s.Icon,{name:"x",icon:c.xIcon},null)])]);return this.$props.label?n.createVNode("span",{class:this.spanClassNames,dir:this.$props.dir},[h,this.$props.label?e?n.createVNode("label",{for:e,class:"k-floating-label"},[this.$props.label]):n.createVNode("span",{class:"k-label"},[this.$props.label]):null]):h}});exports.MaskedTextBox=V;