javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(input): event interfaces

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-08-11 19:00:01 +02:00
parent db0049ff73
commit 2e7d355edf
14 changed files with 39 additions and 266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
core/src/utils/input-interface.ts
View File

@@ -1,203 +1,12 @@
import { EventEmitter } from '@stencil/core';
export interface BaseInput {
/**
* Indicates that the user cannot interact with the control.
*/
disabled: boolean;
/**
* Returns / Sets the element's readonly attribute, indicating that
* the user cannot modify the value of the control. HTML5. This is
* ignored if the value of the type attribute is hidden, range, color,
* checkbox, radio, file, or a button type.
*/
readOnly?: boolean;
name: string;
}
export interface CheckboxInput extends BaseInput {
/**
* Reflects the value of the form control.
*/
value: string;
/**
* Returns / Sets the current state of the element when type is checkbox or radio.
*/
checked: boolean;
/**
* The change event is fired when the value of has changed.
*/
ionChange: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
* components to know how to style themselves depending on the
* child input. For example, a disabled ion-toggle may give
* its wrapping ion-item a different style.
*/
ionStyle: EventEmitter<StyleEvent>;
}
export interface RadioButtonInput extends BaseInput {
/**
* Reflects the value of the form control.
*/
value: string;
/**
* Returns / Sets the current state of the element when type is checkbox or radio.
*/
checked: boolean;
/**
* A single radio button fires an ionSelect event, whereas
* a radio group fires an ionChange event. It would be more common
* to attach listeners to the radio group, not individual radio buttons.
*/
ionSelect: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<void>;
}
export interface RadioGroupInput extends BaseInput {
ionChange: EventEmitter<InputChangeEvent>;
}
export interface SelectInput extends BaseInput {
/**
* Indicates whether the option is currently selected.
*/
selected: boolean;
/**
* A long reflecting the index of the first selected <option> element.
* The value -1 indicates no element is selected.
*/
selectedIndex: number;
/**
* Reflecting the multiple HTML attribute, which indicates
* whether multiple items can be selected.
*/
multiple: boolean;
/**
* The change event is fired when the value of has changed.
* This is actually more similar to the native "input" event
* https://developer.mozilla.org/en-US/docs/Web/Events/input
*/
ionChange: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
* components to know how to style themselves depending on the
* child input. For example, a disabled ion-toggle may give
* its wrapping ion-item a different style.
*/
ionStyle: EventEmitter<StyleEvent>;
}
export interface TextInput extends BaseInput {
/**
* Reflects the value of the form control.
*/
value: string;
/**
* The change event is fired when the value of has changed.
* This is actually more similar to the native "input" event
* https://developer.mozilla.org/en-US/docs/Web/Events/input
*/
ionChange: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
* components to know how to style themselves depending on the
* child input. For example, a disabled ion-toggle may give
* its wrapping ion-item a different style.
*/
ionStyle: EventEmitter<StyleEvent>;
}
export interface TextMultiLineInput extends TextInput {
/**
* The change event is fired when the value of has changed.
* This is actually more similar to the native "input" event
* https://developer.mozilla.org/en-US/docs/Web/Events/input
*/
ionChange: EventEmitter<CheckedInputChangeEvent>;
/**
* Removes focus from input; keystrokes will subsequently go nowhere.
*/
ionBlur: EventEmitter<void>;
/**
* Focus on the input element; keystrokes will subsequently go to this element.
*/
ionFocus: EventEmitter<void>;
/**
* Emitted when the styles change. This is useful for parent
* components to know how to style themselves depending on the
* child input. For example, a disabled ion-toggle may give
* its wrapping ion-item a different style.
*/
ionStyle: EventEmitter<StyleEvent>;
}
export interface InputChangeEvent {
export interface TextInputChangeEvent {
value: string | undefined;
}
export interface CheckedInputChangeEvent extends InputChangeEvent {
export interface CheckedInputChangeEvent extends TextInputChangeEvent {
checked: boolean;
}
export interface RangeInputChangeEvent {
export interface InputChangeEvent {
value: any;
}