mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
parent
f61e316788
commit
88f4304d5a
2 changed files with 15 additions and 20 deletions
|
@ -81,6 +81,7 @@
|
|||
|
||||
setContext("OverflowMenu", {
|
||||
focusedId,
|
||||
items,
|
||||
add: ({ id, text, primaryFocus, disabled }) => {
|
||||
items.update((_) => {
|
||||
if (primaryFocus) {
|
||||
|
@ -90,8 +91,11 @@
|
|||
return [..._, { id, text, primaryFocus, disabled, index: _.length }];
|
||||
});
|
||||
},
|
||||
update: (id) => {
|
||||
update: (id, item) => {
|
||||
currentId.set(id);
|
||||
|
||||
dispatch("close", { index: item.index, text: item.text });
|
||||
open = false;
|
||||
},
|
||||
change: (direction) => {
|
||||
let index = $currentIndex + direction;
|
||||
|
@ -121,12 +125,6 @@
|
|||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if ($currentId) {
|
||||
const { index, text } = $items.filter((_) => _.id === $currentId)[0];
|
||||
dispatch("close", { index, text });
|
||||
open = false;
|
||||
}
|
||||
|
||||
if (open) {
|
||||
const width = buttonRef.offsetWidth;
|
||||
const height = buttonRef.offsetHeight;
|
||||
|
@ -183,6 +181,7 @@
|
|||
on:click={({ target }) => {
|
||||
if (buttonRef && buttonRef.contains(target)) return;
|
||||
if (menuRef && !menuRef.contains(target)) {
|
||||
dispatch("close");
|
||||
open = false;
|
||||
}
|
||||
}}
|
||||
|
@ -225,14 +224,6 @@
|
|||
}
|
||||
}
|
||||
}}
|
||||
on:focusout={(e) => {
|
||||
if (open) {
|
||||
if (!buttonRef.contains(e.relatedTarget)) {
|
||||
dispatch("close");
|
||||
open = false;
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<slot name="menu">
|
||||
<svelte:component
|
||||
|
|
|
@ -31,7 +31,9 @@
|
|||
|
||||
import { getContext, afterUpdate } from "svelte";
|
||||
|
||||
const { focusedId, add, update, change } = getContext("OverflowMenu");
|
||||
const { focusedId, add, update, change, items } = getContext("OverflowMenu");
|
||||
|
||||
$: item = $items.find((_) => _.id === id);
|
||||
|
||||
add({ id, text, primaryFocus, disabled });
|
||||
|
||||
|
@ -68,8 +70,9 @@
|
|||
bind:this={ref}
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
update(id);
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
update(id, item);
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
|
@ -91,8 +94,9 @@
|
|||
bind:this={ref}
|
||||
{...buttonProps}
|
||||
on:click
|
||||
on:click={() => {
|
||||
update(id);
|
||||
on:click={(e) => {
|
||||
e.stopPropagation();
|
||||
update(id, item);
|
||||
}}
|
||||
on:keydown
|
||||
on:keydown={({ key }) => {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue