fluent-svelte-extra 1.8.7 → 1.8.9
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.
|
@@ -79,7 +79,7 @@ function handleEscapeKey({ key }) {
|
|
|
79
79
|
bind:this={backdropElement}
|
|
80
80
|
>
|
|
81
81
|
<div
|
|
82
|
-
class="content-dialog-container"
|
|
82
|
+
class="content-dialog-container {className}"
|
|
83
83
|
transition:scale|local={{
|
|
84
84
|
duration: getCSSDuration("--fds-control-fast-duration"),
|
|
85
85
|
start: 1.05,
|
|
@@ -88,7 +88,7 @@ function handleEscapeKey({ key }) {
|
|
|
88
88
|
>
|
|
89
89
|
<div
|
|
90
90
|
use:forwardEvents
|
|
91
|
-
class="content-dialog size-{size}
|
|
91
|
+
class="content-dialog size-{size}"
|
|
92
92
|
role="dialog"
|
|
93
93
|
aria-modal="true"
|
|
94
94
|
aria-labelledby={title && titleId}
|
|
@@ -14,6 +14,7 @@ export let cascadingPlacement = "start";
|
|
|
14
14
|
export let hint = undefined;
|
|
15
15
|
/** Specifies if the item should be styled as selected by the user. */
|
|
16
16
|
export let selected = false;
|
|
17
|
+
export let cascadingDirection = "right";
|
|
17
18
|
/** Marks a radio or toggle variant item as checked. */
|
|
18
19
|
export let checked = false;
|
|
19
20
|
/** Indents the left padding of the item making it's text inline with the added icons of other items. */
|
|
@@ -41,6 +42,7 @@ export let inputLabelElement = null;
|
|
|
41
42
|
export let subMenuAnchorElement = null;
|
|
42
43
|
/** Obtains a bound DOM reference to the inner submenumenu element, which is present if the item is cascading and the submenu is visible. */
|
|
43
44
|
export let subMenuElement = null;
|
|
45
|
+
export let cascadingDelay = 500;
|
|
44
46
|
const forwardEvents = createEventForwarder(get_current_component());
|
|
45
47
|
const dispatch = createEventDispatcher();
|
|
46
48
|
const closeFlyout = getContext("closeFlyout");
|
|
@@ -79,7 +81,7 @@ function handleMouseEnter() {
|
|
|
79
81
|
setTimeout(() => {
|
|
80
82
|
if (subMenuQueue.open)
|
|
81
83
|
open = true;
|
|
82
|
-
},
|
|
84
|
+
}, cascadingDelay);
|
|
83
85
|
}
|
|
84
86
|
function handleMouseLeave(e) {
|
|
85
87
|
subMenuQueue.close = true;
|
|
@@ -87,7 +89,7 @@ function handleMouseLeave(e) {
|
|
|
87
89
|
setTimeout(() => {
|
|
88
90
|
if (subMenuQueue.close)
|
|
89
91
|
open = false;
|
|
90
|
-
},
|
|
92
|
+
}, cascadingDelay);
|
|
91
93
|
}
|
|
92
94
|
</script>
|
|
93
95
|
|
|
@@ -147,6 +149,8 @@ function handleMouseLeave(e) {
|
|
|
147
149
|
style={cascading && cascadingPlacement == "end"
|
|
148
150
|
? "bottom: 0px; inset-block-start:unset;"
|
|
149
151
|
: " --fds-menu-flyout-transition-offset: -50%;"}
|
|
152
|
+
style:left={cascadingDirection == "left" ? "0" : undefined}
|
|
153
|
+
style:transform={cascadingDirection == "left" ? "translateX(-100%)" : undefined}
|
|
150
154
|
class="menu-flyout-submenu-anchor"
|
|
151
155
|
>
|
|
152
156
|
<MenuFlyoutSurface bind:element={subMenuElement} bind:this={menu}>
|
|
@@ -7,6 +7,7 @@ declare const __propDef: {
|
|
|
7
7
|
cascadingPlacement?: "start" | "end";
|
|
8
8
|
hint?: string;
|
|
9
9
|
selected?: boolean;
|
|
10
|
+
cascadingDirection?: "right" | "left";
|
|
10
11
|
checked?: boolean;
|
|
11
12
|
indented?: boolean;
|
|
12
13
|
group?: any;
|
|
@@ -20,6 +21,7 @@ declare const __propDef: {
|
|
|
20
21
|
inputLabelElement?: HTMLLabelElement;
|
|
21
22
|
subMenuAnchorElement?: HTMLDivElement;
|
|
22
23
|
subMenuElement?: HTMLUListElement;
|
|
24
|
+
cascadingDelay?: number;
|
|
23
25
|
};
|
|
24
26
|
events: {
|
|
25
27
|
click: MouseEvent;
|
package/package.json
CHANGED