@maas/vue-autosize
Version:
Vue component that interpolates its size according to its content
268 lines (267 loc) • 7 kB
JavaScript
import { getCurrentScope as C, onScopeDispose as x, computed as v, toValue as y, watch as m, shallowRef as N, getCurrentInstance as I, onMounted as z, defineComponent as Q, useTemplateRef as R, reactive as b, ref as B, createElementBlock as E, openBlock as T, normalizeStyle as W, renderSlot as $ } from "vue";
function O(e) {
return C() ? (x(e), !0) : !1;
}
const H = typeof window < "u" && typeof document < "u";
typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
const L = (e) => e != null;
function P(e) {
return Array.isArray(e) ? e : [e];
}
const M = H ? window : void 0;
function w(e) {
var i;
const n = y(e);
return (i = n == null ? void 0 : n.$el) != null ? i : n;
}
function V() {
const e = N(!1), i = I();
return i && z(() => {
e.value = !0;
}, i), e;
}
function k(e) {
const i = V();
return v(() => (i.value, !!e()));
}
function F(e, i, n = {}) {
const { window: r = M, ...l } = n;
let u;
const a = k(() => r && "MutationObserver" in r), s = () => {
u && (u.disconnect(), u = void 0);
}, d = v(() => {
const t = y(e), o = P(t).map(w).filter(L);
return new Set(o);
}), p = m(
() => d.value,
(t) => {
s(), a.value && t.size && (u = new MutationObserver(i), t.forEach((o) => u.observe(o, l)));
},
{ immediate: !0, flush: "post" }
), h = () => u == null ? void 0 : u.takeRecords(), c = () => {
p(), s();
};
return O(c), {
isSupported: a,
stop: c,
takeRecords: h
};
}
function q(e, i, n = {}) {
const { window: r = M, ...l } = n;
let u;
const a = k(() => r && "ResizeObserver" in r), s = () => {
u && (u.disconnect(), u = void 0);
}, d = v(() => {
const c = y(e);
return Array.isArray(c) ? c.map((t) => w(t)) : [w(c)];
}), p = m(
d,
(c) => {
if (s(), a.value && r) {
u = new ResizeObserver(i);
for (const t of c)
t && u.observe(t, l);
}
},
{ immediate: !0, flush: "post" }
), h = () => {
s(), p();
};
return O(h), {
isSupported: a,
stop: h
};
}
function S(e) {
const { from: i, to: n, duration: r, callback: l, easing: u = (d) => d * (2 - d) } = e;
let a;
function s(d) {
a || (a = d);
const p = Math.min(1, (d - a) / r), h = u(p), c = i + (n - i) * h;
l(c), p < 1 && requestAnimationFrame(s);
}
requestAnimationFrame(s);
}
function j(e) {
return e;
}
function J(e) {
return e * e;
}
function D(e) {
return e * (2 - e);
}
function K(e) {
return e < 0.5 ? 2 * e * e : -1 + (4 - 2 * e) * e;
}
function U(e, i = 1.25) {
return 1 + (e - 1) * (e - 1) * ((i + 1) * (e - 1) + i);
}
function X(e) {
return e * e * e;
}
function Y(e) {
return --e * e * e + 1;
}
function Z(e) {
return e < 0.5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1;
}
function _(e) {
return e * e * e * e;
}
function ee(e) {
return 1 - --e * e * e * e;
}
function te(e) {
return e < 0.5 ? 8 * e * e * e * e : 1 - 8 * --e * e * e * e;
}
function ne(e) {
return e * e * e * e * e;
}
function ie(e) {
return 1 + --e * e * e * e * e;
}
function oe(e) {
return e < 0.5 ? 16 * e * e * e * e * e : 1 + 16 * --e * e * e * e * e;
}
const re = /* @__PURE__ */ Q({
__name: "AutoSize",
props: {
width: { type: Boolean, default: !0 },
height: { type: Boolean, default: !0 },
duration: { default: 150 },
easing: { type: Function, default: D }
},
setup(e) {
const i = R("el"), n = b({
width: 0,
height: 0
}), r = b({
width: 0,
height: 0
}), l = B(void 0), u = v(() => {
if (n)
switch (!0) {
case (e.width && e.height):
return {
width: `${r.width}px`,
height: `${r.height}px`
};
case e.width:
return {
width: `${r.width}px`
};
case e.height:
return {
height: `${r.height}px`
};
default:
return;
}
else
return;
});
function a(t) {
const o = parseFloat(t) ?? 0;
return isNaN(o) ? 0 : o;
}
const s = v(() => {
if (i.value) {
const t = getComputedStyle(i.value, null), o = a(t.getPropertyValue("padding-top")), f = a(t.getPropertyValue("padding-left")), g = a(t.getPropertyValue("padding-right")), A = a(t.getPropertyValue("padding-bottom"));
return { x: g + f, y: o + A };
} else
return { x: 0, y: 0 };
}), d = v(() => {
var t;
return Array.from(((t = i.value) == null ? void 0 : t.childNodes) ?? []).find(
(o) => o instanceof HTMLElement
);
}), p = v(() => {
var o, f;
let t = {};
return e.width && (t = {
...t,
width: "var(--auto-size-width)",
"--auto-size-width": (o = u.value) == null ? void 0 : o.width
}), e.height && (t = {
...t,
height: "var(--auto-size-height)",
"--auto-size-height": (f = u.value) == null ? void 0 : f.height
}), t;
});
F(
i,
(t) => {
const o = t.flatMap((g) => [...g.addedNodes]).find((g) => g instanceof HTMLElement), f = t.flatMap((g) => [...g.addedNodes]).find((g) => g instanceof Comment);
o && (l.value = o), f && !d.value && (l.value = void 0, n.width = 0, n.height = 0), d.value || (l.value = void 0, n.width = 0, n.height = 0);
},
{
childList: !0
}
), q(l, (t) => {
const f = t[0].borderBoxSize[0];
n.width = f.inlineSize + s.value.x, n.height = f.blockSize + s.value.y;
}), z(() => {
if (i.value) {
const t = i.value.querySelectorAll("*"), o = Array.from(t).find(
(f) => f instanceof HTMLElement
);
o && o instanceof HTMLElement ? (l.value = o, n.width = o.offsetWidth + s.value.x, n.height = o.offsetHeight + s.value.y) : (n.width = 0, n.height = 0), h(n.width), c(n.height);
}
});
function h(t) {
isNaN(t) || (r.width = t);
}
function c(t) {
isNaN(t) || (r.height = t);
}
return m(
() => n.width,
(t) => {
t !== r.width && S({
from: r.width,
to: t,
duration: e.duration,
easing: e.easing,
callback: h
});
}
), m(
() => n.height,
(t) => {
t !== r.width && S({
from: r.height,
to: t,
duration: e.duration,
easing: e.easing,
callback: c
});
}
), (t, o) => (T(), E("div", {
ref: "el",
class: "auto-size",
style: W(p.value)
}, [
$(t.$slots, "default")
], 4));
}
});
export {
re as AutoSize,
X as easeInCubic,
Z as easeInOutCubic,
K as easeInOutQuad,
te as easeInOutQuart,
oe as easeInOutQuint,
J as easeInQuad,
_ as easeInQuart,
ne as easeInQuint,
U as easeOutBack,
Y as easeOutCubic,
D as easeOutQuad,
ee as easeOutQuart,
ie as easeOutQuint,
S as interpolate,
j as linear
};