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

$api?. => $api. when possible

Browse Source 
Now that this stuff has all been cleaned up with useXContext functions
This commit is contained in:
Ryan Gossiaux
2021-12-18 23:56:37 -08:00
parent 70910c05b0
commit 305dc1543f
13 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/disclosure/Disclosure.svelte
View File

@@ -103,5 +103,5 @@
</script>
<div {...$$restProps}>
<slot open={disclosureState === DisclosureStates.Open} close={$api?.close} />
<slot open={disclosureState === DisclosureStates.Open} close={$api.close} />
</div>

16
src/lib/components/disclosure/DisclosureButton.svelte
View File

@@ -8,11 +8,11 @@
const panelContext = usePanelContext();
const id = `headlessui-disclosure-button-${useId()}`;
$: buttonStore = $api?.buttonStore;
$: panelStore = $api?.panelStore;
$: buttonStore = $api.buttonStore;
$: panelStore = $api.panelStore;
$: isWithinPanel =
panelContext === null ? false : panelContext === $api?.panelId;
panelContext === null ? false : panelContext === $api.panelId;
function handleClick() {
if (disabled) return;
@@ -68,7 +68,7 @@
"aria-expanded": disabled
? undefined
: $api.disclosureState === DisclosureStates.Open,
"aria-controls": $panelStore ? $api?.panelId : undefined,
"aria-controls": $panelStore ? $api.panelId : undefined,
disabled: disabled ? true : undefined,
};
</script>
@@ -80,8 +80,8 @@
on:keydown={handleKeyDown}
>
<slot
open={$api?.disclosureState === DisclosureStates.Open}
close={$api?.close}
open={$api.disclosureState === DisclosureStates.Open}
close={$api.close}
/>
</button>
{:else}
@@ -93,8 +93,8 @@
on:keyup={handleKeyUp}
>
<slot
open={$api?.disclosureState === DisclosureStates.Open}
close={$api?.close}
open={$api.disclosureState === DisclosureStates.Open}
close={$api.close}
/>
</button>
{/if}

10
src/lib/components/disclosure/DisclosurePanel.svelte
View File

@@ -11,17 +11,17 @@
import { useDisclosureContext, DisclosureStates } from "./Disclosure.svelte";
import { State, useOpenClosed } from "$lib/internal/open-closed";
const api = useDisclosureContext("DisclosureButton");
$: id = $api?.panelId;
$: id = $api.panelId;
let openClosedState = useOpenClosed();
setContext(DISCLOSURE_PANEL_CONTEXT_NAME, id);
$: panelStore = $api?.panelStore;
$: panelStore = $api.panelStore;
$: visible =
$openClosedState !== null
? $openClosedState === State.Open
: $api?.disclosureState === DisclosureStates.Open;
: $api.disclosureState === DisclosureStates.Open;
$: propsWeControl = { id };
</script>
@@ -29,8 +29,8 @@
{#if visible}
<div {...{ ...$$restProps, ...propsWeControl }} bind:this={$panelStore}>
<slot
open={$api?.disclosureState === DisclosureStates.Open}
close={$api?.close}
open={$api.disclosureState === DisclosureStates.Open}
close={$api.close}
/>
</div>
{/if}