Merge branch 'master' of https://github.com/primefaces/primevue

apps/showcase/assets/styles/layout/_core.scss

@@ -2,6 +2,7 @@ html {
     font-size: 14px;
     font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    line-height: normal;
 }
 
 .material {
@@ -33,7 +34,12 @@ a {
     color: var(--selection-text-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-block: 1.5rem 1rem;
     margin-inline: 0;
     font-family: inherit;
@@ -86,13 +92,6 @@ button {
     font-feature-settings: inherit;
 }
 
-*,
-::before,
-::after {
-    border-width: 0;
-    border-style: solid;
-}
-
 textarea {
     resize: none;
 }

apps/showcase/doc/datatable/rowgroup/ExpandableRowGroupDoc.vue

@@ -21,7 +21,7 @@
                 tableStyle="min-width: 50rem"
             >
                 <template #groupheader="slotProps">
-                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle" class="ml-2" />
+                    <img :alt="slotProps.data.representative.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${slotProps.data.representative.image}`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                     <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
                 </template>
                 <Column field="representative.name" header="Representative"></Column>
@@ -64,7 +64,7 @@ export default {
         expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
         sortMode="single" sortField="representative.name" :sortOrder="1">
     <template #groupheader="slotProps">
-        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+        <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
         <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
     </template>
     <Column field="representative.name" header="Representative"></Column>
@@ -96,7 +96,7 @@ export default {
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                 <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>
@@ -186,7 +186,7 @@ export default {
                 expandableRowGroups rowGroupMode="subheader" groupRowsBy="representative.name" @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"
                 sortMode="single" sortField="representative.name" :sortOrder="1">
             <template #groupheader="slotProps">
-                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle" class="ml-2" />
+                <img :alt="slotProps.data.representative.name" :src="\`https://primefaces.org/cdn/primevue/images/avatar/\${slotProps.data.representative.image}\`" width="32" style="vertical-align: middle; display: inline-block" class="ml-2" />
                 <span class="align-middle ml-2 font-bold leading-normal">{{ slotProps.data.representative.name }}</span>
             </template>
             <Column field="representative.name" header="Representative"></Column>

apps/showcase/doc/datatable/rowgroup/RowSpanRowGroupDoc.vue

@@ -33,7 +33,6 @@
                         <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                     </template>
                 </Column>
-                <Column field="date" header="Date" style="min-width: 100px"></Column>
             </DataTable>
         </div>
     </DeferredDemo>
@@ -79,7 +78,6 @@ export default {
             <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
         </template>
     </Column>
-    <Column field="date" header="Date" style="min-width: 100px"></Column>
 </DataTable>
 `,
                 options: `
@@ -114,7 +112,6 @@ export default {
                     <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                 </template>
             </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
         </DataTable>
     </div>
 </template>
@@ -186,7 +183,6 @@ export default {
                     <Tag :value="slotProps.data.status" :severity="getSeverity(slotProps.data.status)" />
                 </template>
             </Column>
-            <Column field="date" header="Date" style="min-width: 100px"></Column>
         </DataTable>
     </div>
 </template>

apps/showcase/tailwind.config.js

@@ -2,9 +2,6 @@
 const primeui = require('tailwindcss-primeui');
 
 module.exports = {
-    corePlugins: {
-        preflight: false
-    },
     darkMode: ['selector', '[class="p-dark"]'],
     content: ['./pages/**/*.vue', './layouts/**/*.vue', './components/**/*.{js,vue,ts}', './doc/**/*.{js,vue,ts}', './error.vue'],
     plugins: [primeui],

package.json

@@ -31,6 +31,7 @@
         "build:showcase": "pnpm --filter showcase build",
         "build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc",
         "dev": "pnpm --filter showcase dev",
+        "preview": "pnpm --filter showcase preview",
         "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev",
         "module:dev": "pnpm --filter @primevue/nuxt-module dev",
         "security:check": "pnpm audit --prod --audit-level high",

packages/core/src/base/style/BaseStyle.js

@@ -3,7 +3,9 @@ import { isNotEmpty, minifyCSS, resolve } from '@primeuix/utils/object';
 import { useStyle } from '@primevue/core/usestyle';
 
 const theme = ({ dt }) => `
-* {
+*,
+::before,
+::after {
     box-sizing: border-box;
 }
 

packages/primevue/src/datatable/style/DataTableStyle.js

@@ -7,6 +7,7 @@ const theme = ({ dt }) => `
 
 .p-datatable-table {
     border-spacing: 0;
+    border-collapse: separate;
     width: 100%;
 }
 

packages/primevue/src/datepicker/style/DatePickerStyle.js

@@ -68,6 +68,7 @@ const theme = ({ dt }) => `
     inset-inline-end: ${dt('form.field.padding.x')};
     margin-block-start: calc(-1 * (${dt('icon.size')} / 2));
     color: ${dt('datepicker.input.icon.color')};
+    line-height: 1;
 }
 
 .p-datepicker-fluid {

packages/primevue/src/treetable/style/TreeTableStyle.js

@@ -7,6 +7,7 @@ const theme = ({ dt }) => `
 
 .p-treetable-table {
     border-spacing: 0;
+    border-collapse: separate;
     width: 100%;
 }
 

packages/themes/src/presets/material/checkbox/index.js

@@ -90,21 +90,21 @@ export default {
 }
 
 .p-checkbox {
+    --p-md-check-icon-t: 10px;
+    --p-md-check-icon-w: 6px;
+    --p-md-check-icon-h: 12px;
+}
+
+.p-checkbox-sm {
     --p-md-check-icon-t: 8px;
     --p-md-check-icon-w: 4px;
     --p-md-check-icon-h: 10px;
 }
 
-.p-checkbox-sm {
-    --p-md-check-icon-t: 6px;
-    --p-md-check-icon-w: 2px;
-    --p-md-check-icon-h: 8px;
-}
-
 .p-checkbox-lg {
-    --p-md-check-icon-t: 10px;
+    --p-md-check-icon-t: 12px;
-    --p-md-check-icon-w: 6px;
+    --p-md-check-icon-w: 8px;
-    --p-md-check-icon-h: 14px;
+    --p-md-check-icon-h: 16px;
 }
 
 @keyframes p-md-check {

pnpm-lock.yaml

@@ -234,7 +234,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: ^0.8.5
-        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)
+        version: 0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))
       '@nuxt/eslint-config':
         specifier: ^0.2.0
         version: 0.2.0(eslint@8.57.1)
@@ -246,7 +246,7 @@ importers:
         version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       '@nuxt/test-utils':
         specifier: ^3.7.3
-        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+        version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       '@primevue/themes':
         specifier: workspace:*
         version: link:../themes
@@ -5350,8 +5350,8 @@ packages:
   prr@1.0.1:
     resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
-  psl@1.10.0:
+  psl@1.11.0:
-    resolution: {integrity: sha512-KSKHEbjAnpUuAUserOq0FxGXCUrzC3WniuSJhvdbs102rL55266ZcHBqLWOsG30spQMlPdpy7icATiAQehg/iA==}
+    resolution: {integrity: sha512-pjFdcBXT4g061k/SQkzNCRnav+1RdIOgrcX8hs5eL3CEQcFZP9qT8T1RWYxGKT11rH1DdIW+kJRfCYykBJuerQ==}
 
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
@@ -8099,12 +8099,13 @@ snapshots:
 
   '@nuxt/devalue@2.0.2': {}
 
-  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)':
+  '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       execa: 7.2.0
       nuxt: 3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3)
+      vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
     transitivePeerDependencies:
       - magicast
       - rollup
@@ -8123,10 +8124,10 @@ snapshots:
       rc9: 2.1.2
       semver: 7.6.3
 
-  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)':
+  '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))':
     dependencies:
       '@antfu/utils': 0.7.10
-      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)
+      '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))
       '@nuxt/devtools-wizard': 0.8.5
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       birpc: 0.2.19
@@ -8157,8 +8158,9 @@ snapshots:
       simple-git: 3.27.0
       sirv: 2.0.4
       unimport: 3.13.2(rollup@4.27.3)
-      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)
+      vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
-      vite-plugin-vue-inspector: 3.7.2
+      vite-plugin-inspect: 0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))
+      vite-plugin-vue-inspector: 3.7.2(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))
       wait-on: 7.2.0
       which: 3.0.1
       ws: 8.18.0
@@ -8434,7 +8436,7 @@ snapshots:
       - rollup
       - supports-color
 
-  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
+  '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
     dependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
       '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
@@ -8460,7 +8462,8 @@ snapshots:
       ufo: 1.5.4
       unenv: 1.10.0
       unplugin: 1.16.0
-      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
+      vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
       vue: 3.5.13(typescript@5.6.3)
       vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
     optionalDependencies:
@@ -12711,7 +12714,7 @@ snapshots:
 
   prr@1.0.1: {}
 
-  psl@1.10.0:
+  psl@1.11.0:
     dependencies:
       punycode: 2.3.1
 
@@ -13411,7 +13414,7 @@ snapshots:
 
   tough-cookie@4.1.4:
     dependencies:
-      psl: 1.10.0
+      psl: 1.11.0
       punycode: 2.3.1
       universalify: 0.2.0
       url-parse: 1.5.10
@@ -13812,7 +13815,7 @@ snapshots:
       optionator: 0.9.4
       typescript: 5.6.3
 
-  vite-plugin-inspect@0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3):
+  vite-plugin-inspect@0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
@@ -13822,13 +13825,14 @@ snapshots:
       open: 9.1.0
       picocolors: 1.1.1
       sirv: 2.0.4
+      vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
     optionalDependencies:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
     transitivePeerDependencies:
       - rollup
       - supports-color
 
-  vite-plugin-vue-inspector@3.7.2:
+  vite-plugin-vue-inspector@3.7.2(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)):
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@@ -13839,6 +13843,7 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       kolorist: 1.8.0
       magic-string: 0.30.13
+      vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -13875,9 +13880,9 @@ snapshots:
       fsevents: 2.3.3
       terser: 5.36.0
 
-  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
+  vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
     dependencies:
-      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
     transitivePeerDependencies:
       - '@cucumber/cucumber'
       - '@jest/globals'