Roo/bootstrap/Button.js

roojs-bootstrap.js
roojs-bootstrap-debug.js

diff --git a/Roo/bootstrap/Button.js b/Roo/bootstrap/Button.js
index 82cc03c..d389386 100644 (file)
--- a/Roo/bootstrap/Button.js
+++ b/Roo/bootstrap/Button.js
@@ -260,7 +260,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
                     html: this.html
                 };
             }
-            if(this.glyphicon){
+            if(this.fa){
                 value = {
                     tag: 'i',
                     cls: 'fa fas fa-' + this.fa,

diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js
index ddb0fb5..b3eff16 100644 (file)
--- a/roojs-bootstrap-debug.js
+++ b/roojs-bootstrap-debug.js
@@ -589,7 +589,7 @@ 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 fs
  * @cfg {String} badge text for badge
  * @cfg {String} theme (default|glow)  
  * @cfg {Boolean} inverse dark themed version
@@ -649,6 +649,7 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
     disabled: false,
     isClose: false,
     glyphicon: '',
+    fa: '',
     badge: '',
     theme: 'default',
     inverse: false,
@@ -759,6 +760,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 +802,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 +826,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;

diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js
index bd69163..88844e4 100644 (file)
--- a/roojs-bootstrap.js
+++ b/roojs-bootstrap.js
@@ -24,21 +24,22 @@ Roo.bootstrap.ButtonGroup=function(A){Roo.bootstrap.ButtonGroup.superclass.const
 }if(this.direction=='up'){A.cls+=' dropup';}return A;},addItem:function(A){var cn=new Roo.bootstrap.Button(A);cn.parentId=this.id;cn.onRender(this.el,null);return cn;}});
 // Roo/bootstrap/Button.js
 Roo.bootstrap.Button=function(A){Roo.bootstrap.Button.superclass.constructor.call(this,A);this.weightClass=["btn-default btn-outline-secondary","btn-primary","btn-success","btn-info","btn-warning","btn-danger","btn-link"],this.addEvents({"click":true,"toggle":true}
-);};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:'',badge:'',theme:'default',inverse:false,toggle:false,ontext:'ON',offtext:'OFF',defaulton:true,preventDefault:true,removeClass:false,name:false,target:false,pressed:null,getAutoCreate:function(){var A={tag:'button',cls:'roo-button',html:''}
+);};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,toggle:false,ontext:'ON',offtext:'OFF',defaulton:true,preventDefault:true,removeClass:false,name:false,target:false,pressed:null,getAutoCreate:function(){var A={tag:'button',cls:'roo-button',html:''}
 ;if(['a','button','input','submit'].indexOf(this.tag)<0){throw "Invalid value for tag: "+this.tag+". must be a, button, input or submit.";this.tag='button';}else{A.tag=this.tag;}A.html='<span class="roo-button-text">'+(this.html||A.html)+'</span>';if(this.toggle==true){A={tag:'div',cls:'slider-frame roo-button',cn:[{tag:'span','data-on-text':'ON','data-off-text':'OFF',cls:'slider-button',html:this.offtext}
 ]};if(['default','secondary','primary','success','info','warning','danger','link'].indexOf(this.weight)>-1){A.cls+=' '+this.weight;}return A;}if(this.isClose){A.cls+=' close';A["aria-hidden"]=true;A.html="&times;";return A;}if(this.theme==='default'){A.cls='btn roo-button';
 this.weight=this.weight.length?this.weight:'default';if(['default','primary','secondary','success','info','warning','danger','link'].indexOf(this.weight)>-1){var B=this.outline||this.weight=='default'?'outline-':'';var C=this.weight=='default'?'secondary':this.weight;
 A.cls+=' btn-'+B+C;if(this.weight=='default'){A.cls+=' btn-'+this.weight;}}}else if(this.theme==='glow'){A.tag='a';A.cls='btn-glow roo-button';if(['default','primary','success','info','warning','danger','link'].indexOf(this.weight)>-1){A.cls+=' '+this.weight;
-}}if(this.inverse){this.cls+=' inverse';}if(this.active||this.pressed===true){A.cls+=' active';}if(this.disabled){A.disabled='disabled';}if(this.items){Roo.log('changing to ul');A.tag='ul';this.glyphicon='caret';}A.cls+=this.size.length?(' btn-'+this.size):'';
-if(this.parentType==='Navbar'&&!this.parent().bar){Roo.log('changing to li?');A.tag='li';A.cls='';A.cn=[{tag:'a',cls:'roo-button',html:this.html,href:this.href||'#'}];if(this.menu){A.cn[0].html=this.html+' <span class="caret"></span>';A.cls+=' dropdown';}
-delete A.html;}A.cls+=this.parentType==='Navbar'?' navbar-btn':'';if(this.glyphicon){A.html=' '+A.html;A.cn=[{tag:'span',cls:'glyphicon glyphicon-'+this.glyphicon}];}if(this.badge){A.html+=' ';A.tag='a';A.href=this.href;var D=A.html;if(this.glyphicon){D={tag:'span',cls:'glyphicon glyphicon-'+this.glyphicon,html:this.html}
-;}var bw=this.badge_weight.length?this.badge_weight:(this.weight.length?this.weight:'secondary');bw=bw=='default'?'secondary':bw;A.cn=[D,{tag:'span',cls:'badge badge-'+bw,html:this.badge}];A.html='';}if(this.menu){A.cls+=' dropdown';A.html=typeof(A.html)!='undefined'?A.html+' <span class="caret"></span>':'<span class="caret"></span>';
-}if(A.tag!=='a'&&this.href!==''){throw "Tag must be a to set href.";}else if(this.href.length>0){A.href=this.href;}if(this.removeClass){A.cls='';}if(this.target){A.target=this.target;}return A;},initEvents:function(){if(typeof(this.menu)!='undefined'){this.menu.parentType=this.xtype;
-this.menu.triggerEl=this.el;this.addxtype(Roo.apply({},this.menu));}if(this.el.hasClass('roo-button')){this.el.on('click',this.onClick,this);}else{this.el.select('.roo-button').on('click',this.onClick,this);}if(this.removeClass){this.el.on('click',this.onClick,this);
-}this.el.enableDisplayMode();},onClick:function(e){if(this.disabled){return;}Roo.log('button on click ');if(this.preventDefault){e.preventDefault();}if(this.pressed===true||this.pressed===false){this.toggleActive(e);}this.fireEvent('click',this,e);},enable:function(){this.disabled=false;
-this.el.removeClass('disabled');},disable:function(){this.disabled=true;this.el.addClass('disabled');},setActive:function(v){this.el[v?'addClass':'removeClass']('active');this.pressed=v;},toggleActive:function(e){this.setActive(!this.pressed);this.fireEvent('toggle',this,e,!this.pressed);
-},isActive:function(){return this.el.hasClass('active');},setText:function(A){this.el.select('.roo-button-text',true).first().dom.innerHTML=A;},getText:function(){return this.el.select('.roo-button-text',true).first().dom.innerHTML;},setWeight:function(A){this.el.removeClass(this.weightClass);
-this.weight=A;var B=this.outline?'outline-':'';if(A=='default'){this.el.addClass('btn-default btn-outline-secondary');return;}this.el.addClass('btn-'+B+A);}});
+}}if(this.inverse){this.cls+=' inverse';}if(this.active||this.pressed===true){A.cls+=' active';}if(this.disabled){A.disabled='disabled';}if(this.items){Roo.log('changing to ul');A.tag='ul';this.glyphicon='caret';if(Roo.bootstrap.version==4){this.fa='caret-down';
+}}A.cls+=this.size.length?(' btn-'+this.size):'';if(this.parentType==='Navbar'&&!this.parent().bar){Roo.log('changing to li?');A.tag='li';A.cls='';A.cn=[{tag:'a',cls:'roo-button',html:this.html,href:this.href||'#'}];if(this.menu){A.cn[0].html=this.html+' <span class="caret"></span>';
+A.cls+=' dropdown';}delete A.html;}A.cls+=this.parentType==='Navbar'?' navbar-btn':'';if(this.glyphicon){A.html=' '+A.html;A.cn=[{tag:'span',cls:'glyphicon glyphicon-'+this.glyphicon}];}if(this.fa){A.html=' '+A.html;A.cn=[{tag:'i',cls:'fa fas fa-'+this.fa}
+];}if(this.badge){A.html+=' ';A.tag='a';A.href=this.href;var D=A.html;if(this.glyphicon){D={tag:'span',cls:'glyphicon glyphicon-'+this.glyphicon,html:this.html};}if(this.fa){D={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;A.cn=[D,{tag:'span',cls:'badge badge-'+bw,html:this.badge}];A.html='';}if(this.menu){A.cls+=' dropdown';A.html=typeof(A.html)!='undefined'?A.html+' <span class="caret"></span>':'<span class="caret"></span>';}if(A.tag!=='a'&&this.href!==''){throw "Tag must be a to set href.";
+}else if(this.href.length>0){A.href=this.href;}if(this.removeClass){A.cls='';}if(this.target){A.target=this.target;}return A;},initEvents:function(){if(typeof(this.menu)!='undefined'){this.menu.parentType=this.xtype;this.menu.triggerEl=this.el;this.addxtype(Roo.apply({}
+,this.menu));}if(this.el.hasClass('roo-button')){this.el.on('click',this.onClick,this);}else{this.el.select('.roo-button').on('click',this.onClick,this);}if(this.removeClass){this.el.on('click',this.onClick,this);}this.el.enableDisplayMode();},onClick:function(e){if(this.disabled){return;
+}Roo.log('button on click ');if(this.preventDefault){e.preventDefault();}if(this.pressed===true||this.pressed===false){this.toggleActive(e);}this.fireEvent('click',this,e);},enable:function(){this.disabled=false;this.el.removeClass('disabled');},disable:function(){this.disabled=true;
+this.el.addClass('disabled');},setActive:function(v){this.el[v?'addClass':'removeClass']('active');this.pressed=v;},toggleActive:function(e){this.setActive(!this.pressed);this.fireEvent('toggle',this,e,!this.pressed);},isActive:function(){return this.el.hasClass('active');
+},setText:function(A){this.el.select('.roo-button-text',true).first().dom.innerHTML=A;},getText:function(){return this.el.select('.roo-button-text',true).first().dom.innerHTML;},setWeight:function(A){this.el.removeClass(this.weightClass);this.weight=A;var B=this.outline?'outline-':'';
+if(A=='default'){this.el.addClass('btn-default btn-outline-secondary');return;}this.el.addClass('btn-'+B+A);}});
 // Roo/bootstrap/Column.js
 Roo.bootstrap.Column=function(A){Roo.bootstrap.Column.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.Column,Roo.bootstrap.Component,{xs:false,sm:false,md:false,lg:false,xsoff:false,smoff:false,mdoff:false,lgoff:false,html:'',offset:0,alert:false,fa:false,icon:false,hidden:false,fasize:1,getAutoCreate:function(){var A=Roo.apply({}
 ,Roo.bootstrap.Column.superclass.getAutoCreate.call(this));A={tag:'div',cls:'column'};var B=this;['xs','sm','md','lg'].map(function(D){if(B[D+'off']!==false){A.cls+=' col-'+D+'-offset-'+B[D+'off'];}if(B[D]===false){return;}if(!B[D]){A.cls+=' hidden-'+D;return;