forked from lapikud/lapikud.github.io
72 lines
1.8 KiB
Svelte
72 lines
1.8 KiB
Svelte
<script>
|
|
import Button from "./Button.svelte";
|
|
import ButtonBorderless from "./ButtonBorderless.svelte";
|
|
|
|
// Props
|
|
export let name = "";
|
|
export let variant = "default"; // 'default' | 'borderless' aka 'Button' | 'ButtonBorderless'
|
|
|
|
let isOpen = false;
|
|
|
|
const toggle = () => (isOpen = !isOpen);
|
|
const close = () => (isOpen = false);
|
|
|
|
function handleFocusOut({ relatedTarget, currentTarget }) {
|
|
if (
|
|
relatedTarget instanceof HTMLElement &&
|
|
currentTarget.contains(relatedTarget)
|
|
)
|
|
return;
|
|
close();
|
|
}
|
|
</script>
|
|
|
|
<div class="relative inline-block" on:focusout={handleFocusOut}>
|
|
{#if variant === "borderless"}
|
|
<ButtonBorderless onClick={toggle}>
|
|
{name}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="w-5 ml-2 mt-1 transition-transform inline-block"
|
|
style:transform={isOpen ? "rotate(180deg)" : "none"}
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m19.5 8.25-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</ButtonBorderless>
|
|
{:else}
|
|
<Button onClick={toggle}>
|
|
{name}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="2"
|
|
stroke="currentColor"
|
|
class="w-5 ml-2 mt-1 transition-transform inline-block"
|
|
style:transform={isOpen ? "rotate(180deg)" : "none"}
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="m19.5 8.25-7.5 7.5-7.5-7.5"
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
{/if}
|
|
|
|
<div
|
|
class="absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black/5 overflow-hidden flex flex-col"
|
|
style:visibility={isOpen ? "visible" : "hidden"}
|
|
>
|
|
<slot />
|
|
</div>
|
|
</div>
|