@wikimedia/codex/dist/modules/CdxTextInput.cjs

Codex Design System for Wikimedia

"use strict";var f=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var v=(t,o)=>{var u={};for(var s in t)K.call(t,s)&&o.indexOf(s)<0&&(u[s]=t[s]);if(t!=null&&f)for(var s of f(t))o.indexOf(s)<0&&A.call(t,s)&&(u[s]=t[s]);return u};const n=require("vue"),I=require("./Icon.js"),r=require("./constants.js"),F=require("./useModelWrapper.cjs"),N=require("./useSplitAttributes.cjs"),P=require("./useFieldData.cjs"),U=require("./_plugin-vue_export-helper.js"),j=r.makeStringTypeValidator(r.TextInputTypes),z=r.makeStringTypeValidator(r.ValidationStatusTypes),R=n.defineComponent({name:"CdxTextInput",components:{CdxIcon:I.CdxIcon},inheritAttrs:!1,props:{modelValue:{type:[String,Number],default:""},inputType:{type:String,default:"text",validator:j},status:{type:String,default:"default",validator:z},disabled:{type:Boolean,default:!1},startIcon:{type:[String,Object],default:void 0},endIcon:{type:[String,Object],default:void 0},clearable:{type:Boolean,default:!1}},emits:["update:modelValue","keydown","input","change","focus","blur","compositionstart","compositionupdate","compositionend","clear","invalid"],setup(t,{emit:o,attrs:u}){const s=u.id,{computedDisabled:a,computedStatus:p,computedInputId:d}=P(n.toRef(t,"disabled"),n.toRef(t,"status"),s),i=n.inject(r.FieldDescriptionIdKey,void 0),l=F(n.toRef(t,"modelValue"),o),c=n.computed(()=>t.clearable&&!!l.value&&!a.value),b=n.computed(()=>({"cdx-text-input--has-start-icon":!!t.startIcon,"cdx-text-input--has-end-icon":!!t.endIcon,"cdx-text-input--clearable":c.value,["cdx-text-input--status-".concat(p.value)]:!0})),{rootClasses:k,rootStyle:V,otherAttrs:g}=N(u,b),S=n.computed(()=>{const C=g.value,{id:e}=C;return v(C,["id"])}),B=n.computed(()=>({"cdx-text-input__input--has-value":!!l.value})),w=e=>{l.value="",o("clear",e)},D=e=>{(e.key==="Home"||e.key==="End")&&!e.ctrlKey&&!e.metaKey||o("keydown",e)},T=e=>{o("input",e)},$=e=>{o("change",e)},h=e=>{o("focus",e)},x=e=>{o("blur",e)},M=e=>{o("compositionstart",e)},E=e=>{o("compositionupdate",e)},q=e=>{o("compositionend",e)},m=n.ref(!0);return{computedInputId:d,descriptionId:i,wrappedModel:l,isClearable:c,rootClasses:k,rootStyle:V,otherAttrsMinusId:S,inputClasses:B,computedDisabled:a,onClear:w,onInput:T,onChange:$,onKeydown:D,onFocus:h,onBlur:x,onCompositionStart:M,onCompositionUpdate:E,onCompositionEnd:q,onInvalid:(e,y)=>{y&&e.preventDefault(),o("invalid",e),m.value=!0},shouldPreventDefault:m,cdxIconClear:I.v4}},methods:{focus(){this.$refs.input.focus()},blur(){this.$refs.input.blur()},checkValidity(){return this.$refs.input.checkValidity()},reportValidity(){return this.shouldPreventDefault=!1,this.$refs.input.reportValidity()},setCustomValidity(t){this.$refs.input.setCustomValidity(t)}}}),H=["id","type","aria-describedby","disabled"];function O(t,o,u,s,a,p){const d=n.resolveComponent("cdx-icon");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["cdx-text-input",t.rootClasses]),style:n.normalizeStyle(t.rootStyle)},[n.withDirectives(n.createElementVNode("input",n.mergeProps({id:t.computedInputId,ref:"input","onUpdate:modelValue":o[0]||(o[0]=i=>t.wrappedModel=i),class:["cdx-text-input__input",t.inputClasses]},t.otherAttrsMinusId,{type:t.inputType,"aria-describedby":t.descriptionId,disabled:t.computedDisabled,size:"1",onInput:o[1]||(o[1]=(...i)=>t.onInput&&t.onInput(...i)),onCompositionstart:o[2]||(o[2]=(...i)=>t.onCompositionStart&&t.onCompositionStart(...i)),onCompositionupdate:o[3]||(o[3]=(...i)=>t.onCompositionUpdate&&t.onCompositionUpdate(...i)),onCompositionend:o[4]||(o[4]=(...i)=>t.onCompositionEnd&&t.onCompositionEnd(...i)),onChange:o[5]||(o[5]=(...i)=>t.onChange&&t.onChange(...i)),onFocus:o[6]||(o[6]=(...i)=>t.onFocus&&t.onFocus(...i)),onBlur:o[7]||(o[7]=(...i)=>t.onBlur&&t.onBlur(...i)),onKeydown:o[8]||(o[8]=(...i)=>t.onKeydown&&t.onKeydown(...i)),onInvalid:o[9]||(o[9]=i=>t.onInvalid(i,t.shouldPreventDefault))}),null,16,H),[[n.vModelDynamic,t.wrappedModel]]),t.startIcon?(n.openBlock(),n.createBlock(d,{key:0,icon:t.startIcon,class:"cdx-text-input__icon-vue cdx-text-input__start-icon"},null,8,["icon"])):n.createCommentVNode("v-if",!0),t.endIcon?(n.openBlock(),n.createBlock(d,{key:1,icon:t.endIcon,class:"cdx-text-input__icon-vue cdx-text-input__end-icon"},null,8,["icon"])):n.createCommentVNode("v-if",!0),t.isClearable?(n.openBlock(),n.createBlock(d,{key:2,icon:t.cdxIconClear,class:"cdx-text-input__icon-vue cdx-text-input__clear-icon",onMousedown:o[10]||(o[10]=n.withModifiers(()=>{},["prevent"])),onClick:t.onClear},null,8,["icon","onClick"])):n.createCommentVNode("v-if",!0)],6)}const W=U._export_sfc(R,[["render",O]]);module.exports=W;