fix: agreement fields and signature

Author: kei5uke

docs/.vitepress/theme/components/legacy/AgreementForm.vue

@@ -3,8 +3,6 @@ import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from "v
 
 import YAML from "yaml"
 
-// Dynamic import for PdfForm component
-// const PdfForm = defineAsyncComponent(() => import("./PdfForm.vue"))
 
 const ISSERVER = typeof window === "undefined"
 

docs/.vitepress/theme/components/legacy/EmbedPdfViewer.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, nextTick } from "vue"
+import { ref, watch, onMounted, nextTick, shallowRef } from "vue"
 
 defineOptions({
   name: "EmbedPdfViewer",
@@ -10,7 +10,7 @@ const props = defineProps({
   pages: { type: Number, default: 1 },
 })
 
-const PdfEmbed = ref(null)
+const PdfEmbed = shallowRef(null)
 const src = ref("")
 const showPdf = ref(false)
 const page = ref(null)

docs/.vitepress/theme/components/legacy/PdfForm.vue

@@ -6,8 +6,6 @@ import { PDFDocument } from "pdf-lib"
 import { countries } from "country-list-json"
 import SignaturePad from "signature_pad"
 
-// Dynamic / Async component import (Vue 3 style)
-// const CustomComponent = defineAsyncComponent(() => import("./CustomComponent.vue"))
 
 defineOptions({
   name: "PdfForm",
@@ -241,7 +239,6 @@ const updateAgreementFormCache = (key, fields) => {
   if (!localStorage.agreementFields) {
     localStorage.agreementFields = {}
   }
-  console.log('is this updated', key, fields);
   if (key && fields) {
     localStorage.setItem(key, JSON.stringify(fields))
   }
@@ -292,11 +289,18 @@ const submit = () => {
             console.log(
               `Page ${pageNum} (${page.getWidth()} x ${page.getHeight()}) - insert image ${key}.png (${pngDims.width} x ${pngDims.height}) at position ${xpos} x ${ypos}`,
             )
+
+            const targetWidth = 300;
+            const targetHeight = 30;
+            const scaleX = targetWidth / pngImage.width;
+            const scaleY = targetHeight / pngImage.height;
+            const scale = Math.min(scaleX, scaleY);
+
             page.drawImage(pngImage, {
               x: xpos,
               y: ypos,
-              width: pngDims.width,
-              height: pngDims.height,
+              width: pngImage.width * scale,
+              height: pngImage.height * scale,
             })
           })
         })
@@ -484,6 +488,8 @@ onMounted(() => {
                 :ref="item.key"
                 autocomplete="ignore-field"
                 :items="item.options"
+                item-title="text"
+                item-value="value"
                 :required="isFieldRequired(item.required)"
                 :clearable="isBoolTrue(item.clearable)"
                 clear-icon=""
@@ -524,22 +530,21 @@ onMounted(() => {
                 persistent
                 width="290px"
               >
-                <template v-slot:activator="{ on, attrs }">
+                <template #activator="{ props }">
                   <v-text-field
                     v-model="formData[item.key]"
                     class="mt-1 mb-2"
-                    :placeholder="item.placeholder ? item.placeholder : ''"
+                    :placeholder="item.placeholder || ''"
                     persistent-placeholder
                     variant="outlined"
                     density="compact"
                     hide-details
                     readonly
-                    v-bind="attrs"
-                    v-on="on"
+                    v-bind="props"
                   >
-                    <template v-slot:label>
-                      {{ item.label
-                      }}<span v-if="isFieldRequired(item.required)" class="red--text text--darken-2"> * </span>
+                    <template #label>
+                      {{ item.label }}
+                      <span v-if="isFieldRequired(item.required)" class="red--text text--darken-2"> * </span>
                     </template>
                   </v-text-field>
                 </template>