feat(all): add CustomEvents types to components that emit events (#23956)

resolves #22925

BREAKING CHANGE: The `RadioChangeEventDetail` interface has been removed in favor of `RadioGroupChangeEventDetail`.
This commit is contained in:
Liam DeBeasi
2021-09-24 16:28:49 -04:00
committed by GitHub
parent 285a371101
commit 8708095111
48 changed files with 763 additions and 58 deletions

View File

@ -163,6 +163,28 @@ ion-toggle {
}
```
## Interfaces
### ToggleChangeEventDetail
```typescript
interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
```
### ToggleCustomEvent
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
```typescript
interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}
```
<!-- Auto Generated Below -->
@ -451,11 +473,11 @@ export default defineComponent({
## Events
| Event | Description | Type |
| ----------- | -------------------------------------------- | -------------------------------------- |
| `ionBlur` | Emitted when the toggle loses focus. | `CustomEvent<void>` |
| `ionChange` | Emitted when the value property has changed. | `CustomEvent<ToggleChangeEventDetail>` |
| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent<void>` |
| Event | Description | Type |
| ----------- | -------------------------------------------- | ------------------------------------------- |
| `ionBlur` | Emitted when the toggle loses focus. | `CustomEvent<void>` |
| `ionChange` | Emitted when the value property has changed. | `CustomEvent<ToggleChangeEventDetail<any>>` |
| `ionFocus` | Emitted when the toggle has focus. | `CustomEvent<void>` |
## Shadow Parts

View File

@ -1,5 +1,10 @@
export interface ToggleChangeEventDetail {
value: any;
export interface ToggleChangeEventDetail<T = any> {
value: T;
checked: boolean;
}
export interface ToggleCustomEvent<T = any> extends CustomEvent {
detail: ToggleChangeEventDetail<T>;
target: HTMLIonToggleElement;
}