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

api-generator/build-apidoc.js

@@ -358,6 +358,10 @@ if (project) {
                                         .map((s) => {
                                             if (s.text.indexOf('[here]') > -1) {
                                                 return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(s.text.indexOf(')') + 1)}`;
+                                            } else if (s.text.indexOf('[MDN Reference]') > -1) {
+                                                return `${s.text.slice(0, s.text.indexOf('[MDN Reference]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">MDN Reference</a> ${s.text.slice(
+                                                    s.text.indexOf(')') + 1
+                                                )}`;
                                             }
 
                                             return s.text || '';

components/lib/scrollpanel/ScrollPanel.vue

@@ -103,6 +103,7 @@ export default {
             }
         },
         moveBar() {
+            if (this.$refs.content) {
                 /* horizontal scroll */
                 let totalWidth = this.$refs.content.scrollWidth;
                 let ownWidth = this.$refs.content.clientWidth;
@@ -136,6 +137,7 @@ export default {
                         this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
                     }
                 });
+            }
         },
         onYBarMouseDown(e) {
             this.isYBarClicked = true;

doc/common/apidoc/index.json

@@ -882,7 +882,7 @@
                             "readonly": false,
                             "type": "null | Element | Document",
                             "default": "",
-                            "description": "Specifies the  `root`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root)"
+                            "description": "Specifies the  `root`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/root\">MDN Reference</a> "
                         },
                         {
                             "name": "rootMargin",
@@ -890,7 +890,7 @@
                             "readonly": false,
                             "type": "string",
                             "default": "",
-                            "description": "Specifies the  `rootMargin`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin)"
+                            "description": "Specifies the  `rootMargin`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/rootMargin\">MDN Reference</a> "
                         },
                         {
                             "name": "threshold",
@@ -898,7 +898,7 @@
                             "readonly": false,
                             "type": "readonly number[]",
                             "default": "",
-                            "description": "Specifies the  `threshold`  option of the IntersectionObserver API\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds)"
+                            "description": "Specifies the  `threshold`  option of the IntersectionObserver API\n <a target=\"_blank\" href=\"https://developer.mozilla.org/docs/Web/API/IntersectionObserver/thresholds\">MDN Reference</a> "
                         },
                         {
                             "name": "animateOnLoad",

doc/datatable/edit/CellEditDoc.vue

@@ -49,10 +49,7 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable
+<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-    :value="products"
-    editMode="cell"
-    @cell-edit-complete="onCellEditComplete"
     :pt="{
         table: { style: 'min-width: 50rem' },
         column: {
@@ -80,10 +77,7 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
@@ -169,10 +163,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable
+        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {

doc/datatable/edit/FilterSortEditDoc.vue

@@ -48,12 +48,7 @@ export default {
             },
             code: {
                 basic: `
-<DataTable
+<DataTable  v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete"  filterDisplay="row"
-    v-model:filters="filters"
-    :value="products"
-    editMode="cell"
-    @cell-edit-complete="onCellEditComplete"
-    filterDisplay="row"
     :pt="{
         table: { style: 'min-width: 50rem' },
         column: {
@@ -76,12 +71,7 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable
+        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
-            v-model:filters="filters"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
-            filterDisplay="row"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {
@@ -159,12 +149,7 @@ export default {
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable
+        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row"
-            v-model:filters="filters"
-            :value="products"
-            editMode="cell"
-            @cell-edit-complete="onCellEditComplete"
-            filterDisplay="row"
             :pt="{
                 table: { style: 'min-width: 50rem' },
                 column: {

doc/datatable/edit/RowEditDoc.vue

@@ -6,7 +6,21 @@
         </p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:editingRows="editingRows"
+            :value="products"
+            editMode="row"
+            dataKey="id"
+            @row-edit-save="onRowEditSave"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style: state['d_editing'] && 'padding-top: 0.6rem; padding-bottom: 0.6rem'
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -58,8 +72,16 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
+<DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-        @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+            })
+        }
+    }"
+>
     <Column field="code" header="Code" style="width: 20%">
         <template #editor="{ data, field }">
             <InputText v-model="data[field]" />
@@ -96,8 +118,16 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-                @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -178,19 +208,20 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id"
+        <DataTable v-model:editingRows="editingRows" :value="products" editMode="row" dataKey="id" @row-edit-save="onRowEditSave"
-                @row-edit-save="onRowEditSave" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        style:  state['d_editing']&&'padding-top: 0.6rem; padding-bottom: 0.6rem' 
+                    })
+                }
+            }"
+        >
             <Column field="code" header="Code" style="width: 20%">
                 <template #editor="{ data, field }">
                     <InputText v-model="data[field]" />
@@ -266,14 +297,7 @@ const formatCurrency = (value) => {
     return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(value);
 }
 
-<\/script>
+<\/script>`,
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>`,
                 data: `
 {
     id: '1000',
@@ -322,10 +346,3 @@ const formatCurrency = (value) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0.6rem;
-    padding-bottom: 0.6rem;
-}
-</style>

doc/inputnumber/VerticalDoc.vue

@@ -54,7 +54,7 @@ export default {
 </template>
 
 <script setup>
-import { ref } from "vuetest";
+import { ref } from "vue";
 
 const value = ref(50);
 <\/script>

doc/ripple/ConfigurationDoc.vue

@@ -14,7 +14,6 @@ export default {
 mounted() {
     this.$primevue.config.ripple = true;
 }
-
 `,
                 options: `
 mounted() {
@@ -26,7 +25,8 @@ import { usePrimeVue } from 'primevue/config';
 
 const PrimeVue = usePrimeVue();
 
-PrimeVue.config.ripple = true;`
+PrimeVue.config.ripple = true;
+`
             }
         };
     }

doc/ripple/CustomDoc.vue

@@ -3,9 +3,36 @@
         <p>Default styling of the animation adds a shade of white. This can easily be customized using css that changes the color of <i>p-ink</i> element.</p>
     </DocSectionText>
     <div class="card flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+            v-ripple="{
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,31 +43,74 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+<div
-<div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+    v-ripple="{
-<div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+        pt: {
+            root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Green
+</div>
+<div
+    v-ripple="{
+        pt: {
+            root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Orange
+</div>
+<div
+    v-ripple="{
+        pt: {
+            root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+        }
+    }"
+    class="p-ripple box shadow-2"
+>
+    Purple
+</div>
 `,
                 options: `
 <template>
-    <div class="flex justify-content-center align-items-center">
+    <div class="flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+            v-ripple="{
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
 </template>
 
 <style scoped>
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
-
 .box {
     background: var(--surface-card);
     padding: 2rem;
@@ -52,25 +122,41 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="flex justify-content-center align-items-center">
+    <div class="flex justify-content-center align-items-center gap-2">
-        <div v-ripple class="p-ripple box styled-box-green shadow-2">Green</div>
+        <div
-        <div v-ripple class="p-ripple box styled-box-orange shadow-2">Orange</div>
+            v-ripple="{
-        <div v-ripple class="p-ripple box styled-box-purple shadow-2">Purple</div>
+                pt: {
+                    root: { style: 'background: rgba(75, 175, 80, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Green
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(255, 193, 6, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Orange
+        </div>
+        <div
+            v-ripple="{
+                pt: {
+                    root: { style: 'background: rgba(156, 39, 176, 0.3)' }
+                }
+            }"
+            class="p-ripple box shadow-2"
+        >
+            Purple
+        </div>
     </div>
 </template>
 
 <style scoped>
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
-
 .box {
     background: var(--surface-card);
     padding: 2rem;
@@ -93,15 +179,4 @@ export default {
     width: 110px;
     text-align: center;
 }
-
-::v-deep(.styled-box-green .p-ink) {
-    background: rgba(75, 175, 80, 0.3);
-}
-::v-deep(.styled-box-orange .p-ink) {
-    background: rgba(255, 193, 6, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(156, 39, 176, 0.3);
-}
 </style>

doc/virtualscroller/HorizontalDoc.vue

@@ -3,13 +3,13 @@
         <p>Setting <i>orientation</i> to <i>horizontal</i> enables scrolling horizontally. In this case, the <i>itemSize</i> should refer to the width of an item.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr">{{ item }}</div>
             </template>
         </VirtualScroller>
     </div>
-    <DocSectionCode :code="code" :dependencies="{ sass: '1.45.0', 'sass-loader': '8.0.2' }" />
+    <DocSectionCode :code="code" />
 </template>
 
 <script>
@@ -19,7 +19,7 @@ export default {
             items: null,
             code: {
                 basic: `
-<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+<VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
     <template v-slot:item="{ item, options }">
         <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
     </template>
@@ -28,7 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
@@ -48,20 +48,11 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px">
+        <VirtualScroller :items="items" :itemSize="50" orientation="horizontal" class="border-1 surface-border border-round" style="width: 200px; height: 200px" :pt="{ content: 'flex flex-row' }">
             <template v-slot:item="{ item, options }">
                 <div :class="['flex align-items-center p-2', { 'surface-hover': options.odd }]" style="width: 50px; writing-mode: vertical-lr;">{{ item }}</div>
             </template>
@@ -74,15 +65,7 @@ import { ref } from 'vue';
 
 const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`));
 <\/script>
-
+`
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>`
             }
         };
     },
@@ -91,12 +74,3 @@ const items = ref(Array.from({ length: 100000 }).map((_, i) => \`Item #\${i}\`))
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.p-virtualscroller) {
-    .p-virtualscroller-content {
-        display: flex;
-        flex-direction: row;
-    }
-}
-</style>