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
33 lines
744 B
2 years ago
|
<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>
|