From 162ce3f04e59adc5e0abbaa4b154e7f1cc3df5e7 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 28 May 2024 10:44:55 +0300
Subject: [PATCH] Finished new TW doc

---
 doc/tailwind/AnimationsDoc.vue       | 428 +++++++++++++++++++++++++++
 doc/tailwind/samples/FormDoc.vue     |   2 +-
 doc/tailwind/samples/HeadlessDoc.vue |   2 +-
 pages/tailwind/index.vue             |   8 +-
 4 files changed, 437 insertions(+), 3 deletions(-)

diff --git a/doc/tailwind/AnimationsDoc.vue b/doc/tailwind/AnimationsDoc.vue
index e69de29bb..71548a48f 100644
--- a/doc/tailwind/AnimationsDoc.vue
+++ b/doc/tailwind/AnimationsDoc.vue
@@ -0,0 +1,428 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The plugin also adds extended animation utilities that can be used with the <NuxtLink to="/styleclass">styleclass</NuxtLink> and <NuxtLink to="/animateonscroll">animateonscroll</NuxtLink> directives.</p>
+    </DocSectionText>
+    <div class="card">
+        <Select v-model="animation" :options="animations" placeholder="Select One" class="w-full sm:w-44" />
+        <div class="py-8 overflow-hidden">
+            <div :class="`rounded-border bg-primary w-16 h-16 mx-auto animate-${animation} animate-once animate-duration-1000`"></div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
+    <h3>Animations</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-fadein</td>
+                    <td>fadein 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeout</td>
+                    <td>fadeout 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-slidedown</td>
+                    <td>slidedown 0.45s ease-in-out</td>
+                </tr>
+                <tr>
+                    <td>animate-slideup</td>
+                    <td>slideup 0.45s cubic-bezier(0, 1, 0, 1)</td>
+                </tr>
+                <tr>
+                    <td>animate-scalein</td>
+                    <td>scalein 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeinleft</td>
+                    <td>fadeinleft 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeoutleft</td>
+                    <td>fadeoutleft 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeinright</td>
+                    <td>fadeinright 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeoutright</td>
+                    <td>fadeoutright 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeinup</td>
+                    <td>fadeinup 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeoutup</td>
+                    <td>fadeoutup 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeindown</td>
+                    <td>fadeindown 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-fadeoutup</td>
+                    <td>fadeoutup 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-width</td>
+                    <td>width 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-flip</td>
+                    <td>flip 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-flipup</td>
+                    <td>flipup 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-flipleft</td>
+                    <td>fadein 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-flipright</td>
+                    <td>flipright 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-zoomin</td>
+                    <td>zoomin 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-zoomindown</td>
+                    <td>zoomindown 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-zoominleft</td>
+                    <td>zoominleft 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-zoominright</td>
+                    <td>zoominright 0.15s linear</td>
+                </tr>
+                <tr>
+                    <td>animate-zoominup</td>
+                    <td>zoominup 0.15s linear</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Animation Duration</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-duration-0</td>
+                    <td>animation-duration: 0s</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-75</td>
+                    <td>animation-duration: 75ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-100</td>
+                    <td>animation-duration: 100ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-200</td>
+                    <td>animation-duration: 200ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-300</td>
+                    <td>animation-duration: 300ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-400</td>
+                    <td>animation-duration: 400ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-500</td>
+                    <td>animation-duration: 500ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-700</td>
+                    <td>animation-duration: 700ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-1000</td>
+                    <td>animation-duration: 1000ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-2000</td>
+                    <td>animation-duration: 2000ms</td>
+                </tr>
+                <tr>
+                    <td>animate-duration-3000</td>
+                    <td>animation-duration: 300ms</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Animation Delay</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-delay-none</td>
+                    <td>animation-duration: 0s</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-75</td>
+                    <td>animation-delay: 75ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-100</td>
+                    <td>animation-delay: 100ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-150</td>
+                    <td>animation-delay: 150ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-200</td>
+                    <td>animation-delay: 200ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-300</td>
+                    <td>animation-delay: 300ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-400</td>
+                    <td>animation-delay: 400ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-500</td>
+                    <td>animation-delay: 500ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-700</td>
+                    <td>animation-delay: 700ms</td>
+                </tr>
+                <tr>
+                    <td>animate-delay-1000</td>
+                    <td>animation-delay: 1000ms</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Iteration Count</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-infinite</td>
+                    <td>animation-iteration-count: infinite</td>
+                </tr>
+                <tr>
+                    <td>animate-once</td>
+                    <td>animation-iteration-count: 1</td>
+                </tr>
+                <tr>
+                    <td>animate-twice</td>
+                    <td>animation-iteration-count: 2</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Direction</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-normal</td>
+                    <td>animation-direction: normal</td>
+                </tr>
+                <tr>
+                    <td>animate-reverse</td>
+                    <td>animation-direction: reverse</td>
+                </tr>
+                <tr>
+                    <td>animate-alternate</td>
+                    <td>animation-direction: alternate</td>
+                </tr>
+                <tr>
+                    <td>animate-alternate-reverse</td>
+                    <td>animation-direction: alternate-reverse</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Timing Function</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-ease-linear</td>
+                    <td>animation-timing-function: linear</td>
+                </tr>
+                <tr>
+                    <td>animate-ease-in</td>
+                    <td>animation-timing-function: cubic-bezier(0.4, 0, 1, 1)</td>
+                </tr>
+                <tr>
+                    <td>animate-ease-out</td>
+                    <td>animation-timing-function: cubic-bezier(0, 0, 0.2, 1)</td>
+                </tr>
+                <tr>
+                    <td>animate-ease-in-out</td>
+                    <td>animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1)</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Fill Mode</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-fill-none</td>
+                    <td>animation-fill-mode: normal</td>
+                </tr>
+                <tr>
+                    <td>animate-fill-forwards</td>
+                    <td>animation-fill-mode: forwards</td>
+                </tr>
+                <tr>
+                    <td>animate-fill-backwards</td>
+                    <td>animation-fill-mode: backwards</td>
+                </tr>
+                <tr>
+                    <td>animate-fill-both</td>
+                    <td>animation-fill-mode: both</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Play State</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>animate-running</td>
+                    <td>animation-play-state: running</td>
+                </tr>
+                <tr>
+                    <td>animate-paused</td>
+                    <td>animation-play-state: paused</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h3>Backface Visibility State</h3>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Class</th>
+                    <th>Property</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>backface-visible</td>
+                    <td>backface-visibility: visible</td>
+                </tr>
+                <tr>
+                    <td>backface-hidden</td>
+                    <td>backface-visibility: hidden</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            animation: null,
+            animations: [
+                'fadein',
+                'fadeout',
+                'slideup',
+                'scalein',
+                'fadeinleft',
+                'fadeoutleft',
+                'fadeinright',
+                'fadeoutright',
+                'fadeinup',
+                'fadeoutup',
+                'width',
+                'flipup',
+                'flipleft',
+                'flipright',
+                'zoomin',
+                'zoomindown',
+                'zoominleft',
+                'zoominright',
+                'zoominup'
+            ],
+            code: {
+                basic: `
+<Select v-model="animation" :options="animations" placeholder="Select One" class="w-full sm:w-44" />
+<div class="py-8 overflow-hidden">
+    <div :class="\`rounded-border bg-primary w-16 h-16 mx-auto animate-\${animation} animate-once animate-duration-1000\`"></div>
+</div>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/tailwind/samples/FormDoc.vue b/doc/tailwind/samples/FormDoc.vue
index 872d985f6..77a69214f 100644
--- a/doc/tailwind/samples/FormDoc.vue
+++ b/doc/tailwind/samples/FormDoc.vue
@@ -46,7 +46,7 @@
             </div>
         </div>
     </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/doc/tailwind/samples/HeadlessDoc.vue b/doc/tailwind/samples/HeadlessDoc.vue
index 94bf16611..14d84be53 100644
--- a/doc/tailwind/samples/HeadlessDoc.vue
+++ b/doc/tailwind/samples/HeadlessDoc.vue
@@ -34,7 +34,7 @@
             </template>
         </Dialog>
     </div>
-    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+    <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
 </template>
 
 <script>
diff --git a/pages/tailwind/index.vue b/pages/tailwind/index.vue
index a11d8c4d7..69247fcf8 100644
--- a/pages/tailwind/index.vue
+++ b/pages/tailwind/index.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import AnimationsDoc from '@/doc/tailwind/AnimationsDoc.vue';
 import ExtensionsDoc from '@/doc/tailwind/ExtensionsDoc.vue';
 import OverviewDoc from '@/doc/tailwind/OverviewDoc.vue';
 import PluginDoc from '@/doc/tailwind/PluginDoc.vue';
@@ -69,7 +70,12 @@ export default {
                             component: HeadlessDoc
                         }
                     ]
-                }
+                },
+                {
+                    id: 'animations',
+                    label: 'Animations',
+                    component: AnimationsDoc
+                },
             ]
         };
     }