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

feat: support skeleton prop

Browse source
This commit is contained in:
Eric Liu 2020-07-24 17:14:12 -07:00
commit bd6bd15c79
5 changed files with 136 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/Accordion/Accordion.svelte
View file

@ -6,7 +6,12 @@
</script>
{#if skeleton}
<AccordionSkeleton {...$$restProps} />
<AccordionSkeleton
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else}
<ul
class:bx--accordion={true}

38
src/Breadcrumb/Breadcrumb.svelte
View file

@ -1,17 +1,29 @@
<script>
export let noTrailingSlash = false;
export let skeleton = false;
import BreadcrumbSkeleton from "./Breadcrumb.Skeleton.svelte";
</script>
<nav
aria-label="Breadcrumb"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<ol
class:bx--breadcrumb={true}
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
<slot />
</ol>
</nav>
{#if skeleton}
<BreadcrumbSkeleton
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else}
<nav
aria-label="Breadcrumb"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<ol
class:bx--breadcrumb={true}
class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}>
<slot />
</ol>
</nav>
{/if}

96
src/Button/Button.svelte
View file

@ -1,5 +1,6 @@
<script>
export let as = undefined;
export let skeleton = false;
export let disabled = false;
export let href = undefined;
export let icon = undefined;
@ -14,6 +15,7 @@
export let ref = null;
import { getContext } from "svelte";
import ButtonSkeleton from "./Button.Skeleton.svelte";
const ctx = getContext("ComposedModal");
@ -40,54 +42,66 @@
hasIconOnly &&
tooltipAlignment &&
`bx--tooltip--align-${tooltipAlignment}`,
$$restProps.class
$$restProps.class,
]
.filter(Boolean)
.join(" ")
.join(" "),
};
</script>
{#if as}
<slot props={buttonProps} />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<a
bind:this={ref}
{...buttonProps}
{#if skeleton}
<ButtonSkeleton
{href}
small={size === 'small'}
{...$$restProps}
style={hasIconOnly && 'width: 3rem;'}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</a>
on:mouseleave />
{:else}
<button
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</button>
{#if as}
<slot props={buttonProps} />
{:else if href && !disabled}
<!-- svelte-ignore a11y-missing-attribute -->
<a
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</a>
{:else}
<button
bind:this={ref}
{...buttonProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if hasIconOnly}
<span class:bx--assistive-text={true}>{iconDescription}</span>
{/if}
<slot />
{#if icon}
<svelte:component
this={icon}
aria-hidden="true"
class="bx--btn__icon"
aria-label={iconDescription} />
{/if}
</button>
{/if}
{/if}

71
src/Checkbox/Checkbox.svelte
View file

@ -1,4 +1,5 @@
<script>
export let skeleton = false;
export let indeterminate = false;
export let readonly = false;
export let checked = false;
@ -11,39 +12,49 @@
export let ref = null;
import { createEventDispatcher } from "svelte";
import CheckboxSkeleton from "./Checkbox.Skeleton.svelte";
const dispatch = createEventDispatcher();
$: dispatch("check", checked);
</script>
<div
class:bx--form-item={true}
class:bx--checkbox-wrapper={true}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<input
bind:this={ref}
type="checkbox"
{checked}
{disabled}
{id}
{indeterminate}
{name}
{readonly}
class:bx--checkbox={true}
on:change
on:change={() => {
checked = !checked;
}} />
<label class:bx--checkbox-label={true} for={id} {title}>
<span
class:bx--checkbox-label-text={true}
class:bx--visually-hidden={hideLabel}>
{labelText}
</span>
</label>
</div>
{#if skeleton}
<CheckboxSkeleton
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else}
<div
class:bx--form-item={true}
class:bx--checkbox-wrapper={true}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<input
bind:this={ref}
type="checkbox"
{checked}
{disabled}
{id}
{indeterminate}
{name}
{readonly}
class:bx--checkbox={true}
on:change
on:change={() => {
checked = !checked;
}} />
<label class:bx--checkbox-label={true} for={id} {title}>
<span
class:bx--checkbox-label-text={true}
class:bx--visually-hidden={hideLabel}>
{labelText}
</span>
</label>
</div>
{/if}

12
src/CodeSnippet/CodeSnippet.svelte
View file

@ -1,6 +1,7 @@
<script>
export let type = "single"; // "single" | "inline" | "multi"
export let code = undefined;
export let expanded = false;
export let light = false;
export let skeleton = false;
export let copyButtonDescription = undefined;
@ -9,6 +10,7 @@
export let feedbackTimeout = 2000;
export let showLessText = "Show less";
export let showMoreText = "Show more";
export let showMoreLess = false;
export let id = "ccs-" + Math.random().toString(36);
export let ref = null;
@ -19,8 +21,6 @@
import { CopyButton } from "../CopyButton";
import CodeSnippetSkeleton from "./CodeSnippet.Skeleton.svelte";
$: showMoreLess = false;
$: expanded = false;
$: expandText = expanded ? showLessText : showMoreText;
afterUpdate(() => {
@ -31,7 +31,13 @@
</script>
{#if skeleton}
<CodeSnippetSkeleton {type} {...$$restProps} />
<CodeSnippetSkeleton
{type}
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave />
{:else}
{#if type === 'inline'}
<Copy