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

fix(number-input): type dispatched change event

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

16
COMPONENT_INDEX.md
View file

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

4
docs/src/COMPONENT_API.json
View file

@ -6134,12 +6134,12 @@
}
],
"events": [
{ "type": "dispatched", "name": "change", "detail": "number" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mouseover", "element": "div" },
{ "type": "forwarded", "name": "mouseenter", "element": "div" },
{ "type": "forwarded", "name": "mouseleave", "element": "div" },
{ "type": "forwarded", "name": "input", "element": "input" },
{ "type": "dispatched", "name": "change" }
{ "type": "forwarded", "name": "input", "element": "input" }
],
"typedefs": [
{

7
src/NumberInput/NumberInput.svelte
View file

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

7
tests/NumberInput.test.svelte
View file

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

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

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