From b728454a60cf4db7aba4fd91b51d94f56fa15f3d Mon Sep 17 00:00:00 2001 From: Eric Y Liu Date: Fri, 19 Mar 2021 08:21:52 -0700 Subject: [PATCH] feat(popover): add closeOnOutsideClick prop --- COMPONENT_INDEX.md | 21 ++++++++++++--------- docs/src/COMPONENT_API.json | 12 +++++++++++- docs/src/pages/components/Popover.svx | 12 +++++++++++- src/Popover/Popover.svelte | 20 ++++++++++++++++++++ tests/Popover.test.svelte | 20 ++++++++++++++++++++ types/Popover/Popover.d.ts | 8 +++++++- 6 files changed, 81 insertions(+), 12 deletions(-) create mode 100644 tests/Popover.test.svelte diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c0fd7ebd..b307e9a8 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -2639,14 +2639,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------- | -| open | let | No | boolean | false | Set to `true` to display the popover | -| caret | let | No | boolean | false | Set to `true` render a caret | -| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant | -| relative | let | No | boolean | false | Set to `true` to use a relative position | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ | +| open | let | Yes | boolean | false | Set to `true` to display the popover | +| closeOnOutsideClick | let | No | boolean | false | Set to `true` to close the popover on an outside click | +| caret | let | No | boolean | false | Set to `true` render a caret | +| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | +| light | let | No | boolean | false | Set to `true` to enable the light variant | +| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant | +| relative | let | No | boolean | false | Set to `true` to use a relative position | ### Slots @@ -2656,7 +2657,9 @@ None. ### Events -None. +| Event name | Type | Detail | +| :------------ | :--------- | :----- | +| click:outside | dispatched | -- | ## `ProgressIndicator` diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 6a82283f..9da9b198 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -6800,6 +6800,16 @@ "value": "false", "isFunction": false, "constant": false, + "reactive": true + }, + { + "name": "closeOnOutsideClick", + "kind": "let", + "description": "Set to `true` to close the popover on an outside click", + "type": "boolean", + "value": "false", + "isFunction": false, + "constant": false, "reactive": false }, { @@ -6854,7 +6864,7 @@ } ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], - "events": [], + "events": [{ "type": "dispatched", "name": "click:outside" }], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, diff --git a/docs/src/pages/components/Popover.svx b/docs/src/pages/components/Popover.svx index 1a722a93..1619efb2 100644 --- a/docs/src/pages/components/Popover.svx +++ b/docs/src/pages/components/Popover.svx @@ -14,7 +14,7 @@ By default, the position of the popover component is absolute. -### Relative +### Relative position Set `relative` to `true` to use a relative position. @@ -25,6 +25,16 @@ Set `relative` to `true` to use a relative position. +### Close on outside click + +Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover. + +
+ Parent + {console.log('on:click:outside')}}> +
Content
+ +
### With caret diff --git a/src/Popover/Popover.svelte b/src/Popover/Popover.svelte index e3af397c..154a8bb4 100644 --- a/src/Popover/Popover.svelte +++ b/src/Popover/Popover.svelte @@ -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; + +
+ import { Popover } from "../types"; + + let open = false; + + + +
Content
+ diff --git a/types/Popover/Popover.d.ts b/types/Popover/Popover.d.ts index fb041746..f8feec0d 100644 --- a/types/Popover/Popover.d.ts +++ b/types/Popover/Popover.d.ts @@ -9,6 +9,12 @@ export interface PopoverProps */ open?: boolean; + /** + * Set to `true` to close the popover on an outside click + * @default false + */ + closeOnOutsideClick?: boolean; + /** * Set to `true` render a caret * @default false @@ -54,6 +60,6 @@ export interface PopoverProps export default class Popover extends SvelteComponentTyped< PopoverProps, - {}, + { ["click:outside"]: CustomEvent }, { default: {} } > {}