fluent-svelte-extra 2.2.4 → 2.2.5
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.
|
@@ -4,6 +4,7 @@ import { arrowNavigation, uid } from "../internal";
|
|
|
4
4
|
import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
|
|
5
5
|
/** Determines the flyout's visibility. */
|
|
6
6
|
export let open = false;
|
|
7
|
+
export let disabled = false;
|
|
7
8
|
/** Determines if the flyout can be closed using conventional user interaction. */
|
|
8
9
|
export let closable = true;
|
|
9
10
|
/** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
|
|
@@ -41,6 +42,8 @@ function handleEscapeKey({ key }) {
|
|
|
41
42
|
}
|
|
42
43
|
}
|
|
43
44
|
function toggleFlyout() {
|
|
45
|
+
if (!open && disabled)
|
|
46
|
+
return;
|
|
44
47
|
previousFocus = document.activeElement;
|
|
45
48
|
open = !open;
|
|
46
49
|
}
|
|
@@ -50,10 +53,10 @@ function closeFlyout() {
|
|
|
50
53
|
previousFocus = null;
|
|
51
54
|
}
|
|
52
55
|
}
|
|
53
|
-
setContext("closeFlyout",
|
|
56
|
+
setContext("closeFlyout", (e) => {
|
|
54
57
|
dispatch("select");
|
|
55
58
|
if (closeOnSelect && closable) {
|
|
56
|
-
|
|
59
|
+
e.stopPropagation();
|
|
57
60
|
open = false;
|
|
58
61
|
previousFocus = null;
|
|
59
62
|
}
|
|
@@ -62,6 +65,7 @@ setContext("closeFlyout", event => {
|
|
|
62
65
|
|
|
63
66
|
<svelte:window on:keydown={handleEscapeKey} />
|
|
64
67
|
|
|
68
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
65
69
|
<div
|
|
66
70
|
class="menu-flyout-wrapper {className}"
|
|
67
71
|
aria-expanded={open}
|
|
@@ -72,6 +76,7 @@ setContext("closeFlyout", event => {
|
|
|
72
76
|
>
|
|
73
77
|
<slot />
|
|
74
78
|
{#if open}
|
|
79
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
75
80
|
<div
|
|
76
81
|
id={menuId}
|
|
77
82
|
class="menu-flyout-anchor placement-{placement} alignment-{alignment}"
|
|
@@ -90,6 +95,7 @@ setContext("closeFlyout", event => {
|
|
|
90
95
|
<slot name="flyout" />
|
|
91
96
|
</MenuFlyoutSurface>
|
|
92
97
|
</div>
|
|
98
|
+
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
93
99
|
<div
|
|
94
100
|
class="menu-flyout-backdrop"
|
|
95
101
|
bind:this={backdropElement}
|
|
@@ -3,6 +3,7 @@ declare const __propDef: {
|
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
5
|
open?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
6
7
|
closable?: boolean;
|
|
7
8
|
closeOnSelect?: boolean;
|
|
8
9
|
placement?: "top" | "bottom" | "left" | "right";
|
|
@@ -10,10 +11,10 @@ declare const __propDef: {
|
|
|
10
11
|
offset?: number;
|
|
11
12
|
acrylic?: boolean;
|
|
12
13
|
class?: string;
|
|
13
|
-
wrapperElement?: HTMLDivElement;
|
|
14
|
-
anchorElement?: HTMLDivElement;
|
|
14
|
+
wrapperElement?: HTMLDivElement | null;
|
|
15
|
+
anchorElement?: HTMLDivElement | null;
|
|
15
16
|
menuElement?: HTMLUListElement;
|
|
16
|
-
backdropElement?: HTMLDivElement;
|
|
17
|
+
backdropElement?: HTMLDivElement | null;
|
|
17
18
|
};
|
|
18
19
|
events: {
|
|
19
20
|
select: CustomEvent<any>;
|
package/Slider/Slider.svelte
CHANGED
|
@@ -52,7 +52,6 @@ let dragging = false;
|
|
|
52
52
|
let holding = false;
|
|
53
53
|
let directionAwareReverse = false;
|
|
54
54
|
let activePointerEvent = null;
|
|
55
|
-
// Hover preview state
|
|
56
55
|
let hoveringRail = false;
|
|
57
56
|
let hoverPreviewValue = min;
|
|
58
57
|
let hoverValuePercentage = 0;
|
|
@@ -288,7 +287,7 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
288
287
|
-->
|
|
289
288
|
<div
|
|
290
289
|
use:forwardEvents
|
|
291
|
-
on:mousedown|preventDefault={
|
|
290
|
+
on:mousedown|preventDefault={event => {
|
|
292
291
|
holding = true;
|
|
293
292
|
dragging = true;
|
|
294
293
|
activePointerEvent = event;
|
|
@@ -410,4 +409,4 @@ A slider is a control that lets the user select from a range of values by moving
|
|
|
410
409
|
<input type="range" hidden {min} {max} {step} {disabled} {value} bind:this={inputElement} />
|
|
411
410
|
</div>
|
|
412
411
|
|
|
413
|
-
<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-hover-preview{inset-block-end:calc(100% + 8px);inset-inline-start:var(--fds-slider-hover-position);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-hover-preview{inset-block-end:var(--fds-slider-hover-position);inset-inline-start:calc(100% + 8px);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-hover-preview{pointer-events:none;position:absolute;z-index:30}.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>
|
|
412
|
+
<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-hover-preview{inset-block-end:calc(100% + 8px);inset-inline-start:var(--fds-slider-hover-position);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-hover-preview{inset-block-end:var(--fds-slider-hover-position);inset-inline-start:calc(100% + 8px);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-hover-preview{pointer-events:none;position:absolute;z-index:30}.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