fix(number-input): type dispatched change event

This commit is contained in:
Eric Liu 2020-12-05 17:04:13 -08:00
commit 34000a1166
5 changed files with 21 additions and 15 deletions

View file

@ -2296,13 +2296,13 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Events ### Events
| Event name | Type | Detail | | Event name | Type | Detail |
| :--------- | :--------- | :----- | | :--------- | :--------- | :------------------ |
| change | dispatched | <code>number</code> |
| click | forwarded | -- | | click | forwarded | -- |
| mouseover | forwarded | -- | | mouseover | forwarded | -- |
| mouseenter | forwarded | -- | | mouseenter | forwarded | -- |
| mouseleave | forwarded | -- | | mouseleave | forwarded | -- |
| input | forwarded | -- | | input | forwarded | -- |
| change | dispatched | -- |
## `NumberInputSkeleton` ## `NumberInputSkeleton`

View file

@ -6134,12 +6134,12 @@
} }
], ],
"events": [ "events": [
{ "type": "dispatched", "name": "change", "detail": "number" },
{ "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": "input", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }
{ "type": "dispatched", "name": "change" }
], ],
"typedefs": [ "typedefs": [
{ {

View file

@ -1,6 +1,7 @@
<script> <script>
/** /**
* @typedef {"increment" | "decrement"} NumberInputTranslationId * @typedef {"increment" | "decrement"} NumberInputTranslationId
* @event {number} change
*/ */
/** /**
@ -91,9 +92,9 @@
export let ref = null; export let ref = null;
import { createEventDispatcher, afterUpdate } from "svelte"; import { createEventDispatcher, afterUpdate } from "svelte";
import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph"; import CaretDownGlyph from "carbon-icons-svelte/lib/CaretDownGlyph/CaretDownGlyph.svelte";
import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph"; import CaretUpGlyph from "carbon-icons-svelte/lib/CaretUpGlyph/CaretUpGlyph.svelte";
import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16"; import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16/WarningFilled16.svelte";
const defaultTranslations = { const defaultTranslations = {
[translationIds.increment]: "Increment number", [translationIds.increment]: "Increment number",

View file

@ -2,7 +2,12 @@
import { NumberInput, NumberInputSkeleton } from "../types"; import { NumberInput, NumberInputSkeleton } from "../types";
</script> </script>
<NumberInput label="Clusters" /> <NumberInput
label="Clusters"
on:change="{(e) => {
console.log(e.detail); // number
}}"
/>
<NumberInput <NumberInput
label="Clusters" label="Clusters"

View file

@ -133,11 +133,11 @@ export default class NumberInput {
label: {}; label: {};
}; };
$on(eventname: "change", cb: (event: CustomEvent<number>) => 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: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
$on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void;
} }