docs(directives): reorganize directives and update docs

playground/app.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { vTextAnimate, vAos } from "../src/runtime/directives";
 import { ref, useBakedTransition, useGsap } from "#imports";
 
 const hi = ref<HTMLElement>();

src/runtime/baked/directive.ts

@@ -1,5 +1,5 @@
-import { directiveHooks } from "@vueuse/core";
 import type { ObjectDirective } from "vue";
+import { directiveObj } from "../utils";
 
 export type DirectiveOptions<O, BO> =
  | { baked: true; options: BO }
@@ -12,10 +12,8 @@ export const defineDirective = <O, BO>({
  fn: (el: HTMLElement, options: O) => void;
  bakedFn: (el: HTMLElement, options: BO) => void;
 }): ObjectDirective<HTMLElement, DirectiveOptions<O, BO>> => {
- return {
- [directiveHooks.mounted]: (el, binding) => {
- if (!binding.value?.baked) return fn(el, binding.value.options);
- bakedFn(el, binding.value.options);
- },
- };
+ return directiveObj<DirectiveOptions<O, BO>>((el, binding) => {
+ if (!binding.value?.baked) return fn(el, binding.value.options);
+ bakedFn(el, binding.value.options);
+ });
 };

src/runtime/functions/plugin.ts

@@ -1,98 +1,28 @@
-import { directiveHooks } from "@vueuse/core";
 import { defineNuxtPlugin } from "#app";
-import type { BakedPresets } from "#build/types/nugget";
-import type { UseBakedAnimationOptions } from "../baked";
+import { vAos, vAosBaked, vAosBakedAnimate } from "./use-animate-on-scroll";
+import { vFromTo, vFromToBaked, vFromToBakedAnimate } from "./use-gsap";
 import {
- type UseBakedAnimateOnScrollOptions,
- useBakedAnimateOnScroll,
- vAos,
-} from "./use-animate-on-scroll";
-import { useBakedFromTo, vFromTo } from "./use-gsap";
-import {
- type UseBakedSplitTextAnimationOptions,
- useBakedSplitTextAnimation,
  vTextAnimate,
+ vTextAnimateBaked,
+ vTextAnimateBakedChars,
+ vTextAnimateBakedLines,
+ vTextAnimateBakedWords,
 } from "./use-split-text-animation";
 
-type BakedPresetsArray = (keyof {
- [P in keyof BakedPresets as
- | P
- | (BakedPresets[P] extends infer V
- ? V extends string
- ? `${P}:${V}`
- : never
- : never)]: true;
-})[];
-
-const transformBakedArrayToObject = <const T extends BakedPresetsArray>(v: T) =>
- Object.fromEntries(
- v.map((val) => {
- const [key, value] = val.split(":");
- return [key, value === undefined ? true : value];
- }),
- ) as {
- [P in T[number] as P extends `${infer K}:${string}`
- ? K
- : P]: P extends `${string}:${infer V}` ? V : true;
- };
-
 export default defineNuxtPlugin((nuxt) => {
  const app = nuxt.vueApp;
 
  app.directive("text-animate", vTextAnimate);
-
- app.directive<HTMLElement, UseBakedSplitTextAnimationOptions>(
- "text-animate-baked",
- {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedSplitTextAnimation(el, binding.value);
- },
- },
- );
-
- for (const splitBy of ["lines", "words", "chars"] as const) {
- app.directive<HTMLElement, BakedPresetsArray>(
- `text-animate-baked-${splitBy}`,
- {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedSplitTextAnimation(el, {
- splitBy,
- animationOptions: transformBakedArrayToObject(binding.value),
- });
- },
- },
- );
- }
+ app.directive("text-animate-baked", vTextAnimateBaked);
+ app.directive("text-animate-baked-lines", vTextAnimateBakedLines);
+ app.directive("text-animate-baked-words", vTextAnimateBakedWords);
+ app.directive("text-animate-baked-chars", vTextAnimateBakedChars);
 
  app.directive("aos", vAos);
-
- app.directive<HTMLElement, UseBakedAnimateOnScrollOptions>("aos-baked", {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedAnimateOnScroll(el, binding.value);
- },
- });
-
- app.directive<HTMLElement, BakedPresetsArray>("aos-baked-animate", {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedAnimateOnScroll(el, {
- animationOptions: transformBakedArrayToObject(binding.value),
- });
- },
- });
+ app.directive("aos-baked", vAosBaked);
+ app.directive("aos-baked-animate", vAosBakedAnimate);
 
  app.directive("from-to", vFromTo);
-
- app.directive<HTMLElement, UseBakedAnimationOptions>("from-to-baked", {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedFromTo(el, binding.value);
- },
- });
-
- app.directive<HTMLElement, BakedPresetsArray>("from-to-baked-animate", {
- [directiveHooks.mounted]: (el, binding) => {
- useBakedFromTo(el, {
- animationOptions: transformBakedArrayToObject(binding.value),
- });
- },
- });
+ app.directive("from-to-baked", vFromToBaked);
+ app.directive("from-to-baked-animate", vFromToBakedAnimate);
 });

src/runtime/functions/use-animate-on-scroll/README.md

@@ -30,7 +30,7 @@ Can also be imported as `vAos`.
 ```vue
 <div
  v-aos="{
- options: { from: { x: 0 }, to: { x: 10 } },
+ options: { tweens: { x: [0, 10] } },
  }"
 />
 ```
@@ -41,7 +41,21 @@ Can also be imported as `vAos`.
 <div
  v-aos="{
  baked: true,
- options: { translate: true, scale: true },
+ options: {
+ animationOptions: { translate: true, scale: true },
+ },
  }"
 />
 ```
+
+```vue
+<div
+ v-aos-baked="{
+ animationOptions: { translate: true, scale: true },
+ }"
+/>
+```
+
+```vue
+<div v-aos-baked-animate="['translate', 'scale:out']" />
+```

src/runtime/functions/use-animate-on-scroll/directive.ts

@@ -1,7 +1,27 @@
-import { useAnimateOnScroll, useBakedAnimateOnScroll } from ".";
+import {
+ type UseBakedAnimateOnScrollOptions,
+ useAnimateOnScroll,
+ useBakedAnimateOnScroll,
+} from ".";
 import { defineDirective } from "../../baked";
+import type { BakedPresetsArray } from "../../types";
+import { directiveObj, transformBakedArrayToObject } from "../../utils";
 
 export const vAos = defineDirective({
  fn: useAnimateOnScroll,
  bakedFn: useBakedAnimateOnScroll,
 });
+
+export const vAosBaked = directiveObj<UseBakedAnimateOnScrollOptions>(
+ (el, binding) => {
+ useBakedAnimateOnScroll(el, binding.value);
+ },
+);
+
+export const vAosBakedAnimate = directiveObj<BakedPresetsArray>(
+ (el, binding) => {
+ useBakedAnimateOnScroll(el, {
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+);

src/runtime/functions/use-gsap/README.md

@@ -52,7 +52,7 @@ Can also be imported as `vFromTo`.
 ```vue
 <div
  v-from-to="{
- options: { from: { x: 0 }, to: { x: 10 } },
+ options: { x: [0, 10] },
  }"
 />
 ```
@@ -63,11 +63,26 @@ Can also be imported as `vFromTo`.
 <div
  v-from-to="{
  baked: true,
- options: { translate: true, scale: true },
+ options: {
+ animationOptions: { translate: true, scale: true },
+ },
  }"
 />
 ```
 
+```vue
+<div
+ v-from-to-baked="{
+ animationOptions: { translate: true, scale: true },
+ }"
+/>
+```
+
+```vue
+<div v-from-to-baked-animate="['translate', 'scale:out']" />
+```
+
+
 ## Example
 
 ```ts

src/runtime/functions/use-gsap/directive.ts

@@ -2,6 +2,8 @@ import { directiveHooks } from "@vueuse/core";
 import type { ObjectDirective } from "vue";
 import { type UseGsapReturn, useBakedFromTo, useGsap } from ".";
 import type { DirectiveOptions, UseBakedAnimationOptions } from "../../baked";
+import type { BakedPresetsArray } from "../../types";
+import { directiveObj, transformBakedArrayToObject } from "../../utils";
 
 export const vFromTo: ObjectDirective<
  HTMLElement,
@@ -18,3 +20,17 @@ export const vFromTo: ObjectDirective<
  useBakedFromTo(el, binding.value.options);
  },
 };
+
+export const vFromToBaked = directiveObj<UseBakedAnimationOptions>(
+ (el, binding) => {
+ useBakedFromTo(el, binding.value);
+ },
+);
+
+export const vFromToBakedAnimate = directiveObj<BakedPresetsArray>(
+ (el, binding) => {
+ useBakedFromTo(el, {
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+);

src/runtime/functions/use-split-text-animation/README.md

@@ -19,22 +19,23 @@ With [`baked`](../baked) animations.
 
 ```ts
 const container = ref<HTMLElement>();
-useBakedSplitTextAnimation(container, { translate: true, opacity: true });
+useBakedSplitTextAnimation(container, {
+ animationOptions: { translate: true, opacity: true },
+});
 ```
 
 ## Directive
 
-Can also be imported as `vSplitAnimate`.
+Can also be imported as `vTextAnimate`.
 
 ### Unbaked
 
 ```vue
 <div
- v-split-animate="{
+ v-text-animate="{
  options: {
  splitBy: 'lines',
- from: { x: 0 },
- to: { x: 10 },
+ tweens: { x: [0, 10] },
  },
  }"
 />
@@ -44,7 +45,7 @@ Can also be imported as `vSplitAnimate`.
 
 ```vue
 <div
- v-split-animate="{
+ v-text-animate="{
  baked: true,
  options: {
  splitBy: 'lines',
@@ -53,3 +54,18 @@ Can also be imported as `vSplitAnimate`.
  }"
 />
 ```
+
+```vue
+<div
+ v-text-animate-baked="{
+ splitBy: 'lines',
+ animationOptions: { translate: true, scale: true },
+ }"
+/>
+```
+
+```vue
+<div v-text-animate-baked-lines="['translate', 'scale:out']" />
+```
+
+

src/runtime/functions/use-split-text-animation/directive.ts

@@ -1,7 +1,45 @@
-import { useBakedSplitTextAnimation, useSplitTextAnimation } from ".";
+import {
+ type UseBakedSplitTextAnimationOptions,
+ useBakedSplitTextAnimation,
+ useSplitTextAnimation,
+} from ".";
 import { defineDirective } from "../../baked";
+import type { BakedPresetsArray } from "../../types";
+import { directiveObj, transformBakedArrayToObject } from "../../utils";
 
 export const vTextAnimate = defineDirective({
  fn: useSplitTextAnimation,
  bakedFn: useBakedSplitTextAnimation,
 });
+
+export const vTextAnimateBaked =
+ directiveObj<UseBakedSplitTextAnimationOptions>((el, binding) => {
+ useBakedSplitTextAnimation(el, binding.value);
+ });
+
+export const vTextAnimateBakedLines = directiveObj<BakedPresetsArray>(
+ (el, binding) => {
+ useBakedSplitTextAnimation(el, {
+ splitBy: "lines",
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+);
+
+export const vTextAnimateBakedWords = directiveObj<BakedPresetsArray>(
+ (el, binding) => {
+ useBakedSplitTextAnimation(el, {
+ splitBy: "words",
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+);
+
+export const vTextAnimateBakedChars = directiveObj<BakedPresetsArray>(
+ (el, binding) => {
+ useBakedSplitTextAnimation(el, {
+ splitBy: "chars",
+ animationOptions: transformBakedArrayToObject(binding.value),
+ });
+ },
+);

src/runtime/types.ts

@@ -1,4 +1,5 @@
 import "gsap";
+import type { AnimationOptions } from "./baked/types";
 
 export type Direction = "bottom" | "top" | "left" | "right";
 type EaseFunction =
@@ -78,3 +79,13 @@ export type PresetsGeneric = Record<
  [x: string]: FromToTweens;
  }>
 >;
+
+export type BakedPresetsArray = (keyof {
+ [P in keyof AnimationOptions as
+ | P
+ | (AnimationOptions[P] extends infer V
+ ? V extends string
+ ? `${P}:${V}`
+ : never
+ : never)]: true;
+})[];