Added bootstrap 5 definitions

src/constants/index.js

@@ -115,6 +115,52 @@ const CONSTANTS = {
       searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
       searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
     }
+  },
+  5: {
+    iconsPrefix: 'fa',
+    icons: {
+      paginationSwitchDown: 'fa-caret-square-down',
+      paginationSwitchUp: 'fa-caret-square-up',
+      refresh: 'fa-sync',
+      toggleOff: 'fa-toggle-off',
+      toggleOn: 'fa-toggle-on',
+      columns: 'fa-th-list',
+      detailOpen: 'fa-plus',
+      detailClose: 'fa-minus',
+      fullscreen: 'fa-arrows-alt',
+      search: 'fa-search',
+      clearSearch: 'fa-trash'
+    },
+    classes: {
+      buttonsPrefix: 'btn',
+      buttons: 'secondary',
+      buttonsGroup: 'btn-group',
+      buttonsDropdown: 'btn-group',
+      pull: 'float',
+      inputGroup: 'btn-group',
+      inputPrefix: 'form-control-',
+      input: 'form-control',
+      paginationDropdown: 'btn-group dropdown',
+      dropup: 'dropup',
+      dropdownActive: 'active',
+      paginationActive: 'active',
+      buttonActive: 'active'
+    },
+    html: {
+      toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
+      toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
+      pageDropdown: ['<div class="dropdown-menu">', '</div>'],
+      pageDropdownItem: '<a class="dropdown-item %s" href="#">%s</a>',
+      toolbarDropdownSeparator: '<div class="dropdown-divider"></div>',
+      dropdownCaret: '<span class="caret"></span>',
+      pagination: ['<ul class="pagination%s">', '</ul>'],
+      paginationItem: '<li class="page-item%s"><a class="page-link" aria-label="%s" href="javascript:void(0)">%s</a></li>',
+      icon: '<i class="%s %s"></i>',
+      inputGroup: '<div class="input-group">%s<div class="input-group-append">%s</div></div>',
+      searchInput: '<input class="%s%s" type="text" placeholder="%s">',
+      searchButton: '<button class="%s" type="button" name="search" title="%s">%s %s</button>',
+      searchClearButton: '<button class="%s" type="button" name="clearSearch" title="%s">%s %s</button>'
+    }
   }
 }[bootstrapVersion]
 

src/extensions/multiple-sort/bootstrap-table-multiple-sort.js

@@ -112,6 +112,59 @@ const bootstrap = {
       multipleSortSelect: '<select class="%s %s form-control">'
     }
   },
+  bootstrap5: {
+    icons: {
+      'plus': 'fa-plus',
+      'minus': 'fa-minus',
+      'sort': 'fa-sort'
+    },
+    html: {
+      multipleSortModal: `
+        <div class="modal fade" id="%s" tabindex="-1" role="dialog" aria-labelledby="%sLabel" aria-hidden="true">
+          <div class="modal-dialog" role="document">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h5 class="modal-title" id="%sLabel">%s</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body">
+                <div class="bootstrap-table">
+                        <div class="fixed-table-toolbar">
+                            <div class="bars">
+                                <div id="toolbar" class="pb-3">
+                                     <button id="add" type="button" class="btn btn-secondary">%s %s</button>
+                                     <button id="delete" type="button" class="btn btn-secondary" disabled>%s %s</button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="fixed-table-container">
+                            <table id="multi-sort" class="table">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                         <th><div class="th-inner">%s</div></th>
+                                    </tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table>
+                        </div>
+                    </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">%s</button>
+                <button type="button" class="btn btn-primary multi-sort-order-button">%s</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `,
+      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
+      multipleSortSelect: '<select class="%s %s form-control">'
+    }
+  },
   semantic: {
     icons: {
       'plus': 'fa-plus',

src/extensions/toolbar/bootstrap-table-toolbar.js

@@ -8,7 +8,7 @@
 
 const Utils = $.fn.bootstrapTable.utils
 
-const bootstrap = {
+const theme = {
   bootstrap3: {
     icons: {
       advancedSearchIcon: 'glyphicon-chevron-down'
@@ -55,7 +55,36 @@ const bootstrap = {
               </div>
               <div class="modal-body modal-body-custom">
                 <div class="container-fluid" id="avdSearchModalContent_%s"
-                  style="padding-right: 0px; padding-left: 0px;" >
+                  style="padding-right: 0; padding-left: 0;" >
+                </div>
+              </div>
+              <div class="modal-footer">
+                <button type="button" id="btnCloseAvd_%s" class="btn btn-%s">%s</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `
+    }
+  },
+  bootstrap5: {
+    icons: {
+      advancedSearchIcon: 'fa-chevron-down'
+    },
+    html: {
+      modal: `
+        <div id="avdSearchModal_%s"  class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+          <div class="modal-dialog modal-xs">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h4 class="modal-title">%s</h4>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+              </div>
+              <div class="modal-body modal-body-custom">
+                <div class="container-fluid" id="avdSearchModalContent_%s"
+                  style="padding-right: 0; padding-left: 0;" >
                 </div>
               </div>
               <div class="modal-footer">
@@ -161,7 +190,7 @@ $.extend($.fn.bootstrapTable.defaults, {
 })
 
 $.extend($.fn.bootstrapTable.defaults.icons, {
-  advancedSearchIcon: bootstrap.icons.advancedSearchIcon
+  advancedSearchIcon: theme.icons.advancedSearchIcon
 })
 
 $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
@@ -212,7 +241,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
     const o = this.options
     const modalSelector = '#avdSearchModal_' + o.idTable
     if ($(modalSelector).length <= 0) {
-      $('body').append(Utils.sprintf(bootstrap.html.modal, o.idTable, o.formatAdvancedSearch(), o.idTable, o.idTable, o.buttonsClass, o.formatAdvancedCloseButton()))
+      $('body').append(Utils.sprintf(theme.html.modal, o.idTable, o.formatAdvancedSearch(), o.idTable, o.idTable, o.buttonsClass, o.formatAdvancedCloseButton()))
 
       let timeoutId = 0
 
@@ -245,6 +274,12 @@ $.BootstrapTable = class extends $.BootstrapTable {
     const modalSelector = '#avdSearchModal_' + this.options.idTable
     if ($.inArray($.fn.bootstrapTable.theme, ['bootstrap3', 'bootstrap4']) !== -1) {
       $(modalSelector).modal()
+    } else if ($.fn.bootstrapTable.theme === 'bootstrap5') {
+      if (!this.toolbarModal) {
+      //   eslint-disable-next-line no-undef
+        this.toolbarModal = new bootstrap.Modal(document.getElementById('avdSearchModal_' + this.options.idTable), {})
+      }
+      this.toolbarModal.show()
     } else if ($.fn.bootstrapTable.theme === 'bulma') {
       $(modalSelector).toggleClass('is-active')
     } else if ($.fn.bootstrapTable.theme === 'foundation') {
@@ -267,6 +302,8 @@ $.BootstrapTable = class extends $.BootstrapTable {
     const modalSelector = '#avdSearchModal_' + this.options.idTable
     if ($.inArray($.fn.bootstrapTable.theme, ['bootstrap3', 'bootstrap4']) !== -1) {
       $closeModalButton.modal('hide')
+    } else if ($.fn.bootstrapTable.theme === 'bootstrap5') {
+      this.toolbarModal.hide()
     } else if ($.fn.bootstrapTable.theme === 'bulma') {
       $('html').toggleClass('is-clipped')
       $(modalSelector).toggleClass('is-active')