implement hide-duplicate

Author: Kenneth Cheng

README.md

@@ -761,7 +761,7 @@ methods: {
 }
 ```
 
-All links will be set as readonly
+All links will be set as readonly by default.
 
 ### Text/Value conversion
 
@@ -800,7 +800,7 @@ methods: {
 }
 ```
 
-All badge will be set as readonly
+All badge will be set as readonly by default.
 
 ### Action
 
@@ -821,7 +821,8 @@ methods: {
 }
 ```
 
-All action will be set as non-readonly
+All action will be set as non-readonly to make it selectable. The component will assign a to-text function to return empty string.
+If you want to show a static text in cell, you could use placeholder prop.
 
 ### Password
 
@@ -831,6 +832,25 @@ For password editing:
 <vue-excel-column type="password" field="pwd" label="Password" width="90px" />
 ```
 
+### Hide Duplication
+
+If a column set to hide-duplicaiton, the component will compare the cell content with the above content and hide it by setting
+to transparent color and remove the border-top. It also affects the next column which also set to hide-duplication. Here is an example:
+
+```html
+  <vue-excel-editor v-model="jsondata" filter-row>
+    <vue-excel-column type="map"      field="gender" width="80px"  label="Gender" :options="{M: 'Male', F: 'Female'}" hide-duplicate />
+    <vue-excel-column type="number"   field="age"    width="60px"  label="Age" summary="avg" hide-duplicate />
+    <vue-excel-column type="badge"    field="user"   width="75px"  label="User" :bgcolor="badgeColor" />
+    <vue-excel-column type="string"   field="name"   width="150px" label="Name" :link="linkClick" :is-link="isLink" />
+    <vue-excel-column type="string"   field="phone"  width="160px" label="Contact" />
+    <vue-excel-column type="password" field="pwd"    width="90px"  label="Password" />
+    <vue-excel-column type="date"     field="birth"  width="115px" label="Date Of Birth" />
+    <vue-excel-column type="action"   field="action" width="75px"  label="#" :options="['Edit', 'Remove']" :change="doAction" placeholder="Action" />
+  </vue-excel-editor>
+```
+
+![Hide Duplication](https://i.imgur.com/HCFyEEp.png "Hide Duplication")
 
 ### Localization
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "vue3-excel-editor",
   "email": "apple.6502@gmail.com",
   "description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "main": "src/main.js",
   "dependencies": {
     "@vuepic/vue-datepicker": "^3.3.0",

package.json

@@ -25,6 +25,7 @@ export default {
     format: {type: String, default: 'text'},
     cellClick: {type: Function, default: null},
     autoFillWidth: {type: Boolean, default: false},
+    hideDuplicate: {type: Boolean, default: false},
 
     allowKeys: {type: [Array, Function], default () {return null}},
     mandatory: {type: String, default: ''},
@@ -292,7 +293,8 @@ export default {
         cellClick: this.cellClick,
         listByClick: this.listByClick || this._listByClick,
         color: this.color || this._color,
-        bgcolor: this.bgcolor || this._bgcolor
+        bgcolor: this.bgcolor || this._bgcolor,
+        hideDuplicate: this.hideDuplicate
       })
     }
   }

src/VueExcelColumn.vue

@@ -118,7 +118,8 @@
                     link: item.link && item.isLink && item.isLink(record),
                     select: item.options,
                     datepick: item.type == 'date',
-                    stickyColumn: item.sticky
+                    stickyColumn: item.sticky,
+                    hideDuplicate: item.hideDuplicate && rowPos > 0 && isSameSinceLeft(p, record, pagingTable[rowPos-1])
                   }"
                   :key="p"
                   :style="Object.assign(cellStyle(record, item), renderColumnCellStyle(item, record))"
@@ -630,6 +631,15 @@ export default defineComponent({
     }
   },
   methods: {
+    isSameSinceLeft(p, rec1, rec2) {
+      for(let i=0; i<=p; i++) {
+        if (!this.fields[i].invisible && this.fields[i].hideDuplicate) {
+          const name = this.fields[i].name
+          if (rec1[name] !== rec2[name]) return false
+        }
+      }
+      return true
+    },
     componentTabInto (e) {
       if (e.keyCode === 9) {
         if (!this.moveInputSquare(this.currentRowPos, this.currentColPos))
@@ -2387,6 +2397,7 @@ export default defineComponent({
       this.labelTr.children[this.currentColPos + 1].classList.remove('focus')
       if (this.currentRowPos >= 0 && this.currentRowPos < this.pagingTable.length)
         this.recordBody.children[this.currentRowPos].children[0].classList.remove('focus')
+      this.lastCell?.classList.remove('focus')
 
       // Off the textarea when moving, write to value if changed
       if (this.inputBoxShow) this.inputBoxShow = 0
@@ -2426,6 +2437,8 @@ export default defineComponent({
       this.currentRecord = this.table[top + rowPos]
 
       this.$emit('cell-focus', {rowPos, colPos, cell, record: this.currentRecord})
+      this.currentCell.classList.add('focus')
+      this.lastCell = this.currentCell
 
       // Off all editors
       if (this.showDatePicker) this.showDatePicker = false
@@ -2492,6 +2505,7 @@ export default defineComponent({
         this.recordBody.children[this.currentRowPos].children[0].classList.remove('focus')
         this.labelTr.children[this.currentColPos + 1].classList.remove('focus')
       }
+      this.lastCell?.classList.remove('focus')
     },
     inputBoxComplete () {
       if (this.inputBoxChanged) {
@@ -3010,11 +3024,11 @@ input:focus, input:active:focus, input.active:focus {
   background-size: 8px 8px !important;
   background-position: right 0px top 0px !important;
 }
-.systable tbody tr:not(:last-child) td {
-  border-bottom: 1px solid lightgray;
+.systable tbody tr:not(:first-child) td {
+  border-top: 1px solid lightgray;
 }
-.systable tbody tr:last-child td {
-  border-bottom: 1px solid transparent;
+.systable tbody tr:first-child td {
+  border-top: 1px solid transparent;
 }
 .systable td:not(:last-child) {
   border-right: 1px solid lightgray;
@@ -3363,4 +3377,9 @@ a:disabled {
   left: 50%;
   transform: translate(-50%, 0%);
 }
+td.hideDuplicate:not(.focus) {
+  border-top: 1px solid transparent !important;
+  color: transparent;
+  text-shadow: none;
+}
 </style>