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

Merge pull request #44 from metonym/skeleton

Browse source 
refactor(skeleton): forward events, remove exported props
This commit is contained in:
Eric Liu 2019-12-19 19:43:53 -08:00 • committed by GitHub
commit bbb1a776c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/SkeletonPlaceholder/SkeletonPlaceholder.svelte
View file

@ -1,11 +1,11 @@
<script>
let className = undefined;
export { className as class };
export let props = {};
export let style = undefined;
import { cx } from '../../lib';
const _class = cx('--skeleton__placeholder', className);
</script>
<div {...props} class={_class} />
<div on:click on:mouseover on:mouseenter on:mouseleave {style} class={_class} />

16
src/components/SkeletonText/SkeletonText.svelte
View file

@ -5,7 +5,7 @@
export let lineCount = 3;
export let width = '100%';
export let heading = false;
export let props = {};
export let style = undefined;
import { cx } from '../../lib';
@ -14,6 +14,7 @@
const widthNum = parseInt(width, 10);
const widthPx = width.includes('px');
const widthPercent = width.includes('%');
let lines = [];
$: if (paragraph) {
@ -27,11 +28,18 @@
</script>
{#if paragraph}
<div>
<div on:click on:mouseover on:mouseenter on:mouseleave {style}>
{#each lines as { width }}
<p {...props} class={_class} style={`width: ${width};`} />
<p class={_class} style={`width: ${width};`} />
{/each}
</div>
{:else}
<p {...props} class={_class} style={`width: ${width};`} />
<p
on:click
on:mouseover
on:mouseenter
on:mouseleave
{style}
class={_class}
style={`width: ${width};`} />
{/if}