opnform/client/mixins/forms/input.js

65 lines
1.6 KiB
JavaScript
Raw Normal View History

2023-12-18 09:35:00 +00:00
import { themes } from '~/lib/forms/form-themes.js'
2023-12-09 14:47:03 +00:00
export default {
props: {
id: { type: String, default: null },
name: { type: String, required: true },
label: { type: String, required: false },
form: { type: Object, required: false },
value: { required: false },
required: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
placeholder: { type: String, default: null },
uppercaseLabels: { type: Boolean, default: false },
help: { type: String, default: null },
helpPosition: { type: String, default: 'below_input' },
theme: { type: Object, default: () => themes.default },
color: { type: String, default: '#3B82F6' },
wrapperClass: { type: String, default: 'relative mb-3' }
},
data () {
return {
content: this.value
}
},
computed: {
inputStyle () {
return {
'--tw-ring-color': this.color
}
},
hasValidation () {
return this.form !== null && this.form !== undefined && this.form.hasOwnProperty('errors')
},
compVal: {
set (val) {
if (this.form) {
this.form[this.name] = val
} else {
this.content = val
}
if (this.hasValidation) {
this.form.errors.clear(this.name)
}
this.$emit('input', this.compVal)
},
get () {
if (this.form) {
return this.form[this.name]
}
return this.content
}
}
},
watch: {
value (val) {
if (val !== this.compVal) {
this.compVal = val
}
}
}
}