Merge pull request #4 from CaptainCodeman/update

Update

Author: CaptainCodeman

README.md

@@ -12,17 +12,19 @@ Import action into page and pass and object with `ondraw` and `oncomplete` metho
 
 Each will receive a path which can be rendered as SVG in your component. `ondraw` fires _while the user is drawing_ and would be the current stroke. `oncomplete` fires when they have finished the line (which could transition to a different color).
 
+The stroke options can be override if desired.
+
 ## Example
 
 ```svelte
 <script lang="ts">
   import { signature } from 'svelte-signature-pad'
 
-  let layers: { path: string; width: number; height: number }[] = []
+  let layers: { path: string; width: number; height: number }[] = $state([])
 
-  let width: number
-  let height: number
-  let preview: string
+  let width = $state(0)
+  let height = $state(0)
+  let preview = $state<string>()
 
   const ondraw = (path: string) => (preview = path)
   const oncomplete = (path: string) => {
@@ -36,13 +38,13 @@ Each will receive a path which can be rendered as SVG in your component. `ondraw
 </script>
 
 <div class="relative w-full h-[360px] bg-gray-100 border border-dashed border-gray-300">
-  <div class="absolute left-4 right-4 bottom-24 border-t border-dotted border-gray-300" />
+  <div class="absolute left-4 right-4 bottom-24 border-t border-dotted border-gray-300"></div>
   <div
     class="w-full h-full"
     use:signature={{ ondraw, oncomplete }}
     bind:clientWidth={width}
     bind:clientHeight={height}
-    on:touchmove|preventDefault={() => false}
+    ontouchmove={e => e.preventDefault()}
   >
     {#each layers as layer}
       <svg class="absolute w-full h-full fill-black pointer-events-none" viewBox="0 0 {layer.width} {layer.height}">
@@ -56,7 +58,7 @@ Each will receive a path which can be rendered as SVG in your component. `ondraw
       </svg>
     {/if}
   </div>
-  <button class="absolute top-2 right-2 px-4 py-2 text-sm text-gray-500 bg-white border border-gray-200" on:click={clear}>Clear</button>
+  <button class="absolute top-2 right-2 px-4 py-2 text-sm text-gray-500 bg-white border border-gray-200" onclick={clear}>Clear</button>
 </div>
 
 <p class="mt-2 text-sm">Please sign on the dotted line to indicate that you agree to all the legal terms we all know you didn't read. Thank you!</p>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-signature-pad",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "keywords": [
     "svelte",
@@ -23,7 +23,7 @@
   "homepage": "https://captaincodeman.github.io/svelte-signature-pad/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/captaincodeman/svelte-signature-pad.git"
+    "url": "git+https://github.com/captaincodeman/svelte-signature-pad.git"
   },
   "author": {
     "name": "Simon Green",
@@ -41,24 +41,23 @@
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },
   "peerDependencies": {
-    "svelte": "^3.54.0 || ^4.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "^2.0.2",
-    "@sveltejs/kit": "^1.20.4",
-    "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.24",
-    "postcss-load-config": "^4.0.1",
-    "publint": "^0.1.12",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.4.4",
-    "tailwindcss": "^3.3.2",
+    "@sveltejs/adapter-static": "^3.0.0",
+    "@sveltejs/kit": "^2.48.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@tailwindcss/vite": "^4.1.17",
+    "publint": "^0.3.15",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.17",
     "tslib": "^2.5.3",
-    "tsup": "^7.0.0",
-    "typescript": "^5.1.3",
-    "vite": "^4.3.9"
+    "tsup": "^8.5.1",
+    "typescript": "^5.5.0",
+    "vite": "^7.2.4"
   },
   "dependencies": {
-    "perfect-freehand": "^1.2.0"
+    "perfect-freehand": "^1.2.2"
   }
 }