mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(modal): dispatch transitionend event

Browse source
This commit is contained in:
Eric Liu 2021-02-03 10:25:29 -08:00
commit cbea1df97a
6 changed files with 52 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

43
COMPONENT_INDEX.md
View file

@ -659,16 +659,16 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :------------ | :--------- | :----- | | :------------ | :--------- | :------------------------------ |
| click | forwarded | -- | | transitionend | dispatched | <code>{ open: boolean; }</code> |
| mouseover | forwarded | -- | | click | forwarded | -- |
| mouseenter | forwarded | -- | | mouseover | forwarded | -- |
| mouseleave | forwarded | -- | | mouseenter | forwarded | -- |
| transitionend | forwarded | -- | | mouseleave | forwarded | -- |
| submit | dispatched | -- | | submit | dispatched | -- |
| close | dispatched | -- | | close | dispatched | -- |
| open | dispatched | -- | | open | dispatched | -- |
## `Content` ## `Content`
@ -2041,17 +2041,18 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :---------------------- | :--------- | :----- | | :---------------------- | :--------- | :------------------------------ |
| keydown | forwarded | -- | | transitionend | dispatched | <code>{ open: boolean; }</code> |
| click | forwarded | -- | | keydown | forwarded | -- |
| mouseover | forwarded | -- | | click | forwarded | -- |
| mouseenter | forwarded | -- | | mouseover | forwarded | -- |
| mouseleave | forwarded | -- | | mouseenter | forwarded | -- |
| submit | dispatched | -- | | mouseleave | forwarded | -- |
| click:button--secondary | dispatched | -- | | submit | dispatched | -- |
| close | dispatched | -- | | click:button--secondary | dispatched | -- |
| open | dispatched | -- | | close | dispatched | -- |
| open | dispatched | -- |
## `ModalBody` ## `ModalBody`

11
docs/src/COMPONENT_API.json
View file

@ -1713,11 +1713,15 @@
], ],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [ "events": [
{
"type": "dispatched",
"name": "transitionend",
"detail": "{ open: boolean; }"
},
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "transitionend", "element": "div" },
{ "type": "dispatched", "name": "submit" }, { "type": "dispatched", "name": "submit" },
{ "type": "dispatched", "name": "close" }, { "type": "dispatched", "name": "close" },
{ "type": "dispatched", "name": "open" } { "type": "dispatched", "name": "open" }
@ -5618,6 +5622,11 @@
} }
], ],
"events": [ "events": [
{
"type": "dispatched",
"name": "transitionend",
"detail": "{ open: boolean; }"
},
{ "type": "forwarded", "name": "keydown", "element": "div" }, { "type": "forwarded", "name": "keydown", "element": "div" },
{ "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" },

11
src/ComposedModal/ComposedModal.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {{ open: boolean; }} transitionend
*/
/** /**
* Set the size of the composed modal * Set the size of the composed modal
* @type {"xs" | "sm" | "lg"} * @type {"xs" | "sm" | "lg"}
@ -102,8 +106,11 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:transitionend on:transitionend="{({ propertyName, currentTarget }) => {
on:transitionend="{({ currentTarget }) => { if (propertyName === 'transform') {
dispatch('transitionend', { open });
}
if (didOpen) { if (didOpen) {
focus(currentTarget); focus(currentTarget);
didOpen = false; didOpen = false;

9
src/Modal/Modal.svelte
View file

@ -1,4 +1,8 @@
<script> <script>
/**
* @event {{ open: boolean; }} transitionend
*/
/** /**
* Set the size of the modal * Set the size of the modal
* @type {"xs" | "sm" | "lg"} * @type {"xs" | "sm" | "lg"}
@ -151,6 +155,11 @@
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave
on:transitionend="{(e) => {
if (e.propertyName === 'transform') {
dispatch('transitionend', { open });
}
}}"
> >
<div <div
bind:this="{innerModal}" bind:this="{innerModal}"

2
types/ComposedModal/ComposedModal.d.ts vendored
View file

@ -49,11 +49,11 @@ export default class ComposedModal {
default: {}; default: {};
}; };
$on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "transitionend", cb: (event: WindowEventMap["transitionend"]) => void): () => void;
$on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "submit", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "close", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void; $on(eventname: "open", cb: (event: CustomEvent<any>) => void): () => void;

1
types/Modal/Modal.d.ts vendored
View file

@ -120,6 +120,7 @@ export default class Modal {
label: {}; label: {};
}; };
$on(eventname: "transitionend", cb: (event: CustomEvent<{ open: boolean }>) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;