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

vue3 component library, css framework

import{defineComponent as b,ref as c,pushScopeId as y,popScopeId as g,resolveComponent as S,openBlock as a,createBlock as C,withCtx as v,createElementVNode as d,normalizeClass as u,normalizeStyle as $,renderSlot as i,createElementBlock as t,toDisplayString as _}from"vue";import{ElPopover as k}from"element-plus";var o=b({components:{ElPopover:k},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:l,slots:r}){const n=c(!1),s=c(null);return{panelVisible:n,closePanel:()=>{n.value=!1},slots:r,popoverEl:s,emit:l}}});y("data-v-8823a666");const E={key:1,class:"es-search-label__container"},w={key:0,class:"es-search-label__container__label"},B={key:1,class:"es-search-label__container__label"},z={key:2,class:"es-search-label__container__value"},N={key:3,class:"es-search-label__container__value"},P=d("div",{class:"es-search-label__container__icon es-icon-arrow-down-s-fill"},null,-1);g();function I(e,l,r,n,s,h){const m=S("el-popover");return a(),C(m,{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":l[0]||(l[0]=p=>e.panelVisible=p),onShow:l[1]||(l[1]=p=>e.emit("open")),onHide:l[2]||(l[2]=p=>e.emit("close"))},{reference:v(()=>[d("div",{class:u(["es-search-label",e.class]),style:$(e.styles)},[e.slots.main?i(e.$slots,"main",{key:0}):(a(),t("div",E,[e.slots.label?(a(),t("div",w,[i(e.$slots,"label")])):(a(),t("div",B,_(e.label),1)),e.slots.value?(a(),t("div",z,[i(e.$slots,"value")])):(a(),t("div",N,_(e.value),1)),P]))],6)]),default:v(()=>[d("div",{class:u(["es-search-label__slot",e.panelClass])},[i(e.$slots,"panel",{closePanel:e.closePanel,popoverEl:e.popoverEl})],2)]),_:3},8,["popper-class","visible"])}function f(e,l){l===void 0&&(l={});var r=l.insertAt;if(!(!e||typeof document=="undefined")){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css",r==="top"&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}var V=`.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;
}`;f(V);var T=`.el-popover--no-padding {
  padding: 0 !important;
}
.el-popover.el-popper {
  min-width: unset !important;
}
.el-popper__arrow {
  display: none;
}`;f(T),o.render=I,o.__scopeId="data-v-8823a666",o.__file="components/search-label/index.vue",o.install=e=>{e.component("es-search-label",o)};export{o as default};