Merge pull request #153 from connorabbas/develop

Theme updates, Improvements

Author: connorabbas

.env.example

@@ -19,12 +19,12 @@ LOG_STACK=single
 LOG_DEPRECATIONS_CHANNEL=null
 LOG_LEVEL=debug
 
-DB_CONNECTION=mysql
-DB_HOST=127.0.0.1
-DB_PORT=3306
-DB_DATABASE=laravel
-DB_USERNAME=root
-DB_PASSWORD=
+DB_CONNECTION=sqlite
+#DB_HOST=
+#DB_PORT=
+#DB_DATABASE=
+#DB_USERNAME=
+#DB_PASSWORD=
 
 SESSION_DRIVER=file
 SESSION_LIFETIME=120
@@ -68,4 +68,4 @@ WWWUSER=1000
 
 APP_PORT=8000
 VITE_PORT=5173
-FORWARD_DB_PORT=3306
+FORWARD_DB_PORT=

README.md

@@ -2,8 +2,7 @@
 
 ## About
 
-![Static Badge](https://img.shields.io/badge/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![Static Badge](<https://img.shields.io/badge/Vue.js%20-%20v3.5%20-%20rgb(66%20184%20131)>) ![Static Badge](https://img.shields.io/badge/PrimeVue%20-%20v4%20-%20rgb(16%20185%20129)) ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7)
-
+![Static Badge](https://img.shields.io/badge/Laravel%20-%20v11%20-%20%23f9322c) ![Static Badge](https://img.shields.io/badge/Inertia.js%20-%20v2%20-%20%236b46c1) ![Static Badge](<https://img.shields.io/badge/Vue.js%20-%20v3.5%20-%20rgb(66%20184%20131)>) ![Static Badge](<https://img.shields.io/badge/PrimeVue%20-%20v4%20-%20rgb(16%20185%20129)>) ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7)
 
 A basic authentication starter kit using [Laravel](https://laravel.com/docs/master), [Intertia.js](https://inertiajs.com/), [PrimeVue](https://primevue.org/) components, and [Tailwind CSS](https://tailwindcss.com/). An equivalent to using [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze), but with the added benefit of all the PrimeVue components at your disposal.
 
@@ -23,18 +22,42 @@ Do you need a separate Vue SPA front-end instead of using Inertia.js? Consider u
 
 ## Theme
 
-This starter kit provides a light/dark mode toggle by default, and custom theme functionality provided by the powerful **PrimeVue V4** theming system, using styled mode and custom design token values.
+This starter kit features a built-in light/dark mode toggle along with a collection of custom theme presets built using the powerful **PrimeVue V4** theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs.
+
+### Prebuilt Theme Presets
+
+The prebuilt theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style:
+
+-   **noir**  
+    A minimal, monochromatic theme that serves as the default style.
+
+-   **bootstrap**  
+    Emulates the familiar look and feel of [Bootstrap](https://getbootstrap.com/).
 
-The starting point for customizing your theme will be the `resources/js/theme-preset.js` module file. To quickly change the look and feel of your site, swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors), change the [surface](https://primevue.org/theming/styled/#surface) `colorScheme` values (slate, gray, neutral, etc.), or completely change the [preset theme](https://primevue.org/theming/styled/#presets) (Aura used by default).
+-   **breeze**  
+    Captures the aesthetic of [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze).
 
-Please reference the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/) to fully understand how this system works, and how to further customize your theme to make it your own.
+-   **enterprise**  
+    Provides a clean, no-nonsense corporate design.
+
+### Customizing Your Own Theme
+
+Creating your own theme preset is simple. You can:
+
+-   Swap the [primary](https://primevue.org/theming/styled/#primary) values with a different set of [colors](https://primevue.org/theming/styled/#colors).
+-   Adjust the `colorScheme` [surface](https://primevue.org/theming/styled/#surface) values (e.g., slate, gray, neutral).
+-   Change the extended [preset theme](https://primevue.org/theming/styled/#presets).
+
+For detailed guidance on customization, please refer to the [PrimeVue Styled Mode Docs](https://primevue.org/theming/styled/).
 
 ## PrimeVue v4 w/ Tailwind CSS
 
 If you have used a previous version of this project using **PrimeVue V3**, you'll know that [PrimeFlex](https://primeflex.org/) was used instead of [Tailwind CSS](https://tailwindcss.com/) for utility class styling. With V4 however, the PrimeTek team has officially suggested [Moving from PrimeFlex to Tailwind CSS](https://primevue.org/guides/primeflex/).
 
 For this reason PrimeFlex has been removed, and Tailwind has been added into the project, along with the [tailwindcss-primeui](https://primevue.org/tailwind/#plugin) plugin. CSS layers have also been implemented so the Tailwind utilities can [override](https://primevue.org/tailwind/#override) the PrimeVue component styling when needed.
 
+To clarify, Tailwind is **not** used for any component styling in this starter kit; instead, we use PrimeVue's styled mode with a custom theme preset implementation for component styling. Tailwind is applied solely for layout purposes **around** PrimeVue components and for minimal styling when needed.
+
 ---
 
 ## Usage with Docker
@@ -54,7 +77,7 @@ This starter kit is configured to use Docker Compose for local development with
     ```env
     # Use any desired domain ending with .localhost
     # Match with value used in docker-compose.local.yml
-    APP_URL=http://primevue-inertia.localhost
+    APP_URL=http://inertia-primevue.localhost
 
     DB_CONNECTION=pgsql
     DB_HOST=pgsql # name of service
@@ -63,7 +86,7 @@ This starter kit is configured to use Docker Compose for local development with
     DB_USERNAME=sail
     DB_PASSWORD=password
 
-    # Update port values as needed when running multiple projects
+    # Update port values as needed when running multiple projects/services
     APP_PORT=8000
     VITE_PORT=5173
     FORWARD_DB_PORT=5432

docker-compose.local.yml

@@ -21,8 +21,8 @@ services:
       - '.:/var/www/html'
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.primevue_inertia.rule=Host(`primevue-inertia.localhost`)"
-      - "traefik.http.services.primevue_inertia.loadbalancer.server.port=80"
+      - "traefik.http.routers.inertia_primevue.rule=Host(`inertia-primevue.localhost`)"
+      - "traefik.http.services.inertia_primevue.loadbalancer.server.port=80"
     networks:
       - sail
       - proxy
@@ -39,7 +39,7 @@ services:
       POSTGRES_USER: '${DB_USERNAME}'
       POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}'
     volumes:
-      - 'primevue-inertia-pgsql:/var/lib/postgresql/data'
+      - 'inertia-primevue-pgsql:/var/lib/postgresql/data'
       - './docker/local/database/pgsql/create-testing-database.sql:/docker-entrypoint-initdb.d/10-create-testing-database.sql'
     networks:
       - sail
@@ -49,7 +49,7 @@ services:
       timeout: 5s
 
 volumes:
-  primevue-inertia-pgsql:
+  inertia-primevue-pgsql:
     driver: local
 
 networks:

package-lock.json

@@ -9,16 +9,15 @@
     "devDependencies": {
         "@eslint/js": "^9.18.0",
         "@inertiajs/vue3": "^2.0.0",
+        "@primeuix/themes": "^1.0.0-rc.1",
         "@primevue/auto-import-resolver": "^4.2.2",
-        "@primevue/themes": "^4.2.2",
         "@tailwindcss/vite": "^4.0.0",
         "@types/lodash-es": "^4.17.12",
         "@types/qs": "^6.9.18",
         "@typescript-eslint/eslint-plugin": "^8.19.1",
         "@typescript-eslint/parser": "^8.19.1",
         "@vitejs/plugin-vue": "^5.0.0",
         "@vueuse/core": "^12.4.0",
-        "axios": "^1.6.4",
         "eslint": "^9.18.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-vue": "^9.32.0",
@@ -27,7 +26,7 @@
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "primeicons": "^7.0.0",
-        "primevue": "^4.2.2",
+        "primevue": "^4.2.5",
         "qs": "^6.14.0",
         "tailwindcss": "^4.0.0",
         "tailwindcss-primeui": "^0.3.2",

package.json

@@ -20,7 +20,7 @@ const page = usePage();
                 custom
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
                     class="p-breadcrumb-item-icon"
                 />
@@ -33,7 +33,7 @@ const page = usePage();
                 v-bind="props.action"
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
                     class="p-breadcrumb-item-icon"
                 />

resources/js/Components/PrimeVue/LinksBreadcrumb.vue

@@ -23,7 +23,7 @@ defineExpose({
                 custom
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
                     class="p-menu-item-icon"
                 />
@@ -36,7 +36,7 @@ defineExpose({
                 v-bind="props.action"
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
                     class="p-menu-item-icon"
                 />

resources/js/Components/PrimeVue/LinksMenu.vue

@@ -21,22 +21,19 @@ defineExpose({
             <slot name="start"></slot>
         </template>
         <template #item="{ item, props, hasSubmenu, root }">
-            <!-- add if using 'nora' preset theme -->
-            <!-- hover:text-primary-100 dark:hover:text-primary-950 -->
             <InertiaLink
                 v-if="item.route"
                 :href="item.route"
                 class="p-menubar-item-link"
                 :class="{
-                    'font-bold text-primary': item.active,
-                    'text-muted-color': root && !item.active,
+                    'font-bold! text-muted-color': item.active,
                 }"
                 custom
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
-                    class="p-menu-item-icon"
+                    class="p-menubar-item-icon"
                 />
                 <span class="p-menu-item-label">{{ item.label }}</span>
             </InertiaLink>
@@ -46,20 +43,17 @@ defineExpose({
                 :target="item.target"
                 v-bind="props.action"
                 class="p-menubar-item-link"
-                :class="{
-                    'text-muted-color': root,
-                }"
             >
                 <span
-                    v-show="item.icon"
+                    v-if="item.icon"
                     :class="item.icon"
-                    class="p-menu-item-icon"
+                    class="p-menubar-item-icon"
                 />
                 <span class="p-menu-item-label">{{ item.label }}</span>
                 <i
                     v-if="hasSubmenu"
                     :class="[
-                        'pi text-muted-color',
+                        'pi',
                         root ? 'pi-angle-down text-xs' : 'pi-angle-right',
                     ]"
                 ></i>