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

6
src/lib/components/dialog/Dialog.svelte
View File

@@ -142,7 +142,7 @@
if (containers.size !== 1) return;
if (contains(containers, target)) return;
$api?.close();
$api.close();
await tick();
target?.focus();
}
@@ -154,7 +154,7 @@
if (containers.size > 1) return; // 1 is myself, otherwise other elements in the Stack
event.preventDefault();
event.stopPropagation();
$api?.close();
$api.close();
}
let mounted = false;
@@ -202,7 +202,7 @@
entry.boundingClientRect.width === 0 &&
entry.boundingClientRect.height === 0
) {
$api?.close();
$api.close();
}
}
});

4
src/lib/components/dialog/DialogOverlay.svelte
View File

@@ -7,7 +7,7 @@
if (event.target !== event.currentTarget) return;
event.preventDefault();
event.stopPropagation();
$api?.close();
$api.close();
}
$: propsWeControl = {
id,
@@ -16,5 +16,5 @@
</script>
<div {...{ ...$$restProps, ...propsWeControl }} on:click={handleClick}>
<slot open={$api?.dialogState === DialogStates.Open} />
<slot open={$api.dialogState === DialogStates.Open} />
</div>

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}

4
src/lib/components/listbox/ListboxButton.svelte
View File

@@ -65,9 +65,9 @@
"aria-controls": $optionsRef?.id,
"aria-expanded": $api.disabled
? undefined
: $api?.listboxState === ListboxStates.Open,
: $api.listboxState === ListboxStates.Open,
"aria-labelledby": $labelRef ? [$labelRef?.id, id].join(" ") : undefined,
disabled: $api?.disabled === true ? true : undefined,
disabled: $api.disabled === true ? true : undefined,
};
</script>

12
src/lib/components/listbox/ListboxOption.svelte
View File

@@ -11,11 +11,11 @@
let buttonRef = $api.buttonRef;
$: active =
$api?.activeOptionIndex !== null
? $api?.options[$api.activeOptionIndex].id === id
$api.activeOptionIndex !== null
? $api.options[$api.activeOptionIndex].id === id
: false;
$: selected = $api?.value === value;
$: selected = $api.value === value;
$: dataRef = {
disabled,
value,
@@ -33,7 +33,7 @@
onMount(() => $api.registerOption(id, dataRef));
onDestroy(() => $api.unregisterOption(id));
let oldState = $api?.listboxState;
let oldState = $api.listboxState;
let oldSelected = selected;
let oldActive = active;
async function updateFocus(
@@ -45,7 +45,7 @@
await tick();
if (newState !== oldState || newSelected !== oldSelected) {
if (newState === ListboxStates.Open && newSelected) {
$api?.goToOption(Focus.Specific, id);
$api.goToOption(Focus.Specific, id);
}
}
if (newState !== oldState || newActive !== oldActive) {
@@ -57,7 +57,7 @@
oldSelected = newSelected;
oldActive = newActive;
}
$: updateFocus($api?.listboxState, selected, active);
$: updateFocus($api.listboxState, selected, active);
async function handleClick(event: MouseEvent) {
if (disabled) return event.preventDefault();

8
src/lib/components/listbox/ListboxOptions.svelte
View File

@@ -91,11 +91,11 @@
$: propsWeControl = {
"aria-activedescendant":
$api?.activeOptionIndex === null
$api.activeOptionIndex === null
? undefined
: $api?.options[$api.activeOptionIndex]?.id,
: $api.options[$api.activeOptionIndex]?.id,
"aria-labelledby": $labelRef?.id ?? $buttonRef?.id,
"aria-orientation": $api?.orientation,
"aria-orientation": $api.orientation,
id,
role: "listbox",
tabIndex: 0,
@@ -115,6 +115,6 @@
{...$$restProps}
{...propsWeControl}
>
<slot open={$api?.listboxState === ListboxStates.Open} />
<slot open={$api.listboxState === ListboxStates.Open} />
</ul>
{/if}

6
src/lib/components/menu/MenuButton.svelte
View File

@@ -10,8 +10,8 @@
const api = useMenuContext("MenuButton");
const id = `headlessui-menu-button-${useId()}`;
$: buttonStore = $api?.buttonStore;
$: itemsStore = $api?.itemsStore;
$: buttonStore = $api.buttonStore;
$: itemsStore = $api.itemsStore;
async function handleKeyDown(event: KeyboardEvent) {
switch (event.key) {
// Ref: https://www.w3.org/TR/wai-aria-practices-1.2/#keyboard-interaction-13
@@ -80,5 +80,5 @@
on:keydown={handleKeyDown}
on:keyup={handleKeyUp}
>
<slot open={$api?.menuState === MenuStates.Open} />
<slot open={$api.menuState === MenuStates.Open} />
</button>

8
src/lib/components/menu/MenuItem.svelte
View File

@@ -10,11 +10,11 @@
const id = `headlessui-menu-item-${useId()}`;
$: active =
$api?.activeItemIndex !== null
? $api?.items[$api?.activeItemIndex].id === id
$api.activeItemIndex !== null
? $api.items[$api.activeItemIndex].id === id
: false;
$: buttonStore = $api?.buttonStore;
$: buttonStore = $api.buttonStore;
let elementRef: HTMLDivElement | undefined;
$: textValue = elementRef?.textContent?.toLowerCase().trim();
@@ -22,7 +22,7 @@
onMount(async () => {
await tick();
$api?.registerItem(id, data);
$api.registerItem(id, data);
});
onDestroy(() => {

6
src/lib/components/menu/MenuItems.svelte
View File

@@ -12,8 +12,8 @@
const id = `headlessui-menu-items-${useId()}`;
let searchDebounce: ReturnType<typeof setTimeout> | null = null;
$: buttonStore = $api?.buttonStore;
$: itemsStore = $api?.itemsStore;
$: buttonStore = $api.buttonStore;
$: itemsStore = $api.itemsStore;
let openClosedState = useOpenClosed();
@@ -24,7 +24,7 @@
$: treeWalker({
container: $itemsStore,
enabled: $api?.menuState === MenuStates.Open,
enabled: $api.menuState === MenuStates.Open,
accept(node) {
if (node.getAttribute("role") === "menuitem")
return NodeFilter.FILTER_REJECT;

12
src/lib/components/radio-group/RadioGroupOption.svelte
View File

@@ -20,15 +20,15 @@
let state = OptionState.Empty;
function updateOption(option: Option) {
$api?.unregisterOption(option.id);
$api?.registerOption(option);
$api.unregisterOption(option.id);
$api.registerOption(option);
}
$: updateOption({ id, element: optionRef, propsRef });
onDestroy(() => $api?.unregisterOption(id));
onDestroy(() => $api.unregisterOption(id));
$: isFirstOption = $api?.firstOption?.id === id;
$: isDisabled = $api?.disabled || disabled;
$: checked = $api?.value === value;
$: isFirstOption = $api.firstOption?.id === id;
$: isDisabled = $api.disabled || disabled;
$: checked = $api.value === value;
$: tabIndex = (() => {
if (isDisabled) return -1;

6
src/lib/components/tabs/Tab.svelte
View File

@@ -22,13 +22,13 @@
$: selected = myIndex === $api.selectedIndex;
function handleKeyDown(event: KeyboardEvent) {
let list = $api?.tabs.filter(Boolean) as HTMLElement[];
let list = $api.tabs.filter(Boolean) as HTMLElement[];
if (event.key === Keys.Space || event.key === Keys.Enter) {
event.preventDefault();
event.stopPropagation();
$api?.setSelectedIndex(myIndex);
$api.setSelectedIndex(myIndex);
return;
}
@@ -74,7 +74,7 @@
if (disabled) return;
tabRef?.focus();
$api?.setSelectedIndex(myIndex);
$api.setSelectedIndex(myIndex);
}
$: propsWeControl = {