@juleshry/vue-animejs 1.2.2 → 1.3.0

package/dist/index.js

@@ -1,28 +1,28 @@
 import { computed as e, isRef as t, markRaw as n, shallowReadonly as r, shallowRef as i, toValue as a, unref as o, watch as s } from "vue";
-import { animate as c, createAnimatable as l, createDraggable as u, createLayout as d, createScope as f, createTimeline as p, createTimer as m, splitText as h, svg as g, waapi as _ } from "animejs";
-import { isClient as v, tryOnMounted as y, tryOnUnmounted as b, unrefElement as x } from "@vueuse/core";
+import { animate as c, createAnimatable as l, createDraggable as u, createLayout as d, createScope as f, createTimeline as p, createTimer as m, onScroll as h, splitText as g, svg as _, waapi as v } from "animejs";
+import { isClient as y, tryOnMounted as b, tryOnUnmounted as x, unrefElement as S } from "@vueuse/core";
 //#region src/utils/resolve-target.ts
-function S(e) {
+function C(e) {
 	if (Array.isArray(e)) {
-		let t = e.map((e) => x(e)).filter((e) => e != null);
+		let t = e.map((e) => S(e)).filter((e) => e != null);
 		return t.length > 0 ? t : void 0;
 	}
-	return x(e);
+	return S(e);
 }
 //#endregion
 //#region src/composables/use-animate.ts
-function C(e, a = {}) {
-	let l = i(), { stop: u } = s([() => S(e), () => o(a)], ([e, t]) => {
+function w(e, a = {}) {
+	let l = i(), { stop: u } = s([() => C(e), () => o(a)], ([e, t]) => {
 		d(e, t);
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && y
 	});
-	b(() => {
-		u(), x();
+	x(() => {
+		u(), b();
 	});
 	function d(e, t) {
-		if (C(), !e) {
+		if (S(), !e) {
 			console.warn("Target element is null or undefined"), l.value = void 0;
 			return;
 		}
@@ -46,13 +46,13 @@ function C(e, a = {}) {
 	function _() {
 		return l.value?.resume();
 	}
-	function y() {
+	function v() {
 		return l.value?.complete();
 	}
-	function x() {
+	function b() {
 		return l.value?.cancel();
 	}
-	function C() {
+	function S() {
 		return l.value?.revert();
 	}
 	function w(e) {
@@ -75,9 +75,9 @@ function C(e, a = {}) {
 		restart: h,
 		alternate: g,
 		resume: _,
-		complete: y,
-		cancel: x,
-		revert: C,
+		complete: v,
+		cancel: b,
+		revert: S,
 		reset: w,
 		seek: T,
 		stretch: E,
@@ -86,24 +86,24 @@ function C(e, a = {}) {
 }
 //#endregion
 //#region src/composables/use-raw-animate.ts
-function w(e, t = {}) {
-	let n = S(e);
+function T(e, t = {}) {
+	let n = C(e);
 	return n || console.warn("Target is undefined"), c(n, o(t));
 }
 //#endregion
 //#region src/composables/use-timer.ts
-function T(e = {}) {
+function E(e = {}) {
 	let t = i(), a;
 	function c(e) {
 		e !== a && (a = e, S(), t.value = n(m(e)));
 	}
-	y(() => {
+	b(() => {
 		c(o(e));
 	});
 	let { stop: l } = s(() => o(e), (e) => {
-		v && c(e);
+		y && c(e);
 	}, { deep: 1 });
-	b(() => {
+	x(() => {
 		l(), S();
 	});
 	function u() {
@@ -127,7 +127,7 @@ function T(e = {}) {
 	function _() {
 		return t.value?.complete();
 	}
-	function x(e) {
+	function v(e) {
 		return t.value?.reset(e);
 	}
 	function S() {
@@ -151,7 +151,7 @@ function T(e = {}) {
 		alternate: h,
 		resume: g,
 		complete: _,
-		reset: x,
+		reset: v,
 		cancel: S,
 		revert: C,
 		seek: w,
@@ -160,23 +160,23 @@ function T(e = {}) {
 }
 //#endregion
 //#region src/composables/use-timeline.ts
-function E(e = {}) {
+function D(e = {}) {
 	let t = !1, c, l = [], u = i();
 	function d() {
-		for (let e of l) e.type === "add" ? u.value?.add(S(e.targets), a(e.params), e.position) : e.type === "set" ? u.value?.set(S(e.targets), a(e.params), e.position) : u.value?.call(e.callback, e.position);
+		for (let e of l) e.type === "add" ? u.value?.add(C(e.targets), a(e.params), e.position) : e.type === "set" ? u.value?.set(C(e.targets), a(e.params), e.position) : u.value?.call(e.callback, e.position);
 	}
 	function f(e) {
 		e !== c && (c = e, F(), u.value = n(p(e)), d());
 	}
 	let { stop: m } = s(() => o(e), (e) => {
-		v && f(e);
+		y && f(e);
 	}, {
 		flush: "post",
 		deep: 1
 	});
-	y(() => {
+	b(() => {
 		f(o(e)), t = !0;
-	}), b(() => {
+	}), x(() => {
 		m(), P();
 	});
 	function h(e, n, r) {
@@ -186,7 +186,7 @@ function E(e = {}) {
 			params: n,
 			position: r
 		}), t ? {
-			...u.value?.add(S(e), a(n), r),
+			...u.value?.add(C(e), a(n), r),
 			add: h,
 			set: g,
 			remove: _
@@ -204,7 +204,7 @@ function E(e = {}) {
 			params: n,
 			position: r
 		}), t ? {
-			...u.value?.set(S(e), a(n), r),
+			...u.value?.set(C(e), a(n), r),
 			add: h,
 			set: g,
 			remove: _
@@ -217,7 +217,7 @@ function E(e = {}) {
 	}
 	function _(e, n) {
 		return t ? {
-			...u.value?.remove(S(e), n),
+			...u.value?.remove(C(e), n),
 			add: h,
 			set: g,
 			remove: _
@@ -228,10 +228,10 @@ function E(e = {}) {
 			remove: _
 		});
 	}
-	function x(e, t) {
+	function v(e, t) {
 		return u.value?.sync(e, t);
 	}
-	function C(e, t) {
+	function S(e, t) {
 		return u.value?.label(e, t);
 	}
 	function w(e, t) {
@@ -287,8 +287,8 @@ function E(e = {}) {
 		timeline: r(u),
 		add: h,
 		set: g,
-		sync: x,
-		label: C,
+		sync: v,
+		label: S,
 		remove: _,
 		call: w,
 		init: T,
@@ -309,9 +309,9 @@ function E(e = {}) {
 }
 //#endregion
 //#region src/composables/use-animatable.ts
-function D(a, c = {}) {
+function O(a, c = {}) {
 	let u = i(), d = e(() => ({
-		el: S(a),
+		el: C(a),
 		opt: o(c)
 	})), { stop: f } = s(d, ({ el: e, opt: t }) => {
 		if (p(), !e) {
@@ -321,9 +321,9 @@ function D(a, c = {}) {
 		u.value = n(l(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(a) && v
+		immediate: !t(a) && y
 	});
-	b(() => {
+	x(() => {
 		f(), p();
 	});
 	function p() {
@@ -336,25 +336,25 @@ function D(a, c = {}) {
 }
 //#endregion
 //#region src/composables/use-raw-animatable.ts
-function O(e, t = {}) {
-	let n = S(e);
+function k(e, t = {}) {
+	let n = C(e);
 	return n || console.warn("Targets element is null or undefined"), l(n, o(t));
 }
 //#endregion
 //#region src/composables/use-draggable.ts
-function k(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
-		if (x(), !e) {
+function A(e, a = {}) {
+	let c = i(), { stop: l } = s([() => C(e), () => o(a)], ([e, t]) => {
+		if (b(), !e) {
 			console.warn("Targets element is null or undefined"), c.value = void 0;
 			return;
 		}
 		c.value = n(u(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && y
 	});
-	b(() => {
-		x(), l();
+	x(() => {
+		b(), l();
 	});
 	function d() {
 		return c.value?.disable();
@@ -377,13 +377,13 @@ function k(e, a = {}) {
 	function _() {
 		return c.value?.stop();
 	}
-	function y() {
+	function v() {
 		return c.value?.reset();
 	}
-	function x() {
+	function b() {
 		return c.value?.revert();
 	}
-	function C() {
+	function S() {
 		return c.value?.refresh();
 	}
 	return {
@@ -395,15 +395,15 @@ function k(e, a = {}) {
 		animateInView: h,
 		scrollInView: g,
 		stop: _,
-		reset: y,
-		revert: x,
-		refresh: C
+		reset: v,
+		revert: b,
+		refresh: S
 	};
 }
 //#endregion
 //#region src/composables/use-layout.ts
-function A(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
+function j(e, a = {}) {
+	let c = i(), { stop: l } = s([() => C(e), () => o(a)], ([e, t]) => {
 		if (m(), !e) {
 			console.warn("Target element is null or undefined"), c.value = void 0;
 			return;
@@ -411,9 +411,9 @@ function A(e, a = {}) {
 		c.value = n(d(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && y
 	});
-	b(() => {
+	x(() => {
 		m(), l();
 	});
 	function u() {
@@ -437,17 +437,56 @@ function A(e, a = {}) {
 	};
 }
 //#endregion
+//#region src/composables/use-scroll.ts
+function M(t, r, i = {}) {
+	let a, s = e(() => {
+		if (a?.revert(), a = void 0, !y) return;
+		let e = C(t), s = C(r);
+		if (e && s) return a = n(h({
+			...o(i),
+			container: e,
+			target: s
+		})), a;
+	}), c = e(() => s.value ?? !1), l = e(() => ({ autoplay: c.value }));
+	x(() => a?.revert());
+	function u() {
+		return s.value?.refresh();
+	}
+	function d() {
+		return s.value?.revert();
+	}
+	function f() {
+		s.value?.debug();
+	}
+	function p() {
+		return s.value?.removeDebug();
+	}
+	function m(e) {
+		return s.value?.link(e);
+	}
+	return {
+		observer: s,
+		autoplay: c,
+		autoplayComputed: l,
+		refresh: u,
+		revert: d,
+		debug: f,
+		removeDebug: p,
+		link: m
+	};
+}
+//#endregion
 //#region src/composables/use-svg.ts
-function j() {
+function N() {
 	function e(e, t) {
 		return (n, r, i, a) => {
 			let s = o(e);
-			return s ? g.morphTo(s, o(t))(n, r, i, a) : "";
+			return s ? _.morphTo(s, o(t))(n, r, i, a) : "";
 		};
 	}
 	function t(e, t) {
 		let n = o(e) ?? "";
-		return g.createMotionPath(n, o(t));
+		return _.createMotionPath(n, o(t));
 	}
 	return {
 		morphTo: e,
@@ -456,37 +495,37 @@ function j() {
 }
 //#endregion
 //#region src/composables/use-svg-drawable.ts
-function M(e, a = 0, c = 0) {
-	let l = i(), { stop: u } = s(() => S(e), (e) => {
+function P(e, a = 0, c = 0) {
+	let l = i(), { stop: u } = s(() => C(e), (e) => {
 		if (l.value = void 0, !e) {
 			console.warn("[useSvgDrawable] Target element is null or undefined");
 			return;
 		}
-		l.value = n(g.createDrawable(e, o(a), o(c))[0]);
+		l.value = n(_.createDrawable(e, o(a), o(c))[0]);
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && y
 	});
-	return b(() => {
+	return x(() => {
 		u(), l.value = void 0;
 	}), { drawable: r(l) };
 }
 //#endregion
 //#region src/composables/use-text.ts
-function N(a, c) {
-	let l = i(), u = e(() => l.value?.lines ?? []), d = e(() => l.value?.words ?? []), f = e(() => l.value?.chars ?? []), { stop: p } = s([() => S(a), () => o(c)], ([e, t]) => {
-		m(), l.value = void 0, e && (l.value = n(h(e, t)));
+function F(a, c) {
+	let l = i(), u = e(() => l.value?.lines ?? []), d = e(() => l.value?.words ?? []), f = e(() => l.value?.chars ?? []), { stop: p } = s([() => C(a), () => o(c)], ([e, t]) => {
+		m(), l.value = void 0, e && (l.value = n(g(e, t)));
 	}, {
 		flush: "post",
-		immediate: !t(a) && v
+		immediate: !t(a) && y
 	});
-	b(() => {
+	x(() => {
 		p(), l.value = void 0, m();
 	});
 	function m() {
 		l.value?.revert();
 	}
-	function g() {
+	function h() {
 		l.value?.refresh();
 	}
 	return {
@@ -495,19 +534,19 @@ function N(a, c) {
 		words: d,
 		chars: f,
 		revert: m,
-		refresh: g
+		refresh: h
 	};
 }
 //#endregion
 //#region src/composables/use-waapi.ts
-function P(e, a = {}) {
-	let c = i(), { stop: l } = s([() => S(e), () => o(a)], ([e, t]) => {
-		c.value = n(_.animate(e, t));
+function I(e, a = {}) {
+	let c = i(), { stop: l } = s([() => C(e), () => o(a)], ([e, t]) => {
+		c.value = n(v.animate(e, t));
 	}, {
 		flush: "post",
-		immediate: !t(e) && v
+		immediate: !t(e) && y
 	});
-	b(() => {
+	x(() => {
 		l();
 	});
 	function u() {
@@ -531,13 +570,13 @@ function P(e, a = {}) {
 	function g() {
 		return c.value?.restart();
 	}
-	function y() {
+	function _() {
 		return c.value?.commitStyles();
 	}
-	function x() {
+	function b() {
 		return c.value?.complete();
 	}
-	function C() {
+	function S() {
 		return c.value?.cancel();
 	}
 	function w() {
@@ -552,21 +591,21 @@ function P(e, a = {}) {
 		reverse: m,
 		seek: h,
 		restart: g,
-		commitStyles: y,
-		complete: x,
-		cancel: C,
+		commitStyles: _,
+		complete: b,
+		cancel: S,
 		revert: w,
-		convertEase: F
+		convertEase: L
 	};
 }
-function F(e, t = 100) {
-	return _.convertEase(o(e), o(t));
+function L(e, t = 100) {
+	return v.convertEase(o(e), o(t));
 }
 //#endregion
 //#region src/composables/use-scope.ts
-function I(e) {
+function R(e) {
 	let a = i(void 0), c = [], l = [], u = [], d = !1, p;
-	y(() => {
+	b(() => {
 		d = !0, a.value = n(f(o(e)));
 		for (let e of c) a.value.add(e);
 		for (let [e, t] of l) a.value.add(e, t);
@@ -574,7 +613,7 @@ function I(e) {
 		c.length = 0, l.length = 0, u.length = 0, t(e) && (p = s(e, (e) => {
 			a.value?.revert(), a.value = n(f(e));
 		}, { flush: "post" }));
-	}), b(() => {
+	}), x(() => {
 		a.value?.revert(), p?.();
 	});
 	function m(e) {
@@ -592,7 +631,7 @@ function I(e) {
 	function v() {
 		return a.value?.revert();
 	}
-	function x() {
+	function y() {
 		return a.value?.refresh();
 	}
 	return {
@@ -602,83 +641,83 @@ function I(e) {
 		addOnce: g,
 		keepTime: _,
 		revert: v,
-		refresh: x
+		refresh: y
 	};
 }
 //#endregion
 //#region src/directives/v-animate.ts
-var L = /* @__PURE__ */ new WeakMap(), R = {
+var z = /* @__PURE__ */ new WeakMap(), B = {
 	mounted(e, t) {
-		t.value && L.set(e, c(e, t.value));
+		t.value && z.set(e, c(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = L.get(e);
-		n?.cancel(), n?.revert(), t.value && L.set(e, c(e, t.value));
+		let n = z.get(e);
+		n?.cancel(), n?.revert(), t.value && z.set(e, c(e, t.value));
 	},
 	unmounted(e) {
-		let t = L.get(e);
-		t?.cancel(), t?.revert(), L.delete(e);
+		let t = z.get(e);
+		t?.cancel(), t?.revert(), z.delete(e);
 	}
-}, z = /* @__PURE__ */ new WeakMap(), B = {
+}, V = /* @__PURE__ */ new WeakMap(), H = {
 	mounted(e, t) {
-		z.set(e, u(e, t.value ?? {}));
+		V.set(e, u(e, t.value ?? {}));
 	},
 	updated(e, t) {
-		t.value !== t.oldValue && (z.get(e)?.revert(), z.set(e, u(e, t.value ?? {})));
+		t.value !== t.oldValue && (V.get(e)?.revert(), V.set(e, u(e, t.value ?? {})));
 	},
 	unmounted(e) {
-		z.get(e)?.revert(), z.delete(e);
+		V.get(e)?.revert(), V.delete(e);
 	}
-}, V = /* @__PURE__ */ new WeakMap();
-function H(e, t) {
-	let n = g.createDrawable(e)[0];
+}, U = /* @__PURE__ */ new WeakMap();
+function W(e, t) {
+	let n = _.createDrawable(e)[0];
 	return {
 		drawable: n,
 		animation: t ? c(n, t) : void 0
 	};
 }
-var U = {
+var G = {
 	mounted(e, t) {
-		V.set(e, H(e, t.value));
+		U.set(e, W(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = V.get(e);
-		n?.animation?.cancel(), n?.animation?.revert(), V.set(e, H(e, t.value));
+		let n = U.get(e);
+		n?.animation?.cancel(), n?.animation?.revert(), U.set(e, W(e, t.value));
 	},
 	unmounted(e) {
-		let t = V.get(e);
-		t?.animation?.cancel(), t?.animation?.revert(), V.delete(e);
+		let t = U.get(e);
+		t?.animation?.cancel(), t?.animation?.revert(), U.delete(e);
 	}
-}, W = /* @__PURE__ */ new WeakMap(), G = {
+}, K = /* @__PURE__ */ new WeakMap(), q = {
 	mounted(e, t) {
-		t.value && W.set(e, {
-			animation: _.animate(e, t.value),
+		t.value && K.set(e, {
+			animation: v.animate(e, t.value),
 			originalStyle: e.style.cssText
 		});
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = W.get(e);
-		n && (n.animation.cancel(), e.style.cssText = n.originalStyle, W.delete(e)), t.value && W.set(e, {
-			animation: _.animate(e, t.value),
+		let n = K.get(e);
+		n && (n.animation.cancel(), e.style.cssText = n.originalStyle, K.delete(e)), t.value && K.set(e, {
+			animation: v.animate(e, t.value),
 			originalStyle: e.style.cssText
 		});
 	},
 	unmounted(e) {
-		let t = W.get(e);
-		t && (t.animation.cancel(), e.style.cssText = t.originalStyle, W.delete(e));
+		let t = K.get(e);
+		t && (t.animation.cancel(), e.style.cssText = t.originalStyle, K.delete(e));
 	}
-}, K = /* @__PURE__ */ new WeakMap();
-function q(e, t) {
-	let { animation: n, ...r } = t ?? {}, i = h(e, r), a = {
+}, J = /* @__PURE__ */ new WeakMap();
+function Y(e, t) {
+	let { animation: n, ...r } = t ?? {}, i = g(e, r), a = {
 		splitter: i,
 		animation: void 0
 	};
 	if (n) {
 		if (r.lines) (document.fonts?.ready ?? Promise.resolve()).then(() => {
-			K.get(e) === a && (a.animation = c(i.lines, n));
+			J.get(e) === a && (a.animation = c(i.lines, n));
 		});
 		else {
 			let e = r.chars ? i.chars : i.words;
@@ -687,24 +726,24 @@ function q(e, t) {
 	}
 	return a;
 }
-function J(e) {
+function X(e) {
 	e.animation?.cancel(), e.splitter.revert();
 }
-var Y = {
+var Z = {
 	mounted(e, t) {
-		K.set(e, q(e, t.value));
+		J.set(e, Y(e, t.value));
 	},
 	updated(e, t) {
 		if (t.value === t.oldValue) return;
-		let n = K.get(e);
-		n && J(n), K.set(e, q(e, t.value));
+		let n = J.get(e);
+		n && X(n), J.set(e, Y(e, t.value));
 	},
 	unmounted(e) {
-		let t = K.get(e);
-		t && J(t), K.delete(e);
+		let t = J.get(e);
+		t && X(t), J.delete(e);
 	}
 };
 //#endregion
-export { D as useAnimatable, C as useAnimate, k as useDraggable, A as useLayout, O as useRawAnimatable, w as useRawAnimate, I as useScope, j as useSvg, M as useSvgDrawable, N as useText, E as useTimeline, T as useTimer, P as useWaapi, R as vAnimate, B as vDraggable, U as vSvgDrawable, Y as vTextSplit, G as vWaapi };
+export { O as useAnimatable, w as useAnimate, A as useDraggable, j as useLayout, k as useRawAnimatable, T as useRawAnimate, R as useScope, M as useScroll, N as useSvg, P as useSvgDrawable, F as useText, D as useTimeline, E as useTimer, I as useWaapi, B as vAnimate, H as vDraggable, G as vSvgDrawable, Z as vTextSplit, q as vWaapi };
 
 //# sourceMappingURL=index.js.map