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

vue3 component library, css framework

(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"]=f(e.Vue,e.ElementPlus))})(this,function(e,f){"use strict";var u=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:o,slots:l}){const t=e.ref(!1),a=e.ref(null);return{panelVisible:t,closePanel:()=>{t.value=!1},slots:l,popoverEl:a,emit:o}}});e.pushScopeId("data-v-8823a666");const g={key:1,class:"es-search-label__container"},y={key:0,class:"es-search-label__container__label"},C={key:1,class:"es-search-label__container__label"},x={key:2,class:"es-search-label__container__value"},V={key:3,class:"es-search-label__container__value"},B=e.createElementVNode("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);e.popScopeId();function S(n,o,l,t,a,d){const i=e.resolveComponent("el-popover");return e.openBlock(),e.createBlock(i,{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":o[0]||(o[0]=s=>n.panelVisible=s),onShow:o[1]||(o[1]=s=>n.emit("open")),onHide:o[2]||(o[2]=s=>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",g,[n.slots.label?(e.openBlock(),e.createElementBlock("div",y,[e.renderSlot(n.$slots,"label")])):(e.openBlock(),e.createElementBlock("div",C,e.toDisplayString(n.label),1)),n.slots.value?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(n.$slots,"value")])):(e.openBlock(),e.createElementBlock("div",V,e.toDisplayString(n.value),1)),B]))],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 h(n,o){o===void 0&&(o={});var l=o.insertAt;if(!(!n||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css",l==="top"&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=n:a.appendChild(document.createTextNode(n))}}var $=`.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;
}`;h($);var w=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;h(w),u.render=S,u.__scopeId="data-v-8823a666",u.__file="components/search-label/index.vue",u.install=n=>{n.component("es-search-label",u)},e.pushScopeId("data-v-2ca3eff0");const E={key:2,class:"button__text"};e.popScopeId();var _=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:o}){return e.useCssVars(l=>({"2ca3eff0-fontColor":n.fontColor})),(l,t)=>n.type==="icon"?(e.openBlock(),e.createElementBlock("button",{key:0,class:"button__icon es-cursor--pointer",style:e.normalizeStyle(n.styles),onClick:t[0]||(t[0]=a=>o("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:t[1]||(t[1]=a=>o("click"))},[n.iconBefore===""?e.renderSlot(l.$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",E,e.toDisplayString(n.text),1)):e.renderSlot(l.$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(l.$slots,"after",{key:5}):e.createCommentVNode("v-if",!0)],6))}}),v=`.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);
}`;h(v),_.__scopeId="data-v-2ca3eff0",_.__file="components/button/index.vue",_.install=n=>{n.component("es-button",_)};var m=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:o}){const l=e.ref("es-icon-search-line"),t=e.ref(!1),a=e.computed({get(){return n.modelValue},set(J){o("update:modelValue",J)}}),d=()=>{l.value="es-icon-close-line"},i=()=>{l.value="es-icon-search-line"},s=()=>{a.value=""},r=()=>{t.value=!0,d()},p=()=>{d()},c=()=>{t.value||i()},W=()=>{t.value=!1,i()},G=e.computed(()=>a.value===""?"es-icon-search-line":l.value);return{suffixIcon:l,suffixIcon2Clear:d,suffixIcon2Search:i,clearInput:s,suffixIconShow:G,inputModel:a,blur:W,focus:r,mouseout:c,mouseover:p}}});e.pushScopeId("data-v-4da67c3c");const I={class:"es-input"},N={class:"es-input__prepend"};e.popScopeId();function z(n,o,l,t,a,d){const i=e.resolveComponent("el-input");return e.openBlock(),e.createElementBlock("div",I,[e.createVNode(i,e.mergeProps(n.$attrs,{modelValue:n.inputModel,"onUpdate:modelValue":o[3]||(o[3]=s=>n.inputModel=s),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",N,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:o[0]||(o[0]=(...s)=>n.clearInput&&n.clearInput(...s)),onMouseover:o[1]||(o[1]=(...s)=>n.suffixIcon2Clear&&n.suffixIcon2Clear(...s)),onMouseout:o[2]||(o[2]=(...s)=>n.suffixIcon2Search&&n.suffixIcon2Search(...s))},null,34)])}]),1040,["modelValue","onFocus","onBlur","onMouseover","onMouseout"])])}var M=`.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;
}`;h(M),m.render=z,m.__scopeId="data-v-4da67c3c",m.__file="components/input/index.vue",m.install=n=>{n.component("es-input",m)};var b=e.defineComponent({components:{EsButton:_,EsInput:m},props:{showBtm:{type:Array,default:()=>["delete","close","update"]}},emits:["done","close","delete"],setup(n,{slots:o,emit:l}){const t=e.computed(()=>n.showBtm.length),a=e.computed(()=>{var c;return(c=n.showBtm)==null?void 0:c.includes("delete")}),d=e.computed(()=>{var c;return(c=n.showBtm)==null?void 0:c.includes("close")}),i=e.computed(()=>{var c;return(c=n.showBtm)==null?void 0:c.includes("update")});return{btmVisible:t,deleteVisible:a,closeVisible:d,updateVisible:i,slots:o,update:()=>{l("done")},deleteEvt:()=>{l("delete")},close:()=>{l("close")}}}});e.pushScopeId("data-v-f553ffa8");const T={class:"es-search-wrapper"},A={key:0,class:"es-search-wrapper__content"},D={key:1,class:"es-search-wrapper__bottom"},j={class:"es-search-wrapper__bottom__left"},L=e.createTextVNode("\u6E05\u7A7A"),O={class:"es-search-wrapper__bottom__right"},P=e.createTextVNode("\u5173\u95ED"),F=e.createTextVNode("\u67E5\u8BE2");e.popScopeId();function U(n,o,l,t,a,d){const i=e.resolveComponent("es-input"),s=e.resolveComponent("es-button");return e.openBlock(),e.createElementBlock("div",T,[e.createVNode(i,e.normalizeProps(e.guardReactiveProps(n.$attrs)),null,16),n.slots.content?(e.openBlock(),e.createElementBlock("div",A,[e.renderSlot(n.$slots,"content")])):e.createCommentVNode("v-if",!0),n.btmVisible?(e.openBlock(),e.createElementBlock("div",D,[e.createElementVNode("div",j,[n.deleteVisible?(e.openBlock(),e.createBlock(s,{key:0,type:"error",onClick:n.deleteEvt},{default:e.withCtx(()=>[L]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0)]),e.createElementVNode("div",O,[n.closeVisible?(e.openBlock(),e.createBlock(s,{key:0,plain:"",onClick:n.close},{default:e.withCtx(()=>[P]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0),n.updateVisible?(e.openBlock(),e.createBlock(s,{key:1,class:"es-margin-l--base",onClick:n.update},{default:e.withCtx(()=>[F]),_:1},8,["onClick"])):e.createCommentVNode("v-if",!0)])])):e.createCommentVNode("v-if",!0)])}var q=`.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;
}`;h(q),b.render=U,b.__scopeId="data-v-f553ffa8",b.__file="components/search-wrapper/index.vue",b.install=n=>{n.component("es-search-wrapper",b)};var k=e.defineComponent({components:{EsSearchLabel:u,EsSearchWrapper:b},props:{label:[String,Number],modelValue:[String,Number],placeholder:String,prependText:String,defaultValue:{type:String,default:""}},emits:["update:modelValue","done","clear","close"],setup(n,{emit:o}){const l=e.ref(""),t=e.ref(n.modelValue||""),a=r=>{t.value=l.value,o("update:modelValue",t.value),o("done",t.value),r&&r()};return e.watch(()=>n.modelValue,(r,p)=>{r!==p&&(t.value=r||"")}),{inputModel:l,clearInput:r=>{l.value="",o("update:modelValue",""),o("clear",""),r&&r()},labelModel:t,done:a,close:r=>{o("close",t.value),r&&r()},initalLabelModel:()=>{var r;const p=(r=n.modelValue)!=null?r:"";l.value=p,t.value=p}}}});const H={class:"es-search-input"};function R(n,o,l,t,a,d){const i=e.resolveComponent("es-search-wrapper"),s=e.resolveComponent("es-search-label");return e.openBlock(),e.createElementBlock("div",H,[e.createVNode(s,{label:n.label,value:n.labelModel||n.defaultValue,onOpen:n.initalLabelModel},{panel:e.withCtx(({closePanel:r})=>[e.createVNode(i,{modelValue:n.inputModel,"onUpdate:modelValue":o[0]||(o[0]=p=>n.inputModel=p),modelModifiers:{trim:!0},placeholder:n.placeholder,prependText:n.prependText,onDone:p=>n.done(r),onDelete:p=>n.clearInput(r),onClose:p=>n.close(r)},null,8,["modelValue","placeholder","prependText","onDone","onDelete","onClose"])]),_:1},8,["label","value","onOpen"])])}return k.render=R,k.__file="components/search-input/index.vue",k.install=n=>{n.component("es-search-input",k)},k});