eslink-ui-plus/es/input/index.js

vue3 component library, css framework

import{defineComponent as I,ref as u,computed as l,pushScopeId as S,popScopeId as y,resolveComponent as C,openBlock as M,createElementBlock as _,createVNode as V,mergeProps as B,withModifiers as d,createSlots as T,withCtx as c,createElementVNode as f,toDisplayString as k,normalizeClass as E}from"vue";import{ElInput as $}from"element-plus";var a=I({components:{ElInput:$},props:{prependText:{type:String,default:""},modelValue:{type:String,default:""},hasSuffix:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:n}){const s=u("es-icon-search-line"),t=u(!1),o=l({get(){return e.modelValue},set(b){n("update:modelValue",b)}}),r=()=>{s.value="es-icon-close-line"},p=()=>{s.value="es-icon-search-line"},i=()=>{o.value=""},m=()=>{t.value=!0,r()},v=()=>{r()},h=()=>{t.value||p()},x=()=>{t.value=!1,p()},g=l(()=>o.value===""?"es-icon-search-line":s.value);return{suffixIcon:s,suffixIcon2Clear:r,suffixIcon2Search:p,clearInput:i,suffixIconShow:g,inputModel:o,blur:x,focus:m,mouseout:h,mouseover:v}}});S("data-v-4da67c3c");const w={class:"es-input"},N={class:"es-input__prepend"};y();function z(e,n,s,t,o,r){const p=C("el-input");return M(),_("div",w,[V(p,B(e.$attrs,{modelValue:e.inputModel,"onUpdate:modelValue":n[3]||(n[3]=i=>e.inputModel=i),onFocus:e.focus,onBlur:e.blur,onMouseover:d(e.mouseover,["self"]),onMouseout:d(e.mouseout,["self"])}),T({_:2},[e.prependText!==""?{name:"prepend",fn:c(()=>[f("span",N,k(e.prependText),1)])}:void 0,e.hasSuffix?void 0:{name:"suffix",fn:c(()=>[f("span",{class:E(["el-input__icon",e.suffixIconShow]),onClick:n[0]||(n[0]=(...i)=>e.clearInput&&e.clearInput(...i)),onMouseover:n[1]||(n[1]=(...i)=>e.suffixIcon2Clear&&e.suffixIcon2Clear(...i)),onMouseout:n[2]||(n[2]=(...i)=>e.suffixIcon2Search&&e.suffixIcon2Search(...i))},null,34)])}]),1040,["modelValue","onFocus","onBlur","onMouseover","onMouseout"])])}function F(e,n){n===void 0&&(n={});var s=n.insertAt;if(!(!e||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",s==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}var A=`.es-input[data-v-4da67c3c] {
  display: inline-block;
}
.es-input__prepend[data-v-4da67c3c] {
  color: #9c9eb0;
}
[data-v-4da67c3c] .el-input {
  box-sizing: border-box;
  padding: 5px 12px 0 12px !important;
  line-height: 21px !important;
}
[data-v-4da67c3c] .el-input__inner {
  height: 28px !important;
  border: 0 !important;
  color: #282934 !important;
  line-height: 21px;
  border-bottom: 1px solid #a7baf1 !important;
  border-radius: unset !important;
  padding-right: 18px !important;
  padding-left: 0px !important;
  padding-bottom: 6px;
}
[data-v-4da67c3c] .el-input__suffix {
  position: absolute;
  right: 12px;
  top: 0;
}
[data-v-4da67c3c] .el-input__icon {
  line-height: 32px;
}
[data-v-4da67c3c] .el-input-group__prepend {
  background-color: unset;
  border: 0;
  border-bottom: 1px solid #a7baf1 !important;
  border-radius: 0;
  padding-left: 0;
  line-height: 21px;
  padding-bottom: 6px;
  padding-right: 6px;
}
[data-v-4da67c3c] .el-input__suffix
    .el-input__suffix-inner
    .el-input__icon.es-icon-close-line {
  cursor: pointer;
}`;F(A),a.render=z,a.__scopeId="data-v-4da67c3c",a.__file="components/input/index.vue",a.install=e=>{e.component("es-input",a)};export{a as default};