├── .gitignore
├── .idea
    ├── .gitignore
    ├── modules.xml
    ├── vcs.xml
    └── vue3-signature.iml
├── 1.gif
├── README.md
├── dist
    ├── favicon.ico
    ├── vue3-signature.es.js
    └── vue3-signature.umd.js
├── index.html
├── lib
    ├── Vue3Signature.vue
    ├── index.ts
    └── utils.ts
├── package-lock.json
├── package.json
├── public
    └── favicon.ico
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   ├── HelloWorld.vue
    │   └── Vue3Signature.vue
    └── main.js
├── tea.yaml
├── tsconfig.json
├── vite.config.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/*
2 | .DS_Store
3 | dist-ssr
4 | /types
5 | *.local
6 | 


--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 | 


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/vue3-signature.iml" filepath="$PROJECT_DIR$/.idea/vue3-signature.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/vue3-signature.iml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <module type="WEB_MODULE" version="4">
 3 |   <component name="NewModuleRootManager">
 4 |     <content url="file://$MODULE_DIR$">
 5 |       <excludeFolder url="file://$MODULE_DIR$/temp" />
 6 |       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
 7 |       <excludeFolder url="file://$MODULE_DIR$/tmp" />
 8 |     </content>
 9 |     <orderEntry type="inheritedJdk" />
10 |     <orderEntry type="sourceFolder" forTests="false" />
11 |   </component>
12 | </module>


--------------------------------------------------------------------------------
/1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShayne/vue3-signature/96b54b8db9a9612ba93e5f0798e77d4fd15608a8/1.gif


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue3-signature
  2 | 
  3 | > A electronic signature component by Vue3.js
  4 | 
  5 | ![1.gif](./1.gif)
  6 | 
  7 | ## Reference and Thanks
  8 | [signature_pad](https://github.com/szimek/signature_pad)
  9 | 
 10 | 
 11 | ## API
 12 | ---
 13 | #### Props
 14 | > w,h need units,like 100px or 100%
 15 | 
 16 | | name          |     type      |           default         |       description             |
 17 | |:-------------:|:-------------:|:-------------------------:|   :-----------------:         |
 18 | | sigOption     | `Object`     | {penColor:"rgb(0, 0, 0)", backgroundColor:"rgb(255,255,255)"} |     penColor, backgroundColor  |
 19 | |        w      | `String`      |         "100%"            |parent container width  |
 20 | |        h      | `String`      |         "100%"            |parent container height |
 21 | |  clearOnResize  | `Boolean`     |          false          |Canvas is cleared on window resize|
 22 | |  waterMark  | `Object`     |          {}          |check Usage addWaterMark |
 23 | |  disabled  | `Boolean`     |          false          |disabled |
 24 | |  defaultUrl  | `String`     |          ""          |you want show image by default |
 25 | 
 26 | #### Methods
 27 | | name              |  params                                       | description  |
 28 | | :-------------:   |:-------------:                                |:-------------:|
 29 | | save              | 			()/("image/jpeg")/("image/svg+xml") | save image as PNG/JPEG/SVG |
 30 | | clear             |                                   			| clear canvas |
 31 | | isEmpty           |                                   			| Returns true if canvas is empty, otherwise returns false |
 32 | | undo             |                                   			| remove the last dot or line |
 33 | | addWaterMark      |           {} // check Usage addWaterMark    | addWaterMark
 34 | | fromDataURL      |          (url)    | Draws signature image from data URL.
 35 | 
 36 | 
 37 | ## Usage
 38 | ---
 39 | 
 40 | ``` 
 41 | npm install vue3-signature 
 42 | ```
 43 | 
 44 | main.js
 45 | ```vue3
 46 | import Vue3Signature from "vue3-signature"
 47 | 
 48 | createApp(App).use(Vue3Signature).mount("#app")
 49 | ```
 50 | 
 51 | A.vue
 52 | 
 53 | ```vue
 54 | <template>
 55 | 
 56 |   <Vue3Signature  ref="signature1" :sigOption="state.option" :w="'1280px'" :h="'400px'"
 57 |                  :disabled="state.disabled" class="example"></Vue3Signature>
 58 |   <button @click="save('image/jpeg')">Save</button>
 59 |   <button @click="clear">Clear</button>
 60 |   <button @click="undo">Undo</button>
 61 |   <button @click="addWaterMark">addWaterMark</button>
 62 |   <button @click="fromDataURL">fromDataURL</button>
 63 |   <button @click="handleDisabled">disabled</button>
 64 | 
 65 | </template>
 66 | 
 67 | <script setup>
 68 | import {reactive, ref} from 'vue'
 69 | 
 70 | const state = reactive({
 71 |   count: 0,
 72 |   option: {
 73 |     penColor: "rgb(0, 0, 0)",
 74 |     backgroundColor: "rgb(255,255,255)"
 75 |   },
 76 |   disabled: false
 77 | })
 78 | 
 79 | const signature1 = ref(null)
 80 | 
 81 | const save = (t) => {
 82 |   console.log(signature1.value.save(t))
 83 | }
 84 | 
 85 | const clear = () => {
 86 |   signature1.value.clear()
 87 | }
 88 | 
 89 | const undo = () => {
 90 |   signature1.value.undo();
 91 | }
 92 | 
 93 | const addWaterMark = () => {
 94 |   signature1.value.addWaterMark({
 95 |     text: "mark text",          // watermark text, > default ''
 96 |     font: "20px Arial",         // mark font, > default '20px sans-serif'
 97 |     style: 'all',               // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
 98 |     fillStyle: "red",           // fillcolor, > default '#333'
 99 |     strokeStyle: "blue",	       // strokecolor, > default '#333'
100 |     x: 100,                     // fill positionX, > default 20
101 |     y: 200,                     // fill positionY, > default 20
102 |     sx: 100,                    // stroke positionX, > default 40
103 |     sy: 200                     // stroke positionY, > default 40
104 |   });
105 | }
106 | 
107 | const fromDataURL = (url) => {
108 |   signature1.value.fromDataURL("https://avatars2.githubusercontent.com/u/17644818?s=460&v=4");
109 | }
110 | 
111 | const handleDisabled = () => {
112 |   state.disabled = !state.disabled
113 | }
114 | 
115 | </script>
116 | 
117 | <style scoped>
118 | .example{
119 |   margin: 0 auto;
120 | }
121 | </style>
122 | 
123 | ```
124 | ## For Vue2.x
125 | 
126 | [vue-signature](https://github.com/WangShayne/vue-signature)
127 | 
128 | ## License
129 | ---
130 | Released under the [MIT License](https://opensource.org/licenses/MIT).
131 | 


--------------------------------------------------------------------------------
/dist/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShayne/vue3-signature/96b54b8db9a9612ba93e5f0798e77d4fd15608a8/dist/favicon.ico


--------------------------------------------------------------------------------
/dist/vue3-signature.es.js:
--------------------------------------------------------------------------------
1 | var t=Object.defineProperty,e=Object.prototype.hasOwnProperty,i=Object.getOwnPropertySymbols,o=Object.prototype.propertyIsEnumerable,s=(e,i,o)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[i]=o,n=(t,n)=>{for(var h in n||(n={}))e.call(n,h)&&s(t,h,n[h]);if(i)for(var h of i(n))o.call(n,h)&&s(t,h,n[h]);return t};import{defineComponent as h,reactive as a,watch as r,onMounted as l,openBlock as c,createElementBlock as d,normalizeStyle as u,withModifiers as v,createElementVNode as m,unref as p}from"vue";
2 | /*!
3 |  * Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
4 |  * (c) 2020 Szymon Nowak | Released under the MIT license
5 |  */class g{constructor(t,e,i){this.x=t,this.y=e,this.time=i||Date.now()}distanceTo(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))}equals(t){return this.x===t.x&&this.y===t.y&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class _{constructor(t,e,i,o,s,n){this.startPoint=t,this.control2=e,this.control1=i,this.endPoint=o,this.startWidth=s,this.endWidth=n}static fromPoints(t,e){const i=this.calculateControlPoints(t[0],t[1],t[2]).c2,o=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new _(t[1],i,o,t[2],e.start,e.end)}static calculateControlPoints(t,e,i){const o=t.x-e.x,s=t.y-e.y,n=e.x-i.x,h=e.y-i.y,a=(t.x+e.x)/2,r=(t.y+e.y)/2,l=(e.x+i.x)/2,c=(e.y+i.y)/2,d=Math.sqrt(o*o+s*s),u=Math.sqrt(n*n+h*h),v=u/(d+u),m=l+(a-l)*v,p=c+(r-c)*v,_=e.x-m,y=e.y-p;return{c1:new g(a+_,r+y),c2:new g(l+_,c+y)}}length(){let t,e,i=0;for(let o=0;o<=10;o+=1){const s=o/10,n=this.point(s,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),h=this.point(s,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(o>0){const o=n-t,s=h-e;i+=Math.sqrt(o*o+s*s)}t=n,e=h}return i}point(t,e,i,o,s){return e*(1-t)*(1-t)*(1-t)+3*i*(1-t)*(1-t)*t+3*o*(1-t)*t*t+s*t*t*t}}class y{constructor(t,e={}){this.canvas=t,this.options=e,this._handleMouseDown=t=>{1===t.which&&(this._mouseButtonDown=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._mouseButtonDown&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.which&&this._mouseButtonDown&&(this._mouseButtonDown=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._strokeMoveUpdate=this.throttle?function(t,e=250){let i,o,s,n=0,h=null;const a=()=>{n=Date.now(),h=null,i=t.apply(o,s),h||(o=null,s=[])};return function(...r){const l=Date.now(),c=e-(l-n);return o=this,s=r,c<=0||c>e?(h&&(clearTimeout(h),h=null),n=l,i=t.apply(o,s),h||(o=null,s=[])):h||(h=window.setTimeout(a,c)),i}}(y.prototype._strokeUpdate,this.throttle):y.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0}fromDataURL(t,e={},i){const o=new Image,s=e.ratio||window.devicePixelRatio||1,n=e.width||this.canvas.width/s,h=e.height||this.canvas.height/s;this._reset(),o.onload=()=>{this._ctx.drawImage(o,0,0,n,h),i&&i()},o.onerror=t=>{i&&i(t)},o.src=t,this._isEmpty=!1}toDataURL(t="image/png",e){switch(t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(t){this.clear(),this._fromData(t,(({color:t,curve:e})=>this._drawCurve({color:t,curve:e})),(({color:t,point:e})=>this._drawDot({color:t,point:e}))),this._data=t}toData(){return this._data}_strokeBegin(t){const e={color:this.penColor,points:[]};"function"==typeof this.onBegin&&this.onBegin(t),this._data.push(e),this._reset(),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);const e=t.clientX,i=t.clientY,o=this._createPoint(e,i),s=this._data[this._data.length-1],n=s.points,h=n.length>0&&n[n.length-1],a=!!h&&o.distanceTo(h)<=this.minDistance,r=s.color;if(!h||!h||!a){const t=this._addPoint(o);h?t&&this._drawCurve({color:r,curve:t}):this._drawDot({color:r,point:o}),n.push({time:o.time,x:o.x,y:o.y})}}_strokeEnd(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)}_handlePointerEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)}_handleMouseEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor}_createPoint(t,e){const i=this.canvas.getBoundingClientRect();return new g(t-i.left,e-i.top,(new Date).getTime())}_addPoint(t){const{_lastPoints:e}=this;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);const t=this._calculateCurveWidths(e[1],e[2]),i=_.fromPoints(e,t);return e.shift(),i}return null}_calculateCurveWidths(t,e){const i=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,o=this._strokeWidth(i),s={end:o,start:this._lastWidth};return this._lastVelocity=i,this._lastWidth=o,s}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,i){const o=this._ctx;o.moveTo(t,e),o.arc(t,e,i,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve({color:t,curve:e}){const i=this._ctx,o=e.endWidth-e.startWidth,s=2*Math.floor(e.length());i.beginPath(),i.fillStyle=t;for(let n=0;n<s;n+=1){const t=n/s,i=t*t,h=i*t,a=1-t,r=a*a,l=r*a;let c=l*e.startPoint.x;c+=3*r*t*e.control1.x,c+=3*a*i*e.control2.x,c+=h*e.endPoint.x;let d=l*e.startPoint.y;d+=3*r*t*e.control1.y,d+=3*a*i*e.control2.y,d+=h*e.endPoint.y;const u=Math.min(e.startWidth+h*o,this.maxWidth);this._drawCurveSegment(c,d,u)}i.closePath(),i.fill()}_drawDot({color:t,point:e}){const i=this._ctx,o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.beginPath(),this._drawCurveSegment(e.x,e.y,o),i.closePath(),i.fillStyle=t,i.fill()}_fromData(t,e,i){for(const o of t){const{color:t,points:s}=o;if(s.length>1)for(let i=0;i<s.length;i+=1){const o=s[i],n=new g(o.x,o.y,o.time);this.penColor=t,0===i&&this._reset();const h=this._addPoint(n);h&&e({color:t,curve:h})}else this._reset(),i({color:t,point:s[0]})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),i=this.canvas.width/e,o=this.canvas.height/e,s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width",this.canvas.width.toString()),s.setAttribute("height",this.canvas.height.toString()),this._fromData(t,(({color:t,curve:e})=>{const i=document.createElement("path");if(!(isNaN(e.control1.x)||isNaN(e.control1.y)||isNaN(e.control2.x)||isNaN(e.control2.y))){const o=`M ${e.startPoint.x.toFixed(3)},${e.startPoint.y.toFixed(3)} C ${e.control1.x.toFixed(3)},${e.control1.y.toFixed(3)} ${e.control2.x.toFixed(3)},${e.control2.y.toFixed(3)} ${e.endPoint.x.toFixed(3)},${e.endPoint.y.toFixed(3)}`;i.setAttribute("d",o),i.setAttribute("stroke-width",(2.25*e.endWidth).toFixed(3)),i.setAttribute("stroke",t),i.setAttribute("fill","none"),i.setAttribute("stroke-linecap","round"),s.appendChild(i)}}),(({color:t,point:e})=>{const i=document.createElement("circle"),o="function"==typeof this.dotSize?this.dotSize():this.dotSize;i.setAttribute("r",o.toString()),i.setAttribute("cx",e.x.toString()),i.setAttribute("cy",e.y.toString()),i.setAttribute("fill",t),s.appendChild(i)}));const n=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${i} ${o}" width="${i}" height="${o}">`;let h=s.innerHTML;if(void 0===h){const t=document.createElement("dummy"),e=s.childNodes;t.innerHTML="";for(let i=0;i<e.length;i+=1)t.appendChild(e[i].cloneNode(!0));h=t.innerHTML}return"data:image/svg+xml;base64,"+btoa(n+h+"</svg>")}}const x=["id","data-uid","disabled"];var w=h(n(n({},{name:"Vue3Signature"}),{props:{sigOption:{type:Object,default:()=>({backgroundColor:"rgb(255,255,255)",penColor:"rgb(0, 0, 0)"})},w:{type:String,default:"100%"},h:{type:String,default:"100%"},clearOnResize:{type:Boolean,default:!1},waterMark:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},defaultUrl:{type:String,default:""}},emits:["begin","end"],setup(t,{expose:e,emit:i}){const o=t,s={width:"100%",height:"100%"};let h=a({sig:void 0,option:n({backgroundColor:"rgb(255,255,255)",penColor:"rgb(0, 0, 0)"},o.sigOption),uid:"canvas"+Math.random()});r((()=>o.disabled),(t=>{t?h.sig.off():h.sig.on()}));const g=()=>{h.sig.clear()},_=t=>t?h.sig.toDataURL(t):h.sig.toDataURL(),w=t=>{h.sig.fromDataURL(t)},f=()=>h.sig.isEmpty(),E=t=>{if("[object Object]"!=Object.prototype.toString.call(t))throw new Error("Expected Object, got "+typeof t+".");{let e=document.getElementById(h.uid),i={text:t.text||"",x:t.x||20,y:t.y||20,sx:t.sx||40,sy:t.sy||40},o=e.getContext("2d");o.font=t.font||"20px sans-serif",o.fillStyle=t.fillStyle||"#333",o.strokeStyle=t.strokeStyle||"#333","all"==t.style?(o.fillText(i.text,i.x,i.y),o.strokeText(i.text,i.sx,i.sy)):"stroke"==t.style?o.strokeText(i.text,i.sx,i.sy):o.fillText(i.text,i.x,i.y),h.sig._isEmpty=!1}};return l((()=>{(()=>{let t=document.getElementById(h.uid);function e(t){let e;f()||(e=_());let i=Math.max(window.devicePixelRatio||1,1);const s=RegExp(/px/);t.width=s.test(o.w)?Number(o.w.replace(/px/g,""))*i:t.offsetWidth*i,t.height=s.test(o.h)?Number(o.h.replace(/px/g,""))*i:t.offsetHeight*i,t.getContext("2d").scale(i,i),g(),!o.clearOnResize&&void 0!==e&&w(e),Object.keys(o.waterMark).length&&E(o.waterMark)}h.sig=new y(t,h.option),h.sig.onBegin=t=>i("begin"),h.sig.onEnd=t=>i("end"),window.addEventListener("resize",(()=>e(t))),e(t),""!==o.defaultUrl&&w(o.defaultUrl),o.disabled?h.sig.off():h.sig.on()})()})),e({save:_,clear:g,isEmpty:f,undo:()=>{let t=h.sig.toData();t&&(t.pop(),h.sig.fromData(t))},addWaterMark:E,fromDataURL:w}),(e,i)=>(c(),d("div",{style:u({width:t.w,height:t.h}),onTouchmove:i[0]||(i[0]=v((()=>{}),["prevent"]))},[m("canvas",{id:p(h).uid,"data-uid":p(h).uid,disabled:p(h).disabled,style:s},null,8,x)],36))}}));var f,E=((f=w).install=t=>{t.component(f.name,f)},f);export default E;
6 | 


--------------------------------------------------------------------------------
/dist/vue3-signature.umd.js:
--------------------------------------------------------------------------------
1 | var __defProp=Object.defineProperty,__hasOwnProp=Object.prototype.hasOwnProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(t,e,o)=>e in t?__defProp(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,__assign=(t,e)=>{for(var o in e||(e={}))__hasOwnProp.call(e,o)&&__defNormalProp(t,o,e[o]);if(__getOwnPropSymbols)for(var o of __getOwnPropSymbols(e))__propIsEnum.call(e,o)&&__defNormalProp(t,o,e[o]);return t};!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(t="undefined"!=typeof globalThis?globalThis:t||self)["vue3-signature"]=e(t.vue)}(this,(function(t){"use strict";
2 | /*!
3 |    * Signature Pad v3.0.0-beta.4 | https://github.com/szimek/signature_pad
4 |    * (c) 2020 Szymon Nowak | Released under the MIT license
5 |    */class e{constructor(t,e,o){this.x=t,this.y=e,this.time=o||Date.now()}distanceTo(t){return Math.sqrt(Math.pow(this.x-t.x,2)+Math.pow(this.y-t.y,2))}equals(t){return this.x===t.x&&this.y===t.y&&this.time===t.time}velocityFrom(t){return this.time!==t.time?this.distanceTo(t)/(this.time-t.time):0}}class o{constructor(t,e,o,i,n,s){this.startPoint=t,this.control2=e,this.control1=o,this.endPoint=i,this.startWidth=n,this.endWidth=s}static fromPoints(t,e){const i=this.calculateControlPoints(t[0],t[1],t[2]).c2,n=this.calculateControlPoints(t[1],t[2],t[3]).c1;return new o(t[1],i,n,t[2],e.start,e.end)}static calculateControlPoints(t,o,i){const n=t.x-o.x,s=t.y-o.y,r=o.x-i.x,a=o.y-i.y,h=(t.x+o.x)/2,l=(t.y+o.y)/2,c=(o.x+i.x)/2,d=(o.y+i.y)/2,u=Math.sqrt(n*n+s*s),p=Math.sqrt(r*r+a*a),_=p/(u+p),m=c+(h-c)*_,v=d+(l-d)*_,g=o.x-m,f=o.y-v;return{c1:new e(h+g,l+f),c2:new e(c+g,d+f)}}length(){let t,e,o=0;for(let i=0;i<=10;i+=1){const n=i/10,s=this.point(n,this.startPoint.x,this.control1.x,this.control2.x,this.endPoint.x),r=this.point(n,this.startPoint.y,this.control1.y,this.control2.y,this.endPoint.y);if(i>0){const i=s-t,n=r-e;o+=Math.sqrt(i*i+n*n)}t=s,e=r}return o}point(t,e,o,i,n){return e*(1-t)*(1-t)*(1-t)+3*o*(1-t)*(1-t)*t+3*i*(1-t)*t*t+n*t*t*t}}class i{constructor(t,e={}){this.canvas=t,this.options=e,this._handleMouseDown=t=>{1===t.which&&(this._mouseButtonDown=!0,this._strokeBegin(t))},this._handleMouseMove=t=>{this._mouseButtonDown&&this._strokeMoveUpdate(t)},this._handleMouseUp=t=>{1===t.which&&this._mouseButtonDown&&(this._mouseButtonDown=!1,this._strokeEnd(t))},this._handleTouchStart=t=>{if(t.preventDefault(),1===t.targetTouches.length){const e=t.changedTouches[0];this._strokeBegin(e)}},this._handleTouchMove=t=>{t.preventDefault();const e=t.targetTouches[0];this._strokeMoveUpdate(e)},this._handleTouchEnd=t=>{if(t.target===this.canvas){t.preventDefault();const e=t.changedTouches[0];this._strokeEnd(e)}},this.velocityFilterWeight=e.velocityFilterWeight||.7,this.minWidth=e.minWidth||.5,this.maxWidth=e.maxWidth||2.5,this.throttle="throttle"in e?e.throttle:16,this.minDistance="minDistance"in e?e.minDistance:5,this.dotSize=e.dotSize||function(){return(this.minWidth+this.maxWidth)/2},this.penColor=e.penColor||"black",this.backgroundColor=e.backgroundColor||"rgba(0,0,0,0)",this.onBegin=e.onBegin,this.onEnd=e.onEnd,this._strokeMoveUpdate=this.throttle?function(t,e=250){let o,i,n,s=0,r=null;const a=()=>{s=Date.now(),r=null,o=t.apply(i,n),r||(i=null,n=[])};return function(...h){const l=Date.now(),c=e-(l-s);return i=this,n=h,c<=0||c>e?(r&&(clearTimeout(r),r=null),s=l,o=t.apply(i,n),r||(i=null,n=[])):r||(r=window.setTimeout(a,c)),o}}(i.prototype._strokeUpdate,this.throttle):i.prototype._strokeUpdate,this._ctx=t.getContext("2d"),this.clear(),this.on()}clear(){const{_ctx:t,canvas:e}=this;t.fillStyle=this.backgroundColor,t.clearRect(0,0,e.width,e.height),t.fillRect(0,0,e.width,e.height),this._data=[],this._reset(),this._isEmpty=!0}fromDataURL(t,e={},o){const i=new Image,n=e.ratio||window.devicePixelRatio||1,s=e.width||this.canvas.width/n,r=e.height||this.canvas.height/n;this._reset(),i.onload=()=>{this._ctx.drawImage(i,0,0,s,r),o&&o()},i.onerror=t=>{o&&o(t)},i.src=t,this._isEmpty=!1}toDataURL(t="image/png",e){switch(t){case"image/svg+xml":return this._toSVG();default:return this.canvas.toDataURL(t,e)}}on(){this.canvas.style.touchAction="none",this.canvas.style.msTouchAction="none",window.PointerEvent?this._handlePointerEvents():(this._handleMouseEvents(),"ontouchstart"in window&&this._handleTouchEvents())}off(){this.canvas.style.touchAction="auto",this.canvas.style.msTouchAction="auto",this.canvas.removeEventListener("pointerdown",this._handleMouseDown),this.canvas.removeEventListener("pointermove",this._handleMouseMove),document.removeEventListener("pointerup",this._handleMouseUp),this.canvas.removeEventListener("mousedown",this._handleMouseDown),this.canvas.removeEventListener("mousemove",this._handleMouseMove),document.removeEventListener("mouseup",this._handleMouseUp),this.canvas.removeEventListener("touchstart",this._handleTouchStart),this.canvas.removeEventListener("touchmove",this._handleTouchMove),this.canvas.removeEventListener("touchend",this._handleTouchEnd)}isEmpty(){return this._isEmpty}fromData(t){this.clear(),this._fromData(t,(({color:t,curve:e})=>this._drawCurve({color:t,curve:e})),(({color:t,point:e})=>this._drawDot({color:t,point:e}))),this._data=t}toData(){return this._data}_strokeBegin(t){const e={color:this.penColor,points:[]};"function"==typeof this.onBegin&&this.onBegin(t),this._data.push(e),this._reset(),this._strokeUpdate(t)}_strokeUpdate(t){if(0===this._data.length)return void this._strokeBegin(t);const e=t.clientX,o=t.clientY,i=this._createPoint(e,o),n=this._data[this._data.length-1],s=n.points,r=s.length>0&&s[s.length-1],a=!!r&&i.distanceTo(r)<=this.minDistance,h=n.color;if(!r||!r||!a){const t=this._addPoint(i);r?t&&this._drawCurve({color:h,curve:t}):this._drawDot({color:h,point:i}),s.push({time:i.time,x:i.x,y:i.y})}}_strokeEnd(t){this._strokeUpdate(t),"function"==typeof this.onEnd&&this.onEnd(t)}_handlePointerEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("pointerdown",this._handleMouseDown),this.canvas.addEventListener("pointermove",this._handleMouseMove),document.addEventListener("pointerup",this._handleMouseUp)}_handleMouseEvents(){this._mouseButtonDown=!1,this.canvas.addEventListener("mousedown",this._handleMouseDown),this.canvas.addEventListener("mousemove",this._handleMouseMove),document.addEventListener("mouseup",this._handleMouseUp)}_handleTouchEvents(){this.canvas.addEventListener("touchstart",this._handleTouchStart),this.canvas.addEventListener("touchmove",this._handleTouchMove),this.canvas.addEventListener("touchend",this._handleTouchEnd)}_reset(){this._lastPoints=[],this._lastVelocity=0,this._lastWidth=(this.minWidth+this.maxWidth)/2,this._ctx.fillStyle=this.penColor}_createPoint(t,o){const i=this.canvas.getBoundingClientRect();return new e(t-i.left,o-i.top,(new Date).getTime())}_addPoint(t){const{_lastPoints:e}=this;if(e.push(t),e.length>2){3===e.length&&e.unshift(e[0]);const t=this._calculateCurveWidths(e[1],e[2]),i=o.fromPoints(e,t);return e.shift(),i}return null}_calculateCurveWidths(t,e){const o=this.velocityFilterWeight*e.velocityFrom(t)+(1-this.velocityFilterWeight)*this._lastVelocity,i=this._strokeWidth(o),n={end:i,start:this._lastWidth};return this._lastVelocity=o,this._lastWidth=i,n}_strokeWidth(t){return Math.max(this.maxWidth/(t+1),this.minWidth)}_drawCurveSegment(t,e,o){const i=this._ctx;i.moveTo(t,e),i.arc(t,e,o,0,2*Math.PI,!1),this._isEmpty=!1}_drawCurve({color:t,curve:e}){const o=this._ctx,i=e.endWidth-e.startWidth,n=2*Math.floor(e.length());o.beginPath(),o.fillStyle=t;for(let s=0;s<n;s+=1){const t=s/n,o=t*t,r=o*t,a=1-t,h=a*a,l=h*a;let c=l*e.startPoint.x;c+=3*h*t*e.control1.x,c+=3*a*o*e.control2.x,c+=r*e.endPoint.x;let d=l*e.startPoint.y;d+=3*h*t*e.control1.y,d+=3*a*o*e.control2.y,d+=r*e.endPoint.y;const u=Math.min(e.startWidth+r*i,this.maxWidth);this._drawCurveSegment(c,d,u)}o.closePath(),o.fill()}_drawDot({color:t,point:e}){const o=this._ctx,i="function"==typeof this.dotSize?this.dotSize():this.dotSize;o.beginPath(),this._drawCurveSegment(e.x,e.y,i),o.closePath(),o.fillStyle=t,o.fill()}_fromData(t,o,i){for(const n of t){const{color:t,points:s}=n;if(s.length>1)for(let i=0;i<s.length;i+=1){const n=s[i],r=new e(n.x,n.y,n.time);this.penColor=t,0===i&&this._reset();const a=this._addPoint(r);a&&o({color:t,curve:a})}else this._reset(),i({color:t,point:s[0]})}}_toSVG(){const t=this._data,e=Math.max(window.devicePixelRatio||1,1),o=this.canvas.width/e,i=this.canvas.height/e,n=document.createElementNS("http://www.w3.org/2000/svg","svg");n.setAttribute("width",this.canvas.width.toString()),n.setAttribute("height",this.canvas.height.toString()),this._fromData(t,(({color:t,curve:e})=>{const o=document.createElement("path");if(!(isNaN(e.control1.x)||isNaN(e.control1.y)||isNaN(e.control2.x)||isNaN(e.control2.y))){const i=`M ${e.startPoint.x.toFixed(3)},${e.startPoint.y.toFixed(3)} C ${e.control1.x.toFixed(3)},${e.control1.y.toFixed(3)} ${e.control2.x.toFixed(3)},${e.control2.y.toFixed(3)} ${e.endPoint.x.toFixed(3)},${e.endPoint.y.toFixed(3)}`;o.setAttribute("d",i),o.setAttribute("stroke-width",(2.25*e.endWidth).toFixed(3)),o.setAttribute("stroke",t),o.setAttribute("fill","none"),o.setAttribute("stroke-linecap","round"),n.appendChild(o)}}),(({color:t,point:e})=>{const o=document.createElement("circle"),i="function"==typeof this.dotSize?this.dotSize():this.dotSize;o.setAttribute("r",i.toString()),o.setAttribute("cx",e.x.toString()),o.setAttribute("cy",e.y.toString()),o.setAttribute("fill",t),n.appendChild(o)}));const s=`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 ${o} ${i}" width="${o}" height="${i}">`;let r=n.innerHTML;if(void 0===r){const t=document.createElement("dummy"),e=n.childNodes;t.innerHTML="";for(let o=0;o<e.length;o+=1)t.appendChild(e[o].cloneNode(!0));r=t.innerHTML}return"data:image/svg+xml;base64,"+btoa(s+r+"</svg>")}}const n=["id","data-uid","disabled"];var s,r=t.defineComponent(__assign(__assign({},{name:"Vue3Signature"}),{props:{sigOption:{type:Object,default:()=>({backgroundColor:"rgb(255,255,255)",penColor:"rgb(0, 0, 0)"})},w:{type:String,default:"100%"},h:{type:String,default:"100%"},clearOnResize:{type:Boolean,default:!1},waterMark:{type:Object,default:()=>({})},disabled:{type:Boolean,default:!1},defaultUrl:{type:String,default:""}},emits:["begin","end"],setup(e,{expose:o,emit:s}){const r=e,a={width:"100%",height:"100%"};let h=t.reactive({sig:void 0,option:__assign({backgroundColor:"rgb(255,255,255)",penColor:"rgb(0, 0, 0)"},r.sigOption),uid:"canvas"+Math.random()});t.watch((()=>r.disabled),(t=>{t?h.sig.off():h.sig.on()}));const l=()=>{h.sig.clear()},c=t=>t?h.sig.toDataURL(t):h.sig.toDataURL(),d=t=>{h.sig.fromDataURL(t)},u=()=>h.sig.isEmpty(),p=t=>{if("[object Object]"!=Object.prototype.toString.call(t))throw new Error("Expected Object, got "+typeof t+".");{let e=document.getElementById(h.uid),o={text:t.text||"",x:t.x||20,y:t.y||20,sx:t.sx||40,sy:t.sy||40},i=e.getContext("2d");i.font=t.font||"20px sans-serif",i.fillStyle=t.fillStyle||"#333",i.strokeStyle=t.strokeStyle||"#333","all"==t.style?(i.fillText(o.text,o.x,o.y),i.strokeText(o.text,o.sx,o.sy)):"stroke"==t.style?i.strokeText(o.text,o.sx,o.sy):i.fillText(o.text,o.x,o.y),h.sig._isEmpty=!1}};return t.onMounted((()=>{(()=>{let t=document.getElementById(h.uid);function e(t){let e;u()||(e=c());let o=Math.max(window.devicePixelRatio||1,1);const i=RegExp(/px/);t.width=i.test(r.w)?Number(r.w.replace(/px/g,""))*o:t.offsetWidth*o,t.height=i.test(r.h)?Number(r.h.replace(/px/g,""))*o:t.offsetHeight*o,t.getContext("2d").scale(o,o),l(),!r.clearOnResize&&void 0!==e&&d(e),Object.keys(r.waterMark).length&&p(r.waterMark)}h.sig=new i(t,h.option),h.sig.onBegin=t=>s("begin"),h.sig.onEnd=t=>s("end"),window.addEventListener("resize",(()=>e(t))),e(t),""!==r.defaultUrl&&d(r.defaultUrl),r.disabled?h.sig.off():h.sig.on()})()})),o({save:c,clear:l,isEmpty:u,undo:()=>{let t=h.sig.toData();t&&(t.pop(),h.sig.fromData(t))},addWaterMark:p,fromDataURL:d}),(o,i)=>(t.openBlock(),t.createElementBlock("div",{style:t.normalizeStyle({width:e.w,height:e.h}),onTouchmove:i[0]||(i[0]=t.withModifiers((()=>{}),["prevent"]))},[t.createElementVNode("canvas",{id:t.unref(h).uid,"data-uid":t.unref(h).uid,disabled:t.unref(h).disabled,style:a},null,8,n)],36))}}));return(s=r).install=t=>{t.component(s.name,s)},s}));
6 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Vite App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/lib/Vue3Signature.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :style="{ width: w, height: h }" @touchmove.prevent>
  3 |     <canvas
  4 |       :id="state.uid"
  5 |       :data-uid="state.uid"
  6 |       :disabled="state.disabled"
  7 |       :style="canvasStyle"
  8 |     ></canvas>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script setup lang="ts">
 13 | import SignaturePad from "signature_pad";
 14 | import { onMounted, reactive, watch } from "vue";
 15 | 
 16 | import type { Options as SigOptions } from "signature_pad";
 17 | import type { PropType, StyleValue } from "vue";
 18 | import type { Watermark } from "./utils";
 19 | 
 20 | const canvasStyle: StyleValue = {
 21 |   width: "100%",
 22 |   height: "100%",
 23 | };
 24 | 
 25 | 
 26 | const emit = defineEmits(['begin', 'end'])
 27 | 
 28 | const props = defineProps({
 29 |   sigOption: {
 30 |     type: Object as PropType<SigOptions>,
 31 |     default: () => {
 32 |       return {
 33 |         backgroundColor: "rgb(255,255,255)",
 34 |         penColor: "rgb(0, 0, 0)",
 35 |       };
 36 |     },
 37 |   },
 38 |   w: {
 39 |     type: String,
 40 |     default: "100%",
 41 |   },
 42 |   h: {
 43 |     type: String,
 44 |     default: "100%",
 45 |   },
 46 |   clearOnResize: {
 47 |     type: Boolean,
 48 |     default: false,
 49 |   },
 50 |   waterMark: {
 51 |     type: Object as PropType<Watermark>,
 52 |     default: () => {
 53 |       return {};
 54 |     },
 55 |   },
 56 |   disabled: {
 57 |     type: Boolean,
 58 |     default: false,
 59 |   },
 60 |   defaultUrl: {
 61 |     type: String,
 62 |     default: "",
 63 |   },
 64 | });
 65 | 
 66 | let state = reactive<{
 67 |   sig?: SignaturePad;
 68 |   option: SigOptions;
 69 |   uid: string;
 70 |   disabled?: boolean;
 71 | }>({
 72 |   sig: undefined,
 73 |   option: {
 74 |     backgroundColor: "rgb(255,255,255)",
 75 |     penColor: "rgb(0, 0, 0)",
 76 |     ...props.sigOption,
 77 |   },
 78 |   uid: "canvas" + Math.random(),
 79 | });
 80 | 
 81 | watch(
 82 |   () => props.disabled,
 83 |   (val) => {
 84 |     if (val) {
 85 |       state.sig.off();
 86 |     } else {
 87 |       state.sig.on();
 88 |     }
 89 |   }
 90 | );
 91 | 
 92 | const draw = () => {
 93 |   let canvas = document.getElementById(state.uid) as HTMLCanvasElement;
 94 |   state.sig = new SignaturePad(canvas, state.option);
 95 |   state.sig.onBegin = (evt) => emit('begin');
 96 |   state.sig.onEnd = (evt) => emit('end');
 97 | 
 98 |   function resizeCanvas(c: HTMLCanvasElement) {
 99 |     let url;
100 |     if (!isEmpty()) {
101 |       url = save();
102 |     }
103 |     let ratio = Math.max(window.devicePixelRatio || 1, 1);
104 |     const reg = RegExp(/px/);
105 |     c.width = reg.test(props.w)
106 |       ? Number(props.w.replace(/px/g, "")) * ratio
107 |       : c.offsetWidth * ratio;
108 |     c.height = reg.test(props.h)
109 |       ? Number(props.h.replace(/px/g, "")) * ratio
110 |       : c.offsetHeight * ratio;
111 |     c.getContext("2d").scale(ratio, ratio);
112 |     clear();
113 |     !props.clearOnResize && url !== undefined && fromDataURL(url);
114 |     Object.keys(props.waterMark).length && addWaterMark(props.waterMark);
115 |   }
116 | 
117 |   window.addEventListener("resize", () => resizeCanvas(canvas));
118 |   resizeCanvas(canvas);
119 |   if (props.defaultUrl !== "") {
120 |     fromDataURL(props.defaultUrl);
121 |   }
122 |   if (props.disabled) {
123 |     state.sig.off();
124 |   } else {
125 |     state.sig.on();
126 |   }
127 | };
128 | 
129 | const clear = () => {
130 |   state.sig.clear();
131 | };
132 | const save = (format?: "image/jpeg" | "image/svg+xml") => {
133 |   return format ? state.sig.toDataURL(format) : state.sig.toDataURL();
134 |   // signaturePad.toDataURL(); // save image as PNG
135 |   // signaturePad.toDataURL("image/jpeg"); // save image as JPEG
136 |   // signaturePad.toDataURL("image/svg+xml"); // save image as SVG
137 | };
138 | const fromDataURL = (url: string) => {
139 |   state.sig.fromDataURL(url);
140 | };
141 | const isEmpty = () => {
142 |   return state.sig.isEmpty();
143 | };
144 | const undo = () => {
145 |   let data = state.sig.toData();
146 |   if (data) {
147 |     data.pop();
148 |     state.sig.fromData(data);
149 |   }
150 | };
151 | const addWaterMark = (data: Watermark) => {
152 |   if (!(Object.prototype.toString.call(data) == "[object Object]")) {
153 |     throw new Error("Expected Object, got " + typeof data + ".");
154 |   } else {
155 |     let vCanvas = document.getElementById(state.uid) as HTMLCanvasElement;
156 |     let textData = {
157 |       text: data.text || "",
158 |       x: data.x || 20,
159 |       y: data.y || 20,
160 |       sx: data.sx || 40,
161 |       sy: data.sy || 40,
162 |     };
163 | 
164 |     let ctx = vCanvas.getContext("2d");
165 |     ctx.font = data.font || "20px sans-serif";
166 |     ctx.fillStyle = data.fillStyle || "#333";
167 |     ctx.strokeStyle = data.strokeStyle || "#333";
168 |     if (data.style == "all") {
169 |       ctx.fillText(textData.text, textData.x, textData.y);
170 |       ctx.strokeText(textData.text, textData.sx, textData.sy);
171 |     } else if (data.style == "stroke") {
172 |       ctx.strokeText(textData.text, textData.sx, textData.sy);
173 |     } else {
174 |       ctx.fillText(textData.text, textData.x, textData.y);
175 |     }
176 |     // `_isEmpty` is a private property of SignaturePad, so we have to ignore here.
177 |     (state.sig as any)._isEmpty = false;
178 |   }
179 | };
180 | 
181 | onMounted(() => {
182 |   draw();
183 | });
184 | 
185 | defineExpose({
186 |   save,
187 |   clear,
188 |   isEmpty,
189 |   undo,
190 |   addWaterMark,
191 |   fromDataURL,
192 | });
193 | </script>
194 | 
195 | 
196 | <script lang="ts">
197 | export default {
198 |   name: 'Vue3Signature'
199 | }
200 | </script>
201 | <style></style>
202 | 


--------------------------------------------------------------------------------
/lib/index.ts:
--------------------------------------------------------------------------------
1 | import Vue3Signature from "./Vue3Signature.vue";
2 | import { withInstall } from './utils'
3 | 
4 | export default withInstall(Vue3Signature);
5 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | 
 2 | import type { App, Plugin, Component } from "vue";
 3 | export interface Watermark {
 4 |   text?: string;
 5 |   font?: string;
 6 |   x?: number;
 7 |   y?: number;
 8 |   sx?: number;
 9 |   sy?: number;
10 |   fillStyle?: string
11 |   strokeStyle?: string
12 |   style?: "all" | "stroke" | "fill"
13 | }
14 | export type SFCWithInstall<T> = T & Plugin
15 | 
16 | export function withInstall<T>(c: T) {
17 |     (c as SFCWithInstall<T>).install = (app: App) => {
18 |         app.component((c as Component).name, c);
19 |     }
20 |     return c as SFCWithInstall<T>
21 | }
22 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
   1 | {
   2 |   "name": "vue3-signature",
   3 |   "version": "0.2.2",
   4 |   "lockfileVersion": 2,
   5 |   "requires": true,
   6 |   "packages": {
   7 |     "": {
   8 |       "name": "vue3-signature",
   9 |       "version": "0.2.2",
  10 |       "license": "MIT",
  11 |       "dependencies": {
  12 |         "default-passive-events": "^2.0.0",
  13 |         "signature_pad": "^3.0.0-beta.4",
  14 |         "vue": "^3.2.37"
  15 |       },
  16 |       "devDependencies": {
  17 |         "@vitejs/plugin-vue": "^1.1.5",
  18 |         "@vue/compiler-sfc": "^3.0.5",
  19 |         "typescript": "^4.8.2",
  20 |         "vite": "^2.1.0",
  21 |         "vue-tsc": "^0.40.8"
  22 |       }
  23 |     },
  24 |     "node_modules/@babel/parser": {
  25 |       "version": "7.18.8",
  26 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.8.tgz",
  27 |       "integrity": "sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==",
  28 |       "bin": {
  29 |         "parser": "bin/babel-parser.js"
  30 |       },
  31 |       "engines": {
  32 |         "node": ">=6.0.0"
  33 |       }
  34 |     },
  35 |     "node_modules/@vitejs/plugin-vue": {
  36 |       "version": "1.1.5",
  37 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz",
  38 |       "integrity": "sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==",
  39 |       "dev": true,
  40 |       "engines": {
  41 |         "node": ">=12.0.0"
  42 |       },
  43 |       "peerDependencies": {
  44 |         "@vue/compiler-sfc": "^3.0.6"
  45 |       }
  46 |     },
  47 |     "node_modules/@volar/code-gen": {
  48 |       "version": "0.40.13",
  49 |       "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.40.13.tgz",
  50 |       "integrity": "sha512-4gShBWuMce868OVvgyA1cU5WxHbjfEme18Tw6uVMfweZCF5fB2KECG0iPrA9D54vHk3FeHarODNwgIaaFfUBlA==",
  51 |       "dev": true,
  52 |       "dependencies": {
  53 |         "@volar/source-map": "0.40.13"
  54 |       }
  55 |     },
  56 |     "node_modules/@volar/source-map": {
  57 |       "version": "0.40.13",
  58 |       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.40.13.tgz",
  59 |       "integrity": "sha512-dbdkAB2Nxb0wLjAY5O64o3ywVWlAGONnBIoKAkXSf6qkGZM+nJxcizsoiI66K+RHQG0XqlyvjDizfnTxr+6PWg==",
  60 |       "dev": true,
  61 |       "dependencies": {
  62 |         "@vue/reactivity": "3.2.38"
  63 |       }
  64 |     },
  65 |     "node_modules/@volar/source-map/node_modules/@vue/reactivity": {
  66 |       "version": "3.2.38",
  67 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.38.tgz",
  68 |       "integrity": "sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==",
  69 |       "dev": true,
  70 |       "dependencies": {
  71 |         "@vue/shared": "3.2.38"
  72 |       }
  73 |     },
  74 |     "node_modules/@volar/source-map/node_modules/@vue/shared": {
  75 |       "version": "3.2.38",
  76 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.38.tgz",
  77 |       "integrity": "sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==",
  78 |       "dev": true
  79 |     },
  80 |     "node_modules/@volar/typescript-faster": {
  81 |       "version": "0.40.13",
  82 |       "resolved": "https://registry.npmjs.org/@volar/typescript-faster/-/typescript-faster-0.40.13.tgz",
  83 |       "integrity": "sha512-uy+TlcFkKoNlKEnxA4x5acxdxLyVDIXGSc8cYDNXpPKjBKXrQaetzCzlO3kVBqu1VLMxKNGJMTKn35mo+ILQmw==",
  84 |       "dev": true,
  85 |       "dependencies": {
  86 |         "semver": "^7.3.7"
  87 |       }
  88 |     },
  89 |     "node_modules/@volar/vue-language-core": {
  90 |       "version": "0.40.13",
  91 |       "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-0.40.13.tgz",
  92 |       "integrity": "sha512-QkCb8msi2KUitTdM6Y4kAb7/ZlEvuLcbBFOC2PLBlFuoZwyxvSP7c/dBGmKGtJlEvMX0LdCyrg5V2aBYxD38/Q==",
  93 |       "dev": true,
  94 |       "dependencies": {
  95 |         "@volar/code-gen": "0.40.13",
  96 |         "@volar/source-map": "0.40.13",
  97 |         "@vue/compiler-core": "^3.2.38",
  98 |         "@vue/compiler-dom": "^3.2.38",
  99 |         "@vue/compiler-sfc": "^3.2.38",
 100 |         "@vue/reactivity": "^3.2.38",
 101 |         "@vue/shared": "^3.2.38"
 102 |       }
 103 |     },
 104 |     "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-core": {
 105 |       "version": "3.2.39",
 106 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
 107 |       "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
 108 |       "dev": true,
 109 |       "dependencies": {
 110 |         "@babel/parser": "^7.16.4",
 111 |         "@vue/shared": "3.2.39",
 112 |         "estree-walker": "^2.0.2",
 113 |         "source-map": "^0.6.1"
 114 |       }
 115 |     },
 116 |     "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-dom": {
 117 |       "version": "3.2.39",
 118 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
 119 |       "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
 120 |       "dev": true,
 121 |       "dependencies": {
 122 |         "@vue/compiler-core": "3.2.39",
 123 |         "@vue/shared": "3.2.39"
 124 |       }
 125 |     },
 126 |     "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-sfc": {
 127 |       "version": "3.2.39",
 128 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
 129 |       "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
 130 |       "dev": true,
 131 |       "dependencies": {
 132 |         "@babel/parser": "^7.16.4",
 133 |         "@vue/compiler-core": "3.2.39",
 134 |         "@vue/compiler-dom": "3.2.39",
 135 |         "@vue/compiler-ssr": "3.2.39",
 136 |         "@vue/reactivity-transform": "3.2.39",
 137 |         "@vue/shared": "3.2.39",
 138 |         "estree-walker": "^2.0.2",
 139 |         "magic-string": "^0.25.7",
 140 |         "postcss": "^8.1.10",
 141 |         "source-map": "^0.6.1"
 142 |       }
 143 |     },
 144 |     "node_modules/@volar/vue-language-core/node_modules/@vue/compiler-ssr": {
 145 |       "version": "3.2.39",
 146 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
 147 |       "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
 148 |       "dev": true,
 149 |       "dependencies": {
 150 |         "@vue/compiler-dom": "3.2.39",
 151 |         "@vue/shared": "3.2.39"
 152 |       }
 153 |     },
 154 |     "node_modules/@volar/vue-language-core/node_modules/@vue/reactivity": {
 155 |       "version": "3.2.39",
 156 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
 157 |       "integrity": "sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==",
 158 |       "dev": true,
 159 |       "dependencies": {
 160 |         "@vue/shared": "3.2.39"
 161 |       }
 162 |     },
 163 |     "node_modules/@volar/vue-language-core/node_modules/@vue/reactivity-transform": {
 164 |       "version": "3.2.39",
 165 |       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
 166 |       "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
 167 |       "dev": true,
 168 |       "dependencies": {
 169 |         "@babel/parser": "^7.16.4",
 170 |         "@vue/compiler-core": "3.2.39",
 171 |         "@vue/shared": "3.2.39",
 172 |         "estree-walker": "^2.0.2",
 173 |         "magic-string": "^0.25.7"
 174 |       }
 175 |     },
 176 |     "node_modules/@volar/vue-language-core/node_modules/@vue/shared": {
 177 |       "version": "3.2.39",
 178 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
 179 |       "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
 180 |       "dev": true
 181 |     },
 182 |     "node_modules/@volar/vue-typescript": {
 183 |       "version": "0.40.13",
 184 |       "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.40.13.tgz",
 185 |       "integrity": "sha512-o7bNztwjs8JmbQjVkrnbZUOfm7q4B8ZYssETISN1tRaBdun6cfNqgpkvDYd+VUBh1O4CdksvN+5BUNnwAz4oCQ==",
 186 |       "dev": true,
 187 |       "dependencies": {
 188 |         "@volar/code-gen": "0.40.13",
 189 |         "@volar/typescript-faster": "0.40.13",
 190 |         "@volar/vue-language-core": "0.40.13"
 191 |       }
 192 |     },
 193 |     "node_modules/@vue/compiler-core": {
 194 |       "version": "3.2.37",
 195 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
 196 |       "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
 197 |       "dependencies": {
 198 |         "@babel/parser": "^7.16.4",
 199 |         "@vue/shared": "3.2.37",
 200 |         "estree-walker": "^2.0.2",
 201 |         "source-map": "^0.6.1"
 202 |       }
 203 |     },
 204 |     "node_modules/@vue/compiler-dom": {
 205 |       "version": "3.2.37",
 206 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
 207 |       "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
 208 |       "dependencies": {
 209 |         "@vue/compiler-core": "3.2.37",
 210 |         "@vue/shared": "3.2.37"
 211 |       }
 212 |     },
 213 |     "node_modules/@vue/compiler-sfc": {
 214 |       "version": "3.2.37",
 215 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
 216 |       "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
 217 |       "dependencies": {
 218 |         "@babel/parser": "^7.16.4",
 219 |         "@vue/compiler-core": "3.2.37",
 220 |         "@vue/compiler-dom": "3.2.37",
 221 |         "@vue/compiler-ssr": "3.2.37",
 222 |         "@vue/reactivity-transform": "3.2.37",
 223 |         "@vue/shared": "3.2.37",
 224 |         "estree-walker": "^2.0.2",
 225 |         "magic-string": "^0.25.7",
 226 |         "postcss": "^8.1.10",
 227 |         "source-map": "^0.6.1"
 228 |       }
 229 |     },
 230 |     "node_modules/@vue/compiler-ssr": {
 231 |       "version": "3.2.37",
 232 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
 233 |       "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
 234 |       "dependencies": {
 235 |         "@vue/compiler-dom": "3.2.37",
 236 |         "@vue/shared": "3.2.37"
 237 |       }
 238 |     },
 239 |     "node_modules/@vue/reactivity": {
 240 |       "version": "3.2.37",
 241 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
 242 |       "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
 243 |       "dependencies": {
 244 |         "@vue/shared": "3.2.37"
 245 |       }
 246 |     },
 247 |     "node_modules/@vue/reactivity-transform": {
 248 |       "version": "3.2.37",
 249 |       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
 250 |       "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
 251 |       "dependencies": {
 252 |         "@babel/parser": "^7.16.4",
 253 |         "@vue/compiler-core": "3.2.37",
 254 |         "@vue/shared": "3.2.37",
 255 |         "estree-walker": "^2.0.2",
 256 |         "magic-string": "^0.25.7"
 257 |       }
 258 |     },
 259 |     "node_modules/@vue/runtime-core": {
 260 |       "version": "3.2.37",
 261 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
 262 |       "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
 263 |       "dependencies": {
 264 |         "@vue/reactivity": "3.2.37",
 265 |         "@vue/shared": "3.2.37"
 266 |       }
 267 |     },
 268 |     "node_modules/@vue/runtime-dom": {
 269 |       "version": "3.2.37",
 270 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
 271 |       "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
 272 |       "dependencies": {
 273 |         "@vue/runtime-core": "3.2.37",
 274 |         "@vue/shared": "3.2.37",
 275 |         "csstype": "^2.6.8"
 276 |       }
 277 |     },
 278 |     "node_modules/@vue/server-renderer": {
 279 |       "version": "3.2.37",
 280 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
 281 |       "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
 282 |       "dependencies": {
 283 |         "@vue/compiler-ssr": "3.2.37",
 284 |         "@vue/shared": "3.2.37"
 285 |       },
 286 |       "peerDependencies": {
 287 |         "vue": "3.2.37"
 288 |       }
 289 |     },
 290 |     "node_modules/@vue/shared": {
 291 |       "version": "3.2.37",
 292 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
 293 |       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
 294 |     },
 295 |     "node_modules/colorette": {
 296 |       "version": "1.2.2",
 297 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
 298 |       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
 299 |     },
 300 |     "node_modules/csstype": {
 301 |       "version": "2.6.20",
 302 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
 303 |       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 304 |     },
 305 |     "node_modules/default-passive-events": {
 306 |       "version": "2.0.0",
 307 |       "resolved": "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
 308 |       "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
 309 |     },
 310 |     "node_modules/esbuild": {
 311 |       "version": "0.9.6",
 312 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.6.tgz",
 313 |       "integrity": "sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==",
 314 |       "dev": true,
 315 |       "hasInstallScript": true,
 316 |       "bin": {
 317 |         "esbuild": "bin/esbuild"
 318 |       }
 319 |     },
 320 |     "node_modules/estree-walker": {
 321 |       "version": "2.0.2",
 322 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 323 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 324 |     },
 325 |     "node_modules/fsevents": {
 326 |       "version": "2.3.2",
 327 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 328 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 329 |       "dev": true,
 330 |       "hasInstallScript": true,
 331 |       "optional": true,
 332 |       "os": [
 333 |         "darwin"
 334 |       ],
 335 |       "engines": {
 336 |         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
 337 |       }
 338 |     },
 339 |     "node_modules/function-bind": {
 340 |       "version": "1.1.1",
 341 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 342 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 343 |       "dev": true
 344 |     },
 345 |     "node_modules/has": {
 346 |       "version": "1.0.3",
 347 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 348 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 349 |       "dev": true,
 350 |       "dependencies": {
 351 |         "function-bind": "^1.1.1"
 352 |       },
 353 |       "engines": {
 354 |         "node": ">= 0.4.0"
 355 |       }
 356 |     },
 357 |     "node_modules/is-core-module": {
 358 |       "version": "2.2.0",
 359 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
 360 |       "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
 361 |       "dev": true,
 362 |       "dependencies": {
 363 |         "has": "^1.0.3"
 364 |       },
 365 |       "funding": {
 366 |         "url": "https://github.com/sponsors/ljharb"
 367 |       }
 368 |     },
 369 |     "node_modules/lru-cache": {
 370 |       "version": "6.0.0",
 371 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
 372 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 373 |       "dev": true,
 374 |       "dependencies": {
 375 |         "yallist": "^4.0.0"
 376 |       },
 377 |       "engines": {
 378 |         "node": ">=10"
 379 |       }
 380 |     },
 381 |     "node_modules/magic-string": {
 382 |       "version": "0.25.7",
 383 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
 384 |       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
 385 |       "dependencies": {
 386 |         "sourcemap-codec": "^1.4.4"
 387 |       }
 388 |     },
 389 |     "node_modules/nanoid": {
 390 |       "version": "3.1.22",
 391 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
 392 |       "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==",
 393 |       "bin": {
 394 |         "nanoid": "bin/nanoid.cjs"
 395 |       },
 396 |       "engines": {
 397 |         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
 398 |       }
 399 |     },
 400 |     "node_modules/path-parse": {
 401 |       "version": "1.0.6",
 402 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
 403 |       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
 404 |       "dev": true
 405 |     },
 406 |     "node_modules/postcss": {
 407 |       "version": "8.2.8",
 408 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz",
 409 |       "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==",
 410 |       "dependencies": {
 411 |         "colorette": "^1.2.2",
 412 |         "nanoid": "^3.1.20",
 413 |         "source-map": "^0.6.1"
 414 |       },
 415 |       "engines": {
 416 |         "node": "^10 || ^12 || >=14"
 417 |       },
 418 |       "funding": {
 419 |         "type": "opencollective",
 420 |         "url": "https://opencollective.com/postcss/"
 421 |       }
 422 |     },
 423 |     "node_modules/resolve": {
 424 |       "version": "1.20.0",
 425 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
 426 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
 427 |       "dev": true,
 428 |       "dependencies": {
 429 |         "is-core-module": "^2.2.0",
 430 |         "path-parse": "^1.0.6"
 431 |       },
 432 |       "funding": {
 433 |         "url": "https://github.com/sponsors/ljharb"
 434 |       }
 435 |     },
 436 |     "node_modules/rollup": {
 437 |       "version": "2.42.3",
 438 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.42.3.tgz",
 439 |       "integrity": "sha512-JjaT9WaUS5vmjy6xUrnPOskjkQg2cN4WSACNCwbOvBz8VDmbiKVdmTFUoMPRqTud0tsex8Xy9/boLbDW9HKD1w==",
 440 |       "dev": true,
 441 |       "bin": {
 442 |         "rollup": "dist/bin/rollup"
 443 |       },
 444 |       "engines": {
 445 |         "node": ">=10.0.0"
 446 |       },
 447 |       "optionalDependencies": {
 448 |         "fsevents": "~2.3.1"
 449 |       }
 450 |     },
 451 |     "node_modules/semver": {
 452 |       "version": "7.3.7",
 453 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
 454 |       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
 455 |       "dev": true,
 456 |       "dependencies": {
 457 |         "lru-cache": "^6.0.0"
 458 |       },
 459 |       "bin": {
 460 |         "semver": "bin/semver.js"
 461 |       },
 462 |       "engines": {
 463 |         "node": ">=10"
 464 |       }
 465 |     },
 466 |     "node_modules/signature_pad": {
 467 |       "version": "3.0.0-beta.4",
 468 |       "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-3.0.0-beta.4.tgz",
 469 |       "integrity": "sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw=="
 470 |     },
 471 |     "node_modules/source-map": {
 472 |       "version": "0.6.1",
 473 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 474 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
 475 |       "engines": {
 476 |         "node": ">=0.10.0"
 477 |       }
 478 |     },
 479 |     "node_modules/sourcemap-codec": {
 480 |       "version": "1.4.8",
 481 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 482 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
 483 |     },
 484 |     "node_modules/typescript": {
 485 |       "version": "4.8.3",
 486 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
 487 |       "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
 488 |       "dev": true,
 489 |       "bin": {
 490 |         "tsc": "bin/tsc",
 491 |         "tsserver": "bin/tsserver"
 492 |       },
 493 |       "engines": {
 494 |         "node": ">=4.2.0"
 495 |       }
 496 |     },
 497 |     "node_modules/vite": {
 498 |       "version": "2.1.2",
 499 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.1.2.tgz",
 500 |       "integrity": "sha512-K96k5Nb1kywggFwZNGf/NQVZIrjMSvjebYWFIEQRu8AQWtzxatMF8/reExFXebmrfWAT3PTUk6l4zJBkpMtyVg==",
 501 |       "dev": true,
 502 |       "dependencies": {
 503 |         "esbuild": "^0.9.3",
 504 |         "postcss": "^8.2.1",
 505 |         "resolve": "^1.19.0",
 506 |         "rollup": "^2.38.5"
 507 |       },
 508 |       "bin": {
 509 |         "vite": "bin/vite.js"
 510 |       },
 511 |       "engines": {
 512 |         "node": ">=12.0.0"
 513 |       },
 514 |       "optionalDependencies": {
 515 |         "fsevents": "~2.3.1"
 516 |       }
 517 |     },
 518 |     "node_modules/vue": {
 519 |       "version": "3.2.37",
 520 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
 521 |       "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
 522 |       "dependencies": {
 523 |         "@vue/compiler-dom": "3.2.37",
 524 |         "@vue/compiler-sfc": "3.2.37",
 525 |         "@vue/runtime-dom": "3.2.37",
 526 |         "@vue/server-renderer": "3.2.37",
 527 |         "@vue/shared": "3.2.37"
 528 |       }
 529 |     },
 530 |     "node_modules/vue-tsc": {
 531 |       "version": "0.40.13",
 532 |       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
 533 |       "integrity": "sha512-xzuN3g5PnKfJcNrLv4+mAjteMd5wLm5fRhW0034OfNJZY4WhB07vhngea/XeGn7wNYt16r7syonzvW/54dcNiA==",
 534 |       "dev": true,
 535 |       "dependencies": {
 536 |         "@volar/vue-language-core": "0.40.13",
 537 |         "@volar/vue-typescript": "0.40.13"
 538 |       },
 539 |       "bin": {
 540 |         "vue-tsc": "bin/vue-tsc.js"
 541 |       },
 542 |       "peerDependencies": {
 543 |         "typescript": "*"
 544 |       }
 545 |     },
 546 |     "node_modules/yallist": {
 547 |       "version": "4.0.0",
 548 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
 549 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 550 |       "dev": true
 551 |     }
 552 |   },
 553 |   "dependencies": {
 554 |     "@babel/parser": {
 555 |       "version": "7.18.8",
 556 |       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.8.tgz",
 557 |       "integrity": "sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA=="
 558 |     },
 559 |     "@vitejs/plugin-vue": {
 560 |       "version": "1.1.5",
 561 |       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz",
 562 |       "integrity": "sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==",
 563 |       "dev": true,
 564 |       "requires": {}
 565 |     },
 566 |     "@volar/code-gen": {
 567 |       "version": "0.40.13",
 568 |       "resolved": "https://registry.npmjs.org/@volar/code-gen/-/code-gen-0.40.13.tgz",
 569 |       "integrity": "sha512-4gShBWuMce868OVvgyA1cU5WxHbjfEme18Tw6uVMfweZCF5fB2KECG0iPrA9D54vHk3FeHarODNwgIaaFfUBlA==",
 570 |       "dev": true,
 571 |       "requires": {
 572 |         "@volar/source-map": "0.40.13"
 573 |       }
 574 |     },
 575 |     "@volar/source-map": {
 576 |       "version": "0.40.13",
 577 |       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-0.40.13.tgz",
 578 |       "integrity": "sha512-dbdkAB2Nxb0wLjAY5O64o3ywVWlAGONnBIoKAkXSf6qkGZM+nJxcizsoiI66K+RHQG0XqlyvjDizfnTxr+6PWg==",
 579 |       "dev": true,
 580 |       "requires": {
 581 |         "@vue/reactivity": "3.2.38"
 582 |       },
 583 |       "dependencies": {
 584 |         "@vue/reactivity": {
 585 |           "version": "3.2.38",
 586 |           "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.38.tgz",
 587 |           "integrity": "sha512-6L4myYcH9HG2M25co7/BSo0skKFHpAN8PhkNPM4xRVkyGl1K5M3Jx4rp5bsYhvYze2K4+l+pioN4e6ZwFLUVtw==",
 588 |           "dev": true,
 589 |           "requires": {
 590 |             "@vue/shared": "3.2.38"
 591 |           }
 592 |         },
 593 |         "@vue/shared": {
 594 |           "version": "3.2.38",
 595 |           "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.38.tgz",
 596 |           "integrity": "sha512-dTyhTIRmGXBjxJE+skC8tTWCGLCVc4wQgRRLt8+O9p5ewBAjoBwtCAkLPrtToSr1xltoe3st21Pv953aOZ7alg==",
 597 |           "dev": true
 598 |         }
 599 |       }
 600 |     },
 601 |     "@volar/typescript-faster": {
 602 |       "version": "0.40.13",
 603 |       "resolved": "https://registry.npmjs.org/@volar/typescript-faster/-/typescript-faster-0.40.13.tgz",
 604 |       "integrity": "sha512-uy+TlcFkKoNlKEnxA4x5acxdxLyVDIXGSc8cYDNXpPKjBKXrQaetzCzlO3kVBqu1VLMxKNGJMTKn35mo+ILQmw==",
 605 |       "dev": true,
 606 |       "requires": {
 607 |         "semver": "^7.3.7"
 608 |       }
 609 |     },
 610 |     "@volar/vue-language-core": {
 611 |       "version": "0.40.13",
 612 |       "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-0.40.13.tgz",
 613 |       "integrity": "sha512-QkCb8msi2KUitTdM6Y4kAb7/ZlEvuLcbBFOC2PLBlFuoZwyxvSP7c/dBGmKGtJlEvMX0LdCyrg5V2aBYxD38/Q==",
 614 |       "dev": true,
 615 |       "requires": {
 616 |         "@volar/code-gen": "0.40.13",
 617 |         "@volar/source-map": "0.40.13",
 618 |         "@vue/compiler-core": "^3.2.38",
 619 |         "@vue/compiler-dom": "^3.2.38",
 620 |         "@vue/compiler-sfc": "^3.2.38",
 621 |         "@vue/reactivity": "^3.2.38",
 622 |         "@vue/shared": "^3.2.38"
 623 |       },
 624 |       "dependencies": {
 625 |         "@vue/compiler-core": {
 626 |           "version": "3.2.39",
 627 |           "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.39.tgz",
 628 |           "integrity": "sha512-mf/36OWXqWn0wsC40nwRRGheR/qoID+lZXbIuLnr4/AngM0ov8Xvv8GHunC0rKRIkh60bTqydlqTeBo49rlbqw==",
 629 |           "dev": true,
 630 |           "requires": {
 631 |             "@babel/parser": "^7.16.4",
 632 |             "@vue/shared": "3.2.39",
 633 |             "estree-walker": "^2.0.2",
 634 |             "source-map": "^0.6.1"
 635 |           }
 636 |         },
 637 |         "@vue/compiler-dom": {
 638 |           "version": "3.2.39",
 639 |           "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.39.tgz",
 640 |           "integrity": "sha512-HMFI25Be1C8vLEEv1hgEO1dWwG9QQ8LTTPmCkblVJY/O3OvWx6r1+zsox5mKPMGvqYEZa6l8j+xgOfUspgo7hw==",
 641 |           "dev": true,
 642 |           "requires": {
 643 |             "@vue/compiler-core": "3.2.39",
 644 |             "@vue/shared": "3.2.39"
 645 |           }
 646 |         },
 647 |         "@vue/compiler-sfc": {
 648 |           "version": "3.2.39",
 649 |           "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.39.tgz",
 650 |           "integrity": "sha512-fqAQgFs1/BxTUZkd0Vakn3teKUt//J3c420BgnYgEOoVdTwYpBTSXCMJ88GOBCylmUBbtquGPli9tVs7LzsWIA==",
 651 |           "dev": true,
 652 |           "requires": {
 653 |             "@babel/parser": "^7.16.4",
 654 |             "@vue/compiler-core": "3.2.39",
 655 |             "@vue/compiler-dom": "3.2.39",
 656 |             "@vue/compiler-ssr": "3.2.39",
 657 |             "@vue/reactivity-transform": "3.2.39",
 658 |             "@vue/shared": "3.2.39",
 659 |             "estree-walker": "^2.0.2",
 660 |             "magic-string": "^0.25.7",
 661 |             "postcss": "^8.1.10",
 662 |             "source-map": "^0.6.1"
 663 |           }
 664 |         },
 665 |         "@vue/compiler-ssr": {
 666 |           "version": "3.2.39",
 667 |           "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.39.tgz",
 668 |           "integrity": "sha512-EoGCJ6lincKOZGW+0Ky4WOKsSmqL7hp1ZYgen8M7u/mlvvEQUaO9tKKOy7K43M9U2aA3tPv0TuYYQFrEbK2eFQ==",
 669 |           "dev": true,
 670 |           "requires": {
 671 |             "@vue/compiler-dom": "3.2.39",
 672 |             "@vue/shared": "3.2.39"
 673 |           }
 674 |         },
 675 |         "@vue/reactivity": {
 676 |           "version": "3.2.39",
 677 |           "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
 678 |           "integrity": "sha512-vlaYX2a3qMhIZfrw3Mtfd+BuU+TZmvDrPMa+6lpfzS9k/LnGxkSuf0fhkP0rMGfiOHPtyKoU9OJJJFGm92beVQ==",
 679 |           "dev": true,
 680 |           "requires": {
 681 |             "@vue/shared": "3.2.39"
 682 |           }
 683 |         },
 684 |         "@vue/reactivity-transform": {
 685 |           "version": "3.2.39",
 686 |           "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.39.tgz",
 687 |           "integrity": "sha512-HGuWu864zStiWs9wBC6JYOP1E00UjMdDWIG5W+FpUx28hV3uz9ODOKVNm/vdOy/Pvzg8+OcANxAVC85WFBbl3A==",
 688 |           "dev": true,
 689 |           "requires": {
 690 |             "@babel/parser": "^7.16.4",
 691 |             "@vue/compiler-core": "3.2.39",
 692 |             "@vue/shared": "3.2.39",
 693 |             "estree-walker": "^2.0.2",
 694 |             "magic-string": "^0.25.7"
 695 |           }
 696 |         },
 697 |         "@vue/shared": {
 698 |           "version": "3.2.39",
 699 |           "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
 700 |           "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw==",
 701 |           "dev": true
 702 |         }
 703 |       }
 704 |     },
 705 |     "@volar/vue-typescript": {
 706 |       "version": "0.40.13",
 707 |       "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-0.40.13.tgz",
 708 |       "integrity": "sha512-o7bNztwjs8JmbQjVkrnbZUOfm7q4B8ZYssETISN1tRaBdun6cfNqgpkvDYd+VUBh1O4CdksvN+5BUNnwAz4oCQ==",
 709 |       "dev": true,
 710 |       "requires": {
 711 |         "@volar/code-gen": "0.40.13",
 712 |         "@volar/typescript-faster": "0.40.13",
 713 |         "@volar/vue-language-core": "0.40.13"
 714 |       }
 715 |     },
 716 |     "@vue/compiler-core": {
 717 |       "version": "3.2.37",
 718 |       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz",
 719 |       "integrity": "sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==",
 720 |       "requires": {
 721 |         "@babel/parser": "^7.16.4",
 722 |         "@vue/shared": "3.2.37",
 723 |         "estree-walker": "^2.0.2",
 724 |         "source-map": "^0.6.1"
 725 |       }
 726 |     },
 727 |     "@vue/compiler-dom": {
 728 |       "version": "3.2.37",
 729 |       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz",
 730 |       "integrity": "sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==",
 731 |       "requires": {
 732 |         "@vue/compiler-core": "3.2.37",
 733 |         "@vue/shared": "3.2.37"
 734 |       }
 735 |     },
 736 |     "@vue/compiler-sfc": {
 737 |       "version": "3.2.37",
 738 |       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz",
 739 |       "integrity": "sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==",
 740 |       "requires": {
 741 |         "@babel/parser": "^7.16.4",
 742 |         "@vue/compiler-core": "3.2.37",
 743 |         "@vue/compiler-dom": "3.2.37",
 744 |         "@vue/compiler-ssr": "3.2.37",
 745 |         "@vue/reactivity-transform": "3.2.37",
 746 |         "@vue/shared": "3.2.37",
 747 |         "estree-walker": "^2.0.2",
 748 |         "magic-string": "^0.25.7",
 749 |         "postcss": "^8.1.10",
 750 |         "source-map": "^0.6.1"
 751 |       }
 752 |     },
 753 |     "@vue/compiler-ssr": {
 754 |       "version": "3.2.37",
 755 |       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz",
 756 |       "integrity": "sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==",
 757 |       "requires": {
 758 |         "@vue/compiler-dom": "3.2.37",
 759 |         "@vue/shared": "3.2.37"
 760 |       }
 761 |     },
 762 |     "@vue/reactivity": {
 763 |       "version": "3.2.37",
 764 |       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz",
 765 |       "integrity": "sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==",
 766 |       "requires": {
 767 |         "@vue/shared": "3.2.37"
 768 |       }
 769 |     },
 770 |     "@vue/reactivity-transform": {
 771 |       "version": "3.2.37",
 772 |       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz",
 773 |       "integrity": "sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==",
 774 |       "requires": {
 775 |         "@babel/parser": "^7.16.4",
 776 |         "@vue/compiler-core": "3.2.37",
 777 |         "@vue/shared": "3.2.37",
 778 |         "estree-walker": "^2.0.2",
 779 |         "magic-string": "^0.25.7"
 780 |       }
 781 |     },
 782 |     "@vue/runtime-core": {
 783 |       "version": "3.2.37",
 784 |       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz",
 785 |       "integrity": "sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==",
 786 |       "requires": {
 787 |         "@vue/reactivity": "3.2.37",
 788 |         "@vue/shared": "3.2.37"
 789 |       }
 790 |     },
 791 |     "@vue/runtime-dom": {
 792 |       "version": "3.2.37",
 793 |       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz",
 794 |       "integrity": "sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==",
 795 |       "requires": {
 796 |         "@vue/runtime-core": "3.2.37",
 797 |         "@vue/shared": "3.2.37",
 798 |         "csstype": "^2.6.8"
 799 |       }
 800 |     },
 801 |     "@vue/server-renderer": {
 802 |       "version": "3.2.37",
 803 |       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz",
 804 |       "integrity": "sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==",
 805 |       "requires": {
 806 |         "@vue/compiler-ssr": "3.2.37",
 807 |         "@vue/shared": "3.2.37"
 808 |       }
 809 |     },
 810 |     "@vue/shared": {
 811 |       "version": "3.2.37",
 812 |       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz",
 813 |       "integrity": "sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw=="
 814 |     },
 815 |     "colorette": {
 816 |       "version": "1.2.2",
 817 |       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
 818 |       "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
 819 |     },
 820 |     "csstype": {
 821 |       "version": "2.6.20",
 822 |       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
 823 |       "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
 824 |     },
 825 |     "default-passive-events": {
 826 |       "version": "2.0.0",
 827 |       "resolved": "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz",
 828 |       "integrity": "sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ=="
 829 |     },
 830 |     "esbuild": {
 831 |       "version": "0.9.6",
 832 |       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.9.6.tgz",
 833 |       "integrity": "sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==",
 834 |       "dev": true
 835 |     },
 836 |     "estree-walker": {
 837 |       "version": "2.0.2",
 838 |       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 839 |       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 840 |     },
 841 |     "fsevents": {
 842 |       "version": "2.3.2",
 843 |       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
 844 |       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
 845 |       "dev": true,
 846 |       "optional": true
 847 |     },
 848 |     "function-bind": {
 849 |       "version": "1.1.1",
 850 |       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
 851 |       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
 852 |       "dev": true
 853 |     },
 854 |     "has": {
 855 |       "version": "1.0.3",
 856 |       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
 857 |       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
 858 |       "dev": true,
 859 |       "requires": {
 860 |         "function-bind": "^1.1.1"
 861 |       }
 862 |     },
 863 |     "is-core-module": {
 864 |       "version": "2.2.0",
 865 |       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
 866 |       "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
 867 |       "dev": true,
 868 |       "requires": {
 869 |         "has": "^1.0.3"
 870 |       }
 871 |     },
 872 |     "lru-cache": {
 873 |       "version": "6.0.0",
 874 |       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
 875 |       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
 876 |       "dev": true,
 877 |       "requires": {
 878 |         "yallist": "^4.0.0"
 879 |       }
 880 |     },
 881 |     "magic-string": {
 882 |       "version": "0.25.7",
 883 |       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
 884 |       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
 885 |       "requires": {
 886 |         "sourcemap-codec": "^1.4.4"
 887 |       }
 888 |     },
 889 |     "nanoid": {
 890 |       "version": "3.1.22",
 891 |       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz",
 892 |       "integrity": "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ=="
 893 |     },
 894 |     "path-parse": {
 895 |       "version": "1.0.6",
 896 |       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
 897 |       "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
 898 |       "dev": true
 899 |     },
 900 |     "postcss": {
 901 |       "version": "8.2.8",
 902 |       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz",
 903 |       "integrity": "sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==",
 904 |       "requires": {
 905 |         "colorette": "^1.2.2",
 906 |         "nanoid": "^3.1.20",
 907 |         "source-map": "^0.6.1"
 908 |       }
 909 |     },
 910 |     "resolve": {
 911 |       "version": "1.20.0",
 912 |       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
 913 |       "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
 914 |       "dev": true,
 915 |       "requires": {
 916 |         "is-core-module": "^2.2.0",
 917 |         "path-parse": "^1.0.6"
 918 |       }
 919 |     },
 920 |     "rollup": {
 921 |       "version": "2.42.3",
 922 |       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.42.3.tgz",
 923 |       "integrity": "sha512-JjaT9WaUS5vmjy6xUrnPOskjkQg2cN4WSACNCwbOvBz8VDmbiKVdmTFUoMPRqTud0tsex8Xy9/boLbDW9HKD1w==",
 924 |       "dev": true,
 925 |       "requires": {
 926 |         "fsevents": "~2.3.1"
 927 |       }
 928 |     },
 929 |     "semver": {
 930 |       "version": "7.3.7",
 931 |       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
 932 |       "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
 933 |       "dev": true,
 934 |       "requires": {
 935 |         "lru-cache": "^6.0.0"
 936 |       }
 937 |     },
 938 |     "signature_pad": {
 939 |       "version": "3.0.0-beta.4",
 940 |       "resolved": "https://registry.npmjs.org/signature_pad/-/signature_pad-3.0.0-beta.4.tgz",
 941 |       "integrity": "sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw=="
 942 |     },
 943 |     "source-map": {
 944 |       "version": "0.6.1",
 945 |       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
 946 |       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
 947 |     },
 948 |     "sourcemap-codec": {
 949 |       "version": "1.4.8",
 950 |       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
 951 |       "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
 952 |     },
 953 |     "typescript": {
 954 |       "version": "4.8.3",
 955 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz",
 956 |       "integrity": "sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==",
 957 |       "dev": true
 958 |     },
 959 |     "vite": {
 960 |       "version": "2.1.2",
 961 |       "resolved": "https://registry.npmjs.org/vite/-/vite-2.1.2.tgz",
 962 |       "integrity": "sha512-K96k5Nb1kywggFwZNGf/NQVZIrjMSvjebYWFIEQRu8AQWtzxatMF8/reExFXebmrfWAT3PTUk6l4zJBkpMtyVg==",
 963 |       "dev": true,
 964 |       "requires": {
 965 |         "esbuild": "^0.9.3",
 966 |         "fsevents": "~2.3.1",
 967 |         "postcss": "^8.2.1",
 968 |         "resolve": "^1.19.0",
 969 |         "rollup": "^2.38.5"
 970 |       }
 971 |     },
 972 |     "vue": {
 973 |       "version": "3.2.37",
 974 |       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz",
 975 |       "integrity": "sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==",
 976 |       "requires": {
 977 |         "@vue/compiler-dom": "3.2.37",
 978 |         "@vue/compiler-sfc": "3.2.37",
 979 |         "@vue/runtime-dom": "3.2.37",
 980 |         "@vue/server-renderer": "3.2.37",
 981 |         "@vue/shared": "3.2.37"
 982 |       }
 983 |     },
 984 |     "vue-tsc": {
 985 |       "version": "0.40.13",
 986 |       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-0.40.13.tgz",
 987 |       "integrity": "sha512-xzuN3g5PnKfJcNrLv4+mAjteMd5wLm5fRhW0034OfNJZY4WhB07vhngea/XeGn7wNYt16r7syonzvW/54dcNiA==",
 988 |       "dev": true,
 989 |       "requires": {
 990 |         "@volar/vue-language-core": "0.40.13",
 991 |         "@volar/vue-typescript": "0.40.13"
 992 |       }
 993 |     },
 994 |     "yallist": {
 995 |       "version": "4.0.0",
 996 |       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
 997 |       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
 998 |       "dev": true
 999 |     }
1000 |   }
1001 | }
1002 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-signature",
 3 |   "description": "Electronic signature for Vue3",
 4 |   "version": "0.2.4",
 5 |   "author": "Shayne Wang <1614565666@qq.com>",
 6 |   "private": false,
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/WangShayne/vue3-signature"
11 |   },
12 |   "files": [
13 |     "dist",
14 |     "types"
15 |   ],
16 |   "main": "./dist/vue3-signature.umd.js",
17 |   "module": "./dist/vue3-signature.es.js",
18 |   "types": "./types/index.d.ts",
19 |   "exports": {
20 |     ".": {
21 |       "import": "./dist/vue3-signature.es.js",
22 |       "require": "./dist/vue3-signature.umd.js",
23 |       "types": "./types/index.d.ts"
24 |     }
25 |   },
26 |   "scripts": {
27 |     "dev": "vite",
28 |     "build": "vite build && yarn build:tsc",
29 |     "build:tsc": "vue-tsc --emitDeclarationOnly",
30 |     "serve": "vite preview"
31 |   },
32 |   "peerDependencies": {
33 |     "vue": "^3.2.0"
34 |   },
35 |   "dependencies": {
36 |     "default-passive-events": "^2.0.0",
37 |     "signature_pad": "^3.0.0-beta.4",
38 |     "vue": "^3.2.37"
39 |   },
40 |   "devDependencies": {
41 |     "@vitejs/plugin-vue": "^1.1.5",
42 |     "@vue/compiler-sfc": "^3.0.5",
43 |     "typescript": "^4.8.2",
44 |     "vite": "^2.1.0",
45 |     "vue-tsc": "^1.8.27"
46 |   }
47 | }
48 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShayne/vue3-signature/96b54b8db9a9612ba93e5f0798e77d4fd15608a8/public/favicon.ico


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <img alt="Vue logo" src="./assets/logo.png" />
 3 |   <HelloWorld />
 4 | </template>
 5 | 
 6 | <script setup>
 7 | import HelloWorld from './components/HelloWorld.vue'
 8 | 
 9 | // This starter template is using Vue 3 experimental <script setup> SFCs
10 | // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
11 | </script>
12 | 
13 | <style>
14 | #app {
15 |   font-family: Avenir, Helvetica, Arial, sans-serif;
16 |   -webkit-font-smoothing: antialiased;
17 |   -moz-osx-font-smoothing: grayscale;
18 |   text-align: center;
19 |   color: #2c3e50;
20 |   margin-top: 60px;
21 | }
22 | </style>


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WangShayne/vue3-signature/96b54b8db9a9612ba93e5f0798e77d4fd15608a8/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 
 3 |     <Vue3Signature  ref="signature1" :sigOption="state.option" :w="'1280px'" :h="'400px'"
 4 |                   :disabled="state.disabled" class="example"></Vue3Signature>
 5 |     <button @click="save('image/jpeg')">Save</button>
 6 |     <button @click="clear">Clear</button>
 7 |     <button @click="undo">Undo</button>
 8 |     <button @click="addWaterMark">addWaterMark</button>
 9 |     <button @click="fromDataURL">fromDataURL</button>
10 |     <button @click="handleToggleDisabled">ToggleDisabled</button>
11 | 
12 | 
13 | 
14 | </template>
15 | 
16 | <script setup>
17 | import {reactive, ref } from 'vue'
18 | // import vue3signature from "../../lib/index";
19 | 
20 | 
21 | const state = reactive({
22 |   count: 0,
23 |   option: {
24 |     penColor: "rgb(0, 0, 0)",
25 |     backgroundColor: "rgb(255,255,255)"
26 |   },
27 |   disabled: false
28 | })
29 | 
30 | const signature1 = ref(null)
31 | 
32 | const save = (t) => {
33 |   console.log(signature1.value.save(t))
34 | }
35 | 
36 | const clear = () => {
37 |   signature1.value.clear()
38 | }
39 | 
40 | const undo = () => {
41 |   signature1.value.undo();
42 | }
43 | 
44 | const addWaterMark = () => {
45 |   signature1.value.addWaterMark({
46 |     text: "mark text",          // watermark text, > default ''
47 |     font: "20px Arial",         // mark font, > default '20px sans-serif'
48 |     style: 'all',               // fillText and strokeText,  'all'/'stroke'/'fill', > default 'fill
49 |     fillStyle: "red",           // fillcolor, > default '#333'
50 |     strokeStyle: "blue",	       // strokecolor, > default '#333'
51 |     x: 100,                     // fill positionX, > default 20
52 |     y: 200,                     // fill positionY, > default 20
53 |     sx: 100,                    // stroke positionX, > default 40
54 |     sy: 200                     // stroke positionY, > default 40
55 |   });
56 | }
57 | 
58 | const fromDataURL = (url) => {
59 |   signature1.value.fromDataURL("https://avatars2.githubusercontent.com/u/17644818?s=460&v=4");
60 | }
61 | 
62 | const handleToggleDisabled = () => {
63 |   state.disabled = !state.disabled
64 | }
65 | 
66 | </script>
67 | 
68 | <style scoped>
69 | .example{
70 |   margin: 0 auto;
71 | }
72 | </style>


--------------------------------------------------------------------------------
/src/components/Vue3Signature.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :style="{ width: w, height: h }" @touchmove.prevent>
  3 |     <canvas
  4 |         :id="state.uid"
  5 |         class="canvas"
  6 |         :data-uid="state.uid"
  7 |         :disabled="state.disabled"
  8 |     ></canvas>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script setup>
 13 | import SignaturePad from "signature_pad";
 14 | import {onMounted, reactive, watch} from "vue";
 15 | 
 16 | const props = defineProps({
 17 |   sigOption: {
 18 |     type: Object,
 19 |     default: () => {
 20 |       return {
 21 |         backgroundColor: "rgb(255,255,255)",
 22 |         penColor: "rgb(0, 0, 0)",
 23 |       };
 24 |     },
 25 |   },
 26 |   w: {
 27 |     type: String,
 28 |     default: "100%",
 29 |   },
 30 |   h: {
 31 |     type: String,
 32 |     default: "100%",
 33 |   },
 34 |   clearOnResize: {
 35 |     type: Boolean,
 36 |     default: false,
 37 |   },
 38 |   waterMark: {
 39 |     type: Object,
 40 |     default: () => {
 41 |       return {};
 42 |     },
 43 |   },
 44 |   disabled: {
 45 |     type: Boolean,
 46 |     default: false,
 47 |   },
 48 |   defaultUrl: {
 49 |     type: String,
 50 |     default: "",
 51 |   }
 52 | })
 53 | 
 54 | let state = reactive({
 55 |   sig: () => {
 56 |   },
 57 |   option: {
 58 |     backgroundColor: "rgb(255,255,255)",
 59 |     penColor: "rgb(0, 0, 0)",
 60 |   },
 61 |   uid: "",
 62 | });
 63 | 
 64 | state.uid = "canvas" + Math.random();
 65 | 
 66 | let sigOptions = Object.keys(props.sigOption);
 67 | for (let item of sigOptions) {
 68 |   state.option[item] = props.sigOption[item];
 69 | }
 70 | 
 71 | watch(
 72 |     () => props.disabled,
 73 |     (val) => {
 74 |       if (val) {
 75 |         state.sig.off();
 76 |       } else {
 77 |         state.sig.on();
 78 |       }
 79 |     }
 80 | );
 81 | 
 82 | const draw = () => {
 83 |   let canvas = document.getElementById(state.uid);
 84 |   state.sig = new SignaturePad(canvas, state.option);
 85 | 
 86 |   function resizeCanvas(c) {
 87 |     let url;
 88 |     if (!isEmpty()) {
 89 |       url = save();
 90 |     }
 91 |     let ratio = Math.max(window.devicePixelRatio || 1, 1);
 92 |     const reg = RegExp(/px/)
 93 |     c.width = reg.test(props.w) ? props.w.replace(/px/g, "") * ratio : c.offsetWidth * ratio;
 94 |     c.height = reg.test(props.h) ? props.h.replace(/px/g, "") * ratio : c.offsetHeight * ratio;
 95 |     c.getContext("2d").scale(ratio, ratio);
 96 |     clear();
 97 |     !props.clearOnResize && url !== undefined && fromDataURL(url);
 98 |     Object.keys(props.waterMark).length && addWaterMark(props.waterMark);
 99 |   }
100 | 
101 |   window.addEventListener("resize", resizeCanvas(canvas));
102 |   resizeCanvas(canvas);
103 |   if (props.defaultUrl !== "") {
104 |     fromDataURL(props.defaultUrl);
105 |   }
106 |   if (props.disabled) {
107 |     state.sig.off();
108 |   } else {
109 |     state.sig.on();
110 |   }
111 | };
112 | 
113 | const clear = () => {
114 |   state.sig.clear();
115 | };
116 | const save = (format) => {
117 |   return format ? state.sig.toDataURL(format) : state.sig.toDataURL();
118 |   // signaturePad.toDataURL(); // save image as PNG
119 |   // signaturePad.toDataURL("image/jpeg"); // save image as JPEG
120 |   // signaturePad.toDataURL("image/svg+xml"); // save image as SVG
121 | };
122 | const fromDataURL = (url) => {
123 |   state.sig.fromDataURL(url);
124 | };
125 | const isEmpty = () => {
126 |   return state.sig.isEmpty();
127 | };
128 | const undo = () => {
129 |   let data = state.sig.toData();
130 |   if (data) {
131 |     data.pop();
132 |     state.sig.fromData(data);
133 |   }
134 | };
135 | const addWaterMark = (data) => {
136 |   if (!(Object.prototype.toString.call(data) == "[object Object]")) {
137 |     throw new Error("Expected Object, got " + typeof data + ".");
138 |   } else {
139 |     let vCanvas = document.getElementById(state.uid);
140 |     let textData = {
141 |       text: data.text || "",
142 |       x: data.x || 20,
143 |       y: data.y || 20,
144 |       sx: data.sx || 40,
145 |       sy: data.sy || 40,
146 |     };
147 | 
148 |     let ctx = vCanvas.getContext("2d");
149 |     ctx.font = data.font || "20px sans-serif";
150 |     ctx.fillStyle = data.fillStyle || "#333";
151 |     ctx.strokeStyle = data.strokeStyle || "#333";
152 |     if (data.style == "all") {
153 |       ctx.fillText(textData.text, textData.x, textData.y);
154 |       ctx.strokeText(textData.text, textData.sx, textData.sy);
155 |     } else if (data.style == "stroke") {
156 |       ctx.strokeText(textData.text, textData.sx, textData.sy);
157 |     } else {
158 |       ctx.fillText(textData.text, textData.x, textData.y);
159 |     }
160 |     state.sig._isEmpty = false;
161 |   }
162 | };
163 | 
164 | onMounted(() => {
165 |   draw();
166 | })
167 | 
168 | defineExpose({
169 |   save,
170 |   clear,
171 |   isEmpty,
172 |   undo,
173 |   addWaterMark,
174 |   fromDataURL
175 | })
176 | </script>
177 | 
178 | <style>
179 | canvas {
180 |   width: 100%;
181 |   height: 100%;
182 | }
183 | </style>
184 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import App from "./App.vue";
3 | import Vue3Signature from "../lib/index";
4 | import "default-passive-events";
5 | 
6 | createApp(App).use(Vue3Signature).mount("#app");
7 | 


--------------------------------------------------------------------------------
/tea.yaml:
--------------------------------------------------------------------------------
1 | # https://tea.xyz/what-is-this-file
2 | ---
3 | version: 1.0.0
4 | codeOwners:
5 |   - '0x3f91e1D6aA404ed938b41Fd951FB4198BB6e761b'
6 | quorum: 1
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2016",
 4 |     "module": "commonjs",
 5 |     "moduleResolution": "node",
 6 |     "jsx": "preserve",
 7 |     "types": ["@vue/runtime-dom", "vite/client"],
 8 |     "declaration": true,
 9 |     "outDir": "./types",
10 |     "importsNotUsedAsValues": "error",
11 |     "esModuleInterop": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "strict": true,
14 |     "strictNullChecks": false,
15 |     "skipLibCheck": true
16 |   },
17 |   "include": ["lib/**/*.ts", "lib/**/*.vue"]
18 | }
19 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vite";
 2 | import vue from "@vitejs/plugin-vue";
 3 | const path = require("path");
 4 | 
 5 | // https://vitejs.dev/config/
 6 | export default defineConfig({
 7 |   plugins: [vue()],
 8 |   build: {
 9 |     lib: {
10 |       entry: path.resolve(__dirname, "./lib/index.ts"),
11 |       name: "vue3-signature",
12 |     },
13 |     rollupOptions: {
14 |       external: ["vue"],
15 |       output: {
16 |         globals: {
17 |           vue: "vue",
18 |         },
19 |       },
20 |     },
21 |   },
22 | });
23 | 


--------------------------------------------------------------------------------
/yarn.lock:
--------------------------------------------------------------------------------
  1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
  2 | # yarn lockfile v1
  3 | 
  4 | 
  5 | "@babel/parser@^7.16.4":
  6 |   version "7.18.8"
  7 |   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.18.8.tgz"
  8 |   integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA==
  9 | 
 10 | "@babel/parser@^7.23.9":
 11 |   version "7.23.9"
 12 |   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
 13 |   integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 14 | 
 15 | "@vitejs/plugin-vue@^1.1.5":
 16 |   version "1.1.5"
 17 |   resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-1.1.5.tgz"
 18 |   integrity sha512-4DV8VPYo8/OR1YsnK39QN16xhKENt2XvcmJxqfRtyz75kvbjBYh1zTSHLp7XsXqv4R2I+fOZlbEBvxosMYLcPA==
 19 | 
 20 | "@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
 21 |   version "1.11.1"
 22 |   resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-1.11.1.tgz#ecdf12ea8dc35fb8549e517991abcbf449a5ad4f"
 23 |   integrity sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==
 24 |   dependencies:
 25 |     "@volar/source-map" "1.11.1"
 26 | 
 27 | "@volar/source-map@1.11.1", "@volar/source-map@~1.11.1":
 28 |   version "1.11.1"
 29 |   resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-1.11.1.tgz#535b0328d9e2b7a91dff846cab4058e191f4452f"
 30 |   integrity sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==
 31 |   dependencies:
 32 |     muggle-string "^0.3.1"
 33 | 
 34 | "@volar/typescript@~1.11.1":
 35 |   version "1.11.1"
 36 |   resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-1.11.1.tgz#ba86c6f326d88e249c7f5cfe4b765be3946fd627"
 37 |   integrity sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==
 38 |   dependencies:
 39 |     "@volar/language-core" "1.11.1"
 40 |     path-browserify "^1.0.1"
 41 | 
 42 | "@vue/compiler-core@3.2.37":
 43 |   version "3.2.37"
 44 |   resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.37.tgz"
 45 |   integrity sha512-81KhEjo7YAOh0vQJoSmAD68wLfYqJvoiD4ulyedzF+OEk/bk6/hx3fTNVfuzugIIaTrOx4PGx6pAiBRe5e9Zmg==
 46 |   dependencies:
 47 |     "@babel/parser" "^7.16.4"
 48 |     "@vue/shared" "3.2.37"
 49 |     estree-walker "^2.0.2"
 50 |     source-map "^0.6.1"
 51 | 
 52 | "@vue/compiler-core@3.4.19":
 53 |   version "3.4.19"
 54 |   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.19.tgz#3161b1ede69da00f3ce8155dfab907a3eaa0515e"
 55 |   integrity sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==
 56 |   dependencies:
 57 |     "@babel/parser" "^7.23.9"
 58 |     "@vue/shared" "3.4.19"
 59 |     entities "^4.5.0"
 60 |     estree-walker "^2.0.2"
 61 |     source-map-js "^1.0.2"
 62 | 
 63 | "@vue/compiler-dom@3.2.37":
 64 |   version "3.2.37"
 65 |   resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz"
 66 |   integrity sha512-yxJLH167fucHKxaqXpYk7x8z7mMEnXOw3G2q62FTkmsvNxu4FQSu5+3UMb+L7fjKa26DEzhrmCxAgFLLIzVfqQ==
 67 |   dependencies:
 68 |     "@vue/compiler-core" "3.2.37"
 69 |     "@vue/shared" "3.2.37"
 70 | 
 71 | "@vue/compiler-dom@^3.3.0":
 72 |   version "3.4.19"
 73 |   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz#2457e57e978f431e3b5fd11fc50a3e92d5816f9a"
 74 |   integrity sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==
 75 |   dependencies:
 76 |     "@vue/compiler-core" "3.4.19"
 77 |     "@vue/shared" "3.4.19"
 78 | 
 79 | "@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.0.5":
 80 |   version "3.2.37"
 81 |   resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz"
 82 |   integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
 83 |   dependencies:
 84 |     "@babel/parser" "^7.16.4"
 85 |     "@vue/compiler-core" "3.2.37"
 86 |     "@vue/compiler-dom" "3.2.37"
 87 |     "@vue/compiler-ssr" "3.2.37"
 88 |     "@vue/reactivity-transform" "3.2.37"
 89 |     "@vue/shared" "3.2.37"
 90 |     estree-walker "^2.0.2"
 91 |     magic-string "^0.25.7"
 92 |     postcss "^8.1.10"
 93 |     source-map "^0.6.1"
 94 | 
 95 | "@vue/compiler-ssr@3.2.37":
 96 |   version "3.2.37"
 97 |   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz"
 98 |   integrity sha512-7mQJD7HdXxQjktmsWp/J67lThEIcxLemz1Vb5I6rYJHR5vI+lON3nPGOH3ubmbvYGt8xEUaAr1j7/tIFWiEOqw==
 99 |   dependencies:
100 |     "@vue/compiler-dom" "3.2.37"
101 |     "@vue/shared" "3.2.37"
102 | 
103 | "@vue/language-core@1.8.27":
104 |   version "1.8.27"
105 |   resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-1.8.27.tgz#2ca6892cb524e024a44e554e4c55d7a23e72263f"
106 |   integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
107 |   dependencies:
108 |     "@volar/language-core" "~1.11.1"
109 |     "@volar/source-map" "~1.11.1"
110 |     "@vue/compiler-dom" "^3.3.0"
111 |     "@vue/shared" "^3.3.0"
112 |     computeds "^0.0.1"
113 |     minimatch "^9.0.3"
114 |     muggle-string "^0.3.1"
115 |     path-browserify "^1.0.1"
116 |     vue-template-compiler "^2.7.14"
117 | 
118 | "@vue/reactivity-transform@3.2.37":
119 |   version "3.2.37"
120 |   resolved "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.37.tgz"
121 |   integrity sha512-IWopkKEb+8qpu/1eMKVeXrK0NLw9HicGviJzhJDEyfxTR9e1WtpnnbYkJWurX6WwoFP0sz10xQg8yL8lgskAZg==
122 |   dependencies:
123 |     "@babel/parser" "^7.16.4"
124 |     "@vue/compiler-core" "3.2.37"
125 |     "@vue/shared" "3.2.37"
126 |     estree-walker "^2.0.2"
127 |     magic-string "^0.25.7"
128 | 
129 | "@vue/reactivity@3.2.37":
130 |   version "3.2.37"
131 |   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.37.tgz"
132 |   integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
133 |   dependencies:
134 |     "@vue/shared" "3.2.37"
135 | 
136 | "@vue/runtime-core@3.2.37":
137 |   version "3.2.37"
138 |   resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.37.tgz"
139 |   integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==
140 |   dependencies:
141 |     "@vue/reactivity" "3.2.37"
142 |     "@vue/shared" "3.2.37"
143 | 
144 | "@vue/runtime-dom@3.2.37":
145 |   version "3.2.37"
146 |   resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz"
147 |   integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==
148 |   dependencies:
149 |     "@vue/runtime-core" "3.2.37"
150 |     "@vue/shared" "3.2.37"
151 |     csstype "^2.6.8"
152 | 
153 | "@vue/server-renderer@3.2.37":
154 |   version "3.2.37"
155 |   resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.37.tgz"
156 |   integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==
157 |   dependencies:
158 |     "@vue/compiler-ssr" "3.2.37"
159 |     "@vue/shared" "3.2.37"
160 | 
161 | "@vue/shared@3.2.37":
162 |   version "3.2.37"
163 |   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.37.tgz"
164 |   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
165 | 
166 | "@vue/shared@3.4.19", "@vue/shared@^3.3.0":
167 |   version "3.4.19"
168 |   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.19.tgz#28105147811bcf1e6612bf1c9ab0c6d91ada019c"
169 |   integrity sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==
170 | 
171 | balanced-match@^1.0.0:
172 |   version "1.0.2"
173 |   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
174 |   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
175 | 
176 | brace-expansion@^2.0.1:
177 |   version "2.0.1"
178 |   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
179 |   integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
180 |   dependencies:
181 |     balanced-match "^1.0.0"
182 | 
183 | colorette@^1.2.2:
184 |   version "1.2.2"
185 |   resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz"
186 |   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
187 | 
188 | computeds@^0.0.1:
189 |   version "0.0.1"
190 |   resolved "https://registry.yarnpkg.com/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
191 |   integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
192 | 
193 | csstype@^2.6.8:
194 |   version "2.6.20"
195 |   resolved "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz"
196 |   integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
197 | 
198 | de-indent@^1.0.2:
199 |   version "1.0.2"
200 |   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
201 |   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
202 | 
203 | default-passive-events@^2.0.0:
204 |   version "2.0.0"
205 |   resolved "https://registry.npmjs.org/default-passive-events/-/default-passive-events-2.0.0.tgz"
206 |   integrity sha512-eMtt76GpDVngZQ3ocgvRcNCklUMwID1PaNbCNxfpDXuiOXttSh0HzBbda1HU9SIUsDc02vb7g9+3I5tlqe/qMQ==
207 | 
208 | entities@^4.5.0:
209 |   version "4.5.0"
210 |   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
211 |   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
212 | 
213 | esbuild@^0.9.3:
214 |   version "0.9.6"
215 |   resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.9.6.tgz"
216 |   integrity sha512-F6vASxU0wT/Davt9aj2qtDwDNSkQxh9VbyO56M7PDWD+D/Vgq/rmUDGDQo7te76W5auauVojjnQr/wTu3vpaUA==
217 | 
218 | estree-walker@^2.0.2:
219 |   version "2.0.2"
220 |   resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
221 |   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
222 | 
223 | fsevents@~2.3.1:
224 |   version "2.3.3"
225 |   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
226 |   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
227 | 
228 | function-bind@^1.1.1:
229 |   version "1.1.1"
230 |   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
231 |   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
232 | 
233 | has@^1.0.3:
234 |   version "1.0.3"
235 |   resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
236 |   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
237 |   dependencies:
238 |     function-bind "^1.1.1"
239 | 
240 | he@^1.2.0:
241 |   version "1.2.0"
242 |   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
243 |   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
244 | 
245 | is-core-module@^2.2.0:
246 |   version "2.2.0"
247 |   resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz"
248 |   integrity sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==
249 |   dependencies:
250 |     has "^1.0.3"
251 | 
252 | lru-cache@^6.0.0:
253 |   version "6.0.0"
254 |   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
255 |   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
256 |   dependencies:
257 |     yallist "^4.0.0"
258 | 
259 | magic-string@^0.25.7:
260 |   version "0.25.7"
261 |   resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz"
262 |   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
263 |   dependencies:
264 |     sourcemap-codec "^1.4.4"
265 | 
266 | minimatch@^9.0.3:
267 |   version "9.0.3"
268 |   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
269 |   integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
270 |   dependencies:
271 |     brace-expansion "^2.0.1"
272 | 
273 | muggle-string@^0.3.1:
274 |   version "0.3.1"
275 |   resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
276 |   integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
277 | 
278 | nanoid@^3.1.20:
279 |   version "3.1.22"
280 |   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz"
281 |   integrity sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ==
282 | 
283 | path-browserify@^1.0.1:
284 |   version "1.0.1"
285 |   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
286 |   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
287 | 
288 | path-parse@^1.0.6:
289 |   version "1.0.6"
290 |   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz"
291 |   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
292 | 
293 | postcss@^8.1.10, postcss@^8.2.1:
294 |   version "8.2.8"
295 |   resolved "https://registry.npmjs.org/postcss/-/postcss-8.2.8.tgz"
296 |   integrity sha512-1F0Xb2T21xET7oQV9eKuctbM9S7BC0fetoHCc4H13z0PT6haiRLP4T0ZY4XWh7iLP0usgqykT6p9B2RtOf4FPw==
297 |   dependencies:
298 |     colorette "^1.2.2"
299 |     nanoid "^3.1.20"
300 |     source-map "^0.6.1"
301 | 
302 | resolve@^1.19.0:
303 |   version "1.20.0"
304 |   resolved "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz"
305 |   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
306 |   dependencies:
307 |     is-core-module "^2.2.0"
308 |     path-parse "^1.0.6"
309 | 
310 | rollup@^2.38.5:
311 |   version "2.42.3"
312 |   resolved "https://registry.npmjs.org/rollup/-/rollup-2.42.3.tgz"
313 |   integrity sha512-JjaT9WaUS5vmjy6xUrnPOskjkQg2cN4WSACNCwbOvBz8VDmbiKVdmTFUoMPRqTud0tsex8Xy9/boLbDW9HKD1w==
314 |   optionalDependencies:
315 |     fsevents "~2.3.1"
316 | 
317 | semver@^7.5.4:
318 |   version "7.6.0"
319 |   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
320 |   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
321 |   dependencies:
322 |     lru-cache "^6.0.0"
323 | 
324 | signature_pad@^3.0.0-beta.4:
325 |   version "3.0.0-beta.4"
326 |   resolved "https://registry.npmjs.org/signature_pad/-/signature_pad-3.0.0-beta.4.tgz"
327 |   integrity sha512-cOf2NhVuTiuNqe2X/ycEmizvCDXk0DoemhsEpnkcGnA4kS5iJYTCqZ9As7tFBbsch45Q1EdX61833+6sjJ8rrw==
328 | 
329 | source-map-js@^1.0.2:
330 |   version "1.0.2"
331 |   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
332 |   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
333 | 
334 | source-map@^0.6.1:
335 |   version "0.6.1"
336 |   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
337 |   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
338 | 
339 | sourcemap-codec@^1.4.4:
340 |   version "1.4.8"
341 |   resolved "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz"
342 |   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
343 | 
344 | typescript@^4.8.2:
345 |   version "4.8.3"
346 |   resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz"
347 |   integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
348 | 
349 | vite@^2.1.0:
350 |   version "2.1.2"
351 |   resolved "https://registry.npmjs.org/vite/-/vite-2.1.2.tgz"
352 |   integrity sha512-K96k5Nb1kywggFwZNGf/NQVZIrjMSvjebYWFIEQRu8AQWtzxatMF8/reExFXebmrfWAT3PTUk6l4zJBkpMtyVg==
353 |   dependencies:
354 |     esbuild "^0.9.3"
355 |     postcss "^8.2.1"
356 |     resolve "^1.19.0"
357 |     rollup "^2.38.5"
358 |   optionalDependencies:
359 |     fsevents "~2.3.1"
360 | 
361 | vue-template-compiler@^2.7.14:
362 |   version "2.7.16"
363 |   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
364 |   integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
365 |   dependencies:
366 |     de-indent "^1.0.2"
367 |     he "^1.2.0"
368 | 
369 | vue-tsc@^1.8.27:
370 |   version "1.8.27"
371 |   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-1.8.27.tgz#feb2bb1eef9be28017bb9e95e2bbd1ebdd48481c"
372 |   integrity sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==
373 |   dependencies:
374 |     "@volar/typescript" "~1.11.1"
375 |     "@vue/language-core" "1.8.27"
376 |     semver "^7.5.4"
377 | 
378 | vue@^3.2.37:
379 |   version "3.2.37"
380 |   resolved "https://registry.npmjs.org/vue/-/vue-3.2.37.tgz"
381 |   integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
382 |   dependencies:
383 |     "@vue/compiler-dom" "3.2.37"
384 |     "@vue/compiler-sfc" "3.2.37"
385 |     "@vue/runtime-dom" "3.2.37"
386 |     "@vue/server-renderer" "3.2.37"
387 |     "@vue/shared" "3.2.37"
388 | 
389 | yallist@^4.0.0:
390 |   version "4.0.0"
391 |   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
392 |   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
393 | 


--------------------------------------------------------------------------------