midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add svelte slots to SubtleButton

Browse source
This commit is contained in:
wjtje 2023-02-03 16:11:46 +01:00 committed by Pieter Vander Vennet
parent 0d8a3f1a58
commit 227551c7cb
1 changed files with 48 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
UI/Base/SubtleButton.svelte
View file

@ -7,11 +7,18 @@
export let imageUrl: string | BaseUIElement
export let message: string | BaseUIElement
export let options: { url?: string | Store<string>; newTab?: boolean; imgSize?: string, extraClasses?: string }
export let options: {
url?: string | Store<string>
newTab?: boolean
imgSize?: string
extraClasses?: string
}
let element: HTMLElement
let href = typeof options?.url == "string" ? options.url : ""
let imgElem: HTMLElement
let msgElem: HTMLElement
onMount(() => {
if (typeof options?.url != "string" && options?.url != undefined) {
options.url.addCallbackAndRun((data) => {
@ -19,33 +26,53 @@
})
}
let img: BaseUIElement
const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
if ((imageUrl ?? "") === "") {
img = undefined
} else if (typeof imageUrl === "string") {
img = new Img(imageUrl)?.SetClass(imgClasses)
} else {
img = imageUrl?.SetClass(imgClasses)
}
if (img != undefined) element.appendChild(img.ConstructElement())
// Image
if (imgElem != undefined) {
let img: BaseUIElement
let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
element.appendChild(msg.ConstructElement())
const imgClasses = "block justify-center flex-none mr-4 " + (options?.imgSize ?? "h-11 w-11")
if ((imageUrl ?? "") === "") {
img = undefined
} else if (typeof imageUrl === "string") {
img = new Img(imageUrl)?.SetClass(imgClasses)
} else {
img = imageUrl?.SetClass(imgClasses)
}
if (img) imgElem.replaceWith(img.ConstructElement())
}
// Message
if (msgElem != undefined) {
let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
msgElem.replaceWith(msg.ConstructElement())
}
})
</script>
{#if options?.url == undefined}
<span bind:this={element} class="{options.extraClasses}"/>
{:else}
<a {href} class="no-underline" bind:this={element} target={options?.newTab ? "_blank" : ""} />
{/if}
<svelte:element
this={options?.url == undefined ? "span" : "a"}
class={options.extraClasses}
target={options?.newTab ? "_blank" : ""}
{href}
>
<slot name="image">
<template bind:this={imgElem} />
</slot>
<slot name="message">
<template bind:this={msgElem} />
</slot>
</svelte:element>
<style lang="scss">
span,
a {
@apply flex p-3 my-2 rounded-lg hover:shadow-xl transition-colors transition-shadow;
@apply items-center w-full;
@apply flex p-3 my-2 rounded-lg hover:shadow-xl transition-[color,background-color,box-shadow];
@apply items-center w-full no-underline;
@apply bg-subtle text-black hover:bg-unsubtle;
:global(img) {
@apply block justify-center flex-none mr-4 h-11 w-11;
}
}
</style>