# @stsdti/esign-vue3-webcomponents

Vue 3 web components for implementing cryptographic operations and integrating with the eSign API.

## Installation

```bash
npm install @stsdti/esign-vue3-webcomponents
```

## Components

### EsignCloudDocument

Drop-in button component that handles the full cloud signing workflow: certificate selection, OAuth2 authorization, optional visible signature placement, and document signing.

```vue
<template>
  <EsignCloudDocument
      esign-api-host="https://your-esign-api-host"
      bearer-token="jwtToken"
      user="signer@example.com"
      :to-sign-document="base64PdfString"
      @signatureCancel="onCancel"
      @signatureDone="onDone"
  />
</template>

<script setup>
  import { EsignCloudDocument } from '@stsdti/esign-vue3-webcomponents'

  function onCancel() {
    console.log('Signing cancelled')
  }

  function onDone(signedDocument) {
    console.log('Signed PDF (base64):', signedDocument)
  }
</script>
```

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `esignApiHost` | `String` | `''` | eSign API service URL |
| `bearerToken` | `String` | `''` | JWT bearer token from your identity provider |
| `user` | `String` | `''` | Signer identifier (email) |
| `toSignDocument` | `String` | `''` | Base64-encoded PDF document to sign |
| `toSignDocumentCallback` | `Function` | — | Async function that returns the base64 PDF (alternative to `toSignDocument`) |
| `wasmUrl` | `String` | jsdelivr CDN | URL to the pdfium WASM binary for PDF rendering |
| `align` | `String` | `'left'` | Menu alignment (`left` or `right`) |
| `disabled` | `Boolean` | `false` | Disables the signing button |

#### Events

| Event | Payload | Description |
|-------|---------|-------------|
| `signatureCancel` | — | Emitted when the user cancels the signing process |
| `signatureDone` | `String` (base64) | Emitted with the signed PDF document |

### EsignCloudClient

Lower-level component that manages the cloud signing workflow UI (certificate list, PIN authorization, visible signature placement). Used internally by `EsignCloudDocument`, but can be used directly for custom integrations.

### EsignPdfViewer

PDF viewer component built on `@embedpdf/vue-pdf-viewer` with zoom controls, page navigation, and signature box placement support.

## Development

```bash
# Install dependencies
npm install

# Start dev server
npm run dev

# Build library
npm run build
```

