@fifteen/design-system-vue/dist/cjs/components/FButton.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const F=require("./FLoader.js");;/* empty css          */const o=require("vue"),_=require("./FLink.js");;/* empty css        */const w=require("../constants/colors.js"),n=require("../utils/getCssColor.js"),q=require("../composables/useFBreakpoints.js"),D={class:"FButton__container"},K=o.defineComponent({__name:"FButton",props:{submit:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},preventDefault:{type:Boolean,default:!1},ghost:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},icon:{type:Boolean,default:!1},size:{default:"medium"},preventClick:{type:Boolean,default:!1},preventBlurOnClick:{type:Boolean,default:!1},color:{default:"primary"},background:{default:""},hoverColor:{default:""},focusColor:{default:""},anchorPoint:{default:"center"},circle:{type:Boolean,default:!1},static:{type:Boolean,default:!1},href:{default:void 0},hreflang:{default:void 0},target:{default:void 0}},emits:["click","focus","blur"],setup(f,{emit:p}){const e=f,a=p,{isXsAndDown:g}=q.useFBreakpoints(),d=o.ref(),u=o.computed(()=>!!(e.color&&e.background)),s=o.computed(()=>e.disabled?"neutral--light-2":u.value?e.color:e.ghost||e.outlined?"neutral--dark-5":"neutral--light-5"),b=o.computed(()=>u.value&&e.color.includes("-")?e.background:e.color+"--dark-2"),v=o.computed(()=>e.ghost||e.outlined?"":e.disabled?"neutral--light-4":u.value?e.background:e.color),C=o.computed(()=>{if(e.hoverColor)return e.hoverColor;if(w.colorDesignTokens.includes(e.color)){const l=/--(light|dark)-[0-5]/;return l.test(e.color)?e.color.replace(l,""):e.color+"--light-2"}return s.value}),m=o.computed(()=>e.focusColor||(u.value?"neutral--light-2":e.disabled?"":e.color.includes("-")?e.color:e.color+"--light-2")),B=o.computed(()=>({["FButton--"+e.size]:!0,"FButton--icon":e.icon,"FButton--disabled":e.disabled,"FButton--loading":e.loading,"FButton--ghost":e.ghost,"FButton--outlined":e.outlined,"FButton--circle":e.circle,"FButton--static":g.value||e.static})),i=o.computed(()=>e.href&&!e.submit),h=o.computed(()=>i.value?{hideArrow:!0,role:"button",prevent:e.preventDefault,href:e.href,hreflang:e.hreflang,target:e.target}:{type:e.submit&&!e.loading&&!e.disabled?"submit":"button"}),k=o.computed(()=>({"--fbutton--text-color":n.getCssColor(s),"--fbutton--text-color--hover":n.getCssColor(b),"--fbutton--background-color":n.getCssColor(v),"--fbutton--background-color--hover":n.getCssColor(C),"--fbutton--outline-color":n.getCssColor(s),"--fbutton--focus-color":n.getCssColor(m),"--fbutton--anchor-point":e.anchorPoint}));function c(l){!e.href&&!e.submit&&l.preventDefault(),!e.loading&&!e.disabled&&!e.preventClick&&a("click",l),!!l.detail&&!e.preventBlurOnClick&&!i.value&&d.value?.blur()}return(l,t)=>{const y=F;return o.openBlock(),o.createBlock(o.resolveDynamicComponent(o.unref(i)?_:"button"),o.mergeProps({class:["FButton",o.unref(B)],ref_key:"buttonRef",ref:d,style:o.unref(k)},o.unref(h),{onBlur:t[0]||(t[0]=r=>a("blur",r)),onClick:t[1]||(t[1]=r=>c(r)),onFocus:t[2]||(t[2]=r=>a("focus",r)),onKeydown:[t[3]||(t[3]=o.withKeys(o.withModifiers(r=>c(r),["stop"]),["space"])),t[4]||(t[4]=o.withKeys(o.withModifiers(r=>c(r),["stop"]),["enter"]))]}),{default:o.withCtx(()=>[o.createElementVNode("div",D,[o.renderSlot(l.$slots,"default"),l.loading?(o.openBlock(),o.createBlock(y,{key:0,class:"FButton__loader",height:"100%",width:"100%",color:o.unref(s)},null,8,["color"])):o.createCommentVNode("",!0)])]),_:3},16,["style","class"])}}});module.exports=K;