https://app.flowspark.co/build/assets/vue-transitions-CEGBwb15.js

1import { o as v, i as m, f as g, H as x, Z as $, a7 as P, N as T, av as S, M as w } from "./app-BQglH-tG.js";
2var D = (t) => Object.prototype.toString.call(t).includes("Object"), f = (t) => typeof t == "number" && !isNaN(t), O = (t) => Array.isArray(t), u = (t) => Number.isInteger(t), h = (t) => Object.prototype.toString.call(t) === "[object String]";
3const d = (t, e) => e(t) ? true : !D(t) || Object.keys(t).length !== 2 ? false : !Object.entries(t).some(([s, r]) => {
4  const i = !["enter", "leave"].includes(s), o = !e(r);
5  return i || o;
6}), L = (t) => d(t, (e) => u(e) && e >= 0), N = (t) => d(t, (e) => h(e) && e.trim() !== ""), k = (t) => d(t, (e) => u(e) && e >= 0), b = 300, A = "cubic-bezier(.25, .8, .5, 1)", B = 0, C = "y", M = [0, -16], j = b, E = { inheritAttrs: false, props: { duration: { validator: L, default: b }, easing: { validator: N, default: () => A }, delay: { validator: k, default: B }, noOpacity: { type: Boolean, default: false }, appear: { type: Boolean, default: false }, mode: { type: String, default: void 0 }, group: { type: Boolean, default: false }, tag: { type: String, default: "span" }, noMove: { type: Boolean, default: false }, moveDuration: { type: Number, default: j } }, computed: { cComponent() {
7  return this.group ? S : w;
8}, cAttrs() {
9  const { appear: t, mode: e, tag: s, duration: r } = this;
10  return this.group ? { appear: t, tag: s, duration: r, ...this.$attrs } : { appear: t, mode: e, duration: r };
11}, cHooks() {
12  return { beforeEnter: (...t) => {
13    this.reduceTransition(...t), this.$emit("before-enter", ...t);
14  }, beforeLeave: (...t) => {
15    var e;
16    this.reduceTransition(...t), (e = this.initLeaving) == null || e.call(this, ...t), this.$emit("before-leave", ...t);
17  }, enter: (...t) => {
18    var e;
19    (e = this.onEnter) == null || e.call(this, ...t), this.$emit("enter", ...t);
20  }, leave: (...t) => {
21    var e;
22    (e = this.onLeave) == null || e.call(this, ...t), this.$emit("leave", ...t);
23  }, afterEnter: (...t) => {
24    var e;
25    this.resetTransition(...t), (e = this.resetElement) == null || e.call(this, ...t), this.$emit("after-enter", ...t);
26  }, afterLeave: (...t) => {
27    var e;
28    this.resetTransition(...t), (e = this.resetElement) == null || e.call(this, ...t), this.$emit("after-leave", ...t);
29  } };
30} }, methods: { setupTransition(t, e = "enter") {
31  var s, r, i;
32  const o = ((s = this.duration) == null ? void 0 : s[e]) ?? this.duration, p = ((r = this.easing) == null ? void 0 : r[e]) ?? this.easing, a = ((i = this.delay) == null ? void 0 : i[e]) ?? this.delay;
33  t.style.setProperty("transition-duration", `${o}ms`, "important"), t.style.setProperty("transition-timing-function", `${p}`, "important"), t.style.setProperty("transition-delay", `${a}ms`, "important");
34}, reduceTransition(t) {
35  t.style.setProperty("transition-duration", "0ms", "important"), t.style.setProperty("transition-delay", "0ms", "important");
36}, resetTransition(t) {
37  t.style.removeProperty("transition-duration"), t.style.removeProperty("transition-timing-function"), t.style.removeProperty("transition-delay");
38}, initLeaving(t) {
39  if (!this.group || this.noMove) return t;
40  const e = getComputedStyle(t), { width: s, height: r } = e, { marginLeft: i, marginTop: o } = e;
41  return t.style.setProperty("left", `${t.offsetLeft - parseFloat(i)}px`, "important"), t.style.setProperty("top", `${t.offsetTop - parseFloat(o)}px`, "important"), t.style.setProperty("width", `${parseFloat(s)}px`, "important"), t.style.setProperty("height", `${parseFloat(r)}px`, "important"), t.style.setProperty("position", "absolute", "important"), t;
42}, setMoveDuration() {
43  var t;
44  this.group && this.$el && ((t = this.$el.style) == null || t.setProperty("--move-duration", `${this.moveDuration}ms`));
45} }, watch: { moveDuration() {
46  this.setMoveDuration();
47}, group() {
48  this.setMoveDuration();
49} }, mounted() {
50  this.setMoveDuration();
51} }, z = (t) => d(t, (e) => h(e) && ["x", "y"].includes(e)), _ = (t, e) => {
52  const s = t.__vccOpts || t;
53  for (const [r, i] of e) s[r] = i;
54  return s;
55}, W = { name: "transition-expand", mixins: [E], props: { axis: { validator: z, default: C } }, data: () => ({}), computed: {}, methods: { async onEnter(t) {

56  await this.$nextTick(), await this.$nextTick(), this.getSizes(t), this.collapseElement(t, "enter"), t.offsetTop, this.setupTransition(t, "enter"), this.expandElement(t, "enter");
57}, onLeave(t) {
58  this.getSizes(t), this.expandElement(t, "leave"), t.offsetTop, this.setupTransition(t, "leave"), this.collapseElement(t, "leave");
59}, expandElement(t, e = "enter") {
60  var s;
61  const r = ((s = this.axis) == null ? void 0 : s[e]) ?? this.axis, i = r === "x" ? "left" : "top", o = r === "x" ? "right" : "bottom", p = t.visual.size[r], a = t.visual.margin[r], n = t.visual.padding[r];
62  this.noOpacity || t.style.setProperty("opacity", t.visual.opacity), delete t.visual, t.style.setProperty(r === "x" ? "width" : "height", `${parseFloat(p)}px`), t.style.setProperty(`padding-${i}`, `${parseFloat(n[0])}px`), t.style.setProperty(`padding-${o}`, `${parseFloat(n[1])}px`), t.style.setProperty(`margin-${i}`, `${parseFloat(a[0])}px`), t.style.setProperty(`margin-${o}`, `${parseFloat(a[1])}px`);
63}, collapseElement(t, e = "enter") {
64  var s;
65  const r = ((s = this.axis) == null ? void 0 : s[e]) ?? this.axis, i = r === "x" ? "width" : "height", o = r === "x" ? "left" : "top", p = r === "x" ? "right" : "bottom";
66  this.noOpacity || t.style.setProperty("opacity", 0), t.style.setProperty(i, "0px"), t.style.setProperty(`padding-${o}`, "0px"), t.style.setProperty(`padding-${p}`, "0px"), t.style.setProperty(`margin-${o}`, "0px"), t.style.setProperty(`margin-${p}`, "0px");
67}, resetElement(t) {
68  t.style.removeProperty("opacity"), t.style.removeProperty("width"), t.style.removeProperty("height"), t.style.removeProperty("padding-top"), t.style.removeProperty("padding-right"), t.style.removeProperty("padding-bottom"), t.style.removeProperty("padding-left"), t.style.removeProperty("margin-top"), t.style.removeProperty("margin-right"), t.style.removeProperty("margin-bottom"), t.style.removeProperty("margin-left");
69}, getSizes(t) {
70  const e = getComputedStyle(t), { opacity: s } = e, { width: r, height: i } = e, { paddingTop: o, paddingRight: p, paddingBottom: a, paddingLeft: n } = e, { marginTop: y, marginRight: l, marginBottom: c, marginLeft: F } = e;
71  t.visual = { opacity: s, size: { x: r, y: i }, padding: { x: [n, p], y: [o, a] }, margin: { x: [F, l], y: [y, c] } };
72} } };
73function H(t, e, s, r, i, o) {
74  return v(), m(T(t.cComponent), $({ name: "expand" }, t.cAttrs, P(t.cHooks)), { default: g(() => [x(t.$slots, "default")]), _: 3 }, 16);
75}
76const X = _(W, [["render", H]]), I = (t) => {
77  const e = t.startsWith("matrix3d") ? "matrix3d" : "matrix", s = e === "matrix3d" ? t.slice(9, -1).split(",").map(Number) : t.startsWith("matrix") ? t.slice(7, -1).split(",").map(Number) : [1, 0, 0, 1, 0, 0];
78  return [e, s];
79}, R = (t) => d(t, (e) => !O(e) || e.length !== 2 ? false : !e.some((s) => u(s) ? false : h(s) ? isNaN(Number(s.endsWith("%") ? s.slice(0, -1) : s)) : true)), G = { name: "transition-sli

79de", mixins: [E], props: { offset: { validator: R, default: () => M } }, data: () => ({}), computed: {}, methods: { onEnter(t) {
80  this.slideElement(t, "enter"), t.offsetTop, this.setupTransition(t, "enter"), t.style.removeProperty("opacity"), t.style.removeProperty("transform");
81}, onLeave(t) {
82  this.setupTransition(t, "leave"), this.slideElement(t, "leave");
83}, slideElement(t, e = "enter") {
84  var s;
85  const { width: r, height: i, transform: o } = getComputedStyle(t), p = ((s = this.offset) == null ? void 0 : s[e]) ?? this.offset;
86  let [a, n] = p;
87  f(a) || (a = a.endsWith("%") ? parseFloat(r) * (parseFloat(a.slice(0, -1)) || 0) / 100 : parseFloat(a)), f(n) || (n = n.endsWith("%") ? parseFloat(i) * (parseFloat(n.slice(0, -1)) || 0) / 100 : parseFloat(n));
88  const [y, l] = I(o);
89  o.startsWith("matrix3d") ? (l[12] += a, l[13] += n) : o.startsWith("matrix") ? (l[4] += a, l[5] += n) : (l[4] = a, l[5] = n), this.noOpacity || t.style.setProperty("opacity", 0), t.style.setProperty("transform", `${y}(${l})`);
90}, resetElement(t) {
91  t.style.removeProperty("opacity"), t.style.removeProperty("transform");
92} } };
93function K(t, e, s, r, i, o) {
94  return v(), m(T(t.cComponent), $({ name: "slide" }, t.cAttrs, P(t.cHooks)), { default: g(() => [x(t.$slots, "default")]), _: 3 }, 16);
95}
96const Y = _(G, [["render", K]]);
97export {
98  X as T,
99  Y as a
100};