vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5717 - Table: remove responsiveLayout

pull/5756/head
tugcekucukoglu 2024-05-10 10:46:03 +03:00
parent 32c592b74e
commit 12f28aaf80
10 changed files with 4 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
api-generator/components/datatable.js
View File

@ -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',

6
api-generator/components/treetable.js
View File

@ -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',

4
components/lib/datatable/BaseDataTable.vue
View File

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

5
components/lib/datatable/BodyCell.vue
View File

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

5
components/lib/datatable/BodyRow.vue
View File

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

19
components/lib/datatable/DataTable.spec.js
View File

@ -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
});

56
components/lib/datatable/DataTable.vue
View File

@ -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);

5
components/lib/datatable/TableBody.vue
View File

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

4
components/lib/treetable/BaseTreeTable.vue
View File

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

3
components/lib/treetable/style/TreeTableStyle.js
View File

@ -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;
}
`;