mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: lift components folder

Browse source
This commit is contained in:
Eric Liu 2020-07-19 09:06:08 -07:00
commit 2200b29b92
301 changed files with 57 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

58
src/components/Tabs/Tab.svelte
View file

@ -1,58 +0,0 @@
<script>
export let disabled = false;
export let href = "#";
export let label = "";
export let role = "presentation";
export let tabindex = "0";
export let id = "ccs-" + Math.random().toString(36);
export let ref = null;
import { getContext } from "svelte";
const { selectedTab, add, update, change } = getContext("Tabs");
add({ id, label, disabled });
$: selected = $selectedTab === id;
$: if (selected && ref) {
ref.focus();
}
</script>
<li
tabindex="-1"
{role}
class:bx--tabs__nav-item={true}
class:bx--tabs__nav-item--disabled={disabled}
class:bx--tabs__nav-item--selected={selected}
{...$$restProps}
on:click|preventDefault={() => {
if (!disabled) {
update(id);
}
}}
on:mouseover
on:mouseenter
on:mouseleave
on:keydown={({ key }) => {
if (!disabled) {
if (key === 'ArrowRight') {
change(1);
} else if (key === 'ArrowLeft') {
change(-1);
} else if (key === ' ' || key === 'Enter') {
update(id);
}
}
}}>
<a
bind:this={ref}
role="tab"
tabindex={disabled ? '-1' : tabindex}
aria-selected={selected}
aria-disabled={disabled}
{href}
class:bx--tabs__nav-link={true}>
{label}
</a>
</li>