forked from MapComplete/MapComplete
b55d976492
Looking at https://github.com/dcastil/tailwind-merge/blob/v1.13.1/docs/when-and-how-to-use-it.md#how-to-use-it I placed the "winning" class at the end for twMerge
49 lines
1.2 KiB
Svelte
49 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte"
|
|
import { twJoin, twMerge } from "tailwind-merge"
|
|
import BaseUIElement from "../BaseUIElement"
|
|
import Img from "./Img"
|
|
|
|
export let imageUrl: string | BaseUIElement = undefined
|
|
export let href: string
|
|
export let newTab = false
|
|
export let options: {
|
|
imgSize?: string
|
|
extraClasses?: string
|
|
} = {}
|
|
|
|
let imgElem: HTMLElement
|
|
let imgClasses = twJoin("block justify-center shrink-0 mr-4", options?.imgSize ?? "h-11 w-11")
|
|
|
|
onMount(() => {
|
|
// Image
|
|
if (imgElem && imageUrl) {
|
|
let img: BaseUIElement
|
|
|
|
if ((imageUrl ?? "") === "") {
|
|
img = undefined
|
|
} else if (typeof imageUrl !== "string") {
|
|
img = imageUrl?.SetClass(imgClasses)
|
|
}
|
|
if (img) imgElem.replaceWith(img.ConstructElement())
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<a
|
|
class={twMerge(options.extraClasses, "button text-ellipsis")}
|
|
{href}
|
|
target={newTab ? "_blank" : undefined}
|
|
>
|
|
<slot name="image">
|
|
{#if imageUrl !== undefined}
|
|
{#if typeof imageUrl === "string"}
|
|
<Img src={imageUrl} class={imgClasses} />
|
|
{:else}
|
|
<template bind:this={imgElem} />
|
|
{/if}
|
|
{/if}
|
|
</slot>
|
|
|
|
<slot />
|
|
</a>
|