public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Clean up Listbox store/context usage

Browse Source 
Fixes #9
This commit is contained in:
Ryan Gossiaux
2021-12-18 23:07:55 -08:00
parent 1966219b30
commit 4d47ba89a6
5 changed files with 37 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/lib/components/listbox/ListboxLabel.svelte
View File

@@ -1,18 +1,19 @@
<script lang="ts">
import { getContext } from "svelte";
import { ListboxStates, useListboxContext } from "./Listbox.svelte";
import { useId } from "$lib/hooks/use-id";
let api = useListboxContext("ListboxLabel");
let id = `headlessui-listbox-label-${useId()}`;
let labelStore: SvelteStore<HTMLLabelElement> = getContext("labelStore");
let api = useListboxContext("ListboxLabel");
function handleClick() {
$api.buttonRef?.focus({ preventScroll: true });
let labelRef = $api.labelRef;
let buttonRef = $api.buttonRef;
function handleClick(): void {
$buttonRef?.focus({ preventScroll: true });
}
</script>
<!-- svelte-ignore a11y-label-has-associated-control -->
<label {...$$restProps} {id} bind:this={$labelStore} on:click={handleClick}>
<label {...$$restProps} {id} bind:this={$labelRef} on:click={handleClick}>
<slot
open={$api.listboxState === ListboxStates.Open}
disabled={$api.disabled}