update to webpack 5, fix upstream role='role' tag removal

example/mix-manifest.json

@@ -1,4 +1,3 @@
 {
-    "/index.js": "/index.js",
-    "/index.js.map": "/index.js.map"
+    "/index.js": "/index.js"
 }

lib/mix-manifest.json

@@ -1,4 +1,3 @@
 {
-    "/index.js": "/index.js?id=c3150f74252920b08c5b",
-    "/index.js.map": "/index.js.map?id=e18a32d01cac4489a1f2"
+    "/index.js": "/index.js?id=c2bfed2c49b23d12ebcc"
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/index.js",
@@ -13,13 +13,11 @@
     "url": "https://github.com/niiknow/vue-datatables-net.git"
   },
   "scripts": {
-    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "watch-poll": "npm run watch -- --watch-poll",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
     "watch-late-schema": "cross-env EXAMPLE=late-schema npm run watch",
     "build": "npm run production",
-    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-    "test": "cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/setup.js tests/**/*.spec.js",
-    "watch-test": "cross-env NODE_ENV=test mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --watch --require tests/setup.js tests/**/*.spec.js",
+    "production": "mix --production",
     "lint": "eslint --ext .js,.vue src/ example/app.*",
     "lint-fix": "eslint --fix --ext .js,.vue src/ example/app.*",
     "check-outdated": "npm outdated"
@@ -34,30 +32,30 @@
     "vue": ">=2.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
     "babel-eslint": "^10.1.0",
-    "bootstrap": "^4.5.0",
-    "browser-sync": "^2.26.7",
-    "browser-sync-webpack-plugin": "^2.0.1",
-    "cross-env": "^5.2.1",
-    "css-loader": "^2.1.0",
-    "datatables.net-bs4": "^1.10.21",
-    "datatables.net-buttons-bs4": "^1.6.2",
-    "datatables.net-responsive": "^2.2.5",
-    "datatables.net-responsive-bs4": "^2.2.5",
+    "babel-loader": "^8.2.2",
+    "bootstrap": "^4.5.3",
+    "browser-sync": "^2.26.13",
+    "browser-sync-webpack-plugin": "^2.3.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.0.1",
+    "datatables.net-bs4": "^1.10.23",
+    "datatables.net-buttons-bs4": "^1.6.5",
+    "datatables.net-responsive": "^2.2.7",
+    "datatables.net-responsive-bs4": "^2.2.7",
     "datatables.net-select-bs4": "^1.3.1",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^4.3.0",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-friendly-formatter": "^4.0.1",
-    "eslint-loader": "^2.2.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-vue": "^5.2.3",
-    "file-loader": "^3.0.1",
-    "jquery": "^3.5.1",
-    "laravel-mix": "^5.0.9",
-    "vue": "^2.6.11",
-    "vue-loader": "^15.9.3",
-    "vue-template-compiler": "^2.6.11"
+    "eslint-plugin-vue": "^7.4.1",
+    "eslint-webpack-plugin": "^2.4.1",
+    "file-loader": "^6.2.0",
+    "laravel-mix": "^6.0.6",
+    "vue": "^2.6.12",
+    "vue-loader": "^15.9.6",
+    "vue-template-compiler": "^2.6.12",
+    "webpack": "^5.12.0"
   }
 }

src/VdtnetTable.vue

@@ -497,27 +497,28 @@ export default {
     $el.on('click', '[data-action]', (e) => {
       e.preventDefault()
       e.stopPropagation()
+
       let target = jq(e.target)
-      let action  = target.attr('data-action')
-      while(!action) {
-        // don't let it propagate outside of container
-        if (target.hasClass('vdtnet-container') ||
-          target.prop('tagName') === 'table') {
-          // no action, simply exit
-          return
+      let action = target.attr('data-action')
+
+      // no action, simply exit
+      if (!action) {
+        return
+      } else {
+        let tr = target
+
+        // detect if action is inside a row
+        // get data from parent row/tr
+        if (target.prop('tagName') !== 'TR') {
+          tr = target.closest('tr')
         }
-        target = target.parent()
-        action = target.attr('data-action')
-      }
 
-      // only emit if there is action
-      if (action) {
-        // detect if row action
-        let tr = target.closest('tr')
         if (tr) {
-          if (tr.attr('role') !== 'row') {
+          // if child row, get previous/parent row
+          if (tr.hasClass('master-details')) {
             tr = tr.prev()
           }
+
           const row  = that.dataTable.row(tr)
           const data = row.data()
           that.$emit(action, data, row, tr, target)
@@ -550,20 +551,22 @@ export default {
         e.stopPropagation()
         const target = jq(e.target)
         let tr       = target.closest('tr')
-        if (tr.attr('role') !== 'row') {
+
+        if (tr.hasClass('master-details')) {
           tr = tr.prev()
         }
+
         const row = that.dataTable.row( tr )
+
         if ( row.child.isShown() ) {
           // This row is already open - close it
           row.child.hide()
           tr.removeClass('master')
-        }
-        else {
+        } else {
           // Open this row
           const data = row.data()
           row.child( renderFunc(data, 'child', row, tr) ).show()
-          tr.addClass('master')
+          tr.addClass('master').next().addClass('master-details')
         }
       })
     }

webpack.mix.js

@@ -1,6 +1,8 @@
-const path   = require('path');
-const mix    = require('laravel-mix');
-const public = mix.inProduction() ? 'lib' : 'example';
+const webpack      = require('webpack');
+const path         = require('path');
+const mix          = require('laravel-mix');
+const public       = mix.inProduction() ? 'lib' : 'example';
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 mix.setPublicPath(path.normalize(public));
 
@@ -10,19 +12,7 @@ const config = {
     'vue': 'Vue'
   },
   module: {
-    rules: [
-      {
-        enforce: 'pre',
-        test: /\.(vue|js)$/,
-        exclude: /(node_modules|bower_components)/,
-        loader: 'eslint-loader',
-        options: {
-          fix: false,
-          cache: false,
-          formatter: require('eslint-friendly-formatter')
-        }
-      }
-    ]
+    rules: []
   },
   output: {
     path: path.resolve(public),
@@ -36,19 +26,25 @@ const config = {
     inline: true,
     quiet: false
   },
-  devtool: 'cheap-source-map'
+  devtool: 'cheap-source-map',
+  plugins: [
+    new webpack.ProvidePlugin({
+      Promise: 'es6-promise'
+    }),
+    new ESLintPlugin()
+  ]
 };
 
 mix.webpackConfig(config).sourceMaps();
 
 if (mix.inProduction()) {
-  mix.js(`src/index.js`, `${ public }`);
+  mix.js(`src/index.js`, `${ public }`).vue();
   mix.version();
   mix.disableNotifications();
 } else {
   const exampleName = process.env.EXAMPLE || 'app'
 
-  mix.js(`example/${exampleName}.js`, `${ public }`);
+  mix.js(`example/${exampleName}.js`, `${ public }`).vue();
   mix.browserSync({
     proxy: false,
     port: 3000,