christoph/svelte-formula11
1
Fork 0
Code Issues 21 Actions Packages Projects 1 Activity

Lib: Use <a> for button component's href mode (fixes preloading)

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-03 21:31:04 +01:00
parent 6dd3f24d32
commit 0dc5e63e25
1 changed files with 10 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/lib/components/form/Button.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import { page } from "$app/stores"; import { page } from "$app/stores";
import type { Snippet } from "svelte"; import type { Snippet } from "svelte";
import type { HTMLButtonAttributes } from "svelte/elements";
import { popup, type PopupSettings } from "@skeletonlabs/skeleton"; import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
const is_at_path = (path: string): boolean => { const is_at_path = (path: string): boolean => {
@ -10,7 +9,7 @@
return pathname.endsWith(path); return pathname.endsWith(path);
}; };
interface ButtonProps extends HTMLButtonAttributes { interface ButtonProps {
children: Snippet; children: Snippet;
/** The main color variant, e.g. "primary" or "secondary". */ /** The main color variant, e.g. "primary" or "secondary". */
@ -57,19 +56,15 @@
</script> </script>
{#if href} {#if href}
<!-- HACK: Make the button act as a link using a form --> <a
<form action={href} class="contents"> {href}
<button class="btn m-0 select-none px-2 py-2 {color ? `variant-filled-${color}` : ''} {width} {activate
type="submit" ? 'btn-hover'
class="btn m-0 select-none px-2 py-2 {color : ''} {activate_href && is_at_path(href) ? 'btn-hover' : ''} {shadow
? `variant-filled-${color}` ? 'shadow'
: ''} {width} {activate ? 'btn-hover' : ''} {activate_href && is_at_path(href) : ''} {extraclass}"
? 'btn-hover' {...restProps}>{@render children()}</a
: ''} {shadow ? 'shadow' : ''} {extraclass}" >
draggable="false"
{...restProps}>{@render children()}</button
>
</form>
{:else} {:else}
<button <button
type={submit ? "submit" : "button"} type={submit ? "submit" : "button"}