mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
refactor(uishell): rename files
This commit is contained in:
Marcus Feitoza
parent
45509ae516
commit
e2375b2a12
12 changed files with 72 additions and 64 deletions
50
src/components/UIShell/GlobalHeader/HeaderAction.svelte
Normal file
50
src/components/UIShell/GlobalHeader/HeaderAction.svelte
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
export let type = undefined;
|
||||
export let icon = undefined;
|
||||
export let componentIsActive = undefined;
|
||||
|
||||
let elRigthPanel = undefined;
|
||||
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
function mouseUp({ target }) {
|
||||
if (target && elRigthPanel) {
|
||||
if (!elRigthPanel.contains(target)) {
|
||||
componentIsActive = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.component-form {
|
||||
margin: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
|
||||
<div id="right-panel-action-component">
|
||||
<button
|
||||
aria-label={type}
|
||||
class={cx('--header__action', componentIsActive && '--header__action--active')}
|
||||
type="button"
|
||||
on:click={() => {
|
||||
componentIsActive = true;
|
||||
}}>
|
||||
<Icon {...icon} />
|
||||
</button>
|
||||
{#if componentIsActive}
|
||||
<div
|
||||
bind:this={elRigthPanel}
|
||||
id="right-panel-action-component-form"
|
||||
class={cx('--header-panel', '--header-panel--expanded')}
|
||||
transition:slide={{ duration: 200 }}>
|
||||
<div class="component-form">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
32
src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
Normal file
32
src/components/UIShell/GlobalHeader/HeaderActionLink.svelte
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let type = undefined;
|
||||
export let icon = undefined;
|
||||
export let linkIsActive = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.action-link {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.subject-divider {
|
||||
color: #525252;
|
||||
padding-bottom: 4px;
|
||||
border-bottom: 1px solid #525252;
|
||||
margin: 32px 1rem 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a
|
||||
aria-label={type}
|
||||
class={cx('--header__action', linkIsActive && '--header__action--active')}
|
||||
class:action-link={true}
|
||||
{href}>
|
||||
<Icon {...icon} />
|
||||
</a>
|
||||
207
src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte
Normal file
207
src/components/UIShell/GlobalHeader/HeaderActionSearch.svelte
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<script>
|
||||
export let searchIsActive = undefined;
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { cx } from '../../../lib';
|
||||
import Icon from '../../Icon/Icon.svelte';
|
||||
import { closeIcon, searchIcon } from '../constants';
|
||||
import searchStore from '../searchStore';
|
||||
|
||||
let searchTabIndex = '0';
|
||||
let closeTabIndex = '-1';
|
||||
let elInput = undefined;
|
||||
let elTypeSearch = undefined;
|
||||
let isSearchFocus = false;
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function dispatchInputs(event) {
|
||||
const params = {
|
||||
action: 'search',
|
||||
textInput: event.target.value
|
||||
};
|
||||
dispatch('inputSearch', params);
|
||||
}
|
||||
|
||||
function mouseUp({ target }) {
|
||||
if (target && elTypeSearch) {
|
||||
if (!elTypeSearch.contains(target)) {
|
||||
searchIsActive = false;
|
||||
isSearchFocus = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$: if (!searchIsActive) {
|
||||
if (elInput) {
|
||||
elInput.value = '';
|
||||
}
|
||||
searchStore.clear();
|
||||
}
|
||||
$: if (searchIsActive) {
|
||||
searchTabIndex = '-1';
|
||||
closeTabIndex = '0';
|
||||
} else {
|
||||
searchTabIndex = '0';
|
||||
closeTabIndex = '-1';
|
||||
}
|
||||
$: if (isSearchFocus) {
|
||||
elInput.focus();
|
||||
}
|
||||
$: showResults = $searchStore ? true : false;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.search-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
margin-left: 0.5rem;
|
||||
height: 3rem;
|
||||
background-color: #393939;
|
||||
color: #fff;
|
||||
transition: max-width 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
background 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
.search-wrapper-hidden {
|
||||
max-width: 3rem;
|
||||
background-color: #161616;
|
||||
}
|
||||
.search-focus {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.search-wrapper-2 {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
border-bottom: 1px solid #393939;
|
||||
}
|
||||
.btn-search {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
.btn-search-disabled {
|
||||
border: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.input-search {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
letter-spacing: 0;
|
||||
color: #fff;
|
||||
caret-color: #fff;
|
||||
background-color: initial;
|
||||
border: none;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
transition: opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
.input-hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.btn-clear {
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
transition: background-color 0.11s cubic-bezier(0.2, 0, 0.38, 0.9),
|
||||
opacity 0.11s cubic-bezier(0.2, 0, 0.38, 0.9);
|
||||
}
|
||||
.btn-clear:hover {
|
||||
background-color: #4c4c4c;
|
||||
}
|
||||
.btn-clear-hidden {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
.search-list {
|
||||
position: absolute;
|
||||
z-index: 10000;
|
||||
padding: 1rem 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3rem;
|
||||
background-color: #161616;
|
||||
border: 1px solid #393939;
|
||||
border-top: none;
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
|
||||
<div
|
||||
bind:this={elTypeSearch}
|
||||
class="search-wrapper"
|
||||
class:search-wrapper-hidden={!searchIsActive}
|
||||
class:search-focus={isSearchFocus || searchIsActive}
|
||||
role="search">
|
||||
<div
|
||||
id="right-panel-action-search"
|
||||
class="search-wrapper-2"
|
||||
role="combobox"
|
||||
aria-expanded={searchIsActive}>
|
||||
<button
|
||||
tabindex={searchTabIndex}
|
||||
aria-label="Search"
|
||||
class={cx('--header__action')}
|
||||
class:btn-search={true}
|
||||
class:btn-search-disabled={searchIsActive}
|
||||
on:click={() => {
|
||||
isSearchFocus = true;
|
||||
searchIsActive = true;
|
||||
dispatch('focusInputSearch');
|
||||
}}
|
||||
type="button"
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...searchIcon} />
|
||||
</button>
|
||||
<input
|
||||
bind:this={elInput}
|
||||
id="input-search-field"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
tabindex={closeTabIndex}
|
||||
class="input-search"
|
||||
class:input-hidden={!searchIsActive}
|
||||
placeholder="Search"
|
||||
on:focus={() => dispatch('focusInputSearch')}
|
||||
on:focusout={() => dispatch('focusOutInputSearch')}
|
||||
on:input={dispatchInputs} />
|
||||
<button
|
||||
id="right-panel-close-search"
|
||||
tabindex={closeTabIndex}
|
||||
class={cx('--header__action')}
|
||||
class:btn-clear={true}
|
||||
class:btn-clear-hidden={!searchIsActive}
|
||||
type="button"
|
||||
aria-label="Clear search"
|
||||
on:click={() => {
|
||||
isSearchFocus = false;
|
||||
searchIsActive = false;
|
||||
searchStore.clear();
|
||||
}}
|
||||
on:keydown={({ key }) => {
|
||||
if (key === 'Enter') {
|
||||
searchIsActive = !searchIsActive;
|
||||
}
|
||||
}}>
|
||||
<Icon {...closeIcon} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
10
src/components/UIShell/GlobalHeader/HeaderNav.svelte
Normal file
10
src/components/UIShell/GlobalHeader/HeaderNav.svelte
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<script>
|
||||
export let ariaLabel = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<nav aria-label={ariaLabel} class={cx('--header__nav')}>
|
||||
<ul aria-label={ariaLabel} class={cx('--header__menu-bar')} role="menubar">
|
||||
<slot />
|
||||
</ul>
|
||||
</nav>
|
||||
23
src/components/UIShell/GlobalHeader/HeaderNavItem.svelte
Normal file
23
src/components/UIShell/GlobalHeader/HeaderNavItem.svelte
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<script>
|
||||
export let href = undefined;
|
||||
export let text = undefined;
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<li>
|
||||
<a
|
||||
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
|
||||
{href}>
|
||||
<span class={cx('--text-truncate--end')}>{text}</span>
|
||||
</a>
|
||||
</li>
|
||||
54
src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte
Normal file
54
src/components/UIShell/GlobalHeader/HeaderNavMenu.svelte
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<script>
|
||||
export let text = 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;
|
||||
|
||||
const mouseUp = ({ target }) => {
|
||||
if (listItemSubMenu) {
|
||||
if (listItemSubMenu.contains(target) || target === listItemSubMenu) {
|
||||
expanded = !expanded;
|
||||
} else {
|
||||
if (expanded) {
|
||||
expanded = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:mouseup={mouseUp} />
|
||||
|
||||
<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={text} class={cx('--header__menu')} role="menu">
|
||||
<slot />
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import { cx } from '../../../lib';
|
||||
</script>
|
||||
|
||||
<div class={cx('--header__global')}>
|
||||
<slot />
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue