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

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

"use strict";const e=require("vue"),n=require("../utils/getCssColor.js"),k={class:"FLink__content"},C={key:0,class:"FLink__arrow"},h=e.defineComponent({__name:"FLink",props:{color:{default:"secondary"},hoverColor:{default:"primary"},arrowColor:{default:"neutral--light-5"},arrowHoverColor:{default:"neutral--light-5"},prevent:{type:Boolean},disabled:{type:Boolean,default:!1},hideArrow:{type:Boolean,default:!1},underlined:{type:Boolean,default:!1},uppercase:{type:Boolean,default:!1},href:{default:void 0},hreflang:{default:void 0},target:{default:void 0},role:{default:void 0},tabindex:{default:void 0}},emits:["click","focus","blur"],setup(s,{emit:i}){const o=s,a=i,d=e.computed(()=>o.disabled?"-1":o.tabindex!==void 0?String(o.tabindex):void 0),f=e.computed(()=>({"FLink--disabled":o.disabled,"FLink--hided-arrow":o.hideArrow,"FLink--underlined":o.underlined,"FLink--uppercase":o.uppercase})),u=e.computed(()=>({"--flink--arrow--color":n.getCssColor(o.arrowColor),"--flink--arrow--hover-color":n.getCssColor(o.arrowHoverColor),"--flink--color":n.getCssColor(o.color),"--flink--hover-color":n.getCssColor(o.hoverColor)})),c=e.ref();function p(r){o.prevent&&r.preventDefault(),o.disabled||a("click",r)}return(r,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(r.href?"a":"span"),{class:e.normalizeClass(["FLink",e.unref(f)]),ref_key:"linkRef",ref:c,style:e.normalizeStyle(e.unref(u)),href:r.href,hreflang:r.hreflang,target:r.target,role:r.role,tabindex:e.unref(d),onBlur:l[0]||(l[0]=t=>a("blur",t)),onClick:l[1]||(l[1]=t=>p(t)),onFocus:l[2]||(l[2]=t=>a("focus",t))},{default:e.withCtx(()=>[e.createElementVNode("span",k,[e.renderSlot(r.$slots,"default")]),r.hideArrow?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",C,l[3]||(l[3]=[e.createElementVNode("svg",{width:"6.3",height:"10",fill:"none",xmlns:"http://www.w3.org/2000/svg"},[e.createElementVNode("path",{d:"M1 9l4-4-4-4","stroke-width":"2"})],-1)])))]),_:3},40,["style","class","href","hreflang","target","role","tabindex"]))}});module.exports=h;