@juleshry/vue-animejs 1.0.0 → 1.1.0

package/README.md

@@ -2,9 +2,15 @@
   <img src="./docs/src/public/icon-animated.svg" alt="vue-animejs" width="120" />
 
   <h1 align="center">vue-animejs</h1>
-  <p align="center">Vue 3 composables for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
-  <p align="center"><a href="https://vue-animejs.juleshry.dev">📖 Documentation</a></p>
-  <p align="center"><a href="https://app.netlify.com/projects/vue-animejs/deploys"><img src="https://api.netlify.com/api/v1/badges/8017f5b4-47b7-45e4-a5d6-269d638a71ab/deploy-status" alt="Netlify Status" style="vertical-align: middle" /></a>&nbsp;&nbsp;<a href="https://ko-fi.com/C7O720SP29"><img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="ko-fi" style="vertical-align: middle" /></a></p>
+  <p align="center">Vue 3 composables and directives for <a href="https://animejs.com/">Anime.js</a> v4 — reactive animations that integrate naturally with Vue's reactivity system and component lifecycle.</p>
+  <p align="center">
+    <a href="https://www.npmjs.com/package/@juleshry/vue-animejs"><img src="https://img.shields.io/npm/v/%40juleshry%2Fvue-animejs?label=npm&color=a1b858" alt="npm version" /></a>
+    <a href="https://www.npmjs.com/package/@juleshry/vue-animejs"><img src="https://img.shields.io/npm/dm/%40juleshry%2Fvue-animejs?color=50a36f" alt="npm downloads" /></a>
+    <a href="https://vue-animejs.juleshry.dev"><img src="https://img.shields.io/badge/docs%20%26%20demos-vue--animejs-4fc08d" alt="docs & demos" /></a>
+    <a href="https://github.com/juleshry/vue-animejs"><img src="https://img.shields.io/github/stars/juleshry/vue-animejs?style=flat&color=yellow" alt="GitHub stars" /></a>
+  </p>
+  <p align="center"><a href="https://app.netlify.com/projects/vue-animejs/deploys"><img src="https://api.netlify.com/api/v1/badges/8017f5b4-47b7-45e4-a5d6-269d638a71ab/deploy-status" alt="Netlify Status" /></a></p>
+  <p align="center"><a href="https://ko-fi.com/C7O720SP29"><img src="https://ko-fi.com/img/githubbutton_sm.svg" alt="ko-fi" /></a></p>
 </div>
 
 ## 🚀 Overview
@@ -63,7 +69,7 @@ useAnimate(el, { translateX: 250, duration: 800 })
 - Anime.js 4+
 - @vueuse/core 14+
 
-## 🦄 Composables
+## 🦄 Composables & Directives
 
 | Composable       | Description                                       |
 |------------------|---------------------------------------------------|
@@ -80,306 +86,15 @@ useAnimate(el, { translateX: 250, duration: 800 })
 | `useSvgDrawable` | Animate SVG stroke drawing with the `draw` property |
 | `useText`        | Split text into animatable lines, words, and chars |
 
-## 🚀 Usage
-
-### `useAnimate`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useAnimate } from '@juleshry/vue-animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-const { play, pause } = useAnimate(el, {
-  translateX: 250,
-  duration: 800,
-  easing: 'easeInOutQuad',
-})
-</script>
-
-<template>
-  <div ref="el" />
-  <button @click="play">Play</button>
-  <button @click="pause">Pause</button>
-</template>
-```
-
-### `useTimer`
-
-```vue
-<script setup lang="ts">
-import { useTimer } from '@juleshry/vue-animejs'
-
-const { play, pause } = useTimer({
-  duration: 3000,
-  onUpdate: (self) => console.log(self.currentTime),
-})
-</script>
-```
-
-### `useTimeline`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useTimeline } from '@juleshry/vue-animejs'
-
-const box = useTemplateRef<HTMLElement>('box')
-
-const { add, play } = useTimeline({ loop: true })
-
-add(box, { translateX: 100 })
-add(box, { translateY: 50 }, '+=200')
-play()
-</script>
-```
-
-### `useRawAnimate`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useRawAnimate } from '@juleshry/vue-animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-// Returns the raw Anime.js JSAnimation instance directly
-const animation = useRawAnimate(el, { translateX: 250, duration: 800 })
-</script>
-
-<template>
-  <div ref="el" />
-</template>
-```
-
-### `useAnimatable`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useAnimatable } from '@juleshry/vue-animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-const { animatable } = useAnimatable(el, {
-  x: 0,
-  opacity: 1,
-})
-</script>
-```
-
-### `useWaapi`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useWaapi } from '@juleshry/vue-animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-const { play, pause } = useWaapi(el, {
-  translateX: 250,
-  duration: 800,
-  easing: 'easeInOutQuad',
-})
-</script>
-
-<template>
-  <div ref="el" />
-  <button @click="play">Play</button>
-  <button @click="pause">Pause</button>
-</template>
-```
-
-### `useSvg`
-
-> **Note:** `morphTo` requires a live DOM element. Add each target as a hidden `<path>`, pass the ref directly to `morphTo`, and wrap in a `computed` — `useTimeline.add()` accepts `MaybeRef<AnimationParams>` and resolves the computed after mount, when the target elements are available.
-
-```vue
-<script setup lang="ts">
-import { computed, useTemplateRef } from 'vue'
-import { useSvg, useTimeline } from '@juleshry/vue-animejs'
-
-const shape = useTemplateRef<SVGPathElement>('shape')
-const t_circle = useTemplateRef<SVGPathElement>('t-circle')
-const t_diamond = useTemplateRef<SVGPathElement>('t-diamond')
-
-const { morphTo } = useSvg()
-
-const { add } = useTimeline({
-  loop: true,
-  defaults: { duration: 1200, easing: 'easeInOutCubic' },
-  loopDelay: 500,
-})
-
-add(shape, computed(() => ({ d: morphTo(t_circle) })))
-  .add(shape, computed(() => ({ d: morphTo(t_diamond) })), '+=500')
-</script>
-
-<template>
-  <svg viewBox="0 0 100 100">
-    <path ref="shape" d="M 50 15 C 78 8, 95 28, 90 52 C 85 76, 68 90, 50 88 C 32 90, 15 76, 10 52 C 5 28, 22 8, 50 15 Z" />
-    <path ref="t-circle" d="M 50 10 C 72 10, 90 28, 90 50 C 90 72, 72 90, 50 90 C 28 90, 10 72, 10 50 C 10 28, 28 10, 50 10 Z" visibility="hidden" />
-    <path ref="t-diamond" d="M 50 5 C 54 32, 68 32, 95 50 C 68 68, 54 68, 50 95 C 46 68, 32 68, 5 50 C 32 32, 46 32, 50 5 Z" visibility="hidden" />
-  </svg>
-</template>
-```
-
-### `useSvgDrawable`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useAnimate, useSvgDrawable } from '@juleshry/vue-animejs'
-
-const circle_el = useTemplateRef<SVGCircleElement>('circle')
-
-const { drawable } = useSvgDrawable(circle_el)
-
-// draw values are normalised: 0 = hidden, 1 = fully drawn
-useAnimate(drawable, {
-  draw: ['0 0', '0.5 1', '0 1'],
-  duration: 1200,
-  easing: 'easeInOutQuad',
-})
-</script>
-
-<template>
-  <svg viewBox="0 0 100 100">
-    <circle ref="circle" cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-width="4" />
-  </svg>
-</template>
-```
-
-### `useDraggable`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useDraggable } from '@juleshry/vue-animejs'
+**Directives** — declarative alternatives for element-bound animations:
 
-const el = useTemplateRef<HTMLElement>('el')
-
-const { disable, enable } = useDraggable(el, {
-  onGrab: () => console.log('grabbed'),
-  onDrag: () => console.log('dragging'),
-  onRelease: () => console.log('released'),
-})
-</script>
-
-<template>
-  <div ref="el" />
-  <button @click="disable">Disable</button>
-  <button @click="enable">Enable</button>
-</template>
-```
-
-### `useLayout`
-
-> **Note:** Vue's DOM updates are asynchronous. Use `await nextTick()` between the state change and `animate()` so Anime.js reads the updated positions.
-
-```vue
-<script setup lang="ts">
-import { nextTick, ref, useTemplateRef } from 'vue'
-import { useLayout } from '@juleshry/vue-animejs'
-
-const list = useTemplateRef<HTMLElement>('list')
-const { record, animate } = useLayout(list, {})
-
-const items = ref([1, 2, 3, 4, 5])
-
-async function shuffle() {
-  record()
-  items.value = [...items.value].sort(() => Math.random() - 0.5)
-  await nextTick()
-  animate({ duration: 600 })
-}
-</script>
-
-<template>
-  <ul ref="list">
-    <li v-for="item in items" :key="item">{{ item }}</li>
-  </ul>
-  <button @click="shuffle">Shuffle</button>
-</template>
-```
+| Directive    | Description                                      |
+|--------------|--------------------------------------------------|
+| `v-animate`  | Animate an element declaratively via template attribute |
 
-When you mutate the DOM directly with `classList.toggle`, the change is synchronous — no `nextTick` needed:
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useLayout } from '@juleshry/vue-animejs'
-
-const container = useTemplateRef<HTMLElement>('container')
-const { update } = useLayout(container, {})
-
-function toggleLayout() {
-  update(() => {
-    container.value!.classList.toggle('grid')
-  }, { duration: 600 })
-}
-</script>
-
-<template>
-  <div ref="container" class="grid">
-    <div v-for="i in 6" :key="i" class="item" />
-  </div>
-  <button @click="toggleLayout">Toggle layout</button>
-</template>
-```
-
-### `useScope`
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useAnimate, useScope } from '@juleshry/vue-animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-const { add, revert } = useScope({ mediaQuery: '(prefers-reduced-motion: no-preference)' })
-
-// Animations added via add() are automatically reverted when the scope reverts
-// or when the component unmounts
-add(scope => {
-  useAnimate(el, { translateX: 250, duration: 800 })
-})
-</script>
-
-<template>
-  <div ref="el" />
-  <button @click="revert">Revert</button>
-</template>
-```
-
-### `useText`
-
-> **Note:** `words`, `chars`, and `lines` are `ComputedRef<HTMLElement[]>` — they populate after mount and can be passed directly to `useAnimate`.
-
-```vue
-<script setup lang="ts">
-import { useTemplateRef } from 'vue'
-import { useAnimate, useText } from '@juleshry/vue-animejs'
-import { stagger } from 'animejs'
-
-const el = useTemplateRef<HTMLElement>('el')
-
-const { words, chars } = useText(el, { words: true, chars: true })
-
-// words and chars are ComputedRef<HTMLElement[]> — pass them directly as targets
-useAnimate(words, {
-  y: ['100%', '0%'],
-  duration: 600,
-  delay: stagger(50),
-})
-</script>
+## 🚀 Usage
 
-<template>
-  <p ref="el">Hello, world!</p>
-</template>
-```
+For full API docs and live demos, see **[the doc here](https://vue-animejs.juleshry.dev)**.
 
 ## 👨‍🚀 Contributors
 
@@ -399,9 +114,7 @@ See the [Contributing Guide](./CONTRIBUTING.md).
 ## 🗺️ TODO
 
 - [ ] Allow reactive refs inside option objects
-- [ ] Finish doc website
 - [ ] Add components
-- [ ] Add directives
 
 ## 📄 License
 

package/dist/composables/use-scope.d.ts

@@ -1,8 +1,8 @@
 import { type Scope, type ScopeMethod, type ScopeParams, type Tickable } from "animejs";
-import { type DeepReadonly, type MaybeRef, type ShallowRef } from "vue";
+import { type MaybeRef, type ShallowRef } from "vue";
 export interface UseScopeReturn {
     /** The underlying Anime.js `Scope` instance. */
-    scope: DeepReadonly<ShallowRef<Scope>>;
+    scope: Readonly<ShallowRef<Scope | undefined>>;
     /** Registers an anonymous method on the scope. Queued automatically if called before mount. */
     add: (method: ScopeMethod) => void;
     /** Registers a named method on the scope so it can be called via `scope.methods[name]()`. Queued automatically if called before mount. */

package/dist/composables/use-scope.d.ts.map

@@ -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,EACL,KAAK,YAAY,EAEjB,KAAK,QAAQ,EAEb,KAAK,UAAU,EAIhB,MAAM,KAAK,CAAA;AAEZ,MAAM,WAAW,cAAc;IAC7B,gDAAgD;IAChD,KAAK,EAAE,YAAY,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAA;IACtC,+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,CAyEtE"}
+{"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,EAAS,KAAK,QAAQ,EAAmB,KAAK,UAAU,EAA4B,MAAM,KAAK,CAAA;AAEtG,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"}

package/dist/directives/v-animate.d.ts

@@ -0,0 +1,12 @@
+import { type AnimationParams } from "animejs";
+import type { Directive } from "vue";
+/**
+ * Declarative animation directive. Applies an Anime.js animation to the element on mount,
+ * re-creates it when the binding value changes, and reverts it on unmount.
+ *
+ * @example
+ * <div v-animate="{ translateX: 250, duration: 800 }" />
+ * <div v-animate="reactiveOptions" />
+ */
+export declare const vAnimate: Directive<HTMLElement, AnimationParams>;
+//# sourceMappingURL=v-animate.d.ts.map

package/dist/directives/v-animate.d.ts.map

@@ -0,0 +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"}

package/dist/directives/v-draggable.d.ts

@@ -0,0 +1,12 @@
+import { type DraggableParams } from "animejs";
+import type { Directive } from "vue";
+/**
+ * Declarative draggable directive. Makes the element draggable on mount,
+ * re-creates it when the binding value changes, and reverts it on unmount.
+ *
+ * @example
+ * <div v-draggable />
+ * <div v-draggable="{ snap: [0, 100] }" />
+ */
+export declare const vDraggable: Directive<HTMLElement, DraggableParams | undefined>;
+//# sourceMappingURL=v-draggable.d.ts.map

package/dist/directives/v-draggable.d.ts.map

@@ -0,0 +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"}

package/dist/directives/v-svg-drawable.d.ts

@@ -0,0 +1,13 @@
+import { type AnimationParams } from "animejs";
+import type { Directive } from "vue";
+/**
+ * Declarative SVG drawable directive. Wraps the SVG geometry element in an Anime.js drawable
+ * Proxy and animates the `draw` property on mount. Re-creates it when the binding value changes
+ * and reverts on unmount.
+ *
+ * @example
+ * <path v-svg-drawable="{ draw: '0 1', duration: 1200 }" />
+ * <path v-svg-drawable="{ draw: ['0 0', '0.5 1', '0 1'], ease: 'inOutQuad', loop: true }" />
+ */
+export declare const vSvgDrawable: Directive<SVGGeometryElement, AnimationParams | undefined>;
+//# sourceMappingURL=v-svg-drawable.d.ts.map

package/dist/directives/v-svg-drawable.d.ts.map

@@ -0,0 +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"}

package/dist/directives/v-text-split.d.ts

@@ -0,0 +1,16 @@
+import { type AnimationParams, type TextSplitterParams } from "animejs";
+import type { Directive } from "vue";
+export interface VTextSplitValue extends TextSplitterParams {
+    animation?: AnimationParams;
+}
+/**
+ * Declarative text-split directive. Splits the element's text into chars, words, or lines on
+ * mount, and optionally animates the resulting spans. Re-creates on binding change, reverts on unmount.
+ *
+ * @example
+ * <p v-text-split="{ words: true, animation: { translateY: [20, 0], opacity: [0, 1], delay: stagger(60) } }">Hello</p>
+ * <p v-text-split="{ chars: true, animation: { opacity: [0, 1], delay: stagger(30) } }">Hello</p>
+ * <p v-text-split="{ lines: true, animation: { translateX: [-20, 0], delay: stagger(100) } }">Hello</p>
+ */
+export declare const vTextSplit: Directive<HTMLElement, VTextSplitValue | undefined>;
+//# sourceMappingURL=v-text-split.d.ts.map

package/dist/directives/v-text-split.d.ts.map

@@ -0,0 +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"}

package/dist/directives/v-waapi.d.ts

@@ -0,0 +1,12 @@
+import { type WAAPIAnimationParams } from "animejs";
+import type { Directive } from "vue";
+/**
+ * Declarative WAAPI animation directive. Applies an Anime.js WAAPI animation to the element on
+ * mount, re-creates it when the binding value changes, and reverts it on unmount.
+ *
+ * @example
+ * <div v-waapi="{ translateX: 250, duration: 800 }" />
+ * <div v-waapi="reactiveOptions" />
+ */
+export declare const vWaapi: Directive<HTMLElement, WAAPIAnimationParams>;
+//# sourceMappingURL=v-waapi.d.ts.map

package/dist/directives/v-waapi.d.ts.map

@@ -0,0 +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

@@ -1,2 +1,2 @@
-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)((0,t.createScope)((0,e.unref)(r))),a=[],o=[],s=[],c=!1,l=(0,e.isRef)(r)?(0,e.watch)(r,e=>{i.value.revert(),i.value=(0,t.createScope)(e)},{flush:`post`}):void 0;(0,n.tryOnMounted)(()=>{c=!0;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,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;
+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;
 //# sourceMappingURL=index.cjs.map