X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=0ba605a47d127bdfb27055a7f936649d01635aa4;hb=f75d2de0ff2a760bf49fa62451c9f939d7e1ef6d;hp=36c22c0b85fddc8017fb6f17c83bcc78adea1ff9;hpb=7c5f83600bd4980b3d9e89f6b710a3f4371bc285;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 36c22c0b85..0ba605a47d 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -413,7 +413,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().removeClass('hidden'); + this.getVisibilityEl().removeClass(['hidden','d-none']); this.fireEvent('show', this); @@ -428,7 +428,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent, { return; } - this.getVisibilityEl().addClass('hidden'); + this.getVisibilityEl().addClass(['hidden','d-none']); this.fireEvent('hide', this); @@ -589,7 +589,8 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @cfg {String} href empty or href * @cfg {Boolean} disabled default false; * @cfg {Boolean} isClose default false; - * @cfg {String} glyphicon (| adjust | align-center | align-justify | align-left | align-right | arrow-down | arrow-left | arrow-right | arrow-up | asterisk | backward | ban-circle | barcode | bell | bold | book | bookmark | briefcase | bullhorn | calendar | camera | certificate | check | chevron-down | chevron-left | chevron-right | chevron-up | circle-arrow-down | circle-arrow-left | circle-arrow-right | circle-arrow-up | cloud | cloud-download | cloud-upload | cog | collapse-down | collapse-up | comment | compressed | copyright-mark | credit-card | cutlery | dashboard | download | download-alt | earphone | edit | eject | envelope | euro | exclamation-sign | expand | export | eye-close | eye-open | facetime-video | fast-backward | fast-forward | file | film | filter | fire | flag | flash | floppy-disk | floppy-open | floppy-remove | floppy-save | floppy-saved | folder-close | folder-open | font | forward | fullscreen | gbp | gift | glass | globe | hand-down | hand-left | hand-right | hand-up | hd-video | hdd | header | headphones | heart | heart-empty | home | import | inbox | indent-left | indent-right | info-sign | italic | leaf | link | list | list-alt | lock | log-in | log-out | magnet | map-marker | minus | minus-sign | move | music | new-window | off | ok | ok-circle | ok-sign | open | paperclip | pause | pencil | phone | phone-alt | picture | plane | play | play-circle | plus | plus-sign | print | pushpin | qrcode | question-sign | random | record | refresh | registration-mark | remove | remove-circle | remove-sign | repeat | resize-full | resize-horizontal | resize-small | resize-vertical | retweet | road | save | saved | screenshot | sd-video | search | send | share | share-alt | shopping-cart | signal | sort | sort-by-alphabet | sort-by-alphabet-alt | sort-by-attributes | sort-by-attributes-alt | sort-by-order | sort-by-order-alt | sound-5-1 | sound-6-1 | sound-7-1 | sound-dolby | sound-stereo | star | star-empty | stats | step-backward | step-forward | stop | subtitles | tag | tags | tasks | text-height | text-width | th | th-large | th-list | thumbs-down | thumbs-up | time | tint | tower | transfer | trash | tree-conifer | tree-deciduous | unchecked | upload | usd | user | volume-down | volume-off | volume-up | warning-sign | wrench | zoom-in | zoom-out) + * @cfg {String} glyphicon depricated - use fa + * @cfg {String} fa fontawesome icon - eg. 'comment' - without the fa/fas etc.. * @cfg {String} badge text for badge * @cfg {String} theme (default|glow) * @cfg {Boolean} inverse dark themed version @@ -649,6 +650,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { disabled: false, isClose: false, glyphicon: '', + fa: '', badge: '', theme: 'default', inverse: false, @@ -759,6 +761,10 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { Roo.log('changing to ul' ); cfg.tag = 'ul'; this.glyphicon = 'caret'; + if (Roo.bootstrap.version == 4) { + this.fa = 'caret-down'; + } + } cfg.cls += this.size.length ? (' btn-' + this.size) : ''; @@ -797,6 +803,16 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { } ]; } + if (this.fa) { + cfg.html = ' ' + cfg.html; + + cfg.cn = [ + { + tag: 'i', + cls: 'fa fas fa-' + this.fa + } + ]; + } if (this.badge) { cfg.html += ' '; @@ -811,12 +827,19 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { if(this.glyphicon){ value = { - tag: 'span', - cls: 'glyphicon glyphicon-' + this.glyphicon, - html: this.html - }; - + tag: 'span', + cls: 'glyphicon glyphicon-' + this.glyphicon, + html: this.html + }; + } + if(this.fa){ + value = { + tag: 'i', + cls: 'fa fas fa-' + this.fa, + html: this.html + }; } + var bw = this.badge_weight.length ? this.badge_weight : (this.weight.length ? this.weight : 'secondary'); bw = bw == 'default' ? 'secondary' : bw; @@ -2387,7 +2410,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { this.hide(); } else { Roo.log('show'); - this.show(this.triggerEl, false, false); + this.show(this.triggerEl, '?', false); } if(this.stopEvent || e.getTarget().nodeName.toLowerCase() === 'i'){ @@ -2491,7 +2514,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { if(this.isContainer){ return { tag: 'li', - cls: 'dropdown-menu-item dropdown-item' + cls: 'dropdown-menu-item ' }; } var ctag = { @@ -2501,6 +2524,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { var anc = { tag : 'a', + cls : 'dropdown-item', href : '#', cn : [ ] }; @@ -2517,7 +2541,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { var cfg= { tag: 'li', - cls: 'dropdown-menu-item dropdown-item', + cls: 'dropdown-menu-item', cn: [ anc ] }; if (this.parent().type == 'treeview') { @@ -2618,7 +2642,7 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component, { * @cfg {Roo.Template} tmpl - a template with variables. to use it, add a handler in show:method adn * @cfg {Boolean} specificTitle default false * @cfg {Array} buttons Array of buttons or standard button set.. - * @cfg {String} buttonPosition (left|right|center) default right + * @cfg {String} buttonPosition (left|right|center) default right (DEPRICATED) - use mr-auto on buttons to put them on the left * @cfg {Boolean} animate default true * @cfg {Boolean} allow_close default true * @cfg {Boolean} fitwindow default false @@ -2647,7 +2671,14 @@ Roo.bootstrap.Modal = function(config){ * @param {Roo.bootstrap.Modal} this * @param {Roo.EventObject} e */ - "resize" : true + "resize" : true, + /** + * @event close + * Fire when the top 'x' close button is pressed. + * @param {Roo.bootstrap.Modal} this + * @param {Roo.EventObject} e + */ + "close" : true }); this.buttons = this.buttons || []; @@ -2744,7 +2775,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); },this); } @@ -2786,7 +2817,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; if (this.allow_close && Roo.bootstrap.version == 3) { @@ -2812,7 +2843,26 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.size.length){ size = 'modal-' + this.size; } + + var footer = Roo.bootstrap.version == 3 ? + { + cls : 'modal-footer', + cn : [ + { + tag: 'div', + cls: 'btn-' + this.buttonPosition + } + ] + + } : + { // BS4 uses mr-auto on left buttons.... + cls : 'modal-footer' + }; + + + + var modal = { cls: "modal", cn : [ @@ -2827,18 +2877,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -2861,7 +2900,10 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, getButtonContainer : function() { - return this.el.select('.modal-footer div',true).first(); + + return Roo.bootstrap.version == 4 ? + this.el.select('.modal-footer',true).first() + : this.el.select('.modal-footer div',true).first(); }, initEvents : function() @@ -2873,6 +2915,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2882,9 +2925,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { ); if (this.fitwindow) { + + this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, - this.height || Roo.lib.Dom.getViewportHeight(true) - 60 + this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 ); return; } @@ -2945,7 +2990,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { Roo.get(document.body).addClass('modal-open'); if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay? - var _this = this; + (function(){ this.el.addClass('show'); this.el.addClass('in'); @@ -3037,7 +3082,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var btn = Roo.factory(b); - btn.render(this.el.select('.modal-footer div').first()); + btn.render(this.getButtonContainer()); return btn; @@ -3047,22 +3092,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { //this.el.select('.modal-footer').() }, - diff : false, resizeTo: function(w,h) { - // skip.. ?? why?? - this.dialogEl.setWidth(w); - if (this.diff === false) { - this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight(); - } - - this.bodyEl.setHeight(h - this.diff); + + var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30 + this.bodyEl.setHeight(h - diff); + this.fireEvent('resize', this); - }, + setContentSize : function(w, h) { @@ -3289,10 +3330,11 @@ Roo.bootstrap.MessageBox = function(){ buttons["cancel"].hide(); buttons["yes"].hide(); buttons["no"].hide(); - //dlg.footer.dom.style.display = 'none'; + dlg.footerEl.hide(); + return width; } - dlg.footerEl.dom.style.display = ''; + dlg.footerEl.show(); for(var k in buttons){ if(typeof buttons[k] != "function"){ if(b[k]){ @@ -3569,6 +3611,9 @@ Roo.Msg.show({ textareaEl.hide(); } progressEl.setDisplayed(opt.progress === true); + if (opt.progress) { + d.animate = false; // do not animate progress, as it may not have finished animating before we close it.. + } this.updateProgress(0); activeTextEl.dom.value = opt.value || ""; if(opt.prompt){ @@ -3839,7 +3884,41 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { //Roo.log(this.el.select('.navbar-toggle',true)); this.el.select('.navbar-toggle',true).on('click', function() { if(this.fireEvent('beforetoggle', this) !== false){ - this.el.select('.navbar-collapse',true).toggleClass('in'); + var ce = this.el.select('.navbar-collapse',true).first(); + ce.toggleClass('in'); // old... + if (ce.hasClass('collapse')) { + // show it... + ce.removeClass('collapse'); + ce.addClass('show'); + var h = ce.getHeight(); + Roo.log(h); + ce.removeClass('show'); + // at this point we should be able to see it.. + ce.addClass('collapsing'); + + ce.setHeight(0); // resize it ... + ce.on('transitionend', function() { + Roo.log('done transition'); + ce.removeClass('collapsing'); + ce.addClass('show'); + ce.removeClass('collapse'); + + ce.dom.style.height = ''; + }, this, { single: true} ); + ce.setHeight(h); + + } else { + ce.setHeight(ce.getHeight()); + ce.removeClass('show'); + ce.addClass('collapsing'); + + ce.on('transitionend', function() { + ce.dom.style.height = ''; + ce.removeClass('collapsing'); + ce.addClass('collapse'); + }, this, { single: true} ); + ce.setHeight(0); + } } }, this); @@ -3947,14 +4026,23 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar navbar-expand-lg' + cls : 'navbar navbar-expand-lg roo-navbar-simple' }; if (['light','white'].indexOf(this.weight) > -1) { cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; } cfg.cls += ' bg-' + this.weight; - + if (this.inverse) { + cfg.cls += ' navbar-inverse'; + + } + + // i'm not actually sure these are really used - normally we add a navGroup to a navbar + + //if (Roo.bootstrap.version == 4) { + // return cfg; + //} cfg.cn = [ { @@ -3965,7 +4053,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { this.type = this.type || 'nav'; - if (['tabs','pills'].indexOf(this.type)!==-1) { + if (['tabs','pills'].indexOf(this.type) != -1) { cfg.cn[0].cls += ' nav-' + this.type @@ -3979,7 +4067,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { - if (['stacked','justified'].indexOf(this.arrangement)!==-1) { + if (['stacked','justified'].indexOf(this.arrangement) != -1) { cfg.cn[0].cls += ' nav-' + this.arrangement; } @@ -3988,10 +4076,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { cfg.cn[0].cls += ' navbar-right'; } - if (this.inverse) { - cfg.cls += ' navbar-inverse'; - - } + return cfg; @@ -4066,36 +4151,38 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { } if(this.srButton){ - cn.push({ - tag: 'div', - cls: 'navbar-header', + var btn = { + tag: 'button', + type: 'button', + cls: 'navbar-toggle navbar-toggler', + 'data-toggle': 'collapse', cn: [ { - tag: 'button', - type: 'button', - cls: 'navbar-toggle navbar-toggler', - 'data-toggle': 'collapse', - cn: [ - { - tag: 'span', - cls: 'sr-only', - html: 'Toggle navigation' - }, - { - tag: 'span', - cls: 'icon-bar navbar-toggler-icon' - }, - { - tag: 'span', - cls: 'icon-bar' - }, - { - tag: 'span', - cls: 'icon-bar' - } - ] + tag: 'span', + cls: 'sr-only', + html: 'Toggle navigation' + }, + { + tag: 'span', + cls: 'icon-bar navbar-toggler-icon' + }, + { + tag: 'span', + cls: 'icon-bar' + }, + { + tag: 'span', + cls: 'icon-bar' } ] + }; + + cn.push( Roo.bootstrap.version == 4 ? btn : { + tag: 'div', + cls: 'navbar-header', + cn: [ + btn + ] }); } @@ -4107,6 +4194,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default'; + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) { cfg.cls += ' navbar-' + this.position + ' ' + this.position ; @@ -4116,7 +4209,8 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { } if (this.brand !== '') { - cn[0].cn.push({ + var cp = Roo.bootstrap.version == 4 ? cn : cn[0].cn; + cp.unshift({ // changed from push ?? BS4 needs it at the start? - does this break or exsiting? tag: 'a', href: this.brand_href ? this.brand_href : '#', cls: 'navbar-brand', @@ -4282,15 +4376,22 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { tag : 'ul', cls: 'nav' }; - - if (['tabs','pills'].indexOf(this.type)!==-1) { - cfg.cls += ' nav-' + this.type - } else { - if (this.type!=='nav') { - Roo.log('nav type must be nav/tabs/pills') - } - cfg.cls += ' navbar-nav' - } + if (Roo.bootstrap.version == 4) { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type; + } else { + cfg.cls += ' navbar-nav'; + } + } else { + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type + } else { + if (this.type !== 'nav') { + Roo.log('nav type must be nav/tabs/pills') + } + cfg.cls += ' navbar-nav' + } + } if (this.parent() && this.parent().sidebar) { cfg = { @@ -4304,7 +4405,7 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { if (this.form === true) { cfg = { tag: 'form', - cls: 'navbar-form' + cls: 'navbar-form form-inline' }; if (this.align === 'right') { @@ -4391,7 +4492,10 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { */ addItem : function(cfg) { - var cn = new Roo.bootstrap.NavItem(cfg); + if (this.form && Roo.bootstrap.version == 4) { + cfg.tag = 'div'; + } + var cn = new Roo.bootstrap.NavItem(cfg); this.register(cn); cn.parentId = this.id; cn.onRender(this.el, null); @@ -4517,11 +4621,14 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @extends Roo.bootstrap.Component * Bootstrap Navbar.NavItem class * @cfg {String} href link to + * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none + * @cfg {String} html content of button * @cfg {String} badge text inside badge * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge - * @cfg {String} glyphicon name of glyphicon - * @cfg {String} icon name of font awesome icon + * @cfg {String} glyphicon DEPRICATED - use fa + * @cfg {String} icon DEPRICATED - use fa + * @cfg {String} fa - Fontawsome icon name (can add stuff to it like fa-2x) * @cfg {Boolean} active Is item active * @cfg {Boolean} disabled Is item disabled @@ -4571,21 +4678,26 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { html: '', badge: '', icon: false, + fa : false, glyphicon: false, active: false, preventDefault : false, tabId : false, tagtype : 'a', + tag: 'li', disabled : false, animateRef : false, was_active : false, + button_weight : '', + button_outline : false, + + navLink: false, getAutoCreate : function(){ var cfg = { - tag: 'li', + tag: this.tag, cls: 'nav-item' - }; if (this.active) { @@ -4594,8 +4706,29 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (this.disabled) { cfg.cls += ' disabled'; } + + // BS4 only? + if (this.button_weight.length) { + cfg.tag = this.href ? 'a' : 'button'; + cfg.html = this.html || ''; + cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight; + if (this.href) { + cfg.href = this.href; + } + if (this.fa) { + cfg.html = ' ' + this.html + ''; + } + + // menu .. should add dropdown-menu class - so no need for carat.. + + if (this.badge !== '') { + + cfg.html += ' ' + this.badge + ''; + } + return cfg; + } - if (this.href || this.html || this.glyphicon || this.icon) { + if (this.href || this.html || this.glyphicon || this.icon || this.fa) { cfg.cn = [ { tag: this.tagtype, @@ -4607,9 +4740,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.cn[0].cls = 'nav-link'; } if (this.icon) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; + } + if (this.fa) { + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } - if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; } @@ -4630,6 +4765,19 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { return cfg; }, + onRender : function(ct, position) + { + // Roo.log("Call onRender: " + this.xtype); + if (Roo.bootstrap.version == 4 && ct.dom.type != 'ul') { + this.tag = 'div'; + } + + var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + this.navLink = this.el.select('.nav-link',true).first(); + return ret; + }, + + initEvents: function() { if (typeof (this.menu) != 'undefined') { @@ -4731,8 +4879,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (!state ) { this.el.removeClass('active'); + this.navLink ? this.navLink.removeClass('active') : false; } else if (!this.el.hasClass('active')) { + this.el.addClass('active'); + if (Roo.bootstrap.version == 4 && this.navLink ) { + this.navLink.addClass('active'); + } + } if (fire) { this.fireEvent('changed', this, state); @@ -8885,12 +9039,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { /** - * @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", @@ -9169,7 +9323,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -9303,9 +9457,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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; @@ -9641,8 +9796,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } - - this.el.removeClass(this.invalidClass); + + this.el.removeClass([this.invalidClass, 'is-invalid']); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ @@ -9672,7 +9827,8 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } 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){ @@ -9691,9 +9847,12 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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(); @@ -9719,11 +9878,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { } 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){ @@ -9738,8 +9899,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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){ @@ -10086,9 +10252,9 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } - - this.el.removeClass(this.invalidClass); - + this.el.removeClass( this.validClass); + this.inputEl().removeClass('is-invalid'); + if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10112,6 +10278,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10129,8 +10296,12 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { if(label && icon){ icon.remove(); } + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.validClass); + } else { + this.inputEl().addClass('is-valid'); + } - this.el.addClass(this.validClass); if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank && (this.getValue().length || this.forceFeedback)){ @@ -10157,6 +10328,7 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { } this.el.removeClass([this.invalidClass, this.validClass]); + this.inputEl().removeClass(['is-valid', 'is-invalid']); var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10179,9 +10351,14 @@ Roo.extend(Roo.bootstrap.TextArea, Roo.bootstrap.Input, { style : 'margin-right:5px;' }, label, true); } - - this.el.addClass(this.invalidClass); + if (Roo.bootstrap.version == 3) { + this.el.addClass(this.invalidClass); + } else { + this.inputEl().addClass('is-invalid'); + } + + // fixme ... this may be depricated need to test.. if(this.hasFeedback && this.inputType != 'hidden' && !this.allowBlank){ var feedback = this.el.select('.form-control-feedback', true).first(); @@ -10468,7 +10645,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -10685,7 +10862,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { createList : function() { this.list = Roo.get(document.body).createChild({ - tag: 'ul', + tag: Roo.bootstrap.version == 4 ? 'div' : 'ul', cls: 'typeahead typeahead-long dropdown-menu', style: 'display:none' }); @@ -13157,12 +13334,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { multiple : false, /** - * @cfg {String} invalidClass The CSS class to use when marking a field invalid (defaults to "x-form-invalid") + * @cfg {String} invalidClass DEPRICATED - uses BS4 is-valid now */ 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 - uses BS4 is-valid now */ validClass : "has-success", @@ -13309,6 +13486,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var box = { tag: 'div', + style : 'display: contents', cn: [ { tag: 'input', @@ -13367,7 +13545,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } if (align ==='left' && this.fieldLabel.length) { - cfg.cls += ' roo-form-group-label-left row'; + cfg.cls += ' roo-form-group-label-left' + (Roo.bootstrap.version == 4 ? ' row' : ''); cfg.cn = [ indicator, @@ -13631,7 +13809,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ if(!this.tpl){ - this.tpl = '