Remove v-deep use pt

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/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>