From 295e66b7c355be0a29a6d2454d725b48d6ae9bd8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 13 Jun 2024 09:43:29 +0300
Subject: [PATCH] Updated css layer docs

---
 apps/showcase/doc/dialog/HeadlessDoc.vue      | 76 +++++--------------
 .../nuxt/configuration/CSSLayerOrderDoc.vue   | 39 ----------
 apps/showcase/doc/tailwind/OverrideDoc.vue    | 10 +--
 .../doc/tailwind/samples/HeadlessDoc.vue      | 20 ++---
 .../styled/configuration/OptionsDoc.vue       | 40 +++++++++-
 apps/showcase/error.vue                       |  4 +-
 apps/showcase/pages/nuxt/index.vue            |  6 --
 packages/nuxt-module/src/module.ts            |  2 +-
 packages/nuxt-module/src/types.d.ts           |  2 +-
 9 files changed, 77 insertions(+), 122 deletions(-)
 delete mode 100644 apps/showcase/doc/nuxt/configuration/CSSLayerOrderDoc.vue

diff --git a/apps/showcase/doc/dialog/HeadlessDoc.vue b/apps/showcase/doc/dialog/HeadlessDoc.vue
index a046e92a2..fba7a3ef9 100644
--- a/apps/showcase/doc/dialog/HeadlessDoc.vue
+++ b/apps/showcase/doc/dialog/HeadlessDoc.vue
@@ -5,16 +5,7 @@
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog
-            v-model:visible="visible"
-            modal
-            :pt="{
-                root: 'border-0',
-                mask: {
-                    style: 'backdrop-filter: blur(2px)'
-                }
-            }"
-        >
+        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -29,15 +20,15 @@
                     </svg>
                     <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
                     </div>
                     <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
                     </div>
                     <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
                     </div>
                 </div>
             </template>
@@ -55,16 +46,7 @@ export default {
                 basic: `
 <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-<Dialog
-    v-model:visible="visible"
-    modal
-    :pt="{
-        root: 'border-0',
-        mask: {
-            style: 'backdrop-filter: blur(2px)'
-        }
-    }"
->
+<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
     <template #container="{ closeCallback }">
         <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -79,15 +61,15 @@ export default {
             </svg>
             <div class="inline-flex flex-col gap-2">
                 <label for="username" class="text-primary-50 font-semibold">Username</label>
-                <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
             </div>
             <div class="inline-flex flex-col gap-2">
                 <label for="password" class="text-primary-50 font-semibold">Password</label>
-                <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
             </div>
             <div class="flex items-center gap-4">
-                <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
             </div>
         </div>
     </template>
@@ -98,16 +80,7 @@ export default {
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog
-            v-model:visible="visible"
-            modal
-            :pt="{
-                root: 'border-0',
-                mask: {
-                    style: 'backdrop-filter: blur(2px)'
-                }
-            }"
-        >
+        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -122,15 +95,15 @@ export default {
                     </svg>
                     <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
                     </div>
                     <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
                     </div>
                     <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
                     </div>
                 </div>
             </template>
@@ -153,16 +126,7 @@ export default {
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog
-            v-model:visible="visible"
-            modal
-            :pt="{
-                root: 'border-0',
-                mask: {
-                    style: 'backdrop-filter: blur(2px)'
-                }
-            }"
-        >
+        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -177,15 +141,15 @@ export default {
                     </svg>
                     <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
                     </div>
                     <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
                     </div>
                     <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
                     </div>
                 </div>
             </template>
diff --git a/apps/showcase/doc/nuxt/configuration/CSSLayerOrderDoc.vue b/apps/showcase/doc/nuxt/configuration/CSSLayerOrderDoc.vue
deleted file mode 100644
index 6a9cbf6d7..000000000
--- a/apps/showcase/doc/nuxt/configuration/CSSLayerOrderDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>
-            When the layer is enabled at the theme configuration, defines the CSS layer order setting for compatibility with libraries like Tailwind and Bootstrap in styled mode. Visit the
-            <NuxtLink to="/theming/styled/#csslayer">CSS Layer</NuxtLink> guide for detailed information.
-        </p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
-    <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-primevue: {
-    cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities'
-}
-`
-            },
-            code2: {
-                basic: `
-/* tailwind.css */
-@layer tailwind-base {
-  @tailwind base;
-}
-
-@layer tailwind-utilities {
-  @tailwind components;
-  @tailwind utilities;
-}
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/tailwind/OverrideDoc.vue b/apps/showcase/doc/tailwind/OverrideDoc.vue
index d09154887..a9876c6d9 100644
--- a/apps/showcase/doc/tailwind/OverrideDoc.vue
+++ b/apps/showcase/doc/tailwind/OverrideDoc.vue
@@ -6,10 +6,7 @@
         <DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
 
         <h3>CSS Layer</h3>
-        <p>
-            Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required. If you are using Nuxt, there is a
-            <NuxtLink to="/nuxt/#layerorder">cssLayerOrder</NuxtLink> property to define the order.
-        </p>
+        <p>Enable PrimeVue CSS layer and configure the tailwind styles to have higher specificity with layering. This way, <i>!</i> prefix is not required.</p>
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
         <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
@@ -35,7 +32,10 @@ app.use(PrimeVue, {
     theme: {
         preset: Aura,
         options: {
-            cssLayer: true
+            cssLayer: {
+                name: 'primevue',
+                order: 'tailwind-base, primevue, tailwind-utilities'
+            }
         }
     }
  });
diff --git a/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue b/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
index 14d84be53..1b3a4f3ef 100644
--- a/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
+++ b/apps/showcase/doc/tailwind/samples/HeadlessDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-center">
         <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" pt:root:class="border-0" pt:mask:class="backdrop-blur-sm">
+        <Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -20,15 +20,15 @@
                     </svg>
                     <div class="inline-flex flex-col gap-2">
                         <label for="username" class="text-primary-50 font-semibold">Username</label>
-                        <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                        <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
                     </div>
                     <div class="inline-flex flex-col gap-2">
                         <label for="password" class="text-primary-50 font-semibold">Password</label>
-                        <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                        <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
                     </div>
                     <div class="flex items-center gap-4">
-                        <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                        <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                        <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                        <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
                     </div>
                 </div>
             </template>
@@ -46,7 +46,7 @@ export default {
                 basic: `
 <Button label="Login" icon="pi pi-user" @click="visible = true" />
 
-<Dialog v-model:visible="visible" pt:root:class="border-0" pt:mask:class="backdrop-blur-sm">
+<Dialog v-model:visible="visible" pt:root:class="!border-0" pt:mask:class="backdrop-blur-sm">
     <template #container="{ closeCallback }">
         <div class="flex flex-col px-8 py-8 gap-6" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--p-primary-400), var(--p-primary-700))">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="block mx-auto">
@@ -61,15 +61,15 @@ export default {
             </svg>
             <div class="inline-flex flex-col gap-2">
                 <label for="username" class="text-primary-50 font-semibold">Username</label>
-                <InputText id="username" class="bg-white/20 border-0 p-4 text-primary-50 w-80"></InputText>
+                <InputText id="username" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80"></InputText>
             </div>
             <div class="inline-flex flex-col gap-2">
                 <label for="password" class="text-primary-50 font-semibold">Password</label>
-                <InputText id="password" class="bg-white/20 border-0 p-4 text-primary-50 w-80" type="password"></InputText>
+                <InputText id="password" class="!bg-white/20 !border-0 !p-4 !text-primary-50 w-80" type="password"></InputText>
             </div>
             <div class="flex items-center gap-4">
-                <Button label="Cancel" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
-                <Button label="Sign-In" @click="closeCallback" text class="p-4 w-full text-primary-50 border border-white/30 hover:bg-white/10"></Button>
+                <Button label="Cancel" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
+                <Button label="Sign-In" @click="closeCallback" text class="!p-4 w-full !text-primary-50 !border !border-white/30 hover:!bg-white/10"></Button>
             </div>
         </div>
     </template>
diff --git a/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue b/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
index 363624b4b..a67b49ca1 100644
--- a/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
+++ b/apps/showcase/doc/theming/styled/configuration/OptionsDoc.vue
@@ -3,15 +3,51 @@
         <p>The <i>options</i> property defines the how the CSS would be generated from the design tokens of the preset.</p>
         <h4>prefix</h4>
         <p>The prefix of the CSS variables, defaults to <i>p</i>. For instance, the <i>primary.color</i> design token would be <i>var(--p-primary-color)</i>.</p>
+        <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <h4>darkModeSelector</h4>
         <p>
             The CSS rule to encapsulate the CSS variables of the dark mode, the default is the <i>system</i> to generate <i>@media (prefers-color-scheme: dark)</i>. If you need to make the dark mode toggleable based on the user selection define a
             class selector such as <i>.app-dark</i> and toggle this class at the document root. See the dark mode toggle section for an example.
         </p>
+        <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
         <h4>cssLayer</h4>
-        <p class="mb-0">
+        <p>
             Defines whether the styles should be defined inside a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@layer" target="_blank" rel="noopener noreferrer">CSS layer</a> named <i>primeui</i> or not. A CSS layer would be handy to
-            declare a custom cascade layer for easier customization. The default is <i>false</i>. View the CSS layer section for an example usage.
+            declare a custom cascade layer for easier customization. The default is <i>false</i>.
         </p>
+        <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `
+options: {
+    prefix: 'my'
+}
+`
+            },
+            code2: {
+                basic: `
+options: {
+    darkModeSelector: '.my-app-dark'
+}
+`
+            },
+            code3: {
+                basic: `
+options: {
+    cssLayer: {
+        name: 'primevue',
+        order: 'tailwind-base, primevue, tailwind-utilities'
+    }
+}
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/error.vue b/apps/showcase/error.vue
index aa376d616..dabdf1edb 100644
--- a/apps/showcase/error.vue
+++ b/apps/showcase/error.vue
@@ -4,11 +4,11 @@
             <div class="flex flex-col sm:flex-row items-center justify-center gap-4 text-primary">
                 <span class="font-bold text-9xl"> 4 </span>
                 <div class="flex items-center justify-center bg-primary text-primary-contrast rounded-full w-28 h-28">
-                    <i class="pi pi-prime text-6xl"></i>
+                    <i class="pi pi-prime !text-6xl"></i>
                 </div>
                 <span class="font-bold text-9xl"> 4 </span>
             </div>
-            <div class="font-bold text-center text-4xl border-t border-surface pt-8">Page Not Found.</div>
+            <div class="font-bold text-center text-4xl border-t border-surface pt-8">Page Not Found</div>
             <NuxtLink to="/"><Button label="GO TO HOMEPAGE" /></NuxtLink>
         </div>
     </div>
diff --git a/apps/showcase/pages/nuxt/index.vue b/apps/showcase/pages/nuxt/index.vue
index 5e5aceab0..1cccced5b 100644
--- a/apps/showcase/pages/nuxt/index.vue
+++ b/apps/showcase/pages/nuxt/index.vue
@@ -22,7 +22,6 @@ import DownloadDoc from '@/doc/nuxt/DownloadDoc.vue';
 import ExamplesDoc from '@/doc/nuxt/ExamplesDoc.vue';
 import SetupDoc from '@/doc/nuxt/SetupDoc.vue';
 import UsageDoc from '@/doc/nuxt/UsageDoc.vue';
-import CSSLayerOrderDoc from '@/doc/nuxt/configuration/CSSLayerOrderDoc.vue';
 import ComponentsDoc from '@/doc/nuxt/configuration/ComponentsDoc.vue';
 import ComposablesDoc from '@/doc/nuxt/configuration/ComposablesDoc.vue';
 import DirectivesDoc from '@/doc/nuxt/configuration/DirectivesDoc.vue';
@@ -88,11 +87,6 @@ export default {
                             id: 'importtheme',
                             label: 'importTheme',
                             component: ImportThemeDoc
-                        },
-                        {
-                            id: 'layerorder',
-                            label: 'cssLayerOrder',
-                            component: CSSLayerOrderDoc
                         }
                     ]
                 },
diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts
index b364ee03a..29e922dd8 100644
--- a/packages/nuxt-module/src/module.ts
+++ b/packages/nuxt-module/src/module.ts
@@ -14,7 +14,7 @@ export default defineNuxtModule<ModuleOptions>({
     defaults: {
         usePrimeVue: true,
         resolvePath: undefined,
-        cssLayerOrder: 'tailwind-base, primevue, tailwind-utilities',
+        //cssLayerOrder: undefined,
         importPT: undefined,
         importTheme: undefined,
         options: {},
diff --git a/packages/nuxt-module/src/types.d.ts b/packages/nuxt-module/src/types.d.ts
index b5e117ffb..40717d6b3 100644
--- a/packages/nuxt-module/src/types.d.ts
+++ b/packages/nuxt-module/src/types.d.ts
@@ -10,7 +10,7 @@ export interface ConstructsType {
 export interface ModuleOptions {
     usePrimeVue?: boolean;
     resolvePath?: any;
-    cssLayerOrder?: string;
+    /*cssLayerOrder?: string;*/
     importPT?: ImportOptions;
     importTheme?: ImportOptions;
     options?: PrimeVueOptions;