@layui/layui-vue/es/popper/usePopper/usePopper.js

a component library for Vue 3 base on layui-vue

import { autoUpdate as A, computePosition as D } from "@floating-ui/dom";
import { computed as e, unref as a, ref as l, shallowRef as R, watch as $ } from "vue";
import { unRefRealElement as w } from "./utils.js";
function j(g, x, s = {}) {
  const h = e(() => a(s.middleware)), d = e(() => a(s.strategy) || "absolute"), i = e(() => a(s.placement) || "bottom"), t = e(() => w(g.value)), u = e(() => w(x.value)), n = l(0), r = l(0), p = l(d.value), f = l(i.value), c = R({}), U = e(() => ({ x: a(n), y: a(r), strategy: a(p) })), b = e(() => ({ top: `${r.value}px`, left: `${n.value}px`, position: p.value })), o = l(), m = l();
  function y() {
    t.value !== null && u.value !== null && D(t.value, u.value, { placement: i.value, strategy: d.value, middleware: h.value }).then((v) => {
      n.value = v.x, r.value = v.y, p.value = v.strategy, f.value = v.placement, c.value = v.middlewareData;
    });
  }
  return m.value = () => {
    typeof o.value == "function" && (o.value(), o.value = void 0), t.value !== null && u.value !== null && (o.value = A(t.value, u.value, y));
  }, $([t, u], m.value, { flush: "sync" }), { position: U, strategy: p, placement: f, popperStyle: b, middlewareData: c, update: y, stopAutoUpdate: o, startAutoUpdate: m };
}
export {
  j as usePopper
};