Global config & column classes (#101)

* Global config & column classes * Global config & per column classes * Global config & column classes * Added lodash defaultsDeep dependency * Global config & column classes * Global config & column classes * Fixed Generic Object Injection Sink * Code formatting * Object injection sink in classes.push() Co-authored-by: Arkaitz <arkaitz.felices@beautycare.es>

Author: caredev

.editorconfig

@@ -0,0 +1,31 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+# Matches multiple files with brace expansion notation
+# Set default charset
+[*.{js,py}]
+charset = utf-8
+
+# 4 space indentation
+[*.js,*.vue ]
+indent_style = space
+indent_size = 4
+
+# Tab indentation (no size specified)
+[Makefile]
+indent_style = tab
+
+# Indentation override for all JS under lib directory
+[lib/**.js]
+indent_style = space
+indent_size = 4
+
+# Matches the exact files either package.json or .travis.yml
+[{package.json,.travis.yml}]
+indent_style = space
+indent_size = 2

package.json

@@ -27,6 +27,7 @@
  "axios": "^0.18.1",
  "laravel-vue-pagination": "^2.3.0",
  "lodash.debounce": "^4.0.8",
+ "lodash.defaultsdeep": "^4.6.1",
  "vue": "^2.6.10"
  },
  "devDependencies": {
@@ -74,7 +75,8 @@
  "vuex-persistedstate": "^2.5.4"
  },
  "files": [
- "dist/*"
+ "dist/*",
+ "src/*"
  ],
  "eslintConfig": {
  "root": true,

src/components/DataTable.vue

@@ -20,11 +20,11 @@
  :columns="columns"
  :dir="tableProps.dir"
  :sortOrders="sortOrders"
- :table-classes="classes.table"
- :table-head-classes="classes['th']"
- :table-header-classes="classes['t-head']"
- :table-row-classes="classes['t-head-tr']"
- :table-container-classes="classes['table-container']">
+ :table-classes="computedClasses.table"
+ :table-head-classes="computedClasses['th']"
+ :table-header-classes="computedClasses['t-head']"
+ :table-row-classes="computedClasses['t-head-tr']"
+ :table-container-classes="computedClasses['table-container']">
  <!-- Table Header -->
  <template
  slot="header"
@@ -46,17 +46,17 @@
  <template slot="body" v-else>
  <tbody
  v-if="columns"
- :class="classes['t-body']"
+ :class="computedClasses['t-body']"
  class="laravel-vue-datatable-tbody">
  <tr
  :key="item.id"
- :class="classes['t-body-tr']"
+ :class="computedClasses['t-body-tr']"
  v-for="(item, rowIndex) in tableData.data"
  @click="$emit('row-clicked', item)"
  class="laravel-vue-datatable-tbody-tr">
  <td 
  :key="column.name"
- :class="classes.td"
+ :class="bodyCellClasses(column)"
  v-for="(column, columnIndex) in columns"
  class="laravel-vue-datatable-td">
  <laravel-vue-data-table-cell
@@ -102,6 +102,7 @@
 import axios from 'axios';
 import VueTable from './Table.vue';
 import UrlFilters from '../mixins/UrlFilters';
+import MergeClasses from "../mixins/MergeClasses";
 import DataTableCell from './DataTableCell.vue';
 import DataTableFilters from './DataTableFilters.vue';
 
@@ -113,8 +114,26 @@ export default {
  this.getData(this.url, this.getRequestPayload);
  }
 
+ const defaults = require("lodash.defaultsdeep");
+ this.computedClasses = defaults(this.classes,(window.LaravelVueDatatable || {}).classes || {},
+ {
+ "table-container": {
+ "table-responsive": true
+ },
+ table: {
+ table: true,
+ "table-striped": true,
+ border: true
+ },
+ "t-head": {},
+ "t-body": {},
+ td: {},
+ th: {}
+ }
+ );
+
  if (this.theme == "dark") {
- this.classes['table']['table-dark'] = true;
+ this.computedClasses['table']['table-dark'] = true;
  }
 
  let debounce = require('lodash.debounce');
@@ -126,7 +145,7 @@ export default {
  this.sortOrders[column.name] = -1;
  });
  },
- mixins: [UrlFilters],
+ mixins: [UrlFilters, MergeClasses],
  watch: {
  url: {
  handler: function(newUrl) {
@@ -173,6 +192,7 @@ export default {
  filters: this.filters,
  length: this.perPage[0],
  },
+ computedClasses: {},
  };
  },
  methods: {
@@ -240,6 +260,11 @@ export default {
  this.getData();
  }
  },
+ bodyCellClasses(column) {
+ return this.mergeClasses(
+ typeof column.columnClasses === "object" && column.columnClasses["!override"] ? {} : this.computedClasses.td,
+ column.columnClasses || {}, (column.columnClasses || {}).td || {});
+ }
  },
  components: {
  'laravel-vue-table': VueTable,
@@ -339,32 +364,19 @@ export default {
  },
  classes: {
  type: Object,
- default: () => ({
- "table-container": {
- "table-responsive": true,
- },
- "table": {
- "table": true,
- "table-striped": true,
- "border": true,
- },
- "t-head": {},
- "t-body": {},
- "td": {},
- "th": {},
- }),
+ default: () => ({}),
  },
  headers: {
  type: Object,
  default: () => ({})
  },
  translate: {
  type: Object,
- default: () => ({
+ default: () => Object.assign({}, {
  nextButton: 'Next',
  previousButton: 'Previous',
  placeholderSearch: 'Search Table',
- })
+ }, (window.LaravelVueDatatable || {}).translate || {})
  }
  },
 }

src/components/DataTableTh.vue

@@ -37,7 +37,10 @@
 </template>
 
 <script>
+import MergeClasses from "../mixins/MergeClasses";
+
 export default {
+ mixins: [MergeClasses],
  data() {
  return {
  currentSort: '',
@@ -59,9 +62,12 @@ export default {
  },
  methods: {
  headerClasses(column) {
- let classes = this.classes;
- classes['table-header-sorting'] = column.orderable;
- return classes;
+ return this.mergeClasses(
+ typeof column.columnClasses === "object" && column.columnClasses["!override"] ? {} : this.classes,
+ {"table-header-sorting": column.orderable},
+ column.columnClasses || {}, 
+ (column.columnClasses || {}).th || {}
+ );
  },
  sort(column) {
  this.setCurrentColumnSort(column.name);

src/components/Table.vue

@@ -27,8 +27,10 @@
 <script>
 
 import LaravelVueDataTableTh from './DataTableTh';
+import MergeClasses from "../mixins/MergeClasses";
 
 export default {
+ mixins: [MergeClasses],
  components: {
  LaravelVueDataTableTh
  },
@@ -68,9 +70,11 @@ export default {
  },
  methods: {
  headerClasses(column) {
- let classes = this.tableHeadClasses;
- classes['table-header-sorting'] = column.orderable;
- return classes;
+ return this.mergeClasses(
+ this.tableHeadClasses,
+ {"table-header-sorting": column.orderable},
+ (column.columnClasses || {}).thead || {}
+ );
  },
  sort(column) {
  this.$emit('sort', column.name, column.columnName);

src/mixins/MergeClasses.js

@@ -0,0 +1,30 @@
+export default {
+ methods: {
+ mergeClasses(...classlists) {
+ const classes = [];
+ 
+ for (let classlist in classlists) {
+ if (classlists.hasOwnProperty(classlist)) {
+ let list = classlists[`${classlist}`];
+ 
+ if (typeof list === "string") {
+ classes.push(list);
+ } else if (Array.isArray(list)) {
+ classes.push(...list);
+ } else if (typeof list === "object") {
+ for (let cls in list) {
+ if (list.hasOwnProperty(cls) &&
+ typeof list[`${cls}`] !== "object" &&
+ list[`${cls}`] &&
+ cls !== "!override") {
+ classes.push(`${cls}`);
+ }
+ }
+ }
+ }
+ }
+ 
+ return [...new Set(classes)].join(" ");
+ }
+ }
+ };