chore(web): migration svelte 5 syntax (#13883)

2024-11-14 08:43:25 -06:00
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
@@ -1,10 +1,18 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
  export type Colors = 'light-gray' | 'gray' | 'dark-gray';
 </script>

 <script lang="ts">
-  export let color: Colors;
-  export let disabled = false;
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    color: Colors;
+    disabled?: boolean;
+    children?: Snippet;
+    onClick?: () => void;
+  }
+
+  let { color, disabled = false, onClick = () => {}, children }: Props = $props();

  const colorClasses: Record<Colors, string> = {
    'light-gray': 'bg-gray-300/80 dark:bg-gray-700',
@@ -23,7 +31,7 @@
  class="flex h-full w-full flex-col place-content-center place-items-center gap-2 px-8 py-2 text-xs text-gray-600 transition-colors dark:text-gray-200 {colorClasses[
    color
  ]} {hoverClasses}"
-  on:click
+  onclick={onClick}
 >
-  <slot />
+  {@render children?.()}
 </button>