ESC-539 - Refactor SignatureInput Component for Consistency and Enhanced Logic (#749)
* Refactor SignatureInput Component for Consistency and Enhanced Logic - Updated the `SignatureInput.vue` component to use `InputWrapper` instead of `input-wrapper` for consistency with naming conventions. - Added logic to reset the signature field value when the model value is an array, improving handling of Notion database data. - Enhanced the `mounted` lifecycle hook to ensure the signature pad canvas is resized correctly after rendering. - Improved error handling in the file upload process by capturing the error in the catch block. These changes aim to enhance the maintainability and functionality of the `SignatureInput` component, ensuring better user experience and consistency across the codebase. * Refactor SignatureInput Component to Remove Unused ModelValue Logic - Removed the modelValue handler logic from the `SignatureInput.vue` component, simplifying the component's state management. - Cleaned up the created lifecycle hook by eliminating unnecessary checks related to Notion array data handling. These changes aim to enhance the maintainability of the `SignatureInput` component by streamlining its logic and improving overall code clarity. * fix lint --------- Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
parent
9280b106e0
commit
a430621b4c
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<input-wrapper v-bind="inputWrapperProps">
|
||||
<InputWrapper v-bind="inputWrapperProps">
|
||||
<template #label>
|
||||
<slot name="label" />
|
||||
</template>
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
<div
|
||||
v-if="loading || file"
|
||||
:class="[
|
||||
theme.default.input,
|
||||
theme.SignatureInput.input,
|
||||
theme.SignatureInput.spacing.horizontal,
|
||||
theme.SignatureInput.spacing.vertical,
|
||||
|
|
@ -43,6 +44,7 @@
|
|||
ref="signaturePad"
|
||||
class="not-draggable"
|
||||
:class="[
|
||||
theme.default.input,
|
||||
theme.SignatureInput.input,
|
||||
theme.SignatureInput.spacing.horizontal,
|
||||
theme.SignatureInput.spacing.vertical,
|
||||
|
|
@ -91,17 +93,17 @@
|
|||
<template #error>
|
||||
<slot name="error" />
|
||||
</template>
|
||||
</input-wrapper>
|
||||
</InputWrapper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inputProps, useFormInput } from "./useFormInput.js"
|
||||
import InputWrapper from "./components/InputWrapper.vue"
|
||||
import { VueSignaturePad } from "vue-signature-pad"
|
||||
import { storeFile } from "~/lib/file-uploads.js"
|
||||
import { VueSignaturePad } from 'vue-signature-pad'
|
||||
import { inputProps, useFormInput } from './useFormInput.js'
|
||||
import InputWrapper from './components/InputWrapper.vue'
|
||||
import { storeFile } from '~/lib/file-uploads.js'
|
||||
|
||||
export default {
|
||||
name: "SignatureInput",
|
||||
name: 'SignatureInput',
|
||||
components: { InputWrapper, VueSignaturePad },
|
||||
|
||||
props: {
|
||||
|
|
@ -127,6 +129,14 @@ export default {
|
|||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.signaturePad) {
|
||||
this.$refs.signaturePad.resizeCanvas()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
clear() {
|
||||
this.file = null
|
||||
|
|
|
|||
Loading…
Reference in New Issue