Custom preflight, fixes, update PrimeVue

.devcontainer/devcontainer.json

@@ -10,18 +10,15 @@
         "vscode": {
             "extensions": [
                 "absszero.vscode-laravel-goto",
-                "amiralizadeh9480.laravel-extra-intellisense",
-                "bmewburn.vscode-intelephense-client",
                 "codingyu.laravel-goto-view",
+                "onecentlin.laravel-blade",
+                "amiralizadeh9480.laravel-extra-intellisense",
+                "DEVSENSE.phptools-vscode",
+                "MehediDracula.php-namespace-resolver",
                 "eamodio.gitlens",
                 "esbenp.prettier-vscode",
                 "mikestead.dotenv",
                 "streetsidesoftware.code-spell-checker",
-                "MehediDracula.php-namespace-resolver",
-                "hbenl.vscode-test-explorer",
-                "ms-vscode.test-adapter-converter",
-                "recca0120.vscode-phpunit",
-                "onecentlin.laravel-blade",
                 "hollowtree.vue-snippets",
                 "Vue.volar",
                 "shd101wyy.markdown-preview-enhanced"

package.json

@@ -7,14 +7,15 @@
     },
     "devDependencies": {
         "@inertiajs/vue3": "^1.0.0",
-        "@primevue/themes": "^4.0.0",
+        "@primevue/themes": "^4.1.0",
         "@vitejs/plugin-vue": "^5.0.0",
         "autoprefixer": "^10.4.19",
         "axios": "^1.6.4",
         "laravel-vite-plugin": "^1.0",
         "postcss": "^8.4.39",
+        "postcss-import": "^16.1.0",
         "primeicons": "^7.0.0",
-        "primevue": "^4.0.0",
+        "primevue": "^4.1.0",
         "tailwindcss": "^3.4.4",
         "tailwindcss-primeui": "^0.3.2",
         "vite": "^5.0",

resources/css/app.css

@@ -1,19 +1,8 @@
 @import "custom.css";
+@import "custom-preflight.css" layer(tailwind-base);
 
 @layer tailwind-base, primevue, tailwind-utilities;
 
-@layer tailwind-base {
-    @tailwind base;
-    @layer base {
-        input,
-        textarea,
-        select,
-        button {
-            all: revert;
-        }
-    }
-}
-
 @layer tailwind-utilities {
     @tailwind components;
     @tailwind utilities;

resources/css/custom-preflight.css

@@ -0,0 +1,285 @@
+/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
+
+/*
+Document
+========
+*/
+
+/**
+Use a better box model (opinionated).
+*/
+
+*,
+::before,
+::after {
+    box-sizing: border-box;
+}
+
+html {
+    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
+    font-family:
+        system-ui,
+        'Segoe UI',
+        Roboto,
+        Helvetica,
+        Arial,
+        sans-serif,
+        'Apple Color Emoji',
+        'Segoe UI Emoji';
+    line-height: 1.15;
+    /* 1. Correct the line height in all browsers. */
+    -webkit-text-size-adjust: 100%;
+    /* 2. Prevent adjustments of font size after orientation changes in iOS. */
+    tab-size: 4;
+    /* 3. Use a more readable tab size (opinionated). */
+}
+
+/*
+Sections
+========
+*/
+
+body {
+    margin: 0;
+    /* Remove the margin in all browsers. */
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+    font-family:
+        ui-monospace,
+        SFMono-Regular,
+        Consolas,
+        'Liberation Mono',
+        Menlo,
+        monospace;
+    /* 1 */
+    font-size: 1em;
+    /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+    font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+sup {
+    top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+    border-color: currentcolor;
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    font-family: inherit;
+    /* 1 */
+    font-size: 100%;
+    /* 1 */
+    line-height: 1.15;
+    /* 1 */
+    margin: 0;
+    /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+    -webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+    padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+    vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+    height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    outline-offset: -2px;
+    /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    /* 1 */
+    font: inherit;
+    /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+    display: list-item;
+}
+
+/* 
+Tailwind Additions
+https://tailwindcss.com/docs/preflight
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+    margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+ol,
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    display: block;
+    vertical-align: middle;
+}
+
+*,
+::before,
+::after {
+    border-width: 0;
+    border-style: solid;
+    border-color: theme('borderColor.DEFAULT', currentColor);
+}

resources/js/Components/LinksPanelMenu.vue

@@ -24,7 +24,7 @@ import PanelMenu from 'primevue/panelmenu';
                 v-if="item.route"
                 :href="item.route"
                 custom
-                class="flex items-center cursor-pointer px-4 py-2"
+                class="flex items-center cursor-pointer no-underline px-4 py-2"
                 :class="
                     item.active
                         ? 'text-primary'
@@ -40,7 +40,7 @@ import PanelMenu from 'primevue/panelmenu';
             </Link>
             <a
                 v-else
-                class="flex items-center cursor-pointer text-surface-700 dark:text-surface-0 px-4 py-2"
+                class="flex items-center cursor-pointer no-underline text-surface-700 dark:text-surface-0 px-4 py-2"
                 :href="item.url"
                 :target="item.target"
             >

resources/js/Pages/Profile/Partials/DeleteUserForm.vue

@@ -46,6 +46,7 @@ function focusPasswordInput() {
 
             <div>
                 <InputText
+                    autofocus
                     required
                     id="password"
                     ref="password-input"

tailwind.config.js

@@ -15,6 +15,6 @@ module.exports = {
             },
         },
     },
-    plugins: [require('tailwindcss-primeui')],
+    plugins: [require('postcss-import'), require('tailwindcss-primeui')],
     darkMode: ['selector', '.dark-mode'],
 };