fix: update IconCheckbox event binding from onclick to on:click

This commit is contained in:
Sam Chau
2026-01-19 23:15:12 +10:30
parent 8026bc93c9
commit 1ec8da5742
2 changed files with 7 additions and 8 deletions

View File

@@ -6,7 +6,6 @@
export let color: string = 'accent'; // accent, blue, green, red, or hex color like #FFC230
export let shape: 'square' | 'circle' | 'rounded' = 'rounded';
export let disabled: boolean = false;
export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
// Shape classes
const shapeClasses: Record<string, string> = {
@@ -26,7 +25,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {disabled
? 'cursor-not-allowed opacity-50'
: 'cursor-pointer focus:outline-none'} {checked
@@ -46,7 +45,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
? 'border-accent-600 bg-accent-600 hover:brightness-110 dark:border-accent-500 dark:bg-accent-500'
: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -63,7 +62,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
? 'border-green-600 bg-green-600 hover:brightness-110 dark:border-green-500 dark:bg-green-500'
: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -80,7 +79,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
? 'border-red-600 bg-red-600 hover:brightness-110 dark:border-red-500 dark:bg-red-500'
: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -97,7 +96,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
? 'border-blue-600 bg-blue-600 hover:brightness-110 dark:border-blue-500 dark:bg-blue-500'
: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled
@@ -115,7 +114,7 @@
role="checkbox"
aria-checked={checked}
{disabled}
{onclick}
on:click
class="flex h-5 w-5 items-center justify-center border-2 transition-all {shapeClass} {checked
? 'border-accent-600 bg-accent-600 hover:brightness-110 dark:border-accent-500 dark:bg-accent-500'
: 'border-neutral-300 bg-neutral-50 hover:border-neutral-400 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-neutral-500 dark:hover:bg-neutral-700'} {disabled

View File

@@ -27,7 +27,7 @@
<h3 class="text-sm font-semibold text-neutral-900 dark:text-neutral-50">Navigation</h3>
<div class="space-y-2">
<div class="flex items-center gap-3">
<IconCheckbox icon={Check} checked={useEmojis} onclick={toggle} />
<IconCheckbox icon={Check} checked={useEmojis} on:click={toggle} />
<button type="button" class="flex-1 text-left" onclick={toggle}>
<span class="text-sm font-medium text-neutral-900 dark:text-neutral-50">
Use Emojis