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"),g=require("@ant-design/colors"),u=require("../utils/index.cjs"),h={key:0,class:"btn-loading"},B={key:0,class:"static-circle"},C={key:1,class:"dynamic-circle"},w={key:1,class:"btn-icon"},E={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(c,{emit:f}){const a=c,n=e.ref(!1),{colorPalettes:p}=u.useInject("Button"),l=e.computed(()=>a.color!==void 0?g.generate(a.color):p.value),m=e.computed(()=>({default:l.value[5],reverse:l.value[5],primary:l.value[5],danger:"#ff4d4f",dashed:l.value[5],text:"transparent",link:"transparent"})[a.type]),v=f,r=u.useSlotsExist(["icon","default"]),s=e.computed(()=>r.icon||a.icon),b=e.computed(()=>s.value&&!r.default);function d(o){n.value?(n.value=!1,e.nextTick(()=>{n.value=!0})):n.value=!0,v("click",o)}function y(o){d(o)}function k(){n.value=!1}return(o,t)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.href?"a":"div"),{tabindex:"0",class:e.normalizeClass(["btn-wrap",[`btn-${o.type} btn-${o.size}`,{[`loading-${o.size}`]:!o.href&&o.loading,"btn-icon-only":b.value,"btn-circle":o.shape==="circle","btn-round":o.shape==="round","btn-loading-blur":!o.href&&o.loading,"btn-ghost":o.ghost,"btn-block":o.block,"btn-disabled":o.disabled},o.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: ${m.value};
    `),href:o.href,target:o.target,onClick:t[0]||(t[0]=i=>o.disabled||o.loading?()=>!1:d(i)),onKeydown:t[1]||(t[1]=e.withKeys(e.withModifiers(i=>o.keyboard&&!o.disabled&&!o.loading?y(i):()=>!1,["prevent"]),["enter"]))},{default:e.withCtx(()=>[o.loading||!s.value?(e.openBlock(),e.createElementBlock("div",h,[!o.href&&o.loadingType==="static"?(e.openBlock(),e.createElementBlock("div",B,[...t[2]||(t[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),!o.href&&o.loadingType==="dynamic"?(e.openBlock(),e.createElementBlock("div",C,[...t[3]||(t[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),!o.loading&&s.value?(e.openBlock(),e.createElementBlock("span",w,[e.renderSlot(o.$slots,"icon",{},()=>[o.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),{key:0})):e.createCommentVNode("",!0)],!0)])):e.createCommentVNode("",!0),e.unref(r).default?(e.openBlock(),e.createElementBlock("span",E,[e.renderSlot(o.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0),o.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:3,class:e.normalizeClass(["button-wave",{"wave-active":n.value}]),onAnimationend:k},null,34))]),_:3},40,["class","style","href","target"]))}});exports.default=N;