@wikimedia/codex/dist/sandbox/assets/TextInput-BPNpai4v.js

Codex Design System for Wikimedia

var b=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,P=Object.prototype.propertyIsEnumerable;var V=(t,n)=>{var i={};for(var s in t)N.call(t,s)&&n.indexOf(s)<0&&(i[s]=t[s]);if(t!=null&&b)for(var s of b(t))n.indexOf(s)<0&&P.call(t,s)&&(i[s]=t[s]);return i};import{d as U,m as g,C as j,y as O,t as p,a2 as H,N as R,x as W,c as d,z as X,r as Z,a$ as q,V as G,b0 as J,_ as L,a as Q,b as Y,o as l,Z as _,f as c,g as y,aX as tt,e as nt,D as ot,k as et,E as st,n as it}from"./DemoBaseLayout.vue_vue_type_style_index_0_lang-CWG_HZgx.js";import"./TypeaheadSearch.vue_vue_type_style_index_0_lang-guaG63gZ.js";const at=g(J),ut=g(G),dt=U({name:"CdxTextInput",components:{CdxIcon:j},inheritAttrs:!1,props:{modelValue:{type:[String,Number],default:""},inputType:{type:String,default:"text",validator:at},status:{type:String,default:"default",validator:ut},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:n,attrs:i}){const s=i.id,{computedDisabled:r,computedStatus:m,computedInputId:a}=O(p(t,"disabled"),p(t,"status"),s),e=H(R,void 0),u=W(p(t,"modelValue"),n),f=d(()=>t.clearable&&!!u.value&&!r.value),k=d(()=>({"cdx-text-input--has-start-icon":!!t.startIcon,"cdx-text-input--has-end-icon":!!t.endIcon,"cdx-text-input--clearable":f.value,["cdx-text-input--status-".concat(m.value)]:!0})),{rootClasses:S,rootStyle:w,otherAttrs:D}=X(i,k),$=d(()=>{const I=D.value,{id:o}=I;return V(I,["id"])}),B=d(()=>({"cdx-text-input__input--has-value":!!u.value})),h=o=>{u.value="",n("clear",o)},M=o=>{(o.key==="Home"||o.key==="End")&&!o.ctrlKey&&!o.metaKey||n("keydown",o)},T=o=>{n("input",o)},E=o=>{n("change",o)},x=o=>{n("focus",o)},K=o=>{n("blur",o)},A=o=>{n("compositionstart",o)},F=o=>{n("compositionupdate",o)},z=o=>{n("compositionend",o)},C=Z(!0);return{computedInputId:a,descriptionId:e,wrappedModel:u,isClearable:f,rootClasses:S,rootStyle:w,otherAttrsMinusId:$,inputClasses:B,computedDisabled:r,onClear:h,onInput:T,onChange:E,onKeydown:M,onFocus:x,onBlur:K,onCompositionStart:A,onCompositionUpdate:F,onCompositionEnd:z,onInvalid:(o,v)=>{v&&o.preventDefault(),n("invalid",o),C.value=!0},shouldPreventDefault:C,cdxIconClear:q}},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)}}}),lt=["id","type","aria-describedby","disabled"];function rt(t,n,i,s,r,m){const a=Q("cdx-icon");return l(),Y("div",{class:it(["cdx-text-input",t.rootClasses]),style:st(t.rootStyle)},[_(nt("input",ot({id:t.computedInputId,ref:"input","onUpdate:modelValue":n[0]||(n[0]=e=>t.wrappedModel=e),class:["cdx-text-input__input",t.inputClasses]},t.otherAttrsMinusId,{type:t.inputType,"aria-describedby":t.descriptionId,disabled:t.computedDisabled,size:"1",onInput:n[1]||(n[1]=(...e)=>t.onInput&&t.onInput(...e)),onCompositionstart:n[2]||(n[2]=(...e)=>t.onCompositionStart&&t.onCompositionStart(...e)),onCompositionupdate:n[3]||(n[3]=(...e)=>t.onCompositionUpdate&&t.onCompositionUpdate(...e)),onCompositionend:n[4]||(n[4]=(...e)=>t.onCompositionEnd&&t.onCompositionEnd(...e)),onChange:n[5]||(n[5]=(...e)=>t.onChange&&t.onChange(...e)),onFocus:n[6]||(n[6]=(...e)=>t.onFocus&&t.onFocus(...e)),onBlur:n[7]||(n[7]=(...e)=>t.onBlur&&t.onBlur(...e)),onKeydown:n[8]||(n[8]=(...e)=>t.onKeydown&&t.onKeydown(...e)),onInvalid:n[9]||(n[9]=e=>t.onInvalid(e,t.shouldPreventDefault))}),null,16,lt),[[tt,t.wrappedModel]]),t.startIcon?(l(),c(a,{key:0,icon:t.startIcon,class:"cdx-text-input__icon-vue cdx-text-input__start-icon"},null,8,["icon"])):y("v-if",!0),t.endIcon?(l(),c(a,{key:1,icon:t.endIcon,class:"cdx-text-input__icon-vue cdx-text-input__end-icon"},null,8,["icon"])):y("v-if",!0),t.isClearable?(l(),c(a,{key:2,icon:t.cdxIconClear,class:"cdx-text-input__icon-vue cdx-text-input__clear-icon",onMousedown:n[10]||(n[10]=et(()=>{},["prevent"])),onClick:t.onClear},null,8,["icon","onClick"])):y("v-if",!0)],6)}const ft=L(dt,[["render",rt]]);export{ft as C};