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

20
src/Slider/Slider.Skeleton.svelte
View file

@ -7,20 +7,22 @@
</script>
<div
class:bx--form-item={true}
class:bx--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
{#if !hideLabel}<span class:bx--label={true} class:bx--skeleton={true} />{/if}
<div class:bx--slider-container={true} class:bx--skeleton={true}>
<span class:bx--slider__range-label={true} />
<div class:bx--slider={true}>
<div class:bx--slider__track={true} />
<div class:bx--slider__filled-track={true} />
<div class:bx--slider__thumb={true} />
{#if !hideLabel}
<span class:bx--label="{true}" class:bx--skeleton="{true}"></span>
{/if}
<div class:bx--slider-container="{true}" class:bx--skeleton="{true}">
<span class:bx--slider__range-label="{true}"></span>
<div class:bx--slider="{true}">
<div class:bx--slider__track="{true}"></div>
<div class:bx--slider__filled-track="{true}"></div>
<div class:bx--slider__thumb="{true}"></div>
</div>
<span class:bx--slider__range-label={true} />
<span class:bx--slider__range-label="{true}"></span>
</div>
</div>

4
src/Slider/Slider.Story.svelte
View file

@ -14,7 +14,7 @@
{...$$props}
id="slider-id"
bind:value
on:change={({ detail }) => {
on:change="{({ detail }) => {
console.log('on:change', detail);
}} />
}}" />
{/if}

95
src/Slider/Slider.svelte
View file

@ -160,84 +160,87 @@
</script>
<div
class:bx--form-item={true}
class:bx--form-item="{true}"
{...$$restProps}
on:click
on:mouseover
on:mouseenter
on:mouseleave>
<label for={id} class:bx--label={true} class:bx--label--disabled={disabled}>
<label
for="{id}"
class:bx--label="{true}"
class:bx--label--disabled="{disabled}">
{labelText}
</label>
<div class:bx--slider-container={true}>
<span class:bx--slider__range-label={true}>{minLabel || min}</span>
<div class:bx--slider-container="{true}">
<span class:bx--slider__range-label="{true}">{minLabel || min}</span>
<div
bind:this={ref}
bind:this="{ref}"
role="presentation"
tabindex="-1"
class:bx--slider={true}
class:bx--slider--disabled={disabled}
on:click={startDragging}
on:mousemove={() => {
class:bx--slider="{true}"
class:bx--slider--disabled="{disabled}"
on:click="{startDragging}"
on:mousemove="{() => {
if (holding) {
startDragging();
}
}}
on:touchmove={() => {
}}"
on:touchmove="{() => {
if (holding) {
startDragging();
}
}}
on:mouseup={stopHolding}
on:touchup={stopHolding}
on:touchend={stopHolding}
on:touchcancel={stopHolding}>
}}"
on:mouseup="{stopHolding}"
on:touchup="{stopHolding}"
on:touchend="{stopHolding}"
on:touchcancel="{stopHolding}">
<div
role="slider"
tabindex="0"
class:bx--slider__thumb={true}
class:bx--slider__thumb="{true}"
style="left: {left}%"
aria-valuemax={max}
aria-valuemin={min}
aria-valuenow={value}
on:mousedown={startHolding}
on:touchstart={startHolding}
on:keydown={({ shiftKey, key }) => {
aria-valuemax="{max}"
aria-valuemin="{min}"
aria-valuenow="{value}"
on:mousedown="{startHolding}"
on:touchstart="{startHolding}"
on:keydown="{({ shiftKey, key }) => {
const keys = { ArrowDown: -1, ArrowLeft: -1, ArrowRight: 1, ArrowUp: 1 };
if (keys[key]) {
value += step * (shiftKey ? range / step / stepMultiplier : 1) * keys[key];
}
}}
{id} />
<div bind:this={trackRef} class:bx--slider__track={true} />
}}"
id="{id}"></div>
<div bind:this="{trackRef}" class:bx--slider__track="{true}"></div>
<div
class:bx--slider__filled-track={true}
style="transform: translate(0, -50%) scaleX({left / 100})" />
class:bx--slider__filled-track="{true}"
style="transform: translate(0, -50%) scaleX({left / 100})"></div>
<input
type="hidden"
class:bx--slider__input={true}
{name}
{value}
{required}
{min}
{max}
{step} />
class:bx--slider__input="{true}"
name="{name}"
value="{value}"
required="{required}"
min="{min}"
max="{max}"
step="{step}" />
</div>
<span class:bx--slider__range-label={true}>{maxLabel || max}</span>
<span class:bx--slider__range-label="{true}">{maxLabel || max}</span>
{#if !hideTextInput}
<input
type={inputType}
type="{inputType}"
id="input-{id}"
aria-label={$$props['aria-label'] || 'Slider number input'}
class:bx--text-input={true}
class:bx--slider-text-input={true}
class:bx--text-input--light={light}
class:bx--text-input--invalid={invalid}
on:change={({ target }) => {
aria-label="{$$props['aria-label'] || 'Slider number input'}"
class:bx--text-input="{true}"
class:bx--slider-text-input="{true}"
class:bx--text-input--light="{light}"
class:bx--text-input--invalid="{invalid}"
on:change="{({ target }) => {
value = Number(target.value);
}}
{disabled}
{value} />
}}"
disabled="{disabled}"
value="{value}" />
{/if}
</div>
</div>