Skip to content

Commit

Permalink
Add new types: action, password
Browse files Browse the repository at this point in the history
  • Loading branch information
Kenneth Cheng committed May 14, 2024
1 parent a92b4a5 commit aa8bc4b
Showing 4 changed files with 40 additions and 11 deletions.
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
"name": "vue3-excel-editor",
"email": "[email protected]",
"description": "Vue3 plugin for displaying and editing the array-of-object in Excel style",
"version": "1.0.30",
"version": "1.0.31",
"main": "src/main.js",
"dependencies": {
"@vuepic/vue-datepicker": "^3.3.0",
18 changes: 16 additions & 2 deletions src/VueExcelColumn.vue
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
<script>
export default {
props: {
field: {type: String, default: ''},
field: {type: String, default: 'dummy'},
label: {type: String, default: null},
type: {type: String, default: 'string'},
initStyle: {type: Object, default () {return {}}},
@@ -30,6 +30,9 @@ export default {
options: {type: [Array, Object, Function], default () {return null}},
summary: {type: String, default: null},
sort: {type: Function, default: null},
masking: {type: String, default: '*'},
placeholder: {type: String, default: ''},
toValue: {
type: Function,
default (text) {
@@ -104,6 +107,10 @@ export default {
return this.options(val)[val]
else
return this.options[val]
case 'password':
return this.masking.repeat(val?.length || 0)
case 'action':
return this.placeholder || ''
default:
return val
}
@@ -195,6 +202,10 @@ export default {
break
case 'string':
break
case 'password':
break
case 'action':
break
default:
throw new Error('VueExcelColumn: Not supported type:' + this.type)
}
@@ -227,6 +238,7 @@ export default {
get autocomplete () {
if (self.type === 'map' || self.type === 'select') return true
if (self.type === 'password') return false
return self._autocomplete === null ? self.$parent.autocomplete : self._autocomplete
},
set autocomplete (val) {
@@ -243,9 +255,11 @@ export default {
pos: Number(this.pos),
options: this.options,
summary: this.summary,
masking: this.masking,
toValue: this.toValue,
toText: this.toText,
register: this.register
register: this.register,
placeholder: this.placeholder
})
}
}
29 changes: 22 additions & 7 deletions src/VueExcelEditor.vue
Original file line number Diff line number Diff line change
@@ -640,6 +640,7 @@ export default defineComponent({
toggleSelectView (e) {
if (e) e.stopPropagation()
this.showSelectedOnly = !this.showSelectedOnly
this.firstPage()
return this.refresh()
},
toggleFilterView (e) {
@@ -1293,6 +1294,13 @@ export default defineComponent({
},
winKeyup (e) {
if (!e.altKey) this.systable.classList.remove('alt')
if (this.inputBoxShow && this.currentField.type === 'password') {
setTimeout(() => {
const v = this.inputBox.value.split('').map((c, i) => c === this.currentField.masking ? this.inputBox._value[i] : c)
this.inputBox._value = v.join('')
this.inputBox.value = this.currentField.masking.repeat(v.length)
})
}
},
winKeydown (e) {
if (e.altKey) this.systable.classList.add('alt')
@@ -1485,7 +1493,7 @@ export default defineComponent({
}
if (this.inputBoxShow && this.currentField.lengthLimit && this.inputBox.value.length >= this.currentField.lengthLimit) return e.preventDefault()
if (!this.inputBoxShow) {
if (this.currentField.type === 'select' || this.currentField.type === 'map') {
if (['select', 'map', 'action'].includes(this.currentField.type)) {
setTimeout(() => this.calAutocompleteList(true))
if (e.keyCode === 32) return e.preventDefault()
this.inputBox.value = ''
@@ -1498,8 +1506,9 @@ export default defineComponent({
this.inputBox.focus()
setTimeout(this.calAutocompleteList)
}
else
else {
setTimeout(() => this.calAutocompleteList(this.autocompleteInputs.length))
}
this.inputBoxChanged = true
break
}
@@ -2237,7 +2246,7 @@ export default defineComponent({
const rowPos = Array.from(row.parentNode.children).indexOf(row)
this.$emit('cell-click', {rowPos, colPos})
this.moveInputSquare(rowPos, colPos)
if (this.currentField && this.currentField.link && e.altKey)
if (this.currentField && this.currentField.link /* && e.altKey */)
setTimeout(() => this.currentField.link(this.currentCell.textContent, this.currentRecord, rowPos, colPos, this.currentField, this))
if (e.target.offsetWidth - e.offsetX > 15) return
if (this.currentField.readonly) return
@@ -2323,7 +2332,9 @@ export default defineComponent({
// Off the textarea when moving, write to value if changed
if (this.inputBoxShow) this.inputBoxShow = 0
if (this.inputBoxChanged) {
this.inputCellWrite(this.inputBox.value, this.currentColPos, top + this.currentRowPos)
const value = this.inputBox._value || this.inputBox.value
this.inputBox._value = ''
this.inputCellWrite(value, this.currentColPos, top + this.currentRowPos)
this.inputBoxChanged = false
}
@@ -2425,7 +2436,9 @@ export default defineComponent({
},
inputBoxComplete () {
if (this.inputBoxChanged) {
this.inputCellWrite(this.inputBox.value)
const value = this.inputBox._value || this.inputBox.value
this.inputBox._value = ''
this.inputCellWrite(value)
this.inputBoxChanged = false
}
this.inputBoxShow = 0
@@ -2913,11 +2926,13 @@ input:focus, input:active:focus, input.active:focus {
text-overflow: ellipsis;
/* animation: fadein 0.2s; */
}
.systable.alt tbody td.link:hover {
.systable tbody td.link {
color: blue;
text-decoration: underline;
cursor: pointer !important;
}
.systable tbody td.link:hover {
text-decoration: underline;
}
.systable tbody td.error {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAXEgAAFxIBZ5/SUgAAAGZJREFUOBGlzjsOgDAMA9CwcQSO0PtP3K64Qyugv8S2ZMXTUw5DstmFk8qWAuhEbzSzbQ+oWIPKULAPpGAdxGJDiMGmUBRbQhFsC3kxF+TB3NAOC0ErLAzNMAoaYTT0xyTojclQxR5H5B1HhuS+WAAAAABJRU5ErkJggg==') !important;
background-repeat: no-repeat !important;

0 comments on commit aa8bc4b

Please sign in to comment.