Merge branch 'develop' into feature/multiselect-filtercontrol

package.json

@@ -10,7 +10,7 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "chalk": "^4.0.0",
-    "clean-css-cli": "^4.3.0",
+    "clean-css-cli": "^5.0.1",
     "core-js": "^3.1.4",
     "cross-env": "^7.0.2",
     "eslint": "^7.0.0",
@@ -28,9 +28,9 @@
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^5.0.4",
     "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-vue": "5.1.9",
+    "rollup-plugin-vue": "6.0.0",
     "stylelint": "^13.3.3",
-    "stylelint-config-standard": "^20.0.0",
+    "stylelint-config-standard": "^21.0.0",
     "vue-template-compiler": "^2.6.10"
   },
   "scripts": {

site/_data/nav.yml

@@ -21,6 +21,7 @@
     - title: Auto Refresh
     - title: Cookie
     - title: Copy Rows
+    - title: Custom View
     - title: Defer URL
     - title: Editable
     - title: Export
@@ -48,6 +49,8 @@
     - title: Webpack
     - title: Component
 
+- title: Online Editor
+
 - title: FAQ
 
 - title: About

site/_includes/stylesheet.html

@@ -7,6 +7,6 @@
 {% endif %}
 {% if page.layout != "examples" %}
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
-<link href="{{ site.baseurl }}/assets/css/style.css?m=7" rel="stylesheet">
+<link href="{{ site.baseurl }}/assets/css/style.css?m=8" rel="stylesheet">
 {% endif %}
 {%- endif -%}

site/assets/css/style.css

@@ -168,3 +168,7 @@ header.themes .bd-lead {
   min-width: 48px;
   vertical-align: middle;
 }
+
+.online-editor img {
+  max-width: 100%;
+}

site/docs/extensions/sticky-header.md

@@ -37,11 +37,11 @@ This is an extension which provides a sticky header for the table when scrolling
 
 - **attribute:** `data-sticky-header-offset-left`
 
-- **type:** `Number | String`
+- **type:** `Number`
 
 - **Detail:**
 
-   Set the left offset of the sticky header container.
+   Set the left offset of the sticky header container. If the body padding left is `60px`, this value would be `60`.
 
 - **Default:** `0`
 
@@ -49,11 +49,11 @@ This is an extension which provides a sticky header for the table when scrolling
 
 - **attribute:** `data-sticky-header-offset-right`
 
-- **type:** `Number | String`
+- **type:** `Number`
 
 - **Detail:**
 
-   Set the right offset of the sticky header container.
+   Set the right offset of the sticky header container. If the body padding right is `60px`, this value would be `60`.
 
 - **Default:** `0`
 
@@ -65,6 +65,6 @@ This is an extension which provides a sticky header for the table when scrolling
 
 - **Detail:**
 
-   Set the Y offset from the top of the window to pin the sticky header. If there is a fixed navigation bar with a height of 60px, this value would be `60`.
+   Set the Y offset from the top of the window to pin the sticky header. If there is a fixed navigation bar with a height of `60px`, this value would be `60`.
 
 - **Default:** `0`

site/docs/online-editor.md

@@ -0,0 +1,98 @@
+---
+layout: docs
+title: Online Editor
+description: Online Editor Explanation.
+group: online-editor
+redirect_from:
+  - "/online-editor/"
+  - "/zh-cn/online-editor/"
+  - "/es/online-editor/"
+toc: true
+---
+
+This page explains how to use our [Online Editor](https://live.bootstrap-table.com/).
+
+The Online Editor should be used for each **issue** and **pull request**!
+
+<img src="https://live.bootstrap-table.com/images/bootstrap-table-live.png">
+
+## How to log in
+
+The login is quite easy, just press the **Sign in with GitHub** button on the top right and login via GitHub.
+
+## Base functionality and page structure
+
+Our online editor was designed to create easy examples/demos for the bootstrap-table.
+
+The page is structured as follows:
+
+### Top Navbar
+
+We have 5 buttons:
+
+* **Run**: The Run button shows the current version of your example.
+* **Save**: The Save button saves your example. After you pressed save, the URL will be changed e.g. `https://live.bootstrap-table.com/code/<username>/<ID>`.
+* **Libraries**: This button will open a configuration page. On this page you can configure the environment of the example:
+  * Bootstrap Table source: This option defines which source of the version (CDN or from GitHub as source) should be used. If you choose `From GitHub src` you can set a branch that will be used for the example. For Issues, you normally always use `From Released CDN`.
+  * Release CDN version: Here you can choose the version of the bootstrap-table to create an example for older bootstrap-table versions.
+  * Theme: Here you can choose between our supported themes e.g. to show an issue with a certain theme.
+  * Extensions: If you explain to use an extension, you can select it here easily. This means you don't have to include it yourself on the example!
+* **Load Examples**: This option opens a page, here you can load existing examples (Its a "mirror" of our [examples page](https://examples.bootstrap-table.com/)).
+* **Links**: The last button just holds some links e.g. to our website, GitHub page, etc.
+
+### Left Side
+
+You can write your examples. Including HTML, CSS and JavaScript (css and javascript needs a `<style></style>` and/or `<script></script>` tag!
+
+The basic template is:
+```html
+<!-- Includes custom css and js files -->
+<link rel="stylesheet" href="https://example.com/custom.css">
+<script src="https://example.com/custom.js"></script>
+
+<!-- Define custom style -->
+<style>
+</style>
+
+<!-- No need to write <html> and <body> tags -->
+<table id="table">
+</table>
+
+<script>
+  $(function () {
+    $('#table').bootstrapTable()
+  })
+</script>
+```
+
+Note: **You need to put the initialization function in `$(function () {})` to ensure that jquery and bootstrap-table have been loaded.**
+
+### Right Side
+
+You can see your running example (after pressing on the **Run** button).
+
+You can also click the **Result (Fullscreen)** to toggle the fullscreen of the running example.
+
+## Workflow for Issues
+
+Each issue should contain an example (created on the [Online Editor](https://live.bootstrap-table.com/)) of the problem.
+
+1. Open the online editor.
+2. Go to the Libraries page and configure the environment of the example.
+* Version
+* Theme
+* Extensions
+3. Write down your example (or copy it from your local project).
+4. Check if you can reproduce your issue on the example.
+5. Save the example (press on the Save button) and copy the URL.
+6. Open an issue with the URL to the example.
+
+(Maybe you also can use our Load Examples button to load an existing example, instead of point 2 and 3).
+
+## Workflow for Pull requests
+
+The workflow for PR's is quite similar to the workflow for Issues.
+
+The only difference is that you have to choose your branch (The editor will use your code to create the example). For that, you have to open the `Libraries page`, select `From GitHub src` on the `Bootstrap Table source` option and write your branch name in the `GitHub src branch` input.
+The syntax for the branch name is `<username>:<branch>`. You also can copy that string from the pull request page.
+![](http://i.epvpimg.com/NNhNbab.png)

src/bootstrap-table.js

@@ -96,7 +96,7 @@ class BootstrapTable {
       ${loadingTemplate}
       </div>
       </div>
-      <div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
+      <div class="fixed-table-footer"></div>
       </div>
       ${bottomPagination}
       </div>
@@ -956,9 +956,13 @@ class BootstrapTable {
         return
       }
 
-      const s = this.searchText && (this.fromHtml ? Utils.escapeHTML(this.searchText) : this.searchText).toLowerCase()
+      let s = this.searchText && (this.fromHtml ? Utils.escapeHTML(this.searchText) : this.searchText).toLowerCase()
       const f = Utils.isEmptyObject(this.filterColumns) ? null : this.filterColumns
 
+      if (this.options.searchAccentNeutralise) {
+        s = Utils.normalizeAccent(s)
+      }
+
       // Check filter
       if (typeof this.filterOptions.filterAlgorithm === 'function') {
         this.data = this.options.data.filter(item => this.filterOptions.filterAlgorithm.apply(null, [item, f]))
@@ -1176,10 +1180,10 @@ class BootstrapTable {
     }
 
     if (this.paginationParts.includes('pageSize')) {
-      html.push('<span class="page-list">')
+      html.push('<div class="page-list">')
 
       const pageNumber = [
-        `<span class="${this.constants.classes.paginationDropdown}">
+        `<div class="${this.constants.classes.paginationDropdown}">
         <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown">
         <span class="page-size">
         ${allSelected ? opts.formatAllRows() : opts.pageSize}
@@ -1201,13 +1205,13 @@ class BootstrapTable {
           pageNumber.push(Utils.sprintf(this.constants.html.pageDropdownItem, active, page))
         }
       })
-      pageNumber.push(`${this.constants.html.pageDropdown[1]}</span>`)
+      pageNumber.push(`${this.constants.html.pageDropdown[1]}</div>`)
 
       html.push(opts.formatRecordsPerPage(pageNumber.join('')))
     }
 
     if (this.paginationParts.includes('pageInfo') || this.paginationParts.includes('pageInfoShort') || this.paginationParts.includes('pageSize')) {
-      html.push('</span></div>')
+      html.push('</div></div>')
     }
 
     if (this.paginationParts.includes('pageList')) {
@@ -1304,7 +1308,7 @@ class BootstrapTable {
     const dropupClass = ['bottom', 'both'].includes(opts.paginationVAlign) ?
       ` ${this.constants.classes.dropup}` : ''
 
-    this.$pagination.last().find('.page-list > span').addClass(dropupClass)
+    this.$pagination.last().find('.page-list > div').addClass(dropupClass)
 
     if (!opts.onlyInfoPagination) {
       $pageList = this.$pagination.find('.page-list a')
@@ -2218,6 +2222,10 @@ class BootstrapTable {
       this.$tableFooter = this.$el.find('tfoot')
     }
 
+    if (!this.$tableFooter.find('tr').length) {
+      this.$tableFooter.html('<table><thead><tr></tr></thead></table>')
+    }
+
     this.$tableFooter.find('tr').html(html.join(''))
 
     this.trigger('post-footer', this.$tableFooter)

src/extensions/filter-control/utils.js

@@ -255,8 +255,8 @@ export function initFilterSelectControls (that) {
 
     if (isColumnSearchableViaSelect(column) && isFilterDataNotGiven(column) && hasSelectControlElement(selectControl)) {
       if (selectControl.get(selectControl.length - 1).options.length === 0) {
-        // Added the default option
-        addOptionToSelectControl(selectControl, '', column.filterControlPlaceholder, column.filterDefault)
+        // Added the default option, must use a non-breaking space( ) to pass the W3C validator
+        addOptionToSelectControl(selectControl, '', column.filterControlPlaceholder || ' ', column.filterDefault)
       }
 
       const uniqueValues = {}

src/extensions/sticky-header/bootstrap-table-sticky-header.js

@@ -56,6 +56,18 @@ $.BootstrapTable = class extends $.BootstrapTable {
       .on('scroll', () => this.renderStickyHeader())
   }
 
+  getCaret (...args) {
+    super.getCaret(...args)
+
+    if (this.$stickyHeader) {
+      const $ths = this.$stickyHeader.find('th')
+
+      this.$header.find('th').each((i, th) => {
+        $ths.eq(i).find('.sortable').attr('class', $(th).find('.sortable').attr('class'))
+      })
+    }
+  }
+
   horizontalScroll () {
     super.horizontalScroll()
     this.$tableBody.on('scroll', () => this.matchPositionX())
@@ -108,9 +120,9 @@ $.BootstrapTable = class extends $.BootstrapTable {
         stickyHeaderOffsetLeft = 0
         stickyHeaderOffsetRight = 0
       }
-      this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}`)
-      this.$stickyContainer.css('left', `${stickyHeaderOffsetLeft}`)
-      this.$stickyContainer.css('right', `${stickyHeaderOffsetRight}`)
+      this.$stickyContainer.css('top', `${this.options.stickyHeaderOffsetY}px`)
+      this.$stickyContainer.css('left', `${stickyHeaderOffsetLeft}px`)
+      this.$stickyContainer.css('right', `${stickyHeaderOffsetRight}px`)
       // create scrollable container for header
       this.$stickyTable = $('<table/>')
       this.$stickyTable.addClass(this.options.classes)

src/locale/bootstrap-table-pt-PT.js

@@ -5,38 +5,38 @@
 
 $.fn.bootstrapTable.locales['pt-PT'] = $.fn.bootstrapTable.locales['pt'] = {
   formatCopyRows () {
-    return 'Copy Rows'
+    return 'Copiar Linhas'
   },
   formatPrint () {
-    return 'Print'
+    return 'Imprimir'
   },
   formatLoadingMessage () {
     return 'A carregar, por favor aguarde'
   },
   formatRecordsPerPage (pageNumber) {
-    return `${pageNumber} registos por página`
+    return `${pageNumber} registos por página`
   },
   formatShowingRows (pageFrom, pageTo, totalRows, totalNotFiltered) {
     if (totalNotFiltered !== undefined && totalNotFiltered > 0 && totalNotFiltered > totalRows) {
       return `A mostrar ${pageFrom} até ${pageTo} de ${totalRows} linhas (filtered from ${totalNotFiltered} total rows)`
     }
 
-    return `A mostrar ${pageFrom} até ${pageTo} de ${totalRows} linhas`
+    return `A mostrar ${pageFrom} até ${pageTo} de ${totalRows} linhas`
   },
   formatSRPaginationPreText () {
-    return 'previous page'
+    return 'página anterior'
   },
   formatSRPaginationPageText (page) {
-    return `to page ${page}`
+    return `ir para página ${page}`
   },
   formatSRPaginationNextText () {
-    return 'next page'
+    return 'próxima página'
   },
   formatDetailPagination (totalRows) {
-    return `Showing ${totalRows} rows`
+    return `Mostrando ${totalRows} linhas`
   },
   formatClearSearch () {
-    return 'Clear Search'
+    return 'Limpar Pesquisa'
   },
   formatSearch () {
     return 'Pesquisa'
@@ -45,16 +45,16 @@ $.fn.bootstrapTable.locales['pt-PT'] = $.fn.bootstrapTable.locales['pt'] = {
     return 'Nenhum registo encontrado'
   },
   formatPaginationSwitch () {
-    return 'Esconder/Mostrar pagina&ccedilão'
+    return 'Esconder/Mostrar paginação'
   },
   formatPaginationSwitchDown () {
-    return 'Show pagination'
+    return 'Mostrar página'
   },
   formatPaginationSwitchUp () {
-    return 'Hide pagination'
+    return 'Esconder página'
   },
   formatRefresh () {
-    return 'Atualizar'
+    return 'Actualizar'
   },
   formatToggle () {
     return 'Alternar'
@@ -69,37 +69,37 @@ $.fn.bootstrapTable.locales['pt-PT'] = $.fn.bootstrapTable.locales['pt'] = {
     return 'Colunas'
   },
   formatColumnsToggleAll () {
-    return 'Toggle all'
+    return 'Activar tudo'
   },
   formatFullscreen () {
-    return 'Fullscreen'
+    return 'Ecrã completo'
   },
   formatAllRows () {
     return 'Tudo'
   },
   formatAutoRefresh () {
-    return 'Auto Refresh'
+    return 'Actualização autmática'
   },
   formatExport () {
-    return 'Export data'
+    return 'Exportar dados'
   },
   formatJumpTo () {
-    return 'GO'
+    return 'Avançar'
   },
   formatAdvancedSearch () {
-    return 'Advanced search'
+    return 'Pesquisa avançada'
   },
   formatAdvancedCloseButton () {
-    return 'Close'
+    return 'Fechar'
   },
   formatFilterControlSwitch () {
-    return 'Hide/Show controls'
+    return 'Esconder/Exibir controlos'
   },
   formatFilterControlSwitchHide () {
-    return 'Hide controls'
+    return 'Esconder controlos'
   },
   formatFilterControlSwitchShow () {
-    return 'Show controls'
+    return 'Exibir controlos'
   }
 }
 

src/themes/_theme.scss

@@ -136,11 +136,12 @@
             font-weight: bold;
             display: inline-block;
             min-width: 30%;
+            width: auto !important;
             text-align: left !important;
           }
 
           .card-view-value {
-            width: 100%;
+            width: 100% !important;
           }
         }
       }

src/themes/foundation/bootstrap-table-foundation.scss

@@ -47,6 +47,10 @@
   }
 
   .fixed-table-pagination {
+    .page-list > div {
+      display: inline;
+    }
+
     .button {
       margin-bottom: 0;
     }

src/themes/materialize/bootstrap-table-materialize.scss

@@ -49,6 +49,10 @@
       vertical-align: middle;
     }
 
+    .page-list > div {
+      display: inline;
+    }
+
     .pagination li {
       height: 36px;
     }