vue-amazing-ui/lib/button/Button.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),h=require("@ant-design/colors"),s=require("../utils/index.cjs"),B={key:0,class:"btn-loading"},C={key:0,class:"static-circle"},w={key:1,class:"dynamic-circle"},E={key:1,class:"btn-icon"},x={key:2,class:"btn-content"},N=e.defineComponent({__name:"Button",props:{type:{default:"default"},shape:{default:"default"},icon:{type:[Object,Function],default:void 0},size:{default:"middle"},ghost:{type:Boolean,default:!1},buttonClass:{default:void 0},color:{default:void 0},href:{default:void 0},target:{default:"_self"},keyboard:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingType:{default:"dynamic"},block:{type:Boolean,default:!1}},emits:["click"],setup(t,{emit:f}){const c=t,a=e.ref(!1),{colorPalettes:m}=s.useInject("Button"),l=e.computed(()=>c.color!==void 0?h.generate(c.color):m.value),v=e.computed(()=>({default:l.value[5],reverse:l.value[5],primary:l.value[5],danger:"#ff4d4f",dashed:l.value[5],text:"transparent",link:"transparent"})[c.type]),b=f,i=s.useSlotsExist(["icon","default"]),r=e.computed(()=>i.icon||c.icon),y=e.computed(()=>r.value&&!i.default);function u(n){a.value?(a.value=!1,e.nextTick(()=>{a.value=!0})):a.value=!0,b("click",n)}function k(n){u(n)}function g(){a.value=!1}return(n,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.href?"a":"div"),{tabindex:"0",class:e.normalizeClass(["btn-wrap",[`btn-${t.type} btn-${t.size}`,{[`loading-${t.size}`]:!t.href&&t.loading,"btn-icon-only":y.value,"btn-circle":t.shape==="circle","btn-round":t.shape==="round","btn-loading-blur":!t.href&&t.loading,"btn-ghost":t.ghost,"btn-block":t.block,"btn-disabled":t.disabled},t.buttonClass]]),style:e.normalizeStyle(`
      --button-primary-color: ${l.value[5]};
      --button-primary-color-hover: ${l.value[4]};
      --button-primary-color-active: ${l.value[6]};
      --button-danger-color: #ff4d4f;
      --button-danger-color-hover: #ff7875;
      --button-danger-color-active: #d9363e;
      --button-text-color-hover: rgba(0, 0, 0, 0.06);
      --button-text-color-active: rgba(0, 0, 0, 0.15);
      --button-ripple-color: ${v.value};
    `),href:t.href,target:t.target,onClick:o[0]||(o[0]=d=>t.disabled||t.loading?()=>!1:u(d)),onKeydown:o[1]||(o[1]=e.withKeys(e.withModifiers(d=>t.keyboard&&!t.disabled&&!t.loading?k(d):()=>!1,["prevent"]),["enter"]))},{default:e.withCtx(()=>[t.loading||!r.value?(e.openBlock(),e.createElementBlock("div",B,[!t.href&&t.loadingType==="static"?(e.openBlock(),e.createElementBlock("div",C,[...o[2]||(o[2]=[e.createElementVNode("svg",{class:"circle",width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 100 100"},[e.createElementVNode("path",{d:"M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90","stroke-linecap":"round",class:"path","fill-opacity":"0"})],-1)])])):e.createCommentVNode("",!0),!t.href&&t.loadingType==="dynamic"?(e.openBlock(),e.createElementBlock("div",w,[...o[3]||(o[3]=[e.createElementVNode("svg",{class:"circle",viewBox:"0 0 50 50",width:"1em",height:"1em",fill:"currentColor"},[e.createElementVNode("circle",{class:"path",cx:"25",cy:"25",r:"20",fill:"none"})],-1)])])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),!t.loading&&r.value?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(n.$slots,"icon",{},()=>[t.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.icon),{key:0})):e.createCommentVNode("",!0)],!0)])):e.createCommentVNode("",!0),e.unref(i).default?(e.openBlock(),e.createElementBlock("span",x,[e.renderSlot(n.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0),t.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["button-wave",{"wave-active":a.value}]),onAnimationend:g},null,34))]),_:3},40,["class","style","href","target"]))}});exports.default=N;