@dialpad/dialtone/dist/vue3/lib/input/input.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("../../common/constants/index.cjs"),n=require("./input-constants.cjs"),d=require("../../common/utils/index.cjs"),m=require("../../common/mixins/input.cjs"),t=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),S=require("../validation-messages/validation-messages.cjs"),f={compatConfig:{MODE:3},name:"DtInput",components:{DtValidationMessages:S.default},mixins:[m.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:""},type:{type:String,default:n.INPUT_TYPES.TEXT,validator:e=>Object.values(n.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:""},disabled:{type:Boolean,default:!1},label:{type:String,default:""},labelVisible:{type:Boolean,default:!0},description:{type:String,default:""},size:{type:String,default:"md",validator:e=>Object.values(n.INPUT_SIZES).includes(e)},inputClass:{type:[String,Object,Array],default:""},inputWrapperClass:{type:[String,Object,Array],default:""},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1}},emits:["input","blur","clear","focus","focusin","focusout","update:modelValue","update:length","update:invalid"],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:d.hasSlotContent}},computed:{isTextarea(){return this.type===n.INPUT_TYPES.TEXTAREA},isDefaultSize(){return this.size===n.INPUT_SIZES.DEFAULT},iconSize(){return n.INPUT_ICON_SIZES[this.size]},isValidSize(){return Object.values(n.INPUT_SIZES).includes(this.size)},isValidDescriptionSize(){return Object.values(h.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?"textarea":"input"},inputListeners(){return{input:async e=>{let a=e.target.value;this.type===n.INPUT_TYPES.FILE&&(a=Array.from(e.target.files).map(r=>r.name)),this.$emit("input",a),this.$emit("update:modelValue",a)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit("focus",e)},focusin:e=>this.$emit("focusin",e),focusout:e=>this.$emit("focusout",e)}},descriptionKey(){return`input-description-${d.getUniqueString()}`},inputState(){return d.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){var e,a,s,r,u,i,o,l,c,p;return{length:{description:(a=(e=this==null?void 0:this.validate)==null?void 0:e.length)==null?void 0:a.description,max:(r=(s=this==null?void 0:this.validate)==null?void 0:s.length)==null?void 0:r.max,warn:(i=(u=this==null?void 0:this.validate)==null?void 0:u.length)==null?void 0:i.warn,message:(l=(o=this==null?void 0:this.validate)==null?void 0:o.length)==null?void 0:l.message,limitMaxLength:(p=(c=this==null?void 0:this.validate)==null?void 0:c.length)!=null&&p.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?h.VALIDATION_MESSAGE_TYPES.WARNING:null:h.VALIDATION_MESSAGE_TYPES.ERROR},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?"":n.INPUT_SIZE_CLASSES[this.inputComponent][this.size]},stateClass(){return[n.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit("update:invalid",e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength==null&&this.$emit("update:length",this.calculateLength(e))}}},beforeMount(){this.descriptionSizeClasses=n.DESCRIPTION_SIZE_CLASSES,this.labelSizeClasses=n.LABEL_SIZE_CLASSES},methods:{removeClassStyleAttrs:d.removeClassStyleAttrs,addClassStyleAttrs:d.addClassStyleAttrs,inputClasses(){return["d-input__input",this.inputComponent==="input"?"d-input":"d-textarea",{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.leftIcon,"d-input-icon--right":this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:["d-input__wrapper",{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e!="string"?0:[...e].length},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){var a;(a=this.$refs.container)!=null&&a.contains(e.relatedTarget)||this.$emit("blur",e)},emitClearEvents(){this.$emit("input",""),this.$emit("clear"),this.$emit("update:modelValue","")},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,a){return`message-${e}-${a}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value="",this.$refs.input.focus(),this.emitClearEvents()}}},v=["aria-details"],C=["id"],_={key:0},L={key:1,"data-qa":"dt-input-length-description",class:"d-input__length-description"},y=["read-only"],E=["value","name","disabled","autocomplete","maxlength"],I=["value","name","type","disabled","autocomplete","maxlength"];function b(e,a,s,r,u,i){const o=t.resolveComponent("dt-validation-messages");return t.openBlock(),t.createElementBlock("div",t.mergeProps({ref:"container",class:["d-input__root",{"d-input--hidden":s.hidden}]},i.addClassStyleAttrs(e.$attrs),{"data-qa":"dt-input"}),[t.createElementVNode("label",{class:"d-input__label","aria-details":e.$slots.description||s.description?i.descriptionKey:void 0,"data-qa":"dt-input-label-wrapper"},[t.renderSlot(e.$slots,"labelSlot",{},()=>[s.labelVisible&&s.label?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"label","data-qa":"dt-input-label",class:t.normalizeClass(["d-input__label-text","d-label",e.labelSizeClasses[s.size]])},t.toDisplayString(s.label),3)):t.createCommentVNode("",!0)]),u.hasSlotContent(e.$slots.description)||s.description||i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",{key:0,id:i.descriptionKey,ref:"description",class:t.normalizeClass(["d-input__description","d-description",e.descriptionSizeClasses[s.size]]),"data-qa":"dt-input-description"},[u.hasSlotContent(e.$slots.description)||s.description?(t.openBlock(),t.createElementBlock("div",_,[t.renderSlot(e.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(s.description),1)])])):t.createCommentVNode("",!0),i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",L,t.toDisplayString(i.validationProps.length.description),1)):t.createCommentVNode("",!0)],10,C)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(i.inputWrapperClasses()),"read-only":s.disabled===!0?!0:void 0},[t.createElementVNode("span",{class:"d-input-icon d-input-icon--left","data-qa":"dt-input-left-icon-wrapper",onFocusout:a[0]||(a[0]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"leftIcon",{iconSize:i.iconSize})],32),i.isTextarea?(t.openBlock(),t.createElementBlock("textarea",t.mergeProps({key:0,ref:"input",value:s.modelValue,name:s.name,disabled:s.disabled,autocomplete:e.$attrs.autocomplete??"off",class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},i.removeClassStyleAttrs(e.$attrs),t.toHandlers(i.inputListeners,!0)),null,16,E)):(t.openBlock(),t.createElementBlock("input",t.mergeProps({key:1,ref:"input",value:s.modelValue,name:s.name,type:s.type,disabled:s.disabled,autocomplete:e.$attrs.autocomplete??"off",class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},i.removeClassStyleAttrs(e.$attrs),t.toHandlers(i.inputListeners,!0)),null,16,I)),t.createElementVNode("span",{class:"d-input-icon d-input-icon--right","data-qa":"dt-input-right-icon-wrapper",onFocusout:a[1]||(a[1]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"rightIcon",{iconSize:i.iconSize,clear:i.clearInput})],32)],10,y)],8,v),t.createVNode(o,t.mergeProps({"validation-messages":i.validationMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":"dt-input-messages"}),null,16,["validation-messages","show-messages","class"])],16)}const P=g._(f,[["render",b]]);exports.default=P;
//# sourceMappingURL=input.cjs.map