nanime 0.0.3

package/README.md

@@ -0,0 +1,94 @@
+# nanime
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+This module provides a set of SSR safe composables and components to make it easier
+to use [AnimeJS](https://animejs.com/) in your Nuxt application.
+
+- [✨  Release Notes](/CHANGELOG.md)
+<!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
+<!-- - [📖 &nbsp;Documentation](https://example.com) -->
+
+## Features
+
+- Help to integrate animejs into your project without the need for much boilerplate codes
+- SSR Safe components like `useAnimate`, `useWaapiAnimate`, ..etc
+- Provides a set of transition components created with the `waapi` utility
+- Doesn't include predefined animation settings other than `animejs` defaults
+- Zero-config setup needed
+
+## Quick Setup
+
+### Installation with `nuxt module` command
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxt module add nanime
+```
+
+### Manual install
+
+```bash
+npm install nanime
+```
+
+Then add the module to the `modules` section of your `nuxt.config.ts`:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nanime'],
+  nanime: { ... },
+})
+```
+
+That's it! You can now use the module in your application
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/my-module
+
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -0,0 +1,14 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    /** Add composables for animejs */
+    composables: boolean;
+    /** Add custom transition components */
+    components: boolean;
+    /** Prefix for components */
+    prefix: string;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nanime",
+  "configKey": "nanime",
+  "compatibility": {
+    "nuxt": ">=3.13.5 <5.0.0"
+  },
+  "version": "0.0.3",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,56 @@
+import { defineNuxtModule, createResolver, addVitePlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+
+const __name = "nanime";
+const __configKey = "nanime";
+const module$1 = defineNuxtModule({
+  meta: {
+    name: __name,
+    configKey: __configKey,
+    compatibility: {
+      nuxt: ">=3.13.5 <5.0.0"
+    }
+  },
+  defaults: {
+    composables: true,
+    components: true,
+    prefix: "A"
+  },
+  setup(_options, _nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addVitePlugin(() => ({
+      name: "__optimize-deps",
+      config(config) {
+        config.optimizeDeps ||= {};
+        config.optimizeDeps.include ||= [];
+        config.optimizeDeps.include.push(
+          "animejs",
+          "animejs/animatable",
+          "@vueuse/core",
+          "animejs/animation",
+          "animejs/utils",
+          "lodash-es",
+          "animejs/waapi",
+          "tailwind-merge",
+          "animejs/layout",
+          "animejs/text"
+        );
+      }
+    }));
+    if (_options.components) {
+      addComponentsDir({
+        prefix: _options.prefix,
+        path: resolver.resolve("./runtime/app/components"),
+        global: true
+      });
+    }
+    if (_options.composables) {
+      addImportsDir(resolver.resolve("./runtime/app/composables"));
+    }
+    _nuxt.options.alias[`#${__configKey}`] = resolver.resolve("./runtime/app/composables");
+    _nuxt.options.alias[`#${__configKey}/components`] = resolver.resolve("./runtime/app/components");
+    _nuxt.options.alias[`#${__configKey}/utils`] = resolver.resolve("./runtime/app/utils/index");
+    _nuxt.options.alias[`#${__configKey}/easings`] = resolver.resolve("./runtime/app/utils/easings");
+  }
+});
+
+export { module$1 as default };

package/dist/runtime/app/components/transition/Scale.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/transition/Scale.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <Transition>
+    <slot />
+  </Transition>
+</template>

package/dist/runtime/app/components/transition/Scale.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/transition/Slide.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/transition/Slide.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { TransitionGroup, Transition } from "vue";
+import { isStandardEase, isWaapiEase } from "./types";
+import { animate, utils, waapi } from "animejs";
+import { nextTick, unref, useAnimeLayout, useTemplateRef, computed } from "#imports";
+import { normalizeAxis, normalizeDuration, normalizeOffset } from "../../utils/transitions/normalizers";
+const props = defineProps({
+  duration: { type: [Number, Array, Object], required: false, default: () => ({
+    enter: 300,
+    leave: 300
+  }) },
+  delay: { type: [Number, Array, Object], required: false },
+  noOpacity: { type: Boolean, required: false, default: false },
+  tag: { type: null, required: false, default: "div" },
+  group: { type: Boolean, required: false, skipCheck: true },
+  useWaapi: { type: Boolean, required: false, default: true },
+  ease: { type: null, required: false, default: "out" },
+  layoutOptions: { type: null, required: false },
+  animateOptions: { type: null, required: false },
+  mode: { type: null, required: false, default: "out-in" },
+  axis: { type: String, required: false },
+  offset: { type: null, required: false, default: "-20%" }
+});
+const delays = computed(() => normalizeDuration(props.delay));
+const durations = computed(() => normalizeDuration(props.duration));
+const offsets = computed(() => normalizeOffset(props.offset));
+const axis = computed(() => normalizeAxis(props.axis));
+const isGrouped = computed(() => props.group ?? false);
+const groupWrapper = useTemplateRef("group-wrapper");
+const groupWrapperRef = computed(() => isGrouped.value ? unref(groupWrapper) : null);
+const layoutOptions = computed(() => {
+  const ease = isStandardEase(props) ? props.ease : void 0;
+  const easeString = typeof ease === "string" ? ease : void 0;
+  const layoutOptions2 = "layoutOptions" in props && props.layoutOptions;
+  return {
+    ...layoutOptions2,
+    enterFrom: {
+      delay: delays.value.enter,
+      duration: durations.value.enter,
+      ...axis.value.enter === "y" && { transform: `translateY(${offsets.value.enter}) scale(0.95)` },
+      ...axis.value.enter === "x" && { transform: `translateX(${offsets.value.enter}) scale(0.95)` },
+      ...!props.noOpacity && { opacity: 0 },
+      ...easeString && { ease: easeString }
+    },
+    leaveTo: {
+      delay: delays.value.leave,
+      duration: durations.value.leave,
+      ...axis.value.leave === "y" && { transform: `translateY(${offsets.value.leave}) scale(0.95)` },
+      ...axis.value.leave === "x" && { transform: `translateX(${offsets.value.leave}) scale(0.95)` },
+      ...!props.noOpacity && { opacity: 0 },
+      ...easeString && { ease: easeString }
+    }
+  };
+});
+const layoutAnimation = useAnimeLayout(groupWrapperRef, layoutOptions);
+const onChangeComplete = (callback = () => {
+}) => {
+  layoutAnimation.animate(props.animateOptions, () => {
+    callback();
+    nextTick(() => {
+      layoutAnimation.revert();
+    });
+  });
+};
+function onEnter(el, done) {
+  const sharedEnterOptions = {
+    delay: delays.value.enter,
+    duration: durations.value.enter
+  };
+  if (props.useWaapi && !props.group) {
+    const ease = isWaapiEase(props) ? props.ease : void 0;
+    waapi.animate(el, {
+      ...sharedEnterOptions,
+      ...axis.value.enter === "y" && { y: { from: offsets.value.enter } },
+      ...axis.value.enter === "x" && { x: { from: offsets.value.enter } },
+      ...!props.noOpacity && { opacity: { from: 0 } },
+      ...ease && { ease },
+      onComplete: done
+    });
+  } else if (!props.group) {
+    const ease = isStandardEase(props) ? props.ease : void 0;
+    utils.set(el, {
+      ...axis.value.enter === "y" && { y: offsets.value.enter },
+      ...axis.value.enter === "x" && { x: offsets.value.enter },
+      ...!props.noOpacity && { opacity: 0 }
+    });
+    animate(el, {
+      ...sharedEnterOptions,
+      ...axis.value.enter === "y" && { y: { to: 0 } },
+      ...axis.value.enter === "x" && { x: { to: 0 } },
+      ...!props.noOpacity && { opacity: { to: 1 } },
+      ...ease && { ease },
+      onComplete: done
+    });
+  } else {
+    done();
+  }
+}
+function onLeave(el, done) {
+  const sharedLeaveOptions = {
+    delay: delays.value.leave,
+    duration: durations.value.leave,
+    ...axis.value.leave === "y" && { y: { to: offsets.value.leave } },
+    ...axis.value.leave === "x" && { x: { to: offsets.value.leave } },
+    ...!props.noOpacity && { opacity: { to: 0 } }
+  };
+  if (props.useWaapi && !props.group) {
+    const ease = isWaapiEase(props) ? props.ease : void 0;
+    waapi.animate(el, {
+      ...sharedLeaveOptions,
+      ...ease && { ease },
+      onComplete: done
+    });
+  } else if (!props.group) {
+    const ease = isStandardEase(props) ? props.ease : void 0;
+    animate(el, {
+      ...sharedLeaveOptions,
+      ...ease && { ease },
+      onComplete: done
+    });
+  } else {
+    el.style.display = "none";
+    onChangeComplete(() => {
+      el.style.display = "";
+      done();
+    });
+  }
+}
+</script>
+
+<template>
+  <component
+    :is="isGrouped ? TransitionGroup : Transition"
+    :ref="isGrouped ? 'group-wrapper' : void 0"
+    :mode="!isGrouped ? props.mode : void 0"
+    :tag="isGrouped ? props.tag : void 0"
+    @before-enter="isGrouped && layoutAnimation.record()"
+    @enter="onEnter"
+    @after-enter="() => onChangeComplete()"
+    @before-leave="isGrouped && layoutAnimation.record()"
+    @leave="onLeave"
+  >
+    <slot />
+  </component>
+</template>

package/dist/runtime/app/components/transition/Slide.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import("vue").PublicProps>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/transition/types.d.ts

@@ -0,0 +1,44 @@
+import type { AutoLayoutParams, EasingParam, LayoutAnimationParams, WAAPIEasingParam } from 'animejs';
+import type { VueInstance } from '@vueuse/core';
+import type { BaseTransitionProps } from 'vue';
+import type { TransitionDurationInput } from '../../utils/transitions/types.js';
+type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type SharedTransitionProps = {
+    duration?: TransitionDurationInput;
+    delay?: TransitionDurationInput;
+    noOpacity?: boolean;
+    tag?: keyof HTMLElementTagNameMap | HTMLElement | VueInstance;
+} & ({
+    /**
+     * Constraint 1 & 2:
+     * When group is true, useWaapi MUST be false.
+     * Layout/Animate options are available.
+     */
+    group: true;
+    useWaapi?: false;
+    ease?: EasingParam;
+    layoutOptions?: Prettify<Omit<AutoLayoutParams, 'leaveTo' | 'enterFrom'>>;
+    animateOptions?: LayoutAnimationParams;
+    mode?: never;
+} | {
+    /**
+     * When group is false/undefined:
+     * useWaapi can be a boolean variable.
+     * Layout/Animate options are strictly disabled.
+     */
+    group?: false | undefined;
+    useWaapi?: boolean;
+    ease?: WAAPIEasingParam | EasingParam;
+    mode?: BaseTransitionProps['mode'];
+    layoutOptions?: never;
+    animateOptions?: never;
+});
+export declare const isWaapiEase: (properties: SharedTransitionProps) => properties is SharedTransitionProps & {
+    ease?: WAAPIEasingParam;
+};
+export declare const isStandardEase: (properties: SharedTransitionProps) => properties is SharedTransitionProps & {
+    ease?: EasingParam;
+};
+export {};

package/dist/runtime/app/components/transition/types.js

@@ -0,0 +1,6 @@
+export const isWaapiEase = (properties) => {
+  return properties.useWaapi === true && !properties.group;
+};
+export const isStandardEase = (properties) => {
+  return properties.useWaapi === false || properties.group === true;
+};

package/dist/runtime/app/composables/useAnimatable.d.ts

@@ -0,0 +1,4 @@
+import { type MaybeRefOrGetter } from '#imports';
+import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
+import type { AnimatableObject, AnimatableParams } from 'animejs';
+export declare function useAnimatable(target: Parameters<typeof normalizeAnimeTarget>[0], options?: MaybeRefOrGetter<AnimatableParams>): AnimatableObject;

package/dist/runtime/app/composables/useAnimatable.js

@@ -0,0 +1,21 @@
+import { createAnimatable } from "animejs/animatable";
+import { tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { shallowReactive, toValue, watchEffect } from "#imports";
+import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
+export function useAnimatable(target, options) {
+  const mounted = useMounted();
+  const animatable = shallowReactive(createAnimatable({}, {}));
+  let oldTarget;
+  watchEffect(() => {
+    if (!mounted.value) return;
+    const targets = normalizeAnimeTarget(target);
+    if (oldTarget === targets) return;
+    oldTarget = targets;
+    const newAnimatable = createAnimatable(targets, toValue(options) || {});
+    Object.assign(animatable, newAnimatable);
+  });
+  tryOnScopeDispose(() => {
+    animatable.revert();
+  });
+  return animatable;
+}

package/dist/runtime/app/composables/useAnimate.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRefOrGetter } from '#imports';
+import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
+import type { AnimationParams } from 'animejs';
+import { type JSAnimation } from 'animejs/animation';
+export declare function useAnimate(target: Parameters<typeof normalizeAnimeTarget>[0], options?: MaybeRefOrGetter<AnimationParams>): JSAnimation;

package/dist/runtime/app/composables/useAnimate.js

@@ -0,0 +1,22 @@
+import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { shallowRef, toValue, watchEffect } from "#imports";
+import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
+import { animate } from "animejs/animation";
+export function useAnimate(target, options) {
+  const mounted = useMounted();
+  const animation = shallowRef(animate({}, {}));
+  let oldTarget;
+  watchEffect(() => {
+    if (!mounted.value) return;
+    const targets = normalizeAnimeTarget(target);
+    if (oldTarget === targets) return;
+    if (animation.value) animation.value.revert();
+    oldTarget = targets;
+    const newAnimation = animate(targets, toValue(options) || {});
+    animation.value = newAnimation;
+  });
+  tryOnScopeDispose(() => {
+    animation.value?.revert();
+  });
+  return toReactive(animation);
+}

package/dist/runtime/app/composables/useLayout.d.ts

@@ -0,0 +1,9 @@
+import { type MaybeRef, type MaybeRefOrGetter } from '#imports';
+import { type AutoLayoutParams, type LayoutAnimationParams } from 'animejs/layout';
+import { normalizeLayoutTarget } from '../utils/normalize-targets.js';
+export declare function useAnimeLayout(target: MaybeRef<Parameters<typeof normalizeLayoutTarget>[0]>, options?: MaybeRefOrGetter<AutoLayoutParams>): {
+    properties: import("vue").ComputedRef<import("../utils/extract-props.js").NonFunctionProperties<import("animejs").AutoLayout> | undefined>;
+    record: () => import("animejs").AutoLayout | undefined;
+    revert: () => import("animejs").AutoLayout | undefined;
+    animate: (options?: LayoutAnimationParams, cb?: () => void) => void | import("animejs").Timeline;
+};

package/dist/runtime/app/composables/useLayout.js

@@ -0,0 +1,34 @@
+import { computed, shallowRef, toValue, watchEffect } from "#imports";
+import { createLayout } from "animejs/layout";
+import { normalizeLayoutTarget } from "../utils/normalize-targets.js";
+import { extractNonFunctionProperties } from "../utils/extract-props.js";
+import { tryOnScopeDispose, useMounted } from "@vueuse/core";
+export function useAnimeLayout(target, options) {
+  const mounted = useMounted();
+  const layout = shallowRef(null);
+  watchEffect(() => {
+    if (!mounted.value) return;
+    const wrapper = normalizeLayoutTarget(toValue(target));
+    if (!wrapper) return;
+    const newLayout = createLayout(wrapper, toValue(options) || {});
+    layout.value = newLayout;
+  });
+  tryOnScopeDispose(() => {
+    layout.value?.revert();
+    layout.value = null;
+  });
+  return {
+    properties: computed(() => layout.value ? extractNonFunctionProperties(layout.value) : void 0),
+    record: () => layout.value?.record(),
+    revert: () => layout.value?.revert(),
+    animate: (options2, cb) => {
+      const animation = layout.value?.animate(options2 || {});
+      if (!animation && cb) return cb();
+      if (!animation) return;
+      animation.play();
+      animation.then(() => cb?.());
+      if (animation.completed) return cb?.();
+      return animation;
+    }
+  };
+}

package/dist/runtime/app/composables/useSplitText.d.ts

@@ -0,0 +1,50 @@
+import { type MaybeRef, type MaybeRefOrGetter } from '#imports';
+import { splitText, type TextSplitter } from 'animejs/text';
+import { normalizeSplitTextTarget } from '../utils/normalize-targets.js';
+export declare function useSplitText(target: MaybeRef<Parameters<typeof normalizeSplitTextTarget>[0]>, parameters?: MaybeRefOrGetter<Parameters<typeof splitText>[1]>): {
+    lines: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
+    words: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
+    chars: import("vue").ShallowRef<HTMLElement[], HTMLElement[]>;
+    properties: import("vue").ComputedRef<import("../utils/extract-props.js").NonFunctionProperties<{
+        debug: boolean;
+        includeSpaces: boolean;
+        accessible: boolean;
+        linesOnly: boolean;
+        lineTemplate: string | false | import("animejs").SplitFunctionValue;
+        wordTemplate: string | false | import("animejs").SplitFunctionValue;
+        charTemplate: string | false | import("animejs").SplitFunctionValue;
+        $target: HTMLElement;
+        html: string;
+        lines: any[];
+        words: any[];
+        chars: any[];
+        effects: any[];
+        effectsCleanups: any[];
+        cache: string;
+        ready: boolean;
+        width: number;
+        resizeTimeout: {
+            close: () => NodeJS.Timeout;
+            hasRef: () => boolean;
+            ref: () => NodeJS.Timeout;
+            refresh: () => NodeJS.Timeout;
+            unref: () => NodeJS.Timeout;
+            _onTimeout: (...args: any[]) => void;
+            [Symbol.toPrimitive]: () => number;
+            [Symbol.dispose]: () => void;
+        };
+        resizeObserver: {
+            disconnect: () => void;
+            observe: (target: Element, options?: ResizeObserverOptions) => void;
+            unobserve: (target: Element) => void;
+        };
+        addEffect: (effect: (...args: any[]) => import("animejs").Tickable | (() => void)) => void | TextSplitter;
+        revert: () => TextSplitter;
+        splitNode: (node: Node) => void;
+        split: (clearCache?: boolean) => TextSplitter;
+        refresh: () => void;
+    }> | undefined>;
+    revert: () => TextSplitter | undefined;
+    split: () => TextSplitter | undefined;
+    refresh: () => void | undefined;
+};

package/dist/runtime/app/composables/useSplitText.js

@@ -0,0 +1,48 @@
+import { computed, nextTick, ref, shallowRef, toValue, watchEffect } from "#imports";
+import { splitText } from "animejs/text";
+import { normalizeSplitTextTarget } from "../utils/normalize-targets.js";
+import { extractNonFunctionProperties } from "../utils/extract-props.js";
+import { tryOnScopeDispose, useMounted } from "@vueuse/core";
+export function useSplitText(target, parameters) {
+  const mounted = useMounted();
+  const splitter = ref(null);
+  const lines = shallowRef([]);
+  const words = shallowRef([]);
+  const chars = shallowRef([]);
+  const syncArrays = () => {
+    if (!splitter.value) return;
+    lines.value = [...splitter.value.lines];
+    words.value = [...splitter.value.words];
+    chars.value = [...splitter.value.chars];
+  };
+  watchEffect(() => {
+    if (!mounted.value) return;
+    const element = normalizeSplitTextTarget(toValue(target));
+    if (!element) return;
+    if (splitter.value) splitter.value.revert();
+    const newSplitter = splitText(element, toValue(parameters));
+    splitter.value = newSplitter;
+    newSplitter.addEffect(() => {
+      syncArrays();
+      return () => {
+      };
+    });
+    nextTick(syncArrays);
+  });
+  tryOnScopeDispose(() => {
+    splitter.value?.revert();
+    splitter.value = null;
+    lines.value = [];
+    words.value = [];
+    chars.value = [];
+  });
+  return {
+    lines,
+    words,
+    chars,
+    properties: computed(() => splitter.value ? extractNonFunctionProperties(splitter.value) : void 0),
+    revert: () => splitter.value?.revert(),
+    split: () => splitter.value?.split(),
+    refresh: () => splitter.value?.refresh()
+  };
+}

package/dist/runtime/app/composables/useWaapiAnimate.d.ts

@@ -0,0 +1,5 @@
+import { type MaybeRefOrGetter } from '#imports';
+import type { WAAPIAnimationParams } from 'animejs';
+import { normalizeWaapiAnimeTarget } from '../utils/normalize-targets.js';
+import { type WAAPIAnimation } from 'animejs/waapi';
+export declare function useWaapiAnimate(target: Parameters<typeof normalizeWaapiAnimeTarget>[0], options?: MaybeRefOrGetter<WAAPIAnimationParams>): WAAPIAnimation;

package/dist/runtime/app/composables/useWaapiAnimate.js

@@ -0,0 +1,19 @@
+import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { shallowRef, toValue, watchEffect } from "#imports";
+import { normalizeWaapiAnimeTarget } from "../utils/normalize-targets.js";
+import { waapi } from "animejs/waapi";
+export function useWaapiAnimate(target, options) {
+  const mounted = useMounted();
+  const animation = shallowRef(waapi.animate([], {}));
+  watchEffect(() => {
+    const targets = normalizeWaapiAnimeTarget(target);
+    if (!mounted.value || !targets) return;
+    if (animation.value) animation.value.revert();
+    const newAnimation = waapi.animate(targets, toValue(options) || {});
+    animation.value = newAnimation;
+  });
+  tryOnScopeDispose(() => {
+    animation.value?.revert();
+  });
+  return toReactive(animation);
+}

package/dist/runtime/app/utils/easings.d.ts

@@ -0,0 +1 @@
+export * from 'animejs/easings';

package/dist/runtime/app/utils/easings.js

@@ -0,0 +1 @@
+export * from "animejs/easings";

package/dist/runtime/app/utils/extract-props.d.ts

@@ -0,0 +1,6 @@
+type NonFunctionKeys<T> = {
+    [K in keyof T]: T[K] extends Function ? never : K;
+}[keyof T];
+export type NonFunctionProperties<T> = Pick<T, NonFunctionKeys<T>>;
+export declare function extractNonFunctionProperties<T extends object>(obj: T): NonFunctionProperties<T>;
+export {};

package/dist/runtime/app/utils/extract-props.js

@@ -0,0 +1,13 @@
+export function extractNonFunctionProperties(obj) {
+  if (!obj || typeof obj !== "object") return {};
+  const result = {};
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      const value = obj[key];
+      if (typeof value !== "function") {
+        result[key] = value;
+      }
+    }
+  }
+  return result;
+}

package/dist/runtime/app/utils/index.d.ts

@@ -0,0 +1 @@
+export * from 'animejs/utils';

package/dist/runtime/app/utils/index.js

@@ -0,0 +1 @@
+export * from "animejs/utils";

package/dist/runtime/app/utils/normalize-targets.d.ts

@@ -0,0 +1,14 @@
+import { type MaybeRef } from '#imports';
+import type { MaybeElementRef, VueInstance } from '@vueuse/core';
+import type { TargetsParam, DOMTargetsParam, DOMTargetSelector } from 'animejs';
+type WaapiElementTargets = VueInstance | HTMLElement | HTMLElement[] | SVGElement | SVGElement[] | NodeList | string | null;
+type WaapiTargets = MaybeRef<WaapiElementTargets> | MaybeRef<WaapiElementTargets>[];
+export declare function normalizeWaapiAnimeTarget(target: WaapiTargets): DOMTargetsParam | null;
+type AnimeTargets = TargetsParam | MaybeElementRef | MaybeElementRef[];
+export declare function normalizeAnimeTarget(target: AnimeTargets): TargetsParam;
+type AnimeLayoutTargets = DOMTargetSelector | MaybeElementRef<HTMLElement | VueInstance> | null | undefined;
+export declare function normalizeLayoutTarget(target: AnimeLayoutTargets): DOMTargetSelector | null;
+type SplitTargets = HTMLElement | string;
+type SplitTextTargets = SplitTargets | MaybeElementRef<HTMLElement> | null | undefined | MaybeElementRef<VueInstance>;
+export declare function normalizeSplitTextTarget(target: SplitTextTargets): SplitTargets | null;
+export {};

package/dist/runtime/app/utils/normalize-targets.js

@@ -0,0 +1,44 @@
+import { isReactive, toValue } from "#imports";
+function isVueInstance(value) {
+  return value !== null && typeof value === "object" && "$el" in value;
+}
+export function normalizeWaapiAnimeTarget(target) {
+  const resolved = toValue(target);
+  if (!resolved) return null;
+  if (isVueInstance(resolved)) {
+    return resolved.$el;
+  }
+  if (Array.isArray(resolved)) {
+    const targets = resolved.map((t) => normalizeWaapiAnimeTarget(t)).filter((t) => t !== null).flat();
+    return targets.length ? targets : null;
+  }
+  return resolved;
+}
+export function normalizeAnimeTarget(target) {
+  const resolved = isReactive(target) ? target : toValue(target);
+  if (!resolved) return [];
+  if (isVueInstance(resolved)) {
+    return resolved.$el;
+  }
+  if (Array.isArray(resolved)) {
+    const targets = resolved.map((t) => normalizeAnimeTarget(t)).filter((t) => t !== null && (Array.isArray(t) ? t.length > 0 : true)).flat();
+    return targets;
+  }
+  return resolved;
+}
+export function normalizeLayoutTarget(target) {
+  const resolved = toValue(target);
+  if (!resolved) return null;
+  if (isVueInstance(resolved)) {
+    return resolved.$el;
+  }
+  return resolved;
+}
+export function normalizeSplitTextTarget(target) {
+  const resolved = toValue(target);
+  if (!resolved) return null;
+  if (isVueInstance(resolved)) {
+    return resolved.$el;
+  }
+  return resolved;
+}

package/dist/runtime/app/utils/transitions/normalizers/index.d.ts

@@ -0,0 +1,3 @@
+export { normalizeAxis } from './normalize-axis.js';
+export { normalizeDuration } from './normalize-duration.js';
+export { normalizeOffset } from './normalize-offsets.js';

package/dist/runtime/app/utils/transitions/normalizers/index.js

@@ -0,0 +1,3 @@
+export { normalizeAxis } from "./normalize-axis.js";
+export { normalizeDuration } from "./normalize-duration.js";
+export { normalizeOffset } from "./normalize-offsets.js";

package/dist/runtime/app/utils/transitions/normalizers/normalize-axis.d.ts

@@ -0,0 +1,2 @@
+import type { AxisInput, AxisOutput } from '../types.js';
+export declare function normalizeAxis(axis?: AxisInput): AxisOutput;

package/dist/runtime/app/utils/transitions/normalizers/normalize-axis.js

@@ -0,0 +1,12 @@
+export function normalizeAxis(axis) {
+  if (axis === void 0) {
+    return { enter: "y", leave: "y" };
+  }
+  if (typeof axis === "string") {
+    return { enter: axis, leave: axis };
+  }
+  if (Array.isArray(axis)) {
+    return { enter: axis[0], leave: axis[1] };
+  }
+  return axis;
+}

package/dist/runtime/app/utils/transitions/normalizers/normalize-duration.d.ts

@@ -0,0 +1,2 @@
+import type { TransitionDurationInput, DurationOutput } from '../types.js';
+export declare function normalizeDuration(duration?: TransitionDurationInput): DurationOutput;

package/dist/runtime/app/utils/transitions/normalizers/normalize-duration.js

@@ -0,0 +1,12 @@
+export function normalizeDuration(duration) {
+  if (duration === void 0) {
+    return { enter: 300, leave: 300 };
+  }
+  if (typeof duration === "number") {
+    return { enter: duration, leave: duration };
+  }
+  if (Array.isArray(duration)) {
+    return { enter: duration[0], leave: duration[1] };
+  }
+  return duration;
+}

package/dist/runtime/app/utils/transitions/normalizers/normalize-offsets.d.ts

@@ -0,0 +1,2 @@
+import type { OffsetOutput, TransitionOffsetInput } from '../types.js';
+export declare function normalizeOffset(offset?: TransitionOffsetInput): OffsetOutput;

package/dist/runtime/app/utils/transitions/normalizers/normalize-offsets.js

@@ -0,0 +1,23 @@
+function validateOffsetValue(value) {
+  if (typeof value !== "string") return;
+  if (value.endsWith("px") || value.endsWith("%")) return;
+  if (/^-?\d+$/.test(value)) return;
+  throw new Error(`Invalid offset value: "${value}". Offset strings must end with "px" or "%", or be a plain number.`);
+}
+export function normalizeOffset(offset) {
+  if (offset === void 0) {
+    return { enter: 0, leave: 0 };
+  }
+  if (typeof offset === "number" || typeof offset === "string") {
+    validateOffsetValue(offset);
+    return { enter: offset, leave: offset };
+  }
+  if (Array.isArray(offset)) {
+    validateOffsetValue(offset[0]);
+    validateOffsetValue(offset[1]);
+    return { enter: offset[0], leave: offset[1] };
+  }
+  validateOffsetValue(offset.enter);
+  validateOffsetValue(offset.leave);
+  return offset;
+}

package/dist/runtime/app/utils/transitions/types.d.ts

@@ -0,0 +1,31 @@
+/** Duration types */
+export type DurationOutput = {
+    enter: number;
+    leave: number;
+};
+export type TransitionDurationInput = number | [number, number] | {
+    enter: number;
+    leave: number;
+};
+/** Axis types */
+type Axis = 'x' | 'y';
+export type AxisInput = Axis | [Axis, Axis] | {
+    enter: Axis;
+    leave: Axis;
+};
+export type AxisOutput = {
+    enter: Axis;
+    leave: Axis;
+};
+/** Offset types */
+type PropertyValue = 'px' | '%';
+type OffsetInput = `${number}` | `-${number}` | `${number}${PropertyValue}` | `-${number}${PropertyValue}`;
+export type OffsetOutput = {
+    enter: OffsetInput | number;
+    leave: OffsetInput | number;
+};
+export type TransitionOffsetInput = OffsetInput | number | [OffsetInput | number, OffsetInput | number] | {
+    enter: OffsetInput | number;
+    leave: OffsetInput | number;
+};
+export {};

package/dist/runtime/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.server.json",
+}

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "nanime",
+  "version": "0.0.3",
+  "description": "Nuxt module for animejs integration and transitions",
+  "repository": "https://github.com/astraldev/nanime",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
+    }
+  },
+  "main": "./dist/module.mjs",
+  "typesVersions": {
+    "*": {
+      ".": [
+        "./dist/types.d.mts"
+      ]
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "postinstall": "lefthook install",
+    "prepack": "nuxt-module-build build",
+    "dev": "npm run dev:prepare && nuxt dev playground",
+    "dev:build": "nuxt build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
+    "clean": "rm -rf playground/.nuxt docs/.nuxt playground/.output docs/.output .nuxt"
+  },
+  "dependencies": {
+    "@vueuse/core": "^14.1.0",
+    "animejs": "^4.3.5",
+    "defu": "^6.1.4",
+    "vue": "^3.5.27"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^3.1.1",
+    "@nuxt/eslint-config": "^1.13.0",
+    "@nuxt/kit": "^4.3.0",
+    "@nuxt/module-builder": "^1.0.2",
+    "@nuxt/schema": "^4.3.0",
+    "@nuxt/test-utils": "^3.23.0",
+    "@types/node": "latest",
+    "@vue/test-utils": "^2.4.6",
+    "@vueuse/nuxt": "14.1.0",
+    "changelogen": "^0.6.2",
+    "eslint": "^9.39.2",
+    "happy-dom": "^20.4.0",
+    "lefthook": "^2.0.16",
+    "nuxt": "^4.3.0",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.18",
+    "vue-tsc": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
+}