Skip to content

Commit cb191b3

Browse files
author
Rubanraj Ravichandran
committed
Merge branch 'develop'
2 parents 3dc77bd + ae9f621 commit cb191b3

File tree

7 files changed

+394
-40
lines changed

7 files changed

+394
-40
lines changed

‎build/rollup.config.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import resolve from 'rollup-plugin-node-resolve';
44
import commonjs from 'rollup-plugin-commonjs';
55

66
import {
7-
uglify
8-
} from "rollup-plugin-uglify";
7+
terser
8+
} from "rollup-plugin-terser";
9+
910

1011
export default {
1112
input: 'src/wrapper.js', // Path relative to package.json
@@ -15,7 +16,6 @@ export default {
1516
},
1617
external: ['vue'],
1718
plugins: [
18-
// uglify(),
1919
vue({
2020
css: true, // Dynamically inject css as a <style> tag
2121
compileTemplate: true, // Explicitly convert template to render function
@@ -27,6 +27,7 @@ export default {
2727
}),
2828
commonjs({
2929
include: 'node_modules/**'
30-
})
30+
}),
31+
terser()
3132
],
3233
};

‎package-lock.json‎

Lines changed: 35 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@
7070
"rollup-plugin-buble": "^0.19.6",
7171
"rollup-plugin-commonjs": "^9.2.0",
7272
"rollup-plugin-node-resolve": "^4.0.0",
73+
"rollup-plugin-terser": "^3.0.0",
7374
"rollup-plugin-uglify": "^6.0.0",
7475
"rollup-plugin-vue": "^4.3.2",
7576
"sass-loader": "^7.1.0",

‎src/App.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@
2525
sort: true,
2626
uniqueId: true
2727
},
28+
{
29+
label: "id",
30+
name: "id",
31+
filter: {
32+
type: "simple",
33+
placeholder: "id"
34+
},
35+
sort: true,
36+
uniqueId: true,
37+
slot_name:"my_duplicate_id_column"
38+
},
2839
{
2940
label: "title",
3041
name: "title",

‎src/components/CheckBox.vue‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<template>
2+
<td v-show="checkboxRows" class="text-center" v-on="!rowsSelectable ? { click: () => selectCheckbox() } : {}">
3+
<div class="custom-control custom-checkbox">
4+
<input type="checkbox" class="custom-control-input vbt-checkbox" v-model="row_selected" v-on="!rowsSelectable ? { change: ($event) => handleChange($event) } : {}"/>
5+
<label class="custom-control-label"></label>
6+
</div>
7+
</td>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: 'CheckBox',
13+
props: {
14+
checkboxRows: {
15+
type: Boolean,
16+
default: false
17+
},
18+
rowsSelectable: {
19+
type: Boolean,
20+
default: false
21+
},
22+
row: {
23+
type: Object,
24+
default: function() {
25+
return {
26+
27+
};
28+
}
29+
},
30+
selectedItems: {
31+
type: Array,
32+
default: function() {
33+
return [];
34+
}
35+
},
36+
},
37+
data: function() {
38+
return {
39+
row_selected:false
40+
}
41+
},
42+
mounted() {
43+
this.checkInSelecteditems();
44+
},
45+
methods: {
46+
handleChange(event) {
47+
if (event.target.checked) {
48+
this.$emit('add-selected-item', this.row);
49+
} else {
50+
this.$emit('remove-selected-item', this.row);
51+
}
52+
},
53+
selectCheckbox() {
54+
if (this.row_selected) {
55+
this.$emit('remove-selected-item', this.row);
56+
} else {
57+
this.$emit('add-selected-item', this.row);
58+
}
59+
this.row_selected = !this.row_selected;
60+
},
61+
checkInSelecteditems() {
62+
let difference = _.differenceWith(this.selectedItems, [this.row], _.isEqual);
63+
if (difference.length != this.selectedItems.length) {
64+
this.row_selected = true;
65+
} else {
66+
this.row_selected = false;
67+
}
68+
},
69+
},
70+
watch: {
71+
row: {
72+
handler: function(newVal, oldVal) {
73+
let difference = _.differenceWith(this.selectedItems, [newVal], _.isEqual);
74+
if (difference.length != this.selectedItems.length) {
75+
this.row_selected = true;
76+
} else {
77+
this.row_selected = false;
78+
}
79+
},
80+
deep: true
81+
},
82+
selectedItems: {
83+
handler: function(newVal, oldVal) {
84+
let difference = _.differenceWith(newVal, [this.row], _.isEqual);
85+
if (difference.length != this.selectedItems.length) {
86+
this.row_selected = true;
87+
} else {
88+
this.row_selected = false;
89+
}
90+
},
91+
deep: true
92+
}
93+
}
94+
}
95+
</script>
96+
97+
<style scoped>
98+
.custom-control-label {
99+
vertical-align: top;
100+
}
101+
102+
</style>

‎src/components/Header.vue‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,43 @@
88
</th>
99

1010
<slot name="columns" :columns="columns">
11-
<Column v-for="(column, key, index) in columns" :key="index" :column="column" :query="query" @update-sort="(payload) => $emit('update-sort',payload)"></Column>
11+
<th v-for="(column, key, index) in columns" :key="index" v-on="isSortableColumn(column) ? { click: () => $emit('update-sort',column) } : {}" class="text-center" v-bind:class="{'vbt-sort-cursor':isSortableColumn(column)}">
12+
<slot name="column" :column="column">{{column.label}}</slot>
13+
14+
<template v-if='isSortableColumn(column)'>
15+
<template v-if="!isSort(column)">
16+
<div class="float-right">
17+
<slot name="no-sort-icon">
18+
&#x1F825;&#x1F827;
19+
</slot>
20+
</div>
21+
</template>
22+
23+
<template v-else>
24+
<template v-if="query.sort.order==='asc'">
25+
<div class="float-right">
26+
<slot name="sort-asc-icon">
27+
&#x1F825;
28+
</slot>
29+
</div>
30+
</template>
31+
32+
<template v-else-if="query.sort.order==='desc'">
33+
<slot name="sort-desc-icon">
34+
<div class="float-right">&#x1F827;</div>
35+
</slot>
36+
</template>
37+
38+
<template v-else>
39+
<div class="float-right">
40+
<slot name="no-sort-icon">
41+
&#x1F825;&#x1F827;
42+
</slot>
43+
</div>
44+
</template>
45+
</template>
46+
</template>
47+
</th>
1248
</slot>
1349
</tr>
1450
</thead>
@@ -70,6 +106,22 @@
70106
}
71107
this.select_all_rows = !this.select_all_rows;
72108
},
109+
isSort(column) {
110+
if (this.query.sort.name == null) {
111+
return false;
112+
}
113+
114+
return this.query.sort.name === column.name;
115+
},
116+
117+
isSortableColumn(column) {
118+
if (!_.has(column,'sort')) {
119+
return false;
120+
} else {
121+
return column.sort;
122+
}
123+
}
124+
73125
},
74126
components: {
75127
Column
@@ -84,4 +136,7 @@
84136
.vbt-select-all-checkbox {
85137
margin-bottom: 20px;
86138
}
139+
.vbt-sort-cursor {
140+
cursor: pointer;
141+
}
87142
</style>

0 commit comments

Comments
 (0)