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

feat(search): dispatch clear event

Browse source
This commit is contained in:
Eric Liu 2020-10-24 14:37:04 -07:00
commit 8a07f833fd
3 changed files with 30 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
COMPONENT_INDEX.md
View file

@ -3557,7 +3557,7 @@ No slots.
### Dispatched events ### Dispatched events
No dispatched events. - `on:clear`
--- ---

50
docs/src/PUBLIC_API.json
View file

@ -10910,8 +10910,8 @@
[ [
"click", "click",
{ {
"start": 3445, "start": 3540,
"end": 3453, "end": 3548,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -10921,8 +10921,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 2277, "start": 2372,
"end": 2289, "end": 2384,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -10932,8 +10932,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 2294, "start": 2389,
"end": 2307, "end": 2402,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -10943,8 +10943,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 2312, "start": 2407,
"end": 2325, "end": 2420,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],
@ -10954,8 +10954,8 @@
[ [
"change", "change",
{ {
"start": 3109, "start": 3204,
"end": 3118, "end": 3213,
"type": "EventHandler", "type": "EventHandler",
"name": "change", "name": "change",
"modifiers": [], "modifiers": [],
@ -10965,8 +10965,8 @@
[ [
"input", "input",
{ {
"start": 3125, "start": 3220,
"end": 3133, "end": 3228,
"type": "EventHandler", "type": "EventHandler",
"name": "input", "name": "input",
"modifiers": [], "modifiers": [],
@ -10976,8 +10976,8 @@
[ [
"focus", "focus",
{ {
"start": 3215, "start": 3310,
"end": 3223, "end": 3318,
"type": "EventHandler", "type": "EventHandler",
"name": "focus", "name": "focus",
"modifiers": [], "modifiers": [],
@ -10987,8 +10987,8 @@
[ [
"blur", "blur",
{ {
"start": 3230, "start": 3325,
"end": 3237, "end": 3332,
"type": "EventHandler", "type": "EventHandler",
"name": "blur", "name": "blur",
"modifiers": [], "modifiers": [],
@ -10996,7 +10996,7 @@
} }
] ]
], ],
"dispatched_events": [] "dispatched_events": [["clear", {}]]
}, },
"SearchSkeleton": { "SearchSkeleton": {
"moduleName": "SearchSkeleton", "moduleName": "SearchSkeleton",
@ -13425,8 +13425,8 @@
[ [
"click", "click",
{ {
"start": 25, "start": 21,
"end": 33, "end": 29,
"type": "EventHandler", "type": "EventHandler",
"name": "click", "name": "click",
"modifiers": [], "modifiers": [],
@ -13436,8 +13436,8 @@
[ [
"mouseover", "mouseover",
{ {
"start": 36, "start": 30,
"end": 48, "end": 42,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseover", "name": "mouseover",
"modifiers": [], "modifiers": [],
@ -13447,8 +13447,8 @@
[ [
"mouseenter", "mouseenter",
{ {
"start": 51, "start": 43,
"end": 64, "end": 56,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseenter", "name": "mouseenter",
"modifiers": [], "modifiers": [],
@ -13458,8 +13458,8 @@
[ [
"mouseleave", "mouseleave",
{ {
"start": 67, "start": 57,
"end": 80, "end": 70,
"type": "EventHandler", "type": "EventHandler",
"name": "mouseleave", "name": "mouseleave",
"modifiers": [], "modifiers": [],

4
src/Search/Search.svelte
View file

@ -84,10 +84,13 @@
*/ */
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte";
import Close16 from "carbon-icons-svelte/lib/Close16"; import Close16 from "carbon-icons-svelte/lib/Close16";
import Close20 from "carbon-icons-svelte/lib/Close20"; import Close20 from "carbon-icons-svelte/lib/Close20";
import Search16 from "carbon-icons-svelte/lib/Search16"; import Search16 from "carbon-icons-svelte/lib/Search16";
import SearchSkeleton from "./Search.Skeleton.svelte"; import SearchSkeleton from "./Search.Skeleton.svelte";
const dispatch = createEventDispatcher();
</script> </script>
{#if skeleton} {#if skeleton}
@ -143,6 +146,7 @@
on:click="{() => { on:click="{() => {
value = ''; value = '';
ref.focus(); ref.focus();
dispatch('clear');
}}" }}"
> >
<svelte:component this="{size === 'xl' ? Close20 : Close16}" /> <svelte:component this="{size === 'xl' ? Close20 : Close16}" />