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

Fixed lints

pull/104/head
cagataycivici 2019-10-17 17:17:27 +03:00
parent 772eb9e819
commit cf556c5d3d
4 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/columngroup/ColumnGroup.vue
View File

@ -15,15 +15,15 @@ export default {
},
data() {
return {
_rows: null
children: null
};
},
mounted() {
this._rows = this.$children;
this.children = this.$children;
},
computed: {
rows() {
return this._rows;
return this.children;
}
}
}

27
src/components/datatable/DataTable.vue
View File

@ -23,7 +23,7 @@
<table ref="table">
<thead class="p-datatable-thead">
<tr v-if="!headerColumnGroup">
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)"
@click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
@dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
:colspan="col.colspan" :rowspan="col.rowspan">
@ -1001,7 +1001,7 @@ export default {
event.preventDefault();
return;
}
this.colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(this.$refs.reorderIndicatorUp);
this.colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(this.$refs.reorderIndicatorUp);
@ -1014,11 +1014,11 @@ export default {
event.preventDefault();
let containerOffset = DomHandler.getOffset(this.$el);
let dropHeaderOffset = DomHandler.getOffset(dropHeader);
if (this.draggedColumn !== dropHeader) {
let targetLeft = dropHeaderOffset.left - containerOffset.left;
let columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
this.$refs.reorderIndicatorUp.style.top = dropHeaderOffset.top - containerOffset.top - (this.colReorderIconHeight - 1) + 'px';
this.$refs.reorderIndicatorDown.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
@ -1032,7 +1032,7 @@ export default {
this.$refs.reorderIndicatorDown.style.left = (targetLeft - Math.ceil(this.colReorderIconWidth / 2))+ 'px';
this.dropPosition = -1;
}
this.$refs.reorderIndicatorUp.style.display = 'block';
this.$refs.reorderIndicatorDown.style.display = 'block';
}
@ -1054,7 +1054,7 @@ export default {
if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
allowDrop = false;
}
if (allowDrop) {
ObjectUtils.reorderArray(this.columnOrder, dragIndex, dropIndex);
@ -1064,7 +1064,7 @@ export default {
dropIndex: dropIndex
});
}
this.$refs.reorderIndicatorUp.style.display = 'none';
this.$refs.reorderIndicatorDown.style.display = 'none';
this.draggedColumn.draggable = false;
@ -1094,7 +1094,7 @@ export default {
}
}
}
return null;
},
onRowMouseDown(event) {
@ -1115,10 +1115,10 @@ export default {
let pageY = event.pageY;
let rowMidY = rowY + DomHandler.getOuterHeight(rowElement) / 2;
let prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) {
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
this.droppedRowIndex = index;
if (prevRowElement)
DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
@ -1130,7 +1130,7 @@ export default {
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
else
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
this.droppedRowIndex = index + 1;
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
}
@ -1155,8 +1155,6 @@ export default {
event.currentTarget.draggable = false;
},
onRowDrop(event) {
let rowElement = event.currentTarget;
if (this.droppedRowIndex != null) {
let dropIndex = (this.draggedRowIndex > this.droppedRowIndex) ? this.droppedRowIndex : (this.droppedRowIndex === 0) ? 0 : this.droppedRowIndex - 1;
let processedData = [...this.processedData];
@ -1192,7 +1190,7 @@ export default {
if (this.allChildren) {
columns = this.allChildren.filter(child => child.$options._propKeys.indexOf('columnKey') !== -1);
if (this.reorderableColumns && this.columnOrder) {
let orderedColumns = [];
for (let columnKey of this.columnOrder) {
@ -1207,7 +1205,6 @@ export default {
})];
}
}
return columns;
},
headerColumnGroup() {

10
src/views/datatable/DataTableDoc.vue
View File

@ -246,8 +246,8 @@ export default {
</tr>
<tr>
<td>reorderableColumn</td>
<td>string</td>
<td>null</td>
<td>boolean</td>
<td>true</td>
<td>Defines if the column itself can be reordered with dragging.</td>
</tr>
</tbody>
@ -630,8 +630,7 @@ data() {
</CodeHighlight>
<h3>Column Reorder</h3>
<p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered.
DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead.</p>
<p>Columns can be reordered using drag drop by setting the <i>reorderableColumns</i> to true. <i>column-reorder</i> is a callback that is invoked when a column is reordered. DataTable keeps the column order state internally using keys that identifies a column using the field property. If the column has no field, use columnKey instead.</p>
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" :reorderableColumns="true"&gt;
@ -644,8 +643,7 @@ data() {
</CodeHighlight>
<h3>Row Reorder</h3>
<p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle.
"row-reorder" is a mandatory callback that is invoked when a column is reordered, use this event to update the new order. Note that the reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
<p>Data can be reordered using drag drop by adding a reorder column that will display an icon as a drag handle. "row-reorder" is a mandatory callback that is invoked when a column is reordered, use this event to update the new order. Note that the reorder icon can be customized using <i>rowReorderIcon</i> of the column component.</p>
<CodeHighlight>
<template v-pre>
&lt;DataTable :value="cars" @row-reorder="onRowReorder"&gt;

4
src/views/datatable/DataTableReorderDemo.vue
View File

@ -72,7 +72,6 @@ export default {
<script>
import CarService from '../../service/CarService';
import DataTableSubMenu from './DataTableSubMenu';
import DataTableDoc from './DataTableDoc';
export default {
data() {
@ -96,7 +95,7 @@ export default {
this.carService.getCarsSmall().then(data => this.cars = data);
},
methods: {
onColReorder(event) {
onColReorder() {
this.$toast.add({severity:'success', summary: 'Column Reordered', life: 3000});
},
onRowReorder(event) {
@ -105,7 +104,6 @@ export default {
}
},
components: {
'DataTableDoc': DataTableDoc,
'DataTableSubMenu': DataTableSubMenu
}
}