mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Components update v.3.21.0
This commit is contained in:
Bahadır Sofuoğlu
parent
18497d55b1
commit
defd6ff6e2
242 changed files with 28022 additions and 17523 deletions
|
|
@ -31,7 +31,7 @@
|
|||
<div class="p-datatable-wrapper" :style="{ maxHeight: virtualScrollerDisabled ? scrollHeight : '' }">
|
||||
<DTVirtualScroller ref="virtualScroller" v-bind="virtualScrollerOptions" :items="processedData" :columns="columns" :style="{ height: scrollHeight }" :disabled="virtualScrollerDisabled" loaderDisabled :showSpacer="false">
|
||||
<template #content="slotProps">
|
||||
<table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
|
||||
<table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]" v-bind="tableProps">
|
||||
<DTTableHeader
|
||||
:columnGroup="headerColumnGroup"
|
||||
:columns="slotProps.columns"
|
||||
|
|
@ -49,6 +49,7 @@
|
|||
:filters="d_filters"
|
||||
:filtersStore="filters"
|
||||
:filterDisplay="filterDisplay"
|
||||
:filterInputProps="filterInputProps"
|
||||
@column-click="onColumnHeaderClick($event)"
|
||||
@column-mousedown="onColumnHeaderMouseDown($event)"
|
||||
@filter-change="onFilterChange"
|
||||
|
|
@ -90,6 +91,7 @@
|
|||
:editingRowKeys="d_editingRowKeys"
|
||||
:templates="$slots"
|
||||
:responsiveLayout="responsiveLayout"
|
||||
:isVirtualScrollerDisabled="true"
|
||||
@rowgroup-toggle="toggleRowGroup"
|
||||
@row-click="onRowClick($event)"
|
||||
@row-dblclick="onRowDblClick($event)"
|
||||
|
|
@ -113,7 +115,6 @@
|
|||
@row-edit-cancel="onRowEditCancel($event)"
|
||||
:editingMeta="d_editingMeta"
|
||||
@editing-meta-change="onEditingMetaChange"
|
||||
:isVirtualScrollerDisabled="true"
|
||||
/>
|
||||
<DTTableBody
|
||||
ref="bodyRef"
|
||||
|
|
@ -144,12 +145,14 @@
|
|||
:editingRowKeys="d_editingRowKeys"
|
||||
:templates="$slots"
|
||||
:responsiveLayout="responsiveLayout"
|
||||
:virtualScrollerContentProps="slotProps"
|
||||
:isVirtualScrollerDisabled="virtualScrollerDisabled"
|
||||
@rowgroup-toggle="toggleRowGroup"
|
||||
@row-click="onRowClick($event)"
|
||||
@row-dblclick="onRowDblClick($event)"
|
||||
@row-rightclick="onRowRightClick($event)"
|
||||
@row-touchend="onRowTouchEnd"
|
||||
@row-keydown="onRowKeyDown"
|
||||
@row-keydown="onRowKeyDown($event, slotProps)"
|
||||
@row-mousedown="onRowMouseDown"
|
||||
@row-dragstart="onRowDragStart($event)"
|
||||
@row-dragover="onRowDragOver($event)"
|
||||
|
|
@ -167,8 +170,6 @@
|
|||
@row-edit-cancel="onRowEditCancel($event)"
|
||||
:editingMeta="d_editingMeta"
|
||||
@editing-meta-change="onEditingMetaChange"
|
||||
:virtualScrollerContentProps="slotProps"
|
||||
:isVirtualScrollerDisabled="virtualScrollerDisabled"
|
||||
/>
|
||||
<DTTableFooter :columnGroup="footerColumnGroup" :columns="slotProps.columns" />
|
||||
</table>
|
||||
|
|
@ -205,13 +206,13 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { ObjectUtils, DomHandler, UniqueComponentId } from 'primevue/utils';
|
||||
import { FilterMatchMode, FilterOperator, FilterService } from 'primevue/api';
|
||||
import Paginator from 'primevue/paginator';
|
||||
import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
|
||||
import VirtualScroller from 'primevue/virtualscroller';
|
||||
import TableHeader from './TableHeader.vue';
|
||||
import TableBody from './TableBody.vue';
|
||||
import TableFooter from './TableFooter.vue';
|
||||
import TableHeader from './TableHeader.vue';
|
||||
|
||||
export default {
|
||||
name: 'DataTable',
|
||||
|
|
@ -289,7 +290,7 @@ export default {
|
|||
default: true
|
||||
},
|
||||
paginatorTemplate: {
|
||||
type: String,
|
||||
type: [Object, String],
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
|
||||
},
|
||||
pageLinkSize: {
|
||||
|
|
@ -433,7 +434,7 @@ export default {
|
|||
default: null
|
||||
},
|
||||
groupRowsBy: {
|
||||
type: [Array, String],
|
||||
type: [Array, String, Function],
|
||||
default: null
|
||||
},
|
||||
expandableRowGroups: {
|
||||
|
|
@ -511,6 +512,14 @@ export default {
|
|||
tableClass: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
tableProps: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
filterInputProps: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
@ -864,6 +873,9 @@ export default {
|
|||
},
|
||||
onRowClick(e) {
|
||||
const event = e.originalEvent;
|
||||
const index = e.index;
|
||||
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
|
||||
const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
|
||||
|
||||
if (DomHandler.isClickable(event.target)) {
|
||||
return;
|
||||
|
|
@ -940,6 +952,11 @@ export default {
|
|||
}
|
||||
|
||||
this.rowTouched = false;
|
||||
|
||||
if (focusedItem) {
|
||||
focusedItem.tabIndex = '-1';
|
||||
DomHandler.find(body, 'tr.p-selectable-row')[index].tabIndex = '0';
|
||||
}
|
||||
},
|
||||
onRowDblClick(e) {
|
||||
const event = e.originalEvent;
|
||||
|
|
@ -960,48 +977,153 @@ export default {
|
|||
onRowTouchEnd() {
|
||||
this.rowTouched = true;
|
||||
},
|
||||
onRowKeyDown(e) {
|
||||
onRowKeyDown(e, slotProps) {
|
||||
const event = e.originalEvent;
|
||||
const rowData = e.data;
|
||||
const rowIndex = e.index;
|
||||
const metaKey = event.metaKey || event.ctrlKey;
|
||||
|
||||
if (this.selectionMode) {
|
||||
const row = event.target;
|
||||
|
||||
switch (event.which) {
|
||||
//down arrow
|
||||
case 40:
|
||||
var nextRow = this.findNextSelectableRow(row);
|
||||
|
||||
if (nextRow) {
|
||||
nextRow.focus();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
switch (event.code) {
|
||||
case 'ArrowDown':
|
||||
this.onArrowDownKey(event, row, rowIndex, slotProps);
|
||||
break;
|
||||
|
||||
//up arrow
|
||||
case 38:
|
||||
var prevRow = this.findPrevSelectableRow(row);
|
||||
|
||||
if (prevRow) {
|
||||
prevRow.focus();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
case 'ArrowUp':
|
||||
this.onArrowUpKey(event, row, rowIndex, slotProps);
|
||||
break;
|
||||
|
||||
//enter
|
||||
case 13:
|
||||
this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
|
||||
case 'Home':
|
||||
this.onHomeKey(event, row, rowIndex, slotProps);
|
||||
break;
|
||||
|
||||
case 'End':
|
||||
this.onEndKey(event, row, rowIndex, slotProps);
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
this.onEnterKey(event, rowData, rowIndex);
|
||||
break;
|
||||
|
||||
case 'Space':
|
||||
this.onSpaceKey(event, rowData, rowIndex, slotProps);
|
||||
break;
|
||||
|
||||
case 'Tab':
|
||||
this.onTabKey(event, rowIndex);
|
||||
break;
|
||||
|
||||
default:
|
||||
//no op
|
||||
if (event.code === 'KeyA' && metaKey) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
|
||||
this.$emit('update:selection', data);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onArrowDownKey(event, row, rowIndex, slotProps) {
|
||||
const nextRow = this.findNextSelectableRow(row);
|
||||
|
||||
nextRow && this.focusRowChange(row, nextRow);
|
||||
|
||||
if (event.shiftKey) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
const nextRowIndex = rowIndex + 1 >= data.length ? data.length - 1 : rowIndex + 1;
|
||||
|
||||
this.onRowClick({ originalEvent: event, data: data[nextRowIndex], index: nextRowIndex });
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onArrowUpKey(event, row, rowIndex, slotProps) {
|
||||
const prevRow = this.findPrevSelectableRow(row);
|
||||
|
||||
prevRow && this.focusRowChange(row, prevRow);
|
||||
|
||||
if (event.shiftKey) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
const prevRowIndex = rowIndex - 1 <= 0 ? 0 : rowIndex - 1;
|
||||
|
||||
this.onRowClick({ originalEvent: event, data: data[prevRowIndex], index: prevRowIndex });
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onHomeKey(event, row, rowIndex, slotProps) {
|
||||
const firstRow = this.findFirstSelectableRow();
|
||||
|
||||
firstRow && this.focusRowChange(row, firstRow);
|
||||
|
||||
if (event.ctrlKey && event.shiftKey) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
|
||||
this.$emit('update:selection', data.slice(0, rowIndex + 1));
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onEndKey(event, row, rowIndex, slotProps) {
|
||||
const lastRow = this.findLastSelectableRow();
|
||||
|
||||
lastRow && this.focusRowChange(row, lastRow);
|
||||
|
||||
if (event.ctrlKey && event.shiftKey) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
|
||||
this.$emit('update:selection', data.slice(rowIndex, data.length));
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
},
|
||||
onEnterKey(event, rowData, rowIndex) {
|
||||
this.onRowClick({ originalEvent: event, data: rowData, index: rowIndex });
|
||||
event.preventDefault();
|
||||
},
|
||||
onSpaceKey(event, rowData, rowIndex, slotProps) {
|
||||
this.onEnterKey(event, rowData, rowIndex);
|
||||
|
||||
if (event.shiftKey && this.selection !== null) {
|
||||
const data = this.dataToRender(slotProps.rows);
|
||||
let index;
|
||||
|
||||
if (this.selection.length > 0) {
|
||||
let firstSelectedRowIndex, lastSelectedRowIndex;
|
||||
|
||||
firstSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[0], data);
|
||||
lastSelectedRowIndex = ObjectUtils.findIndexInList(this.selection[this.selection.length - 1], data);
|
||||
|
||||
index = rowIndex <= firstSelectedRowIndex ? lastSelectedRowIndex : firstSelectedRowIndex;
|
||||
} else {
|
||||
index = ObjectUtils.findIndexInList(this.selection, data);
|
||||
}
|
||||
|
||||
const _selection = index !== rowIndex ? data.slice(Math.min(index, rowIndex), Math.max(index, rowIndex) + 1) : rowData;
|
||||
|
||||
this.$emit('update:selection', _selection);
|
||||
}
|
||||
},
|
||||
onTabKey(event, rowIndex) {
|
||||
const body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
|
||||
const rows = DomHandler.find(body, 'tr.p-selectable-row');
|
||||
|
||||
if (event.code === 'Tab' && rows && rows.length > 0) {
|
||||
const firstSelectedRow = DomHandler.findSingle(body, 'tr.p-highlight');
|
||||
const focusedItem = DomHandler.findSingle(body, 'tr.p-selectable-row[tabindex="0"]');
|
||||
|
||||
if (firstSelectedRow) {
|
||||
firstSelectedRow.tabIndex = '0';
|
||||
focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
|
||||
} else {
|
||||
rows[0].tabIndex = '0';
|
||||
focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
|
||||
}
|
||||
}
|
||||
},
|
||||
findNextSelectableRow(row) {
|
||||
let nextRow = row.nextElementSibling;
|
||||
|
||||
|
|
@ -1022,6 +1144,21 @@ export default {
|
|||
return null;
|
||||
}
|
||||
},
|
||||
findFirstSelectableRow() {
|
||||
const firstRow = DomHandler.findSingle(this.$refs.table, '.p-selectable-row');
|
||||
|
||||
return firstRow;
|
||||
},
|
||||
findLastSelectableRow() {
|
||||
const rows = DomHandler.find(this.$refs.table, '.p-selectable-row');
|
||||
|
||||
return rows ? rows[rows.length - 1] : null;
|
||||
},
|
||||
focusRowChange(firstFocusableRow, currentFocusedRow) {
|
||||
firstFocusableRow.tabIndex = '-1';
|
||||
currentFocusedRow.tabIndex = '0';
|
||||
DomHandler.focus(currentFocusedRow);
|
||||
},
|
||||
toggleRowWithRadio(event) {
|
||||
const rowData = event.data;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue