X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=a2606902e0689b667ff377c2cf12560858416348;hb=dbe9e326ba1541010b127a8ea347750c0602141e;hp=025975cfca99c6efe6dc567a5f2c6bd5689f02fb;hpb=79c3cd6520eef63ec33d5393a84efb7267a3067a;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 025975cfca..a2606902e0 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); @@ -581,13 +581,16 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { * @extends Roo.bootstrap.Component * Bootstrap Button class * @cfg {String} html The button content - * @cfg {String} weight (default | primary | success | info | warning | danger | link ) default + * @cfg {String} weight (default | primary | secondary | success | info | warning | danger | link ) default + * @cfg {String} badge_weight (default | primary | secondary | success | info | warning | danger | link ) default (same as button) + * @cfg {Boolean} outline default false (except for weight=default which emulates old behaveiour with an outline) * @cfg {String} size ( lg | sm | xs) * @cfg {String} tag ( a | input | submit) * @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 @@ -607,7 +610,7 @@ Roo.extend(Roo.bootstrap.ButtonGroup, Roo.bootstrap.Component, { Roo.bootstrap.Button = function(config){ Roo.bootstrap.Button.superclass.constructor.call(this, config); - this.weightClass = ["btn-default", + this.weightClass = ["btn-default btn-outline-secondary", "btn-primary", "btn-success", "btn-info", @@ -639,12 +642,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { html: false, active: false, weight: '', + badge_weight: '', + outline : false, size: '', tag: 'button', href: '', disabled: false, isClose: false, glyphicon: '', + fa: '', badge: '', theme: 'default', inverse: false, @@ -692,7 +698,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { ] }; - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (['default', 'secondary' , 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { cfg.cls += ' '+this.weight; } @@ -716,9 +722,15 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { //if (this.parentType != 'Navbar') { this.weight = this.weight.length ? this.weight : 'default'; //} - if (['default', 'primary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { + if (['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'link'].indexOf(this.weight) > -1) { - cfg.cls += ' btn-' + this.weight; + var outline = this.outline || this.weight == 'default' ? 'outline-' : ''; + var weight = this.weight == 'default' ? 'secondary' : this.weight; + cfg.cls += ' btn-' + outline + weight; + if (this.weight == 'default') { + // BC + cfg.cls += ' btn-' + this.weight; + } } } else if (this.theme==='glow') { @@ -749,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) : ''; @@ -787,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 += ' '; @@ -801,18 +827,28 @@ 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; + cfg.cn = [ value, { tag: 'span', - cls: 'badge', + cls: 'badge badge-' + bw, html: this.badge } ]; @@ -946,7 +982,13 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component, { setWeight : function(str) { this.el.removeClass(this.weightClass); - this.el.addClass('btn-' + str); + this.weight = str; + var outline = this.outline ? 'outline-' : ''; + if (str == 'default') { + this.el.addClass('btn-default btn-outline-secondary'); + return; + } + this.el.addClass('btn-' + outline + str); } @@ -2368,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'){ @@ -2472,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 = { @@ -2482,6 +2524,7 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component, { var anc = { tag : 'a', + cls : 'dropdown-item', href : '#', cn : [ ] }; @@ -2498,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') { @@ -2599,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 @@ -2725,7 +2768,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); } @@ -2767,7 +2810,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) { @@ -2793,7 +2836,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 : [ @@ -2808,18 +2870,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { cn : header }, bdy, - { - cls : 'modal-footer', - cn : [ - { - tag: 'div', - cls: 'btn-' + this.buttonPosition - } - ] - - } - - + footer ] } @@ -2842,7 +2893,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() @@ -2854,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2863,9 +2918,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; } @@ -2926,7 +2983,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'); @@ -3018,7 +3075,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; @@ -3028,22 +3085,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) { @@ -3270,10 +3323,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]){ @@ -3550,6 +3604,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){ @@ -3820,7 +3877,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); @@ -3894,7 +3985,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { * * @cfg {String} tag (header|footer|nav|div) default is nav - * + * @cfg {String} weight (light|primary|secondary|success|danger|warning|info|dark|white) default is light. * * * @constructor @@ -3915,7 +4006,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { arrangement: '', align : false, - + weight : 'light', main : false, @@ -3928,9 +4019,23 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar' + 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 = [ { @@ -3941,7 +4046,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 @@ -3955,7 +4060,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; } @@ -3964,10 +4069,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { cfg.cn[0].cls += ' navbar-right'; } - if (this.inverse) { - cfg.cls += ' navbar-inverse'; - - } + return cfg; @@ -4042,36 +4144,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 + ] }); } @@ -4083,6 +4187,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 ; @@ -4092,7 +4202,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', @@ -4258,15 +4369,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 = { @@ -4280,7 +4398,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') { @@ -4367,7 +4485,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); @@ -4493,11 +4614,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 @@ -4547,21 +4671,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) { @@ -4570,8 +4699,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, @@ -4583,9 +4733,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; } @@ -4606,6 +4758,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') { @@ -4707,8 +4872,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); @@ -7982,7 +8153,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component, { cls : '' }; if (this.parent().xtype.match(/^Nav/)) { - cfg.cls = 'navbar-form navbar-' + this.align; + cfg.cls = 'navbar-form form-inline navbar-' + this.align; } @@ -8861,12 +9032,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", @@ -9094,7 +9265,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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 }); } @@ -9103,7 +9274,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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? }); } @@ -9113,7 +9284,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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 }); } @@ -9122,7 +9293,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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? }); } @@ -9132,21 +9303,27 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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 }, @@ -9166,17 +9343,13 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { { 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 ] }, { @@ -9277,9 +9450,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; @@ -9300,6 +9474,10 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { 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){ @@ -9611,8 +9789,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){ @@ -9642,7 +9820,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){ @@ -9661,9 +9840,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(); @@ -9689,11 +9871,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){ @@ -9708,8 +9892,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){ @@ -9785,7 +9974,7 @@ Roo.extend(Roo.bootstrap.Input, Roo.bootstrap.Component, { return; } - if(this.indicator){ + if(this.indicatorEl()){ var ar = this.el.select('label > span',true); if (ar.elements.length) { @@ -10056,9 +10245,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(); @@ -10082,6 +10271,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(); @@ -10099,8 +10289,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)){ @@ -10127,6 +10321,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(); @@ -10149,9 +10344,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(); @@ -10330,7 +10530,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (this.before) { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-prepend input-group-text', html : this.before }); } @@ -10345,62 +10545,44 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if (this.after) { inputblock.cn.push({ tag :'span', - cls : 'input-group-addon', + cls : 'input-group-addon input-group-append input-group-text', html : this.after }); } }; - var box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, - inputblock - ] - - }; + + + var ibwrap = inputblock; if(this.multiple){ - box = { - tag: 'div', - cn: [ - { - tag: 'input', - type : 'hidden', - cls: 'form-hidden-field' - }, + ibwrap = { + tag: 'ul', + cls: 'roo-select2-choices', + cn:[ { - tag: 'ul', - cls: 'roo-select2-choices', - cn:[ - { - tag: 'li', - cls: 'roo-select2-search-field', - cn: [ + tag: 'li', + cls: 'roo-select2-search-field', + cn: [ - inputblock - ] - } + inputblock ] } ] - } - }; + }; + + } var combobox = { cls: 'roo-select2-container input-group', cn: [ - box -// { -// tag: 'ul', -// cls: 'typeahead typeahead-long dropdown-menu', -// style: 'display:none' -// } + { + tag: 'input', + type : 'hidden', + cls: 'form-hidden-field' + }, + ibwrap ] }; @@ -10420,7 +10602,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { combobox.cn.push({ tag :'span', - cls : 'input-group-addon btn dropdown-toggle', + cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle', cn : [ caret, { @@ -10441,17 +10623,25 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { if(this.multiple){ combobox.cls += ' roo-select2-container-multi'; } + 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, @@ -10482,11 +10672,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { 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 ] }, { @@ -10533,11 +10719,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { } else if ( this.fieldLabel.length) { // Roo.log(" label"); 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', //cls : 'input-group-addon', @@ -10559,11 +10741,7 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { 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 ] }, @@ -10677,7 +10855,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' }); @@ -13149,12 +13327,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", @@ -13301,6 +13479,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var box = { tag: 'div', + style : 'display: contents', cn: [ { tag: 'input', @@ -13326,6 +13505,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { var combobox = { cls: 'roo-select2-container input-group roo-select2-container-multi', cn: [ + box // { // tag: 'ul', @@ -13345,21 +13525,27 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { combobox.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 }, @@ -13382,17 +13568,13 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { { 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 ] }, { @@ -13443,11 +13625,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { } else if ( this.fieldLabel.length) { // Roo.log(" label"); 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', //cls : 'input-group-addon', @@ -13463,11 +13641,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { //cls : 'input-group-addon', html : this.fieldLabel }, - { - tag : 'i', - cls : 'roo-required-indicator right-indicator text-danger fa fa-lg fa-star', - tooltip : 'This field is required' - }, + indicator, combobox ]; @@ -13628,7 +13802,9 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, { */ if(!this.tpl){ - this.tpl = '