Remove v-deep use pt

doc/datatable/edit/CellEditDoc.vue

@@ -3,7 +3,19 @@
         <p>Cell editing is enabled by setting <i>editMode</i> as <i>cell</i>, defining input elements with <i>editor</i> templating of a Column and implementing <i>cell-edit-complete</i> to update the state.</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -37,7 +49,19 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+<DataTable
+    :value="products"
+    editMode="cell"
+    @cell-edit-complete="onCellEditComplete"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                class: [{ 'pt-0 pb-0': state['d_editing'] }]
+            })
+        }
+    }"
+>
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
         <template #body="{ data, field }">
             {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -56,7 +80,19 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -129,18 +165,23 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%">
                 <template #body="{ data, field }">
                     {{ field === 'price' ? formatCurrency(data[field]) : data[field] }}
@@ -209,13 +250,7 @@ const formatCurrency = (value) => {
 }
 
 <\/script>
-
+`,
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>`,
                 data: `
 {
     id: '1000',
@@ -274,10 +309,3 @@ const formatCurrency = (value) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>

doc/datatable/edit/FilterSortEditDoc.vue

@@ -3,7 +3,21 @@
         <p>Cell Editing with Sorting and Filter</p>
     </DocSectionText>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableClass="editable-cells-table" tableStyle="min-width: 50rem">
+        <DataTable
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -34,8 +48,21 @@ export default {
             },
             code: {
                 basic: `
-<DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
+<DataTable
-        @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+    v-model:filters="filters"
+    :value="products"
+    editMode="cell"
+    @cell-edit-complete="onCellEditComplete"
+    filterDisplay="row"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        column: {
+            bodycell: ({ state }) => ({
+                class: [{ 'pt-0 pb-0': state['d_editing'] }]
+            })
+        }
+    }"
+>
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
         <template #filter="{ filterModel, filterCallback }">
             <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -49,8 +76,21 @@ export default {
                 options: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
+        <DataTable
-                @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -115,19 +155,25 @@ export default {
     }
 };
 <\/script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>
 `,
                 composition: `
 <template>
     <div class="card p-fluid">
-        <DataTable v-model:filters="filters" :value="products" editMode="cell" tableClass="editable-cells-table" 
+        <DataTable
-                @cell-edit-complete="onCellEditComplete" filterDisplay="row" tableStyle="min-width: 50rem">
+            v-model:filters="filters"
+            :value="products"
+            editMode="cell"
+            @cell-edit-complete="onCellEditComplete"
+            filterDisplay="row"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                column: {
+                    bodycell: ({ state }) => ({
+                        class: [{ 'pt-0 pb-0': state['d_editing'] }]
+                    })
+                }
+            }"
+        >
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" style="width: 25%" sortable filter>
                 <template #filter="{ filterModel, filterCallback }">
                     <InputText v-model="filterModel.value" v-tooltip.top.focus="'Hit enter key to filter'" type="text" @keydown.enter="filterCallback()" class="p-column-filter" />
@@ -184,14 +230,7 @@ const onCellEditComplete = (event) => {
     }
 };
 
-<\/script>
+<\/script>`,
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>`,
                 data: `
 {
     id: '1000',
@@ -240,10 +279,3 @@ const onCellEditComplete = (event) => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.editable-cells-table td.p-cell-editing) {
-    padding-top: 0;
-    padding-bottom: 0;
-}
-</style>

doc/datatable/scroll/FrozenRowsDoc.vue

@@ -3,7 +3,18 @@
         <p>Rows can be fixed during scrolling by enabling the <i>frozenValue</i> property.</p>
     </DocSectionText>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -45,7 +56,18 @@ export default {
             ],
             code: {
                 basic: `
-<DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+<DataTable
+    :value="customers"
+    :frozenValue="lockedCustomers"
+    scrollable
+    scrollHeight="400px"
+    :pt="{
+        table: { style: 'min-width: 50rem' },
+        bodyrow: ({ props }) => ({
+            class: [{ 'font-bold': props.frozenRow }]
+        })
+    }"
+>
     <Column field="name" header="Name"></Column>
     <Column field="country.name" header="Country"></Column>
     <Column field="representative.name" header="Representative"></Column>
@@ -60,7 +82,18 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -127,7 +160,18 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <DataTable :value="customers" :frozenValue="lockedCustomers" scrollable scrollHeight="400px" tableStyle="min-width: 50rem">
+        <DataTable
+            :value="customers"
+            :frozenValue="lockedCustomers"
+            scrollable
+            scrollHeight="400px"
+            :pt="{
+                table: { style: 'min-width: 50rem' },
+                bodyrow: ({ props }) => ({
+                    class: [{ 'font-bold': props.frozenRow }]
+                })
+            }"
+        >
             <Column field="name" header="Name"></Column>
             <Column field="country.name" header="Country"></Column>
             <Column field="representative.name" header="Representative"></Column>
@@ -233,9 +277,3 @@ onMounted(() => {
     }
 };
 </script>
-
-<style lang="scss" scoped>
-::v-deep(.p-datatable-frozen-tbody > tr) {
-    font-weight: 700;
-}
-</style>

doc/progressspinner/CustomDoc.vue

@@ -44,16 +44,3 @@ export default {
     }
 };
 </script>
-
-<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(#ffc106, 0.3);
-}
-
-::v-deep(.styled-box-purple .p-ink) {
-    background: rgba(#9c27b0, 0.3);
-}
-</style>

doc/scrolltop/ElementDoc.vue

@@ -11,7 +11,18 @@
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
     <DocSectionCode :code="code" />
@@ -23,7 +34,7 @@ export default {
         return {
             code: {
                 basic: `
-<ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+<ScrollTop target="parent" :threshold="100" icon="pi pi-arrow-up" />
 `,
                 options: `
 <template>
@@ -36,31 +47,21 @@ export default {
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
 </template>
-
-<script>
-<\/script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>
 `,
                 composition: `
 <template>
@@ -73,51 +74,24 @@ export default {
                 dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas. Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris. Eget egestas purus viverra accumsan in nisl nisi.
                 Suscipit adipiscing bibendum est ultricies integer. Mattis aliquam faucibus purus in massa tempor nec.
             </p>
-            <ScrollTop target="parent" :threshold="100" class="custom-scrolltop" icon="pi pi-arrow-up" />
+            <ScrollTop
+                target="parent"
+                :threshold="100"
+                icon="pi pi-arrow-up"
+                :pt="{
+                    root: 'w-2rem h-2rem border-round-sm bg-primary hover:bg-primary',
+                    icon: {
+                        class: 'text-base',
+                        style: 'color: var(--primary-color-text)'
+                    }
+                }"
+            />
         </ScrollPanel>
     </div>
 </template>
-
+`
-<script setup>
-<\/script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>`
             }
         };
     }
 };
 </script>
-
-<style scoped>
-::v-deep(.custom-scrolltop) {
-    width: 2rem;
-    height: 2rem;
-    border-radius: 4px;
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop:hover) {
-    background-color: var(--primary-color);
-}
-
-::v-deep(.custom-scrolltop .p-scrolltop-icon) {
-    font-size: 1rem;
-    color: var(--primary-color-text);
-}
-</style>

doc/steps/InteractiveDoc.vue

@@ -162,16 +162,6 @@ export default {
     }
 }
 <\/script>
-
-<style scoped>
-::v-deep(b) {
-    display: block;
-}
-
-::v-deep(.p-card-body) {
-    padding: 2rem;
-}
-</style>
 `,
                 composition: `
 <template>
@@ -251,16 +241,7 @@ const isActive = (item) => {
     return item.route ? router.resolve(item.route).path === route.path : false;
 };
 <\/script>
-
+`,
-<style scoped>
-::v-deep(b) {
-    display: block;
-}
-
-::v-deep(.p-card-body) {
-    padding: 2rem;
-}
-</style>`,
                 pages: [
                     {
                         tabName: 'PersonalDemo',

doc/timeline/TemplateDoc.vue

@@ -10,7 +10,7 @@
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -51,7 +51,7 @@ export default {
         </span>
     </template>
     <template #content="slotProps">
-        <Card>
+        <Card class="mt-3">
             <template #title>
                 {{ slotProps.item.status }}
             </template>
@@ -80,7 +80,7 @@ export default {
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -130,10 +130,6 @@ export default {
         .p-timeline-event-opposite {
             flex: 0;
         }
-
-        .p-card {
-            margin-top: 1rem;
-        }
     }
 }
 </style>
@@ -148,7 +144,7 @@ export default {
                 </span>
             </template>
             <template #content="slotProps">
-                <Card>
+                <Card class="mt-3">
                     <template #title>
                         {{ slotProps.item.status }}
                     </template>
@@ -195,10 +191,6 @@ const events = ref([
         .p-timeline-event-opposite {
             flex: 0;
         }
-
-        .p-card {
-            margin-top: 1rem;
-        }
     }
 }
 </style>`
@@ -207,3 +199,21 @@ const events = ref([
     }
 };
 </script>
+
+<style lang="scss" scoped>
+@media screen and (max-width: 960px) {
+    ::v-deep(.customized-timeline) {
+        .p-timeline-event:nth-child(even) {
+            flex-direction: row !important;
+
+            .p-timeline-event-content {
+                text-align: left !important;
+            }
+        }
+
+        .p-timeline-event-opposite {
+            flex: 0;
+        }
+    }
+}
+</style>