fluent-svelte-extra 1.4.5 → 1.4.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Slider/Slider.scss +13 -0
- package/Slider/Slider.svelte +28 -8
- package/Slider/Slider.svelte.d.ts +3 -1
- package/package.json +1 -1
package/Slider/Slider.scss
CHANGED
|
@@ -31,16 +31,25 @@
|
|
|
31
31
|
|
|
32
32
|
.slider- {
|
|
33
33
|
&rail {
|
|
34
|
+
position: relative;
|
|
34
35
|
justify-content: flex-start;
|
|
35
36
|
inline-size: 100%;
|
|
36
37
|
block-size: 4px;
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
&track {
|
|
41
|
+
position: absolute;
|
|
42
|
+
z-index: 1;
|
|
40
43
|
inline-size: var(--slider-percentage);
|
|
41
44
|
block-size: 100%;
|
|
42
45
|
}
|
|
43
46
|
|
|
47
|
+
&buffer-track {
|
|
48
|
+
position: absolute;
|
|
49
|
+
inline-size: var(--buffer-percentage);
|
|
50
|
+
block-size: 100%;
|
|
51
|
+
}
|
|
52
|
+
|
|
44
53
|
&thumb {
|
|
45
54
|
inset-inline-start: calc(var(--slider-percentage) + var(--slider-thumb-offset));
|
|
46
55
|
transform: translateX(-50%);
|
|
@@ -176,6 +185,10 @@
|
|
|
176
185
|
background-color: var(--accent-default);
|
|
177
186
|
}
|
|
178
187
|
|
|
188
|
+
&-buffer-track {
|
|
189
|
+
background-color: var(--control-strong-stroke-default);
|
|
190
|
+
}
|
|
191
|
+
|
|
179
192
|
&-tick-bar {
|
|
180
193
|
position: absolute;
|
|
181
194
|
z-index: -1;
|
package/Slider/Slider.svelte
CHANGED
|
@@ -7,6 +7,8 @@ export let value = 0;
|
|
|
7
7
|
export let min = 0;
|
|
8
8
|
/** The maximum value of the slider. */
|
|
9
9
|
export let max = 100;
|
|
10
|
+
/** The buffer value */
|
|
11
|
+
export let bufferValue = 0;
|
|
10
12
|
/** Determines how much the slider's value should increase per step. */
|
|
11
13
|
export let step = 1;
|
|
12
14
|
/** Determines the position of slider ticks along the min and max of the track. */
|
|
@@ -42,6 +44,8 @@ export let thumbElement = null;
|
|
|
42
44
|
export let railElement = null;
|
|
43
45
|
/** Obtains a bound DOM reference to the slider's track (fill) element. */
|
|
44
46
|
export let trackElement = null;
|
|
47
|
+
/** Obtains a bound DOM reference to the slider's buffer track element. */
|
|
48
|
+
export let bufferElement = null;
|
|
45
49
|
let dragging = false;
|
|
46
50
|
let holding = false;
|
|
47
51
|
let directionAwareReverse = false;
|
|
@@ -63,6 +67,17 @@ const forwardEvents = createEventForwarder(get_current_component(), [
|
|
|
63
67
|
// by the difference between the max and min values,
|
|
64
68
|
// and multiplies by 100 to get a percentage.
|
|
65
69
|
const valueToPercentage = v => ((v - min) / (max - min)) * 100;
|
|
70
|
+
const bufferValueToPercentage = v => (v * 100) / max;
|
|
71
|
+
/*
|
|
72
|
+
|
|
73
|
+
5000 100
|
|
74
|
+
x
|
|
75
|
+
3000 ? = 60
|
|
76
|
+
---------------
|
|
77
|
+
|
|
78
|
+
(3000 * 100) / 5000
|
|
79
|
+
|
|
80
|
+
*/
|
|
66
81
|
function cancelMove() {
|
|
67
82
|
holding = false;
|
|
68
83
|
dragging = false;
|
|
@@ -154,6 +169,7 @@ $: {
|
|
|
154
169
|
dispatch("end", value);
|
|
155
170
|
}
|
|
156
171
|
$: percentage = valueToPercentage(value);
|
|
172
|
+
$: bufferPercentage = bufferValueToPercentage(bufferValue);
|
|
157
173
|
$: {
|
|
158
174
|
if (value <= min)
|
|
159
175
|
value = min;
|
|
@@ -188,24 +204,24 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
188
204
|
holding = true;
|
|
189
205
|
dragging = true;
|
|
190
206
|
}}
|
|
191
|
-
|
|
192
207
|
on:mouseup|preventDefault={() => {
|
|
193
|
-
dispatch(
|
|
208
|
+
dispatch("userUpdate", value);
|
|
194
209
|
}}
|
|
195
|
-
|
|
196
210
|
on:touchend|preventDefault={() => {
|
|
197
|
-
dispatch(
|
|
211
|
+
dispatch("userUpdate", value);
|
|
198
212
|
}}
|
|
199
|
-
|
|
200
213
|
on:touchcancel|preventDefault={() => {
|
|
201
|
-
dispatch(
|
|
214
|
+
dispatch("userUpdate", value);
|
|
202
215
|
}}
|
|
203
216
|
on:touchstart={handleTouchStart}
|
|
204
217
|
on:keydown={handleArrowKeys}
|
|
205
218
|
tabindex={disabled ? -1 : 0}
|
|
206
219
|
style="--fds-slider-percentage: {percentage}%; --fds-slider-thumb-offset: {thumbClientWidth /
|
|
207
220
|
2 -
|
|
208
|
-
linearScale(
|
|
221
|
+
linearScale(
|
|
222
|
+
[0, 50],
|
|
223
|
+
[0, thumbClientWidth / 2]
|
|
224
|
+
)(percentage)}px; --fds-buffer-percentage: {bufferPercentage}%"
|
|
209
225
|
class="slider orientation-{orientation} {className}"
|
|
210
226
|
class:disabled
|
|
211
227
|
class:reverse={directionAwareReverse}
|
|
@@ -234,6 +250,10 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
234
250
|
{#if track}
|
|
235
251
|
<div class="slider-track" bind:this={trackElement} />
|
|
236
252
|
{/if}
|
|
253
|
+
|
|
254
|
+
{#if bufferValue > 0}
|
|
255
|
+
<div class="slider-buffer-track" bind:this={bufferElement} />
|
|
256
|
+
{/if}
|
|
237
257
|
</div>
|
|
238
258
|
|
|
239
259
|
{#if ticks}
|
|
@@ -250,4 +270,4 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
250
270
|
<input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputElement} />
|
|
251
271
|
</div>
|
|
252
272
|
|
|
253
|
-
<style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage)}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
|
|
273
|
+
<style >.slider{align-items:center;border-radius:var(--fds-control-corner-radius);display:flex;justify-content:center;min-block-size:32px;min-inline-size:32px;position:relative}.slider>:global(*){direction:ltr}.slider:focus-visible{box-shadow:var(--fds-focus-stroke);outline:none}.slider-thumb:active :global(.slider-tooltip),.slider:active :global(.slider-tooltip),.slider:focus-visible :global(.slider-tooltip){opacity:1}.slider.orientation-horizontal{block-size:32px;inline-size:100%}.slider.orientation-horizontal .slider-rail{block-size:4px;inline-size:100%;justify-content:flex-start;position:relative}.slider.orientation-horizontal .slider-track{block-size:100%;inline-size:var(--fds-slider-percentage);position:absolute;z-index:1}.slider.orientation-horizontal .slider-buffer-track{block-size:100%;inline-size:var(--fds-buffer-percentage);position:absolute}.slider.orientation-horizontal .slider-thumb{inset-inline-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateX(-50%)}.slider.orientation-horizontal .slider-tick{flex-direction:column;height:100%;inset-inline-start:var(--fds-slider-tick-percentage);padding:6px 0}.slider.orientation-horizontal .slider-tick:after,.slider.orientation-horizontal .slider-tick:before{-webkit-border-start:1px solid var(--fds-control-strong-fill-default);border-inline-start:1px solid var(--fds-control-strong-fill-default);height:4px;width:1px}.slider.orientation-horizontal.reverse .slider-rail{justify-content:flex-end}.slider.orientation-horizontal.reverse .slider-thumb{inset-inline-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));inset-inline-start:unset;transform:translateX(50%)}.slider.orientation-horizontal.reverse .slider-tick{inset-inline-end:var(--fds-slider-tick-percentage);inset-inline-start:unset}.slider.orientation-vertical{block-size:100%;inline-size:32px}.slider.orientation-vertical .slider-rail{align-items:flex-end;block-size:100%;inline-size:4px}.slider.orientation-vertical .slider-track{block-size:var(--fds-slider-percentage);inline-size:100%}.slider.orientation-vertical .slider-thumb{inset-block-end:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(50%)}.slider.orientation-vertical .slider-tick{inset-block-end:var(--fds-slider-tick-percentage);padding:0 6px;width:100%}.slider.orientation-vertical .slider-tick:after,.slider.orientation-vertical .slider-tick:before{-webkit-border-before:1px solid var(--fds-control-strong-fill-default);border-block-start:1px solid var(--fds-control-strong-fill-default);height:1px;width:4px}.slider.orientation-vertical.reverse .slider-rail{align-items:flex-start}.slider.orientation-vertical.reverse .slider-thumb{inset-block-end:unset;inset-block-start:calc(var(--fds-slider-percentage) + var(--fds-slider-thumb-offset));transform:translateY(-50%)}.slider.orientation-vertical.reverse .slider-tick{inset-block-end:unset;inset-block-start:var(--fds-slider-tick-percentage)}.slider.disabled .slider-rail,.slider.disabled .slider-thumb:before,.slider.disabled .slider-track{background-color:var(--fds-accent-disabled)}.slider.disabled .slider-thumb:before{transform:none}.slider.disabled .slider-tick:after,.slider.disabled .slider-tick:before{border-color:var(--fds-control-fill-disabled)}.slider-rail{align-items:center;background-color:var(--fds-control-strong-fill-default);border-radius:50px;display:flex;overflow:hidden}.slider-track{background-color:var(--fds-accent-default)}.slider-buffer-track{background-color:var(--fds-control-strong-stroke-default)}.slider-tick-bar{height:100%;inset-block-start:0;inset-inline-start:0;position:absolute;width:100%;z-index:-1}.slider-tick-bar.placement-after .slider-tick:before,.slider-tick-bar.placement-before .slider-tick:after{visibility:hidden}.slider-tick{align-items:center;box-sizing:border-box;display:flex;justify-content:space-between;position:absolute}.slider-tick:after,.slider-tick:before{content:""}.slider-thumb{align-items:center;background-color:var(--fds-control-solid-fill-default);block-size:20px;box-shadow:0 0 0 1px var(--fds-control-stroke-default);display:flex;inline-size:20px;justify-content:center;z-index:10}.slider-thumb,.slider-thumb:before{border-radius:100%;position:absolute}.slider-thumb:before{background-color:var(--fds-accent-default);block-size:12px;content:"";inline-size:12px;transition:var(--fds-control-fast-duration) var(--fds-control-fast-out-slow-in-easing) transform}.slider-thumb:hover:before{transform:scale(1.167)}.slider-thumb:hover :global(.slider-tooltip){opacity:1;transition-delay:1s}.slider-thumb:active:before{background-color:var(--fds-accent-tertiary);transform:scale(.833)}.slider :global(.slider-tooltip){inset-block-end:calc(100% + 18px);inset-inline-start:50%;max-inline-size:unset;opacity:0;pointer-events:none;position:absolute;transform:translateX(-50%);transition:var(--fds-control-fast-duration) linear opacity;white-space:nowrap;z-index:100}</style>
|
|
@@ -5,6 +5,7 @@ declare const __propDef: {
|
|
|
5
5
|
value?: number;
|
|
6
6
|
min?: number;
|
|
7
7
|
max?: number;
|
|
8
|
+
bufferValue?: number;
|
|
8
9
|
step?: number;
|
|
9
10
|
ticks?: number[];
|
|
10
11
|
tickPlacement?: "around" | "before" | "after";
|
|
@@ -22,6 +23,7 @@ declare const __propDef: {
|
|
|
22
23
|
thumbElement?: HTMLDivElement;
|
|
23
24
|
railElement?: HTMLDivElement;
|
|
24
25
|
trackElement?: HTMLDivElement;
|
|
26
|
+
bufferElement?: HTMLDivElement;
|
|
25
27
|
stepUp?: () => void;
|
|
26
28
|
stepDown?: () => void;
|
|
27
29
|
};
|
|
@@ -39,7 +41,7 @@ declare const __propDef: {
|
|
|
39
41
|
suffix: string;
|
|
40
42
|
value: number;
|
|
41
43
|
};
|
|
42
|
-
};
|
|
44
|
+
};
|
|
43
45
|
};
|
|
44
46
|
export declare type SliderProps = typeof __propDef.props;
|
|
45
47
|
export declare type SliderEvents = typeof __propDef.events;
|
package/package.json
CHANGED