83 lines
2.5 KiB
Svelte
83 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
|
import Fa from 'svelte-fa';
|
|
import Spinner from './Spinner.svelte';
|
|
|
|
export let icon: IconDefinition | undefined = undefined;
|
|
export let style: 'default' | 'red' | 'white' | 'dark' | 'accent' = 'default';
|
|
export let onClick: void | (() => void) | ((e: MouseEvent) => void) | undefined = undefined;
|
|
export let tabindex: number | undefined = undefined;
|
|
export let disabled: boolean = false;
|
|
export let full: boolean = false;
|
|
export let xButton: boolean = false;
|
|
export let large: boolean = false;
|
|
export let small: boolean = false;
|
|
export let iconOnly: boolean = false;
|
|
export let loading: boolean = false;
|
|
export let title: string | undefined = undefined;
|
|
|
|
function click(e: MouseEvent) {
|
|
if (onClick) onClick(e);
|
|
}
|
|
|
|
$: isDisabled = loading || disabled;
|
|
</script>
|
|
|
|
<button
|
|
class="h-10 px-4 py-2 bg-button-secondary-active-solid hover:bg-button-secondary-selected active:bg-button-secondary-active-solid text-text-primary disabled:bg-button-disabled disabled:text-text-disabled transition-colors font-semibold rounded-lg justify-center items-center gap-2 inline-flex break-words line-clamp-1"
|
|
class:style-red={style === 'red'}
|
|
class:style-white={style === 'white'}
|
|
class:style-dark={style === 'dark'}
|
|
class:style-accent={style === 'accent'}
|
|
class:w-full={full}
|
|
class:x={xButton}
|
|
class:sm={small}
|
|
class:!h-12={large}
|
|
disabled={isDisabled}
|
|
class:cursor-not-allowed={isDisabled}
|
|
{title}
|
|
on:click={click}
|
|
{tabindex}>
|
|
{#if !loading}
|
|
{#if icon}
|
|
<Fa {icon} size="xs" />
|
|
{/if}
|
|
{#if xButton && !iconOnly}
|
|
<span class="contents"><slot /></span>
|
|
{:else}
|
|
<slot />
|
|
{/if}
|
|
{:else}
|
|
<Spinner small={small || xButton} />
|
|
{/if}
|
|
</button>
|
|
|
|
<style lang="postcss">
|
|
button.style-red {
|
|
@apply bg-red-500 hover:bg-red-400 active:bg-red-500;
|
|
}
|
|
|
|
button.style-white {
|
|
@apply bg-text-header hover:bg-text-primary active:bg-text-header text-item;
|
|
}
|
|
|
|
button.style-dark {
|
|
@apply backdrop-blur-3xl bg-button-dark-transparent-fill hover:bg-button-secondary-selected active:bg-button-dark-fill text-text-header;
|
|
}
|
|
|
|
button.style-accent {
|
|
@apply bg-accent hover:bg-accent-hover active:bg-accent-active text-text-header;
|
|
}
|
|
|
|
button.x {
|
|
@apply rounded-full font-normal h-fit min-h-[36.8px] p-3;
|
|
}
|
|
|
|
button.x.sm {
|
|
@apply py-2;
|
|
}
|
|
|
|
button.x > span {
|
|
@apply block whitespace-nowrap leading-[.8];
|
|
}
|
|
</style>
|