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

refactor(checkbox): make classes reactive

Browse source
This commit is contained in:
Eric Liu 2019-12-29 18:52:20 -08:00
commit 60d9258d0b
4 changed files with 29 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/components/Checkbox/Checkbox.svelte
View file

@ -8,32 +8,26 @@
export let labelText = undefined;
export let hideLabel = false;
export let title = '';
export let wrapperClassName = undefined;
export { wrapperClassName as wrapperClass };
export let style = undefined;
import { createEventDispatcher } from 'svelte';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const _labelClass = cx('--checkbox-label', className);
const _innerLabelClass = cx('--checkbox-label-text', hideLabel && '--visually-hidden');
const _wrapperClass = cx('--form-item', '--checkbox-wrapper', wrapperClassName);
let inputRef = undefined;
$: {
dispatch('check', { id, checked });
if (inputRef) {
inputRef.checked = checked;
}
dispatch('check', checked);
}
</script>
<div on:click on:mouseover on:mouseenter on:mouseleave class={_wrapperClass} {style}>
<div
on:click
on:mouseover
on:mouseenter
on:mouseleave
class={cx('--form-item', '--checkbox-wrapper', className)}
{style}>
<input
bind:this={inputRef}
type="checkbox"
class={cx('--checkbox')}
on:change
@ -44,7 +38,7 @@
{disabled}
{checked}
{id} />
<label for={id} class={_labelClass} title={title || null}>
<span class={_innerLabelClass}>{labelText}</span>
<label class={cx('--checkbox-label')} for={id} title={title || undefined}>
<span class={cx('--checkbox-label-text', hideLabel && '--visually-hidden')}>{labelText}</span>
</label>
</div>