You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

33 lines
744 B

<script>
import { visibility } from "$/client/helpers.js";
import { createEventDispatcher } from "svelte";
export let options = { threshold: 0};
export let visible = false;
export let idempotent = false; // this will make the visible slot stick
const dispatch = createEventDispatcher();
const show = (entry) => {
visible = true;
dispatch("visible", entry);
}
const hide = (entry) => {
// only do the hide if status is false
if(!idempotent) {
visible = false;
dispatch("hidden", entry);
}
}
</script>
<div use:visibility={ options } on:visible={ show } on:hidden={ hide }>
{#if visible}
<slot name="visible">
</slot>
{:else}
<slot name="hidden">
</slot>
{/if}
</div>