e16e27f04e
Fixes #29 Upstream Headless UI handles this for Radio Group but not for the others. I didn't see any reason why not to implement this for the other ones too.
120 lines
3.4 KiB
Svelte
120 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import { Focus, focusIn } from "$lib/utils/focus-management";
|
|
import { Keys } from "$lib/utils/keyboard";
|
|
import { match } from "$lib/utils/match";
|
|
import { useTabsContext } from "./TabGroup.svelte";
|
|
import { useId } from "$lib/hooks/use-id";
|
|
import { forwardEventsBuilder } from "$lib/internal/forwardEventsBuilder";
|
|
import { get_current_component } from "svelte/internal";
|
|
import type { SupportedAs } from "$lib/internal/elements";
|
|
import type { HTMLActionArray } from "$lib/hooks/use-actions";
|
|
import Render from "$lib/utils/Render.svelte";
|
|
import { resolveButtonType } from "$lib/utils/resolve-button-type";
|
|
const forwardEvents = forwardEventsBuilder(get_current_component());
|
|
|
|
export let as: SupportedAs = "button";
|
|
export let use: HTMLActionArray = [];
|
|
|
|
export let disabled = false;
|
|
|
|
let api = useTabsContext("Tab");
|
|
let id = `headlessui-tabs-tab-${useId()}`;
|
|
let tabRef: HTMLElement | null = null;
|
|
|
|
onMount(() => {
|
|
$api.registerTab(tabRef);
|
|
return () => $api.unregisterTab(tabRef);
|
|
});
|
|
|
|
$: myIndex = tabRef ? $api.tabs.indexOf(tabRef) : -1;
|
|
$: selected = myIndex === $api.selectedIndex;
|
|
|
|
function handleKeyDown(e: CustomEvent) {
|
|
let event = e as any as KeyboardEvent;
|
|
let list = $api.tabs.filter(Boolean) as HTMLElement[];
|
|
|
|
if (event.key === Keys.Space || event.key === Keys.Enter) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
$api.setSelectedIndex(myIndex);
|
|
return;
|
|
}
|
|
|
|
switch (event.key) {
|
|
case Keys.Home:
|
|
case Keys.PageUp:
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
return focusIn(list, Focus.First);
|
|
|
|
case Keys.End:
|
|
case Keys.PageDown:
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
return focusIn(list, Focus.Last);
|
|
}
|
|
|
|
return match($api.orientation, {
|
|
vertical() {
|
|
if (event.key === Keys.ArrowUp)
|
|
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
|
if (event.key === Keys.ArrowDown)
|
|
return focusIn(list, Focus.Next | Focus.WrapAround);
|
|
return;
|
|
},
|
|
horizontal() {
|
|
if (event.key === Keys.ArrowLeft)
|
|
return focusIn(list, Focus.Previous | Focus.WrapAround);
|
|
if (event.key === Keys.ArrowRight)
|
|
return focusIn(list, Focus.Next | Focus.WrapAround);
|
|
return;
|
|
},
|
|
});
|
|
}
|
|
|
|
function handleFocus() {
|
|
tabRef?.focus();
|
|
}
|
|
|
|
function handleSelection() {
|
|
if (disabled) return;
|
|
|
|
tabRef?.focus();
|
|
$api.setSelectedIndex(myIndex);
|
|
}
|
|
|
|
$: myPanelRef = $api.panels[myIndex]?.ref;
|
|
$: propsWeControl = {
|
|
id,
|
|
role: "tab",
|
|
type: resolveButtonType({ type: $$props.type, as }, tabRef),
|
|
"aria-controls": $myPanelRef ? $api.panels[myIndex]?.id : undefined,
|
|
"aria-selected": selected,
|
|
tabIndex: selected ? 0 : -1,
|
|
disabled: disabled ? true : undefined,
|
|
};
|
|
$: if (process.env.NODE_ENV === "test") {
|
|
Object.assign(propsWeControl, { ["data-headlessui-index"]: myIndex });
|
|
}
|
|
|
|
$: slotProps = { selected };
|
|
</script>
|
|
|
|
<Render
|
|
{...{ ...$$restProps, ...propsWeControl }}
|
|
{as}
|
|
{slotProps}
|
|
use={[...use, forwardEvents]}
|
|
name={"Tab"}
|
|
bind:el={tabRef}
|
|
on:keydown={handleKeyDown}
|
|
on:click={handleSelection}
|
|
on:focus={$api.activation === "manual" ? handleFocus : handleSelection}
|
|
>
|
|
<slot {...slotProps} />
|
|
</Render>
|