mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(prettier): use svelteStrictMode

Browse source
This commit is contained in:
Eric Liu 2020-09-04 16:35:49 -07:00
commit 42b8159b1c
182 changed files with 2020 additions and 1912 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/ToggleSmall/ToggleSmall.Skeleton.svelte
View file

@ -13,7 +13,7 @@
</script>
<div
class:bx--form-item={true}
class:bx--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -21,26 +21,26 @@
on:mouseleave>
<input
type="checkbox"
{id}
class:bx--toggle={true}
class:bx--toggle--small={true}
class:bx--skeleton={true} />
id="{id}"
class:bx--toggle="{true}"
class:bx--toggle--small="{true}"
class:bx--skeleton="{true}" />
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}
class:bx--toggle__label={true}
class:bx--skeleton={true}
for={id}>
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle is loading'}"
class:bx--toggle__label="{true}"
class:bx--skeleton="{true}"
for="{id}">
{#if labelText}
<span class:bx--toggle__label-text={true}>{labelText}</span>
<span class:bx--toggle__label-text="{true}">{labelText}</span>
{/if}
<span class:bx--toggle__appearance={true}>
<span class:bx--toggle__appearance="{true}">
<svg
class:bx--toggle__check={true}
class:bx--toggle__check="{true}"
width="6"
height="5"
viewBox="0 0 6 5">
<path
d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z" />
d="M2.2403 2.7299L4.9245 0 6 1.1117 2.2384 5 0 2.6863 1.0612 1.511z"></path>
</svg>
</span>
</label>

40
src/ToggleSmall/ToggleSmall.svelte
View file

@ -43,7 +43,7 @@
</script>
<div
class:bx--form-item={true}
class:bx--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
@ -51,42 +51,44 @@
on:mouseleave>
<input
type="checkbox"
checked={toggled}
{disabled}
{id}
{name}
class:bx--toggle-input={true}
class:bx--toggle-input--small={true}
checked="{toggled}"
disabled="{disabled}"
id="{id}"
name="{name}"
class:bx--toggle-input="{true}"
class:bx--toggle-input--small="{true}"
on:change
on:change={() => {
on:change="{() => {
toggled = !toggled;
}}
}}"
on:keyup
on:keyup={(e) => {
on:keyup="{(e) => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
toggled = !toggled;
}
}}
}}"
on:focus
on:blur />
<label
aria-label={labelText ? undefined : $$props['aria-label'] || 'Toggle'}
for={id}
class:bx--toggle-input__label={true}>
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
for="{id}"
class:bx--toggle-input__label="{true}">
{labelText}
<span class:bx--toggle__switch={true}>
<span class:bx--toggle__switch="{true}">
<svg
width="6"
height="5"
viewBox="0 0 6 5"
class:bx--toggle__check={true}>
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
class:bx--toggle__check="{true}">
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
</svg>
<span aria-hidden="true" class:bx--toggle__text--off={true}>
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
{labelA}
</span>
<span aria-hidden="true" class:bx--toggle__text--on={true}>{labelB}</span>
<span
aria-hidden="true"
class:bx--toggle__text--on="{true}">{labelB}</span>
</span>
</label>
</div>