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

api-generator/components/datatable.js

@@ -342,12 +342,6 @@ const DataTableProps = [
         default: 'null',
         description: 'Items of the frozen part in scrollable DataTable.'
     },
-    {
-        name: 'responsiveLayout',
-        type: 'string',
-        default: 'stack',
-        description: 'Defines the responsive mode, valid options are "stack" and "scroll".'
-    },
     {
         name: 'breakpoint',
         type: 'string',

api-generator/components/treetable.js

@@ -216,12 +216,6 @@ const TreeTableProps = [
         default: 'null',
         description: 'Height of the scroll viewport in fixed units or the "flex" keyword for a dynamic size.'
     },
-    {
-        name: 'responsiveLayout',
-        type: 'string',
-        default: 'null',
-        description: 'Defines the responsive mode, currently only option is scroll.'
-    },
     {
         name: 'size',
         type: 'string',

components/lib/datatable/BaseDataTable.vue

@@ -234,10 +234,6 @@ export default {
             type: Array,
             default: null
         },
-        responsiveLayout: {
-            type: String,
-            default: 'scroll'
-        },
         breakpoint: {
             type: String,
             default: '960px'

components/lib/datatable/BodyCell.vue

@@ -17,7 +17,6 @@
         :data-p-cell-editing="d_editing"
         :data-p-frozen-column="columnProp('frozen')"
     >
-        <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPT('columnTitle')">{{ columnProp('header') }}</span>
         <component
             v-if="column.children && column.children.body && !d_editing"
             :is="column.children.body"
@@ -189,10 +188,6 @@ export default {
             type: String,
             default: null
         },
-        responsiveLayout: {
-            type: String,
-            default: 'stack'
-        },
         virtualScrollerContentProps: {
             type: Object,
             default: null

components/lib/datatable/BodyRow.vue

@@ -52,7 +52,6 @@
                     :editMode="editMode"
                     :editing="editMode === 'row' && isRowEditing"
                     :editingMeta="editingMeta"
-                    :responsiveLayout="responsiveLayout"
                     :virtualScrollerContentProps="virtualScrollerContentProps"
                     :ariaControls="expandedRowId + '_' + rowIndex + '_expansion'"
                     :name="nameAttributeSelector"
@@ -250,10 +249,6 @@ export default {
             type: Boolean,
             default: false
         },
-        responsiveLayout: {
-            type: String,
-            default: 'stack'
-        },
         editButtonProps: {
             type: Object,
             default: null

components/lib/datatable/DataTable.spec.js

@@ -186,7 +186,7 @@ describe('DataTable.vue', () => {
                 Column
             },
             template: `
-                <DataTable :value="sales" responsiveLayout="scroll">
+                <DataTable :value="sales">
                     <ColumnGroup type="header">
                         <Row>
                             <Column header="Product" :rowspan="3" />
@@ -1257,8 +1257,7 @@ describe('DataTable.vue', () => {
                 sortOrder: 1,
                 scrollable: true,
                 expandableRowGroups: true,
-                expandedRowGroups: null,
-                responsiveLayout: 'scroll'
+                expandedRowGroups: null
             },
             slots: {
                 default: `
@@ -1333,8 +1332,7 @@ describe('DataTable.vue', () => {
                 sortMode: 'single',
                 sortField: 'name',
                 sortOrder: 1,
-                scrollable: true,
-                responsiveLayout: 'scroll'
+                scrollable: true
             },
             slots: {
                 default: `
@@ -1397,16 +1395,5 @@ describe('DataTable.vue', () => {
 
     // contextmenu
 
-    // responsive
-    it('should have stack layout', async () => {
-        await wrapper.setProps({ responsiveLayout: 'stack' });
-
-        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-stack');
-    });
-
-    it('should have scroll layout', () => {
-        expect(wrapper.find('.p-datatable').classes()).toContain('p-datatable-responsive-scroll');
-    });
-
     // row styling
 });

components/lib/datatable/DataTable.vue

@@ -130,7 +130,6 @@
                             :editingRows="editingRows"
                             :editingRowKeys="d_editingRowKeys"
                             :templates="$slots"
-                            :responsiveLayout="responsiveLayout"
                             :editButtonProps="rowEditButtonProps"
                             :isVirtualScrollerDisabled="true"
                             @rowgroup-toggle="toggleRowGroup"
@@ -187,7 +186,6 @@
                             :editingRows="editingRows"
                             :editingRowKeys="d_editingRowKeys"
                             :templates="$slots"
-                            :responsiveLayout="responsiveLayout"
                             :editButtonProps="rowEditButtonProps"
                             :virtualScrollerContentProps="slotProps"
                             :isVirtualScrollerDisabled="virtualScrollerDisabled"
@@ -425,10 +423,6 @@ export default {
     mounted() {
         this.$el.setAttribute(this.attributeSelector, '');
 
-        if (this.responsiveLayout === 'stack' && !this.scrollable && !this.unstyled) {
-            this.createResponsiveStyle();
-        }
-
         if (this.isStateful()) {
             this.restoreState();
 
@@ -442,7 +436,6 @@ export default {
     beforeUnmount() {
         this.unbindColumnResizeEvents();
         this.destroyStyleElement();
-        this.destroyResponsiveStyle();
 
         this.d_columns.clear();
         this.d_columnGroups.clear();
@@ -1911,55 +1904,6 @@ export default {
             DomHandler.setAttribute(this.styleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
             document.head.appendChild(this.styleElement);
         },
-        createResponsiveStyle() {
-            if (!this.responsiveStyleElement) {
-                this.responsiveStyleElement = document.createElement('style');
-                this.responsiveStyleElement.type = 'text/css';
-                DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
-                document.head.appendChild(this.responsiveStyleElement);
-
-                let tableSelector = `.p-datatable-table-container ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
-                let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`;
-                let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
-                let innerHTML = `
-@media screen and (max-width: ${this.breakpoint}) {
-    ${selector} > .p-datatable-thead > tr > th,
-    ${selector} > .p-datatable-tfoot > tr > td {
-        display: none;
-    }
-
-    ${selector} > .p-datatable-tbody > tr > td {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: space-between;
-    }
-
-    ${selector} > .p-datatable-tbody > tr > td:not(:last-child) {
-        border: 0 none;
-    }
-
-    ${gridLinesSelector} > .p-datatable-tbody > tr > td:last-child {
-        border-top: 0;
-        border-right: 0;
-        border-left: 0;
-    }
-
-    ${selector} > .p-datatable-tbody > tr > td > .p-column-title {
-        display: block;
-    }
-}
-`;
-
-                this.responsiveStyleElement.innerHTML = innerHTML;
-            }
-        },
-        destroyResponsiveStyle() {
-            if (this.responsiveStyleElement) {
-                document.head.removeChild(this.responsiveStyleElement);
-                this.responsiveStyleElement = null;
-            }
-        },
         destroyStyleElement() {
             if (this.styleElement) {
                 document.head.removeChild(this.styleElement);

components/lib/datatable/TableBody.vue

@@ -32,7 +32,6 @@
                     :editingRowKeys="editingRowKeys"
                     :templates="templates"
                     :editButtonProps="editButtonProps"
-                    :responsiveLayout="responsiveLayout"
                     :virtualScrollerContentProps="virtualScrollerContentProps"
                     :isVirtualScrollerDisabled="isVirtualScrollerDisabled"
                     :editingMeta="editingMeta"
@@ -216,10 +215,6 @@ export default {
             type: Object,
             default: null
         },
-        responsiveLayout: {
-            type: String,
-            default: 'stack'
-        },
         virtualScrollerContentProps: {
             type: Object,
             default: null

components/lib/treetable/BaseTreeTable.vue

@@ -154,10 +154,6 @@ export default {
             type: String,
             default: null
         },
-        responsiveLayout: {
-            type: String,
-            default: 'scroll'
-        },
         size: {
             type: String,
             default: null

components/lib/treetable/style/TreeTableStyle.js

@@ -445,8 +445,7 @@ p-treetable-gridlines .p-treetable-tbody > tr:last-child>td {
     color: inherit;
 }
 
-.p-treetable .p-treetable-row-checkbox {
-    vertical-align: middle;
+.p-treetable .p-treetable-node-checkbox {
     margin-right: 0.5rem;
 }
 `;