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

vue3 component library, css framework

import{defineComponent as S,ref as y,pushScopeId as N,popScopeId as A,resolveComponent as w,openBlock as i,createBlock as z,withCtx as g,createElementVNode as v,normalizeClass as x,normalizeStyle as U,renderSlot as _,createElementBlock as d,toDisplayString as D,computed as b,createVNode as E,mergeProps as H,withModifiers as O,createSlots as L,useCssVars as P,createCommentVNode as h,createTextVNode as j,watch as R}from"vue";import{ElPopover as W,ElInput as q,ElMessage as T}from"element-plus";var k=S({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:t}){const a=y(!1),o=y(null);return{panelVisible:a,closePanel:()=>{a.value=!1},slots:t,popoverEl:o,emit:n}}});N("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=v("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);A();function Z(e,n,t,a,o,c){const u=w("el-popover");return i(),z(u,{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:g(()=>[v("div",{class:x(["es-search-label",e.class]),style:U(e.styles)},[e.slots.main?_(e.$slots,"main",{key:0}):(i(),d("div",G,[e.slots.label?(i(),d("div",J,[_(e.$slots,"label")])):(i(),d("div",K,D(e.label),1)),e.slots.value?(i(),d("div",Q,[_(e.$slots,"value")])):(i(),d("div",X,D(e.value),1)),Y]))],6)]),default:g(()=>[v("div",{class:x(["es-search-label__slot",e.panelClass])},[_(e.$slots,"panel",{closePanel:e.closePanel,popoverEl:e.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function M(e,n){n===void 0&&(n={});var t=n.insertAt;if(!(!e||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&a.firstChild?a.insertBefore(o,a.firstChild):a.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.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;
}`;M(ee);var ne=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;M(ne),k.render=Z,k.__scopeId="data-v-8823a666",k.__file="components/search-label/index.vue",k.install=e=>{e.component("es-search-label",k)};var V=S({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 t=y("es-icon-search-line"),a=y(!1),o=b({get(){return e.modelValue},set(F){n("update:modelValue",F)}}),c=()=>{t.value="es-icon-close-line"},u=()=>{t.value="es-icon-search-line"},l=()=>{o.value=""},f=()=>{a.value=!0,c()},m=()=>{c()},s=()=>{a.value||u()},p=()=>{a.value=!1,u()},$=b(()=>o.value===""?"es-icon-search-line":t.value);return{suffixIcon:t,suffixIcon2Clear:c,suffixIcon2Search:u,clearInput:l,suffixIconShow:$,inputModel:o,blur:p,focus:f,mouseout:s,mouseover:m}}});N("data-v-4da67c3c");const te={class:"es-input"},ae={class:"es-input__prepend"};A();function oe(e,n,t,a,o,c){const u=w("el-input");return i(),d("div",te,[E(u,H(e.$attrs,{modelValue:e.inputModel,"onUpdate:modelValue":n[3]||(n[3]=l=>e.inputModel=l),onFocus:e.focus,onBlur:e.blur,onMouseover:O(e.mouseover,["self"]),onMouseout:O(e.mouseout,["self"])}),L({_:2},[e.prependText!==""?{name:"prepend",fn:g(()=>[v("span",ae,D(e.prependText),1)])}:void 0,e.hasSuffix?void 0:{name:"suffix",fn:g(()=>[v("span",{class:x(["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 le=`.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;
}`;M(le),V.render=oe,V.__scopeId="data-v-4da67c3c",V.__file="components/input/index.vue",V.install=e=>{e.component("es-input",V)},N("data-v-2ca3eff0");const se={key:2,class:"button__text"};A();var B=S({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 P(t=>({"2ca3eff0-fontColor":e.fontColor})),(t,a)=>e.type==="icon"?(i(),d("button",{key:0,class:"button__icon es-cursor--pointer",style:U(e.styles),onClick:a[0]||(a[0]=o=>n("click"))},[v("i",{class:x(e.icon)},null,2)],4)):(i(),d("button",{key:1,class:x(["button",[e.type,{plain:e.plain}]]),style:U(e.styles),onClick:a[1]||(a[1]=o=>n("click"))},[e.iconBefore===""?_(t.$slots,"before",{key:0}):h("v-if",!0),e.iconBefore!==""?(i(),d("i",{key:1,class:x(["icon",e.iconBefore])},null,2)):h("v-if",!0),e.text!==""?(i(),d("span",se,D(e.text),1)):_(t.$slots,"default",{key:3}),e.iconAfter!==""?(i(),d("i",{key:4,class:x(["icon",e.iconAfter])},null,2)):h("v-if",!0),e.iconAfter===""?_(t.$slots,"after",{key:5}):h("v-if",!0)],6))}}),ie=`.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);
}`;M(ie),B.__scopeId="data-v-2ca3eff0",B.__file="components/button/index.vue",B.install=e=>{e.component("es-button",B)};var C=S({components:{EsInput:V,EsButton:B},props:{showBtm:{type:Array,default:()=>["delete","close","update"]},min:{type:[String,Number],default:""},max:{type:[String,Number],default:""}},emits:["done","close","delete","update:min","update:max"],setup(e,{slots:n,emit:t}){const a=b({get(){return String(e.min)},set(r){t("update:min",r)}}),o=b({get(){return String(e.max)},set(r){t("update:max",r)}}),c=b(()=>e.showBtm.length),u=b(()=>{var r;return(r=e.showBtm)==null?void 0:r.includes("delete")}),l=b(()=>{var r;return(r=e.showBtm)==null?void 0:r.includes("close")}),f=b(()=>{var r;return(r=e.showBtm)==null?void 0:r.includes("update")});return{btmVisible:c,deleteVisible:u,closeVisible:l,updateVisible:f,slots:n,update:()=>{t("done")},deleteEvt:()=>{t("delete")},close:()=>{t("close")},minValue:a,maxValue:o,emitMin:r=>{typeof r=="string"&&t("update:min",r)},emitMax:r=>{typeof r=="string"&&t("update:max",r)}}}});N("data-v-33957c90");const re={class:"es-search-wrapper"},ue=v("span",null,"-",-1),de={key:0,class:"es-search-wrapper__content"},pe={key:1,class:"es-search-wrapper__bottom"},ce={class:"es-search-wrapper__bottom__left"},fe=j("\u6E05\u7A7A"),me={class:"es-search-wrapper__bottom__right"},ve=j("\u5173\u95ED"),be=j("\u67E5\u8BE2");A();function he(e,n,t,a,o,c){const u=w("es-input"),l=w("es-button");return i(),d("div",re,[E(u,{hasSuffix:"",modelValue:e.minValue,"onUpdate:modelValue":n[0]||(n[0]=f=>e.minValue=f),modelModifiers:{number:!0},placeholder:"\u8BF7\u8F93\u5165\u6700\u5C0F\u503C"},null,8,["modelValue"]),ue,E(u,{hasSuffix:"",modelValue:e.maxValue,"onUpdate:modelValue":n[1]||(n[1]=f=>e.maxValue=f),modelModifiers:{number:!0},placeholder:"\u8BF7\u8F93\u5165\u6700\u5927\u503C"},null,8,["modelValue"]),e.slots.content?(i(),d("div",de,[_(e.$slots,"content")])):h("v-if",!0),e.btmVisible?(i(),d("div",pe,[v("div",ce,[e.deleteVisible?(i(),z(l,{key:0,type:"error",onClick:e.deleteEvt},{default:g(()=>[fe]),_:1},8,["onClick"])):h("v-if",!0)]),v("div",me,[e.closeVisible?(i(),z(l,{key:0,plain:"",onClick:e.close},{default:g(()=>[ve]),_:1},8,["onClick"])):h("v-if",!0),e.updateVisible?(i(),z(l,{key:1,class:"es-margin-l--base",onClick:e.update},{default:g(()=>[be]),_:1},8,["onClick"])):h("v-if",!0)])])):h("v-if",!0)])}var ge=`.es-search-wrapper[data-v-33957c90] {
  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-33957c90] {
  width: 100%;
  margin-top: 8px;
}
.es-search-wrapper__bottom[data-v-33957c90] {
  height: 36px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}
.es-search-wrapper__bottom__left[data-v-33957c90] {
  margin-left: 12px;
}
.es-search-wrapper__bottom__right[data-v-33957c90] {
  margin-right: 12px;
}
[data-v-33957c90] .es-input {
  min-width: unset;
}
[data-v-33957c90] .es-option {
  box-shadow: unset !important;
  border-radius: unset !important;
}
[data-v-33957c90] .es-option__content__item {
  width: 100%;
  box-sizing: border-box;
}`;M(ge),C.render=he,C.__scopeId="data-v-33957c90",C.__file="components/search-wrapper-number-range/index.vue",C.install=e=>{e.component("es-search-wrapper-number-range",C)};var I=S({components:{EsSearchLabel:k,EsSearchWrapperNumberRange:C},props:{label:String,modelValue:Array,defaultValue:{type:String,default:""},max:{type:[Number,String],default:100},min:{type:[Number,String],default:0},unit:{type:String,default:"%"}},emits:["update:modelValue","done","clear","close"],setup(e,{emit:n}){const t=y(""),a=y(""),o=y([]),c=()=>{var s,p;if((s=e.modelValue)==null?void 0:s.length){const[$=e.min,F=e.max]=(p=e.modelValue)!=null?p:[];t.value=$,a.value=F}},u=b(()=>{var s,p;return`${(s=o.value[0])!=null?s:e.min}${e.unit} - ${(p=o.value[1])!=null?p:e.max}${e.unit}`}),l=s=>{if(t.value<e.min){T.warning({message:`\u6700\u5C0F\u503C\u4E0D\u80FD\u5C0F\u4E8E${e.min}`,type:"warning"});return}if(a.value>e.max){T.warning({message:`\u6700\u5927\u503C\u4E0D\u80FD\u5927\u4E8E${e.max}`,type:"warning"});return}if(t.value===""||a.value===""){T.warning({message:"\u672A\u586B\u5199\u5B8C\u6574\u533A\u95F4\uFF01",type:"warning"});return}if(Number(t.value)>=Number(a.value)){T.warning({message:"\u6700\u5927\u533A\u95F4\u4E0D\u80FD\u5C0F\u4E8E\u6700\u5C0F\u533A\u95F4\uFF01",type:"warning"});return}o.value[0]=t.value,o.value[1]=a.value,n("update:modelValue",o.value),n("done",o.value),s&&s()};return R(()=>e.modelValue,s=>{if(s==null?void 0:s.length){const[p="",$=""]=s;t.value=p,a.value=$,o.value[0]=t.value,o.value[1]=a.value}},{immediate:!0}),{inputModel:t,inputModel2:a,clearInput:s=>{t.value=e.min,a.value=e.max,o.value[0]=t.value,o.value[1]=a.value,n("update:modelValue",o),n("clear",o),s&&s()},done:l,close:s=>{var p;((p=e.modelValue)==null?void 0:p.length)?c():(t.value=e.min,a.value=e.max),n("close",o.value),s&&s()},labelModel:u}}});const _e={class:"es-search-input"};function ye(e,n,t,a,o,c){const u=w("es-search-wrapper-number-range"),l=w("es-search-label");return i(),d("div",_e,[E(l,{label:e.label,value:e.labelModel||e.defaultValue},{panel:g(({closePanel:f})=>[E(u,{min:e.inputModel,"onUpdate:min":n[0]||(n[0]=m=>e.inputModel=m),max:e.inputModel2,"onUpdate:max":n[1]||(n[1]=m=>e.inputModel2=m),onDone:m=>e.done(f),onDelete:m=>e.clearInput(f),onClose:m=>e.close(f)},null,8,["min","max","onDone","onDelete","onClose"])]),_:1},8,["label","value"])])}I.render=ye,I.__file="components/search-input-number-range/index.vue",I.install=e=>{e.component("es-search-input-number-range",I)};export{I as default};