mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-17 03:01:25 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(uishell): make component based

Browse source
This commit is contained in:
Marcus Feitoza 2020-03-31 00:10:03 -03:00
commit e24de4e797
24 changed files with 172 additions and 1261 deletions
Download patch file Download diff file Expand all files Collapse all files

73
src/components/UIShell/UIShellNav/UIShellNavSubmenu.svelte
View file

@ -1,73 +0,0 @@
<script>
export let href = undefined;
export let text = undefined;
export let subMenu = undefined;
export let iconDescription = 'Expand/Collapse';
export let expanded = false;
import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
import { cx } from '../../../lib';
let listItemSubMenu = undefined;
window.addEventListener('mouseup', ({ target }) => {
if (listItemSubMenu) {
if (listItemSubMenu.contains(target) || target === listItemSubMenu) {
expanded = !expanded;
} else {
if (expanded) {
expanded = false;
}
}
}
});
</script>
<li class={cx('--header__submenu')} title={iconDescription}>
<a
bind:this={listItemSubMenu}
aria-haspopup="menu"
aria-expanded={expanded}
class={cx('--header__menu-item', '--header__menu-title')}
role="menuitem"
tabindex="0"
aria-label={text}
href="javascript:void(0)"
on:keydown
on:keydown={({ key }) => {
if (key === 'Enter') {
expanded = !expanded;
}
}}
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:focus
on:blur>
{text}
<ChevronDown16 class={cx('--header__menu-arrow')} aria-label={iconDescription} />
</a>
<ul aria-label={href} class={cx('--header__menu')} role="menu">
{#each subMenu as item}
<li role="none">
<a
href={item.href}
class={cx('--header__menu-item')}
role="menuitem"
tabindex="0"
on:click
on:mouseover
on:mouseenter
on:mouseleave
on:keyup
on:keydown
on:focus
on:blur>
<span class={cx('--text-truncate--end')}>{item.text}</span>
</a>
</li>
{/each}
</ul>
</li>