From a4e3274a172996f22c1818165289192800562fc4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 16 Feb 2025 00:46:31 +0300
Subject: [PATCH] Update PrimeFlex related information

---
 .../showcase/doc/animateonscroll/BasicDoc.vue |  2 +-
 apps/showcase/doc/common/apidoc/index.json    |  4 +--
 .../doc/configuration/UnstyledDoc.vue         |  2 +-
 apps/showcase/doc/dialog/ResponsiveDoc.vue    |  2 +-
 .../migration/v4/changes/BreakingDoc.vue      |  3 ++
 .../doc/guides/primeflex/CompatibilityDoc.vue | 19 ++++++++++++
 apps/showcase/doc/passthrough/BasicDoc.vue    | 29 +++++++------------
 apps/showcase/doc/skeleton/CardDoc.vue        |  2 +-
 apps/showcase/doc/skeleton/DataTableDoc.vue   |  2 +-
 apps/showcase/doc/skeleton/ListDoc.vue        |  2 +-
 .../pages/guides/dynamicimports/index.vue     |  2 +-
 .../showcase/pages/guides/primeflex/index.vue | 10 +++++--
 .../showcase/pages/templates/apollo/index.vue |  4 +--
 .../pages/templates/atlantis/index.vue        |  4 +--
 .../showcase/pages/templates/avalon/index.vue |  4 +--
 .../pages/templates/diamond/index.vue         |  4 +--
 apps/showcase/pages/templates/freya/index.vue |  4 +--
 apps/showcase/pages/templates/sakai/index.vue |  4 +--
 .../showcase/pages/templates/ultima/index.vue |  4 +--
 .../showcase/pages/templates/verona/index.vue |  4 +--
 .../src/animateonscroll/AnimateOnScroll.d.ts  |  2 +-
 .../style/AnimateOnScrollStyle.d.ts           |  2 +-
 22 files changed, 67 insertions(+), 48 deletions(-)
 create mode 100644 apps/showcase/doc/guides/primeflex/CompatibilityDoc.vue

diff --git a/apps/showcase/doc/animateonscroll/BasicDoc.vue b/apps/showcase/doc/animateonscroll/BasicDoc.vue
index acb2cd9cd..5154b45e0 100644
--- a/apps/showcase/doc/animateonscroll/BasicDoc.vue
+++ b/apps/showcase/doc/animateonscroll/BasicDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes PrimeFlex animations however any valid CSS animation is supported.</p>
+        <p>Animation classes are defined with the <i>enterClass</i> and <i>leaveClass</i> properties. This example utilizes <i>tailwindcss-primeui</i> plugin animations however any valid CSS animation is supported.</p>
     </DocSectionText>
     <div class="card flex flex-col items-center overflow-hidden">
         <div class="flex flex-col items-center gap-2">
diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 3abcdb93d..6e4cb18ed 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -3002,7 +3002,7 @@
         }
     },
     "animateonscrollstyle": {
-        "description": "AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.\n\n[Live Demo](https://primevue.org/animateonscroll)",
+        "description": "AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load.\n\n[Live Demo](https://primevue.org/animateonscroll)",
         "interfaces": {
             "description": "Defines the custom interfaces used by the module.",
             "eventDescription": "Defines the custom events used by the component's emit.",
@@ -100470,4 +100470,4 @@
             }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/apps/showcase/doc/configuration/UnstyledDoc.vue b/apps/showcase/doc/configuration/UnstyledDoc.vue
index b796f7bfb..f1c10ee22 100644
--- a/apps/showcase/doc/configuration/UnstyledDoc.vue
+++ b/apps/showcase/doc/configuration/UnstyledDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind, Bootstrap or PrimeFlex. Visit
+            Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit
             <NuxtLink to="/theming/unstyled">Unstyled mode</NuxtLink> documentation for more information.
         </p>
 
diff --git a/apps/showcase/doc/dialog/ResponsiveDoc.vue b/apps/showcase/doc/dialog/ResponsiveDoc.vue
index b9b0918a3..825fb5fdc 100644
--- a/apps/showcase/doc/dialog/ResponsiveDoc.vue
+++ b/apps/showcase/doc/dialog/ResponsiveDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Dialog width can be adjusted per screen size with the <i>breakpoints</i> option where the max-width for the breakpoint and the width are defined as key-value pairs. When no breakpoint matches width defined in <i>style</i> or
-            <i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind or PrimeFlex can also be used such as <i>md:w-screen</i>.
+            <i>class</i> is used. Alternatively responsive utility classes of libraries like Tailwind can also be used such as <i>md:w-screen</i>.
         </p>
     </DocSectionText>
 
diff --git a/apps/showcase/doc/guides/migration/v4/changes/BreakingDoc.vue b/apps/showcase/doc/guides/migration/v4/changes/BreakingDoc.vue
index 25255e591..3231e0374 100644
--- a/apps/showcase/doc/guides/migration/v4/changes/BreakingDoc.vue
+++ b/apps/showcase/doc/guides/migration/v4/changes/BreakingDoc.vue
@@ -59,5 +59,8 @@
             The <a href="https://www.npmjs.com/package/nuxt-primevue" target="_blank" rel="noopener noreferrer" class="doc-link">nuxt-primevue</a> module has been replaced with the new
             <a href="https://www.npmjs.com/package/@primevue/nuxt-module" target="_blank" rel="noopener noreferrer" class="doc-link">@primevue/nuxt-module</a>. The old module is still maintained for v3 users.
         </p>
+
+        <h4>PrimeFlex CSS</h4>
+        <p>In case you are using PrimeFlex CSS library, upgrade to PrimeFlex v4 since PrimeFlex v3 is not compatible with PrimeVue v4+.</p>
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/guides/primeflex/CompatibilityDoc.vue b/apps/showcase/doc/guides/primeflex/CompatibilityDoc.vue
new file mode 100644
index 000000000..453700b22
--- /dev/null
+++ b/apps/showcase/doc/guides/primeflex/CompatibilityDoc.vue
@@ -0,0 +1,19 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The compatible versions to choose the correct combination.</p>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <tbody>
+                    <tr>
+                        <td>PrimeVue v4 and newer</td>
+                        <td>PrimeFlex v4</td>
+                    </tr>
+                    <tr>
+                        <td>PrimeVue v3 and older</td>
+                        <td>PrimeFlex v3</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/apps/showcase/doc/passthrough/BasicDoc.vue b/apps/showcase/doc/passthrough/BasicDoc.vue
index bb996eea5..71cf6904e 100644
--- a/apps/showcase/doc/passthrough/BasicDoc.vue
+++ b/apps/showcase/doc/passthrough/BasicDoc.vue
@@ -7,7 +7,7 @@
         </p>
         <p>
             Most common usage of <i>pt</i> is styling and customization. The <i>class</i> and <i>style</i> properties support the exact syntax of the corresponding
-            <a href="https://vuejs.org/guide/essentials/class-and-style.html">Vue bindings</a> like arrays, objects and conditionals. Example below styles a Panel component with PrimeFlex CSS library.
+            <a href="https://vuejs.org/guide/essentials/class-and-style.html">Vue bindings</a> like arrays, objects and conditionals. Example below styles an unstyled Panel component with Tailwind CSS library.
         </p>
     </DocSectionText>
 
@@ -15,21 +15,17 @@
         <Panel
             header="Header"
             toggleable
+            unstyled
             :pt="{
+                root: 'border border-primary rounded-xl p-4',
                 header: (options) => ({
                     id: 'myPanelHeader',
                     style: {
                         'user-select': 'none'
                     },
-                    class: [
-                        'border-primary',
-                        {
-                            'bg-primary text-primary-contrast': options.state.d_collapsed,
-                            'text-primary bg-primary-contrast': !options.state.d_collapsed
-                        }
-                    ]
+                    class: ['flex items-center justify-between text-primary font-bold']
                 }),
-                content: { class: 'border-primary text-lg text-primary-700' },
+                content: { class: 'text-primary-700 dark:text-primary-200 mt-4' },
                 title: 'text-xl',
                 toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
             }"
@@ -51,22 +47,17 @@ export default {
                 basic: `
 <Panel header="Header" toggleable
     :pt="{
+        root: 'border border-primary rounded-xl p-4',
         header: (options) => ({
             id: 'myPanelHeader',
             style: {
                 'user-select': 'none'
             },
-            class: [
-                'border-primary',
-                {
-                    'bg-primary text-primary-contrast': options.state.d_collapsed,
-                    'text-primary bg-primary-contrast': !options.state.d_collapsed
-                }
-            ]
+            class: ['flex items-center justify-between text-primary font-bold']
         }),
-        content: { class: 'border-primary text-lg text-primary-700' },
-        title: 'text-xl',                                     // OR { class: 'text-xl' }
-        toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'  // OR { class: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast' }
+        content: { class: 'text-primary-700 dark:text-primary-200 mt-4' },
+        title: 'text-xl',
+        toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
     }">
     <p class="m-0">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/apps/showcase/doc/skeleton/CardDoc.vue b/apps/showcase/doc/skeleton/CardDoc.vue
index e2d8ce2a5..fc8f283cb 100644
--- a/apps/showcase/doc/skeleton/CardDoc.vue
+++ b/apps/showcase/doc/skeleton/CardDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sample Card implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+        <p>Sample Card implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
         <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
diff --git a/apps/showcase/doc/skeleton/DataTableDoc.vue b/apps/showcase/doc/skeleton/DataTableDoc.vue
index f45d85633..c8c64f69a 100644
--- a/apps/showcase/doc/skeleton/DataTableDoc.vue
+++ b/apps/showcase/doc/skeleton/DataTableDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sample DataTable implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+        <p>Sample DataTable implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
         <DataTable :value="products">
diff --git a/apps/showcase/doc/skeleton/ListDoc.vue b/apps/showcase/doc/skeleton/ListDoc.vue
index 4574a9d72..46f7b464c 100644
--- a/apps/showcase/doc/skeleton/ListDoc.vue
+++ b/apps/showcase/doc/skeleton/ListDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sample List implementation using different Skeleton components and PrimeFlex CSS utilities.</p>
+        <p>Sample List implementation using different Skeleton components and Tailwind CSS utilities.</p>
     </DocSectionText>
     <div class="card">
         <div class="rounded border border-surface-200 dark:border-surface-700 p-6 bg-surface-0 dark:bg-surface-900">
diff --git a/apps/showcase/pages/guides/dynamicimports/index.vue b/apps/showcase/pages/guides/dynamicimports/index.vue
index e75f5cb9b..0bda0f0d1 100644
--- a/apps/showcase/pages/guides/dynamicimports/index.vue
+++ b/apps/showcase/pages/guides/dynamicimports/index.vue
@@ -1,6 +1,6 @@
 <template>
     <Head>
-        <Title>PrimeFlex - Dynamic Imports</Title>
+        <Title>PrimeVue - Dynamic Imports</Title>
         <Meta name="description" content="Dynamic imports enable the loading of multiple items as needed, streamlining the import process." />
     </Head>
     <div class="doc">
diff --git a/apps/showcase/pages/guides/primeflex/index.vue b/apps/showcase/pages/guides/primeflex/index.vue
index 87a12bb4b..fb20c5b3a 100644
--- a/apps/showcase/pages/guides/primeflex/index.vue
+++ b/apps/showcase/pages/guides/primeflex/index.vue
@@ -1,13 +1,13 @@
 <template>
     <Head>
         <Title>PrimeFlex - PrimeVue</Title>
-        <Meta name="description" content="Moving from PrimeFlex to Tailwind CSS." />
+        <Meta name="description" content="The PrimeFlex CSS library is being sunset and will no longer receive active development or maintenance." />
     </Head>
     <div class="doc">
         <div class="doc-main">
             <div class="doc-intro">
                 <h1>Introduction</h1>
-                <p>Moving from PrimeFlex to Tailwind CSS.</p>
+                <p>The PrimeFlex CSS library is being sunset and will no longer receive active development or maintenance.</p>
             </div>
             <DocSections :docs="docs" />
         </div>
@@ -16,6 +16,7 @@
 </template>
 
 <script>
+import CompatibilityDoc from '@/doc/guides/primeflex/CompatibilityDoc.vue';
 import MigrationDoc from '@/doc/guides/primeflex/MigrationDoc.vue';
 import OverviewDoc from '@/doc/guides/primeflex/OverviewDoc.vue';
 import PluginDoc from '@/doc/guides/primeflex/PluginDoc.vue';
@@ -30,6 +31,11 @@ export default {
                     label: 'Overview',
                     component: OverviewDoc
                 },
+                {
+                    id: 'compatibility',
+                    label: 'Compatibility',
+                    component: CompatibilityDoc
+                },
                 {
                     id: 'tailwindcss',
                     label: 'Tailwind CSS',
diff --git a/apps/showcase/pages/templates/apollo/index.vue b/apps/showcase/pages/templates/apollo/index.vue
index bf7cd88d7..0bcb7ab7b 100644
--- a/apps/showcase/pages/templates/apollo/index.vue
+++ b/apps/showcase/pages/templates/apollo/index.vue
@@ -170,8 +170,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/atlantis/index.vue b/apps/showcase/pages/templates/atlantis/index.vue
index aa3fc283c..85f1e1673 100644
--- a/apps/showcase/pages/templates/atlantis/index.vue
+++ b/apps/showcase/pages/templates/atlantis/index.vue
@@ -141,8 +141,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/avalon/index.vue b/apps/showcase/pages/templates/avalon/index.vue
index 6586ab148..3005344ab 100644
--- a/apps/showcase/pages/templates/avalon/index.vue
+++ b/apps/showcase/pages/templates/avalon/index.vue
@@ -171,8 +171,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/diamond/index.vue b/apps/showcase/pages/templates/diamond/index.vue
index 9ceb733fc..5728bdaca 100644
--- a/apps/showcase/pages/templates/diamond/index.vue
+++ b/apps/showcase/pages/templates/diamond/index.vue
@@ -147,8 +147,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/freya/index.vue b/apps/showcase/pages/templates/freya/index.vue
index 994e580ee..ba33cea1d 100644
--- a/apps/showcase/pages/templates/freya/index.vue
+++ b/apps/showcase/pages/templates/freya/index.vue
@@ -141,8 +141,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/sakai/index.vue b/apps/showcase/pages/templates/sakai/index.vue
index fefed22d5..a928dc510 100644
--- a/apps/showcase/pages/templates/sakai/index.vue
+++ b/apps/showcase/pages/templates/sakai/index.vue
@@ -106,8 +106,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/sakai/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/ultima/index.vue b/apps/showcase/pages/templates/ultima/index.vue
index 8c4661184..92fa66c0e 100644
--- a/apps/showcase/pages/templates/ultima/index.vue
+++ b/apps/showcase/pages/templates/ultima/index.vue
@@ -142,8 +142,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/apps/showcase/pages/templates/verona/index.vue b/apps/showcase/pages/templates/verona/index.vue
index ef115e45b..87ff9c8c5 100644
--- a/apps/showcase/pages/templates/verona/index.vue
+++ b/apps/showcase/pages/templates/verona/index.vue
@@ -132,8 +132,8 @@ export default {
                             featuresData: [
                                 {
                                     id: 1,
-                                    title: 'PrimeFlex CSS Utilities',
-                                    description: 'PrimeFlex is a CSS utility library featuring various helpers such as a grid system, flexbox, spacing, elevation and more.',
+                                    title: 'Tailwind CSS',
+                                    description: 'The demo content is built with TailwindCSS, while the application shell uses custom CSS, offering flexibility and efficiency for responsive design.',
                                     src: 'https://primefaces.org/cdn/primevue/images/templates/apollo/features-animation-utilities.png'
                                 },
                                 {
diff --git a/packages/primevue/src/animateonscroll/AnimateOnScroll.d.ts b/packages/primevue/src/animateonscroll/AnimateOnScroll.d.ts
index 7276af6ce..60692968a 100644
--- a/packages/primevue/src/animateonscroll/AnimateOnScroll.d.ts
+++ b/packages/primevue/src/animateonscroll/AnimateOnScroll.d.ts
@@ -75,7 +75,7 @@ export interface AnimateOnScrollDirectiveBinding extends Omit<DirectiveBinding,
 /**
  * **PrimeVue - AnimateOnScroll**
  *
- * _AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load._
+ * _AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load._
  *
  * [Live Demo](https://www.primevue.org/animateonscroll/)
  * --- ---
diff --git a/packages/primevue/src/animateonscroll/style/AnimateOnScrollStyle.d.ts b/packages/primevue/src/animateonscroll/style/AnimateOnScrollStyle.d.ts
index c7fa28df2..d22df1437 100644
--- a/packages/primevue/src/animateonscroll/style/AnimateOnScrollStyle.d.ts
+++ b/packages/primevue/src/animateonscroll/style/AnimateOnScrollStyle.d.ts
@@ -1,6 +1,6 @@
 /**
  *
- *  AnimateOnScroll manages PrimeFlex CSS classes declaratively to during enter/leave animations on scroll or on page load.
+ *  AnimateOnScroll manages CSS classes declaratively to during enter/leave animations on scroll or on page load.
  *
  * [Live Demo](https://primevue.org/animateonscroll)
  *