From 04b3b2e2fff0128746f4206ca0d71c1aa06f8afd Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 3 Jul 2024 13:28:54 +0300
Subject: [PATCH] Doc update

---
 apps/showcase/doc/nuxt/ExamplesDoc.vue        |  5 +-
 .../doc/theming/unstyled/ArchitectureDoc.vue  |  4 +-
 .../doc/theming/unstyled/ExampleDoc.vue       | 58 +++----------------
 .../unstyled/libraries/TailwindDoc.vue        |  5 +-
 .../theming/unstyled/libraries/UnoCSSDoc.vue  |  6 +-
 5 files changed, 13 insertions(+), 65 deletions(-)

diff --git a/apps/showcase/doc/nuxt/ExamplesDoc.vue b/apps/showcase/doc/nuxt/ExamplesDoc.vue
index 6a38a978f..a5b2d3aa7 100644
--- a/apps/showcase/doc/nuxt/ExamplesDoc.vue
+++ b/apps/showcase/doc/nuxt/ExamplesDoc.vue
@@ -1,8 +1,5 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            A sample <a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" rel="noopener noreferrer">starter example</a> is available at PrimeVue examples repository. In addition an
-            <a href="https://stackblitz.com/edit/nuxt-starter-5nuyko">online playground</a> sample can be accessed at StackBlitz.
-        </p>
+        <p><a href="https://github.com/primefaces/primevue-examples/tree/main/nuxt-quickstart" target="_blank" rel="noopener noreferrer">Nuxt based samples</a> with different options are available at PrimeVue examples repository.</p>
     </DocSectionText>
 </template>
diff --git a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
index cbdf6832b..ee12475aa 100644
--- a/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/ArchitectureDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when <i>unstyled</i> setting is enabled components do not include any CSS selectors while core functionality is still
-            available. For example, in the default styled mode, the dropdown component adds <i>.p-dropdown</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root
-            element and the CSS is not included in the page.
+            available. For example, in the default styled mode, the select component adds <i>.p-select</i> style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element
+            and the CSS is not included in the page.
         </p>
         <p>
             The second part is custom styling as components are displayed as transparent without their styles. <NuxtLink to="/passthrough">Pass Through Props</NuxtLink> feature is the key of since it also supports a global configuration to create
diff --git a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue b/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
index e4465f637..d882ef831 100644
--- a/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/ExampleDoc.vue
@@ -1,22 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Here is a sample that provides a style using PrimeFlex CSS library. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be
-            using the <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
+            Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section <NuxtLink to="/button">button</NuxtLink> documentation to learn more about the components internals. We'll be using the
+            <i>root</i>, <i>label</i> and <i>icon</i> elements to add a custom style.
         </p>
         <div class="card flex justify-center">
-            <Button
-                label="Check"
-                icon="pi pi-check"
-                unstyled
-                :pt="{
-                    root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-                    label: { class: 'text-white font-bold text-xl' },
-                    icon: 'text-white text-2xl'
-                }"
-            />
+            <Button label="Search" icon="pi pi-search" unstyled pt:root="bg-teal-500 hover:bg-teal-700 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2" pt:label="text-white font-bold text-lg" pt:icon="text-white text-xl" />
         </div>
-        <DocSectionCode :code="code" />
+        <DocSectionCode :code="code" hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -26,43 +17,10 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Check" icon="pi pi-check" unstyled
-    :pt="{
-        root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-        label: { class: 'text-white font-bold text-xl' },
-        icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
-    }"
-/>
-`,
-                options: `
-<template>
-    <div class="card">
-        <Button label="Check" icon="pi pi-check" unstyled
-            :pt="{
-                root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-                label: { class: 'text-white font-bold text-xl' },
-                icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
-            }"
-        />
-    </div>
-</template>
-
-<script>
-<\/script>
-`,
-                composition: `
-<template>
-    <Button label="Check" icon="pi pi-check" unstyled
-        :pt="{
-            root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
-            label: { class: 'text-white font-bold text-xl' },
-            icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
-        }"
-    />
-</template>
-
-<script setup>
-<\/script>
+<Button label="Search" icon="pi pi-search" unstyled
+    pt:root="bg-teal-500 hover:bg-teal-700 cursor-pointer py-3 px-4 rounded-full border-0 flex gap-2"
+    pt:label="text-white font-bold text-xl"
+    pt:icon="text-white text-2xl" />
 `
             }
         };
diff --git a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
index 9f43fb162..54a893831 100644
--- a/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/libraries/TailwindDoc.vue
@@ -1,9 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>
-            Tailwind CSS is perfect fit for the unstyled mode, PrimeVue even offers the standalone <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project that styles the complete UI suite with
-            Tailwind CSS to use a base.
-        </p>
+        <p>Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated <NuxtLink to="/tailwind">Tailwind CSS</NuxtLink> documentation for the first-class integration.</p>
     </DocSectionText>
 </template>
 
diff --git a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue b/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
index 39336661a..9e1e7d0c7 100644
--- a/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
+++ b/apps/showcase/doc/theming/unstyled/libraries/UnoCSSDoc.vue
@@ -4,11 +4,7 @@
             To get started, UnoCSS should already be available in your application, if not visit the UnoCSS <a href="https://unocss.dev/integrations/">documentation</a> for the installation in various environments. Theming of PrimeVue components with
             UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only.
         </p>
-        <p>
-            UnoCSS adds the utilities on demand so it needs to be aware of PrimeVue components path otherwise the classes used will not be included in the page, sample below configures UnoCSS with Vite. For other environments like Nuxt, visit the
-            <a href="https://unocss.dev/integrations/">integrations documentation</a>.
-        </p>
-        <p>For a live sample, visit the <a href="https://stackblitz.com/edit/vitejs-vite-cowgnp?file=src%2FApp.vue" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
+        <p>For a sample, visit the <a href="https://github.com/primefaces/primevue-examples/tree/main/unstyled-unocss" target="_blank" rel="noopener noreferrer">example repository</a>.</p>
     </DocSectionText>
 </template>