eslink-ui-plus
Version:
vue3 component library, css framework
36 lines (35 loc) • 2.77 kB
JavaScript
import{defineComponent as C,pushScopeId as x,popScopeId as $,resolveComponent as i,openBlock as s,createElementBlock as d,createBlock as c,withCtx as a,Fragment as w,renderList as B,createVNode as m,createElementVNode as v,normalizeClass as b,createCommentVNode as g}from"vue";import{ElPopover as E}from"element-plus";var r=C({props:{source:Array,type:{type:String,default:"x"}},components:{ElPopover:E},setup(){return{keyConfig:{valueKey:"name",labelKey:"icon"}}}});x("data-v-a53eef7a");const N=["onClick"];$();function S(e,p,l,o,t,A){const u=i("el-popover"),y=i("es-button"),_=i("es-button-group"),k=i("es-option");return s(),d("div",null,[e.type==="x"?(s(),c(_,{class:"es-icon-button-list",key:"icon-button-list"},{default:a(()=>[(s(!0),d(w,null,B(e.source,(n,f)=>(s(),c(y,{type:"pure",key:f,onClick:T=>n&&n.click()},{default:a(()=>[m(u,{content:n.name,trigger:"hover",offset:12,"popper-class":"popper-bg--black",width:"unset"},{reference:a(()=>[v("span",{class:b(["iconfont",n.icon])},null,2)]),_:2},1032,["content"])]),_:2},1032,["onClick"]))),128))]),_:1})):g("v-if",!0),e.type==="y"?(s(),c(k,{source:e.source,key:"option","key-config":e.keyConfig},{default:a(({item:n})=>[m(u,{content:n.name,trigger:"hover",offset:20,"popper-class":"popper-bg--unset",placement:"right",width:"unset"},{reference:a(()=>[v("span",{class:b(["iconfont",n.icon]),onClick:f=>n&&n.click()},null,10,N)]),_:2},1032,["content"])]),_:1},8,["source","key-config"])):g("v-if",!0)])}function h(e,p){p===void 0&&(p={});var l=p.insertAt;if(!(!e||typeof document=="undefined")){var o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",l==="top"&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}}var z=`.es-icon-button-list[data-v-a53eef7a] {
padding: 0 8px;
display: flex;
}
.es-icon-button-list[data-v-a53eef7a] .es-button {
width: 28px;
height: 28px;
line-height: 28px;
margin-left: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
}
.es-icon-button-list[data-v-a53eef7a] .es-button:hover {
background-color: unset;
border: 0;
}
.es-icon-button-list[data-v-a53eef7a] .es-button:first-of-type {
margin-left: 0;
}
.es-icon-button-list[data-v-a53eef7a] .es-button span {
width: 28px;
height: 28px;
color: var(--neutral8);
}`;h(z);var I=`
.popper-bg--black {\r
background: #282934 !important;\r
color: #ffffff !important;\r
font-size: 12px !important;
}
.popper-bg--unset {\r
background: #ffffff !important;
}\r
`;h(I),r.render=S,r.__scopeId="data-v-a53eef7a",r.__file="components/icon-button-list/index.vue",r.install=e=>{e.component("es-icon-button-list",r)};export{r as default};