Merge pull request #17 from muhimasri/edit-row

Edit row
muhimasri · Jan 16, 2022 · ab9a72b · ab9a72b
2 parents ca2f5a8 + 532368d
commit ab9a72b
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,4 @@
+
 # BootstrapVue Editable Table
 BootstrapVue Editable Table is a Vue table component that enables cell editing and inherits/supports all other features from [BootstrapVue Table](https://bootstrap-vue.org/docs/components/table).
 
@@ -19,6 +20,7 @@ If you'd like to contribute, please read this [introductory article](https://muh
 [Custom Styling](#custom-styling)<br/>
 [Keyboard Keys](#keyboard-keys)<br/>
 [Events](#events)<br/>
+[Edit Properties](#edit-properties)<br/>
 [Custom Cell](#custom-cell)<br/>
 [Add and Remove Rows](#add-and-remove-rows)<br/>
 [Load Data via REST API](#load-data-via-rest-api)<br/>
@@ -386,6 +388,12 @@ table.editable-table td {
 |--|--|--|
 | input-change &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |`value` - Current cell value <br/> `data` - Row data (the same object returned by Bootstrap)| Emitted when any cell input changes
 
+## Edit Properties:
+|Event |Arguments | Description |
+|--|--|--|
+| editMode |`cell` - Edit one cell (default behavior) <br/> `row` - Edit all the cells of a row at once| Change edit mode
+| editTrigger|`click` - Edit on mouse click (default behavior) <br/> `dblclick` - Edit on mouse double click| Change edit trigger
+
 ## Custom Cell
 To customize a none editable cell, you can use Bootstraps' scoped slots.
 

diff --git a/dist/b-editable-table.esm.js b/dist/b-editable-table.esm.js
@@ -11929,7 +11929,15 @@ var script = Vue.extend({
   props: {
     fields: Array,
     items: Array,
-    value: Array
+    value: Array,
+    editMode: {
+      type: String,
+      default: 'cell'
+    },
+    editTrigger: {
+      type: String,
+      default: 'click'
+    }
   },
   directives: {
     focus: {
@@ -11997,7 +12005,7 @@ var script = Vue.extend({
     },
 
     handleKeydown(e, index, data) {
-      if (e.code === "Tab") {
+      if (e.code === "Tab" && this.editMode === 'cell') {
         e.preventDefault();
         let fieldIndex = this.fields.length - 1 === index ? 0 : index + 1;
         let rowIndex = this.fields.length - 1 === index ? data.index + 1 : data.index;
@@ -12249,7 +12257,7 @@ var __vue_render__ = function () {
       return {
         key: "cell(" + field.key + ")",
         fn: function (data) {
-          return [field.type === 'date' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-datepicker', _vm._b({
+          return [field.type === 'date' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-datepicker', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus",
@@ -12271,7 +12279,7 @@ var __vue_render__ = function () {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-datepicker', Object.assign({}, field), false)) : field.type === 'select' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-select', _vm._b({
+          }, 'b-form-datepicker', Object.assign({}, field), false)) : field.type === 'select' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-select', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12290,7 +12298,7 @@ var __vue_render__ = function () {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-select', Object.assign({}, field), false)) : field.type === 'checkbox' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-checkbox', _vm._b({
+          }, 'b-form-select', Object.assign({}, field), false)) : field.type === 'checkbox' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-checkbox', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus",
@@ -12311,7 +12319,7 @@ var __vue_render__ = function () {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-checkbox', Object.assign({}, field), false)) : field.type === 'rating' && field.type && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-rating', _vm._b({
+          }, 'b-form-checkbox', Object.assign({}, field), false)) : field.type === 'rating' && field.type && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-rating', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12329,7 +12337,7 @@ var __vue_render__ = function () {
                 return _vm.inputHandler(value, data, field.key);
               }
             }
-          }, 'b-form-rating', Object.assign({}, field), false)) : field.type && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-input', _vm._b({
+          }, 'b-form-rating', Object.assign({}, field), false)) : field.type && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-input', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12350,11 +12358,9 @@ var __vue_render__ = function () {
           }, 'b-form-input', Object.assign({}, field), false)) : _c('div', {
             key: index,
             staticClass: "data-cell",
-            on: {
-              "click": function ($event) {
-                return _vm.handleEditCell($event, data.index, field.key);
-              }
-            }
+            on: _vm._d({}, [_vm.editTrigger, function ($event) {
+              return _vm.handleEditCell($event, data.index, field.key);
+            }])
           }, [_vm.$scopedSlots["cell(" + field.key + ")"] ? _vm._t("cell(" + field.key + ")", null, null, data) : [_vm._v(_vm._s(_vm.getValue(data, field)))]], 2)];
         }
       };
@@ -12367,7 +12373,7 @@ var __vue_staticRenderFns__ = [];
 
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-87d2cda4_0", {
+  inject("data-v-43311d3a_0", {
     source: "table.b-table{width:unset}table.b-table td{padding:0}.data-cell{display:flex;width:100%;height:100%}",
     map: undefined,
     media: undefined

diff --git a/dist/b-editable-table.min.js b/dist/b-editable-table.min.js
diff --git a/dist/b-editable-table.ssr.js b/dist/b-editable-table.ssr.js
@@ -11821,7 +11821,15 @@ var BTable = /*#__PURE__*/Vue__default['default'].extend({
   props: {
     fields: Array,
     items: Array,
-    value: Array
+    value: Array,
+    editMode: {
+      type: String,
+      default: 'cell'
+    },
+    editTrigger: {
+      type: String,
+      default: 'click'
+    }
   },
   directives: {
     focus: {
@@ -11888,7 +11896,7 @@ var BTable = /*#__PURE__*/Vue__default['default'].extend({
       this.selectedCell = name;
     },
     handleKeydown: function handleKeydown(e, index, data) {
-      if (e.code === "Tab") {
+      if (e.code === "Tab" && this.editMode === 'cell') {
         e.preventDefault();
         var fieldIndex = this.fields.length - 1 === index ? 0 : index + 1;
         var rowIndex = this.fields.length - 1 === index ? data.index + 1 : data.index;
@@ -12126,7 +12134,7 @@ var __vue_render__ = function __vue_render__() {
       return {
         key: "cell(" + field.key + ")",
         fn: function fn(data) {
-          return [field.type === 'date' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-datepicker', _vm._b({
+          return [field.type === 'date' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-datepicker', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus",
@@ -12148,7 +12156,7 @@ var __vue_render__ = function __vue_render__() {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-datepicker', Object.assign({}, field), false)) : field.type === 'select' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-select', _vm._b({
+          }, 'b-form-datepicker', Object.assign({}, field), false)) : field.type === 'select' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-select', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12167,7 +12175,7 @@ var __vue_render__ = function __vue_render__() {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-select', Object.assign({}, field), false)) : field.type === 'checkbox' && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-checkbox', _vm._b({
+          }, 'b-form-select', Object.assign({}, field), false)) : field.type === 'checkbox' && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-checkbox', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus",
@@ -12188,7 +12196,7 @@ var __vue_render__ = function __vue_render__() {
                 return _vm.handleKeydown($event, index, data);
               }
             }
-          }, 'b-form-checkbox', Object.assign({}, field), false)) : field.type === 'rating' && field.type && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-rating', _vm._b({
+          }, 'b-form-checkbox', Object.assign({}, field), false)) : field.type === 'rating' && field.type && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-rating', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12206,7 +12214,7 @@ var __vue_render__ = function __vue_render__() {
                 return _vm.inputHandler(value, data, field.key);
               }
             }
-          }, 'b-form-rating', Object.assign({}, field), false)) : field.type && _vm.tableItems[data.index].isEdit && _vm.selectedCell === field.key && field.editable ? _c('b-form-input', _vm._b({
+          }, 'b-form-rating', Object.assign({}, field), false)) : field.type && _vm.tableItems[data.index].isEdit && (_vm.selectedCell === field.key || _vm.editMode === 'row') && field.editable ? _c('b-form-input', _vm._b({
             directives: [{
               name: "focus",
               rawName: "v-focus"
@@ -12227,11 +12235,9 @@ var __vue_render__ = function __vue_render__() {
           }, 'b-form-input', Object.assign({}, field), false)) : _c('div', {
             key: index,
             staticClass: "data-cell",
-            on: {
-              "click": function click($event) {
-                return _vm.handleEditCell($event, data.index, field.key);
-              }
-            }
+            on: _vm._d({}, [_vm.editTrigger, function ($event) {
+              return _vm.handleEditCell($event, data.index, field.key);
+            }])
           }, [_vm.$scopedSlots["cell(" + field.key + ")"] ? _vm._t("cell(" + field.key + ")", null, null, data) : [_vm._v(_vm._s(_vm.getValue(data, field)))]], 2)];
         }
       };
@@ -12244,7 +12250,7 @@ var __vue_staticRenderFns__ = [];
 
 var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
   if (!inject) return;
-  inject("data-v-87d2cda4_0", {
+  inject("data-v-43311d3a_0", {
     source: "table.b-table{width:unset}table.b-table td{padding:0}.data-cell{display:flex;width:100%;height:100%}",
     map: undefined,
     media: undefined
@@ -12256,7 +12262,7 @@ var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
 var __vue_scope_id__ = undefined;
 /* module identifier */
 
-var __vue_module_identifier__ = "data-v-87d2cda4";
+var __vue_module_identifier__ = "data-v-43311d3a";
 /* functional template */
 
 var __vue_is_functional_template__ = false;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue-editable-table",
-  "version": "0.1.2-beta.1",
+  "version": "0.1.2-beta.2",
   "description": "A Bootstrap Vue editable table for editing cells using built-in Bootstrap form elements",
   "repository": {
     "type": "git",

diff --git a/src/b-editable-table.vue b/src/b-editable-table.vue
@@ -17,7 +17,7 @@
         v-if="
           field.type === 'date' &&
           tableItems[data.index].isEdit &&
-          selectedCell === field.key &&
+          (selectedCell === field.key || editMode === 'row') &&
           field.editable
         "
         :key="index"
@@ -32,7 +32,7 @@
         v-else-if="
           field.type === 'select' &&
           tableItems[data.index].isEdit &&
-          selectedCell === field.key &&
+          (selectedCell === field.key || editMode === 'row') &&
           field.editable
         "
         :key="index"
@@ -46,7 +46,7 @@
         v-else-if="
           field.type === 'checkbox' &&
           tableItems[data.index].isEdit &&
-          selectedCell === field.key &&
+          (selectedCell === field.key || editMode === 'row') &&
           field.editable
         "
         :key="index"
@@ -61,7 +61,7 @@
           field.type === 'rating' &&
           field.type &&
           tableItems[data.index].isEdit &&
-          selectedCell === field.key &&
+          (selectedCell === field.key || editMode === 'row') &&
           field.editable
         "
         :key="index"
@@ -76,7 +76,7 @@
         v-else-if="
           field.type &&
           tableItems[data.index].isEdit &&
-          selectedCell === field.key &&
+          (selectedCell === field.key || editMode === 'row') &&
           field.editable
         "
         :key="index"
@@ -85,7 +85,7 @@
       ></b-form-input>
       <div
         class="data-cell"
-        @click="handleEditCell($event, data.index, field.key)"
+        @[editTrigger]="handleEditCell($event, data.index, field.key)"
         v-else
         :key="index"
       >
@@ -125,6 +125,14 @@ export default Vue.extend({
     fields: Array,
     items: Array,
     value: Array,
+    editMode: {
+      type: String,
+      default: 'cell'
+    },
+    editTrigger: {
+      type: String,
+      default: 'click'
+    }
   },
   directives: {
     focus: {
@@ -182,7 +190,7 @@ export default Vue.extend({
       this.selectedCell = name;
     },
     handleKeydown(e: any, index: number, data: any) {
-      if (e.code === "Tab") {
+      if (e.code === "Tab" && this.editMode === 'cell') {
         e.preventDefault();
         let fieldIndex = this.fields.length - 1 === index ? 0 : index + 1;
         let rowIndex =