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