From 8ab48d2412e7a3e95b74dfc757763b9a7c87923d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 19 Jul 2023 12:21:56 +0300
Subject: [PATCH] Add bulma example

---
 assets/menu/menu.json            |  4 +++
 doc/bulma/ExampleDoc.vue         |  8 ++++++
 doc/bulma/SetupDoc.vue           |  5 ++++
 doc/theming/BuiltInThemesDoc.vue |  1 -
 layouts/AppConfigurator.vue      | 10 --------
 pages/bootstrap/index.vue        |  2 +-
 pages/bulma/index.vue            | 43 ++++++++++++++++++++++++++++++++
 7 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 doc/bulma/ExampleDoc.vue
 create mode 100644 doc/bulma/SetupDoc.vue
 create mode 100644 pages/bulma/index.vue

diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 99277ae6c..8baf2cc6f 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -462,6 +462,10 @@
                         {
                             "name": "Bootstrap",
                             "to": "/bootstrap"
+                        },
+                        {
+                            "name": "Bulma",
+                            "to": "/bulma"
                         }
                     ]
                 }
diff --git a/doc/bulma/ExampleDoc.vue b/doc/bulma/ExampleDoc.vue
new file mode 100644
index 000000000..077be90e0
--- /dev/null
+++ b/doc/bulma/ExampleDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Demonstration of various PrimeVue components like input field, button, table and panel styled with Bulma utilities.</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-9snkbq?file=src%2FApp.vue&embed=1"></iframe>
+    </div>
+</template>
diff --git a/doc/bulma/SetupDoc.vue b/doc/bulma/SetupDoc.vue
new file mode 100644
index 000000000..14912270d
--- /dev/null
+++ b/doc/bulma/SetupDoc.vue
@@ -0,0 +1,5 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Bulma can either be used with a CDN or via NPM. Visit the official documentation for installation steps. PrimeVue does require an extra configuration other than using components as <i>unstyled</i>.</p>
+    </DocSectionText>
+</template>
diff --git a/doc/theming/BuiltInThemesDoc.vue b/doc/theming/BuiltInThemesDoc.vue
index 4a2476011..d90db3f13 100644
--- a/doc/theming/BuiltInThemesDoc.vue
+++ b/doc/theming/BuiltInThemesDoc.vue
@@ -27,7 +27,6 @@ primevue/resources/themes/mdc-light-indigo/theme.css
 primevue/resources/themes/mdc-light-deeppurple/theme.css
 primevue/resources/themes/mdc-dark-indigo/theme.css
 primevue/resources/themes/mdc-dark-deeppurple/theme.css
-primevue/resources/themes/tailwind-light/theme.css
 primevue/resources/themes/fluent-light/theme.css
 primevue/resources/themes/lara-light-blue/theme.css
 primevue/resources/themes/lara-light-indigo/theme.css
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index a732630b3..3a07ef0e6 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -116,16 +116,6 @@
                     </div>
                 </div>
 
-                <h4>Tailwind</h4>
-                <div class="grid free-themes">
-                    <div class="col-3 flex flex-column align-items-center gap-2">
-                        <button class="px-link h-3rem" @click="changeTheme('tailwind-light')">
-                            <img src="https://primefaces.org/cdn/primevue/images/themes/tailwind-light.png" alt="Tailwind Light" class="w-3rem border-round" />
-                        </button>
-                        <span class="white-space-nowrap">Tailwind Light</span>
-                    </div>
-                </div>
-
                 <h4>Fluent UI</h4>
                 <div class="grid free-themes">
                     <div class="col-3 flex flex-column align-items-center gap-2">
diff --git a/pages/bootstrap/index.vue b/pages/bootstrap/index.vue
index e66b6e6c2..89b899d3f 100644
--- a/pages/bootstrap/index.vue
+++ b/pages/bootstrap/index.vue
@@ -9,7 +9,7 @@
             <div class="doc-main">
                 <div class="doc-intro">
                     <h1>Bootstrap</h1>
-                    <p>Boostrap is a well-known CSS library to build responsive and mobile first web projects.</p>
+                    <p><a href="https://getbootstrap.com" class="font-semibold hover:underline text-primary">Bootstrap</a> is a well-known CSS library to build responsive and mobile first web projects.</p>
                 </div>
                 <DocSections :docs="docs" />
             </div>
diff --git a/pages/bulma/index.vue b/pages/bulma/index.vue
new file mode 100644
index 000000000..2529a7ee0
--- /dev/null
+++ b/pages/bulma/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <div>
+        <Head>
+            <Title>Bulma - PrimeVue</Title>
+            <Meta name="description" content="Bulma is a free, open source framework that provides ready-to-use frontend copmponents and utilities.." />
+        </Head>
+
+        <div class="doc">
+            <div class="doc-main">
+                <div class="doc-intro">
+                    <h1>Bulma</h1>
+                    <p><a href="https://bulma.io/" class="font-semibold hover:underline text-primary">Bulma</a> is a free, open source framework that provides ready-to-use frontend copmponents and utilities.</p>
+                </div>
+                <DocSections :docs="docs" />
+            </div>
+            <DocSectionNav :docs="docs" />
+        </div>
+    </div>
+</template>
+
+<script>
+import ExampleDoc from '@/doc/bulma/ExampleDoc';
+import SetupDoc from '@/doc/bulma/SetupDoc';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'setup',
+                    label: 'Setup',
+                    component: SetupDoc
+                },
+                {
+                    id: 'example',
+                    label: 'Example',
+                    component: ExampleDoc
+                }
+            ]
+        };
+    }
+};
+</script>