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

This commit is contained in:
Alex
2024-11-14 08:43:25 -06:00
committed by GitHub
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions

View File

@@ -1,15 +1,25 @@
<script lang="ts">
/**
* Unique identifier for the checkbox element, used to associate labels with the input element.
*/
export let id: string;
/**
* Optional aria-describedby attribute to associate the checkbox with a description.
*/
export let ariaDescribedBy: string | undefined = undefined;
export let checked = false;
export let disabled = false;
export let onToggle: ((checked: boolean) => void) | undefined = undefined;
interface Props {
/**
* Unique identifier for the checkbox element, used to associate labels with the input element.
*/
id: string;
/**
* Optional aria-describedby attribute to associate the checkbox with a description.
*/
ariaDescribedBy?: string | undefined;
checked?: boolean;
disabled?: boolean;
onToggle?: ((checked: boolean) => void) | undefined;
}
let {
id,
ariaDescribedBy = undefined,
checked = $bindable(false),
disabled = false,
onToggle = undefined,
}: Props = $props();
const handleToggle = (event: Event) => onToggle?.((event.target as HTMLInputElement).checked);
</script>
@@ -20,7 +30,7 @@
class="disabled::cursor-not-allowed h-0 w-0 opacity-0 peer"
type="checkbox"
bind:checked
on:click={handleToggle}
onclick={handleToggle}
{disabled}
aria-describedby={ariaDescribedBy}
/>