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