Merge pull request #173 from joffreyBerrier/feature/add-checkbox

Feature/add checkbox
joffreyBerrier · Aug 6, 2019 · 053a83a · 053a83a
2 parents 7c14b3a + 7a55c06
commit 053a83a
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -110,6 +110,7 @@ Function                               | Type       | Description
 ```
   customOptions: {
     dragToFill: true,
+    tbodyCheckbox: false,
     tbodyIndex: true,
     sortHeader: true,
     trad: {
@@ -198,6 +199,34 @@ CommentBox with content:
   },
 ```
 
+
+### Checkbox :white_check_mark:
+
+If you want to use the checkbox
+
+1: Create a key ``tbodyCheckbox: true`` on ``customOptions``
+2: Create a key ``checkbox: boolean`` on each data (false by default)
+
+If you want to get the array of the checked data use ``this.$refs.vueTable.checkedRows``
+
+#### Example
+
+```
+  data: {
+    checked: boolean,
+    a: {}
+    ...
+  },
+```
+
+```
+  customOptions: {
+    ...
+    tbodyCheckbox: boolean
+    ...
+  },
+```
+
 ### Headers :tiger:
 
   Name              |  Type   | Description

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuejs-spreadsheet",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "An easier Spreadsheet in Vue",
   "main": "src/index.js",
   "author": "Joffrey Berrier <[email protected]>",

diff --git a/src/components/Tbody.vue b/src/components/Tbody.vue
@@ -1,10 +1,32 @@
 <template>
   <tbody>
     <template v-for="(row, rowIndex) in tbodyData">
-      <tr class="table_row" :key="row + '' + rowIndex">
-        <td class="index" :class="{ 'highlight_spreadsheet': tbodyHighlight.includes(rowIndex) }" v-if="tbodyIndex" :key="'td-index-' + rowIndex">
+      <tr 
+        class="table_row"
+        :key="`row${rowIndex}`"
+        :class="{ 'checked_row': 'checked' in tbodyData[rowIndex] && tbodyData[rowIndex].checked === true }">
+
+        <td
+          v-if="tbodyCheckbox && 'checked' in tbodyData[rowIndex]"
+          :class="{ 'highlight_spreadsheet': tbodyHighlight.includes(rowIndex) }"
+          :key="`checkbox-${rowIndex}`"
+          class="checkbox index">
+          <input
+            type="checkbox"
+            :id="`checkbox-${rowIndex}`"
+            @change="checkedRow(tbodyData[rowIndex])"
+            v-model="tbodyData[rowIndex].checked">
+          <label :for="`checkbox-${rowIndex}`"></label>
+        </td>
+
+        <td
+          v-if="tbodyIndex"
+          class="index"
+          :class="{ 'highlight_spreadsheet': tbodyHighlight.includes(rowIndex) }"
+          :key="`td-index-${rowIndex}`">
           {{rowIndex + 1}}
         </td>
+
         <template v-for="(header, colIndex) in headerKeys">
           <td
             v-if="row[header]"
@@ -21,13 +43,13 @@
             @dblclick="handleDoubleClickTd($event, header, row[header], rowIndex, colIndex, row[header].type)"
             @mousemove="handleMoveDragToFill($event, header, row[header], rowIndex, colIndex)"
             @mouseup="handleUpDragToFill($event, header, row[header], rowIndex, colIndex, row[header].type)"
-            v-bind:class="{
+            :class="{
               'active_td': row[header].active,
               'show': row[header].show,
               'selected': row[header].selected,
               'copy': row[header].stateCopy,
               'disabled': row[header].disabled || disableCells.find(x => x === header),
-              'rectangleSelection': row[header].rectangleSelection,
+              'rectangleSelection': row[header].rectangleSelection
             }"
             :ref="`td-${colIndex}-${rowIndex}`"
             :key="header"
@@ -190,6 +212,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    tbodyCheckbox: {
+      type: Boolean,
+      required: false,
+    },
     submenuStatusTbody: {
       type: Boolean,
       required: false,
@@ -218,6 +244,9 @@ export default {
     },
   },
   methods: {
+    checkedRow(row) {
+      this.$emit('tbody-checked-row', row);
+    },
     handleHoverTriangleComment(header, rowIndex) {
       if (!this.vueTableComment[rowIndex]) {
         this.$set(this.vueTableComment, rowIndex, header);
@@ -324,6 +353,30 @@ $rectangleBg: #a0c3ff99;
 $dragToFillSize: 9px;
 $dragToFillColor:#3183fc;
 
+$chedkedColor: #b2d1ff;
+
+.table_row {
+  transition: background ease .3s;
+  &.checked_row {
+    background: $chedkedColor;
+    td {
+      background: $chedkedColor;
+    }
+  }
+  .checkbox {
+    position: relative;
+    label {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
 .td {
   height: 40px;
   line-height: 40px;

diff --git a/src/components/Thead.vue b/src/components/Thead.vue
@@ -2,6 +2,14 @@
   <thead class="thead"
     @mouseup="handleUpDragToFill($event)">
     <tr>
+      <th class="index">
+        <input
+          type="checkbox"
+          id="checkbox-all"
+          v-model="checkedAll"
+          @change="checkedAllRow">
+        <label for="checkbox-all"></label>
+      </th>
       <th v-if="tbodyIndex" class="index" key="th-index"></th>
       <template v-for="(header, colIndex) in headers">
         <th
@@ -101,7 +109,7 @@ export default {
   props: {
     theadHighlight: {
       type: Array,
-      required: true
+      required: true,
     },
     headerTop: {
       type: Number,
@@ -127,13 +135,18 @@ export default {
       type: Boolean,
       required: false,
     },
+    tbodyCheckbox: {
+      type: Boolean,
+      required: false,
+    },
     submenuStatusThead: {
       type: Boolean,
       required: false,
     },
   },
   data() {
     return {
+      checkedAll: false,
       beforeChangeSize: {},
       eventDrag: false,
       newSize: '',
@@ -145,6 +158,9 @@ export default {
     window.addEventListener('mousemove', this.handleMoveChangeSize);
   },
   methods: {
+    checkedAllRow() {
+      this.$emit('thead-checked-all-callback', this.checkedAll);
+    },
     removeClass(params, colIndex) {
       this.headers.forEach((header, index) => {
         if (index !== colIndex) {

diff --git a/src/components/VueTable.vue b/src/components/VueTable.vue
@@ -17,10 +17,12 @@
         :submenu-status-thead="submenuStatusThead"
         :submenu-thead="submenuThead"
         :tbody-index="customOptions.tbodyIndex"
+        :tbody-checkbox="customOptions.tbodyCheckbox"
         :thead-highlight="highlight.thead"
         @handle-up-drag-size-header="handleUpDragSizeHeader"
         @handle-up-drag-to-fill="handleUpDragToFill"
         @submenu-enable="enableSubmenu"
+        @thead-checked-all-callback="callbackCheckedAll"
         @thead-submenu-click-callback="callbackSubmenuThead"
         @thead-td-context-menu="handleTheadContextMenu"
         @thead-td-sort="callbackSort">
@@ -33,13 +35,15 @@
         ref="vueTbody"
         :tbody-data="tbodyData"
         :headers="headers"
+        :tbody-checkbox="customOptions.tbodyCheckbox"
         :tbody-index="customOptions.tbodyIndex"
         :trad="customOptions.trad"
         :disable-cells="disableCells"
         :submenu-tbody="submenuTbody"
         :filtered-list="filteredList"
         :submenu-status-tbody="submenuStatusTbody"
         :tbody-highlight="highlight.tbody"
+        @tbody-checked-row="checkedRow"
         @handle-to-calculate-position="calculPosition"
         @handle-to-open-select="enableSelect"
         @submenu-enable="enableSubmenu"
@@ -182,6 +186,9 @@ export default {
     },
   },
   computed: {
+    checkedRows() {
+      return this.tbodyData.filter(x => x.checked)
+    },
     colHeaderWidths() {
       return this.headers.map(x => parseInt(x.style.width, 10));
     },
@@ -202,6 +209,9 @@ export default {
     },
   },
   methods: {
+    checkedRow(row) {
+      this.$refs.vueThead.checkedAll = false
+    },
     highlightTdAndThead(rowIndex, colIndex) {
       this.highlight.tbody = [];
       this.highlight.thead = [];
@@ -996,6 +1006,11 @@ export default {
       this.changeData(rowIndex, header);
     },
     // callback
+    callbackCheckedAll(isChecked) {
+      if (this.customOptions.tbodyCheckbox) {
+        this.tbodyData.forEach(x => x.checked = isChecked)
+      }
+    },
     callbackSort(event, header, colIndex) {
       this.$emit('thead-td-sort', event, header, colIndex);
     },

diff --git a/src/data.js b/src/data.js
@@ -1,6 +1,7 @@
 export default {
   customOptions: {
     tbodyIndex: true,
+    tbodyCheckbox: true,
     sortHeader: true,
     trad: {
       lang: 'fr',
@@ -126,6 +127,7 @@ export default {
   ],
   products: [
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -234,6 +236,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -342,6 +345,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -458,6 +462,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -574,6 +579,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -690,6 +696,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -806,6 +813,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -911,6 +919,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -1016,6 +1025,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -1121,6 +1131,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',
@@ -1226,6 +1237,7 @@ export default {
       },
     },
     {
+      checked: false,
       a: {
         type: 'img',
         value: 'https://via.placeholder.com/350x150',