38 lines
885 B
Svelte
38 lines
885 B
Svelte
<script lang="ts" context="module">
|
|
export interface LabelContext {
|
|
name?: string;
|
|
props?: object;
|
|
register: (value: string) => void;
|
|
labelIds?: string;
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { setContext } from "svelte";
|
|
import { writable, Writable } from "svelte/store";
|
|
export let name: string;
|
|
let labelIds = [];
|
|
let contextStore: Writable<LabelContext> = writable({
|
|
name,
|
|
register,
|
|
props: $$restProps,
|
|
});
|
|
setContext("headlessui-label-context", contextStore);
|
|
|
|
$: contextStore.set({
|
|
name,
|
|
props: $$restProps,
|
|
register,
|
|
labelIds: labelIds.length > 0 ? labelIds.join(" ") : undefined,
|
|
});
|
|
|
|
function register(value: string) {
|
|
labelIds = [...labelIds, value];
|
|
return () => {
|
|
labelIds = labelIds.filter((labelId) => labelId !== value);
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<slot labelledby={$contextStore.labelIds} />
|