From f2a26311a0c4c05c28919ed19179dc6c7c6479cf Mon Sep 17 00:00:00 2001 From: Connor Abbas Date: Tue, 25 Feb 2025 02:41:06 +0000 Subject: [PATCH 1/2] theme, packages, and improvements --- README.md | 46 +++++++-- package-lock.json | 96 +++++++++--------- package.json | 8 +- src/app.js | 18 +++- src/assets/css/tailwind.css | 6 +- src/components/Container.vue | 26 +++-- src/components/PageTitleSection.vue | 16 +++ src/components/PrimeVue/LinksMenu.vue | 6 +- src/components/PrimeVue/LinksMenuBar.vue | 23 +++-- src/components/PrimeVue/LinksPanelMenu.vue | 56 ++++++----- src/layouts/AuthenticatedLayout.vue | 45 ++------- src/theme/bootstrap-preset.js | 54 ++++++++++ src/theme/breeze-preset.js | 54 ++++++++++ src/theme/enterprise-preset.js | 54 ++++++++++ src/theme/noir-preset.js | 53 ++++++++++ src/views/Dashboard.vue | 18 ++-- src/views/Welcome.vue | 13 +-- src/views/auth/ForgotPassword.vue | 2 - src/views/auth/Login.vue | 2 - src/views/auth/Register.vue | 2 - src/views/auth/ResetPassword.vue | 2 - src/views/auth/VerifyEmail.vue | 2 - src/views/error/NotFound.vue | 7 +- src/views/profile/Edit.vue | 99 ++++++++----------- src/views/profile/partials/DeleteUserForm.vue | 6 +- .../profile/partials/UpdatePasswordForm.vue | 2 - .../partials/UpdateProfileInformationForm.vue | 2 - theme-preset.js | 63 ------------ 28 files changed, 468 insertions(+), 313 deletions(-) create mode 100644 src/components/PageTitleSection.vue create mode 100644 src/theme/bootstrap-preset.js create mode 100644 src/theme/breeze-preset.js create mode 100644 src/theme/enterprise-preset.js create mode 100644 src/theme/noir-preset.js delete mode 100644 theme-preset.js diff --git a/README.md b/README.md index 3a8d0e3..080bc97 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,16 @@ # Vue SPA w/ PrimeVue & Laravel Breeze API Starter Kit -![Static Badge]() ![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]() ![Static Badge]() ![Static Badge](https://img.shields.io/badge/Tailwind%20CSS%20-%20v4%20-%20%230284c7) A [PrimeVue](https://primevue.org/) SPA starter kit meant for use with a [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze) API stack backend. An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https://github.com/connorabbas/laravel-inertia-primevue). -## Setup +## Setup + 1. Clone the repo (or download the zip) 2. Create a new `.env` file in the root directory, reference the `.env.example` file for the vars/values -3. Create a [new Laravel application](https://laravel.com/docs/master/installation) +3. Create a [new Laravel application](https://laravel.com/docs/master/installation) 4. Install [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze-installation) using the [API Stack](https://laravel.com/docs/master/starter-kits#breeze-and-next) option 5. Setup necessary `.env` configuration values in the Laravel API project ``` @@ -21,9 +22,11 @@ An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https: SESSION_DOMAIN="vue-spa.localhost" ``` 6. Setup additional routes and controllers for profile page in the Laravel API project: + ``` php artisan make:controller ProfileController ``` + ```php middleware('auth') @@ -145,11 +151,39 @@ An alternative to using the [Laravel, Inertia.js, & PrimeVue Starter Kit](https: ``` ## TypeScript + TypeScript is configured and ready for use if desired, but is not required. ## Theme -This starter kit provides a light/dark mode and custom theme functionality provided by the powerful PrimeVue theming system, using styled mode and custom design token values. -The starting point for customizing your theme will be the `theme-preset.js` file at the root of the project. To quickly change the look and feel of your theme, 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). +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/). + +- **breeze** + Captures the aesthetic of [Laravel Breeze](https://laravel.com/docs/master/starter-kits#laravel-breeze). + +- **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 -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. +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. diff --git a/package-lock.json b/package-lock.json index 681a0dc..1cc6168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "version": "0.0.0", "devDependencies": { "@eslint/js": "^9.18.0", + "@primeuix/themes": "^1.0.0", "@primevue/auto-import-resolver": "^4.2.5", - "@primevue/themes": "^4.2.5", "@tailwindcss/vite": "^4.0.0", "@typescript-eslint/eslint-plugin": "^8.19.1", "@typescript-eslint/parser": "^8.19.1", @@ -23,9 +23,9 @@ "nprogress": "^0.2.0", "pinia": "^2.1.7", "primeicons": "^7.0.0", - "primevue": "^4.2.5", + "primevue": "^4.3.0", "tailwindcss": "^4.0.0", - "tailwindcss-primeui": "^0.3.4", + "tailwindcss-primeui": "^0.5.0", "typescript": "^5.7.3", "typescript-eslint": "^8.19.1", "unplugin-vue-components": "^0.27.4", @@ -794,22 +794,42 @@ } }, "node_modules/@primeuix/styled": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz", - "integrity": "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.5.0.tgz", + "integrity": "sha512-k5CTQ+10cXIXxZTep7sktmYe8lJkjmUaFVDAc1OCsWTJR+bhBy/s6zWIatGljVtuf3RmTSxtlrHQeFLjPmdUNQ==", "dev": true, "license": "MIT", "dependencies": { - "@primeuix/utils": "^0.3.2" + "@primeuix/utils": "^0.5.0" }, "engines": { "node": ">=12.11.0" } }, + "node_modules/@primeuix/styles": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@primeuix/styles/-/styles-1.0.0.tgz", + "integrity": "sha512-j/TlbqihLNMP37zFNjxac5dTRaQEf5Ldrv0P7NwKigCCc/+MI5j4MddxDw1LnxkGhWCJ1Gjbt9uwyQteWtSv7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.5.0" + } + }, + "node_modules/@primeuix/themes": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@primeuix/themes/-/themes-1.0.0.tgz", + "integrity": "sha512-fxUgcAP9H6FeytbE8c4QvRt8aBnoyZJqvtnnVwHT8PHr1dNSnC1nYKGrXpebcx3SpNy9Hp9oVidGsl6u61+pXQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@primeuix/styled": "^0.5.0" + } + }, "node_modules/@primeuix/utils": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz", - "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.5.1.tgz", + "integrity": "sha512-/bYirtF3gJOGrRQfQ5tUyQOLEria7wg/UCqvpIydTAxLmj/UWgWwh2kAjYVp49eldm1+2sk4+TDkbAz8XcPpew==", "dev": true, "license": "MIT", "engines": { @@ -830,31 +850,31 @@ } }, "node_modules/@primevue/core": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.2.5.tgz", - "integrity": "sha512-+oWBIQs5dLd2Ini4KEVOlvPILk989EHAskiFS3R/dz3jeOllJDMZFcSp8V9ddV0R3yDaPdLVkfHm2Q5t42kU2Q==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@primevue/core/-/core-4.3.0.tgz", + "integrity": "sha512-6fdGJN2y6Shqz2KKFPEmvUVUkVfn+AxcEh9xGUNBy3zMHO9nIiHiub1xq1YNL9rkmud5lbnbW55coOiwRuyW0g==", "dev": true, "license": "MIT", "dependencies": { - "@primeuix/styled": "^0.3.2", - "@primeuix/utils": "^0.3.2" + "@primeuix/styled": "^0.5.0", + "@primeuix/utils": "^0.5.1" }, "engines": { "node": ">=12.11.0" }, "peerDependencies": { - "vue": "^3.3.0" + "vue": "^3.5.0" } }, "node_modules/@primevue/icons": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.2.5.tgz", - "integrity": "sha512-WFbUMZhQkXf/KmwcytkjGVeJ9aGEDXjP3uweOjQZMmRdEIxFnqYYpd90wE90JE1teZn3+TVnT4ZT7ejGyEXnFQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@primevue/icons/-/icons-4.3.0.tgz", + "integrity": "sha512-Ki+tp5ihuOtcMJExD14gsNCVn2/+Bt2IfVDveyj4mQ0o3pZa8uj4d7DI1vN4ADF37ZYs5lT1yW8vtjHTUFOETA==", "dev": true, "license": "MIT", "dependencies": { - "@primeuix/utils": "^0.3.2", - "@primevue/core": "4.2.5" + "@primeuix/utils": "^0.5.1", + "@primevue/core": "4.3.0" }, "engines": { "node": ">=12.11.0" @@ -870,19 +890,6 @@ "node": ">=12.11.0" } }, - "node_modules/@primevue/themes": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/@primevue/themes/-/themes-4.2.5.tgz", - "integrity": "sha512-8F7yA36xYIKtNuAuyBdZZEks/bKDwlhH5WjpqGGB0FdwfAEoBYsynQ5sdqcT2Lb/NsajHmS5lc++Ttlvr1g1Lw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@primeuix/styled": "^0.3.2" - }, - "engines": { - "node": ">=12.11.0" - } - }, "node_modules/@rollup/pluginutils": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", @@ -3528,16 +3535,17 @@ "license": "MIT" }, "node_modules/primevue": { - "version": "4.2.5", - "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.2.5.tgz", - "integrity": "sha512-7UMOIJvdFz4jQyhC76yhNdSlHtXvVpmE2JSo2ndUTBWjWJOkYyT562rQ4ayO+bMdJLtzBGqgY64I9ZfEvNd7vQ==", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/primevue/-/primevue-4.3.0.tgz", + "integrity": "sha512-ovRcqGokoWGGWev0fXoSD/7qz3cTD38UyQHm6waI1dYmoDvNWsqfO4+/uUMLof1jEGZ4ZvV/l7UqsspJ14/RjA==", "dev": true, "license": "MIT", "dependencies": { - "@primeuix/styled": "^0.3.2", - "@primeuix/utils": "^0.3.2", - "@primevue/core": "4.2.5", - "@primevue/icons": "4.2.5" + "@primeuix/styled": "^0.5.0", + "@primeuix/styles": "^1.0.0", + "@primeuix/utils": "^0.5.1", + "@primevue/core": "4.3.0", + "@primevue/icons": "4.3.0" }, "engines": { "node": ">=12.11.0" @@ -3758,9 +3766,9 @@ "license": "MIT" }, "node_modules/tailwindcss-primeui": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.3.4.tgz", - "integrity": "sha512-5+Qfoe5Kpq2Iwrd6umBUb3rQH6b7+pL4jxJUId0Su5agUM6TwCyH5Pyl9R0y3QQB3IRuTxBNmeS11B41f+30zw==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/tailwindcss-primeui/-/tailwindcss-primeui-0.5.0.tgz", + "integrity": "sha512-NNKWfOsOH3zfUYNxqLL/p/w+a4QWEwQ0oqWoIIh6j2IzL573jdOT+CE+5fNzdaL/IAt4hXEae5kbn3euFiJ4ig==", "dev": true, "license": "MIT", "peerDependencies": { diff --git a/package.json b/package.json index 874f3d9..e4463ae 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,8 @@ }, "devDependencies": { "@eslint/js": "^9.18.0", + "@primeuix/themes": "^1.0.0", "@primevue/auto-import-resolver": "^4.2.5", - "@primevue/themes": "^4.2.5", "@tailwindcss/vite": "^4.0.0", "@typescript-eslint/eslint-plugin": "^8.19.1", "@typescript-eslint/parser": "^8.19.1", @@ -25,9 +25,9 @@ "nprogress": "^0.2.0", "pinia": "^2.1.7", "primeicons": "^7.0.0", - "primevue": "^4.2.5", + "primevue": "^4.3.0", "tailwindcss": "^4.0.0", - "tailwindcss-primeui": "^0.3.4", + "tailwindcss-primeui": "^0.5.0", "typescript": "^5.7.3", "typescript-eslint": "^8.19.1", "unplugin-vue-components": "^0.27.4", @@ -35,4 +35,4 @@ "vue": "^3.5.0", "vue-router": "^4.4.0" } -} \ No newline at end of file +} diff --git a/src/app.js b/src/app.js index 20160c6..e1599f4 100644 --- a/src/app.js +++ b/src/app.js @@ -4,7 +4,7 @@ import 'nprogress/nprogress.css'; import 'primeicons/primeicons.css'; import { useDark } from '@vueuse/core'; -import customThemePreset from '../theme-preset.js'; +import customThemePreset from './theme/noir-preset'; import { createApp } from 'vue'; import { createPinia } from 'pinia'; @@ -15,6 +15,9 @@ import App from './App.vue'; import PrimeVue from 'primevue/config'; import ToastService from 'primevue/toastservice'; +import Container from '@/components/Container.vue'; +import PageTitleSection from '@/components/PageTitleSection.vue'; + const app = createApp(App); const pinia = createPinia(); const darkMode = useDark(); // set Light/Dark Mode @@ -23,7 +26,18 @@ app.provide('darkMode', darkMode) .use(pinia) .use(router) .use(PrimeVue, { - theme: customThemePreset, + theme: { + preset: customThemePreset, + options: { + darkModeSelector: '.dark', + cssLayer: { + name: 'primevue', + order: 'tailwind-theme, tailwind-base, primevue, tailwind-utilities', + }, + }, + }, }) .use(ToastService) + .component('Container', Container) + .component('PageTitleSection', PageTitleSection) .mount('#app'); diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css index 1dbc0a5..1ba71c5 100644 --- a/src/assets/css/tailwind.css +++ b/src/assets/css/tailwind.css @@ -1,11 +1,7 @@ -@layer tailwind-theme, tailwind-base, primevue, tailwind-utilities; - @import 'tailwindcss/theme.css' layer(tailwind-theme); @import './custom-preflight.css' layer(tailwind-base); -/* @import "tailwindcss/preflight.css" layer(tailwind-base); */ @import 'tailwindcss/utilities.css' layer(tailwind-utilities); - -@plugin 'tailwindcss-primeui'; +@import 'tailwindcss-primeui'; @custom-variant dark (&:where(.dark, .dark *)); diff --git a/src/components/Container.vue b/src/components/Container.vue index 647fa46..5fa6d4f 100644 --- a/src/components/Container.vue +++ b/src/components/Container.vue @@ -1,11 +1,16 @@ + \ No newline at end of file diff --git a/src/components/PageTitleSection.vue b/src/components/PageTitleSection.vue new file mode 100644 index 0000000..f1119f8 --- /dev/null +++ b/src/components/PageTitleSection.vue @@ -0,0 +1,16 @@ + \ No newline at end of file diff --git a/src/components/PrimeVue/LinksMenu.vue b/src/components/PrimeVue/LinksMenu.vue index 59f8ae4..7b85021 100644 --- a/src/components/PrimeVue/LinksMenu.vue +++ b/src/components/PrimeVue/LinksMenu.vue @@ -21,11 +21,11 @@ defineExpose({ @@ -39,7 +39,7 @@ defineExpose({ v-bind="props.action" > diff --git a/src/components/PrimeVue/LinksMenuBar.vue b/src/components/PrimeVue/LinksMenuBar.vue index ec72edb..2ca23c5 100644 --- a/src/components/PrimeVue/LinksMenuBar.vue +++ b/src/components/PrimeVue/LinksMenuBar.vue @@ -27,21 +27,19 @@ defineExpose({ :to="item.route" custom > - - {{ item.label }} @@ -51,19 +49,20 @@ defineExpose({ :href="item.url" :target="item.target" v-bind="props.action" - :class="{ - 'text-muted-color': root, - }" + class="p-menubar-item-link" > {{ item.label }} diff --git a/src/components/PrimeVue/LinksPanelMenu.vue b/src/components/PrimeVue/LinksPanelMenu.vue index f6936bb..067add4 100644 --- a/src/components/PrimeVue/LinksPanelMenu.vue +++ b/src/components/PrimeVue/LinksPanelMenu.vue @@ -1,18 +1,10 @@