fluent-svelte-extra 2.1.8 → 2.1.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.
|
@@ -7,6 +7,7 @@ const dispatch = createEventDispatcher();
|
|
|
7
7
|
export let selected = false;
|
|
8
8
|
export let group = "";
|
|
9
9
|
export let singleSelect = false;
|
|
10
|
+
export let disableUnselectionIfGrouped = false;
|
|
10
11
|
const id = Math.random();
|
|
11
12
|
/**
|
|
12
13
|
* Sets the selected state of the grid view item.
|
|
@@ -26,6 +27,13 @@ function setSelected(value, __depth) {
|
|
|
26
27
|
}
|
|
27
28
|
selected = value;
|
|
28
29
|
}
|
|
30
|
+
function handleInteraction() {
|
|
31
|
+
if (disableUnselectionIfGrouped && group.length > 0 && selected) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
setSelected(!selected, false);
|
|
35
|
+
dispatch("change", { selected: selected });
|
|
36
|
+
}
|
|
29
37
|
if (group.length) {
|
|
30
38
|
const getAvailableGroupItems = (_a = getKey(`group:${group}`)) !== null && _a !== void 0 ? _a : [];
|
|
31
39
|
getAvailableGroupItems.push({
|
|
@@ -42,14 +50,10 @@ if (group.length) {
|
|
|
42
50
|
class:selected
|
|
43
51
|
{...$$restProps}
|
|
44
52
|
tabindex="0"
|
|
45
|
-
on:click={
|
|
46
|
-
setSelected(!selected, false);
|
|
47
|
-
dispatch("change", { selected: selected });
|
|
48
|
-
}}
|
|
53
|
+
on:click={handleInteraction}
|
|
49
54
|
on:keydown={e => {
|
|
50
55
|
if (e.key !== "Enter") return;
|
|
51
|
-
|
|
52
|
-
dispatch("change", { selected: selected });
|
|
56
|
+
handleInteraction();
|
|
53
57
|
}}
|
|
54
58
|
>
|
|
55
59
|
{#if !singleSelect}
|
|
@@ -58,6 +62,10 @@ if (group.length) {
|
|
|
58
62
|
tabindex="-1"
|
|
59
63
|
bind:checked={selected}
|
|
60
64
|
on:change={() => {
|
|
65
|
+
if (disableUnselectionIfGrouped && group.length > 0 && !selected) {
|
|
66
|
+
selected = true;
|
|
67
|
+
return;
|
|
68
|
+
}
|
|
61
69
|
dispatch("change", { selected: !selected });
|
|
62
70
|
}}
|
|
63
71
|
/>
|
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
import { createEventDispatcher, setContext } from "svelte";
|
|
3
3
|
import { arrowNavigation, uid } from "../internal";
|
|
4
4
|
import MenuFlyoutSurface from "./MenuFlyoutSurface.svelte";
|
|
5
|
-
import Portal from "../Portal/Portal.svelte";
|
|
6
5
|
/** Determines the flyout's visibility. */
|
|
7
6
|
export let open = false;
|
|
8
7
|
/** Determines if the flyout can be closed using conventional user interaction. */
|
|
@@ -28,8 +27,6 @@ export let anchorElement = null;
|
|
|
28
27
|
export let menuElement = null;
|
|
29
28
|
/** Obtains a bound DOM reference to the menu backdrop, which is present while the menu is `open`. */
|
|
30
29
|
export let backdropElement = null;
|
|
31
|
-
/** Specifies a selector string indicating where the backdrop should be teleported to. Defaults to `""`, which does not teleport the backdrop. */
|
|
32
|
-
export let teleportBackdropTo = "";
|
|
33
30
|
const dispatch = createEventDispatcher();
|
|
34
31
|
const menuId = uid("fds-menu-flyout-anchor-");
|
|
35
32
|
let menu = null;
|
|
@@ -93,23 +90,12 @@ setContext("closeFlyout", event => {
|
|
|
93
90
|
<slot name="flyout" />
|
|
94
91
|
</MenuFlyoutSurface>
|
|
95
92
|
</div>
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
on:mousedown={closeFlyout}
|
|
103
|
-
/>
|
|
104
|
-
</Portal>
|
|
105
|
-
{:else}
|
|
106
|
-
<div
|
|
107
|
-
class="menu-flyout-backdrop"
|
|
108
|
-
bind:this={backdropElement}
|
|
109
|
-
on:click={e => e.stopPropagation()}
|
|
110
|
-
on:mousedown={closeFlyout}
|
|
111
|
-
/>
|
|
112
|
-
{/if}
|
|
93
|
+
<div
|
|
94
|
+
class="menu-flyout-backdrop"
|
|
95
|
+
bind:this={backdropElement}
|
|
96
|
+
on:click={e => e.stopPropagation()}
|
|
97
|
+
on:mousedown={closeFlyout}
|
|
98
|
+
/>
|
|
113
99
|
{/if}
|
|
114
100
|
</div>
|
|
115
101
|
|
package/package.json
CHANGED