opnform/resources/js/components/forms/SignatureInput.vue

76 lines
1.7 KiB
Vue
Raw Normal View History

<template>
2023-11-28 07:47:40 +00:00
<input-wrapper
v-bind="$props"
>
<template #label>
<slot name="label" />
</template>
<VueSignaturePad ref="signaturePad"
2023-11-28 08:09:02 +00:00
:class="[theme.default.input,{ '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200':disabled }]"
height="150px"
:name="name"
:options="{ onEnd }"
/>
<div class="flex">
<small :class="theme.default.help">
<a :class="theme.default.help" href="#" @click.prevent="clear">Clear</a>
</small>
</div>
2023-11-28 07:47:40 +00:00
<template #help>
<slot name="help" />
</template>
<template #error>
<slot name="error" />
</template>
</input-wrapper>
</template>
<script>
2023-11-28 07:47:40 +00:00
import { inputProps, useFormInput } from './useFormInput.js'
import InputWrapper from './components/InputWrapper.vue'
2023-11-28 08:09:02 +00:00
import { VueSignaturePad } from 'vue-signature-pad'
export default {
name: 'SignatureInput',
2023-11-28 08:09:02 +00:00
components: { InputWrapper, VueSignaturePad },
2023-11-28 07:47:40 +00:00
props: {
2023-11-28 08:09:02 +00:00
...inputProps
2023-11-28 07:47:40 +00:00
},
2023-11-28 07:47:40 +00:00
setup (props, context) {
const {
compVal,
inputStyle,
hasValidation,
hasError
} = useFormInput(props, context)
return {
compVal,
inputStyle,
hasValidation,
hasError
}
},
methods: {
clear () {
this.$refs.signaturePad.clearSignature()
this.onEnd()
},
onEnd () {
2023-10-24 09:00:54 +00:00
if (this.disabled) {
this.$refs.signaturePad.clearSignature()
2023-10-24 09:00:54 +00:00
} else {
const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
2023-10-24 09:00:54 +00:00
this.form[this.name] = (!isEmpty && data) ? data : null
}
}
}
}
</script>