@bagelink/vue 1.12.47 → 1.12.49
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/package.json
CHANGED
|
@@ -13,6 +13,9 @@ export type TriggerEvent = 'click' | 'hover'
|
|
|
13
13
|
|
|
14
14
|
defineOptions({ inheritAttrs: false, name: 'DropDown' })
|
|
15
15
|
|
|
16
|
+
// Module-level counter so each Dropdown instance gets a unique id
|
|
17
|
+
let _bglIdCounter = 0
|
|
18
|
+
|
|
16
19
|
const props = withDefaults(defineProps<{
|
|
17
20
|
value?: string
|
|
18
21
|
thin?: boolean
|
|
@@ -59,6 +62,9 @@ const shown = defineModel('shown', { type: Boolean, default: false })
|
|
|
59
62
|
|
|
60
63
|
const triggerWrapRef = ref<HTMLElement | null>(null)
|
|
61
64
|
const popoverRef = ref<HTMLElement | null>(null)
|
|
65
|
+
|
|
66
|
+
// Unique id for this popover instance, used to track parent–child relationships across teleported popovers
|
|
67
|
+
const bglId = `bgl-dd-${++_bglIdCounter}`
|
|
62
68
|
const teleportTarget = ref<string | Element>('body')
|
|
63
69
|
|
|
64
70
|
const { isMobile, innerWidth } = useDevice()
|
|
@@ -135,6 +141,14 @@ async function internalShow() {
|
|
|
135
141
|
// Wait for Teleport to move the element to the new target before promoting to top layer
|
|
136
142
|
await nextTick()
|
|
137
143
|
if (!popoverRef.value) return
|
|
144
|
+
|
|
145
|
+
// Tag with our own id and, if the trigger lives inside another open popover, tag with that owner's id.
|
|
146
|
+
// This lets ancestor Dropdowns skip closing when a click lands inside our (teleported) popover.
|
|
147
|
+
popoverRef.value.dataset.bglId = bglId
|
|
148
|
+
const ownerPopover = triggerWrapRef.value?.closest<HTMLElement>('[data-bgl-id]')
|
|
149
|
+
if (ownerPopover?.dataset.bglId) popoverRef.value.dataset.bglOwner = ownerPopover.dataset.bglId
|
|
150
|
+
else delete popoverRef.value.dataset.bglOwner
|
|
151
|
+
|
|
138
152
|
// Show hidden first so floating-ui can measure it, then position, then reveal
|
|
139
153
|
popoverRef.value.style.opacity = '0'
|
|
140
154
|
popoverRef.value.showPopover()
|
|
@@ -180,6 +194,15 @@ function onDocumentPointerDown(e: PointerEvent) {
|
|
|
180
194
|
if (!props.autoHide || !isOpen()) return
|
|
181
195
|
const target = e.target as Node
|
|
182
196
|
if (popoverRef.value?.contains(target) || triggerWrapRef.value?.contains(target)) return
|
|
197
|
+
// Don't close if the click landed inside a descendant popover (e.g. a SelectInput inside this
|
|
198
|
+
// dropdown that teleports its popup to <body>). We detect this via a data-bgl-owner attribute
|
|
199
|
+
// that each Dropdown sets on its popover element to point to the nearest ancestor popover's id.
|
|
200
|
+
const openPopovers = document.querySelectorAll<HTMLElement>('[popover]:popover-open')
|
|
201
|
+
const myId = popoverRef.value?.dataset.bglId
|
|
202
|
+
for (const p of openPopovers) {
|
|
203
|
+
if (p === popoverRef.value) continue
|
|
204
|
+
if (p.contains(target) && myId && p.dataset.bglOwner === myId) return
|
|
205
|
+
}
|
|
183
206
|
internalHide()
|
|
184
207
|
}
|
|
185
208
|
|
|
@@ -290,7 +290,6 @@ function onConnectorChange(id: string, connector: LogicalOperator) {
|
|
|
290
290
|
<Dropdown
|
|
291
291
|
flat placement="bottom-end" icon="filter_alt"
|
|
292
292
|
:value="activeFiltersCount > 0 ? `${currentTexts.filter} (${activeFiltersCount})` : currentTexts.filter" thin
|
|
293
|
-
:auto-hide="false"
|
|
294
293
|
>
|
|
295
294
|
<div class="p-1 m_p-05">
|
|
296
295
|
<div class="p-025 bg-bg radius-1 mb-05 m_max-h-300px m_overflow m_border">
|