* @cfg {Boolean} readOnly Specifies that the field should be read-only
* @cfg {String} autocomplete - default is new-password see: https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs?hl=en
* @cfg {String} indicatorpos (left|right) default left
+ * @cfg {String} capture (user|camera) use for file input only. (default empty)
+ * @cfg {String} accept (image|video|audio) use for file input only. (default empty)
* @cfg {String} align (left|center|right) Default left
* @cfg {Boolean} forceFeedback (true|false) Default false
*
- *
- *
- *
* @constructor
* Create a new Input
* @param {Object} config The config object
/**
- * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid")
+ * @cfg {String} invalidClass DEPRICATED - code uses BS4 - is-valid / is-invalid
*/
invalidClass : "has-warning",
/**
- * @cfg {String} validClass The CSS class to use when marking a field valid (defaults to "x-form-invalid")
+ * @cfg {String} validClass DEPRICATED - code uses BS4 - is-valid / is-invalid
*/
validClass : "has-success",
labelsm : 0,
labelxs : 0,
+ capture : '',
+ accept : '',
+
parentLabelAlign : function()
{
var parent = this;
autocomplete : this.autocomplete || 'new-password'
};
+ if(this.capture.length){
+ input.capture = this.capture;
+ }
+
+ if(this.accept.length){
+ input.accept = this.accept + "/*";
+ }
+
if(this.align){
input.style = (typeof(input.style) == 'undefined') ? ('text-align:' + this.align) : (input.style + 'text-align:' + this.align);
}
inputblock.cn.push({
tag :'span',
- cls : 'roo-input-before input-group-addon',
+ cls : 'roo-input-before input-group-addon input-group-prepend input-group-text',
html : this.before
});
}
inputblock.cn.push({
tag :'span',
- cls : 'roo-input-before input-group-' +
+ cls : 'roo-input-before input-group-prepend input-group-text input-group-' +
(this.before.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
});
}
if (this.after && typeof(this.after) == 'string') {
inputblock.cn.push({
tag :'span',
- cls : 'roo-input-after input-group-addon',
+ cls : 'roo-input-after input-group-append input-group-text input-group-addon',
html : this.after
});
}
inputblock.cn.push({
tag :'span',
- cls : 'roo-input-after input-group-' +
+ cls : 'roo-input-after input-group-append input-group-text input-group-' +
(this.after.xtype == 'Button' ? 'btn' : 'addon') //?? what about checkboxes - that looks like a bit of a hack thought?
});
}
inputblock.cn.push(feedback);
}
};
-
+ var indicator = {
+ tag : 'i',
+ cls : 'roo-required-indicator ' + (this.indicatorpos == 'right' ? 'right' : 'left') +'-indicator text-danger fa fa-lg fa-star',
+ tooltip : 'This field is required'
+ };
+ if (Roo.bootstrap.version == 4) {
+ indicator = {
+ tag : 'i',
+ style : 'display-none'
+ };
+ }
if (align ==='left' && this.fieldLabel.length) {
- cfg.cls += ' roo-form-group-label-left';
+ cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : '');
cfg.cn = [
- {
- tag : 'i',
- cls : 'roo-required-indicator left-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- },
+ indicator,
{
tag: 'label',
'for' : id,
- cls : 'control-label',
+ cls : 'control-label col-form-label',
html : this.fieldLabel
},
{
tag: 'label',
'for' : id,
- cls : 'control-label',
+ cls : 'control-label col-form-label',
cn : [
{
tag : 'span',
html : this.fieldLabel
},
- {
- tag : 'i',
- cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star',
- tooltip : 'This field is required'
- }
+ indicator
]
},
{
cfg.cls += ' navbar-form';
}
- if (this.parentType === 'NavGroup') {
- cfg.cls += ' navbar-form';
- cfg.tag = 'li';
+ if (this.parentType === 'NavGroup' && !(Roo.bootstrap.version == 4 && this.parent().form)) {
+ // on BS4 we do this only if not form
+ cfg.cls += ' navbar-form';
+ cfg.tag = 'li';
}
return cfg;
indicatorEl : function()
{
+ if (Roo.bootstrap.version == 4) {
+ return false; // not enabled in v4 yet.
+ }
+
var indicator = this.el.select('i.roo-required-indicator',true).first();
if(!indicator){
this.indicator = this.indicatorEl();
if(this.indicator){
- this.indicator.addClass('invisible');
-
+ this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible'); // changed from invisible??? -
}
// reference to original value for reset
this.after.render(this.el.select('.roo-input-after',true).first());
}
+ this.inputEl().on('change', this.onChange, this);
},
filterValidation : function(e){
*/
validateValue : function(value)
{
- if(this.getEl().hasClass('hidden') || !this.inputEl().isVisible()){
+ if(this.getVisibilityEl().hasClass('hidden')){
return true;
}
this.fireEvent("blur", this);
},
+ onChange : function(e)
+ {
+ var v = this.getValue();
+ if(String(v) !== String(this.startValue)){
+ this.fireEvent('change', this, v, this.startValue);
+ }
+
+ },
+
/**
* Resets the current field value to the originally loaded value and clears any validation messages
*/
return;
}
-
- this.el.removeClass(this.invalidClass);
+
+ this.el.removeClass([this.invalidClass, 'is-invalid']);
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
}
+ if(this.indicator){
+ this.indicator.removeClass('visible');
+ this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
+ }
+
this.fireEvent('valid', this);
},
}
this.el.removeClass([this.invalidClass, this.validClass]);
-
+ this.inputEl().removeClass(['is-valid', 'is-invalid']);
+
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
if(this.indicator){
this.indicator.removeClass('visible');
- this.indicator.addClass('invisible');
+ this.indicator.addClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
}
if(this.disabled){
if(this.allowBlank && !this.getRawValue().length){
return;
}
-
- this.el.addClass(this.validClass);
-
+ if (Roo.bootstrap.version == 3) {
+ this.el.addClass(this.validClass);
+ } else {
+ this.inputEl().addClass('is-valid');
+ }
+
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){
var feedback = this.el.select('.form-control-feedback', true).first();
}
this.el.removeClass([this.invalidClass, this.validClass]);
+ this.inputEl().removeClass(['is-valid', 'is-invalid']);
var feedback = this.el.select('.form-control-feedback', true).first();
if(feedback){
- this.el.select('.form-control-feedback', true).first().removeClass([this.invalidFeedbackClass, this.validFeedbackClass]);
+ this.el.select('.form-control-feedback', true).first().removeClass(
+ [this.invalidFeedbackClass, this.validFeedbackClass]);
}
if(this.disabled){
}
if(this.indicator){
- this.indicator.removeClass('invisible');
+ this.indicator.removeClass(this.indicatorpos == 'right' ? 'hidden' : 'invisible');
this.indicator.addClass('visible');
}
+ if (Roo.bootstrap.version == 3) {
+ this.el.addClass(this.invalidClass);
+ } else {
+ this.inputEl().addClass('is-invalid');
+ }
+
- this.el.addClass(this.invalidClass);
if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){
return;
}
- if(this.indicator){
+ if(this.indicatorEl()){
var ar = this.el.select('label > span',true);
if (ar.elements.length) {