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

Also fix label/description context usage

Browse Source
This commit is contained in:
Ryan Gossiaux
2021-12-15 10:31:14 -08:00
parent dbfb2c227e
commit 543c1263e3
5 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/components/description/Description.svelte
View File

@@ -1,12 +1,9 @@
<script lang="ts"> <script lang="ts">
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
import { getContext, onMount } from "svelte"; import { onMount } from "svelte";
import type { Writable } from "svelte/store"; import { useDescriptionContext } from "./DescriptionProvider.svelte";
import type { DescriptionContext } from "./DescriptionProvider.svelte";
const id = `headlessui-description-${useId()}`; const id = `headlessui-description-${useId()}`;
let contextStore: Writable<DescriptionContext> | undefined = getContext( let contextStore = useDescriptionContext();
"headlessui-description-context"
);
if (!contextStore) { if (!contextStore) {
throw new Error( throw new Error(
"You used a <Description /> component, but it is not inside a relevant parent." "You used a <Description /> component, but it is not inside a relevant parent."

11
src/lib/components/description/DescriptionProvider.svelte
View File

@@ -5,10 +5,17 @@
register: (value: string) => void; register: (value: string) => void;
descriptionIds?: string; descriptionIds?: string;
} }
const DESCRIPTION_CONTEXT_NAME = "DescriptionContext";
export function useDescriptionContext():
| Writable<DescriptionContext>
| undefined {
return getContext(DESCRIPTION_CONTEXT_NAME);
}
</script> </script>
<script lang="ts"> <script lang="ts">
import { setContext } from "svelte"; import { getContext, setContext } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
export let name: string; export let name: string;
let descriptionIds = []; let descriptionIds = [];
@@ -17,7 +24,7 @@
register, register,
props: $$restProps, props: $$restProps,
}); });
setContext("headlessui-description-context", contextStore); setContext(DESCRIPTION_CONTEXT_NAME, contextStore);
$: contextStore.set({ $: contextStore.set({
name, name,

9
src/lib/components/label/Label.svelte
View File

@@ -1,13 +1,10 @@
<script lang="ts"> <script lang="ts">
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
import { getContext, onMount } from "svelte"; import { onMount } from "svelte";
import type { Writable } from "svelte/store"; import { useLabelContext } from "./LabelProvider.svelte";
import type { LabelContext } from "./LabelProvider.svelte";
const id = `headlessui-label-${useId()}`; const id = `headlessui-label-${useId()}`;
export let passive = false; export let passive = false;
let contextStore: Writable<LabelContext> | undefined = getContext( let contextStore = useLabelContext();
"headlessui-label-context"
);
if (!contextStore) { if (!contextStore) {
throw new Error( throw new Error(
"You used a <Label /> component, but it is not inside a relevant parent." "You used a <Label /> component, but it is not inside a relevant parent."

9
src/lib/components/label/LabelProvider.svelte
View File

@@ -5,10 +5,15 @@
register: (value: string) => void; register: (value: string) => void;
labelIds?: string; labelIds?: string;
} }
const LABEL_CONTEXT_NAME = "LabelContext";
export function useLabelContext(): Writable<LabelContext> | undefined {
return getContext(LABEL_CONTEXT_NAME);
}
</script> </script>
<script lang="ts"> <script lang="ts">
import { setContext } from "svelte"; import { getContext, setContext } from "svelte";
import { writable, Writable } from "svelte/store"; import { writable, Writable } from "svelte/store";
export let name: string; export let name: string;
let labelIds = []; let labelIds = [];
@@ -17,7 +22,7 @@
register, register,
props: $$restProps, props: $$restProps,
}); });
setContext("headlessui-label-context", contextStore); setContext(LABEL_CONTEXT_NAME, contextStore);
$: contextStore.set({ $: contextStore.set({
name, name,

9
src/lib/components/switch/Switch.svelte
View File

@@ -1,7 +1,10 @@
<script lang="ts"> <script lang="ts">
import { useSwitchContext } from "./SwitchGroup.svelte"; import { useSwitchContext } from "./SwitchGroup.svelte";
import type { LabelContext } from "$lib/components/label/LabelProvider.svelte"; import type { LabelContext } from "$lib/components/label/LabelProvider.svelte";
import type { DescriptionContext } from "$lib/components/description/DescriptionProvider.svelte"; import {
DescriptionContext,
useDescriptionContext,
} from "$lib/components/description/DescriptionProvider.svelte";
import { useId } from "$lib/hooks/use-id"; import { useId } from "$lib/hooks/use-id";
import { Keys } from "$lib/utils/keyboard"; import { Keys } from "$lib/utils/keyboard";
import { getContext, createEventDispatcher } from "svelte"; import { getContext, createEventDispatcher } from "svelte";
@@ -13,9 +16,7 @@
let labelContext: Writable<LabelContext> | undefined = getContext( let labelContext: Writable<LabelContext> | undefined = getContext(
"headlessui-label-context" "headlessui-label-context"
); );
let descriptionContext: Writable<DescriptionContext> | undefined = getContext( let descriptionContext = useDescriptionContext();
"headlessui-description-context"
);
let id = `headlessui-switch-${useId()}`; let id = `headlessui-switch-${useId()}`;
$: switchStore = $api?.switchStore; $: switchStore = $api?.switchStore;
let internalSwitchRef = null; let internalSwitchRef = null;