From b31ce24f769d7a19e6f8b8c6924fd3e832d413be Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 15 Sep 2023 01:29:20 +0300
Subject: [PATCH] Add UnoCSS sample

---
 assets/menu/menu.json     |  4 ++++
 doc/unocss/ExampleDoc.vue |  8 +++++++
 doc/unocss/SetupDoc.vue   | 42 +++++++++++++++++++++++++++++++++++
 pages/unocss/index.vue    | 46 +++++++++++++++++++++++++++++++++++++++
 4 files changed, 100 insertions(+)
 create mode 100644 doc/unocss/ExampleDoc.vue
 create mode 100644 doc/unocss/SetupDoc.vue
 create mode 100644 pages/unocss/index.vue
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index d4152ec19..0cf664996 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -462,6 +462,10 @@
                         {
                             "name": "Bulma",
                             "to": "/bulma"
+                        },
+                        {
+                            "name": "UnoCSS",
+                            "to": "/unocss"
                         }
                     ]
                 }
diff --git a/doc/unocss/ExampleDoc.vue b/doc/unocss/ExampleDoc.vue
new file mode 100644
index 000000000..3d59f6f88
--- /dev/null
+++ b/doc/unocss/ExampleDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>An example to demonstrate how to use the default preset of UnoCSS to style the panel component via a global pass through configuration.</p>
+    </DocSectionText>
+    <div class="flex justify-content-center">
+        <iframe class="w-full h-full" style="border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; min-height: 800px" allowfullscreen src="https://stackblitz.com/edit/vitejs-vite-cowgnp?file=src%2FApp.vue&embed=1"></iframe>
+    </div>
+</template>
diff --git a/doc/unocss/SetupDoc.vue b/doc/unocss/SetupDoc.vue
new file mode 100644
index 000000000..b4441c429
--- /dev/null
+++ b/doc/unocss/SetupDoc.vue
@@ -0,0 +1,42 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            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. Visit the <NuxtLink to="/unstyled">unstyled</NuxtLink> mode documentation for more information.
+        </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>
+        <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+    </DocSectionText>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code1: {
+                basic: `import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import presetUno from '@unocss/preset-uno'
+import presetAttributify from '@unocss/preset-attributify'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue(), UnoCSS({
+    presets: [
+      presetUno(),
+      presetAttributify()
+    ],
+    include: ["./index.html",
+      "./src/**/*.{vue,js,ts,jsx,tsx}",
+      "./node_modules/primevue/**/*.{vue,js,ts,jsx,tsx}"]
+  })]
+})`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/unocss/index.vue b/pages/unocss/index.vue
new file mode 100644
index 000000000..0857f2381
--- /dev/null
+++ b/pages/unocss/index.vue
@@ -0,0 +1,46 @@
+<template>
+    <div>
+        <Head>
+            <Title>UnoCSS - PrimeVue</Title>
+            <Meta name="description" content="Styling PrimeVue with Boostrap." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>UnoCSS</h1>
+                    <p>
+                        <a href="https://unocss.dev" class="font-semibold hover:underline text-primary">UnoCSS</a> is an instant atomic CSS engine designed to be flexible and extensible. The core is un-opinionated and all the CSS utilities are
+                        provided via presets.
+                    </p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ExampleDoc from '@/doc/unocss/ExampleDoc';
+import SetupDoc from '@/doc/unocss/SetupDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>
