refactor: simplify color-picker by binding directly to value
- commit
- 8769977bfbc45401b462b8b3e890a2d7c0efe8fd
- author
- brice · · 2026-01-24 16:40 UTC
- parent
- 5c01908
- signature
- GPG Verified
CD88F9E564E0102646FB6077A1A07C7C7C3E349D· arch-gpg Verified for the committer email
1 file · +3 -11
M webui/src/lib/components/ui/color-picker/color-picker.svelte +3 -11
| @@ -21,14 +21,6 @@ | |||
| 21 | 21 | ||
| 22 | 22 | let open = $state(false); | |
| 23 | 23 | ||
| 24 | - | // svelte-awesome-color-picker uses hex binding - use state to sync with value | |
| 25 | - | let hex = $state(value); | |
| 26 | - | ||
| 27 | - | // Sync hex when value changes externally | |
| 28 | - | $effect(() => { | |
| 29 | - | hex = value; | |
| 30 | - | }); | |
| 31 | - | ||
| 32 | 24 | function handleInput(event: { hex: string | null }) { | |
| 33 | 25 | if (event.hex) { | |
| 34 | 26 | value = event.hex; | |
| @@ -59,7 +51,7 @@ | |||
| 59 | 51 | sideOffset={4} | |
| 60 | 52 | > | |
| 61 | 53 | <ColorPicker | |
| 62 | - | bind:hex | |
| 54 | + | bind:hex={value} | |
| 63 | 55 | onInput={handleInput} | |
| 64 | 56 | isDialog={false} | |
| 65 | 57 | /> | |
| @@ -67,10 +59,10 @@ | |||
| 67 | 59 | <div class="mt-2 flex items-center gap-2"> | |
| 68 | 60 | <span | |
| 69 | 61 | class="block h-6 w-6 shrink-0 border border-border" | |
| 70 | - | style="background-color: {hex};" | |
| 62 | + | style="background-color: {value};" | |
| 71 | 63 | aria-hidden="true" | |
| 72 | 64 | ></span> | |
| 73 | - | <span class="font-mono text-sm text-foreground">{hex}</span> | |
| 65 | + | <span class="font-mono text-sm text-foreground">{value}</span> | |
| 74 | 66 | </div> | |
| 75 | 67 | </Popover.Content> | |
| 76 | 68 | </Popover.Portal> | |
| @@ -21,14 +21,6 @@ | |||||
| 21 | 21 | ||||
| 22 | let open = $state(false); | 22 | let open = $state(false); | ||
| 23 | 23 | ||||
| 24 | - | // svelte-awesome-color-picker uses hex binding - use state to sync with value | |||
| 25 | - | let hex = $state(value); | |||
| 26 | - | ||||
| 27 | - | // Sync hex when value changes externally | |||
| 28 | - | $effect(() => { | |||
| 29 | - | hex = value; | |||
| 30 | - | }); | |||
| 31 | - | ||||
| 32 | function handleInput(event: { hex: string | null }) { | 24 | function handleInput(event: { hex: string | null }) { | ||
| 33 | if (event.hex) { | 25 | if (event.hex) { | ||
| 34 | value = event.hex; | 26 | value = event.hex; | ||
| @@ -59,7 +51,7 @@ | |||||
| 59 | sideOffset={4} | 51 | sideOffset={4} | ||
| 60 | > | 52 | > | ||
| 61 | <ColorPicker | 53 | <ColorPicker | ||
| 62 | - | bind:hex | 54 | + | bind:hex={value} |
| 63 | onInput={handleInput} | 55 | onInput={handleInput} | ||
| 64 | isDialog={false} | 56 | isDialog={false} | ||
| 65 | /> | 57 | /> | ||
| @@ -67,10 +59,10 @@ | |||||
| 67 | <div class="mt-2 flex items-center gap-2"> | 59 | <div class="mt-2 flex items-center gap-2"> | ||
| 68 | <span | 60 | <span | ||
| 69 | class="block h-6 w-6 shrink-0 border border-border" | 61 | class="block h-6 w-6 shrink-0 border border-border" | ||
| 70 | - | style="background-color: {hex};" | 62 | + | style="background-color: {value};" |
| 71 | aria-hidden="true" | 63 | aria-hidden="true" | ||
| 72 | ></span> | 64 | ></span> | ||
| 73 | - | <span class="font-mono text-sm text-foreground">{hex}</span> | 65 | + | <span class="font-mono text-sm text-foreground">{value}</span> |
| 74 | </div> | 66 | </div> | ||
| 75 | </Popover.Content> | 67 | </Popover.Content> | ||
| 76 | </Popover.Portal> | 68 | </Popover.Portal> | ||