blisstown/campfire
blisstown/campfire
2
0
Fork 1
Code Issues 19 Pull requests Projects 1 Releases Activity

Button component improvements

Browse source 
buttons with a `href` now render as <a> elements, otherwise <button>
This commit is contained in:
ari melody 2025-07-14 01:06:16 +01:00
parent d0163ee094
commit 77665702b7
Signed by: ari
GPG key ID: CF99829C92678188
4 changed files with 64 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/lib/ui/Button.svelte
View file

@ -5,62 +5,62 @@
const dispatch = createEventDispatcher();
let className = "";
export { className as class };
export let active = false;
export let filled = false;
export let disabled = false;
export let centered = false;
export let label = undefined;
export let sound = "default";
export let href = false;
export let href = undefined;
export let onClick = undefined;
let classes = [];
function click() {
if (disabled) return;
if (href) {
const link = document.createElement('a');
link.href = href;
link.dispatchEvent(new MouseEvent('click', {
bubbles: true,
cancelable: true,
view: window,
ctrlKey: event.ctrlKey,
metaKey: event.metaKey,
shiftKey: event.shiftKey,
altKey: event.altKey,
button: event.button,
}));
return;
}
playSound(sound);
dispatch('click');
}
afterUpdate(() => {
classes = [];
if (active) classes = ["active"];
if (filled) classes = ["filled"];
if (disabled) classes = ["disabled"];
classes = className.split(' ');
if (active) classes.push("active");
if (filled) classes.push("filled");
if (disabled) classes.push("disabled");
if (centered) classes.push("centered");
});
</script>
<button
type="button"
class={classes.join(' ')}
title={label}
aria-label={label}
on:click={() => click()}>
<span class="icon">
<slot name="icon" />
</span>
<slot/>
</button>
{#if href}
<a
class={classes.join(' ')}
title={label}
aria-label={label}
href={href}
on:click={() => click()}>
<span class="icon">
<slot name="icon" />
</span>
<slot/>
</a>
{:else}
<button
type="button"
class={classes.join(' ')}
title={label}
aria-label={label}
on:click={() => click()}>
<span class="icon">
<slot name="icon" />
</span>
<slot/>
</button>
{/if}
<style>
button {
width: 100%;
a, button {
height: fit-content;
padding: .7em .8em;
display: flex;
@ -71,6 +71,7 @@
font-size: 1rem;
font-weight: 600;
text-align: left;
text-decoration: none;
border-radius: 8px;
border: 2px solid var(--bg-700);
@ -84,22 +85,32 @@
cursor: pointer;
}
a {
width: calc(100% - 1.6em);
}
button {
width: 100%;
}
a.centered,
button.centered {
text-align: center;
justify-content: center;
}
a:hover,
button:hover {
border-color: color-mix(in srgb, var(--bg-700), black 10%);
background-color: color-mix(in srgb, var(--bg-700), black 10%);
}
a:active,
button:active {
border-color: color-mix(in srgb, var(--bg-700), black 20%);
background-color: color-mix(in srgb, var(--bg-700), black 20%);
}
a.active,
button.active {
background-color: var(--bg-600);
color: var(--accent);
@ -107,34 +118,40 @@
text-shadow: 0px 2px 32px var(--accent);
}
a.active:hover,
button.active:hover {
color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
border-color: color-mix(in srgb, var(--accent), var(--bg-1000) 20%);
background-color: color-mix(in srgb, var(--bg-600), var(--accent) 10%);
}
a.active:active,
button.active:active {
color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
border-color: color-mix(in srgb, var(--accent), var(--bg-800) 10%);
background-color: color-mix(in srgb, var(--bg-600), var(--bg-800) 10%);
}
a.filled,
button.filled {
background-color: var(--accent);
color: var(--bg-800);
border-color: transparent;
}
a.filled:hover,
button.filled:hover {
color: color-mix(in srgb, var(--bg-800), white 10%);
background-color: color-mix(in srgb, var(--accent), white 20%);
}
a.filled:active,
button.filled:active {
color: color-mix(in srgb, var(--bg-800), black 10%);
background-color: color-mix(in srgb, var(--accent), black 20%);
}
a.disabled,
button.disabled {
color: var(--text);
opacity: .5;