eslink-ui-plus
Version:
vue3 component library, css framework
152 lines (151 loc) • 15.7 kB
JavaScript
(function(e,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f(require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["vue","element-plus"],f):(e=typeof globalThis!="undefined"?globalThis:e||self,e["es-search-input-number-range"]=f(e.Vue,e.ElementPlus))})(this,function(e,f){"use strict";var b=e.defineComponent({components:{ElPopover:f.ElPopover},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(n,{emit:t,slots:o}){const a=e.ref(!1),l=e.ref(null);return{panelVisible:a,closePanel:()=>{a.value=!1},slots:o,popoverEl:l,emit:t}}});e.pushScopeId("data-v-8823a666");const V={key:1,class:"es-search-label__container"},S={key:0,class:"es-search-label__container__label"},B={key:1,class:"es-search-label__container__label"},$={key:2,class:"es-search-label__container__value"},E={key:3,class:"es-search-label__container__value"},w=e.createElementVNode("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);e.popScopeId();function v(n,t,o,a,l,p){const d=e.resolveComponent("el-popover");return e.openBlock(),e.createBlock(d,{ref:"popoverEl",placement:"bottom-start",offset:6,width:"unset","hide-after":0,"popper-class":`el-popover--no-padding ${n.popoverClass}`,visible:n.panelVisible,"onUpdate:visible":t[0]||(t[0]=r=>n.panelVisible=r),onShow:t[1]||(t[1]=r=>n.emit("open")),onHide:t[2]||(t[2]=r=>n.emit("close"))},{reference:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["es-search-label",n.class]),style:e.normalizeStyle(n.styles)},[n.slots.main?e.renderSlot(n.$slots,"main",{key:0}):(e.openBlock(),e.createElementBlock("div",V,[n.slots.label?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(n.$slots,"label")])):(e.openBlock(),e.createElementBlock("div",B,e.toDisplayString(n.label),1)),n.slots.value?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(n.$slots,"value")])):(e.openBlock(),e.createElementBlock("div",E,e.toDisplayString(n.value),1)),w]))],6)]),default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["es-search-label__slot",n.panelClass])},[e.renderSlot(n.$slots,"panel",{closePanel:n.closePanel,popoverEl:n.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function _(n,t){t===void 0&&(t={});var o=t.insertAt;if(!(!n||typeof document=="undefined")){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css",o==="top"&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=n:l.appendChild(document.createTextNode(n))}}var N=`.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;
}`;_(N);var I=`.el-popover--no-padding {
padding: 0 !important;
}
.el-popover.el-popper {
min-width: unset !important;
}
.el-popper__arrow {
display: none;
}`;_(I),b.render=v,b.__scopeId="data-v-8823a666",b.__file="components/search-label/index.vue",b.install=n=>{n.component("es-search-label",b)};var h=e.defineComponent({components:{ElInput:f.ElInput},props:{prependText:{type:String,default:""},modelValue:{type:String,default:""},hasSuffix:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(n,{emit:t}){const o=e.ref("es-icon-search-line"),a=e.ref(!1),l=e.computed({get(){return n.modelValue},set(C){t("update:modelValue",C)}}),p=()=>{o.value="es-icon-close-line"},d=()=>{o.value="es-icon-search-line"},r=()=>{l.value=""},u=()=>{a.value=!0,p()},m=()=>{p()},s=()=>{a.value||d()},c=()=>{a.value=!1,d()},y=e.computed(()=>l.value===""?"es-icon-search-line":o.value);return{suffixIcon:o,suffixIcon2Clear:p,suffixIcon2Search:d,clearInput:r,suffixIconShow:y,inputModel:l,blur:c,focus:u,mouseout:s,mouseover:m}}});e.pushScopeId("data-v-4da67c3c");const M={class:"es-input"},F={class:"es-input__prepend"};e.popScopeId();function z(n,t,o,a,l,p){const d=e.resolveComponent("el-input");return e.openBlock(),e.createElementBlock("div",M,[e.createVNode(d,e.mergeProps(n.$attrs,{modelValue:n.inputModel,"onUpdate:modelValue":t[3]||(t[3]=r=>n.inputModel=r),onFocus:n.focus,onBlur:n.blur,onMouseover:e.withModifiers(n.mouseover,["self"]),onMouseout:e.withModifiers(n.mouseout,["self"])}),e.createSlots({_:2},[n.prependText!==""?{name:"prepend",fn:e.withCtx(()=>[e.createElementVNode("span",F,e.toDisplayString(n.prependText),1)])}:void 0,n.hasSuffix?void 0:{name:"suffix",fn:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(["el-input__icon",n.suffixIconShow]),onClick:t[0]||(t[0]=(...r)=>n.clearInput&&n.clearInput(...r)),onMouseover:t[1]||(t[1]=(...r)=>n.suffixIcon2Clear&&n.suffixIcon2Clear(...r)),onMouseout:t[2]||(t[2]=(...r)=>n.suffixIcon2Search&&n.suffixIcon2Search(...r))},null,34)])}]),1040,["modelValue","onFocus","onBlur","onMouseover","onMouseout"])])}var D=`.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;
}`;_(D),h.render=z,h.__scopeId="data-v-4da67c3c",h.__file="components/input/index.vue",h.install=n=>{n.component("es-input",h)},e.pushScopeId("data-v-2ca3eff0");const A={key:2,class:"button__text"};e.popScopeId();var k=e.defineComponent({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(n,{emit:t}){return e.useCssVars(o=>({"2ca3eff0-fontColor":n.fontColor})),(o,a)=>n.type==="icon"?(e.openBlock(),e.createElementBlock("button",{key:0,class:"button__icon es-cursor--pointer",style:e.normalizeStyle(n.styles),onClick:a[0]||(a[0]=l=>t("click"))},[e.createElementVNode("i",{class:e.normalizeClass(n.icon)},null,2)],4)):(e.openBlock(),e.createElementBlock("button",{key:1,class:e.normalizeClass(["button",[n.type,{plain:n.plain}]]),style:e.normalizeStyle(n.styles),onClick:a[1]||(a[1]=l=>t("click"))},[n.iconBefore===""?e.renderSlot(o.$slots,"before",{key:0}):e.createCommentVNode("v-if",!0),n.iconBefore!==""?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(["icon",n.iconBefore])},null,2)):e.createCommentVNode("v-if",!0),n.text!==""?(e.openBlock(),e.createElementBlock("span",A,e.toDisplayString(n.text),1)):e.renderSlot(o.$slots,"default",{key:3}),n.iconAfter!==""?(e.openBlock(),e.createElementBlock("i",{key:4,class:e.normalizeClass(["icon",n.iconAfter])},null,2)):e.createCommentVNode("v-if",!0),n.iconAfter===""?e.renderSlot(o.$slots,"after",{key:5}):e.createCommentVNode("v-if",!0)],6))}}),T=`.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);
}`;_(T),k.__scopeId="data-v-2ca3eff0",k.__file="components/button/index.vue",k.install=n=>{n.component("es-button",k)};var g=e.defineComponent({components:{EsInput:h,EsButton:k},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(n,{slots:t,emit:o}){const a=e.computed({get(){return String(n.min)},set(i){o("update:min",i)}}),l=e.computed({get(){return String(n.max)},set(i){o("update:max",i)}}),p=e.computed(()=>n.showBtm.length),d=e.computed(()=>{var i;return(i=n.showBtm)==null?void 0:i.includes("delete")}),r=e.computed(()=>{var i;return(i=n.showBtm)==null?void 0:i.includes("close")}),u=e.computed(()=>{var i;return(i=n.showBtm)==null?void 0:i.includes("update")});return{btmVisible:p,deleteVisible:d,closeVisible:r,updateVisible:u,slots:t,update:()=>{o("done")},deleteEvt:()=>{o("delete")},close:()=>{o("close")},minValue:a,maxValue:l,emitMin:i=>{typeof i=="string"&&o("update:min",i)},emitMax:i=>{typeof i=="string"&&o("update:max",i)}}}});e.pushScopeId("data-v-33957c90");const U={class:"es-search-wrapper"},j=e.createElementVNode("span",null,"-",-1),q={key:0,class:"es-search-wrapper__content"},O={key:1,class:"es-search-wrapper__bottom"},H={class:"es-search-wrapper__bottom__left"},L=e.createTextVNode("\u6E05\u7A7A"),R={class:"es-search-wrapper__bottom__right"},W=e.createTextVNode("\u5173\u95ED"),G=e.createTextVNode("\u67E5\u8BE2");e.popScopeId();function J(n,t,o,a,l,p){const d=e.resolveComponent("es-input"),r=e.resolveComponent("es-button");return e.openBlock(),e.createElementBlock("div",U,[e.createVNode(d,{hasSuffix:"",modelValue:n.minValue,"onUpdate:modelValue":t[0]||(t[0]=u=>n.minValue=u),modelModifiers:{number:!0},placeholder:"\u8BF7\u8F93\u5165\u6700\u5C0F\u503C"},null,8,["modelValue"]),j,e.createVNode(d,{hasSuffix:"",modelValue:n.maxValue,"onUpdate:modelValue":t[1]||(t[1]=u=>n.maxValue=u),modelModifiers:{number:!0},placeholder:"\u8BF7\u8F93\u5165\u6700\u5927\u503C"},null,8,["modelValue"]),n.slots.content?(e.openBlock(),e.createElementBlock("div",q,[e.renderSlot(n.$slots,"content")])):e.createCommentVNode("v-if",!0),n.btmVisible?(e.openBlock(),e.createElementBlock("div",O,[e.createElementVNode("div",H,[n.deleteVisible?(e.openBlock(),e.createBlock(r,{key:0,type:"error",onClick:n.deleteEvt},{default:e.withCtx(()=>[L]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0)]),e.createElementVNode("div",R,[n.closeVisible?(e.openBlock(),e.createBlock(r,{key:0,plain:"",onClick:n.close},{default:e.withCtx(()=>[W]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0),n.updateVisible?(e.openBlock(),e.createBlock(r,{key:1,class:"es-margin-l--base",onClick:n.update},{default:e.withCtx(()=>[G]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0)])])):e.createCommentVNode("v-if",!0)])}var K=`.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;
}`;_(K),g.render=J,g.__scopeId="data-v-33957c90",g.__file="components/search-wrapper-number-range/index.vue",g.install=n=>{n.component("es-search-wrapper-number-range",g)};var x=e.defineComponent({components:{EsSearchLabel:b,EsSearchWrapperNumberRange:g},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(n,{emit:t}){const o=e.ref(""),a=e.ref(""),l=e.ref([]),p=()=>{var s,c;if((s=n.modelValue)==null?void 0:s.length){const[y=n.min,C=n.max]=(c=n.modelValue)!=null?c:[];o.value=y,a.value=C}},d=e.computed(()=>{var s,c;return`${(s=l.value[0])!=null?s:n.min}${n.unit} - ${(c=l.value[1])!=null?c:n.max}${n.unit}`}),r=s=>{if(o.value<n.min){f.ElMessage.warning({message:`\u6700\u5C0F\u503C\u4E0D\u80FD\u5C0F\u4E8E${n.min}`,type:"warning"});return}if(a.value>n.max){f.ElMessage.warning({message:`\u6700\u5927\u503C\u4E0D\u80FD\u5927\u4E8E${n.max}`,type:"warning"});return}if(o.value===""||a.value===""){f.ElMessage.warning({message:"\u672A\u586B\u5199\u5B8C\u6574\u533A\u95F4\uFF01",type:"warning"});return}if(Number(o.value)>=Number(a.value)){f.ElMessage.warning({message:"\u6700\u5927\u533A\u95F4\u4E0D\u80FD\u5C0F\u4E8E\u6700\u5C0F\u533A\u95F4\uFF01",type:"warning"});return}l.value[0]=o.value,l.value[1]=a.value,t("update:modelValue",l.value),t("done",l.value),s&&s()};return e.watch(()=>n.modelValue,s=>{if(s==null?void 0:s.length){const[c="",y=""]=s;o.value=c,a.value=y,l.value[0]=o.value,l.value[1]=a.value}},{immediate:!0}),{inputModel:o,inputModel2:a,clearInput:s=>{o.value=n.min,a.value=n.max,l.value[0]=o.value,l.value[1]=a.value,t("update:modelValue",l),t("clear",l),s&&s()},done:r,close:s=>{var c;((c=n.modelValue)==null?void 0:c.length)?p():(o.value=n.min,a.value=n.max),t("close",l.value),s&&s()},labelModel:d}}});const Q={class:"es-search-input"};function X(n,t,o,a,l,p){const d=e.resolveComponent("es-search-wrapper-number-range"),r=e.resolveComponent("es-search-label");return e.openBlock(),e.createElementBlock("div",Q,[e.createVNode(r,{label:n.label,value:n.labelModel||n.defaultValue},{panel:e.withCtx(({closePanel:u})=>[e.createVNode(d,{min:n.inputModel,"onUpdate:min":t[0]||(t[0]=m=>n.inputModel=m),max:n.inputModel2,"onUpdate:max":t[1]||(t[1]=m=>n.inputModel2=m),onDone:m=>n.done(u),onDelete:m=>n.clearInput(u),onClose:m=>n.close(u)},null,8,["min","max","onDone","onDelete","onClose"])]),_:1},8,["label","value"])])}return x.render=X,x.__file="components/search-input-number-range/index.vue",x.install=n=>{n.component("es-search-input-number-range",x)},x});