mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-16 19:01: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

83
src/components/Tile/ExpandableTile.svelte
View file

@ -1,83 +0,0 @@
<script>
export let expanded = false;
export let light = false;
export let tileMaxHeight = 0;
export let tilePadding = 0;
export let tileCollapsedIconText = "Interact to expand Tile";
export let tileExpandedIconText = "Interact to collapse Tile";
export let tabindex = "0";
export let id = "ccs-" + Math.random().toString(36);
export let ref = null;
import { afterUpdate } from "svelte";
import ChevronDown16 from "carbon-icons-svelte/lib/ChevronDown16";
let refContent = null;
let refAbove = null;
afterUpdate(() => {
if (tileMaxHeight === 0) {
tileMaxHeight = refAbove.getBoundingClientRect().height;
}
const style = getComputedStyle(ref);
tilePadding =
parseInt(style.getPropertyValue("padding-top"), 10) +
parseInt(style.getPropertyValue("padding-bottom"), 10);
});
</script>
<div
bind:this={ref}
{id}
{tabindex}
class:bx--tile={true}
class:bx--tile--expandable={true}
class:bx--tile--is-expanded={expanded}
class:bx--tile--light={light}
{...$$restProps}
style={expanded ? $$restProps.style : `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}
on:click
on:click={() => {
expanded = !expanded;
}}
on:keypress
on:keypress={e => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
expanded = !expanded;
}
}}
on:mouseover
on:mouseenter
on:mouseleave>
<div bind:this={refContent}>
<div bind:this={refAbove} class:bx--tile-content={true}>
<span
class:bx--tile-content__above-the-fold={true}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<slot name="above" />
</span>
</div>
<button
aria-expanded={expanded}
aria-label={expanded ? tileExpandedIconText : tileCollapsedIconText}
class:bx--tile__chevron={true}>
<ChevronDown16 />
</button>
<div class:bx--tile-content={true}>
<span
on:click
on:mouseover
on:mouseenter
on:mouseleave
class:bx--tile-content__below-the-fold={true}>
<slot name="below" />
</span>
</div>
</div>
</div>