eslink-ui-plus/es/button/index.js

vue3 component library, css framework

import{pushScopeId as s,popScopeId as b,defineComponent as p,useCssVars as y,openBlock as f,createElementBlock as l,normalizeStyle as u,createElementVNode as v,normalizeClass as i,renderSlot as d,createCommentVNode as c,toDisplayString as x}from"vue";s("data-v-2ca3eff0");const g={key:2,class:"button__text"};b();var r=p({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:o}){return y(a=>({"2ca3eff0-fontColor":e.fontColor})),(a,t)=>e.type==="icon"?(f(),l("button",{key:0,class:"button__icon es-cursor--pointer",style:u(e.styles),onClick:t[0]||(t[0]=n=>o("click"))},[v("i",{class:i(e.icon)},null,2)],4)):(f(),l("button",{key:1,class:i(["button",[e.type,{plain:e.plain}]]),style:u(e.styles),onClick:t[1]||(t[1]=n=>o("click"))},[e.iconBefore===""?d(a.$slots,"before",{key:0}):c("v-if",!0),e.iconBefore!==""?(f(),l("i",{key:1,class:i(["icon",e.iconBefore])},null,2)):c("v-if",!0),e.text!==""?(f(),l("span",g,x(e.text),1)):d(a.$slots,"default",{key:3}),e.iconAfter!==""?(f(),l("i",{key:4,class:i(["icon",e.iconAfter])},null,2)):c("v-if",!0),e.iconAfter===""?d(a.$slots,"after",{key:5}):c("v-if",!0)],6))}});function k(e,o){o===void 0&&(o={});var a=o.insertAt;if(!(!e||typeof document=="undefined")){var t=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",a==="top"&&t.firstChild?t.insertBefore(n,t.firstChild):t.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}var m=`.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);
}`;k(m),r.__scopeId="data-v-2ca3eff0",r.__file="components/button/index.vue",r.install=e=>{e.component("es-button",r)};export{r as default};