mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

DropDown: add select event, fix closing when click outside of body

Browse source
This commit is contained in:
weaseldotro 2020-10-16 11:48:33 +03:00 • committed by GitHub
commit 122d347492
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Dropdown/Dropdown.svelte
View file

@ -113,6 +113,7 @@
* @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem * @typedef {{ id: DropdownItemId; text: DropdownItemText; }} DropdownItem
*/ */
import { createEventDispatcher } from "svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
import { import {
ListBox, ListBox,
@ -121,6 +122,8 @@
ListBoxMenuItem, ListBoxMenuItem,
} from "../ListBox"; } from "../ListBox";
const dispatch = createEventDispatcher();
let selectedId = undefined; let selectedId = undefined;
let highlightedIndex = -1; let highlightedIndex = -1;
@ -136,6 +139,9 @@
highlightedIndex = index; highlightedIndex = index;
} }
$: if (selectedIndex > -1) {
dispatch("select", { selectedId, selectedIndex, selectedItem });
}
$: inline = type === "inline"; $: inline = type === "inline";
$: selectedItem = items[selectedIndex]; $: selectedItem = items[selectedIndex];
$: if (!open) { $: if (!open) {
@ -143,7 +149,7 @@
} }
</script> </script>
<svelte:body <svelte:window
on:click="{({ target }) => { on:click="{({ target }) => {
if (open && ref && !ref.contains(target)) { if (open && ref && !ref.contains(target)) {
open = false; open = false;