From 8e302a7eb77ce321ad4be979aa635ab81a8ee318 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 13 Oct 2023 13:28:54 +0300
Subject: [PATCH] Animate directive implemented to the docs

---
 assets/menu/menu.json     |  6 +++-
 doc/animate/BasicDoc.vue  | 63 +++++++++++++++++++++++++++++++++++++++
 doc/animate/ImportDoc.vue | 20 +++++++++++++
 pages/animate/index.vue   | 27 +++++++++++++++++
 plugins/primeVue.js       |  2 ++
 5 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 doc/animate/BasicDoc.vue
 create mode 100644 doc/animate/ImportDoc.vue
 create mode 100644 pages/animate/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 0cf664996..f2edd2eee 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -403,6 +403,10 @@
                             "name": "ProgressSpinner",
                             "to": "/progressspinner"
                         },
+                        {
+                            "name": "Animate",
+                            "to": "/animate"
+                        },
                         {
                             "name": "Ripple",
                             "to": "/ripple"
@@ -582,4 +586,4 @@
             ]
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/doc/animate/BasicDoc.vue b/doc/animate/BasicDoc.vue
new file mode 100644
index 000000000..a0e840573
--- /dev/null
+++ b/doc/animate/BasicDoc.vue
@@ -0,0 +1,63 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Animate uses PrimeFlex animations, however it can perform animations with custom CSS classes too. Takes <i>enterClass</i> and <i>leaveClass</i> properties to simply add animation class during scroll or page load to manage elements
+            animation if the element is entering or leaving the viewport.
+        </p>
+    </DocSectionText>
+    <div class="card flex flex-column align-items-center">
+        <div v-animate="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip</span>
+        </div>
+        <div class="h-30rem"></div>
+        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip up</span>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<div class="card flex flex-column align-items-center">
+    <div v-animate="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+        <span class="text-900 text-3xl font-bold">flip</span>
+    </div>
+    <div class="h-30rem"></div>
+    <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+        <span class="text-900 text-3xl font-bold">flip up</span>
+    </div>
+</div>`,
+                options: `
+<template>
+    <div class="card flex flex-column align-items-center">
+        <div v-animate="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip</span>
+        </div>
+        <div class="h-30rem"></div>
+        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip up</span>
+        </div>
+    </div>
+</template>`,
+                composition: `
+<template>
+    <div class="card flex flex-column align-items-center">
+        <div v-animate="{ enterClass: 'flip', leaveClass: 'fadeoutleft' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip</span>
+        </div>
+        <div class="h-30rem"></div>
+        <div v-animate="{ enterClass: 'flipup' }" class="flex justify-content-center align-items-center h-20rem w-20rem border-round shadow-2 animation-duration-1000 animation-ease-out">
+            <span class="text-900 text-3xl font-bold">flip up</span>
+        </div>
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/animate/ImportDoc.vue b/doc/animate/ImportDoc.vue
new file mode 100644
index 000000000..91a9bb45d
--- /dev/null
+++ b/doc/animate/ImportDoc.vue
@@ -0,0 +1,20 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import Animate from 'primevue/animate';
+                
+app.directive('animate', Animate);
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/animate/index.vue b/pages/animate/index.vue
new file mode 100644
index 000000000..b7009ba1d
--- /dev/null
+++ b/pages/animate/index.vue
@@ -0,0 +1,27 @@
+<template>
+    <DocComponent title="Vue Animate Directive" header="Animate" description="Animate manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load." :componentDocs="docs" />
+</template>
+
+<script>
+import BasicDoc from '@/doc/animate/BasicDoc.vue';
+import ImportDoc from '@/doc/animate/ImportDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/plugins/primeVue.js b/plugins/primeVue.js
index df11656d1..09f7b38a0 100644
--- a/plugins/primeVue.js
+++ b/plugins/primeVue.js
@@ -8,10 +8,12 @@ import DocSections from '@/components/doc/DocSections';
 import DocSectionText from '@/components/doc/DocSectionText';
 import CodeHighlight from '@/components/layout/CodeHighlight';
 import DevelopmentSection from '@/components/layout/DevelopmentSection';
+import Animate from '@/components/lib/animate/Animate';
 
 export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(PrimeVue, { ripple: true });
 
+    nuxtApp.vueApp.directive('animate', Animate);
     nuxtApp.vueApp.directive('code', CodeHighlight);
 
     nuxtApp.vueApp.component('DocSections', DocSections);