{"_id":"@docuseal/signature-maker-vue","_rev":"3-7d9faee7aa517299f735d04308c7c069","name":"@docuseal/signature-maker-vue","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@docuseal/signature-maker-vue","version":"1.0.0","keywords":["vue-signature","signature","signature-drawing"],"author":{"name":"Alex Turchyn","email":"alex@docuseal.co"},"license":"MIT","_id":"@docuseal/signature-maker-vue@1.0.0","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.co"}],"homepage":"https://github.com/docusealco/signature-maker-vue#readme","bugs":{"url":"https://github.com/docusealco/signature-maker-vue/issues"},"dist":{"shasum":"7ea7e67f10cafe96c030eb9d9111116222a6d931","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-vue/-/signature-maker-vue-1.0.0.tgz","fileCount":6,"integrity":"sha512-f839WzPZ0+0EJfpK1OV6sqR7uzj/YdD+2IJOYd0qjLRG+oKtzuuKmO9QSXpzGir0JHCNfspXeYgp498hzdB2IQ==","signatures":[{"sig":"MEQCIGTvFE+zBIIAxV6uS986GjoAi/mggyG0N21CBBW1vbYfAiAMfran8HMt4EJ0HIvdql0n1scclSM48i+HZX19cZtBig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117388},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"a4ee3745f1288a2e9a3aa3a41332161c3530f52b","scripts":{"lint":"eslint src/**/*.ts --fix","build":"node esbuild.config.js && tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.co"},"repository":{"url":"git+https://github.com/docusealco/signature-maker-vue.git","type":"git"},"_npmVersion":"10.5.0","description":"Vue component for drawing signatures","directories":{},"_nodeVersion":"21.7.1","dependencies":{"@docuseal/signature-maker-js":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.6","eslint":"^9.10.0","esbuild":"^0.23.1","typescript":"^5.5.4","@typescript-eslint/parser":"^8.4.0","@typescript-eslint/eslint-plugin":"^8.4.0"},"_npmOperationalInternal":{"tmp":"tmp/signature-maker-vue_1.0.0_1726587767581_0.4755190446716968","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@docuseal/signature-maker-vue","version":"1.0.1","keywords":["vue-signature","signature","signature-drawing"],"author":{"name":"Alex Turchyn","email":"alex@docuseal.co"},"license":"MIT","_id":"@docuseal/signature-maker-vue@1.0.1","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.co"}],"homepage":"https://github.com/docusealco/signature-maker-vue#readme","bugs":{"url":"https://github.com/docusealco/signature-maker-vue/issues"},"dist":{"shasum":"7964e5af22f4a2ac71199f7812569a7b5afdcebb","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-vue/-/signature-maker-vue-1.0.1.tgz","fileCount":6,"integrity":"sha512-zJjWk4goKNbMaqAb1yqwSFqrj5paOVgj+ooLXOL5dnWHg0pc49F4OXhj4ajAkjNN/gxK59TWZvaLHAPmQ6nCUg==","signatures":[{"sig":"MEUCIQDlAx+s/rJK2rbSkoSPL+fipqgXvRPFZxt+YMEu/5BZAAIgAjwUBg6d+xNazj1+mLCaZrHJFJVX+L8hAVM7hq8xY0Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117564},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"2dfd3adced126df515b614c68e17f67f39a2ef2e","scripts":{"lint":"eslint src/**/*.ts --fix","build":"node esbuild.config.js && tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.co"},"repository":{"url":"git+https://github.com/docusealco/signature-maker-vue.git","type":"git"},"_npmVersion":"10.5.0","description":"Vue component for drawing signatures","directories":{},"_nodeVersion":"21.7.1","dependencies":{"@docuseal/signature-maker-js":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.6","eslint":"^9.10.0","esbuild":"^0.23.1","typescript":"^5.5.4","@typescript-eslint/parser":"^8.4.0","@typescript-eslint/eslint-plugin":"^8.4.0"},"_npmOperationalInternal":{"tmp":"tmp/signature-maker-vue_1.0.1_1726649438483_0.6651361909296465","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@docuseal/signature-maker-vue","version":"1.0.2","keywords":["vue-signature","signature","signature-drawing"],"author":{"name":"Alex Turchyn","email":"alex@docuseal.co"},"license":"MIT","_id":"@docuseal/signature-maker-vue@1.0.2","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.co"}],"homepage":"https://github.com/docusealco/signature-maker-vue#readme","bugs":{"url":"https://github.com/docusealco/signature-maker-vue/issues"},"dist":{"shasum":"c2bc1bb67f9d42b16566097991b060d7230e4010","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-vue/-/signature-maker-vue-1.0.2.tgz","fileCount":6,"integrity":"sha512-CjHt3kiAVNNCpvCO0Cazmd9qoM68g4VxbFSShHJQm4lh0fnY32X4nV/yTeLL/c7yvhBXeryvD1fu7RbbWDzFmQ==","signatures":[{"sig":"MEQCIHk4k21bbijuMFBvQ2ARA0ptXgl1q+yVmjO6o7i/dR51AiA/HRtZFWXRQTXqTeg2llees+Ja7nQDAlTZ+AZiNoNaHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117943},"main":"dist/index.cjs.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"728bb1a486421b868578896d80355c08ee005cff","scripts":{"lint":"eslint src/**/*.ts --fix","build":"node esbuild.config.js && tsc --emitDeclarationOnly --outDir dist"},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.co"},"repository":{"url":"git+https://github.com/docusealco/signature-maker-vue.git","type":"git"},"_npmVersion":"10.5.0","description":"Vue component for drawing signatures","directories":{},"_nodeVersion":"21.7.1","dependencies":{"@docuseal/signature-maker-js":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.6","eslint":"^9.10.0","esbuild":"^0.23.1","typescript":"^5.5.4","@typescript-eslint/parser":"^8.4.0","@typescript-eslint/eslint-plugin":"^8.4.0"},"_npmOperationalInternal":{"tmp":"tmp/signature-maker-vue_1.0.2_1727355344561_0.905824079977942","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@docuseal/signature-maker-vue","version":"1.0.3","description":"Vue component for drawing signatures","main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","author":{"name":"Alex Turchyn","email":"alex@docuseal.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/docusealco/signature-maker-vue.git"},"homepage":"https://github.com/docusealco/signature-maker-vue#readme","bugs":{"url":"https://github.com/docusealco/signature-maker-vue/issues"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0","esbuild":"^0.23.1","eslint":"^9.10.0","typescript":"^5.5.4","vue":"^3.5.6"},"keywords":["vue-signature","signature","signature-drawing"],"scripts":{"build":"node esbuild.config.js && tsc --emitDeclarationOnly --outDir dist","lint":"eslint src/**/*.ts --fix"},"dependencies":{"@docuseal/signature-maker-js":"^1.0.0"},"_id":"@docuseal/signature-maker-vue@1.0.3","gitHead":"00793ec29a12739747337d728c45447ae0d72758","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-u6kXMYMZsgobav2Y66IJRskIemL+ewmTf48ukzWDu9koaROzYRfF4r4scx3YKD9RA2oXqFjscN0VR4e8FSZUIA==","shasum":"897183ec881ff2da4aac3855539eb0b86e3cd305","tarball":"https://registry.npmjs.org/@docuseal/signature-maker-vue/-/signature-maker-vue-1.0.3.tgz","fileCount":6,"unpackedSize":117948,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE72nsHo402z+W2poAaH+W/IPnsD+bbh2cKXrvqlj18FAiEApoXi36oYOtwK8whWxR5naxNg7sJ7H93Flwck5Roehp0="}]},"_npmUser":{"name":"alex.turchyn","email":"alex@docuseal.com"},"directories":{},"maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/signature-maker-vue_1.0.3_1730570148374_0.8645330549212864"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-17T15:42:47.484Z","modified":"2024-11-02T17:55:48.749Z","1.0.0":"2024-09-17T15:42:47.771Z","1.0.1":"2024-09-18T08:50:38.615Z","1.0.2":"2024-09-26T12:55:44.754Z","1.0.3":"2024-11-02T17:55:48.549Z"},"bugs":{"url":"https://github.com/docusealco/signature-maker-vue/issues"},"author":{"name":"Alex Turchyn","email":"alex@docuseal.com"},"license":"MIT","homepage":"https://github.com/docusealco/signature-maker-vue#readme","keywords":["vue-signature","signature","signature-drawing"],"repository":{"type":"git","url":"git+https://github.com/docusealco/signature-maker-vue.git"},"description":"Vue component for drawing signatures","maintainers":[{"name":"petem","email":"pete@docuseal.co"},{"name":"alex.turchyn","email":"alex@docuseal.com"}],"readme":"<p align=\"center\">\n  <a href=\"https://www.docuseal.com/online-signature\" target=\"_blank\">\n    <img width=\"600\" height=\"356\" src='https://github.com/user-attachments/assets/305904a9-291f-416d-ac32-baaf22970450' alt='Signature Maker'>\n  </a>\n</p>\n\n# Signature Maker Vue\n\nSignature Maker is a Vue component that lets users draw or type their signature.\n\n#### Other implementations\n\n- [Vanilla JS](https://github.com/docusealco/signature-maker-js)\n- [React](https://github.com/docusealco/signature-maker-react)\n\n## Demo\n\nTry the live demo [here](https://www.docuseal.com/online-signature)\n\n## Documentation\n\nCheck out the full documentation [here](https://www.docuseal.com/docs/embedded/signature#vue).\n\n## Installation\n\n```bash\nnpm install @docuseal/signature-maker-vue\n```\n\nOR\n\n```bash\nyarn add @docuseal/signature-maker-vue\n```\n\n## Usage\n\nBasic Usage with standard styles and default signature saving behavior:\n\n```vue\n<template>\n  <SignatureMaker :download-on-save=\"true\" />\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue'\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker\n  }\n}\n</script>\n```\n\n---\n\nUsage with default styles but custom signature saving behavior, such as uploading the signature to a server:\n\n```vue\n<template>\n  <div class=\"app\">\n    <SignatureMaker @save=\"handleSave\" />\n  </div>\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue';\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker,\n  },\n  methods: {\n    handleSave(event) {\n      fetch('/save-signature', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ file: event.base64 }),\n      });\n    },\n  },\n};\n</script>\n```\n\n---\n\nUsage without a save signature button, embedded in another form. The signature will be stored in a form field named `signature`:\n\n```vue\n<template>\n  <div class=\"app\">\n    <form @submit.prevent=\"handleSubmit\">\n      <input v-model=\"name\" name=\"name\" type=\"text\" />\n      <SignatureMaker\n        v-model=\"signatureBase64\"\n        :with-submit=\"false\"\n      />\n      <button type=\"submit\">Submit</button>\n    </form>\n  </div>\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue';\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker,\n  },\n  data() {\n    return {\n      name: '',\n      signatureBase64: null,\n    };\n  },\n  methods: {\n    handleSubmit() {\n      fetch('/submit-form', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({\n          name: this.name,\n          signature: this.signatureBase64,\n        }),\n      });\n    },\n  },\n};\n</script>\n```\n\n---\n\nUsage without a save signature button and tracking each signature change:\n\n```vue\n<template>\n  <div class=\"app\">\n    <SignatureMaker\n      :with-submit=\"false\"\n      @change=\"handleChange\"\n    />\n  </div>\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue';\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker,\n  },\n  methods: {\n    handleChange(event) {\n      if (event.base64) {\n        fetch('/background-save-signature', {\n          method: 'POST',\n          headers: { 'Content-Type': 'application/json' },\n          body: JSON.stringify({ file: event.base64 }),\n        });\n      } else {\n        console.log('No signature to save');\n      }\n    },\n  },\n};\n</script>\n```\n---\n\nUsage with custom button labels and classes (DaisyUI):\n\n```vue\n<template>\n  <div class=\"app\">\n    <SignatureMaker\n      class=\"block my-8\"\n      save-button-text=\"Télécharger\"\n      undo-button-text=\"Annuler\"\n      clear-button-text=\"Clair\"\n      draw-type-button-text=\"Dessiner\"\n      text-type-button-text=\"Type\"\n      upload-type-button-text=\"Télécharger\"\n      text-input-placeholder=\"Tapez votre signature ici\"\n      type-buttons-container-class=\"flex gap-2 mb-4 justify-center\"\n      draw-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n      draw-type-button-active-class=\"bg-neutral text-white font-semibold\"\n      text-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n      text-type-button-active-class=\"bg-neutral text-white font-semibold\"\n      upload-type-button-class=\"flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold\"\n      upload-type-button-active-class=\"bg-neutral text-white font-semibold\"\n      text-input-class=\"input mb-4 input-bordered bg-white text-2xl w-full h-14 rounded-2xl\"\n      canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n      undo-button-class=\"btn btn-outline btn-sm font-medium\"\n      clear-button-class=\"btn btn-outline btn-sm font-medium\"\n      save-button-class=\"btn btn-neutral text-white text-base w-full\"\n    />\n  </div>\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue';\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker,\n  },\n};\n</script>\n```\n\n---\n\nUsage with customization of certain elements using CSS classes and styles:\n\n```vue\n<template>\n  <div class=\"app\">\n    <SignatureMaker\n      save-button-class=\"btn btn-neutral text-white text-base w-full\"\n      canvas-class=\"bg-white border border-base-300 rounded-2xl w-full\"\n      canvas-style=\"border: 2px solid #000;\"\n    />\n  </div>\n</template>\n\n<script>\nimport { SignatureMaker } from '@docuseal/signature-maker-vue';\n\nexport default {\n  name: 'App',\n  components: {\n    SignatureMaker,\n  },\n};\n</script>\n\n```\n\n## Customization\n\nSignature Maker can be customized with the following attributes:\n\n```\n:download-on-save\n:with-typed\n:with-drawn\n:with-upload\n:with-color-select\n:with-submit\n:save-button-text\n:control-buttons-container-class\n:control-buttons-container-style\n:save-button-class\n:save-button-style\n:save-button-disabled-class\n:save-button-disabled-style\n:undo-button-text\n:undo-button-class\n:undo-button-style\n:clear-button-text\n:clear-button-class\n:clear-button-style\n:text-input-placeholder\n:text-input-class\n:text-input-style\n:canvas-class\n:canvas-style\n:type-buttons-container-class\n:type-buttons-container-style\n:draw-type-button-text\n:draw-type-button-class\n:draw-type-button-style\n:draw-type-button-active-class\n:draw-type-button-active-style\n:text-type-button-text\n:text-type-button-class\n:text-type-button-style\n:text-type-button-active-class\n:text-type-button-active-style\n:upload-type-button-text\n:upload-type-button-class\n:upload-type-button-style\n:upload-type-button-active-class\n:upload-type-button-active-style\n:font-url\n@save\n@change\n````\n\nThe full documentation with detailed configuration and event descriptions can be found [here](https://www.docuseal.com/docs/embedded/signature#vue).\n\n# License\n\nMIT\n","readmeFilename":"README.md"}