diff --git a/assets/menu/menu.json b/assets/menu/menu.json index 6f2c8ec60..ab7e6b654 100644 --- a/assets/menu/menu.json +++ b/assets/menu/menu.json @@ -414,8 +414,8 @@ "to": "/progressspinner" }, { - "name": "Animate", - "to": "/animate" + "name": "AnimateOnScroll", + "to": "/animateonscroll" }, { "name": "Ripple", diff --git a/components/lib/animate/Animate.d.ts b/components/lib/animate/Animate.d.ts deleted file mode 100644 index e308755d0..000000000 --- a/components/lib/animate/Animate.d.ts +++ /dev/null @@ -1,87 +0,0 @@ -/** - * - * Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load. - * - * [Live Demo](https://primevue.org/animate) - * - * @module animate - */ -import { DirectiveBinding, ObjectDirective } from 'vue'; -import { DirectiveHooks } from '../basedirective/BaseDirective'; -import { PassThroughOptions } from '../passthrough'; -import { PassThrough } from '../ts-helpers'; - -/** - * Defines options of Animate. - */ -export interface AnimateOptions { - /** - * Animate scroll to add when item begins to get displayed. - */ - enterClass?: string | undefined; - /** - * Animate scroll to add when item begins to get hidden. - */ - leaveClass?: string | undefined; - /** - * Used to pass attributes to DOM elements inside the component. - * @type {AnimateDirectivePassThroughOptions} - */ - pt?: PassThrough; - /** - * Used to configure passthrough(pt) options of the component. - * @type {PassThroughOptions} - */ - ptOptions?: PassThroughOptions; -} - -/** - * Custom passthrough(pt) directive options. - */ -export interface AnimateDirectivePassThroughOptions { - /** - * Used to manage all lifecycle hooks - * @see {@link BaseDirective.DirectiveHooks} - */ - hooks?: DirectiveHooks; -} - -/** - * Defines modifiers of Animate. - */ -export interface AnimateDirectiveModifiers { - /** - * Whether the animation will be repeated - * @defaultValue true - */ - once?: boolean | undefined; -} - -/** - * Binding of Animate directive. - */ -export interface AnimateDirectiveBinding extends Omit { - /** - * Value of the Animate. - */ - value?: AnimateOptions | undefined; - /** - * Modifiers of the tooltip. - * @type {AnimateDirectiveModifiers} - */ - modifiers?: AnimateDirectiveModifiers | undefined; -} - -/** - * **PrimeVue - Animate** - * - * _Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load._ - * - * [Live Demo](https://www.primevue.org/animate/) - * --- --- - * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png) - * - */ -declare const Animate: ObjectDirective; - -export default Animate; diff --git a/components/lib/animate/BaseAnimate.js b/components/lib/animate/BaseAnimate.js deleted file mode 100644 index a985c36de..000000000 --- a/components/lib/animate/BaseAnimate.js +++ /dev/null @@ -1,5 +0,0 @@ -import BaseDirective from 'primevue/basedirective'; - -const BaseAnimate = BaseDirective.extend({}); - -export default BaseAnimate; diff --git a/components/lib/animate/package.json b/components/lib/animate/package.json deleted file mode 100644 index a49c07a6f..000000000 --- a/components/lib/animate/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./animate.cjs.js", - "module": "./animate.esm.js", - "unpkg": "./animate.min.js", - "types": "./Animate.d.ts" -} \ No newline at end of file diff --git a/components/lib/animate/style/AnimateStyle.d.ts b/components/lib/animate/style/AnimateStyle.d.ts deleted file mode 100644 index f9f10ff0b..000000000 --- a/components/lib/animate/style/AnimateStyle.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { BaseStyle } from '../../base/style/BaseStyle'; - -export interface AnimateStyle extends BaseStyle {} diff --git a/components/lib/animate/style/package.json b/components/lib/animate/style/package.json deleted file mode 100644 index 4d25084ab..000000000 --- a/components/lib/animate/style/package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "main": "./animatestyle.cjs.js", - "module": "./animatestyle.esm.js", - "unpkg": "./animatestyle.min.js", - "types": "./AnimateStyle.d.ts" -} \ No newline at end of file diff --git a/components/lib/animateonscroll/AnimateOnScroll.d.ts b/components/lib/animateonscroll/AnimateOnScroll.d.ts new file mode 100644 index 000000000..1592a66fd --- /dev/null +++ b/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; + /** + * 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 { + /** + * 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; diff --git a/components/lib/animate/Animate.js b/components/lib/animateonscroll/AnimateOnScroll.js similarity index 88% rename from components/lib/animate/Animate.js rename to components/lib/animateonscroll/AnimateOnScroll.js index 36ce83217..513c9216d 100644 --- a/components/lib/animate/Animate.js +++ b/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; diff --git a/components/lib/animateonscroll/BaseAnimateOnScroll.js b/components/lib/animateonscroll/BaseAnimateOnScroll.js new file mode 100644 index 000000000..3f34f4580 --- /dev/null +++ b/components/lib/animateonscroll/BaseAnimateOnScroll.js @@ -0,0 +1,5 @@ +import BaseDirective from 'primevue/basedirective'; + +const BaseAnimateOnScroll = BaseDirective.extend({}); + +export default BaseAnimateOnScroll; diff --git a/components/lib/animateonscroll/package.json b/components/lib/animateonscroll/package.json new file mode 100644 index 000000000..4e37a971a --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/components/lib/animateonscroll/style/AnimateOnScrollStyle.d.ts b/components/lib/animateonscroll/style/AnimateOnScrollStyle.d.ts new file mode 100644 index 000000000..975c432a7 --- /dev/null +++ b/components/lib/animateonscroll/style/AnimateOnScrollStyle.d.ts @@ -0,0 +1,3 @@ +import { BaseStyle } from '../../base/style/BaseStyle'; + +export interface AnimateOnScrollStyle extends BaseStyle {} diff --git a/components/lib/animate/style/AnimateStyle.js b/components/lib/animateonscroll/style/AnimateOnScrollStyle.js similarity index 100% rename from components/lib/animate/style/AnimateStyle.js rename to components/lib/animateonscroll/style/AnimateOnScrollStyle.js diff --git a/components/lib/animateonscroll/style/package.json b/components/lib/animateonscroll/style/package.json new file mode 100644 index 000000000..6d93469b1 --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index e17d8727b..7f466e1a3 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/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; diff --git a/modules/nuxt-primevue/runtime/core/directives/index.js b/modules/nuxt-primevue/runtime/core/directives/index.js index 3cbd3eb55..fa5e90bef 100644 --- a/modules/nuxt-primevue/runtime/core/directives/index.js +++ b/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' } ]; diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js index 2e272cc65..b1a980d9c 100644 --- a/nuxt-vite.config.js +++ b/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'), diff --git a/rollup.config.js b/rollup.config.js index 633aff497..8e0db2036 100644 --- a/rollup.config.js +++ b/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',