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

Dialpad's Dialtone design system monorepo

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`./input-constants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtInput`,components:{DtValidationMessages:i.default},mixins:[n.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:a.INPUT_TYPES.TEXT,validator:e=>Object.values(a.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(a.INPUT_SIZES).includes(e)},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},rootClass:{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:t.hasSlotContent,isComposing:!1,justEndedComposition:!1}},computed:{isTextarea(){return this.type===a.INPUT_TYPES.TEXTAREA},isDefaultSize(){return this.size===a.INPUT_SIZES.DEFAULT},iconSize(){return a.INPUT_ICON_SIZES[this.size]},isValidSize(){return Object.values(a.INPUT_SIZES).includes(this.size)},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`input`,e),this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===a.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`input`,t),this.$emit(`update:modelValue`,t)},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-${t.getUniqueString()}`},inputState(){return t.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.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?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.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?``:a.INPUT_SIZE_CLASSES[this.inputComponent][this.size]},stateClass(){return[a.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??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},beforeMount(){this.descriptionSizeClasses=a.DESCRIPTION_SIZE_CLASSES,this.labelSizeClasses=a.LABEL_SIZE_CLASSES},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue)},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,addClassStyleAttrs:t.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`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.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,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value=``,this.$refs.input.focus(),this.emitClearEvents()}}},c=[`aria-details`],l=[`id`],u={key:0},d={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},f=[`read-only`],p=[`name`,`disabled`,`autocomplete`,`maxlength`],m=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`];function h(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-validation-messages`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({ref:`container`,class:[n.rootClass,`d-input__root`,{"d-input--hidden":n.hidden}]},a.addClassStyleAttrs(e.$attrs),{"data-qa":`dt-input`}),[(0,o.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,o.renderSlot)(e.$slots,`labelSlot`,{},()=>[n.labelVisible&&n.label?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,ref:`label`,"data-qa":`dt-input-label`,class:(0,o.normalizeClass)([`d-input__label-text`,`d-label`,e.labelSizeClasses[n.size]])},(0,o.toDisplayString)(n.label),3)):(0,o.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:a.descriptionKey,ref:`description`,class:(0,o.normalizeClass)([`d-input__description`,`d-description`,e.descriptionSizeClasses[n.size]]),"data-qa":`dt-input-description`},[i.hasSlotContent(e.$slots.description)||n.description?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,u,[(0,o.renderSlot)(e.$slots,`description`,{},()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.description),1)])])):(0,o.createCommentVNode)(``,!0),a.shouldValidateLength?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,d,(0,o.toDisplayString)(a.validationProps.length.description),1)):(0,o.createCommentVNode)(``,!0)],10,l)):(0,o.createCommentVNode)(``,!0),(0,o.createElementVNode)(`div`,{class:(0,o.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,o.createElementVNode)(`span`,{class:`d-input-icon d-input-icon--left`,"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[(0,o.renderSlot)(e.$slots,`leftIcon`,{iconSize:a.iconSize})],32),a.isTextarea?((0,o.openBlock)(),(0,o.createElementBlock)(`textarea`,(0,o.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.inputListeners,!0)),null,16,p)):((0,o.openBlock)(),(0,o.createElementBlock)(`input`,(0,o.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.inputListeners,!0)),null,16,m)),(0,o.createElementVNode)(`span`,{class:`d-input-icon d-input-icon--right`,"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[(0,o.renderSlot)(e.$slots,`rightIcon`,{iconSize:a.iconSize,clear:a.clearInput})],32)],10,f)],8,c),(0,o.createVNode)(s,(0,o.mergeProps)({"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":`dt-input-messages`}),null,16,[`validation-messages`,`show-messages`,`class`])],16)}var g=r.t(s,[[`render`,h]]);exports.default=g;
//# sourceMappingURL=input.cjs.map