svelte 5

1 files changed, 32 insertions, 18 deletions

diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index fb17c612..da53577e 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,28 +1,36 @@
-<script>
+<script lang="ts">
+  import { run, createBubbler, preventDefault } from "svelte/legacy";
+
+  const bubble = createBubbler();
   import { t } from "$lib/translations";
   import { post, success, fail, focus, setCookie } from "$lib/utils";
   import Pinpad from "$comp/Pinpad.svelte";
   import { pin } from "$lib/store";
   import { onMount } from "svelte";
 
-  export let value = "";
-  export let title = $t("user.settings.verifyPIN");
-  export let cancel = () => (p = "");
-  export let notify = true;
+  interface Props {
+    value?: string;
+    title?: any;
+    cancel?: any;
+    notify?: boolean;
+  }
 
-  let p = "";
+  let {
+    value = $bindable(""),
+    title = $t("user.settings.verifyPIN"),
+    cancel = () => (p = ""),
+    notify = true,
+  }: Props = $props();
 
-  $: update(value);
-  let update = (value) => (p = value);
+  let p = $state("");
 
-  $: p.toString().length > 5 && (value = p.toString());
+  let update = (value) => (p = value);
 
-  let loaded;
+  let loaded = $state();
   onMount(() => setTimeout(() => (loaded = true), 500));
 
-  let locktime = 30 * 60;
+  let locktime = $state(30 * 60);
 
-  $: loaded && checkPin(p);
   let checkPin = async (p) => {
     if (p?.length !== 6) return;
     let result;
@@ -41,12 +49,21 @@
       value = "";
     }
   };
+  run(() => {
+    p.toString().length > 5 && (value = p.toString());
+  });
+  run(() => {
+    update(value);
+  });
+  run(() => {
+    loaded && checkPin(p);
+  });
 </script>
 
 {#if loaded}
   <div
     class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
-    on:click|preventDefault
+    onclick={preventDefault(bubble("click"))}
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
@@ -58,10 +75,7 @@
         <label for="locktime" class="font-bold"
           >{$t("user.settings.rememberFor")}</label
         >
-        <select
-          name="locktime"
-          bind:value={locktime}
-        >
+        <select name="locktime" bind:value={locktime}>
           <option value={30}>30 {$t("user.settings.seconds")}</option>
           <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
           <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
@@ -72,7 +86,7 @@
       </div>
 
       <div class="w-full flex">
-        <button class="btn" on:click|preventDefault={cancel}>
+        <button class="btn" onclick={preventDefault(cancel)}>
           <div class="my-auto">Cancel</div>
         </button>
       </div>