adverich-kun-ui
Version:
Una librería de componentes Vue.js con Tailwind CSS
54 lines (53 loc) • 2.2 kB
JavaScript
import { ref as w, onMounted as L, onUnmounted as C } from "vue";
function R(s, g, c = {}) {
const { offset: r = 8, placement: W = "bottom-start" } = c, u = w({
position: "fixed",
top: "0px",
left: "0px",
opacity: "0",
pointerEvents: "none",
transform: "scale(0.95)",
maxHeight: "auto"
// Default
}), o = w("bottom"), a = w(!1), p = async () => {
if (!s.value || !g.value) return;
const d = s.value.rootRef || s.value.$el || s.value, B = g.value;
if (!d || !d.getBoundingClientRect) return;
const t = d.getBoundingClientRect(), i = B.getBoundingClientRect(), E = window.innerHeight, m = window.innerWidth, n = 12, v = E - t.bottom - r - n, f = t.top - r - n, H = v >= i.height, z = f >= i.height;
let $ = 0, e = 0, l = "top center", h = 0;
H || !z && v >= f ? ($ = t.bottom + r, o.value = "bottom", l = "top center", h = v) : (h = f, o.value = "top", l = "bottom center"), c.align === "right" ? (e = t.right - i.width, l = o.value === "bottom" ? "top right" : "bottom right") : c.align === "center" ? (e = t.left + t.width / 2 - i.width / 2, l = o.value === "bottom" ? "top center" : "bottom center") : (e = t.left, l = o.value === "bottom" ? "top left" : "bottom left"), e + i.width > m - n && (e = m - i.width - n), e < n && (e = n);
const y = {
position: "fixed",
left: `${e}px`,
opacity: "1",
pointerEvents: "auto",
transform: "scale(1)",
transformOrigin: l,
zIndex: "99999",
maxWidth: `${m - n * 2}px`,
// Essential for scrolling: Restrict max-height to available space
maxHeight: `${h}px`
};
o.value === "top" ? u.value = {
...y,
top: "auto",
bottom: `${E - t.top + r}px`
} : u.value = {
...y,
top: `${$}px`,
bottom: "auto"
}, a.value = !0;
}, b = () => {
a.value && p();
}, x = () => {
a.value && p();
};
return L(() => {
window.addEventListener("resize", x), window.addEventListener("scroll", b, !0);
}), C(() => {
window.removeEventListener("resize", x), window.removeEventListener("scroll", b, !0);
}), { style: u, update: p, position: o, isVisible: a };
}
export {
R as usePosition
};