@juleshry/vue-animejs 0.4.3 → 1.0.0

package/dist/index.js

@@ -1,100 +1,101 @@
-import { computed as e, isRef as t, readonly as n, shallowReadonly as r, shallowRef as i, unref as a, watch as o } from "vue";
-import { animate as s, createAnimatable as c, createDraggable as l, createLayout as u, createScope as d, createTimeline as f, createTimer as p, splitText as m, svg as h, waapi as g } from "animejs";
-import { tryOnMounted as _, tryOnUnmounted as v, unrefElement as y } from "@vueuse/core";
+import { computed as e, isRef as t, readonly 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 { tryOnMounted as v, tryOnUnmounted as y, unrefElement as b } from "@vueuse/core";
+//#region src/utils/resolve-target.ts
+function x(e) {
+	return b(e);
+}
+//#endregion
 //#region src/composables/use-animate.ts
-function b(e, r = {}) {
-	let c = i();
-	function l() {
-		return y(e) ?? a(e);
-	}
-	let { stop: u } = o([l, () => a(r)], ([e, t]) => {
-		d(e, t);
+function S(e, r = {}) {
+	let a = i(), { stop: l } = s([() => x(e), () => o(r)], ([e, t]) => {
+		u(e, t);
 	}, {
 		flush: "post",
 		immediate: !t(e)
 	});
-	v(() => {
-		u(), x();
+	y(() => {
+		l(), v();
 	});
-	function d(e, t) {
-		if (S(), !e) {
-			console.warn("Target element is null or undefined"), c.value = void 0;
+	function u(e, t) {
+		if (b(), !e) {
+			console.warn("Target element is null or undefined"), a.value = void 0;
 			return;
 		}
-		c.value = s(e, t);
+		a.value = c(e, t);
+	}
+	function d() {
+		return a.value?.play();
 	}
 	function f() {
-		return c.value?.play();
+		return a.value?.reverse();
 	}
 	function p() {
-		return c.value?.reverse();
+		return a.value?.pause();
 	}
 	function m() {
-		return c.value?.pause();
+		return a.value?.restart();
 	}
 	function h() {
-		return c.value?.restart();
+		return a.value?.alternate();
 	}
 	function g() {
-		return c.value?.alternate();
+		return a.value?.resume();
 	}
 	function _() {
-		return c.value?.resume();
-	}
-	function b() {
-		return c.value?.complete();
+		return a.value?.complete();
 	}
-	function x() {
-		return c.value?.cancel();
+	function v() {
+		return a.value?.cancel();
 	}
-	function S() {
-		return c.value?.revert();
+	function b() {
+		return a.value?.revert();
 	}
-	function C(e) {
-		return c.value?.reset(e);
+	function S(e) {
+		return a.value?.reset(e);
 	}
-	function w(e, t, n) {
-		return c.value?.seek(e, t, n);
+	function C(e, t, n) {
+		return a.value?.seek(e, t, n);
 	}
-	function T(e) {
-		return c.value?.stretch(e);
+	function w(e) {
+		return a.value?.stretch(e);
 	}
-	function E() {
-		return c.value?.refresh();
+	function T() {
+		return a.value?.refresh();
 	}
 	return {
-		animation: n(c),
-		play: f,
-		reverse: p,
-		pause: m,
-		restart: h,
-		alternate: g,
-		resume: _,
-		complete: b,
-		cancel: x,
-		revert: S,
-		reset: C,
-		seek: w,
-		stretch: T,
-		refresh: E
+		animation: n(a),
+		play: d,
+		reverse: f,
+		pause: p,
+		restart: m,
+		alternate: h,
+		resume: g,
+		complete: _,
+		cancel: v,
+		revert: b,
+		reset: S,
+		seek: C,
+		stretch: w,
+		refresh: T
 	};
 }
 //#endregion
 //#region src/composables/use-raw-animate.ts
-function x(e, t = {}) {
-	let n = a(e);
-	return n || console.warn("Target is undefined"), s(n, a(t));
+function C(e, t = {}) {
+	let n = x(e);
+	return n || console.warn("Target is undefined"), c(n, o(t));
 }
 //#endregion
 //#region src/composables/use-timer.ts
-function S(e = {}) {
-	let t = i(p(a(e))), { stop: r } = o(() => a(e), (e) => {
-		g(), t.value = p(e);
+function w(e = {}) {
+	let t = i(m(o(e))), { stop: r } = s(() => o(e), (e) => {
+		g(), t.value = m(e);
 	}, { deep: 1 });
-	v(() => {
+	y(() => {
 		r(), g();
 	});
-	function s() {
+	function a() {
 		return t.value.play();
 	}
 	function c() {
@@ -112,7 +113,7 @@ function S(e = {}) {
 	function f() {
 		return t.value.resume();
 	}
-	function m() {
+	function p() {
 		return t.value.complete();
 	}
 	function h(e) {
@@ -124,7 +125,7 @@ function S(e = {}) {
 	function _() {
 		return t.value.revert();
 	}
-	function y(e, n, r) {
+	function v(e, n, r) {
 		return t.value.seek(e, n, r);
 	}
 	function b(e) {
@@ -132,238 +133,238 @@ function S(e = {}) {
 	}
 	return {
 		timer: n(t),
-		play: s,
+		play: a,
 		reverse: c,
 		pause: l,
 		restart: u,
 		alternate: d,
 		resume: f,
-		complete: m,
+		complete: p,
 		reset: h,
 		cancel: g,
 		revert: _,
-		seek: y,
+		seek: v,
 		stretch: b
 	};
 }
 //#endregion
 //#region src/composables/use-timeline.ts
-function C(e = {}) {
-	let t = !1, r = [], s = i(f(a(e)));
-	function c() {
-		for (let e of r) e.type === "add" ? s.value.add(a(e.targets), e.params, e.position) : s.value.set(a(e.targets), e.params, e.position);
+function T(e = {}) {
+	let t = !1, r = [], c = i(p(o(e)));
+	function l() {
+		for (let e of r) e.type === "add" ? c.value.add(x(e.targets), a(e.params), e.position) : c.value.set(x(e.targets), a(e.params), e.position);
 	}
-	let { stop: l } = o(() => a(e), (e) => {
-		k(), s.value = f(e), c();
+	let { stop: u } = s(() => o(e), (e) => {
+		j(), c.value = p(e), l();
 	}, {
 		flush: "post",
 		deep: 1
 	});
-	_(() => {
-		t = !0, c();
-	}), v(() => {
-		l(), O();
+	v(() => {
+		t = !0, l();
+	}), y(() => {
+		u(), A();
 	});
-	function u(e, n, i) {
+	function d(e, n, i) {
 		return r.push({
 			type: "add",
 			targets: e,
 			params: n,
 			position: i
 		}), t ? {
-			...s.value.add(a(e), n, i),
-			add: u,
-			set: d,
-			remove: p
+			...c.value.add(x(e), a(n), i),
+			add: d,
+			set: f,
+			remove: m
 		} : {
-			...s.value,
-			add: u,
-			set: d,
-			remove: p
+			...c.value,
+			add: d,
+			set: f,
+			remove: m
 		};
 	}
-	function d(e, n, i) {
+	function f(e, n, i) {
 		return r.push({
 			type: "set",
 			targets: e,
 			params: n,
 			position: i
 		}), t ? {
-			...s.value.set(a(e), n, i),
-			add: u,
-			set: d,
-			remove: p
+			...c.value.set(x(e), a(n), i),
+			add: d,
+			set: f,
+			remove: m
 		} : {
-			...s.value,
-			add: u,
-			set: d,
-			remove: p
+			...c.value,
+			add: d,
+			set: f,
+			remove: m
 		};
 	}
-	function p(e, n) {
+	function m(e, n) {
 		return t ? {
-			...s.value.remove(a(e), n),
-			add: u,
-			set: d,
-			remove: p
+			...c.value.remove(x(e), n),
+			add: d,
+			set: f,
+			remove: m
 		} : (console.warn("Cannot remove from timeline before mount"), {
-			...s.value,
-			add: u,
-			set: d,
-			remove: p
+			...c.value,
+			add: d,
+			set: f,
+			remove: m
 		});
 	}
-	function m(e, t) {
-		return s.value.sync(e, t);
-	}
 	function h(e, t) {
-		return s.value.label(e, t);
+		return c.value.sync(e, t);
 	}
 	function g(e, t) {
-		return s.value.call(e, t);
+		return c.value.label(e, t);
 	}
-	function y(e) {
-		return s.value.init(e);
+	function _(e, t) {
+		return c.value.call(e, t);
 	}
-	function b() {
-		return s.value.play();
-	}
-	function x() {
-		return s.value.reverse();
+	function b(e) {
+		return c.value.init(e);
 	}
 	function S() {
-		return s.value.pause();
+		return c.value.play();
 	}
 	function C() {
-		return s.value.restart();
+		return c.value.reverse();
 	}
 	function w() {
-		return s.value.alternate();
+		return c.value.pause();
 	}
 	function T() {
-		return s.value.resume();
+		return c.value.restart();
 	}
 	function E() {
-		return s.value.complete();
+		return c.value.alternate();
 	}
-	function D(e) {
-		return s.value.reset(e);
+	function D() {
+		return c.value.resume();
 	}
 	function O() {
-		return s.value.cancel();
+		return c.value.complete();
+	}
+	function k(e) {
+		return c.value.reset(e);
 	}
-	function k() {
-		return s.value.revert();
+	function A() {
+		return c.value.cancel();
 	}
-	function A(e, t, n) {
-		return s.value.seek(e, t, n);
+	function j() {
+		return c.value.revert();
 	}
-	function j(e) {
-		return s.value.stretch(e);
+	function M(e, t, n) {
+		return c.value.seek(e, t, n);
 	}
-	function M() {
-		return s.value.refresh();
+	function N(e) {
+		return c.value.stretch(e);
+	}
+	function P() {
+		return c.value.refresh();
 	}
 	return {
-		timeline: n(s),
-		add: u,
-		set: d,
-		sync: m,
-		label: h,
-		remove: p,
-		call: g,
-		init: y,
-		play: b,
-		reverse: x,
-		pause: S,
-		restart: C,
-		alternate: w,
-		resume: T,
-		complete: E,
-		reset: D,
-		cancel: O,
-		revert: k,
-		seek: A,
-		stretch: j,
-		refresh: M
+		timeline: n(c),
+		add: d,
+		set: f,
+		sync: h,
+		label: g,
+		remove: m,
+		call: _,
+		init: b,
+		play: S,
+		reverse: C,
+		pause: w,
+		restart: T,
+		alternate: E,
+		resume: D,
+		complete: O,
+		reset: k,
+		cancel: A,
+		revert: j,
+		seek: M,
+		stretch: N,
+		refresh: P
 	};
 }
 //#endregion
 //#region src/composables/use-animatable.ts
-function w(r, s = {}) {
-	let l = i(), { stop: u } = o(e(() => ({
-		el: a(r),
-		opt: a(s)
+function E(r, a = {}) {
+	let c = i(), { stop: u } = s(e(() => ({
+		el: x(r),
+		opt: o(a)
 	})), ({ el: e, opt: t }) => {
 		if (d(), !e) {
-			console.warn("Targets element is null or undefined"), l.value = void 0;
+			console.warn("Targets element is null or undefined"), c.value = void 0;
 			return;
 		}
-		l.value = c(e, t);
+		c.value = l(e, t);
 	}, {
 		flush: "post",
 		immediate: !t(r)
 	});
-	v(() => {
+	y(() => {
 		u(), d();
 	});
 	function d() {
-		return l.value?.revert();
+		return c.value?.revert();
 	}
 	return {
-		animatable: n(l),
+		animatable: n(c),
 		revert: d
 	};
 }
 //#endregion
 //#region src/composables/use-draggable.ts
-function T(e, r = {}) {
-	let s = i(), { stop: c } = o([() => a(e), () => a(r)], ([e, t]) => {
-		if (y(), !e) {
-			console.warn("Targets element is null or undefined"), s.value = void 0;
+function D(e, r = {}) {
+	let a = i(), { stop: c } = s([() => x(e), () => o(r)], ([e, t]) => {
+		if (v(), !e) {
+			console.warn("Targets element is null or undefined"), a.value = void 0;
 			return;
 		}
-		s.value = l(e, t);
+		a.value = u(e, t);
 	}, {
 		flush: "post",
 		immediate: !t(e)
 	});
-	v(() => {
-		y(), c();
+	y(() => {
+		v(), c();
 	});
-	function u() {
-		return s.value?.disable();
+	function l() {
+		return a.value?.disable();
 	}
 	function d() {
-		return s.value?.enable();
+		return a.value?.enable();
 	}
 	function f(e, t) {
-		return s.value?.setX(e, t);
+		return a.value?.setX(e, t);
 	}
 	function p(e, t) {
-		return s.value?.setY(e, t);
+		return a.value?.setY(e, t);
 	}
 	function m(e, t, n) {
-		return s.value?.animateInView(e, t, n);
+		return a.value?.animateInView(e, t, n);
 	}
 	function h(e, t, n) {
-		return s.value?.scrollInView(e, t, n);
+		return a.value?.scrollInView(e, t, n);
 	}
 	function g() {
-		return s.value?.stop();
+		return a.value?.stop();
 	}
 	function _() {
-		return s.value?.reset();
+		return a.value?.reset();
 	}
-	function y() {
-		return s.value?.revert();
+	function v() {
+		return a.value?.revert();
 	}
 	function b() {
-		return s.value?.refresh();
+		return a.value?.refresh();
 	}
 	return {
-		draggable: n(s),
-		disable: u,
+		draggable: n(a),
+		disable: l,
 		enable: d,
 		setX: f,
 		setY: p,
@@ -371,84 +372,95 @@ function T(e, r = {}) {
 		scrollInView: h,
 		stop: g,
 		reset: _,
-		revert: y,
+		revert: v,
 		refresh: b
 	};
 }
 //#endregion
 //#region src/composables/use-layout.ts
-function E(e, r) {
-	let s = i(), { stop: c } = o([() => y(e) ?? a(e), () => a(r)], ([e, t]) => {
+function O(e, r = {}) {
+	let a = i(), { stop: c } = s([() => x(e), () => o(r)], ([e, t]) => {
 		if (p(), !e) {
-			console.warn("Target element is null or undefined"), s.value = void 0;
+			console.warn("Target element is null or undefined"), a.value = void 0;
 			return;
 		}
-		s.value = u(e, t);
+		a.value = d(e, t);
 	}, {
 		flush: "post",
 		immediate: !t(e)
 	});
-	v(() => {
+	y(() => {
 		p(), c();
 	});
 	function l() {
-		return s.value?.record();
+		return a.value?.record();
 	}
-	function d(e) {
-		return s.value?.animate(e);
+	function u(e) {
+		return a.value?.animate(e);
 	}
 	function f(e, t) {
-		return s.value?.update(e, t);
+		return a.value?.update(e, t);
 	}
 	function p() {
-		return s.value?.revert();
+		return a.value?.revert();
 	}
 	return {
-		layout: n(s),
+		layout: n(a),
 		record: l,
-		animate: d,
+		animate: u,
 		update: f,
 		revert: p
 	};
 }
 //#endregion
 //#region src/composables/use-svg.ts
-function D() {
+function k() {
 	function e(e, t) {
-		return h.morphTo(a(e), a(t));
-	}
-	function t(e, t, n) {
-		return h.createDrawable(a(e), a(t), a(n));
+		let n = o(e);
+		return n ? g.morphTo(o(n), o(t)) : () => "";
 	}
-	function n(e, t) {
-		return h.createMotionPath(a(e), a(t));
+	function t(e, t) {
+		let n = o(e) ?? "";
+		return g.createMotionPath(n, o(t));
 	}
 	return {
 		morphTo: e,
-		createDrawable: t,
-		createMotionPath: n
+		createMotionPath: t
 	};
 }
 //#endregion
+//#region src/composables/use-svg-drawable.ts
+function A(e, r = 0, a = 0) {
+	let c = i(), { stop: l } = s(() => x(e), (e) => {
+		if (c.value = void 0, !e) {
+			console.warn("[useSvgDrawable] Target element is null or undefined");
+			return;
+		}
+		c.value = g.createDrawable(e, o(r), o(a))[0];
+	}, {
+		flush: "post",
+		immediate: !t(e)
+	});
+	return y(() => {
+		l(), c.value = void 0;
+	}), { drawable: n(c) };
+}
+//#endregion
 //#region src/composables/use-text.ts
-function O(r, s) {
-	let c = i(), l = e(() => c.value?.lines ?? []), u = e(() => c.value?.words ?? []), d = e(() => c.value?.chars ?? []);
-	function f() {
-		return y(r) ?? a(r);
-	}
-	let { stop: p } = o([f, () => a(s)], ([e, t]) => {
-		h(), c.value = void 0, e && (c.value = m(e, t));
+function j(r, a) {
+	let c = i(), l = e(() => c.value?.lines ?? []), u = e(() => c.value?.words ?? []), d = e(() => c.value?.chars ?? []), { stop: f } = s([() => x(r), () => o(a)], ([e, t]) => {
+		p(), c.value = void 0, e && (c.value = h(e, t));
 	}, {
 		flush: "post",
 		immediate: !t(r)
 	});
-	v(() => {
-		p(), c.value = void 0, h();
+	y(() => {
+		f(), c.value = void 0, p();
 	});
-	function h() {
+	function p() {
 		c.value?.revert();
 	}
-	function g() {
+	function m() {
 		c.value?.refresh();
 	}
 	return {
@@ -456,57 +468,57 @@ function O(r, s) {
 		lines: l,
 		words: u,
 		chars: d,
-		revert: h,
-		refresh: g
+		revert: p,
+		refresh: m
 	};
 }
 //#endregion
 //#region src/composables/use-waapi.ts
-function k(e, r = {}) {
-	let s = i(), { stop: c } = o([() => y(e) ?? a(e), () => a(r)], ([e, t]) => {
-		s.value = g.animate(e, t);
+function M(e, r = {}) {
+	let a = i(), { stop: c } = s([() => x(e), () => o(r)], ([e, t]) => {
+		a.value = _.animate(e, t);
 	}, {
 		flush: "post",
 		immediate: !t(e)
 	});
-	v(() => {
+	y(() => {
 		c();
 	});
 	function l() {
-		return s.value?.resume();
+		return a.value?.resume();
 	}
 	function u() {
-		return s.value?.pause();
+		return a.value?.pause();
 	}
 	function d() {
-		return s.value?.alternate();
+		return a.value?.alternate();
 	}
 	function f() {
-		return s.value?.play();
+		return a.value?.play();
 	}
 	function p() {
-		return s.value?.reverse();
+		return a.value?.reverse();
 	}
 	function m(e, t) {
-		return s.value?.seek(a(e), a(t));
+		return a.value?.seek(o(e), o(t));
 	}
 	function h() {
-		return s.value?.restart();
+		return a.value?.restart();
 	}
-	function _() {
-		return s.value?.commitStyles();
+	function g() {
+		return a.value?.commitStyles();
 	}
-	function b() {
-		return s.value?.complete();
+	function v() {
+		return a.value?.complete();
 	}
-	function x() {
-		return s.value?.cancel();
+	function b() {
+		return a.value?.cancel();
 	}
 	function S() {
-		return s.value?.revert();
+		return a.value?.revert();
 	}
 	return {
-		animation: n(s),
+		animation: n(a),
 		resume: l,
 		pause: u,
 		alternate: d,
@@ -514,33 +526,33 @@ function k(e, r = {}) {
 		reverse: p,
 		seek: m,
 		restart: h,
-		commitStyles: _,
-		complete: b,
-		cancel: x,
+		commitStyles: g,
+		complete: v,
+		cancel: b,
 		revert: S,
-		convertEase: A
+		convertEase: N
 	};
 }
-function A(e, t = 100) {
-	return g.convertEase(a(e), a(t));
+function N(e, t = 100) {
+	return _.convertEase(o(e), o(t));
 }
 //#endregion
 //#region src/composables/use-scope.ts
-function j(e) {
-	let n = i(d(a(e))), s = [], c = [], l = [], u = !1, f = t(e) ? o(e, (e) => {
-		n.value.revert(), n.value = d(e);
+function P(e) {
+	let n = i(f(o(e))), a = [], c = [], l = [], u = !1, d = t(e) ? s(e, (e) => {
+		n.value.revert(), n.value = f(e);
 	}, { flush: "post" }) : void 0;
-	_(() => {
+	v(() => {
 		u = !0;
-		for (let e of s) n.value.add(e);
+		for (let e of a) n.value.add(e);
 		for (let [e, t] of c) n.value.add(e, t);
 		for (let e of l) n.value.addOnce(e);
-		s.length = 0, c.length = 0, l.length = 0;
-	}), v(() => {
-		n.value.revert(), f?.();
+		a.length = 0, c.length = 0, l.length = 0;
+	}), y(() => {
+		n.value.revert(), d?.();
 	});
 	function p(e) {
-		return u ? n.value.add(e) : void s.push(e);
+		return u ? n.value.add(e) : void a.push(e);
 	}
 	function m(e, t) {
 		return u ? n.value.add(e, t) : void c.push([e, t]);
@@ -551,7 +563,7 @@ function j(e) {
 	function g(e) {
 		return n.value.keepTime(e);
 	}
-	function y() {
+	function _() {
 		return n.value.revert();
 	}
 	function b() {
@@ -563,11 +575,11 @@ function j(e) {
 		registerMethod: m,
 		addOnce: h,
 		keepTime: g,
-		revert: y,
+		revert: _,
 		refresh: b
 	};
 }
 //#endregion
-export { w as useAnimatable, b as useAnimate, T as useDraggable, E as useLayout, x as useRawAnimate, j as useScope, D as useSvg, O as useText, C as useTimeline, S as useTimer, k as useWaapi };
+export { E as useAnimatable, S as useAnimate, D as useDraggable, O as useLayout, C as useRawAnimate, P as useScope, k as useSvg, A as useSvgDrawable, j as useText, T as useTimeline, w as useTimer, M as useWaapi };
 
 //# sourceMappingURL=index.js.map