mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(context-menu): include clicked element in "open" event detail

Browse source
This commit is contained in:
metonym 2021-11-18 13:09:06 -08:00
commit c43da25e43
5 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

12
COMPONENT_INDEX.md
View file

@ -796,12 +796,12 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :----------------------- |
| click | forwarded | -- | | open | dispatched | <code>HTMLElement</code> |
| keydown | forwarded | -- | | click | forwarded | -- |
| open | dispatched | -- | | keydown | forwarded | -- |
| close | dispatched | -- | | close | dispatched | -- |
## `ContextMenuDivider` ## `ContextMenuDivider`

2
docs/src/COMPONENT_API.json
View file

@ -1867,9 +1867,9 @@
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [
{ "type": "dispatched", "name": "open", "detail": "HTMLElement" },
{ "type": "forwarded", "name": "click", "element": "ul" }, { "type": "forwarded", "name": "click", "element": "ul" },
{ "type": "forwarded", "name": "keydown", "element": "ul" }, { "type": "forwarded", "name": "keydown", "element": "ul" },
{ "type": "dispatched", "name": "open" },
{ "type": "dispatched", "name": "close" } { "type": "dispatched", "name": "close" }
], ],
"typedefs": [], "typedefs": [],

8
src/ContextMenu/ContextMenu.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {HTMLElement} open
*/
/** /**
* Specify an element or list of elements to trigger the context menu. * Specify an element or list of elements to trigger the context menu.
* If no element is specified, the context menu applies to the entire window * If no element is specified, the context menu applies to the entire window
@ -42,6 +46,7 @@
let prevX = 0; let prevX = 0;
let prevY = 0; let prevY = 0;
let focusIndex = -1; let focusIndex = -1;
let openDetail = null;
function close() { function close() {
open = false; open = false;
@ -75,6 +80,7 @@
} }
position.set([x, y]); position.set([x, y]);
open = true; open = true;
openDetail = e.target;
} }
$: if (target != null) { $: if (target != null) {
@ -119,7 +125,7 @@
prevY = y; prevY = y;
} }
dispatch("open"); dispatch("open", openDetail);
} else { } else {
dispatch("close"); dispatch("close");
} }

2
tests/ContextMenu.test.svelte
View file

@ -15,7 +15,7 @@
$: console.log("selectedId", selectedId); $: console.log("selectedId", selectedId);
</script> </script>
<ContextMenu> <ContextMenu open on:open="{(e) => console.log(e.detail)}">
<ContextMenuOption <ContextMenuOption
kind="danger" kind="danger"
indented indented

2
types/ContextMenu/ContextMenu.svelte.d.ts vendored
View file

@ -39,9 +39,9 @@ export interface ContextMenuProps
export default class ContextMenu extends SvelteComponentTyped< export default class ContextMenu extends SvelteComponentTyped<
ContextMenuProps, ContextMenuProps,
{ {
open: CustomEvent<HTMLElement>;
click: WindowEventMap["click"]; click: WindowEventMap["click"];
keydown: WindowEventMap["keydown"]; keydown: WindowEventMap["keydown"];
open: CustomEvent<any>;
close: CustomEvent<any>; close: CustomEvent<any>;
}, },
{ default: {} } { default: {} }