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

65
src/components/Loading/Loading.svelte
View file

@ -1,50 +1,67 @@
<script>
let className = undefined;
export { className as class };
export let active = true;
export let description = 'Active loading indicator';
export let small = false;
export let style = undefined;
export let active = true;
export let withOverlay = true;
export let description = "Active loading indicator";
export let id = "ccs-" + Math.random().toString(36);
import { cx } from '../../lib';
$: loadingId = `loading-${Math.random()}`;
$: spinnerRadius = small ? '26.8125' : '37.5';
$: spinnerRadius = small ? "26.8125" : "37.5";
</script>
{#if withOverlay}
<div class={cx('--loading-overlay', !active && '--loading-overlay--stop')}>
<div
class:bx--loading-overlay={true}
class:bx--loading-overlay--stop={!active}
{...$$restProps}>
<div
aria-atomic="true"
aria-labelledby={loadingId}
aria-labelledby={id}
aria-live={active ? 'assertive' : 'off'}
class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
{style}>
<label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
<svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
class:bx--loading={true}
class:bx--loading--small={small}
class:bx--loading--stop={!active}>
<label class:bx--visually-hidden={true} {id}>{description}</label>
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
<title>{description}</title>
{#if small}
<circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
<circle
class:bx--loading__background={true}
cx="0"
cy="0"
r={spinnerRadius} />
{/if}
<circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
<circle
class:bx--loading__stroke={true}
cx="0"
cy="0"
r={spinnerRadius} />
</svg>
</div>
</div>
{:else}
<div
aria-atomic="true"
aria-labelledby={loadingId}
aria-labelledby={id}
aria-live={active ? 'assertive' : 'off'}
class={cx('--loading', small && '--loading--small', !active && '--loading--stop', className)}
{style}>
<label id={loadingId} class={cx('--visually-hidden')}>{description}</label>
<svg class={cx('--loading__svg')} viewBox="-75 -75 150 150">
class:bx--loading={true}
class:bx--loading--small={small}
class:bx--loading--stop={!active}
{...$$restProps}>
<label class:bx--visually-hidden={true} {id}>{description}</label>
<svg class:bx--loading__svg={true} viewBox="-75 -75 150 150">
<title>{description}</title>
{#if small}
<circle class={cx('--loading__background')} cx="0" cy="0" r={spinnerRadius} />
<circle
class:bx--loading__background={true}
cx="0"
cy="0"
r={spinnerRadius} />
{/if}
<circle class={cx('--loading__stroke')} cx="0" cy="0" r={spinnerRadius} />
<circle
class:bx--loading__stroke={true}
cx="0"
cy="0"
r={spinnerRadius} />
</svg>
</div>
{/if}