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

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

66
src/components/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -1,66 +0,0 @@
<script>
export let type = undefined;
export let icon = undefined;
export let isOpen = undefined;
export let text = undefined;
import { Icon } from "../../Icon";
import { slide } from "svelte/transition";
let refPanel = null;
</script>
<style>
.action-text {
font-size: 16px;
line-height: 20px;
text-decoration: none;
color: #fff;
width: 100%;
padding: 0 1rem;
}
.action-text > span {
margin-left: 0.75rem;
vertical-align: top;
}
</style>
<svelte:window
on:mouseup={({ target }) => {
if (target && refPanel) {
if (!refPanel.contains(target)) {
isOpen = false;
}
}
}} />
<div>
<button
type="button"
aria-label={type}
class:bx--header__action={true}
class:bx--header__action--active={isOpen}
class:action-text={text}
{...$$restProps}
on:click
on:click={() => {
isOpen = true;
}}>
<Icon {...icon} />
<slot name="text">
{#if text}
<span>{text}</span>
{/if}
</slot>
</button>
{#if isOpen}
<div
bind:this={refPanel}
class:bx--header-panel={true}
class:bx--header-panel--expanded={true}
transition:slide={{ duration: 200 }}>
<slot />
</div>
{/if}
</div>