SignPdf

Drag-and-drop PDF signing with fixed placement, non-overlapping markers, and PDF export. The layout combines upload controls, zoom, signer list, and a JSON sync channel so you can restore signature positions after reload.

Example

Drag user chips into the canvas area to pin a signature where it belongs. This demo keeps signature positions in JSON so you can copy/paste them to restore after refresh. SignPdf handles upload, drag/drop, and signing UI.

Code

<script setup lang="ts">
import { ref } from 'vue'
import { SignPdf } from '@point-hub/papp'

const demoUsers = [
  { id: 'alya', name: 'Alya Rahma', initials: 'AR', label: 'Menyetujui' },
  { id: 'dimas', name: 'Dimas Pratama', initials: 'DP', label: 'Mengetahui' }
]
const currentUser = demoUsers[0]
const signaturesJson = ref('')
</script>

<template>
  <SignPdf v-model:signaturesJson="signaturesJson" :users="demoUsers" :current-user="currentUser" />
  <base-textarea
    v-model="signaturesJson"
    label="Signature JSON"
    layout="vertical"
    description="Paste to restore positions."
    class="mt-4"
    :minHeight="180"
    placeholder="Paste signature JSON di sini..."
    spellcheck="false"
  />
</template>

SignPdf API

Types

export interface SignPdfUser {
  id: number | string
  name: string
  initials?: string
  role?: string
  label?: string
}

export interface PdfSignerSignature {
  id: string
  x: number
  y: number
  width: number
  height: number
  page: number
  userId: number | string | null
  name: string
  initials: string
  label?: string
  signed: boolean
}

Props

Prop	Type	Default	Description
users	SignPdfUser[]	built-in demo list	Signers that can be dragged to the canvas.
currentUser	`SignPdfUser	null`	null
pdfUrl	string	''	PDF source URL to load immediately.
enableUpload	boolean	true	Show or hide the built-in upload control.
signaturesJson	string	''	JSON string representing signatures (used with v-model:signaturesJson).

Events

This component emits update:signaturesJson for v-model sync and signature lifecycle events. See the source if you need to hook into them.