+27
-31
lines changedFilter options
+27
-31
lines changed Original file line number Diff line number Diff line change
@@ -6,8 +6,14 @@ import {
6 6
EVENTS,
7 7
focus,
8 8
} from '../../utils/dom.utils';
9 -
import { isBoolean } from '../../utils/object.utils';
10 -
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue';
9 +
import {
10 +
defineComponent,
11 +
onBeforeUnmount,
12 +
onMounted,
13 +
ref,
14 +
watch,
15 +
Teleport,
16 +
} from 'vue';
11 17 12 18
const DEFAULT_TAG = 'div';
13 19
@@ -80,13 +86,19 @@ export default defineComponent({
80 86
if (props.disabled) {
81 87
return;
82 88
}
83 -
if (isBoolean(s)) {
89 +
if (typeof s === 'boolean') {
84 90
show.value = s;
85 91
} else {
86 92
show.value = !show.value;
87 93
}
88 94
if (props.appendToBody) {
89 -
show.value ? appendDropdownToBody() : removeDropdownFromBody();
95 +
if (show.value) {
96 +
dropdown.value.style.display = 'block';
97 +
const positionElement = props.positionElement || element.value;
98 +
setDropdownPosition(dropdown.value, positionElement, props);
99 +
} else {
100 +
dropdown.value?.removeAttribute('style');
101 +
}
90 102
}
91 103
emit('update:modelValue', show.value);
92 104
}
@@ -131,23 +143,6 @@ export default defineComponent({
131 143
}
132 144
}
133 145 134 -
function appendDropdownToBody() {
135 -
try {
136 -
const el = dropdown.value;
137 -
el.style.display = 'block';
138 -
document.body.appendChild(el);
139 -
const positionElement = props.positionElement || element.value;
140 -
setDropdownPosition(el, positionElement, props);
141 -
} catch (e) {
142 -
// Silent
143 -
}
144 -
}
145 - 146 -
function removeDropdownFromBody() {
147 -
dropdown.value?.removeAttribute('style');
148 -
element.value?.appendChild(dropdown.value);
149 -
}
150 - 151 146
onMounted(() => {
152 147
initTrigger();
153 148
if (triggerEl.value) {
@@ -163,7 +158,6 @@ export default defineComponent({
163 158
});
164 159 165 160
onBeforeUnmount(() => {
166 -
removeDropdownFromBody();
167 161
if (triggerEl.value) {
168 162
off(triggerEl.value, EVENTS.CLICK, toggle);
169 163
off(triggerEl.value, EVENTS.KEY_DOWN, onKeyPress);
@@ -193,15 +187,17 @@ export default defineComponent({
193 187
}}
194 188
>
195 189
{slots.default?.()}
196 -
<ul
197 -
ref={dropdown}
198 -
class={{
199 -
'dropdown-menu': true,
200 -
'dropdown-menu-right': props.menuRight,
201 -
}}
202 -
>
203 -
{slots.dropdown?.()}
204 -
</ul>
190 +
<Teleport to="body" disabled={!props.appendToBody || !show.value}>
191 +
<ul
192 +
ref={dropdown}
193 +
class={{
194 +
'dropdown-menu': true,
195 +
'dropdown-menu-right': props.menuRight,
196 +
}}
197 +
>
198 +
{slots.dropdown?.()}
199 +
</ul>
200 +
</Teleport>
205 201
</Tag>
206 202
);
207 203
};
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4