@juleshry/vue-animejs 1.1.0 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -4
- package/dist/composables/use-animatable.d.ts +12 -6
- package/dist/composables/use-animatable.d.ts.map +1 -1
- package/dist/composables/use-animate.d.ts +3 -3
- package/dist/composables/use-animate.d.ts.map +1 -1
- package/dist/composables/use-draggable.d.ts +2 -2
- package/dist/composables/use-draggable.d.ts.map +1 -1
- package/dist/composables/use-layout.d.ts +2 -2
- package/dist/composables/use-layout.d.ts.map +1 -1
- package/dist/composables/use-raw-animatable.d.ts +17 -0
- package/dist/composables/use-raw-animatable.d.ts.map +1 -0
- package/dist/composables/use-raw-animate.d.ts +3 -0
- package/dist/composables/use-raw-animate.d.ts.map +1 -1
- package/dist/composables/use-scope.d.ts.map +1 -1
- package/dist/composables/use-svg-drawable.d.ts +2 -2
- package/dist/composables/use-svg-drawable.d.ts.map +1 -1
- package/dist/composables/use-svg.d.ts.map +1 -1
- package/dist/composables/use-text.d.ts +2 -2
- package/dist/composables/use-text.d.ts.map +1 -1
- package/dist/composables/use-timeline.d.ts +20 -20
- package/dist/composables/use-timeline.d.ts.map +1 -1
- package/dist/composables/use-timer.d.ts +15 -15
- package/dist/composables/use-timer.d.ts.map +1 -1
- package/dist/composables/use-waapi.d.ts +2 -2
- package/dist/composables/use-waapi.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +404 -381
- package/dist/index.js.map +1 -1
- package/dist/utils/resolve-target.d.ts +12 -3
- package/dist/utils/resolve-target.d.ts.map +1 -1
- package/package.json +19 -18
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
|
|
16
16
|
## 🚀 Overview
|
|
17
17
|
|
|
18
|
-
**vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you.
|
|
18
|
+
**vue-animejs** wraps Anime.js v4 as idiomatic Vue 3 composables. It integrates with Vue's reactivity system — pass a `ref` as a target or option and the animation updates automatically. Lifecycle cleanup is handled for you, and every composable is safe to call during SSR (Nuxt, `@vue/server-renderer`) — Anime.js instances are only created once mounted in a browser.
|
|
19
19
|
|
|
20
20
|
**Before** — raw Anime.js in a Vue component:
|
|
21
21
|
|
|
@@ -88,9 +88,13 @@ useAnimate(el, { translateX: 250, duration: 800 })
|
|
|
88
88
|
|
|
89
89
|
**Directives** — declarative alternatives for element-bound animations:
|
|
90
90
|
|
|
91
|
-
| Directive
|
|
92
|
-
|
|
93
|
-
| `v-animate`
|
|
91
|
+
| Directive | Description |
|
|
92
|
+
|------------------|--------------------------------------------------|
|
|
93
|
+
| `v-animate` | Animate an element declaratively via template attribute |
|
|
94
|
+
| `v-draggable` | Make an element draggable declaratively |
|
|
95
|
+
| `v-svg-drawable` | Animate SVG stroke drawing declaratively via the `draw` property |
|
|
96
|
+
| `v-waapi` | Animate via WAAPI declaratively |
|
|
97
|
+
| `v-text-split` | Split text into animatable lines, words, and chars declaratively |
|
|
94
98
|
|
|
95
99
|
## 🚀 Usage
|
|
96
100
|
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import { type
|
|
2
|
-
import { type
|
|
1
|
+
import { type Animatable, type AnimatableParams, type AnimatableProperty, type AnimatablePropertyParamsOptions } from "animejs";
|
|
2
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
3
3
|
import { type AnimationTargets } from "@src/utils/resolve-target.ts";
|
|
4
|
-
|
|
4
|
+
/** The keys of `T` that represent animatable properties, excluding Anime.js's reserved config keys (`ease`, `duration`, `unit`, `modifier`, `composition`). */
|
|
5
|
+
export type AnimatablePropertyKeys<T extends AnimatableParams> = Exclude<keyof T, keyof AnimatablePropertyParamsOptions>;
|
|
6
|
+
/** An `AnimatableObject` narrowed to only the property setters/getters implied by `T`. */
|
|
7
|
+
export type TypedAnimatableObject<T extends AnimatableParams> = Animatable & {
|
|
8
|
+
[K in AnimatablePropertyKeys<T>]: AnimatableProperty;
|
|
9
|
+
};
|
|
10
|
+
export interface UseAnimatableReturn<T extends AnimatableParams = AnimatableParams> {
|
|
5
11
|
/** The underlying Anime.js animatable instance. `undefined` until the target is available. */
|
|
6
|
-
animatable:
|
|
12
|
+
animatable: Readonly<ShallowRef<TypedAnimatableObject<T> | undefined>>;
|
|
7
13
|
/** Cancels the animatable and restores all animated properties to their original values. */
|
|
8
|
-
revert: () =>
|
|
14
|
+
revert: () => TypedAnimatableObject<T> | undefined;
|
|
9
15
|
}
|
|
10
16
|
/**
|
|
11
17
|
* Wraps Anime.js `createAnimatable()` into a Vue composable. Reactively re-creates the animatable when the target or options change, and reverts it automatically on unmount.
|
|
@@ -13,5 +19,5 @@ export interface UseAnimatableReturn {
|
|
|
13
19
|
* @param targets - The element(s) to make animatable. Accepts a template ref, a CSS selector, a DOM element, or a reactive ref to any of these.
|
|
14
20
|
* @param options - Anime.js animatable parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
|
|
15
21
|
*/
|
|
16
|
-
export declare function useAnimatable(targets: AnimationTargets, options?: MaybeRef<
|
|
22
|
+
export declare function useAnimatable<T extends AnimatableParams = AnimatableParams>(targets: AnimationTargets, options?: MaybeRef<T>): UseAnimatableReturn<T>;
|
|
17
23
|
//# sourceMappingURL=use-animatable.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-animatable.d.ts","sourceRoot":"","sources":["../../src/composables/use-animatable.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-animatable.d.ts","sourceRoot":"","sources":["../../src/composables/use-animatable.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,+BAA+B,EAGrC,MAAM,SAAS,CAAA;AAChB,OAAO,EAIL,KAAK,QAAQ,EAEb,KAAK,UAAU,EAIhB,MAAM,KAAK,CAAA;AAEZ,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,+JAA+J;AAC/J,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,+BAA+B,CAAC,CAAA;AAExH,0FAA0F;AAC1F,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,gBAAgB,IAAI,UAAU,GAAG;KAC1E,CAAC,IAAI,sBAAsB,CAAC,CAAC,CAAC,GAAG,kBAAkB;CACrD,CAAA;AAED,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB;IAChF,8FAA8F;IAC9F,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAA;IACtE,4FAA4F;IAC5F,MAAM,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;CACnD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,EACzE,OAAO,EAAE,gBAAgB,EACzB,OAAO,GAAE,QAAQ,CAAC,CAAC,CAAW,GAC7B,mBAAmB,CAAC,CAAC,CAAC,CAkCxB"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
2
2
|
import { type JSAnimation, type AnimationParams } from "animejs";
|
|
3
3
|
import { type AnimationTargets } from "@src/utils/resolve-target.ts";
|
|
4
4
|
export interface UseAnimateReturn {
|
|
5
5
|
/** The underlying Anime.js animation instance. `undefined` until the target is available. */
|
|
6
|
-
animation:
|
|
6
|
+
animation: Readonly<ShallowRef<JSAnimation | undefined>>;
|
|
7
7
|
/** Starts or resumes the animation. */
|
|
8
8
|
play: () => JSAnimation | undefined;
|
|
9
9
|
/** Reverses playback direction. */
|
|
@@ -34,7 +34,7 @@ export interface UseAnimateReturn {
|
|
|
34
34
|
/**
|
|
35
35
|
* Wraps Anime.js `animate()` into a Vue composable. Reactively re-creates the animation when the target or options change, and cancels it automatically on unmount.
|
|
36
36
|
*
|
|
37
|
-
* @param _target - The element(s) to animate. Accepts a template ref, a CSS selector, a DOM element,
|
|
37
|
+
* @param _target - The element(s) to animate. Accepts a template ref, a CSS selector, a DOM element, a reactive ref to any of these, or an array of them.
|
|
38
38
|
* @param _options - Anime.js animation parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
|
|
39
39
|
*/
|
|
40
40
|
export declare function useAnimate(_target: AnimationTargets, _options?: MaybeRef<AnimationParams>): UseAnimateReturn;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-animate.d.ts","sourceRoot":"","sources":["../../src/composables/use-animate.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-animate.d.ts","sourceRoot":"","sources":["../../src/composables/use-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAC/G,OAAO,EAAE,KAAK,WAAW,EAA8B,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAE5F,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,MAAM,WAAW,gBAAgB;IAC/B,6FAA6F;IAC7F,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,SAAS,CAAC,CAAC,CAAA;IACxD,uCAAuC;IACvC,IAAI,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACnC,mCAAmC;IACnC,OAAO,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACtC,oDAAoD;IACpD,KAAK,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACpC,iDAAiD;IACjD,OAAO,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACtC,qDAAqD;IACrD,SAAS,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACxC,mCAAmC;IACnC,MAAM,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACrC,qDAAqD;IACrD,QAAQ,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACvC,mEAAmE;IACnE,MAAM,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACrC,2FAA2F;IAC3F,MAAM,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;IACrC,gHAAgH;IAChH,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,WAAW,GAAG,SAAS,CAAA;IACvD,wCAAwC;IACxC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,WAAW,GAAG,SAAS,CAAA;IACpH,sDAAsD;IACtD,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAA;IACzD,uEAAuE;IACvE,OAAO,EAAE,MAAM,WAAW,GAAG,SAAS,CAAA;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,GAAE,QAAQ,CAAC,eAAe,CAAM,GAAG,gBAAgB,CAgGhH"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
2
2
|
import { type Draggable, type DraggableParams, type EasingParam } from "animejs";
|
|
3
3
|
import { type AnimationTargets } from "@src/utils/resolve-target.ts";
|
|
4
4
|
export interface UseDraggableReturn {
|
|
5
5
|
/** The underlying Anime.js draggable instance. `undefined` until the target is available. */
|
|
6
|
-
draggable:
|
|
6
|
+
draggable: Readonly<ShallowRef<Draggable | undefined>>;
|
|
7
7
|
/** Disables drag interactions without destroying the instance. */
|
|
8
8
|
disable: () => void;
|
|
9
9
|
/** Re-enables drag interactions after `disable()`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-draggable.d.ts","sourceRoot":"","sources":["../../src/composables/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-draggable.d.ts","sourceRoot":"","sources":["../../src/composables/use-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE/G,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAmB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AACjG,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,MAAM,WAAW,kBAAkB;IACjC,6FAA6F;IAC7F,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,GAAG,SAAS,CAAC,CAAC,CAAA;IACtD,kEAAkE;IAClE,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,sDAAsD;IACtD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,gGAAgG;IAChG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,kBAAkB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,gGAAgG;IAChG,IAAI,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,kBAAkB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IACvD,wDAAwD;IACxD,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IAC5E,uDAAuD;IACvD,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,KAAK,IAAI,CAAA;IAC3E,wDAAwD;IACxD,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,4EAA4E;IAC5E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,wDAAwD;IACxD,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,GAAE,QAAQ,CAAC,eAAe,CAAM,GAAG,kBAAkB,CA6EnH"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type MaybeComputedElementRef } from "@vueuse/core";
|
|
2
2
|
import { type AutoLayout, type AutoLayoutParams, type DOMTargetSelector, type LayoutAnimationParams, type Timeline } from "animejs";
|
|
3
|
-
import { type
|
|
3
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
4
4
|
export interface UseLayoutReturn {
|
|
5
5
|
/** The underlying Anime.js `AutoLayout` instance. `undefined` until the root element is available. */
|
|
6
|
-
layout:
|
|
6
|
+
layout: Readonly<ShallowRef<AutoLayout | undefined>>;
|
|
7
7
|
/** Snapshots the current positions of all tracked children so the next layout change can be animated. */
|
|
8
8
|
record: () => void;
|
|
9
9
|
/** Animates all children from their recorded positions to their new positions. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../src/composables/use-layout.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-layout.d.ts","sourceRoot":"","sources":["../../src/composables/use-layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAErF,OAAO,EACL,KAAK,UAAU,EACf,KAAK,gBAAgB,EAErB,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,KAAK,QAAQ,EACd,MAAM,SAAS,CAAA;AAChB,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE/G,MAAM,WAAW,eAAe;IAC9B,sGAAsG;IACtG,MAAM,EAAE,QAAQ,CAAC,UAAU,CAAC,UAAU,GAAG,SAAS,CAAC,CAAC,CAAA;IACpD,yGAAyG;IACzG,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,kFAAkF;IAClF,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,qBAAqB,KAAK,QAAQ,GAAG,SAAS,CAAA;IACjE,oGAAoG;IACpG,MAAM,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,EAAE,MAAM,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACxF,oFAAoF;IACpF,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CACvB,IAAI,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,uBAAuB,EAC3D,MAAM,GAAE,QAAQ,CAAC,gBAAgB,CAAM,GACtC,eAAe,CAyCjB"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type AnimatableObject, type AnimatableParams } from "animejs";
|
|
2
|
+
import { type MaybeRef } from "vue";
|
|
3
|
+
import { type AnimationTargets } from "@src/utils/resolve-target.ts";
|
|
4
|
+
/** The Anime.js `AnimatableObject` instance returned by `useRawAnimatable`. */
|
|
5
|
+
export type UseRawAnimatableReturn = AnimatableObject;
|
|
6
|
+
/**
|
|
7
|
+
* Thin wrapper around Anime.js `createAnimatable()`. Resolves the target (unwrapping refs and Vue
|
|
8
|
+
* component refs via `.$el`) and immediately creates the animatable.
|
|
9
|
+
*
|
|
10
|
+
* SSR-safety is the caller's responsibility: invoke this from inside your own `onMounted` (it runs
|
|
11
|
+
* unconditionally and immediately, with no client-only guard), never at `setup()` top level.
|
|
12
|
+
*
|
|
13
|
+
* @param targets - The element(s) to make animatable. Accepts a template ref, a Vue component ref, a CSS selector, a DOM element, or a reactive ref to any of these.
|
|
14
|
+
* @param options - Anime.js animatable parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
|
|
15
|
+
*/
|
|
16
|
+
export declare function useRawAnimatable(targets: AnimationTargets, options?: MaybeRef<AnimatableParams>): UseRawAnimatableReturn;
|
|
17
|
+
//# sourceMappingURL=use-raw-animatable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-raw-animatable.d.ts","sourceRoot":"","sources":["../../src/composables/use-raw-animatable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAoB,MAAM,SAAS,CAAA;AACxF,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,+EAA+E;AAC/E,MAAM,MAAM,sBAAsB,GAAG,gBAAgB,CAAA;AAErD;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,gBAAgB,EACzB,OAAO,GAAE,QAAQ,CAAC,gBAAgB,CAAM,GACvC,sBAAsB,CAQxB"}
|
|
@@ -7,6 +7,9 @@ export type UseRawAnimateReturn = JSAnimation;
|
|
|
7
7
|
* Thin wrapper around Anime.js `animate()`. Resolves the target (unwrapping refs and Vue component
|
|
8
8
|
* refs via `.$el`) and immediately starts the animation.
|
|
9
9
|
*
|
|
10
|
+
* SSR-safety is the caller's responsibility: invoke this from inside your own `onMounted` (it runs
|
|
11
|
+
* unconditionally and immediately, with no client-only guard), never at `setup()` top level.
|
|
12
|
+
*
|
|
10
13
|
* @param _target - The element(s) to animate. Accepts a template ref, a Vue component ref, a CSS selector, a DOM element, or a reactive ref to any of these.
|
|
11
14
|
* @param _options - Anime.js animation parameters. Accepts a plain object or a reactive ref / computed. Defaults to `{}`.
|
|
12
15
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-raw-animate.d.ts","sourceRoot":"","sources":["../../src/composables/use-raw-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AACzE,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,uEAAuE;AACvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA;AAE7C
|
|
1
|
+
{"version":3,"file":"use-raw-animate.d.ts","sourceRoot":"","sources":["../../src/composables/use-raw-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AACzE,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAC1C,OAAO,EAAE,KAAK,gBAAgB,EAAiB,MAAM,8BAA8B,CAAA;AAEnF,uEAAuE;AACvE,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAA;AAE7C;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,OAAO,EAAE,gBAAgB,EACzB,QAAQ,GAAE,QAAQ,CAAC,eAAe,CAAM,GACvC,mBAAmB,CAQrB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-scope.d.ts","sourceRoot":"","sources":["../../src/composables/use-scope.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,
|
|
1
|
+
{"version":3,"file":"use-scope.d.ts","sourceRoot":"","sources":["../../src/composables/use-scope.ts"],"names":[],"mappings":"AACA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AACpG,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE/G,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAA;IAC9C,+FAA+F;IAC/F,GAAG,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IAClC,0IAA0I;IAC1I,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACjE,2GAA2G;IAC3G,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACtC,qFAAqF;IACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,QAAQ,KAAK,IAAI,CAAA;IACtD,0EAA0E;IAC1E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,yEAAyE;IACzE,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,WAAW,CAAC,GAAG,cAAc,CA2EtE"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { type DrawableSVGGeometry, type DOMTargetSelector } from "animejs";
|
|
2
2
|
import { type MaybeComputedElementRef } from "@vueuse/core";
|
|
3
|
-
import { type MaybeRef, type
|
|
3
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
4
4
|
export interface UseSvgDrawableReturn {
|
|
5
5
|
/**
|
|
6
6
|
* The Anime.js drawable Proxy for the target element. `undefined` until the element is available.
|
|
7
7
|
* Pass this ref — not the original template ref — as the `useAnimate` target to animate the `draw` property.
|
|
8
8
|
*/
|
|
9
|
-
drawable:
|
|
9
|
+
drawable: Readonly<ShallowRef<DrawableSVGGeometry | undefined>>;
|
|
10
10
|
}
|
|
11
11
|
/**
|
|
12
12
|
* Wraps an SVG geometry element in Anime.js's drawable Proxy. The proxy intercepts `setAttribute('draw', …)` calls and translates normalised `draw` values (`0`–`1`) into the correct `stroke-dasharray` / `stroke-dashoffset` updates. Pass the returned `drawable` ref as the target to `useAnimate`.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,
|
|
1
|
+
{"version":3,"file":"use-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,mBAAmB,EAAE,KAAK,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,EAAY,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AACrF,OAAO,EAAkB,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAG/G,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,mBAAmB,GAAG,SAAS,CAAC,CAAC,CAAA;CAChE;AAED;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,MAAM,EAAE,QAAQ,CAAC,iBAAiB,CAAC,GAAG,uBAAuB,EAC7D,KAAK,GAAE,QAAQ,CAAC,MAAM,CAAK,EAC3B,GAAG,GAAE,QAAQ,CAAC,MAAM,CAAK,GACxB,oBAAoB,CAsBtB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-svg.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAE1C,MAAM,WAAW,YAAY;IAC3B,+IAA+I;IAC/I,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,aAAa,CAAA;IACtF,yKAAyK;IACzK,gBAAgB,EAAE,CAChB,IAAI,EAAE,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,EACnC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KACtB,UAAU,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,YAAY,
|
|
1
|
+
{"version":3,"file":"use-svg.d.ts","sourceRoot":"","sources":["../../src/composables/use-svg.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AACpE,OAAO,EAAE,KAAK,QAAQ,EAAS,MAAM,KAAK,CAAA;AAE1C,MAAM,WAAW,YAAY;IAC3B,+IAA+I;IAC/I,OAAO,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,aAAa,CAAA;IACtF,yKAAyK;IACzK,gBAAgB,EAAE,CAChB,IAAI,EAAE,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAC,EACnC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KACtB,UAAU,CAAC,OAAO,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC7C;AAED;;;;GAIG;AACH,wBAAgB,MAAM,IAAI,YAAY,CAoBrC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type TextSplitter, type TextSplitterParams } from "animejs";
|
|
2
2
|
import { type MaybeComputedElementRef } from "@vueuse/core";
|
|
3
|
-
import { type ComputedRef, type
|
|
3
|
+
import { type ComputedRef, type MaybeRef, type ShallowRef } from "vue";
|
|
4
4
|
export interface UseTextReturn {
|
|
5
5
|
/** The underlying Anime.js `TextSplitter` instance. `undefined` until the target is available. */
|
|
6
|
-
splitter:
|
|
6
|
+
splitter: Readonly<ShallowRef<TextSplitter | undefined>>;
|
|
7
7
|
/** Reactive array of `<span>` elements representing each line after splitting. */
|
|
8
8
|
lines: ComputedRef<HTMLElement[]>;
|
|
9
9
|
/** Reactive array of `<span>` elements representing each word after splitting. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-text.d.ts","sourceRoot":"","sources":["../../src/composables/use-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,
|
|
1
|
+
{"version":3,"file":"use-text.d.ts","sourceRoot":"","sources":["../../src/composables/use-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,YAAY,EAAE,KAAK,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,EAAY,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAErF,OAAO,EAQL,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,UAAU,EAChB,MAAM,KAAK,CAAA;AAEZ,MAAM,WAAW,aAAa;IAC5B,kGAAkG;IAClG,QAAQ,EAAE,QAAQ,CAAC,UAAU,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAA;IACxD,kFAAkF;IAClF,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAA;IACjC,kFAAkF;IAClF,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAA;IACjC,uFAAuF;IACvF,KAAK,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAA;IACjC,kFAAkF;IAClF,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,qGAAqG;IACrG,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,OAAO,CACrB,OAAO,EAAE,QAAQ,CAAC,WAAW,GAAG,QAAQ,GAAG,MAAM,GAAG,WAAW,EAAE,CAAC,GAAG,uBAAuB,EAC5F,OAAO,CAAC,EAAE,QAAQ,CAAC,kBAAkB,CAAC,GACrC,aAAa,CA0Cf"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type MaybeRef, type MaybeRefOrGetter, type ShallowRef
|
|
1
|
+
import { type MaybeRef, type MaybeRefOrGetter, type ShallowRef } from "vue";
|
|
2
2
|
import { type AnimationParams, type Callback, type StaggerFunction, type Tickable, type Timeline, type TimelineParams, type TimelinePosition, type Timer } from "animejs";
|
|
3
3
|
import { type AnimationTargets } from "@src/utils/resolve-target.ts";
|
|
4
4
|
export type TimelineChain = Timeline & {
|
|
@@ -10,8 +10,8 @@ export type TimelineChain = Timeline & {
|
|
|
10
10
|
remove: (targets: AnimationTargets, propertyName?: string) => TimelineChain;
|
|
11
11
|
};
|
|
12
12
|
export interface UseTimelineReturn {
|
|
13
|
-
/** The underlying Anime.js timeline instance. */
|
|
14
|
-
timeline:
|
|
13
|
+
/** The underlying Anime.js timeline instance. `undefined` until mounted. */
|
|
14
|
+
timeline: Readonly<ShallowRef<Timeline | undefined>>;
|
|
15
15
|
/** Adds an animation to the timeline. Accepts a template ref or any valid Anime.js target. Returns a chainable object. */
|
|
16
16
|
add: (targets: AnimationTargets, params: MaybeRefOrGetter<AnimationParams>, position?: TimelinePosition | StaggerFunction<number | string>) => TimelineChain;
|
|
17
17
|
/** Sets a property to a value at a point in the timeline without animating it. Returns a chainable object. */
|
|
@@ -19,39 +19,39 @@ export interface UseTimelineReturn {
|
|
|
19
19
|
/** Removes an animation target (or a specific property) from the timeline. Returns a chainable object. */
|
|
20
20
|
remove: (targets: AnimationTargets, propertyName?: string) => TimelineChain;
|
|
21
21
|
/** Synchronises another tickable (animation, timer) into the timeline at the given position. */
|
|
22
|
-
sync: (synced?: Tickable, position?: TimelinePosition) => Timeline;
|
|
22
|
+
sync: (synced?: Tickable, position?: TimelinePosition) => Timeline | undefined;
|
|
23
23
|
/** Adds a named label at a position so it can be referenced by `.add()` or `.seek()`. */
|
|
24
|
-
label: (labelName: string, position?: TimelinePosition) => Timeline;
|
|
24
|
+
label: (labelName: string, position?: TimelinePosition) => Timeline | undefined;
|
|
25
25
|
/** Inserts a callback function at a specific point in the timeline. */
|
|
26
|
-
call: (callback: Callback<Timer>, position?: TimelinePosition) => Timeline;
|
|
26
|
+
call: (callback: Callback<Timer>, position?: TimelinePosition) => Timeline | undefined;
|
|
27
27
|
/** Renders the timeline once without playing it. */
|
|
28
|
-
init: (internalRender?: boolean) => Timeline;
|
|
28
|
+
init: (internalRender?: boolean) => Timeline | undefined;
|
|
29
29
|
/** Starts or resumes the timeline. */
|
|
30
|
-
play: () => Timeline;
|
|
30
|
+
play: () => Timeline | undefined;
|
|
31
31
|
/** Reverses playback direction. */
|
|
32
|
-
reverse: () => Timeline;
|
|
32
|
+
reverse: () => Timeline | undefined;
|
|
33
33
|
/** Pauses the timeline at the current position. */
|
|
34
|
-
pause: () => Timeline;
|
|
34
|
+
pause: () => Timeline | undefined;
|
|
35
35
|
/** Restarts the timeline from the beginning. */
|
|
36
|
-
restart: () => Timeline;
|
|
36
|
+
restart: () => Timeline | undefined;
|
|
37
37
|
/** Toggles between forward and reverse direction. */
|
|
38
|
-
alternate: () => Timeline;
|
|
38
|
+
alternate: () => Timeline | undefined;
|
|
39
39
|
/** Resumes from a paused state. */
|
|
40
|
-
resume: () => Timeline;
|
|
40
|
+
resume: () => Timeline | undefined;
|
|
41
41
|
/** Jumps immediately to the end of the timeline. */
|
|
42
|
-
complete: () => Timeline;
|
|
42
|
+
complete: () => Timeline | undefined;
|
|
43
43
|
/** Resets the timeline to its initial state. Pass `true` for a soft reset that preserves the current cycle. */
|
|
44
|
-
reset: (softReset?: boolean) => Timeline;
|
|
44
|
+
reset: (softReset?: boolean) => Timeline | undefined;
|
|
45
45
|
/** Stops the timeline and removes it from the Anime.js engine. */
|
|
46
|
-
cancel: () => Timeline;
|
|
46
|
+
cancel: () => Timeline | undefined;
|
|
47
47
|
/** Cancels the timeline and restores all animated properties to their original values. */
|
|
48
|
-
revert: () => Timeline;
|
|
48
|
+
revert: () => Timeline | undefined;
|
|
49
49
|
/** Seeks to a specific time (in ms). */
|
|
50
|
-
seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timeline;
|
|
50
|
+
seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timeline | undefined;
|
|
51
51
|
/** Rescales the timeline to a new total duration. */
|
|
52
|
-
stretch: (newDuration: number) => Timeline;
|
|
52
|
+
stretch: (newDuration: number) => Timeline | undefined;
|
|
53
53
|
/** Re-reads the current values of all animated properties from the DOM. */
|
|
54
|
-
refresh: () => Timeline;
|
|
54
|
+
refresh: () => Timeline | undefined;
|
|
55
55
|
}
|
|
56
56
|
/**
|
|
57
57
|
* Wraps Anime.js `createTimeline()` into a Vue composable. Reactively re-creates the timeline when options change, and cancels it automatically on unmount.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-timeline.d.ts","sourceRoot":"","sources":["../../src/composables/use-timeline.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-timeline.d.ts","sourceRoot":"","sources":["../../src/composables/use-timeline.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
import { type Timer, type TimerParams } from "animejs";
|
|
2
|
-
import { type MaybeRef, type ShallowRef
|
|
2
|
+
import { type MaybeRef, type ShallowRef } from "vue";
|
|
3
3
|
export interface UseTimerReturn {
|
|
4
|
-
/** The underlying Anime.js timer instance. */
|
|
5
|
-
timer:
|
|
4
|
+
/** The underlying Anime.js timer instance. `undefined` until mounted. */
|
|
5
|
+
timer: Readonly<ShallowRef<Timer | undefined>>;
|
|
6
6
|
/** Starts or resumes the timer. */
|
|
7
|
-
play: () => Timer;
|
|
7
|
+
play: () => Timer | undefined;
|
|
8
8
|
/** Reverses the timer's playback direction. */
|
|
9
|
-
reverse: () => Timer;
|
|
9
|
+
reverse: () => Timer | undefined;
|
|
10
10
|
/** Pauses the timer at the current position. */
|
|
11
|
-
pause: () => Timer;
|
|
11
|
+
pause: () => Timer | undefined;
|
|
12
12
|
/** Restarts the timer from the beginning. */
|
|
13
|
-
restart: () => Timer;
|
|
13
|
+
restart: () => Timer | undefined;
|
|
14
14
|
/** Toggles between forward and reverse direction. */
|
|
15
|
-
alternate: () => Timer;
|
|
15
|
+
alternate: () => Timer | undefined;
|
|
16
16
|
/** Resumes from a paused state. */
|
|
17
|
-
resume: () => Timer;
|
|
17
|
+
resume: () => Timer | undefined;
|
|
18
18
|
/** Jumps immediately to the end of the timer duration. */
|
|
19
|
-
complete: () => Timer;
|
|
19
|
+
complete: () => Timer | undefined;
|
|
20
20
|
/** Resets the timer to its initial state. Pass `true` for a soft reset that preserves the current cycle. */
|
|
21
|
-
reset: (softReset?: boolean) => Timer;
|
|
21
|
+
reset: (softReset?: boolean) => Timer | undefined;
|
|
22
22
|
/** Stops the timer and removes it from the Anime.js engine. */
|
|
23
|
-
cancel: () => Timer;
|
|
23
|
+
cancel: () => Timer | undefined;
|
|
24
24
|
/** Cancels the timer and restores any associated state to its original values. */
|
|
25
|
-
revert: () => Timer;
|
|
25
|
+
revert: () => Timer | undefined;
|
|
26
26
|
/** Seeks to a specific time (in ms). */
|
|
27
|
-
seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timer;
|
|
27
|
+
seek: (time: number, muteCallbacks?: boolean | number, internalRender?: boolean | number) => Timer | undefined;
|
|
28
28
|
/** Rescales the timer to a new total duration. */
|
|
29
|
-
stretch: (newDuration: number) => Timer;
|
|
29
|
+
stretch: (newDuration: number) => Timer | undefined;
|
|
30
30
|
}
|
|
31
31
|
/**
|
|
32
32
|
* Wraps Anime.js `createTimer()` into a Vue composable. Reactively re-creates the timer when options change, and cancels it automatically on unmount.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-timer.d.ts","sourceRoot":"","sources":["../../src/composables/use-timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,
|
|
1
|
+
{"version":3,"file":"use-timer.d.ts","sourceRoot":"","sources":["../../src/composables/use-timer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,KAAK,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAA;AACnE,OAAO,EAAW,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAGxG,MAAM,WAAW,cAAc;IAC7B,yEAAyE;IACzE,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAA;IAC9C,mCAAmC;IACnC,IAAI,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAC7B,+CAA+C;IAC/C,OAAO,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAChC,gDAAgD;IAChD,KAAK,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAC9B,6CAA6C;IAC7C,OAAO,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAChC,qDAAqD;IACrD,SAAS,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAClC,mCAAmC;IACnC,MAAM,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAC/B,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IACjC,4GAA4G;IAC5G,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,OAAO,KAAK,KAAK,GAAG,SAAS,CAAA;IACjD,+DAA+D;IAC/D,MAAM,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAC/B,kFAAkF;IAClF,MAAM,EAAE,MAAM,KAAK,GAAG,SAAS,CAAA;IAC/B,wCAAwC;IACxC,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,aAAa,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,KAAK,KAAK,GAAG,SAAS,CAAA;IAC9G,kDAAkD;IAClD,OAAO,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,KAAK,GAAG,SAAS,CAAA;CACpD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,OAAO,GAAE,QAAQ,CAAC,WAAW,CAAM,GAAG,cAAc,CAqF5E"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { type MaybeComputedElementRef } from "@vueuse/core";
|
|
2
2
|
import { type WAAPIAnimationParams, type DOMTargetsParam, type WAAPIAnimation, type EasingFunction } from "animejs";
|
|
3
|
-
import {
|
|
3
|
+
import { type MaybeRef, ShallowRef } from "vue";
|
|
4
4
|
export interface UseWaapiReturn {
|
|
5
5
|
/** The underlying Anime.js WAAPI animation instance. `undefined` until the target is available. */
|
|
6
|
-
animation:
|
|
6
|
+
animation: Readonly<ShallowRef<WAAPIAnimation | undefined>>;
|
|
7
7
|
/** Resumes from a paused state. */
|
|
8
8
|
resume: () => WAAPIAnimation | undefined;
|
|
9
9
|
/** Pauses the animation at the current position. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-waapi.d.ts","sourceRoot":"","sources":["../../src/composables/use-waapi.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"use-waapi.d.ts","sourceRoot":"","sources":["../../src/composables/use-waapi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,uBAAuB,EAAkB,MAAM,cAAc,CAAA;AAErF,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,eAAe,EAEpB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,SAAS,CAAA;AAChB,OAAO,EAAkB,KAAK,QAAQ,EAAmB,UAAU,EAA4B,MAAM,KAAK,CAAA;AAE1G,MAAM,WAAW,cAAc;IAC7B,mGAAmG;IACnG,SAAS,EAAE,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,mCAAmC;IACnC,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACxC,oDAAoD;IACpD,KAAK,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACvC,qDAAqD;IACrD,SAAS,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IAC3C,uCAAuC;IACvC,IAAI,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACtC,mCAAmC;IACnC,OAAO,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACzC,mFAAmF;IACnF,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,cAAc,GAAG,SAAS,CAAA;IAC/F,iDAAiD;IACjD,OAAO,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACzC,qGAAqG;IACrG,YAAY,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IAC9C,qDAAqD;IACrD,QAAQ,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IAC1C,gEAAgE;IAChE,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACxC,2FAA2F;IAC3F,MAAM,EAAE,MAAM,cAAc,GAAG,SAAS,CAAA;IACxC,6FAA6F;IAC7F,WAAW,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,MAAM,CAAA;CAClF;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACtB,OAAO,EAAE,QAAQ,CAAC,eAAe,CAAC,GAAG,uBAAuB,EAC5D,OAAO,GAAE,QAAQ,CAAC,oBAAoB,CAAM,GAC3C,cAAc,CA2EhB"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`vue`),t=require(`animejs`),n=require(`@vueuse/core`);function r(e){return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(e,n){if(_(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.animate)(e,n)}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.readonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)((0,t.createTimer)((0,e.unref)(r))),{stop:a}=(0,e.watch)(()=>(0,e.unref)(r),e=>{m(),i.value=(0,t.createTimer)(e)},{deep:1});(0,n.tryOnUnmounted)(()=>{a(),m()});function o(){return i.value.play()}function s(){return i.value.reverse()}function c(){return i.value.pause()}function l(){return i.value.restart()}function u(){return i.value.alternate()}function d(){return i.value.resume()}function f(){return i.value.complete()}function p(e){return i.value.reset(e)}function m(){return i.value.cancel()}function h(){return i.value.revert()}function g(e,t,n){return i.value.seek(e,t,n)}function _(e){return i.value.stretch(e)}return{timer:(0,e.readonly)(i),play:o,reverse:s,pause:c,restart:l,alternate:u,resume:d,complete:f,reset:p,cancel:m,revert:h,seek:g,stretch:_}}function s(i={}){let a=!1,o=[],s=(0,e.shallowRef)((0,t.createTimeline)((0,e.unref)(i)));function c(){for(let t of o)t.type===`add`?s.value.add(r(t.targets),(0,e.toValue)(t.params),t.position):s.value.set(r(t.targets),(0,e.toValue)(t.params),t.position)}let{stop:l}=(0,e.watch)(()=>(0,e.unref)(i),e=>{E(),s.value=(0,t.createTimeline)(e),c()},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{a=!0,c()}),(0,n.tryOnUnmounted)(()=>{l(),T()});function u(t,n,i){return o.push({type:`add`,targets:t,params:n,position:i}),a?{...s.value.add(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function d(t,n,i){return o.push({type:`set`,targets:t,params:n,position:i}),a?{...s.value.set(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function f(e,t){return a?{...s.value.remove(r(e),t),add:u,set:d,remove:f}:(console.warn(`Cannot remove from timeline before mount`),{...s.value,add:u,set:d,remove:f})}function p(e,t){return s.value.sync(e,t)}function m(e,t){return s.value.label(e,t)}function h(e,t){return s.value.call(e,t)}function g(e){return s.value.init(e)}function _(){return s.value.play()}function v(){return s.value.reverse()}function y(){return s.value.pause()}function b(){return s.value.restart()}function x(){return s.value.alternate()}function S(){return s.value.resume()}function C(){return s.value.complete()}function w(e){return s.value.reset(e)}function T(){return s.value.cancel()}function E(){return s.value.revert()}function D(e,t,n){return s.value.seek(e,t,n)}function O(e){return s.value.stretch(e)}function k(){return s.value.refresh()}return{timeline:(0,e.readonly)(s),add:u,set:d,sync:p,label:m,remove:f,call:h,init:g,play:_,reverse:v,pause:y,restart:b,alternate:x,resume:S,complete:C,reset:w,cancel:T,revert:E,seek:D,stretch:O,refresh:k}}function c(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)((0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),({el:e,opt:n})=>{if(c(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createAnimatable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s(),c()});function c(){return o.value?.revert()}return{animatable:(0,e.readonly)(o),revert:c}}function l(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(g(),!e){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,t.createDraggable)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.readonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function u(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{if(d(),!e){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,t.createLayout)(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.readonly)(o),record:c,animate:l,update:u,revert:d}}function d(){function n(n,r){let i=(0,e.unref)(n);return i?t.svg.morphTo((0,e.unref)(i),(0,e.unref)(r)):()=>``}function r(n,r){let i=(0,e.unref)(n)??``;return t.svg.createMotionPath(i,(0,e.unref)(r))}return{morphTo:n,createMotionPath:r}}function f(i,a=0,o=0){let s=(0,e.shallowRef)(),{stop:c}=(0,e.watch)(()=>r(i),n=>{if(s.value=void 0,!n){console.warn(`[useSvgDrawable] Target element is null or undefined`);return}s.value=t.svg.createDrawable(n,(0,e.unref)(a),(0,e.unref)(o))[0]},{flush:`post`,immediate:!(0,e.isRef)(i)});return(0,n.tryOnUnmounted)(()=>{c(),s.value=void 0}),{drawable:(0,e.readonly)(s)}}function p(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{d(),o.value=void 0,e&&(o.value=(0,t.splitText)(e,n))},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.readonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function m(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,n])=>{o.value=t.waapi.animate(e,n)},{flush:`post`,immediate:!(0,e.isRef)(i)});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function m(){return o.value?.restart()}function g(){return o.value?.commitStyles()}function _(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.readonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:m,commitStyles:g,complete:_,cancel:v,revert:y,convertEase:h}}function h(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function g(r){let i=(0,e.shallowRef)(void 0),a=[],o=[],s=[],c=!1,l;(0,n.tryOnMounted)(()=>{c=!0,i.value=(0,t.createScope)((0,e.unref)(r));for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0,(0,e.isRef)(r)&&(l=(0,e.watch)(r,e=>{i.value?.revert(),i.value=(0,t.createScope)(e)},{flush:`post`}))}),(0,n.tryOnUnmounted)(()=>{i.value?.revert(),l?.()});function u(e){return c?i.value?.add(e):void a.push(e)}function d(e,t){return c?i.value?.add(e,t):void o.push([e,t])}function f(e){return c?i.value?.addOnce(e):void s.push(e)}function p(e){return i.value?.keepTime(e)}function m(){return i.value?.revert()}function h(){return i.value?.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}var _=new WeakMap,v={mounted(e,n){n.value&&_.set(e,(0,t.animate)(e,n.value))},updated(e,n){if(n.value===n.oldValue)return;let r=_.get(e);r?.cancel(),r?.revert(),n.value&&_.set(e,(0,t.animate)(e,n.value))},unmounted(e){let t=_.get(e);t?.cancel(),t?.revert(),_.delete(e)}},y=new WeakMap,b={mounted(e,n){y.set(e,(0,t.createDraggable)(e,n.value??{}))},updated(e,n){n.value!==n.oldValue&&(y.get(e)?.revert(),y.set(e,(0,t.createDraggable)(e,n.value??{})))},unmounted(e){y.get(e)?.revert(),y.delete(e)}},x=new WeakMap;function S(e,n){let r=t.svg.createDrawable(e)[0];return{drawable:r,animation:n?(0,t.animate)(r,n):void 0}}var C={mounted(e,t){x.set(e,S(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=x.get(e);n?.animation?.cancel(),n?.animation?.revert(),x.set(e,S(e,t.value))},unmounted(e){let t=x.get(e);t?.animation?.cancel(),t?.animation?.revert(),x.delete(e)}},w=new WeakMap,T={mounted(e,n){n.value&&w.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},updated(e,n){if(n.value===n.oldValue)return;let r=w.get(e);r&&(r.animation.cancel(),e.style.cssText=r.originalStyle,w.delete(e)),n.value&&w.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},unmounted(e){let t=w.get(e);t&&(t.animation.cancel(),e.style.cssText=t.originalStyle,w.delete(e))}},E=new WeakMap;function D(e,n){let{animation:r,...i}=n??{},a=(0,t.splitText)(e,i),o={splitter:a,animation:void 0};return r&&(i.lines?(document.fonts?.ready??Promise.resolve()).then(()=>{E.get(e)===o&&(o.animation=(0,t.animate)(a.lines,r))}):o.animation=(0,t.animate)(i.chars?a.chars:a.words,r)),o}function O(e){e.animation?.cancel(),e.splitter.revert()}var k={mounted(e,t){E.set(e,D(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=E.get(e);n&&O(n),E.set(e,D(e,t.value))},unmounted(e){let t=E.get(e);t&&O(t),E.delete(e)}};exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=l,exports.useLayout=u,exports.useRawAnimate=a,exports.useScope=g,exports.useSvg=d,exports.useSvgDrawable=f,exports.useText=p,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=m,exports.vAnimate=v,exports.vDraggable=b,exports.vSvgDrawable=C,exports.vTextSplit=k,exports.vWaapi=T;
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("vue"),t=require("animejs"),n=require("@vueuse/core");function r(e){if(Array.isArray(e)){let t=e.map(e=>(0,n.unrefElement)(e)).filter(e=>e!=null);return t.length>0?t:void 0}return(0,n.unrefElement)(e)}function i(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([e,t])=>{c(e,t)},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s(),g()});function c(n,r){if(_(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.animate)(n,r))}function l(){return o.value?.play()}function u(){return o.value?.reverse()}function d(){return o.value?.pause()}function f(){return o.value?.restart()}function p(){return o.value?.alternate()}function m(){return o.value?.resume()}function h(){return o.value?.complete()}function g(){return o.value?.cancel()}function _(){return o.value?.revert()}function v(e){return o.value?.reset(e)}function y(e,t,n){return o.value?.seek(e,t,n)}function b(e){return o.value?.stretch(e)}function x(){return o.value?.refresh()}return{animation:(0,e.shallowReadonly)(o),play:l,reverse:u,pause:d,restart:f,alternate:p,resume:m,complete:h,cancel:g,revert:_,reset:v,seek:y,stretch:b,refresh:x}}function a(n,i={}){let a=r(n);return a||console.warn(`Target is undefined`),(0,t.animate)(a,(0,e.unref)(i))}function o(r={}){let i=(0,e.shallowRef)();(0,n.tryOnMounted)(()=>{i.value=(0,e.markRaw)((0,t.createTimer)((0,e.unref)(r)))});let{stop:a}=(0,e.watch)(()=>(0,e.unref)(r),r=>{n.isClient&&(m(),i.value=(0,e.markRaw)((0,t.createTimer)(r)))},{deep:1});(0,n.tryOnUnmounted)(()=>{a(),m()});function o(){return i.value?.play()}function s(){return i.value?.reverse()}function c(){return i.value?.pause()}function l(){return i.value?.restart()}function u(){return i.value?.alternate()}function d(){return i.value?.resume()}function f(){return i.value?.complete()}function p(e){return i.value?.reset(e)}function m(){return i.value?.cancel()}function h(){return i.value?.revert()}function g(e,t,n){return i.value?.seek(e,t,n)}function _(e){return i.value?.stretch(e)}return{timer:(0,e.shallowReadonly)(i),play:o,reverse:s,pause:c,restart:l,alternate:u,resume:d,complete:f,reset:p,cancel:m,revert:h,seek:g,stretch:_}}function s(i={}){let a=!1,o=[],s=(0,e.shallowRef)();function c(){for(let t of o)t.type===`add`?s.value?.add(r(t.targets),(0,e.toValue)(t.params),t.position):s.value?.set(r(t.targets),(0,e.toValue)(t.params),t.position)}let{stop:l}=(0,e.watch)(()=>(0,e.unref)(i),r=>{n.isClient&&(E(),s.value=(0,e.markRaw)((0,t.createTimeline)(r)),c())},{flush:`post`,deep:1});(0,n.tryOnMounted)(()=>{s.value=(0,e.markRaw)((0,t.createTimeline)((0,e.unref)(i))),a=!0,c()}),(0,n.tryOnUnmounted)(()=>{l(),T()});function u(t,n,i){return o.push({type:`add`,targets:t,params:n,position:i}),a?{...s.value?.add(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function d(t,n,i){return o.push({type:`set`,targets:t,params:n,position:i}),a?{...s.value?.set(r(t),(0,e.toValue)(n),i),add:u,set:d,remove:f}:{...s.value,add:u,set:d,remove:f}}function f(e,t){return a?{...s.value?.remove(r(e),t),add:u,set:d,remove:f}:(console.warn(`Cannot remove from timeline before mount`),{...s.value,add:u,set:d,remove:f})}function p(e,t){return s.value?.sync(e,t)}function m(e,t){return s.value?.label(e,t)}function h(e,t){return s.value?.call(e,t)}function g(e){return s.value?.init(e)}function _(){return s.value?.play()}function v(){return s.value?.reverse()}function y(){return s.value?.pause()}function b(){return s.value?.restart()}function x(){return s.value?.alternate()}function S(){return s.value?.resume()}function C(){return s.value?.complete()}function w(e){return s.value?.reset(e)}function T(){return s.value?.cancel()}function E(){return s.value?.revert()}function D(e,t,n){return s.value?.seek(e,t,n)}function O(e){return s.value?.stretch(e)}function k(){return s.value?.refresh()}return{timeline:(0,e.shallowReadonly)(s),add:u,set:d,sync:p,label:m,remove:f,call:h,init:g,play:_,reverse:v,pause:y,restart:b,alternate:x,resume:S,complete:C,reset:w,cancel:T,revert:E,seek:D,stretch:O,refresh:k}}function c(i,a={}){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>({el:r(i),opt:(0,e.unref)(a)})),{stop:c}=(0,e.watch)(s,({el:n,opt:r})=>{if(l(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createAnimatable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{c(),l()});function l(){return o.value?.revert()}return{animatable:(0,e.shallowReadonly)(o),revert:l}}function l(n,i={}){let a=r(n);return a||console.warn(`Targets element is null or undefined`),(0,t.createAnimatable)(a,(0,e.unref)(i))}function u(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(g(),!n){console.warn(`Targets element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createDraggable)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{g(),s()});function c(){return o.value?.disable()}function l(){return o.value?.enable()}function u(e,t){return o.value?.setX(e,t)}function d(e,t){return o.value?.setY(e,t)}function f(e,t,n){return o.value?.animateInView(e,t,n)}function p(e,t,n){return o.value?.scrollInView(e,t,n)}function m(){return o.value?.stop()}function h(){return o.value?.reset()}function g(){return o.value?.revert()}function _(){return o.value?.refresh()}return{draggable:(0,e.shallowReadonly)(o),disable:c,enable:l,setX:u,setY:d,animateInView:f,scrollInView:p,stop:m,reset:h,revert:g,refresh:_}}function d(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{if(d(),!n){console.warn(`Target element is null or undefined`),o.value=void 0;return}o.value=(0,e.markRaw)((0,t.createLayout)(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{d(),s()});function c(){return o.value?.record()}function l(e){return o.value?.animate(e)}function u(e,t){return o.value?.update(e,t)}function d(){return o.value?.revert()}return{layout:(0,e.shallowReadonly)(o),record:c,animate:l,update:u,revert:d}}function f(){function n(n,r){return(i,a,o,s)=>{let c=(0,e.unref)(n);return c?t.svg.morphTo(c,(0,e.unref)(r))(i,a,o,s):``}}function r(n,r){let i=(0,e.unref)(n)??``;return t.svg.createMotionPath(i,(0,e.unref)(r))}return{morphTo:n,createMotionPath:r}}function p(i,a=0,o=0){let s=(0,e.shallowRef)(),{stop:c}=(0,e.watch)(()=>r(i),n=>{if(s.value=void 0,!n){console.warn(`[useSvgDrawable] Target element is null or undefined`);return}s.value=(0,e.markRaw)(t.svg.createDrawable(n,(0,e.unref)(a),(0,e.unref)(o))[0])},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});return(0,n.tryOnUnmounted)(()=>{c(),s.value=void 0}),{drawable:(0,e.shallowReadonly)(s)}}function m(i,a){let o=(0,e.shallowRef)(),s=(0,e.computed)(()=>o.value?.lines??[]),c=(0,e.computed)(()=>o.value?.words??[]),l=(0,e.computed)(()=>o.value?.chars??[]),{stop:u}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{d(),o.value=void 0,n&&(o.value=(0,e.markRaw)((0,t.splitText)(n,r)))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{u(),o.value=void 0,d()});function d(){o.value?.revert()}function f(){o.value?.refresh()}return{splitter:(0,e.shallowReadonly)(o),lines:s,words:c,chars:l,revert:d,refresh:f}}function h(i,a={}){let o=(0,e.shallowRef)(),{stop:s}=(0,e.watch)([()=>r(i),()=>(0,e.unref)(a)],([n,r])=>{o.value=(0,e.markRaw)(t.waapi.animate(n,r))},{flush:`post`,immediate:!(0,e.isRef)(i)&&n.isClient});(0,n.tryOnUnmounted)(()=>{s()});function c(){return o.value?.resume()}function l(){return o.value?.pause()}function u(){return o.value?.alternate()}function d(){return o.value?.play()}function f(){return o.value?.reverse()}function p(t,n){return o.value?.seek((0,e.unref)(t),(0,e.unref)(n))}function m(){return o.value?.restart()}function h(){return o.value?.commitStyles()}function _(){return o.value?.complete()}function v(){return o.value?.cancel()}function y(){return o.value?.revert()}return{animation:(0,e.shallowReadonly)(o),resume:c,pause:l,alternate:u,play:d,reverse:f,seek:p,restart:m,commitStyles:h,complete:_,cancel:v,revert:y,convertEase:g}}function g(n,r=100){return t.waapi.convertEase((0,e.unref)(n),(0,e.unref)(r))}function _(r){let i=(0,e.shallowRef)(void 0),a=[],o=[],s=[],c=!1,l;(0,n.tryOnMounted)(()=>{c=!0,i.value=(0,e.markRaw)((0,t.createScope)((0,e.unref)(r)));for(let e of a)i.value.add(e);for(let[e,t]of o)i.value.add(e,t);for(let e of s)i.value.addOnce(e);a.length=0,o.length=0,s.length=0,(0,e.isRef)(r)&&(l=(0,e.watch)(r,n=>{i.value?.revert(),i.value=(0,e.markRaw)((0,t.createScope)(n))},{flush:`post`}))}),(0,n.tryOnUnmounted)(()=>{i.value?.revert(),l?.()});function u(e){return c?i.value?.add(e):void a.push(e)}function d(e,t){return c?i.value?.add(e,t):void o.push([e,t])}function f(e){return c?i.value?.addOnce(e):void s.push(e)}function p(e){return i.value?.keepTime(e)}function m(){return i.value?.revert()}function h(){return i.value?.refresh()}return{scope:(0,e.shallowReadonly)(i),add:u,registerMethod:d,addOnce:f,keepTime:p,revert:m,refresh:h}}var v=new WeakMap,y={mounted(e,n){n.value&&v.set(e,(0,t.animate)(e,n.value))},updated(e,n){if(n.value===n.oldValue)return;let r=v.get(e);r?.cancel(),r?.revert(),n.value&&v.set(e,(0,t.animate)(e,n.value))},unmounted(e){let t=v.get(e);t?.cancel(),t?.revert(),v.delete(e)}},b=new WeakMap,x={mounted(e,n){b.set(e,(0,t.createDraggable)(e,n.value??{}))},updated(e,n){n.value!==n.oldValue&&(b.get(e)?.revert(),b.set(e,(0,t.createDraggable)(e,n.value??{})))},unmounted(e){b.get(e)?.revert(),b.delete(e)}},S=new WeakMap;function C(e,n){let r=t.svg.createDrawable(e)[0];return{drawable:r,animation:n?(0,t.animate)(r,n):void 0}}var w={mounted(e,t){S.set(e,C(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=S.get(e);n?.animation?.cancel(),n?.animation?.revert(),S.set(e,C(e,t.value))},unmounted(e){let t=S.get(e);t?.animation?.cancel(),t?.animation?.revert(),S.delete(e)}},T=new WeakMap,E={mounted(e,n){n.value&&T.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},updated(e,n){if(n.value===n.oldValue)return;let r=T.get(e);r&&(r.animation.cancel(),e.style.cssText=r.originalStyle,T.delete(e)),n.value&&T.set(e,{animation:t.waapi.animate(e,n.value),originalStyle:e.style.cssText})},unmounted(e){let t=T.get(e);t&&(t.animation.cancel(),e.style.cssText=t.originalStyle,T.delete(e))}},D=new WeakMap;function O(e,n){let{animation:r,...i}=n??{},a=(0,t.splitText)(e,i),o={splitter:a,animation:void 0};if(r){if(i.lines)(document.fonts?.ready??Promise.resolve()).then(()=>{D.get(e)===o&&(o.animation=(0,t.animate)(a.lines,r))});else{let e=i.chars?a.chars:a.words;o.animation=(0,t.animate)(e,r)}}return o}function k(e){e.animation?.cancel(),e.splitter.revert()}var A={mounted(e,t){D.set(e,O(e,t.value))},updated(e,t){if(t.value===t.oldValue)return;let n=D.get(e);n&&k(n),D.set(e,O(e,t.value))},unmounted(e){let t=D.get(e);t&&k(t),D.delete(e)}};exports.useAnimatable=c,exports.useAnimate=i,exports.useDraggable=u,exports.useLayout=d,exports.useRawAnimatable=l,exports.useRawAnimate=a,exports.useScope=_,exports.useSvg=f,exports.useSvgDrawable=p,exports.useText=m,exports.useTimeline=s,exports.useTimer=o,exports.useWaapi=h,exports.vAnimate=y,exports.vDraggable=x,exports.vSvgDrawable=w,exports.vTextSplit=A,exports.vWaapi=E;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|