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(slider): remove formatLabel prop

Browse source
This commit is contained in:
Eric Liu 2019-12-31 15:52:54 -08:00
commit 5e26510f43
1 changed files with 13 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/Slider/Slider.svelte
View file

@ -1,25 +1,23 @@
<script> <script>
let className = undefined; let className = undefined;
export { className as class }; export { className as class };
export let disabled = false;
export let hideTextInput = false; export let hideTextInput = false;
export let id = Math.random(); export let id = Math.random();
export let value = '';
export let min = 0;
export let max = 100;
export let minLabel = '';
export let maxLabel = '';
export let labelText = '';
export let formatLabel = (value, label) =>
typeof label === 'function' ? label(value) : `${value}${label}`;
export let step = 1;
export let stepMultiplier = 4;
export let disabled = false;
export let name = '';
export let inputType = 'number'; export let inputType = 'number';
export let invalid = false; export let invalid = false;
export let required = false; export let labelText = '';
export let light = false; export let light = false;
export let max = 100;
export let maxLabel = '';
export let min = 0;
export let minLabel = '';
export let name = '';
export let required = false;
export let step = 1;
export let stepMultiplier = 4;
export let style = undefined; export let style = undefined;
export let value = '';
import { createEventDispatcher, afterUpdate } from 'svelte'; import { createEventDispatcher, afterUpdate } from 'svelte';
import { cx } from '../../lib'; import { cx } from '../../lib';
@ -82,7 +80,7 @@
<div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}> <div on:click on:mouseover on:mouseenter on:mouseleave class={cx('--form-item', className)} {style}>
<label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label> <label for={id} class={cx('--label', disabled && '--label--disabled')}>{labelText}</label>
<div class={cx('--slider-container')}> <div class={cx('--slider-container')}>
<span class={cx('--slider__range-label')}>{formatLabel(min, minLabel)}</span> <span class={cx('--slider__range-label')}>{minLabel || min}</span>
<div <div
bind:this={elementRef} bind:this={elementRef}
role="presentation" role="presentation"
@ -134,7 +132,7 @@
{max} {max}
{step} /> {step} />
</div> </div>
<span class={cx('--slider__range-label')}>{formatLabel(max, maxLabel)}</span> <span class={cx('--slider__range-label')}>{maxLabel || max}</span>
{#if !hideTextInput} {#if !hideTextInput}
<input <input
type={inputType} type={inputType}