addon/mixins/ui-input-base.js

  1. import Mixin from '@ember/object/mixin';
  2.  
  3.  
  4. /**
  5. ui-input-base mixin
  6.  
  7. @module mixins
  8. @namespace mixins
  9. @class UiInputBase 
  10. @constructor
  11. */
  12. export default Mixin.create({
  13. 	tagName: 'div',
  14.  
  15. 	/**
  16. 	 * the input type
  17. 	 *
  18. 	 * @property {String} type
  19. 	 * @default text
  20. 	 */
  21. 	type: 'text',
  22.  
  23. 	/**
  24. 	 * the input value
  25. 	 *
  26. 	 * @property {String} value
  27. 	 */
  28. 	value: '',
  29.  
  30. 	/**
  31. 	 * the input placeholder
  32. 	 *
  33. 	 * @property {String} placeholder
  34. 	 */
  35. 	placeholder: '',
  36.  
  37. 	/**
  38. 	 * the label 
  39. 	 *
  40. 	 * @property {String} label
  41. 	 */
  42. 	label: '',
  43.  
  44. 	/**
  45. 	 * the input 
  46. 	 *
  47. 	 * @property {String} theme
  48. 	 */
  49. 	theme: '',
  50.  
  51. 	/**
  52. 	 * the input focus status
  53. 	 *
  54. 	 * @property {Boolean} focus
  55. 	 * @default false
  56. 	 */
  57. 	focus: false,
  58.  
  59. 	/**
  60. 	 * the input loading status
  61. 	 *
  62. 	 * @property {Boolean} loading
  63. 	 * @default false
  64. 	 */
  65. 	loading: false,
  66.  
  67. 	/**
  68. 	 * the input error status 
  69. 	 *
  70. 	 * @property {Boolean} error
  71. 	 * @default false
  72. 	 */
  73. 	error: false,
  74.  
  75. 	/**
  76. 	 * the input error status 
  77. 	 *
  78. 	 * @property {Boolean} error
  79. 	 * @default false
  80. 	 */
  81. 	disabled: false,
  82.  
  83. 	/**
  84. 	 * the input readonly status 
  85. 	 *
  86. 	 * @property {Boolean} readonly
  87. 	 * @default false
  88. 	 */
  89. 	readonly: false,
  90.  
  91. 	classNameBindings: ['_uiClass', 'disabled:disabled:', 'theme', '_componentClass', 'focus:focus:', 'loading:loading:', 'error:error:'],
  92. 	_uiClass: 'ui',
  93. 	_componentClass: 'input',
  94.  
  95. 	//Attribute bindings for containing div
  96. 	attributeBindings: [],
  97. 	_updateValue() {
  98. 		let newValue = this.$('input').val();
  99. 		if (this.get('type') === "number"){
  100. 			newValue = parseFloat(newValue)
  101. 		}
  102. 		if (typeof this.attrs.update === 'function') {
  103. 			this.attrs.update(newValue);
  104. 		}else {
  105. 			this.set('value', newValue);
  106. 		}
  107. 	},
  108. 	didInsertElement(){
  109. 		if (this.get('readonly')) {
  110. 			this.$('input').attr('readonly', 'readonly');
  111. 		}
  112. 		this.$('input').change((e) => {
  113. 			this._updateValue();
  114. 			if(typeof this.attrs.onChange === 'function'){
  115. 				this.attrs.onChange(e);
  116. 			}
  117. 		});
  118.  
  119. 		this.$('input').focus((e)=>{
  120. 			if(typeof this.attrs.onFocus === 'function'){
  121. 				this.attrs.onFocus(e);
  122. 			}
  123. 		});
  124.  
  125. 		this.$('input').focusin((e)=>{
  126. 			if(typeof this.attrs.onFocusin === 'function'){
  127. 				this.attrs.onFocusin(e);
  128. 			}
  129. 		});
  130.  
  131. 		this.$('input').focusout((e)=>{
  132. 			if(typeof this.attrs.onFocusout === 'function'){
  133. 				this.attrs.onFocusout(e);
  134. 			}
  135. 		});
  136. 	}
  137. });