You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
Svelte
45 lines
1.1 KiB
Svelte
10 months ago
|
<script>import { getContext } from "svelte";
|
||
|
|
export let selected = false;
|
||
|
|
export let controls = "";
|
||
|
|
export let active = getContext("active");
|
||
|
|
export let hover = getContext("hover");
|
||
|
|
export let flex = getContext("flex");
|
||
|
|
export let padding = getContext("padding");
|
||
|
|
export let rounded = getContext("rounded");
|
||
|
|
export let spacing = getContext("spacing");
|
||
|
|
const cBase = "text-center cursor-pointer transition-colors duration-100";
|
||
|
|
const cInterface = "";
|
||
|
|
$:
|
||
|
|
classesActive = selected ? active : hover;
|
||
|
|
$:
|
||
|
|
classesBase = `${cBase} ${flex} ${padding} ${rounded} ${classesActive} ${$$props.class ?? ""}`;
|
||
|
|
$:
|
||
|
|
classesInterface = `${cInterface} ${spacing}`;
|
||
|
|
function prunedRestProps() {
|
||
|
|
delete $$restProps.class;
|
||
|
|
return $$restProps;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<a
|
||
|
|
class="tab-anchor {classesBase}"
|
||
|
|
href={$$props.href}
|
||
|
|
{...prunedRestProps()}
|
||
|
|
aria-controls={controls}
|
||
|
|
on:click
|
||
|
|
on:keydown
|
||
|
|
on:keyup
|
||
|
|
on:keypress
|
||
|
|
on:mouseover
|
||
|
|
on:mouseleave
|
||
|
|
on:focus
|
||
|
|
on:blur
|
||
|
|
data-testid="tab-anchor"
|
||
|
|
>
|
||
|
|
<!-- Interface -->
|
||
|
|
<div class="tab-interface {classesInterface}">
|
||
|
|
{#if $$slots.lead}<div class="tab-lead"><slot name="lead" /></div>{/if}
|
||
|
|
<div class="tab-label"><slot /></div>
|
||
|
|
</div>
|
||
|
|
</a>
|