column cell click function

Author: Kenneth Cheng

src/VueExcelColumn.vue

@@ -16,10 +16,12 @@ export default {
     textAlign: {type: String, default: null},
     keyField: {type: Boolean, default: false},
     sticky: {type: Boolean, default: false},
+    listByClick: {type: Boolean, default: null},
 
     validate: {type: Function, default: null},
     change: {type: Function, default: null},
     link: {type: Function, default: null},
+    cellClick: {type: Function, default: null},
     autoFillWidth: {type: Boolean, default: false},
 
     allowKeys: {type: [Array, Function], default () {return null}},
@@ -30,7 +32,7 @@ export default {
     options: {type: [Array, Object, Function], default () {return null}},
     summary: {type: String, default: null},
     sort: {type: Function, default: null},
-    masking: {type: String, default: '*'},
+    masking: {type: String, default: '•'},
     placeholder: {type: String, default: ''},
 
     toValue: {
@@ -205,6 +207,7 @@ export default {
         case 'password':
           break
         case 'action':
+          this._listByClick = true
           break
         default:
           throw new Error('VueExcelColumn: Not supported type:' + this.type)
@@ -259,7 +262,9 @@ export default {
         toValue: this.toValue,
         toText: this.toText,
         register: this.register,
-        placeholder: this.placeholder
+        placeholder: this.placeholder,
+        cellClick: this.cellClick,
+        listByClick: this.listByClick || this._listByClick
       })
     }
   }

src/VueExcelEditor.vue

@@ -2244,10 +2244,14 @@ export default defineComponent({
         const row = e.target.parentNode
         const colPos = Array.from(row.children).indexOf(e.target) - 1
         const rowPos = Array.from(row.parentNode.children).indexOf(row)
+        this.currentField = this.fields[colPos]
         this.$emit('cell-click', {rowPos, colPos})
+        if (typeof this.currentField.cellClick === 'function')
+          this.currentField.cellClick(this.currentCell.textContent, this.currentRecord, rowPos, colPos, this.currentField, this)
         this.moveInputSquare(rowPos, colPos)
         if (this.currentField && this.currentField.link /* && e.altKey */)
           setTimeout(() => this.currentField.link(this.currentCell.textContent, this.currentRecord, rowPos, colPos, this.currentField, this))
+        if (this.currentField.listByClick) return this.calAutocompleteList(true)
         if (e.target.offsetWidth - e.offsetX > 15) return
         if (this.currentField.readonly) return
         this.inputBox.value = this.currentCell.textContent
@@ -2793,6 +2797,12 @@ input:focus, input:active:focus, input.active:focus {
   font-size: 0.88rem;
   max-width: 300px;
   max-height: 235px;
+  animation: 0.3s ease 0s normal forwards 1 fadein;
+}
+@keyframes fadein {
+  0% { opacity: 0; }
+  66% { opacity: 0; }
+  100% { opacity: 1; }
 }
 .autocomplete-result {
   list-style: none;