You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.8 KiB
115 lines
2.8 KiB
<template>
|
|
<span
|
|
class="cursor-pointer"
|
|
>
|
|
<q-input
|
|
v-model="internalValue"
|
|
dense
|
|
hide-bottom-space
|
|
borderless
|
|
filled
|
|
:error="error"
|
|
:error-message="errorMessage"
|
|
:disable="$attrs.disable"
|
|
@keyup="save"
|
|
@clear="clear"
|
|
/>
|
|
</span>
|
|
</template>
|
|
|
|
<script>
|
|
import { i18n } from 'src/boot/i18n'
|
|
import useValidate from '@vuelidate/core'
|
|
export default {
|
|
name: 'CscDataTableEditInput',
|
|
props: {
|
|
column: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
row: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
value: {
|
|
type: [String, Number],
|
|
default: undefined
|
|
},
|
|
saveLabel: {
|
|
type: String,
|
|
default: i18n.global.tc('Save')
|
|
}
|
|
},
|
|
emits: ['changed'],
|
|
data () {
|
|
return {
|
|
v$: useValidate(),
|
|
internalValue: this.value
|
|
}
|
|
},
|
|
validations () {
|
|
const config = {}
|
|
if (this.column.componentValidations) {
|
|
config.internalValue = {}
|
|
this.column.componentValidations.forEach((validation) => {
|
|
config.internalValue[validation.name] = validation.validator
|
|
})
|
|
}
|
|
return config
|
|
},
|
|
computed: {
|
|
error () {
|
|
if (this.column.componentValidations) {
|
|
return this.v$.internalValue.$errors.length > 0
|
|
} else {
|
|
return false
|
|
}
|
|
},
|
|
errorMessage () {
|
|
if (this.column.componentValidations) {
|
|
const validation = this.column.componentValidations.find(validation =>
|
|
this.v$.internalValue[validation.name]?.$invalid === true
|
|
)
|
|
if (validation) {
|
|
return validation.error
|
|
} else {
|
|
return undefined
|
|
}
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
value (value) {
|
|
this.internalValue = value
|
|
}
|
|
},
|
|
mounted () {
|
|
this.internalValue = this.value
|
|
this.v$.$reset()
|
|
},
|
|
methods: {
|
|
validate () {
|
|
if (this.column.componentValidations) {
|
|
this.v$.$touch()
|
|
return !this.v$.$invalid
|
|
} else {
|
|
return true
|
|
}
|
|
},
|
|
save () {
|
|
this.v$.$touch()
|
|
this.$emit('changed', {
|
|
column: this.column,
|
|
row: this.row,
|
|
value: this.internalValue
|
|
})
|
|
},
|
|
clear () {
|
|
this.v$.$reset()
|
|
}
|
|
}
|
|
}
|
|
</script>
|