fluent-svelte-extra 2.1.5 → 2.1.7
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/ComboBox/ComboBox.svelte +23 -2
- package/package.json +1 -1
package/ComboBox/ComboBox.svelte
CHANGED
|
@@ -58,6 +58,7 @@ const forwardEvents = createEventForwarder(get_current_component(), [
|
|
|
58
58
|
const dispatch = createEventDispatcher();
|
|
59
59
|
const buttonId = uid("fds-combo-box-button-");
|
|
60
60
|
const dropdownId = uid("fds-combo-box-dropdown-");
|
|
61
|
+
let isRightAligned = false;
|
|
61
62
|
$: selectableItems = items.filter(item => !item.disabled);
|
|
62
63
|
$: selection = items.find(i => i.value === value);
|
|
63
64
|
$: if (menuElement && menuElement.children.length > 0 && !editable) {
|
|
@@ -76,7 +77,14 @@ $: if (items.length > 0) {
|
|
|
76
77
|
dispatch("close");
|
|
77
78
|
}
|
|
78
79
|
}
|
|
79
|
-
|
|
80
|
+
let previousSelectedValue = Symbol("init");
|
|
81
|
+
$: {
|
|
82
|
+
const currentSelectedValue = selection ? selection.value : undefined;
|
|
83
|
+
if (currentSelectedValue !== previousSelectedValue) {
|
|
84
|
+
previousSelectedValue = currentSelectedValue;
|
|
85
|
+
dispatch("select", selection);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
80
88
|
$: menuGrowDirection =
|
|
81
89
|
direction !== "auto"
|
|
82
90
|
? direction === "top"
|
|
@@ -113,6 +121,7 @@ function selectItem(item) {
|
|
|
113
121
|
containerElement.children[0].focus();
|
|
114
122
|
}
|
|
115
123
|
async function openMenu() {
|
|
124
|
+
isRightAligned = false;
|
|
116
125
|
open = !open;
|
|
117
126
|
await tick();
|
|
118
127
|
if (editable && searchInputElement)
|
|
@@ -129,6 +138,13 @@ async function openMenu() {
|
|
|
129
138
|
menuOffset = 0;
|
|
130
139
|
}
|
|
131
140
|
}
|
|
141
|
+
if (open && menuElement && autoWidth) {
|
|
142
|
+
const rect = menuElement.getBoundingClientRect();
|
|
143
|
+
const viewportWidth = window.innerWidth;
|
|
144
|
+
if (rect.right > viewportWidth) {
|
|
145
|
+
isRightAligned = true;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
132
148
|
}
|
|
133
149
|
async function handleKeyboardNavigation(event) {
|
|
134
150
|
const { key } = event;
|
|
@@ -322,7 +338,12 @@ When the combo box is closed, it either displays the current selection or is emp
|
|
|
322
338
|
class="combo-box-dropdown direction-{!editable
|
|
323
339
|
? (menuGrowDirection ?? 'center')
|
|
324
340
|
: 'top'}"
|
|
325
|
-
style="
|
|
341
|
+
style="
|
|
342
|
+
--fds-menu-offset: {menuOffset}px;
|
|
343
|
+
{isRightAligned
|
|
344
|
+
? 'inset-inline-start: auto; inset-inline-end: 0; margin-inline-start: 0; margin-inline-end: -5px;'
|
|
345
|
+
: ''}
|
|
346
|
+
"
|
|
326
347
|
>
|
|
327
348
|
{#each items as item, i}
|
|
328
349
|
<ComboBoxItem
|
package/package.json
CHANGED