feat: signature data control

Author: selemondev

README.md

@@ -46,7 +46,7 @@ const activeColor = ref();
 const signature = ref();
 
 const handleSave = (format?: string) => {
-  return signature.value.saveSignature(format)
+  return alert(signature.value.saveSignature(format))
 };
 const handleClear = () => {
   return signature.value.clearCanvas()

package.json

@@ -48,7 +48,7 @@
     "vue": "^3.2.0"
   },
   "dependencies": {
-    "@selemondev/vue3-signature-pad": "^1.3.0",
+    "@selemondev/vue3-signature-pad": "^1.3.2",
     "nanoid": "^5.0.9",
     "signature_pad": "^5.0.4"
   },

pnpm-lock.yaml

@@ -48,14 +48,8 @@ function isCanvasEmpty(): boolean {
   return canvasOptions.value.signaturePad.isEmpty()
 }
 
-function saveSignature(format?: string) {
-  const dataURL = format ? canvasOptions.value.signaturePad.toDataURL(format) : canvasOptions.value.signaturePad?.toDataURL()
-  const link = document.createElement('a')
-  link.href = dataURL ?? ''
-  link.download = `signature-${nanoid()?.slice(0, 4)}`
-  document.body.appendChild(link)
-  link.click()
-  document.body.removeChild(link)
+function saveSignature(format?: string): string {
+  return format ? canvasOptions.value.signaturePad.toDataURL(format) : canvasOptions.value.signaturePad?.toDataURL()
 }
 
 function clearCanvas() {

src/components/VueSignaturePad.vue

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@selemondev/shiki-transformer-copy-button": "^0.0.2",
-    "@selemondev/vue3-signature-pad": "^1.3.1",
+    "@selemondev/vue3-signature-pad": "^1.3.2",
     "shiki-code-block-vue": "0.0.6-beta.1",
     "vue": "^3.5.14"
   },

website/package.json

@@ -44,7 +44,7 @@ function handleClearCanvasLaptop() {
 }
 
 function handleSaveSignatureLaptop(format?: string) {
-  return signatureLaptop.value?.saveSignature(format)
+  return alert(signatureLaptop.value?.saveSignature(format))
 }
 
 function handleUndoTablet() {
@@ -56,7 +56,7 @@ function handleClearCanvasTablet() {
 }
 
 function handleSaveSignatureTablet() {
-  return signatureTablet.value?.saveSignature()
+  return alert(signatureTablet.value?.saveSignature())
 }
 
 function handleUndo() {
@@ -68,7 +68,7 @@ function handleClearCanvas() {
 }
 
 function handleSaveSignature(format: string) {
-  return signature.value?.saveSignature(format)
+  return alert(signature.value?.saveSignature(format))
 }
 
 function handleUndoWaterMarkLaptop() {
@@ -80,7 +80,7 @@ function handleClearCanvasWaterMarkLaptop() {
 }
 
 function handleSaveSignatureWaterMarkLaptop(format?: string) {
-  return signatureWaterMarkLaptop.value?.saveSignature(format)
+  return alert(signatureWaterMarkLaptop.value?.saveSignature(format))
 }
 
 function handleUndoWaterMarkTablet() {
@@ -92,7 +92,7 @@ function handleClearCanvasWaterMarkTablet() {
 }
 
 function handleSaveSignatureWaterMarkTablet(format?: string) {
-  return signatureWaterMarkTablet.value?.saveSignature(format)
+  return alert(signatureWaterMarkTablet.value?.saveSignature(format))
 }
 
 function handleWaterMarkUndo() {
@@ -104,7 +104,7 @@ function handleClearWaterMarkCanvas() {
 }
 
 function handleSaveWaterMarkSignature(format?: string) {
-  return signatureWaterMark.value?.saveSignature(format)
+  return alert(signatureWaterMark.value?.saveSignature(format))
 }
 
 function handleAddWaterMark() {