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:
Chirag Chhatrala 2025-05-14 20:49:18 +05:30 committed by GitHub
parent 9280b106e0
commit a430621b4c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 8 deletions

View File

@ -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