@aplus-frontend/ui
Version:
50 lines (49 loc) • 1.26 kB
JavaScript
import { ref as w, computed as o, watch as P, unref as v } from "vue";
import { useResizeObserver as R } from "@vueuse/core";
const h = { xs: 0, sm: 768, md: 1280, lg: 1728 };
function z(r) {
return Object.entries(r).sort((s, n) => n[1] - s[1]);
}
const p = (r, s) => {
const n = w(0), c = o(() => {
const { resize: e, resizeTarget: t } = r;
return e?.target ? e.target === "document" ? document.documentElement : e.target === "form" ? s.value?.$el : e.target : t ?? document.documentElement;
}), i = o(() => {
const e = r.resize?.breakPoint ?? h;
return z(e);
});
P(
() => c.value,
(e, t, m) => {
const u = typeof e == "string" ? document.querySelector(e) : e;
if (!u)
return;
const { stop: d } = R(u, (f) => {
const l = f[0], { width: g } = l.contentRect;
n.value = g;
});
m(() => {
d();
});
},
{ flush: "post", immediate: !0 }
);
const a = o(() => {
for (const [e, t] of i.value)
if (v(n) > t)
return e;
return "md";
});
return o(() => {
const e = r.countPerRow, t = {
xs: e - 2,
sm: e - 1,
md: e,
lg: e + 1
};
return Math.max(1, t[a.value]);
});
};
export {
p as useCountPerRow
};