Fixed #4682 - Animate directive renamed as AnimateOnScroll

assets/menu/menu.json

@@ -414,8 +414,8 @@
                             "to": "/progressspinner"
                         },
                         {
-                            "name": "Animate",
-                            "to": "/animate"
+                            "name": "AnimateOnScroll",
+                            "to": "/animateonscroll"
                         },
                         {
                             "name": "Ripple",

components/lib/animateonscroll/AnimateOnScroll.d.ts

@@ -0,0 +1,87 @@
+/**
+ *
+ *  AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
+ *
+ * [Live Demo](https://primevue.org/animateonscroll)
+ *
+ * @module animateonscroll
+ */
+import { DirectiveBinding, ObjectDirective } from 'vue';
+import { DirectiveHooks } from '../basedirective/BaseDirective';
+import { PassThroughOptions } from '../passthrough';
+import { PassThrough } from '../ts-helpers';
+
+/**
+ * Defines options of AnimateOnScroll.
+ */
+export interface AnimateOnScrollOptions {
+    /**
+     * AnimateOnScroll scroll to add when item begins to get displayed.
+     */
+    enterClass?: string | undefined;
+    /**
+     * AnimateOnScroll scroll to add when item begins to get hidden.
+     */
+    leaveClass?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {AnimateOnScrollDirectivePassThroughOptions}
+     */
+    pt?: PassThrough<AnimateOnScrollDirectivePassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) directive options.
+ */
+export interface AnimateOnScrollDirectivePassThroughOptions {
+    /**
+     * Used to manage all lifecycle hooks
+     * @see {@link BaseDirective.DirectiveHooks}
+     */
+    hooks?: DirectiveHooks;
+}
+
+/**
+ * Defines modifiers of AnimateOnScroll.
+ */
+export interface AnimateOnScrollDirectiveModifiers {
+    /**
+     * Whether the animation will be repeated
+     *  @defaultValue true
+     */
+    once?: boolean | undefined;
+}
+
+/**
+ * Binding of AnimateOnScroll directive.
+ */
+export interface AnimateOnScrollDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
+    /**
+     * Value of the AnimateOnScroll.
+     */
+    value?: AnimateOnScrollOptions | undefined;
+    /**
+     * Modifiers of the tooltip.
+     * @type {AnimateOnScrollDirectiveModifiers}
+     */
+    modifiers?: AnimateOnScrollDirectiveModifiers | undefined;
+}
+
+/**
+ * **PrimeVue - AnimateOnScroll**
+ *
+ * _AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load._
+ *
+ * [Live Demo](https://www.primevue.org/animateonscroll/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ */
+declare const AnimateOnScroll: ObjectDirective;
+
+export default AnimateOnScroll;

components/lib/animate/Animate.js → components/lib/animateonscroll/AnimateOnScroll.js

@@ -1,9 +1,9 @@
 import { DomHandler } from 'primevue/utils';
-import BaseAnimate from './BaseAnimate';
+import BaseAnimateOnScroll from './BaseAnimateOnScroll';
 
-const Animate = BaseAnimate.extend('animate', {
+const AnimateOnScroll = BaseAnimateOnScroll.extend('animateonscroll', {
     mounted(el, binding) {
-        el.setAttribute('data-pd-animate', true);
+        el.setAttribute('data-pd-animateonscroll', true);
         !this.isUnstyled() && DomHandler.addClass(el, 'p-animate');
 
         this.bindIntersectionObserver(el, binding);
@@ -57,4 +57,4 @@ const Animate = BaseAnimate.extend('animate', {
     }
 });
 
-export default Animate;
+export default AnimateOnScroll;

components/lib/animateonscroll/BaseAnimateOnScroll.js

@@ -0,0 +1,5 @@
+import BaseDirective from 'primevue/basedirective';
+
+const BaseAnimateOnScroll = BaseDirective.extend({});
+
+export default BaseAnimateOnScroll;

components/lib/animateonscroll/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./animateonscroll.cjs.js",
+    "module": "./animateonscroll.esm.js",
+    "unpkg": "./animateonscroll.min.js",
+    "types": "./AnimateOnScroll.d.ts"
+}

components/lib/animateonscroll/style/AnimateOnScrollStyle.d.ts

@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface AnimateOnScrollStyle extends BaseStyle {}

components/lib/animateonscroll/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "./animateonscrollstyle.cjs.js",
+    "module": "./animateonscrollstyle.esm.js",
+    "unpkg": "./animateonscrollstyle.min.js",
+    "types": "./AnimateOnScrollStyle.d.ts"
+}

components/lib/config/PrimeVue.d.ts

@@ -1,7 +1,7 @@
 import { Plugin } from 'vue';
 import { AccordionPassThroughOptions } from '../accordion';
 import { AccordionTabPassThroughOptions } from '../accordiontab';
-import { AnimateDirectivePassThroughOptions } from '../animate';
+import { AnimateOnScrollDirectivePassThroughOptions } from '../animateonscroll';
 import { AutoCompletePassThroughOptions } from '../autocomplete';
 import { AvatarPassThroughOptions } from '../avatar';
 import { AvatarGroupPassThroughOptions } from '../avatargroup';
@@ -219,7 +219,7 @@ export interface PrimeVuePTOptions {
         styleclass?: StyleClassDirectivePassThroughOptions;
         focustrap?: FocusTrapDirectivePassThroughOptions;
         ripple?: RippleDirectivePassThroughOptions;
-        animate?: AnimateDirectivePassThroughOptions;
+        animate?: AnimateOnScrollDirectivePassThroughOptions;
     };
     global?: {
         css?: (options: any) => string | string | undefined;

modules/nuxt-primevue/runtime/core/directives/index.js

@@ -4,5 +4,5 @@ export const directives = [
     { name: 'ripple', as: 'Ripple', from: 'primevue/ripple' },
     { name: 'styleclass', as: 'StyleClass', from: 'primevue/styleclass' },
     { name: 'focustrap', as: 'FocusTrap', from: 'primevue/focustrap' },
-    { name: 'animate', as: 'Animate', from: 'primevue/animate' }
+    { name: 'animateonscroll', as: 'AnimateOnScroll', from: 'primevue/animateonscroll' }
 ];

nuxt-vite.config.js

@@ -7,6 +7,7 @@ const STYLE_ALIAS = {
     'primevue/basecomponent/style': path.resolve(__dirname, './components/lib/basecomponent/style/BaseComponentStyle.js'),
     'primevue/accordion/style': path.resolve(__dirname, './components/lib/accordion/style/AccordionStyle.js'),
     'primevue/accordiontab/style': path.resolve(__dirname, './components/lib/accordiontab/style/AccordionTabStyle.js'),
+    'primevue/animateonscroll/style': path.resolve(__dirname, './components/lib/animateonscroll/style/AnimateOnScrollStyle.js'),
     'primevue/autocomplete/style': path.resolve(__dirname, './components/lib/autocomplete/style/AutoCompleteStyle.js'),
     'primevue/avatar/style': path.resolve(__dirname, './components/lib/avatar/style/AvatarStyle.js'),
     'primevue/avatargroup/style': path.resolve(__dirname, './components/lib/avatargroup/style/AvatarGroupStyle.js'),

rollup.config.js

@@ -69,7 +69,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/basecomponent/style': 'primevue.basecomponent.style',
     'primevue/accordion/style': 'primevue.accordion.style',
     'primevue/accordiontab/style': 'primevue.accordiontab.style',
-    'primevue/animate/style': 'primevue.animate.style',
+    'primevue/animateonscroll/style': 'primevue.animateonscroll.style',
     'primevue/autocomplete/style': 'primevue.autocomplete.style',
     'primevue/avatar/style': 'primevue.avatar.style',
     'primevue/avatargroup/style': 'primevue.avatargroup.style',