📝 Numeric Signature Pad

A reusable digital signature component for Vue.js applications. Capture handwritten signatures with mouse or touch input, export to multiple formats, and integrate seamlessly into your projects.

✨ Features

$3

- Mouse & Touch Support: Works on desktop and mobile devices
- Natural Drawing: Smooth, pressure-sensitive strokes
- Customizable Styling: Colors, line width, backgrounds
- Grid Option: Visual guide for signature placement

$3

- Clear & Undo: Remove last stroke or clear entirely
- Color Picker: Choose from preset colors
- Line Width: Variable stroke thickness
- Real-time Feedback: Drawing status and statistics

$3

- PNG: High-quality raster image
- JPEG: Compressed image format
- SVG: Scalable vector graphics
- JSON: Raw signature data for storage

$3

- TypeScript: Full type safety
- Vue 3: Composition API support
- Lightweight: No heavy dependencies
- Customizable: Extensive configuration options

🚀 Quick Start

$3

``bash
npm install @visionary-studio/numeric-signature
`

$3

`vue



`

$3

`vue

`

📖 API Reference

$3

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| width | number | 400 | Canvas width in pixels |
| height | number | 200 | Canvas height in pixels |
| color | string | '#000000' | Stroke color |
| backgroundColor | string | '#ffffff' | Canvas background |
| lineWidth | number | 2 | Stroke thickness |
| smoothing | number | 0.5 | Stroke smoothing (0-1) |
| pressure | boolean | false | Enable pressure sensitivity |
| showControls | boolean | true | Show control buttons |
| showGrid | boolean | false | Show background grid |
| showColorPicker | boolean | true | Show color selection |
| showLineWidth | boolean | true | Show line width options |
| showExport | boolean | true | Show export buttons |
| colors | string[] | ['#000000', '#0000ff', '#ff0000', '#008000'] | Available colors |
| lineWidths | number[] | [1, 2, 3, 4] | Available line widths |
| texts | object | See below | Custom button labels |

$3

`typescript
interface TextLabels {
clear?: string; // Default: 'Clear'
undo?: string; // Default: 'Undo'
color?: string; // Default: 'Color'
lineWidth?: string; // Default: 'Line Width'
export?: string; // Default: 'Export'
}
`

$3

| Event | Payload | Description |
|-------|---------|-------------|
| start | SignaturePoint | Drawing started |
| draw | SignaturePoint | Drawing in progress |
| end | SignatureData | Drawing completed |
| change | SignatureData \| null | Signature data changed |
| clear | - | Canvas cleared |

$3

`vue



`

| Method | Return | Description |
|--------|--------|-------------|
| clear() | void | Clear the canvas |
| undo() | void | Remove last stroke |
| getData() | SignatureData \| null | Get signature data |
| setData(data) | void | Set signature data |
| toDataURL(format?, quality?) | string | Export as data URL |
| toBlob(format?, quality?) | Promise | Export as blob |

$3

| Property | Type | Description |
|----------|------|-------------|
| isEmpty | boolean | Canvas is empty |
| isDrawing | boolean | Currently drawing |
| signatureData | SignatureData \| null | Current signature data |

📋 Data Types

$3

`typescript
interface SignatureData {
strokes: SignatureStroke[]
width: number
height: number
backgroundColor: string
timestamp: number
}
`

$3

`typescript
interface SignatureStroke {
points: SignaturePoint[]
color: string
width: number
timestamp: number
}
`

$3

`typescript
interface SignaturePoint {
x: number
y: number
pressure?: number
timestamp?: number
}
`

🎯 Use Cases

$3

`vue

`

$3

`vue

`

$3

`vue

`

🛠️ Integration Examples

$3

`typescript
// stores/signature.js
import { defineStore } from 'pinia'

export const useSignatureStore = defineStore('signature', {
state: () => ({
signatures: []
}),
actions: {
addSignature(data) {
this.signatures.push({
id: Date.now(),
data,
timestamp: new Date().toISOString()
})
}
}
})
`

$3

`vue

`

$3

`vue

`

🎨 Customization

$3

`css
.signature-canvas {
--signature-border-color: #e5e7eb;
--signature-focus-color: #3b82f6;
--signature-background: #ffffff;
}
`

$3

`vue

`

🧪 Testing

The library includes comprehensive tests:

`bash

Run all tests

npm test

Run tests with UI

npm run test:ui

Run tests with coverage

npm run test:coverage
`

$3

- ✅ Canvas drawing functionality
- ✅ Touch and mouse events
- ✅ Export/import operations
- ✅ Data validation
- ✅ Vue component integration
- ✅ Composable behavior

📦 Build & Distribution

`bash

Build for development

npm run dev

Build library for distribution

npm run build-lib

Build demo application

npm run build

Type checking

npm run type-check
`

🔧 Development

$3

`
src/
├── components/
│ └── SignaturePad.vue # Main Vue component
├── composables/
│ └── useSignature.ts # Vue composable
├── utils/
│ ├── signature-canvas.ts # Canvas logic
│ └── signature-utils.ts # Utility functions
├── types/
│ └── signature.ts # TypeScript types
├── App.vue # Demo application
├── main.ts # Entry point
└── index.ts # Library exports
``

$3

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new functionality
5. Ensure all tests pass
6. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🤝 Support

- 📧 Email: contact.visionary.devs@gmail.com
- 🐛 Issues: GitHub Issues

🔗 Related Projects

- @visionary-studio/js-toolbox - JavaScript utility library

---

Built with ❤️ by Visionary Studio