@progress/kendo-vue-inputs/input/Input.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 a=require("vue"),l=require("@progress/kendo-vue-common"),c=require("../package-metadata.js"),f=require("@progress/kendo-vue-labels");function m(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!a.isVNode(t)}const y=a.defineComponent({model:{event:"changemodel"},emits:{input:null,change:null,changemodel:null,"update:modelValue":null,focus:null,blur:null,keyup:null,keydown:null,keypress:null},props:{modelValue:{type:[String,Number],default:void 0},disabled:{type:Boolean,default:void 0},defaultValue:{type:[String,Number],default:""},value:{type:[String,Number]},label:{type:String},placeholder:{type:String},required:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large"].includes(t)}},rounded:{type:String,default:"medium",validator:function(t){return[null,"small","medium","large","full"].includes(t)}},fillMode:{type:String,default:"solid",validator:function(t){return[null,"solid","flat","outline"].includes(t)}},dir:{type:String},id:String,valid:{type:Boolean,default:void 0},validate:{type:Boolean},validationMessage:{type:String},validityStyles:{type:Boolean,default:!0},inputClass:String,tabIndex:Number,ariaLabel:String,ariaLabelledBy:String,ariaDescribedBy:String},data:function(){return{hasMounted:!1,autofill:!1,currentValue:"",valueDuringOnChange:"",focused:!1}},created(){l.validatePackage(c.packageMetadata),this._input=void 0,this._inputId=l.guid(),this.$data.valueDuringOnChange=void 0,this.$data.currentValue=this.$props.defaultValue},mounted(){this._input=this.inputRef,this.$data.hasMounted=!0,this.setValidity()},updated(){this.setValidity(),this.updateValidClass()},setup(){return{inputRef:a.ref(null)}},render(){const t=!this.$props.validityStyles||this.validity().valid,{label:e,id:i,required:n,tabIndex:u,ariaLabel:r,ariaLabelledBy:o,ariaDescribedBy:p}=this.$props,d=i||this._inputId,s=a.h("input",{...this.$attrs,placeholder:this.$props.placeholder,id:d,tabindex:u,required:n,ariaLabel:r,ariaLabelledby:o,ariaDescribedby:p,ariaDisabled:this.$props.disabled,disabled:this.$props.disabled,value:this.computedValue,class:this.inputInnerClass,ref:h=>{this.inputRef=h},onKeydown:this.handleKeydown,onKeyup:this.handleKeyup,onKeypress:this.handleKeypress,onChange:this.handleChange,onFocus:this.emitFocus,onBlur:this.emitBlur,onInput:this.handleInput,onAnimationstart:this.handleAutoFill,onAnimationend:this.handleAutoFillEnd});return e?a.createVNode(f.FloatingLabel,{label:e,editorId:d,editorValue:this.computedValue,editorValid:t,editorDisabled:this.$props.disabled,editorPlaceholder:this.$data.focused?this.$props.placeholder:"",dir:this.$props.dir},m(s)?s:{default:()=>[s]}):s},methods:{updateValidClass(){this._input.classList.toggle("k-invalid",!this.validity().valid)},emitFocus(t){this.$emit("focus",t),this.$data.focused=!0},emitBlur(t){this.$emit("blur",t),this.$data.focused=!1},handleKeydown(t){this.$emit("keydown",t)},handleKeyup(t){this.$emit("keyup",t)},handleKeypress(t){this.$emit("keypress",t)},clearClick(t){this.emitUpdate(t,"change","")},focus(){this._input&&this._input.focus()},validity(){const t={badInput:this._input?this._input.validity.badInput:!1,patternMismatch:this._input?this._input.validity.patternMismatch:!1,rangeOverflow:this._input?this._input.validity.rangeOverflow:!1,rangeUnderflow:this._input?this._input.validity.rangeUnderflow:!1,stepMismatch:this._input?this._input.validity.stepMismatch:!1,tooLong:this._input?this._input.validity.tooLong:!1,tooShort:this._input?this._input.validity.tooShort:!1,typeMismatch:this._input?this._input.validity.typeMismatch:!1,valueMissing:this._input?this._input.validity.valueMissing:!1};return{...t,customError:this.$props.validationMessage!==void 0,valid:this.$props.valid!==void 0?this.$props.valid:this._input?!this.isInvalid(t):!0}},isInvalid(t){let e=!1;for(let i in t)t.hasOwnProperty(i)&&(e=e||t[i]);return e},setValidity(){this._input&&this._input.setCustomValidity&&this._input.setCustomValidity(this.validity().valid?"":this.$props.validationMessage||"")},handleInput(t){this.emitUpdate(t,"input",t.target.value)},handleChange(t){this.emitUpdate(t,"change",t.target.value)},emitUpdate(t,e,i){this.disabled||(this.$data.currentValue=i,this.$data.valueDuringOnChange=i,this.$nextTick(()=>{this.$emit("changemodel",i),this.$emit("update:modelValue",i),this.$emit(e,{event:t,value:i,component:this,target:t.target,validity:this.validity()}),this.$data.valueDuringOnChange=void 0}))},handleAutoFill(t){if(t.animationName==="autoFillStart"){let e=t.target.parentNode;e&&e.classList.contains("k-empty")&&(this.$data.autofill=!0,e.classList.remove("k-empty"))}},handleAutoFillEnd(t){t.animationName==="autoFillEnd"&&t.target.parentNode&&(this.$data.autofill=!1)},name:function(){return this.$props.name}},computed:{spanClassNames(){const t=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-floating-label-container":!0,"k-focus":this.$data.focused,"k-empty":!(this.computedValue===0||this.computedValue||this.$props.placeholder||this.$data.autofill),"k-autofill":this.$data.autofill,"k-invalid":!t&&t!==void 0,"k-rtl":this.$props.dir==="rtl"}},inputInnerClass(){const{size:t,fillMode:e,rounded:i}=this.$props,n=!this.$data.hasMounted||!this.$props.validityStyles||this.validity().valid;return{"k-input":!0,[`k-input-${l.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-input-${e}`]:e,[`k-rounded-${l.kendoThemeMaps.roundedMap[i]||i}`]:i,"k-invalid":!n,"k-required":this.required,"k-disabled":this.$props.disabled,[this.inputClass]:this.inputClass}},computedValue(){return this.$data.valueDuringOnChange!==void 0?this.$data.valueDuringOnChange:this.$props.value!==void 0?this.$props.value:this.$props.modelValue!==void 0?this.$props.modelValue:this.$data.currentValue}}});exports.Input=y;