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

refactor: use $$restProps API

Browse source 
- add ref prop for applicable components (#196)
- add slot to Content Switcher `Switch` component (#183)
- remove fillArray, css utilities
This commit is contained in:
Eric Liu 2020-07-18 20:00:20 -07:00
commit e886d772c7
288 changed files with 4681 additions and 4498 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/components/ProgressIndicator/ProgressStep.svelte
View file

@ -1,22 +1,18 @@
<script>
let className = undefined;
export { className as class };
export let complete = false;
export let current = false;
export let description = '';
export let disabled = false;
export let invalid = false;
export let label = '';
export let secondaryLabel = '';
export let style = undefined;
export let description = "";
export let label = "";
export let secondaryLabel = "";
export let id = "ccs-" + Math.random().toString(36);
import { getContext } from 'svelte';
import CheckmarkOutline16 from 'carbon-icons-svelte/lib/CheckmarkOutline16';
import Warning16 from 'carbon-icons-svelte/lib/Warning16';
import { cx } from '../../lib';
import { getContext } from "svelte";
import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
import Warning16 from "carbon-icons-svelte/lib/Warning16";
const id = Math.random();
const { stepsById, add, change } = getContext('ProgressIndicator');
const { stepsById, add, change } = getContext("ProgressIndicator");
add({ id, disabled });
@ -29,12 +25,17 @@
<li
aria-disabled={disabled}
class={cx('--progress-step', current && '--progress-step--current', complete && '--progress-step--complete', !complete && !current && '--progress-step--incomplete', disabled && '--progress-step--disabled', className)}
{style}>
class:bx--progress-step={true}
class:bx--progress-step--current={current}
class:bx--progress-step--complete={complete}
class:bx--progress-step--incomplete={!complete && !current}
class:bx--progress-step--disabled={disabled}
{...$$restProps}>
<div
role="button"
tabindex={current ? '-1' : '0'}
class={cx('--progress-step-button', current && '--progress-step-button--unclickable')}
class:bx--progress-step-button={true}
class:bx--progress-step-button--unclickable={current}
on:click={() => {
change(step.index);
}}
@ -42,13 +43,13 @@
on:mouseenter
on:mouseleave
on:keydown
on:keydown={event => {
if (event.key === ' ' || event.key === 'Enter') {
on:keydown={e => {
if (e.key === ' ' || e.key === 'Enter') {
change(step.index);
}
}}>
{#if invalid}
<Warning16 class={cx('--progress__warning')} />
<Warning16 class="bx--progress__warning" />
{:else if current}
<svg>
<path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
@ -60,16 +61,16 @@
<svg>
<title>{description}</title>
<path
d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6
2.7 6 6-2.7 6-6 6z" />
d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3
0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
</svg>
{/if}
<slot props={{ class: cx('--progress-label') }}>
<p class={cx('--progress-label')}>{label}</p>
<slot props={{ class: 'bx--progress-label' }}>
<p class:bx--progress-label={true}>{label}</p>
</slot>
{#if secondaryLabel}
<p class={cx('--progress-optional')}>{secondaryLabel}</p>
<p class:bx--progress-optional={true}>{secondaryLabel}</p>
{/if}
<span class={cx('--progress-line')} />
<span class:bx--progress-line={true} />
</div>
</li>