nanime 0.0.4 → 0.0.5

package/README.md

@@ -4,13 +4,14 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
+[![release nanime][release-src]][release-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)
+- [📖  Documentation](https://nanimejs.netlify.app)
 <!-- - [🏀 Online playground](https://stackblitz.com/github/your-org/my-module?file=playground%2Fapp.vue) -->
-<!-- - [📖 &nbsp;Documentation](https://example.com) -->
 
 ## Features
 
@@ -81,14 +82,17 @@ That's it! You can now use the module in your application
 
 
 <!-- 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-version-src]: https://img.shields.io/npm/v/nanime/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/nanime
 
-[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
+[npm-downloads-src]: https://img.shields.io/npm/dm/nanime.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npm.chart.dev/nanime
 
-[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
+[license-src]: https://img.shields.io/npm/l/nanime.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/nanime
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt
 [nuxt-href]: https://nuxt.com
+
+[release-src]: https://github.com/astraldev/nanime/actions/workflows/npm-publish.yml/badge.svg
+[release-href]: https://github.com/astraldev/nanime/actions/workflows/npm-publish.yml

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.13.5 <5.0.0"
   },
-  "version": "0.0.4",
+  "version": "0.0.5",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -46,11 +46,10 @@ const module$1 = defineNuxtModule({
     if (_options.composables) {
       addImportsDir(resolver.resolve("./runtime/app/composables"));
     }
-    _nuxt.options.alias[`#${__configKey}`] = resolver.resolve("./runtime/app/composables");
+    _nuxt.options.alias[`#${__configKey}/composables`] = 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");
     _nuxt.options.alias[`#${__configKey}/easings`] = resolver.resolve("./runtime/app/utils/easings");
-    console.log(_nuxt.options.alias);
   }
 });
 

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

@@ -2,9 +2,7 @@ import type { AutoLayoutParams, EasingParam, LayoutAnimationParams, WAAPIEasingP
 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];
-} & {};
+import type { Prettify } from '../../utils/normalizers/prettify.js';
 export type SharedTransitionProps = {
     duration?: TransitionDurationInput;
     delay?: TransitionDurationInput;
@@ -41,4 +39,3 @@ export declare const isWaapiEase: (properties: SharedTransitionProps) => propert
 export declare const isStandardEase: (properties: SharedTransitionProps) => properties is SharedTransitionProps & {
     ease?: EasingParam;
 };
-export {};

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

@@ -1,4 +1,15 @@
-import { type MaybeRefOrGetter } from '#imports';
-import { normalizeAnimeTarget } from '../utils/normalize-targets.js';
-import type { Draggable, DraggableParams } from 'animejs';
-export declare function useDraggable(target: Parameters<typeof normalizeAnimeTarget>[0], options?: MaybeRefOrGetter<DraggableParams>): Draggable;
+import { type DraggableTypes } from '../utils/normalize-targets.js';
+import type { Draggable, DraggableAxisParam, DraggableParams } from 'animejs';
+import { type ProxyReturns } from '../utils/create-proxy.js';
+import { type MakeRefable } from '../utils/normalizers/make-reffable.js';
+import type { Prettify } from '../utils/normalizers/prettify.js';
+declare const REFFABLE_PROPS: readonly ["containerPadding", "containerFriction", "dragSpeed", "scrollSpeed", "scrollThreshold", "minVelocity", "maxVelocity", "velocityMultiplier", "snap"];
+type RefableProps = typeof REFFABLE_PROPS[number];
+type DraggableOptions = MakeRefable<Omit<DraggableParams, 'trigger' | 'container' | 'x' | 'y'> & {
+    trigger?: DraggableTypes['trigger'];
+    container?: DraggableTypes['container'];
+    x?: boolean | Prettify<MakeRefable<DraggableAxisParam, 'snap', Draggable>>;
+    y?: boolean | Prettify<MakeRefable<DraggableAxisParam, 'snap', Draggable>>;
+}, RefableProps, Draggable>;
+export declare function useDraggable(target: DraggableTypes['target'], options?: DraggableOptions): ProxyReturns<Draggable>;
+export {};

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

@@ -1,22 +1,83 @@
-import { toReactive, tryOnScopeDispose, useMounted } from "@vueuse/core";
-import { shallowRef, toValue, watchEffect } from "#imports";
-import { normalizeAnimeTarget } from "../utils/normalize-targets.js";
+import { tryOnScopeDispose, useMounted } from "@vueuse/core";
+import { nextTick, shallowRef, toValue, watch, watchPostEffect } from "#imports";
+import { normalizeAnimeTarget, normalizeDraggableContainer, normalizeLayoutTarget } from "../utils/normalize-targets.js";
 import { createDraggable } from "animejs/draggable";
+import { createProxy } from "../utils/create-proxy.js";
+import { normalizeReffable } from "../utils/normalizers/make-reffable.js";
+import defu from "defu";
+const REFFABLE_PROPS = [
+  "containerPadding",
+  "containerFriction",
+  "dragSpeed",
+  "scrollSpeed",
+  "scrollThreshold",
+  "minVelocity",
+  "maxVelocity",
+  "velocityMultiplier",
+  "snap"
+];
 export function useDraggable(target, options) {
   const mounted = useMounted();
-  const dragController = shallowRef(createDraggable({}, {}));
+  const dragController = shallowRef(null);
   let oldTarget;
-  watchEffect(() => {
-    if (!mounted.value) return;
-    const targets = normalizeAnimeTarget(target);
-    if (oldTarget === targets) return;
-    if (dragController.value) dragController.value.revert();
-    oldTarget = targets;
-    const newAnimation = createDraggable(targets, toValue(options) || {});
-    dragController.value = newAnimation;
+  watch(
+    [
+      () => target,
+      () => options?.trigger,
+      () => options?.container,
+      () => mounted.value
+    ],
+    () => {
+      if (!mounted.value) return;
+      const targets = normalizeAnimeTarget(target);
+      if (oldTarget === targets) return;
+      if (dragController.value) dragController.value.revert();
+      oldTarget = targets;
+      const trigger = normalizeLayoutTarget(toValue(options)?.trigger);
+      const container = normalizeDraggableContainer(toValue(options)?.container);
+      const resolveAxis = (axis) => {
+        if (!axis || typeof axis !== "object") return axis;
+        return defu(axis, {
+          snap: (d) => normalizeReffable(axis.snap, d)
+        });
+      };
+      const dragEngine = createDraggable(targets, {
+        ...options,
+        trigger: trigger || void 0,
+        container: container || void 0,
+        ...(() => {
+          const acc = {};
+          REFFABLE_PROPS.forEach((key) => {
+            if (!options || !(key in options)) return;
+            acc[key] = (d) => normalizeReffable(options[key], d);
+          });
+          return acc;
+        })(),
+        x: resolveAxis(options?.x),
+        y: resolveAxis(options?.y)
+      });
+      console.log("initializing");
+      dragController.value = dragEngine;
+    },
+    {
+      flush: "post"
+    }
+  );
+  watchPostEffect(() => {
+    if (!options || !dragController.value) return;
+    REFFABLE_PROPS.forEach((key) => {
+      if (key in options) toValue(options[key]);
+    });
+    if (typeof options.x === "object" && options.x !== null) {
+      toValue(options.x.snap);
+    }
+    if (typeof options.y === "object" && options.y !== null) {
+      toValue(options.y.snap);
+    }
+    nextTick(() => dragController.value?.refresh());
   });
   tryOnScopeDispose(() => {
     dragController.value?.revert();
   });
-  return toReactive(dragController);
+  return createProxy(dragController);
 }

package/dist/runtime/app/utils/create-proxy.d.ts

@@ -0,0 +1,9 @@
+import type { Ref, UnwrapNestedRefs } from 'vue';
+export type SafeFunctions<T> = {
+    [K in keyof T]: T[K] extends (...args: any[]) => any ? ((...args: Parameters<T[K]>) => ReturnType<T[K]>) | undefined : T[K];
+};
+export type ProxyReturns<T> = SafeFunctions<Exclude<UnwrapNestedRefs<T>, null | undefined>>;
+/**
+ * Converts the object to a reactive version, and stubs null / undefined values
+ */
+export declare function createProxy<T = object | null>(objectRef: Ref<T>): ProxyReturns<T>;

package/dist/runtime/app/utils/create-proxy.js

@@ -0,0 +1,37 @@
+import { unref, isRef, reactive } from "#imports";
+export function createProxy(objectRef) {
+  const proxy = new Proxy({}, {
+    get(_, p, receiver) {
+      if (!objectRef.value) return void 0;
+      return unref(Reflect.get(objectRef.value, p, receiver));
+    },
+    set(_, p, value) {
+      if (!objectRef.value) return true;
+      if (isRef(objectRef.value[p]) && !isRef(value))
+        objectRef.value[p].value = value;
+      else
+        objectRef.value[p] = value;
+      return true;
+    },
+    deleteProperty(_, p) {
+      if (!objectRef.value) return true;
+      return Reflect.deleteProperty(objectRef.value, p);
+    },
+    has(_, p) {
+      if (!objectRef.value) return true;
+      return Reflect.has(objectRef.value, p);
+    },
+    ownKeys() {
+      if (!objectRef.value) return [];
+      return Object.keys(objectRef.value);
+    },
+    getOwnPropertyDescriptor() {
+      if (!objectRef.value) return void 0;
+      return {
+        enumerable: true,
+        configurable: true
+      };
+    }
+  });
+  return reactive(proxy);
+}

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

@@ -1,14 +1,26 @@
 import { type MaybeRef } from '#imports';
 import type { MaybeElementRef, VueInstance } from '@vueuse/core';
-import type { TargetsParam, DOMTargetsParam, DOMTargetSelector } from 'animejs';
+import type { TargetsParam, DOMTargetsParam, DOMTargetSelector, DraggableParams } 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;
+type AnimeLayoutTargets = DOMTargetSelector | MaybeElementRef<HTMLElement | SVGElement | VueInstance | null> | null | undefined;
 export declare function normalizeLayoutTarget(target: AnimeLayoutTargets): DOMTargetSelector | null;
 type SplitTargets = HTMLElement | string;
 type SplitTextTargets = SplitTargets | MaybeElementRef<HTMLElement> | null | undefined | MaybeElementRef<VueInstance>;
+export type SplitTextTypes = {
+    targets: SplitTextTargets;
+};
 export declare function normalizeSplitTextTarget(target: SplitTextTargets): SplitTargets | null;
+type DraggableTargets = AnimeLayoutTargets | null;
+type DraggableTargetContainer = DraggableParams['container'] | MaybeElementRef<HTMLElement | VueInstance | null> | null | undefined;
+type DraggableTargetTrigger = DraggableParams['trigger'] | AnimeLayoutTargets;
+export type DraggableTypes = {
+    target: DraggableTargets;
+    trigger: DraggableTargetTrigger;
+    container: DraggableTargetContainer;
+};
+export declare function normalizeDraggableContainer(target: DraggableTargetContainer): DraggableParams['container'] | null | undefined;
 export {};

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

@@ -42,3 +42,14 @@ export function normalizeSplitTextTarget(target) {
   }
   return resolved;
 }
+export function normalizeDraggableContainer(target) {
+  if (typeof target === "function") {
+    return target;
+  }
+  const resolved = toValue(target);
+  if (!resolved) return null;
+  if (isVueInstance(resolved)) {
+    return resolved.$el;
+  }
+  return resolved;
+}

package/dist/runtime/app/utils/normalizers/make-reffable.d.ts

@@ -0,0 +1,6 @@
+import { type MaybeRefOrGetter } from '#imports';
+export type MaybeRefOrArgsGetter<T, Args> = MaybeRefOrGetter<T> | ((data: Args) => T);
+export type MakeRefable<T, K extends keyof T, Args> = {
+    [P in keyof T]?: P extends K ? MaybeRefOrArgsGetter<T[P], Args> : T[P];
+};
+export declare function normalizeReffable<T, Args>(value: MaybeRefOrArgsGetter<T, Args>, args?: Args): T;

package/dist/runtime/app/utils/normalizers/make-reffable.js

@@ -0,0 +1,7 @@
+import { toValue } from "#imports";
+export function normalizeReffable(value, args) {
+  if (typeof value === "function") {
+    return value(args);
+  }
+  return toValue(value);
+}

package/dist/runtime/app/utils/normalizers/prettify.d.ts

@@ -0,0 +1,3 @@
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanime",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Nuxt module for animejs integration and transitions",
   "repository": {
     "type": "git",
@@ -22,22 +22,16 @@
       ]
     }
   },
+  "publishConfig": {
+    "provenance": true
+  },
   "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"
-  },
+  "workspaces": [
+    "playground",
+    "docs"
+  ],
   "dependencies": {
     "@vueuse/core": "^14.1.0",
     "animejs": "^4.3.5",
@@ -63,5 +57,16 @@
     "vitest": "^4.0.18",
     "vue-tsc": "^3.2.4"
   },
-  "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
-}
+  "scripts": {
+    "postinstall": "lefthook install",
+    "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"
+  }
+}