@aotearoan/neon
Version:
Neon is a lightweight design library of Vue 3 components with minimal dependencies.
3 lines (2 loc) • 2.67 kB
JavaScript
"use strict";const e=require("vue"),b=require("../../../common/enums/NeonButtonSize.cjs.js"),y=require("../../../common/enums/NeonFunctionalColor.cjs.js"),u=require("../../../common/enums/NeonButtonStyle.cjs.js"),S=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),N=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../presentation/expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),h=e.defineComponent({name:"NeonButton",components:{NeonExpansionIndicator:g,NeonIcon:N,NeonLink:B},props:{href:{type:String,default:null},label:{type:String,default:null},size:{type:String,default:b.NeonButtonSize.Medium},color:{type:String,default:y.NeonFunctionalColor.LowContrast},inverse:{type:Boolean,default:!1},alternateColor:{type:String,default:null},icon:{type:String,default:null},iconPosition:{type:String,default:S.NeonHorizontalPosition.Left},buttonStyle:{type:String,default:u.NeonButtonStyle.Solid},state:{type:String,default:o.NeonState.Ready},disabled:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},circular:{type:Boolean,default:null},fullWidth:{type:Boolean,default:null},indicator:{type:Boolean,default:!1},indicatorExpanded:{type:Boolean,default:null}},emits:["click"],setup(t,{emit:a}){const i=e.useAttrs(),l=e.ref(null),c=e.computed(()=>{switch(t.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return"check";case o.NeonState.Error:return"times";default:return t.icon}}),r=e.computed(()=>[`neon-button--${t.size}`,!t.inverse&&`neon-button--${t.color}`,`neon-button--${t.buttonStyle}`,`neon-button--state-${t.state}`,{"neon-button--text-transparent":t.transparent&&t.buttonStyle===u.NeonButtonStyle.Text,"neon-button--disabled":t.disabled,"neon-button--inverse":t.inverse,"neon-button--circular":t.circular,"neon-button--no-outline":!t.outline,"neon-button--full-width":t.fullWidth,"neon-button--with-icon neon-button--icon-only":!t.label&&t.icon&&!t.indicator,"neon-button--with-icon neon-button--icon-left":t.label&&t.icon&&t.iconPosition==="left","neon-button--with-icon neon-button--icon-right":t.label&&t.icon&&t.iconPosition==="right",[`neon-button--alternate-color-${t.alternateColor}`]:t.alternateColor}]),d=()=>{var n;return(n=l.value)==null?void 0:n.click()},s=e.computed(()=>{const{onClick:n,...f}=i;return f});return{iconName:c,classes:r,button:l,attrs:i,sanitizedAttributes:s,clickLink:d,clickButton:()=>{var n;t.disabled||a("click"),(n=l.value)==null||n.blur()}}}});module.exports=h;
//# sourceMappingURL=NeonButton.cjs.js.map