mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 20:09:35 +00:00
feat(popover): add closeOnOutsideClick prop
This commit is contained in:
parent
4397d852eb
commit
b728454a60
6 changed files with 81 additions and 12 deletions
|
@ -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}"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue