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

feat(tag): dispatch close event

Browse source
This commit is contained in:
Eric Liu 2021-02-03 06:06:19 -08:00
commit c37890d4b4
6 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

13
COMPONENT_INDEX.md
View file

@ -3640,12 +3640,13 @@ None.
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :-------- | :----- | | :--------- | :--------- | :----- |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| close | dispatched | -- |
## `TagSkeleton` ## `TagSkeleton`

3
docs/src/COMPONENT_API.json
View file

@ -7859,7 +7859,8 @@
{ "type": "forwarded", "name": "click", "element": "TagSkeleton" }, { "type": "forwarded", "name": "click", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" }, { "type": "forwarded", "name": "mouseover", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" }, { "type": "forwarded", "name": "mouseenter", "element": "TagSkeleton" },
{ "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" } { "type": "forwarded", "name": "mouseleave", "element": "TagSkeleton" },
{ "type": "dispatched", "name": "close" }
], ],
"typedefs": [], "typedefs": [],
"rest_props": { "type": "Element", "name": "div | span" } "rest_props": { "type": "Element", "name": "div | span" }

2
docs/src/pages/components/Tag.svx
View file

@ -25,7 +25,7 @@
### Filterable ### Filterable
<Tag filter on:click>Filterable</Tag> <Tag filter on:close>Filterable</Tag>
### Custom icon ### Custom icon

7
src/Tag/Tag.svelte
View file

@ -30,6 +30,10 @@
import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte"; import Close16 from "carbon-icons-svelte/lib/Close16/Close16.svelte";
import TagSkeleton from "./TagSkeleton.svelte"; import TagSkeleton from "./TagSkeleton.svelte";
import { createEventDispatcher } from "svelte";
const dispatch = createEventDispatcher();
</script> </script>
{#if skeleton} {#if skeleton}
@ -70,6 +74,9 @@
disabled="{disabled}" disabled="{disabled}"
title="{title}" title="{title}"
on:click|stopPropagation on:click|stopPropagation
on:click|stopPropagation="{() => {
dispatch('close');
}}"
on:mouseover on:mouseover
on:mouseenter on:mouseenter
on:mouseleave on:mouseleave

2
tests/Tag.test.svelte
View file

@ -27,7 +27,7 @@
<Tag type="high-contrast">high-contrast</Tag> <Tag type="high-contrast">high-contrast</Tag>
<Tag filter on:click>Filterable</Tag> <Tag filter on:click on:close>Filterable</Tag>
<Tag icon="{Add16}">Custom icon</Tag> <Tag icon="{Add16}">Custom icon</Tag>

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

@ -65,5 +65,6 @@ export default class Tag {
$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: "close", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }