76 lines
2.1 KiB
Svelte
76 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { page } from "$app/stores";
|
|
import type { Snippet } from "svelte";
|
|
import type { HTMLButtonAttributes } from "svelte/elements";
|
|
import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
|
|
|
|
const is_at_path = (path: string): boolean => {
|
|
const pathname: string = $page.url.pathname;
|
|
// console.log(pathname);
|
|
return pathname === path;
|
|
};
|
|
|
|
interface ButtonProps extends HTMLButtonAttributes {
|
|
children: Snippet;
|
|
|
|
/** The main color variant, e.g. "primary" or "secondary". */
|
|
color?: string | undefined;
|
|
|
|
/** Set the button type to "submit" (otherwise "button"). Only if "href" is undefined. */
|
|
submit?: boolean;
|
|
|
|
/** Make the button act as a link. */
|
|
href?: string | undefined;
|
|
|
|
/** Add a width class to the button. */
|
|
width?: string;
|
|
|
|
/** Enable the button's ":hover" state manually. */
|
|
activate?: boolean;
|
|
|
|
/** Enable the button's ":hover" state if the current URL matches the "href". Only if "href" is defined. */
|
|
activate_href?: boolean;
|
|
|
|
/** The PopupSettings to trigger on click. Only if "href" is undefined. */
|
|
trigger_popup?: PopupSettings;
|
|
}
|
|
|
|
let {
|
|
children,
|
|
color = undefined,
|
|
submit = false,
|
|
href = undefined,
|
|
width = "w-auto",
|
|
activate = false,
|
|
activate_href = false,
|
|
trigger_popup = { event: "click", target: "invalid" },
|
|
...restProps
|
|
}: ButtonProps = $props();
|
|
</script>
|
|
|
|
{#if href}
|
|
<!-- HACK: Make the button act as a link using a form -->
|
|
<form action={href} class="contents">
|
|
<button
|
|
type="submit"
|
|
class="btn m-0 select-none px-2 py-2 {color
|
|
? `variant-filled-${color}`
|
|
: ''} {width} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href)
|
|
? 'btn-hover'
|
|
: ''}"
|
|
draggable="false"
|
|
{...restProps}>{@render children()}</button
|
|
>
|
|
</form>
|
|
{:else}
|
|
<button
|
|
type={submit ? "submit" : "button"}
|
|
class="btn select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
|
|
? 'btn-hover'
|
|
: ''}"
|
|
draggable="false"
|
|
use:popup={trigger_popup}
|
|
{...restProps}>{@render children()}</button
|
|
>
|
|
{/if}
|