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

vue3 component library, css framework

import{defineComponent as w,ref as _,pushScopeId as I,popScopeId as B,resolveComponent as g,openBlock as r,createBlock as E,withCtx as v,createElementVNode as b,normalizeClass as h,normalizeStyle as T,renderSlot as m,createElementBlock as i,toDisplayString as M,useCssVars as O,createCommentVNode as f,computed as y,createVNode as z,mergeProps as F,withModifiers as A,createSlots as P,normalizeProps as U,guardReactiveProps as H,createTextVNode as N,watch as R}from"vue";import{ElPopover as W,ElInput as q}from"element-plus";var $=w({components:{ElPopover:W},props:{styles:{type:Object,default:()=>({})},label:{type:[String,Number],default:""},value:{type:[String,Number],default:""},useSlot:{type:Boolean,default:!0},class:{type:String,default:""},panelClass:{type:String,default:""},popoverClass:{type:String,default:""}},emits:["open","close"],setup(e,{emit:n,slots:o}){const t=_(!1),a=_(null);return{panelVisible:t,closePanel:()=>{t.value=!1},slots:o,popoverEl:a,emit:n}}});I("data-v-8823a666");const G={key:1,class:"es-search-label__container"},J={key:0,class:"es-search-label__container__label"},K={key:1,class:"es-search-label__container__label"},Q={key:2,class:"es-search-label__container__value"},X={key:3,class:"es-search-label__container__value"},Y=b("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);B();function Z(e,n,o,t,a,u){const p=g("el-popover");return r(),E(p,{ref:"popoverEl",placement:"bottom-start",offset:6,width:"unset","hide-after":0,"popper-class":`el-popover--no-padding ${e.popoverClass}`,visible:e.panelVisible,"onUpdate:visible":n[0]||(n[0]=l=>e.panelVisible=l),onShow:n[1]||(n[1]=l=>e.emit("open")),onHide:n[2]||(n[2]=l=>e.emit("close"))},{reference:v(()=>[b("div",{class:h(["es-search-label",e.class]),style:T(e.styles)},[e.slots.main?m(e.$slots,"main",{key:0}):(r(),i("div",G,[e.slots.label?(r(),i("div",J,[m(e.$slots,"label")])):(r(),i("div",K,M(e.label),1)),e.slots.value?(r(),i("div",Q,[m(e.$slots,"value")])):(r(),i("div",X,M(e.value),1)),Y]))],6)]),default:v(()=>[b("div",{class:h(["es-search-label__slot",e.panelClass])},[m(e.$slots,"panel",{closePanel:e.closePanel,popoverEl:e.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function S(e,n){n===void 0&&(n={});var o=n.insertAt;if(!(!e||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",o==="top"&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}var ee=`.es-search-label[data-v-8823a666] {
  font-size: 14px;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
}
.es-search-label__container[data-v-8823a666] {
  display: flex;
}
.es-search-label__container__label[data-v-8823a666] {
  color: #7a7c90;
}
.es-search-label__container__icon[data-v-8823a666] {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
.es-search-label__container__icon[data-v-8823a666]::before {
  color: #a7baf1;
}`;S(ee);var ne=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;S(ne),$.render=Z,$.__scopeId="data-v-8823a666",$.__file="components/search-label/index.vue",$.install=e=>{e.component("es-search-label",$)},I("data-v-2ca3eff0");const te={key:2,class:"button__text"};B();var V=w({props:{styles:{type:Object,default:()=>({})},type:{type:String,default:"default"},text:{type:String,default:""},plain:{type:Boolean,default:!1},iconBefore:{type:String,default:""},iconAfter:{type:String,default:""},fontColor:{type:String,default:""},icon:{type:String,default:""}},emits:["click"],setup(e,{emit:n}){return O(o=>({"2ca3eff0-fontColor":e.fontColor})),(o,t)=>e.type==="icon"?(r(),i("button",{key:0,class:"button__icon es-cursor--pointer",style:T(e.styles),onClick:t[0]||(t[0]=a=>n("click"))},[b("i",{class:h(e.icon)},null,2)],4)):(r(),i("button",{key:1,class:h(["button",[e.type,{plain:e.plain}]]),style:T(e.styles),onClick:t[1]||(t[1]=a=>n("click"))},[e.iconBefore===""?m(o.$slots,"before",{key:0}):f("v-if",!0),e.iconBefore!==""?(r(),i("i",{key:1,class:h(["icon",e.iconBefore])},null,2)):f("v-if",!0),e.text!==""?(r(),i("span",te,M(e.text),1)):m(o.$slots,"default",{key:3}),e.iconAfter!==""?(r(),i("i",{key:4,class:h(["icon",e.iconAfter])},null,2)):f("v-if",!0),e.iconAfter===""?m(o.$slots,"after",{key:5}):f("v-if",!0)],6))}}),oe=`.button[data-v-2ca3eff0] {
  padding: 0 12px;
  border-radius: 4px;
  cursor: pointer;
  box-sizing: border-box;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  --button-font-color: var(--2ca3eff0-fontColor);
}
.button[data-v-2ca3eff0]:disabled {
  cursor: not-allowed;
}
.button__icon[data-v-2ca3eff0] {
  display: inline-block;
}
.button__text[data-v-2ca3eff0] {
  display: inline-block;
  height: 21px;
}
.button.error[data-v-2ca3eff0] {
  background-color: #ea4444;
  color: var(--button-font-color, #ffffff);
}
.button.pure[data-v-2ca3eff0] {
  background-color: unset;
  color: var(--button-font-color, #e4e5ec);
}
.button.default[data-v-2ca3eff0] {
  background: #5075e2;
  color: var(--button-font-color, #ffffff);
}
.button.default[data-v-2ca3eff0]:disabled {
  background: #5075e290;
}
.button.default.plain[data-v-2ca3eff0] {
  border: 1px solid #a7baf1;
  background: #ffffff;
  color: var(--button-font-color, #3e4051);
  box-shadow: 0px 1px 3px rgba(48, 88, 208, 0.1), 0px 2px 1px rgba(48, 88, 208, 0.06), 0px 1px 1px rgba(48, 88, 208, 0.08);
}
.button.error.plain[data-v-2ca3eff0] {
  border: 1px solid #a7baf1;
  background: #ffffff;
  color: var(--button-font-color, #da0000);
}`;S(oe),V.__scopeId="data-v-2ca3eff0",V.__file="components/button/index.vue",V.install=e=>{e.component("es-button",V)};var x=w({components:{ElInput:q},props:{prependText:{type:String,default:""},modelValue:{type:String,default:""},hasSuffix:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(e,{emit:n}){const o=_("es-icon-search-line"),t=_(!1),a=y({get(){return e.modelValue},set(L){n("update:modelValue",L)}}),u=()=>{o.value="es-icon-close-line"},p=()=>{o.value="es-icon-search-line"},l=()=>{a.value=""},s=()=>{t.value=!0,u()},d=()=>{u()},c=()=>{t.value||p()},D=()=>{t.value=!1,p()},j=y(()=>a.value===""?"es-icon-search-line":o.value);return{suffixIcon:o,suffixIcon2Clear:u,suffixIcon2Search:p,clearInput:l,suffixIconShow:j,inputModel:a,blur:D,focus:s,mouseout:c,mouseover:d}}});I("data-v-4da67c3c");const ae={class:"es-input"},le={class:"es-input__prepend"};B();function se(e,n,o,t,a,u){const p=g("el-input");return r(),i("div",ae,[z(p,F(e.$attrs,{modelValue:e.inputModel,"onUpdate:modelValue":n[3]||(n[3]=l=>e.inputModel=l),onFocus:e.focus,onBlur:e.blur,onMouseover:A(e.mouseover,["self"]),onMouseout:A(e.mouseout,["self"])}),P({_:2},[e.prependText!==""?{name:"prepend",fn:v(()=>[b("span",le,M(e.prependText),1)])}:void 0,e.hasSuffix?void 0:{name:"suffix",fn:v(()=>[b("span",{class:h(["el-input__icon",e.suffixIconShow]),onClick:n[0]||(n[0]=(...l)=>e.clearInput&&e.clearInput(...l)),onMouseover:n[1]||(n[1]=(...l)=>e.suffixIcon2Clear&&e.suffixIcon2Clear(...l)),onMouseout:n[2]||(n[2]=(...l)=>e.suffixIcon2Search&&e.suffixIcon2Search(...l))},null,34)])}]),1040,["modelValue","onFocus","onBlur","onMouseover","onMouseout"])])}var re=`.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;
}`;S(re),x.render=se,x.__scopeId="data-v-4da67c3c",x.__file="components/input/index.vue",x.install=e=>{e.component("es-input",x)};var k=w({components:{EsButton:V,EsInput:x},props:{showBtm:{type:Array,default:()=>["delete","close","update"]}},emits:["done","close","delete"],setup(e,{slots:n,emit:o}){const t=y(()=>e.showBtm.length),a=y(()=>{var c;return(c=e.showBtm)==null?void 0:c.includes("delete")}),u=y(()=>{var c;return(c=e.showBtm)==null?void 0:c.includes("close")}),p=y(()=>{var c;return(c=e.showBtm)==null?void 0:c.includes("update")});return{btmVisible:t,deleteVisible:a,closeVisible:u,updateVisible:p,slots:n,update:()=>{o("done")},deleteEvt:()=>{o("delete")},close:()=>{o("close")}}}});I("data-v-f553ffa8");const ie={class:"es-search-wrapper"},pe={key:0,class:"es-search-wrapper__content"},de={key:1,class:"es-search-wrapper__bottom"},ue={class:"es-search-wrapper__bottom__left"},ce=N("\u6E05\u7A7A"),fe={class:"es-search-wrapper__bottom__right"},ve=N("\u5173\u95ED"),be=N("\u67E5\u8BE2");B();function me(e,n,o,t,a,u){const p=g("es-input"),l=g("es-button");return r(),i("div",ie,[z(p,U(H(e.$attrs)),null,16),e.slots.content?(r(),i("div",pe,[m(e.$slots,"content")])):f("v-if",!0),e.btmVisible?(r(),i("div",de,[b("div",ue,[e.deleteVisible?(r(),E(l,{key:0,type:"error",onClick:e.deleteEvt},{default:v(()=>[ce]),_:1},8,["onClick"])):f("v-if",!0)]),b("div",fe,[e.closeVisible?(r(),E(l,{key:0,plain:"",onClick:e.close},{default:v(()=>[ve]),_:1},8,["onClick"])):f("v-if",!0),e.updateVisible?(r(),E(l,{key:1,class:"es-margin-l--base",onClick:e.update},{default:v(()=>[be]),_:1},8,["onClick"])):f("v-if",!0)])])):f("v-if",!0)])}var he=`.es-search-wrapper[data-v-f553ffa8] {
  display: inline-block;
  background: #ffffff;
  flex-direction: column;
  /* shadow/400 */
  box-shadow: 0px 6px 12px -6px rgba(24, 39, 75, 0.12), 0px 8px 24px -4px rgba(24, 39, 75, 0.08);
  border-radius: 4px;
}
.es-search-wrapper__content[data-v-f553ffa8] {
  width: 100%;
  margin-top: 8px;
}
.es-search-wrapper__bottom[data-v-f553ffa8] {
  height: 36px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.es-search-wrapper__bottom__left[data-v-f553ffa8] {
  margin-left: 12px;
}
.es-search-wrapper__bottom__right[data-v-f553ffa8] {
  margin-right: 12px;
}
[data-v-f553ffa8] .es-input {
  width: 100%;
  min-width: 331px;
  padding: 0 12px;
}
[data-v-f553ffa8] .el-input-group {
  display: flex;
}
[data-v-f553ffa8] .el-input__inner {
  flex: 1;
}
[data-v-f553ffa8] .es-option {
  box-shadow: unset !important;
  border-radius: unset !important;
}
[data-v-f553ffa8] .es-option__content__item {
  width: 100%;
  box-sizing: border-box;
}`;S(he),k.render=me,k.__scopeId="data-v-f553ffa8",k.__file="components/search-wrapper/index.vue",k.install=e=>{e.component("es-search-wrapper",k)};var C=w({components:{EsSearchLabel:$,EsSearchWrapper:k},props:{label:[String,Number],modelValue:[String,Number],placeholder:String,prependText:String,defaultValue:{type:String,default:""}},emits:["update:modelValue","done","clear","close"],setup(e,{emit:n}){const o=_(""),t=_(e.modelValue||""),a=s=>{t.value=o.value,n("update:modelValue",t.value),n("done",t.value),s&&s()};return R(()=>e.modelValue,(s,d)=>{s!==d&&(t.value=s||"")}),{inputModel:o,clearInput:s=>{o.value="",n("update:modelValue",""),n("clear",""),s&&s()},labelModel:t,done:a,close:s=>{n("close",t.value),s&&s()},initalLabelModel:()=>{var s;const d=(s=e.modelValue)!=null?s:"";o.value=d,t.value=d}}}});const _e={class:"es-search-input"};function ge(e,n,o,t,a,u){const p=g("es-search-wrapper"),l=g("es-search-label");return r(),i("div",_e,[z(l,{label:e.label,value:e.labelModel||e.defaultValue,onOpen:e.initalLabelModel},{panel:v(({closePanel:s})=>[z(p,{modelValue:e.inputModel,"onUpdate:modelValue":n[0]||(n[0]=d=>e.inputModel=d),modelModifiers:{trim:!0},placeholder:e.placeholder,prependText:e.prependText,onDone:d=>e.done(s),onDelete:d=>e.clearInput(s),onClose:d=>e.close(s)},null,8,["modelValue","placeholder","prependText","onDone","onDelete","onClose"])]),_:1},8,["label","value","onOpen"])])}C.render=ge,C.__file="components/search-input/index.vue",C.install=e=>{e.component("es-search-input",C)};export{C as default};