addon/mixins/ui-input-base.js
import Mixin from '@ember/object/mixin';
/**
ui-input-base mixin
@module mixins
@namespace mixins
@class UiInputBase
@constructor
*/
export default Mixin.create({
tagName: 'div',
/**
* the input type
*
* @property {String} type
* @default text
*/
type: 'text',
/**
* the input value
*
* @property {String} value
*/
value: '',
/**
* the input placeholder
*
* @property {String} placeholder
*/
placeholder: '',
/**
* the label
*
* @property {String} label
*/
label: '',
/**
* the input
*
* @property {String} theme
*/
theme: '',
/**
* the input focus status
*
* @property {Boolean} focus
* @default false
*/
focus: false,
/**
* the input loading status
*
* @property {Boolean} loading
* @default false
*/
loading: false,
/**
* the input error status
*
* @property {Boolean} error
* @default false
*/
error: false,
/**
* the input error status
*
* @property {Boolean} error
* @default false
*/
disabled: false,
/**
* the input readonly status
*
* @property {Boolean} readonly
* @default false
*/
readonly: false,
classNameBindings: ['_uiClass', 'disabled:disabled:', 'theme', '_componentClass', 'focus:focus:', 'loading:loading:', 'error:error:'],
_uiClass: 'ui',
_componentClass: 'input',
//Attribute bindings for containing div
attributeBindings: [],
_updateValue() {
let newValue = this.$('input').val();
if (this.get('type') === "number"){
newValue = parseFloat(newValue)
}
if (typeof this.attrs.update === 'function') {
this.attrs.update(newValue);
}else {
this.set('value', newValue);
}
},
didInsertElement(){
if (this.get('readonly')) {
this.$('input').attr('readonly', 'readonly');
}
this.$('input').change((e) => {
this._updateValue();
if(typeof this.attrs.onChange === 'function'){
this.attrs.onChange(e);
}
});
this.$('input').focus((e)=>{
if(typeof this.attrs.onFocus === 'function'){
this.attrs.onFocus(e);
}
});
this.$('input').focusin((e)=>{
if(typeof this.attrs.onFocusin === 'function'){
this.attrs.onFocusin(e);
}
});
this.$('input').focusout((e)=>{
if(typeof this.attrs.onFocusout === 'function'){
this.attrs.onFocusout(e);
}
});
}
});