mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-17 19:21:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: v11 Toggle

Browse source 
This removes legacy `ToggleSkeleton`.
This commit is contained in:
Gregor Wassmann 2023-03-27 23:59:15 +02:00 • committed by Enrico Sacchetti
commit 9a0a790e19
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
10 changed files with 60 additions and 199 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/Toggle/Toggle.svelte
View file

@ -5,9 +5,9 @@
/**
* Specify the toggle size
* @type {"default" | "sm"}
* @type {"md" | "sm"}
*/
export let size = "default";
export let size = "md";
/** Set to `true` to toggle the checkbox input */
export let toggled = false;
@ -41,6 +41,8 @@
const dispatch = createEventDispatcher();
$: dispatch("toggle", { toggled });
$: sideLabel = toggled ? labelB : labelA;
$: isSm = size === "sm";
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
@ -48,6 +50,8 @@
<div
class:bx--form-item="{true}"
style:user-select="none"
class:bx--toggle="{true}"
class:bx--toggle--disabled="{disabled}"
{...$$restProps}
on:click
on:mouseover
@ -58,8 +62,7 @@
<input
role="switch"
type="checkbox"
class:bx--toggle-input="{true}"
class:bx--toggle-input--small="{size === 'sm'}"
class:bx--toggle__button="{true}"
checked="{toggled}"
on:change="{() => {
toggled = !toggled;
@ -81,27 +84,40 @@
<label
aria-label="{labelText ? undefined : $$props['aria-label'] || 'Toggle'}"
for="{id}"
class:bx--toggle-input__label="{true}"
class:bx--toggle__label="{true}"
>
<span class:bx--visually-hidden="{hideLabel}">
<span
class:bx--toggle__label-text="{true}"
class:bx--visually-hidden="{hideLabel}"
>
<slot name="labelText">
{labelText}
</slot>
</span>
<span
class:bx--toggle__switch="{true}"
style:margin-top="{hideLabel ? 0 : undefined}"
<div
class:bx--toggle__appearance="{true}"
class:bx--toggle__appearance--sm="{isSm}"
style="{hideLabel && 'margin-top: 0'}"
>
<span aria-hidden="true" class:bx--toggle__text--off="{true}">
<slot name="labelA">
{labelA}
</slot>
</span>
<span aria-hidden="true" class:bx--toggle__text--on="{true}">
<slot name="labelB">
{labelB}
</slot>
</span>
</span>
<div
aria-hidden="true"
class:bx--toggle__switch="{true}"
class:bx--toggle__switch--checked="{toggled}"
>
{#if isSm}
<svg
class:bx--toggle__check="{true}"
width="6px"
height="5px"
viewBox="0 0 6 5"
>
<path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"></path>
</svg>
{/if}
</div>
<span class:bx--toggle__text="{true}" aria-hidden="{true}"
>{sideLabel}</span
>
</div>
</label>
</div>