feat(popover): add closeOnOutsideClick prop

This commit is contained in:
Eric Y Liu 2021-03-19 08:21:52 -07:00
commit b728454a60
6 changed files with 81 additions and 12 deletions

View file

@ -2,6 +2,9 @@
/** Set to `true` to display the popover */
export let open = false;
/** Set to `true` to close the popover on an outside click */
export let closeOnOutsideClick = false;
/** Set to `true` render a caret */
export let caret = false;
@ -19,9 +22,26 @@
/** Set to `true` to use a relative position */
export let relative = false;
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
let ref = null;
</script>
<svelte:window
on:click="{(e) => {
if (!open) return;
if (e.target.contains(ref)) {
dispatch('click:outside');
if (closeOnOutsideClick) open = false;
}
}}"
/>
<div
bind:this="{ref}"
class:bx--popover="{true}"
class:bx--popover--caret="{caret}"
class:bx--popover--light="{light}"