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

sidenave finished

Browse source
This commit is contained in:
Adan Ulloa 2020-01-15 15:03:59 -06:00
commit 6be928a2d3
8 changed files with 1488 additions and 1842 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -15,6 +15,7 @@
"prepublishOnly": "yarn build" "prepublishOnly": "yarn build"
}, },
"dependencies": { "dependencies": {
"bin-links": ">=1.1.6",
"carbon-icons-svelte": "^10.8.1", "carbon-icons-svelte": "^10.8.1",
"flatpickr": "^4.6.3" "flatpickr": "^4.6.3"
}, },

69
src/components/UIShell/UIShell.Story.svelte
View file

@ -4,8 +4,13 @@
import UIShell from './UIShell.svelte'; import UIShell from './UIShell.svelte';
import FormTest from './FormTest.svelte'; import FormTest from './FormTest.svelte';
import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20'; import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
import Recommend16 from 'carbon-icons-svelte/lib/Recommend16';
import Settings16 from 'carbon-icons-svelte/lib/Settings16';
import { leftPanelActions, leftPanelTypes } from './constants'; import { leftPanelActions, leftPanelTypes } from './constants';
import searchStore from './searchStore'; import searchStore from './searchStore';
import isNavItemSelectedStore from './UIShellSideNav/isNavItemSelectedStore';
const navMenu = [ const navMenu = [
{ {
@ -200,48 +205,94 @@
subMenu: [ subMenu: [
{ {
href: '#', href: '#',
text: 'Sub-link 1' text: 'Cat 1 Sub-link 1'
}, },
{ {
href: '#', href: '#',
text: 'Sub-link 2' text: 'Cat 1 Sub-link 2'
}, },
{ {
href: '#', href: '#',
text: 'Sub-link 3' text: 'Cat 1 Sub-link 3'
}
],
icon: [
{
class: undefined,
skeleton: false,
render: ChangeCatalog16,
title: 'Catalog',
tabIndex: 0,
focusable: false,
style: undefined
} }
] ]
}, },
{ {
href: '#', href: '#',
text: 'Link 2', text: 'Link 2',
subMenu: undefined subMenu: undefined,
icon: [
{
class: undefined,
skeleton: false,
render: ManageProtection16,
title: 'Protection',
tabIndex: 0,
focusable: false,
style: undefined
}
]
}, },
{ {
href: '#', href: '#',
text: 'Link 3', text: 'Link 3',
subMenu: undefined subMenu: undefined,
icon: [
{
class: undefined,
skeleton: false,
render: Recommend16,
title: 'Recommend',
tabIndex: 0,
focusable: false,
style: undefined
}
]
}, },
{ {
href: undefined, href: undefined,
text: 'Link 4', text: 'Category 2',
subMenu: [ subMenu: [
{ {
href: '#', href: '#',
text: 'Sub-link 1' text: 'Cat 2 Sub-link 1'
}, },
{ {
href: '#', href: '#',
text: 'Sub-link 2' text: 'Cat 2 Sub-link 2'
}, },
{ {
href: '#', href: '#',
text: 'Sub-link 3' text: 'Cat 2 Sub-link 3'
}
],
icon: [
{
class: undefined,
skeleton: false,
render: Settings16,
title: 'Settings',
tabIndex: 0,
focusable: false,
style: undefined
} }
] ]
} }
]; ];
isNavItemSelectedStore.setStoreValues(sideNavMenu);
function searchInStore(event) { function searchInStore(event) {
if (event.detail.action === leftPanelActions.search.actionString) { if (event.detail.action === leftPanelActions.search.actionString) {
searchStore.search(event.detail.textInput); searchStore.search(event.detail.textInput);

6
src/components/UIShell/UIShell.svelte
View file

@ -50,8 +50,10 @@
<UIShellRightPanel {rightPanel} on:inputSearch /> <UIShellRightPanel {rightPanel} on:inputSearch />
{/if} {/if}
{#if sideNavMenu} {#if sideNavMenu}
<UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth={winWidth}> <UIShellSideNavWrapper bind:isOpen={isSideNavOpen} bind:winWidth>
<UIShellSideNavItem /> {#each sideNavMenu as itemSideMenu}
<UIShellSideNavItem {...itemSideMenu} />
{/each}
</UIShellSideNavWrapper> </UIShellSideNavWrapper>
{/if} {/if}
</header> </header>

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

@ -33,7 +33,6 @@
tabindex="0" tabindex="0"
aria-label={text} aria-label={text}
href="javascript:void(0)" href="javascript:void(0)"
on:keydown
on:keydown={({ key }) => { on:keydown={({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
expanded = !expanded; expanded = !expanded;

256
src/components/UIShell/UIShellSideNav/UIShellSideNavItem.svelte
View file

@ -1,185 +1,81 @@
<li class="bx--side-nav__item bx--side-nav__item--icon"> <script>
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button"> export let href = undefined;
<div class="bx--side-nav__icon"> export let text = undefined;
<svg export let subMenu = undefined;
width="16" export let icon = undefined;
height="16" export let expanded = false;
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32" import { cx } from '../../../lib';
aria-hidden="true"> import { onDestroy } from 'svelte';
<path import Icon from '../../Icon/Icon.svelte';
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2 import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14 import isNavItemSelectedStore from './isNavItemSelectedStore';
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2 import UIShellSideNavSubMenu from './UIShellSideNavSubMenu.svelte';
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg> let isSelected = undefined;
const unsubscribe = isNavItemSelectedStore.subscribe(values => {
values.forEach(item => {
if (item.id === text) {
isSelected = item.isSelected;
}
});
});
let iconProps = {
class: undefined,
skeleton: false,
render: ChevronDown16,
title: 'Open Menu',
tabIndex: 0,
focusable: false,
style: undefined
};
onDestroy(() => {
unsubscribe();
});
</script>
{#if href}
<li class={cx('--side-nav__item')}>
<a
{href}
class={cx('--side-nav__link', isSelected && '--side-nav__link--current')}
aria-current={isSelected ? 'page' : ''}
on:click={() => isNavItemSelectedStore.setSelected(text)}>
<div class={cx('--side-nav__icon', '--side-nav__icon--small')}>
{#if icon}
<Icon {...icon[0]} />
{/if}
</div> </div>
<span class="bx--side-nav__submenu-title">Category title</span> <span class={cx('--side-nav__link-text')}>{text}</span>
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"> </a>
<svg </li>
focusable="false" {:else}
preserveAspectRatio="xMidYMid meet" <li class={cx('--side-nav__item', '--side-nav__item--icon')}>
xmlns="http://www.w3.org/2000/svg" <button
width="20" aria-haspopup="true"
height="20" aria-expanded={expanded}
viewBox="0 0 32 32" class={cx('--side-nav__submenu')}
aria-hidden="true" type="button"
style="will-change: transform;"> on:click={() => {
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" /> expanded = !expanded;
</svg> }}>
<div class={cx('--side-nav__icon')}>
<Icon {...icon[0]} />
</div>
<span class={cx('--side-nav__submenu-title')}>{text}</span>
<div class={cx('--side-nav__icon', '--side-nav__icon--small', '--side-nav__submenu-chevron')}>
{#if icon}
<Icon {...iconProps} />
{/if}
</div> </div>
</button> </button>
<ul class="bx--side-nav__menu" role="menu"> <ul class={cx('--side-nav__menu')} role="menu">
<li class="bx--side-nav__menu-item" role="none"> {#each subMenu as menuItem}
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem"> <UIShellSideNavSubMenu {...menuItem} />
<span class="bx--side-nav__link-text">Link</span> {/each}
</a>
</li>
<li class="bx--side-nav__menu-item" role="none">
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
<li class="bx--side-nav__menu-item" role="none">
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
</ul> </ul>
</li>
<li class="bx--side-nav__item bx--side-nav__item--icon">
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
<div class="bx--side-nav__icon">
<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true">
<path
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
<span class="bx--side-nav__submenu-title">Category title</span>
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
<svg
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
style="will-change: transform;">
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
</svg>
</div>
</button>
<ul class="bx--side-nav__menu" role="menu">
<li class="bx--side-nav__menu-item" role="none">
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li> </li>
<li class="bx--side-nav__menu-item" role="none"> {/if}
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
<li class="bx--side-nav__menu-item" role="none">
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
</ul>
</li>
<li class="bx--side-nav__item bx--side-nav__item--icon">
<button aria-haspopup="true" aria-expanded="false" class="bx--side-nav__submenu" type="button">
<div class="bx--side-nav__icon">
<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true">
<path
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
<span class="bx--side-nav__submenu-title">Category title</span>
<div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
<svg
focusable="false"
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 32 32"
aria-hidden="true"
style="will-change: transform;">
<path d="M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z" />
</svg>
</div>
</button>
<ul class="bx--side-nav__menu" role="menu">
<li class="bx--side-nav__menu-item" role="none">
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
<li class="bx--side-nav__menu-item" role="none">
<a aria-current="page" href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
<li class="bx--side-nav__menu-item" role="none">
<a href="javascript:void(0)" class="bx--side-nav__link" role="menuitem">
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
</ul>
</li>
<li class="bx--side-nav__item">
<a href="javascript:void(0)" class="bx--side-nav__link">
<div class="bx--side-nav__icon bx--side-nav__icon--small">
<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true">
<path
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>
<li class="bx--side-nav__item">
<a href="javascript:void(0)" class="bx--side-nav__link">
<div class="bx--side-nav__icon bx--side-nav__icon--small">
<svg
width="16"
height="16"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
aria-hidden="true">
<path
d="M8.24 25.14L7 26.67a14 14 0 0 0 4.18 2.44l.68-1.88a12 12 0 0 1-3.62-2.09zm-4.05-7.07l-2
.35A13.89 13.89 0 0 0 3.86 23l1.73-1a11.9 11.9 0 0 1-1.4-3.93zm7.63-13.31l-.68-1.88A14 14
0 0 0 7 5.33l1.24 1.53a12 12 0 0 1 3.58-2.1zM5.59 10L3.86 9a13.89 13.89 0 0 0-1.64 4.54l2
.35A11.9 11.9 0 0 1 5.59 10zM16 2v2a12 12 0 0 1 0 24v2a14 14 0 0 0 0-28z" />
</svg>
</div>
<span class="bx--side-nav__link-text">Link</span>
</a>
</li>

33
src/components/UIShell/UIShellSideNav/UIShellSideNavSubMenu.svelte Normal file
View file

@ -0,0 +1,33 @@
<script>
export let href = undefined;
export let text = undefined;
import { cx } from '../../../lib';
import { onDestroy } from 'svelte';
import isNavItemSelectedStore from './isNavItemSelectedStore';
let isSelected = undefined;
const unsubscribe = isNavItemSelectedStore.subscribe(values => {
values.forEach(item => {
if (item.id === text) {
isSelected = item.isSelected;
}
});
});
onDestroy(() => {
unsubscribe();
});
</script>
<li class={cx('--side-nav__menu-item')} role="none">
<a
{href}
class={cx('--side-nav__link')}
role="menuitem"
aria-current={isSelected ? 'page' : ''}
on:click={() => isNavItemSelectedStore.setSelected(text)}>
<span class={cx('--side-nav__link-text')}>{text}</span>
</a>
</li>

60
src/components/UIShell/UIShellSideNav/isNavItemSelectedStore.js Normal file
View file

@ -0,0 +1,60 @@
import { writable } from 'svelte/store';
const isSelectedStore = writable([undefined]);
const store = {
subscribe: isSelectedStore.subscribe,
setStoreValues: arrayOfObjs => {
let storeNewData = [];
arrayOfObjs.forEach(element => {
let newItem = {};
if (element.href) {
newItem = {
id: element.text,
isSelected: false
};
storeNewData.push(newItem);
} else {
element.subMenu.forEach(subelement => {
newItem = {
id: subelement.text,
isSelected: false
};
storeNewData.push(newItem);
});
}
});
isSelectedStore.set(storeNewData);
},
setSelected: id => {
isSelectedStore.update(values => {
const newValues = values.map(item => {
if (item.id === id) {
item.isSelected = true;
return item;
} else {
item.isSelected = false;
return item;
}
});
return newValues;
});
},
deselectAll: () => {
isSelectedStore.update(values => {
values.forEach(item => {
item.isSelected = false;
return item;
});
});
},
clear: () => {
isSelectedStore.set(undefined);
}
};
export default store;

2892
yarn.lock
View file

File diff suppressed because it is too large Load diff