fluent-svelte-extra 1.9.0 → 1.9.1
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 +5 -0
- package/Slider/Slider.svelte +9 -1
- package/Slider/Slider.svelte.d.ts +1 -0
- package/package.json +1 -1
package/Slider/Slider.scss
CHANGED
package/Slider/Slider.svelte
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<script >import { createEventForwarder, TooltipSurface } from "../internal";
|
|
2
|
+
import ProgressBar from "fluent-svelte/ProgressBar/ProgressBar.svelte";
|
|
2
3
|
import { createEventDispatcher } from "svelte";
|
|
3
4
|
import { get_current_component } from "svelte/internal";
|
|
4
5
|
/** The slider's current value. */
|
|
@@ -25,6 +26,7 @@ export let suffix = "";
|
|
|
25
26
|
export let track = true;
|
|
26
27
|
/** Determines the slider's orientation. */
|
|
27
28
|
export let orientation = "horizontal";
|
|
29
|
+
export let loading = false;
|
|
28
30
|
/** Determines if the slider track will be in reverse direction. */
|
|
29
31
|
export let reverse = false;
|
|
30
32
|
/** Controls whether the slider is disabled. */
|
|
@@ -278,6 +280,12 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
278
280
|
<div class="slider-track" bind:this={trackElement} />
|
|
279
281
|
{/if}
|
|
280
282
|
|
|
283
|
+
{#if loading}
|
|
284
|
+
<div class="slider-loading-track">
|
|
285
|
+
<ProgressBar></ProgressBar>
|
|
286
|
+
</div>
|
|
287
|
+
{/if}
|
|
288
|
+
|
|
281
289
|
{#if bufferValue > 0}
|
|
282
290
|
<div class="slider-buffer-track" bind:this={bufferElement} />
|
|
283
291
|
{/if}
|
|
@@ -297,4 +305,4 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
297
305
|
<input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputElement} />
|
|
298
306
|
</div>
|
|
299
307
|
|
|
300
|
-
<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>
|
|
308
|
+
<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-loading-track{width:100%;z-index:1}.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>
|
package/package.json
CHANGED