@juleshry/vue-animejs 1.0.1 → 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 +21 -304
- 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/directives/v-animate.d.ts +12 -0
- package/dist/directives/v-animate.d.ts.map +1 -0
- package/dist/directives/v-draggable.d.ts +12 -0
- package/dist/directives/v-draggable.d.ts.map +1 -0
- package/dist/directives/v-svg-drawable.d.ts +13 -0
- package/dist/directives/v-svg-drawable.d.ts.map +1 -0
- package/dist/directives/v-text-split.d.ts +16 -0
- package/dist/directives/v-text-split.d.ts.map +1 -0
- package/dist/directives/v-waapi.d.ts +12 -0
- package/dist/directives/v-waapi.d.ts.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +460 -345
- 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 +20 -19
|
@@ -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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type AnimationParams } from "animejs";
|
|
2
|
+
import type { Directive } from "vue";
|
|
3
|
+
/**
|
|
4
|
+
* Declarative animation directive. Applies an Anime.js animation to the element on mount,
|
|
5
|
+
* re-creates it when the binding value changes, and reverts it on unmount.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <div v-animate="{ translateX: 250, duration: 800 }" />
|
|
9
|
+
* <div v-animate="reactiveOptions" />
|
|
10
|
+
*/
|
|
11
|
+
export declare const vAnimate: Directive<HTMLElement, AnimationParams>;
|
|
12
|
+
//# sourceMappingURL=v-animate.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"v-animate.d.ts","sourceRoot":"","sources":["../../src/directives/v-animate.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,eAAe,EAAoB,MAAM,SAAS,CAAA;AACzE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,CAkB5D,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type DraggableParams } from "animejs";
|
|
2
|
+
import type { Directive } from "vue";
|
|
3
|
+
/**
|
|
4
|
+
* Declarative draggable directive. Makes the element draggable on mount,
|
|
5
|
+
* re-creates it when the binding value changes, and reverts it on unmount.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <div v-draggable />
|
|
9
|
+
* <div v-draggable="{ snap: [0, 100] }" />
|
|
10
|
+
*/
|
|
11
|
+
export declare const vDraggable: Directive<HTMLElement, DraggableParams | undefined>;
|
|
12
|
+
//# sourceMappingURL=v-draggable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"v-draggable.d.ts","sourceRoot":"","sources":["../../src/directives/v-draggable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmC,KAAK,eAAe,EAAE,MAAM,SAAS,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAIpC;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,GAAG,SAAS,CAa1E,CAAA"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type AnimationParams } from "animejs";
|
|
2
|
+
import type { Directive } from "vue";
|
|
3
|
+
/**
|
|
4
|
+
* Declarative SVG drawable directive. Wraps the SVG geometry element in an Anime.js drawable
|
|
5
|
+
* Proxy and animates the `draw` property on mount. Re-creates it when the binding value changes
|
|
6
|
+
* and reverts on unmount.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* <path v-svg-drawable="{ draw: '0 1', duration: 1200 }" />
|
|
10
|
+
* <path v-svg-drawable="{ draw: ['0 0', '0.5 1', '0 1'], ease: 'inOutQuad', loop: true }" />
|
|
11
|
+
*/
|
|
12
|
+
export declare const vSvgDrawable: Directive<SVGGeometryElement, AnimationParams | undefined>;
|
|
13
|
+
//# sourceMappingURL=v-svg-drawable.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"v-svg-drawable.d.ts","sourceRoot":"","sources":["../../src/directives/v-svg-drawable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,eAAe,EAA8C,MAAM,SAAS,CAAA;AACxG,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAepC;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,CAAC,kBAAkB,EAAE,eAAe,GAAG,SAAS,CAiBnF,CAAA"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type AnimationParams, type TextSplitterParams } from "animejs";
|
|
2
|
+
import type { Directive } from "vue";
|
|
3
|
+
export interface VTextSplitValue extends TextSplitterParams {
|
|
4
|
+
animation?: AnimationParams;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Declarative text-split directive. Splits the element's text into chars, words, or lines on
|
|
8
|
+
* mount, and optionally animates the resulting spans. Re-creates on binding change, reverts on unmount.
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* <p v-text-split="{ words: true, animation: { translateY: [20, 0], opacity: [0, 1], delay: stagger(60) } }">Hello</p>
|
|
12
|
+
* <p v-text-split="{ chars: true, animation: { opacity: [0, 1], delay: stagger(30) } }">Hello</p>
|
|
13
|
+
* <p v-text-split="{ lines: true, animation: { translateX: [-20, 0], delay: stagger(100) } }">Hello</p>
|
|
14
|
+
*/
|
|
15
|
+
export declare const vTextSplit: Directive<HTMLElement, VTextSplitValue | undefined>;
|
|
16
|
+
//# sourceMappingURL=v-text-split.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"v-text-split.d.ts","sourceRoot":"","sources":["../../src/directives/v-text-split.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,eAAe,EAGpB,KAAK,kBAAkB,EACxB,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAEpC,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAoCD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,SAAS,CAAC,WAAW,EAAE,eAAe,GAAG,SAAS,CAe1E,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type WAAPIAnimationParams } from "animejs";
|
|
2
|
+
import type { Directive } from "vue";
|
|
3
|
+
/**
|
|
4
|
+
* Declarative WAAPI animation directive. Applies an Anime.js WAAPI animation to the element on
|
|
5
|
+
* mount, re-creates it when the binding value changes, and reverts it on unmount.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* <div v-waapi="{ translateX: 250, duration: 800 }" />
|
|
9
|
+
* <div v-waapi="reactiveOptions" />
|
|
10
|
+
*/
|
|
11
|
+
export declare const vWaapi: Directive<HTMLElement, WAAPIAnimationParams>;
|
|
12
|
+
//# sourceMappingURL=v-waapi.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"v-waapi.d.ts","sourceRoot":"","sources":["../../src/directives/v-waapi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,oBAAoB,EAAuB,MAAM,SAAS,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AASpC;;;;;;;GAOG;AACH,eAAO,MAAM,MAAM,EAAE,SAAS,CAAC,WAAW,EAAE,oBAAoB,CAiC/D,CAAA"}
|
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}}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;
|
|
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
|