Merge pull request #7378 from wenzhixin/feature/vue3

Add support for vue3 instead of vue2

.github/dependabot.yml

@@ -6,10 +6,3 @@ updates:
     interval: daily
     time: "21:00"
   open-pull-requests-limit: 10
-  ignore:
-  - dependency-name: rollup-plugin-vue
-    versions:
-    - ">= 6.a, < 7"
-  - dependency-name: clean-css-cli
-    versions:
-    - 5.0.0

.ncurc.json

@@ -1,3 +1,3 @@
 {
-  "reject": "rollup-plugin-vue"
+  "reject": "eslint"
 }

package.json

@@ -10,36 +10,34 @@
     "doc": "site"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
+    "@babel/core": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-multi-entry": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@vue/compiler-sfc": "^3.4.27",
+    "@vitejs/plugin-vue": "^5.0.5",
     "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.3",
-    "core-js": "^3.37.1",
     "cross-env": "^7.0.3",
-    "cspell": "^8.8.1",
-    "cypress": "^13.9.0",
-    "editorconfig-checker": "^5.1.5",
+    "cspell": "^8.9.1",
+    "cypress": "^13.12.0",
+    "editorconfig-checker": "^5.1.8",
     "eslint": "^8.57.0",
-    "esm": "^3.2.25",
     "foreach-cli": "^1.8.1",
-    "glob": "^10.3.15",
+    "glob": "^10.4.2",
     "headr": "^0.0.4",
-    "node-sass": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.7",
-    "rollup": "^4.17.2",
+    "rollup": "^4.18.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "5.1.9",
-    "stylelint": "^16.5.0",
+    "sass": "^1.77.6",
+    "stylelint": "^16.6.1",
     "stylelint-config-standard-scss": "^13.1.0",
-    "vue-template-compiler": "^2.7.16"
+    "vite": "^5.3.2",
+    "vue": "^3.4.31"
   },
   "scripts": {
     "lint:js": "eslint src",
@@ -56,9 +54,10 @@
     "js:build:base": "rollup -c",
     "js:build:min": "cross-env NODE_ENV=production rollup -c",
     "js:build:banner": "foreach -g \"dist/**/*.min.js\" -x \"headr #{path} -o #{path} --version --homepage --author --license\"",
+    "js:build:vue": "vite build && mv dist/bootstrap-table-vue.umd.cjs dist/bootstrap-table-vue.umd.js",
     "js:build": "run-s js:build:*",
-    "css:build:src": "node-sass --output-style expanded src -o src",
-    "css:build:base": "node-sass --output-style expanded src -o dist",
+    "css:build:src": "sass --no-source-map -I node_modules src:src",
+    "css:build:base": "sass --no-source-map -I node_modules -s compressed src:dist",
     "css:build:min": "foreach -g \"dist/**/*.css\" -x \"cleancss #{path} -o #{dir}/#{name}.min.css\"",
     "css:build:banner": "foreach -g \"dist/**/*.min.css\" -x \"headr #{path} -o #{path} --version --homepage --author --license\"",
     "css:build": "run-s css:build:*",

rollup.config.js

@@ -6,7 +6,6 @@ import { terser } from 'rollup-plugin-terser'
 import inject from '@rollup/plugin-inject'
 import copy from 'rollup-plugin-copy'
 import multiEntry from '@rollup/plugin-multi-entry'
-import vue from 'rollup-plugin-vue'
 
 const files = globSync('src/**/*.js', {
   ignore: [
@@ -89,38 +88,4 @@ config.push({
   ]
 })
 
-out = 'dist/bootstrap-table-vue.js'
-if (process.env.NODE_ENV === 'production') {
-  out = out.replace(/.js$/, '.min.js')
-}
-config.push({
-  input: 'src/vue/index.js',
-  output: {
-    name: 'BootstrapTable',
-    file: out,
-    format: 'umd'
-  },
-  plugins: [
-    vue(),
-    ...plugins
-  ]
-})
-
-out = 'dist/bootstrap-table-vue.esm.js'
-if (process.env.NODE_ENV === 'production') {
-  out = out.replace(/.js$/, '.min.js')
-}
-config.push({
-  input: 'src/vue/BootstrapTable.vue',
-  output: {
-    name: 'BootstrapTable',
-    file: out,
-    format: 'esm'
-  },
-  plugins: [
-    vue(),
-    ...plugins
-  ]
-})
-
 export default config

site/docs/vuejs/browser.md

@@ -1,34 +1,35 @@
 ---
 layout: docs
 title: Browser
-description: Learn how to use Bootstrap Table Vue Component in your project using browser.
+description: Learn how to use Bootstrap Table Vue Component in your project using the browser.
 group: vuejs
 toc: true
 ---
 
 ## VueJS JavaScript
 
-In addition to the files that [Quick start](/docs/getting-started/introduction/#quick-start) mentions, you also need to include our vue component file.
+In addition to the files that [Quick Start](/docs/getting-started/introduction/#quick-start) mentions, you also need to include our vue component file.
 
 {% highlight html %}
-<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.umd.js"></script>
 {% endhighlight %}
 
 ## Usage
 
 {% highlight html %}
-<div id="table">
+<div id="app">
   <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
 </div>
 
 <script>
-  new Vue({
-    el: '#table',
-    components: {
-      'BootstrapTable': BootstrapTable
-    },
-    data: {
-      columns: [
+  const { createApp, ref } = Vue
+  const app = createApp({
+    setup () {
+      const columns = ref([
+        {
+          field: 'state',
+          checkbox: true
+        },
         {
           title: 'Item ID',
           field: 'id'
@@ -36,24 +37,72 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
         {
           field: 'name',
           title: 'Item Name'
-        }, {
+        },
+        {
           field: 'price',
           title: 'Item Price'
+        },
+        {
+          field: 'action',
+          title: 'Actions',
+          align: 'center',
+          formatter () {
+            return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
+          },
+          events: {
+            'click .like' (e, value, row) {
+              alert(JSON.stringify(row))
+            }
+          }
         }
-      ],
-      data: [
+      ])
+      const data = ref([
+        {
+          id: 0,
+          name: 'Item 0',
+          price: '$0'
+        },
         {
           id: 1,
           name: 'Item 1',
           price: '$1'
+        },
+        {
+          id: 2,
+          name: 'Item 2',
+          price: '$2'
+        },
+        {
+          id: 3,
+          name: 'Item 3',
+          price: '$3'
+        },
+        {
+          id: 4,
+          name: 'Item 4',
+          price: '$4'
+        },
+        {
+          id: 5,
+          name: 'Item 5',
+          price: '$5'
         }
-      ],
-      options: {
+      ])
+      const options = ref({
         search: true,
         showColumns: true
+      })
+
+      return {
+        columns,
+        data,
+        options
       }
     }
   })
+
+  app.component('BootstrapTable', BootstrapTable)
+  app.mount('#app')
 </script>
 {% endhighlight %}
 
@@ -73,7 +122,7 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
   </head>
   <body>
-    <div id="table">
+    <div id="app">
       <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
     </div>
 
@@ -81,15 +130,16 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table-vue.umd.js"></script>
     <script>
-      new Vue({
-        el: '#table',
-        components: {
-          'BootstrapTable': BootstrapTable
-        },
-        data: {
-          columns: [
+      const { createApp, ref } = Vue
+      const app = createApp({
+        setup () {
+          const columns = ref([
+            {
+              field: 'state',
+              checkbox: true
+            },
             {
               title: 'Item ID',
               field: 'id'
@@ -97,12 +147,31 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
             {
               field: 'name',
               title: 'Item Name'
-            }, {
+            },
+            {
               field: 'price',
               title: 'Item Price'
+            },
+            {
+              field: 'action',
+              title: 'Actions',
+              align: 'center',
+              formatter () {
+                return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
+              },
+              events: {
+                'click .like' (e, value, row) {
+                  alert(JSON.stringify(row))
+                }
+              }
             }
-          ],
-          data: [
+          ])
+          const data = ref([
+            {
+              id: 0,
+              name: 'Item 0',
+              price: '$0'
+            },
             {
               id: 1,
               name: 'Item 1',
@@ -128,13 +197,22 @@ In addition to the files that [Quick start](/docs/getting-started/introduction/#
               name: 'Item 5',
               price: '$5'
             }
-          ],
-          options: {
+          ])
+          const options = ref({
             search: true,
             showColumns: true
+          })
+
+          return {
+            columns,
+            data,
+            options
           }
         }
       })
+
+      app.component('BootstrapTable', BootstrapTable)
+      app.mount('#app')
     </script>
   </body>
 </html>

site/docs/vuejs/introduction.md

@@ -8,13 +8,13 @@ redirect_from:
 toc: true
 ---
 
-We have a Bootstrap Table Component for [Vue.js 2.0+](https://vuejs.org), and it should be able to work with the full [API](/docs/api/), the full [extensions](/extensions/) and the full [CSS frameworks](/themes/).
+We have a Bootstrap Table Component for [Vue.js 3.0+](https://vuejs.org), and it should be able to work with the full [API](/docs/api/), the full [extensions](/extensions/) and the full [CSS frameworks](/themes/).
 
 ## Installation
 
 ### Dependencies
 
-* [Vue.js](https://vuejs.org) (2.0+)
+* [Vue.js](https://vuejs.org) (3.0+)
 * [jQuery](http://jquery.com)
 
 ### NPM
@@ -41,10 +41,8 @@ https://cdn.jsdelivr.net/npm/bootstrap-table@{{ site.current_version }}
 bootstrap-table/
 └── dist/
     ├── bootstrap-table-vue.js
-    ├── bootstrap-table-vue.min.js
-    ├── bootstrap-table-vue.esm.js
-    └── bootstrap-table-vue.esm.min.js
+    └── bootstrap-table-vue.umd.js
 {% endhighlight %}
 
-* **bootstrap-table-vue.js:** UMD builds can be used directly in the browser via a `<script>` tag.
-* **bootstrap-table-vue.esm.js** ES module builds are intended for use with modern bundlers like [webpack 2](https://webpack.js.org/) or [rollup](http://rollupjs.org/).
+* **bootstrap-table-vue.js:** ES module builds are intended for use with modern bundlers like [webpack](https://webpack.js.org/) or [vitejs](http://vitejs.dev/).
+* **bootstrap-table-vue.umd.js** UMD builds can be used directly in the browser via a `<script>` tag.

site/docs/vuejs/webpack.md

@@ -11,21 +11,21 @@ toc: true
 Import Bootstrap Table’s JavaScript by adding this line to your app’s entry point (usually `index.js` or `app.js`):
 
 {% highlight js %}
-import 'bootstrap-table/dist/bootstrap-table.js'
+import 'bootstrap-table'
 {% endhighlight %}
 
 Of course, you can also import themes, locales or extensions you need:
 
 {% highlight js %}
 // import theme
-import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.js'
+import 'bootstrap-table/dist/themes/materialize/bootstrap-table-materialize.min.js'
 
 // import locale
-import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.js'
+import 'bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js'
 
 // import extension and dependencies
 import 'tableexport.jquery.plugin'
-import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.js'
+import 'bootstrap-table/dist/extensions/export/bootstrap-table-export.min.js'
 {% endhighlight %}
 
 By default, Bootstrap Table is dependent on [jQuery](https://jquery.com/), [Bootstrap](https://getbootstrap.com) and [Popper](https://popper.js.org/), these are defined as peerDependencies, this means that you will have to make sure to add both of them to your `package.json` using `npm install --save jquery bootstrap popper.js`.
@@ -60,7 +60,7 @@ import 'bootstrap-table/dist/extensions/fixed-columns/bootstrap-table-fixed-colu
 </template>
 
 <script>
-import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.esm.js'
+import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.js'
 
 export default {
   components: {

vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  define: {
+    'process.env': {}
+  },
+  build: {
+    lib: {
+      entry: 'src/vue/index.js',
+      name: 'BootstrapTable',
+      fileName: 'bootstrap-table-vue',
+      formats: ['es', 'umd']
+    },
+    rollupOptions: {
+      output: {
+        globals: {
+          vue: 'Vue'
+        }
+      }
+    },
+    emptyOutDir: false
+  },
+  plugins: [vue()]
+})