budibase/packages/standard-components/src/Link.svelte

<script>

import { cssVars, createClasses } from "./cssVars"

export let url = ""
export let text = ""
export let openInNewTab = false
export let color
export let hoverColor
export let underline = false
export let fontSize

export let _bb

let anchorElement

$: anchorElement && !text && _bb.attachChildren(anchorElement)
$: target = openInNewTab ? "_blank" : "_self"
$: cssVariables = {
      hoverColor,
      color,
      textDecoration: underline ? "underline" : "none",
      fontSize
  }
$: classes = createClasses(cssVariables)

</script>

<a 
  href={url} 
  bind:this={anchorElement} 
  class={classes}
  target={target}
  use:cssVars={cssVariables}>{text}</a>


<style>

.color {
  color: var(--color)
}

.hoverColor:hover {
  color: var(--color)
}

.textDecoration {
  text-decoration: var(--textDecoration)
}

.fontSize {
  font-size: var(--fontSize)
}

</style>