primevue 3.16.2 → 3.17.0

package/datatable/TableBody.vue

@@ -2,57 +2,110 @@
     <tbody :ref="bodyRef" class="p-datatable-tbody" role="rowgroup" :style="bodyStyle">
         <template v-if="!empty">
             <template v-for="(rowData, index) of value" :key="getRowKey(rowData, getRowIndex(index)) + '_subheader'">
-                <tr class="p-rowgroup-header" :style="rowGroupHeaderStyle" v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" role="row">
+                <tr v-if="templates['groupheader'] && rowGroupMode === 'subheader' && shouldRenderRowGroupHeader(value, rowData, getRowIndex(index))" class="p-rowgroup-header" :style="rowGroupHeaderStyle" role="row">
                     <td :colspan="columnsLength - 1">
-                        <button class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" v-if="expandableRowGroups" type="button">
+                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
                             <span :class="rowGroupTogglerIcon(rowData)"></span>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
-                <tr :class="getRowClass(rowData)" :style="rowStyle" :key="getRowKey(rowData, getRowIndex(index))"
-                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData): true"
-                    @click="onRowClick($event, rowData, getRowIndex(index))" @dblclick="onRowDblClick($event, rowData, getRowIndex(index))" @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, getRowIndex(index))" :tabindex="selectionMode || contextMenu ? '0' : null"
-                    @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, getRowIndex(index))" @dragover="onRowDragOver($event, getRowIndex(index))" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)" role="row">
-                    <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, getRowIndex(index))" :rowData="rowData" :column="col" :rowIndex="getRowIndex(index)" :index="i" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
+                <tr
+                    v-if="expandableRowGroups ? isRowGroupExpanded(rowData) : true"
+                    :key="getRowKey(rowData, getRowIndex(index))"
+                    :class="getRowClass(rowData)"
+                    :style="rowStyle"
+                    @click="onRowClick($event, rowData, getRowIndex(index))"
+                    @dblclick="onRowDblClick($event, rowData, getRowIndex(index))"
+                    @contextmenu="onRowRightClick($event, rowData, getRowIndex(index))"
+                    @touchend="onRowTouchEnd($event)"
+                    @keydown="onRowKeyDown($event, rowData, getRowIndex(index))"
+                    :tabindex="selectionMode || contextMenu ? '0' : null"
+                    @mousedown="onRowMouseDown($event)"
+                    @dragstart="onRowDragStart($event, getRowIndex(index))"
+                    @dragover="onRowDragOver($event, getRowIndex(index))"
+                    @dragleave="onRowDragLeave($event)"
+                    @dragend="onRowDragEnd($event)"
+                    @drop="onRowDrop($event)"
+                    role="row"
+                >
+                    <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                        <DTBodyCell
+                            v-if="shouldRenderBodyCell(value, col, getRowIndex(index))"
+                            :rowData="rowData"
+                            :column="col"
+                            :rowIndex="getRowIndex(index)"
+                            :index="i"
+                            :selected="isSelected(rowData)"
+                            :rowTogglerIcon="columnProp(col, 'expander') ? rowTogglerIcon(rowData) : null"
+                            :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, getRowIndex(index)) : null"
-                            :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
-                            @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
-                            @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
-                            @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"
-                            :editingMeta="editingMeta" @editing-meta-change="onEditingMetaChange" :virtualScrollerContentProps="virtualScrollerContentProps"/>
+                            :editMode="editMode"
+                            :editing="editMode === 'row' && isRowEditing(rowData)"
+                            :responsiveLayout="responsiveLayout"
+                            @radio-change="onRadioChange($event)"
+                            @checkbox-change="onCheckboxChange($event)"
+                            @row-toggle="onRowToggle($event)"
+                            @cell-edit-init="onCellEditInit($event)"
+                            @cell-edit-complete="onCellEditComplete($event)"
+                            @cell-edit-cancel="onCellEditCancel($event)"
+                            @row-edit-init="onRowEditInit($event)"
+                            @row-edit-save="onRowEditSave($event)"
+                            @row-edit-cancel="onRowEditCancel($event)"
+                            :editingMeta="editingMeta"
+                            @editing-meta-change="onEditingMetaChange"
+                            :virtualScrollerContentProps="virtualScrollerContentProps"
+                        />
                     </template>
                 </tr>
-                <tr class="p-datatable-row-expansion" v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" role="row">
+                <tr v-if="templates['expansion'] && expandedRows && isRowExpanded(rowData)" :key="getRowKey(rowData, getRowIndex(index)) + '_expansion'" class="p-datatable-row-expansion" role="row">
                     <td :colspan="columnsLength">
                         <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
-                <tr class="p-rowgroup-footer" v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" role="row">
+                <tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
                     <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
                 </tr>
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage" role="row">
             <td :colspan="columnsLength">
-                <component :is="templates.empty" v-if="templates.empty" />
+                <component v-if="templates.empty" :is="templates.empty" />
             </td>
         </tr>
     </tbody>
 </template>
 
 <script>
-import {ObjectUtils,DomHandler} from 'primevue/utils';
+import { ObjectUtils, DomHandler } from 'primevue/utils';
 import BodyCell from './BodyCell.vue';
 
 export default {
     name: 'TableBody',
-    emits: ['rowgroup-toggle', 'row-click', 'row-dblclick', 'row-rightclick', 'row-touchend', 'row-keydown', 'row-mousedown',
-        'row-dragstart', 'row-dragover', 'row-dragleave', 'row-dragend', 'row-drop', 'row-toggle',
-        'radio-change', 'checkbox-change', 'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel',
-        'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
+    emits: [
+        'rowgroup-toggle',
+        'row-click',
+        'row-dblclick',
+        'row-rightclick',
+        'row-touchend',
+        'row-keydown',
+        'row-mousedown',
+        'row-dragstart',
+        'row-dragover',
+        'row-dragleave',
+        'row-dragend',
+        'row-drop',
+        'row-toggle',
+        'radio-change',
+        'checkbox-change',
+        'cell-edit-init',
+        'cell-edit-complete',
+        'cell-edit-cancel',
+        'row-edit-init',
+        'row-edit-save',
+        'row-edit-cancel',
+        'editing-meta-change'
+    ],
     props: {
         value: {
             type: Array,
@@ -75,7 +128,7 @@ export default {
             default: null
         },
         groupRowsBy: {
-            type: [Array,String],
+            type: [Array, String],
             default: null
         },
         expandableRowGroups: {
@@ -107,7 +160,7 @@ export default {
             default: null
         },
         selection: {
-            type: [Array,Object],
+            type: [Array, Object],
             default: null
         },
         selectionKeys: {
@@ -175,6 +228,11 @@ export default {
             default: false
         }
     },
+    data() {
+        return {
+            rowGroupHeaderStyleObject: {}
+        };
+    },
     watch: {
         virtualScrollerContentProps(newValue, oldValue) {
             if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
@@ -204,11 +262,6 @@ export default {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
     },
-    data() {
-        return {
-            rowGroupHeaderStyleObject: {}
-        }
-    },
     methods: {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
@@ -216,25 +269,28 @@ export default {
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
+
             if (prevRowData) {
                 let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
+
                 return currentRowFieldData !== previousRowFieldData;
-            }
-            else {
+            } else {
                 return true;
             }
         },
         getRowKey(rowData, index) {
-            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
+            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : index;
         },
         getRowIndex(index) {
             const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
+
             return getItemOptions ? getItemOptions(index).index : index;
         },
         getRowClass(rowData) {
             let rowStyleClass = [];
+
             if (this.selectionMode) {
-                 rowStyleClass.push('p-selectable-row');
+                rowStyleClass.push('p-selectable-row');
             }
 
             if (this.selection) {
@@ -262,15 +318,15 @@ export default {
         shouldRenderRowGroupFooter(value, rowData, i) {
             if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
                 return false;
-            }
-            else {
+            } else {
                 let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
                 let nextRowData = value[i + 1];
+
                 if (nextRowData) {
                     let nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
+
                     return currentRowFieldData !== nextRowFieldData;
-                }
-                else {
+                } else {
                     return true;
                 }
             }
@@ -279,25 +335,23 @@ export default {
             if (this.rowGroupMode) {
                 if (this.rowGroupMode === 'subheader') {
                     return this.groupRowsBy !== this.columnProp(column, 'field');
-                }
-                else if (this.rowGroupMode === 'rowspan') {
+                } else if (this.rowGroupMode === 'rowspan') {
                     if (this.isGrouped(column)) {
                         let prevRowData = value[i - 1];
+
                         if (prevRowData) {
                             let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
                             let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
+
                             return currentRowFieldData !== previousRowFieldData;
-                        }
-                        else {
+                        } else {
                             return true;
                         }
-                    }
-                    else {
+                    } else {
                         return true;
                     }
                 }
-            }
-            else {
+            } else {
                 return !this.columnProp(column, 'hidden');
             }
         },
@@ -310,55 +364,49 @@ export default {
                 while (currentRowFieldData === nextRowFieldData) {
                     groupRowSpan++;
                     let nextRowData = value[++index];
+
                     if (nextRowData) {
                         nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
-                    }
-                    else {
+                    } else {
                         break;
                     }
                 }
 
                 return groupRowSpan === 1 ? null : groupRowSpan;
-            }
-            else {
+            } else {
                 return null;
             }
         },
         rowTogglerIcon(rowData) {
             const icon = this.isRowExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+
             return ['p-row-toggler-icon pi', icon];
         },
         rowGroupTogglerIcon(rowData) {
             const icon = this.isRowGroupExpanded(rowData) ? this.expandedRowIcon : this.collapsedRowIcon;
+
             return ['p-row-toggler-icon pi', icon];
         },
         isGrouped(column) {
             if (this.groupRowsBy && this.columnProp(column, 'field')) {
-                if (Array.isArray(this.groupRowsBy))
-                    return this.groupRowsBy.indexOf(column.props.field) > -1;
-                else
-                    return this.groupRowsBy === column.props.field;
-            }
-            else {
+                if (Array.isArray(this.groupRowsBy)) return this.groupRowsBy.indexOf(column.props.field) > -1;
+                else return this.groupRowsBy === column.props.field;
+            } else {
                 return false;
             }
         },
         isRowEditing(rowData) {
             if (rowData && this.editingRows) {
-                if (this.dataKey)
-                    return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.editingRows) > -1;
+                if (this.dataKey) return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else return this.findIndex(rowData, this.editingRows) > -1;
             }
 
             return false;
         },
         isRowExpanded(rowData) {
             if (rowData && this.expandedRows) {
-                if (this.dataKey)
-                    return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                else
-                    return this.findIndex(rowData, this.expandedRows) > -1;
+                if (this.dataKey) return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                else return this.findIndex(rowData, this.expandedRows) > -1;
             }
 
             return false;
@@ -366,20 +414,19 @@ export default {
         isRowGroupExpanded(rowData) {
             if (this.expandableRowGroups && this.expandedRowGroups) {
                 let groupFieldValue = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
+
                 return this.expandedRowGroups.indexOf(groupFieldValue) > -1;
             }
+
             return false;
         },
         isSelected(rowData) {
             if (rowData && this.selection) {
                 if (this.dataKey) {
                     return this.selectionKeys ? this.selectionKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
-                }
-                else {
-                    if (this.selection instanceof Array)
-                        return this.findIndexInSelection(rowData) > -1;
-                    else
-                        return this.equals(rowData, this.selection);
+                } else {
+                    if (this.selection instanceof Array) return this.findIndexInSelection(rowData) > -1;
+                    else return this.equals(rowData, this.selection);
                 }
             }
 
@@ -397,6 +444,7 @@ export default {
         },
         findIndex(rowData, collection) {
             let index = -1;
+
             if (collection && collection.length) {
                 for (let i = 0; i < collection.length; i++) {
                     if (this.equals(rowData, collection[i])) {
@@ -409,34 +457,34 @@ export default {
             return index;
         },
         equals(data1, data2) {
-            return this.compareSelectionBy === 'equals' ? (data1 === data2) : ObjectUtils.equals(data1, data2, this.dataKey);
+            return this.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, this.dataKey);
         },
         onRowGroupToggle(event, data) {
-            this.$emit('rowgroup-toggle', {originalEvent: event, data: data});
+            this.$emit('rowgroup-toggle', { originalEvent: event, data: data });
         },
         onRowClick(event, rowData, rowIndex) {
-            this.$emit('row-click', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-click', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowDblClick(event, rowData, rowIndex) {
-            this.$emit('row-dblclick', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-dblclick', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowRightClick(event, rowData, rowIndex) {
-            this.$emit('row-rightclick', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-rightclick', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowTouchEnd(event) {
             this.$emit('row-touchend', event);
         },
         onRowKeyDown(event, rowData, rowIndex) {
-            this.$emit('row-keydown', {originalEvent: event, data: rowData, index: rowIndex});
+            this.$emit('row-keydown', { originalEvent: event, data: rowData, index: rowIndex });
         },
         onRowMouseDown(event) {
             this.$emit('row-mousedown', event);
         },
         onRowDragStart(event, rowIndex) {
-            this.$emit('row-dragstart', {originalEvent: event, index: rowIndex});
+            this.$emit('row-dragstart', { originalEvent: event, index: rowIndex });
         },
         onRowDragOver(event, rowIndex) {
-            this.$emit('row-dragover', {originalEvent: event, index: rowIndex});
+            this.$emit('row-dragover', { originalEvent: event, index: rowIndex });
         },
         onRowDragLeave(event) {
             this.$emit('row-dragleave', event);
@@ -482,19 +530,23 @@ export default {
         },
         updateFrozenRowGroupHeaderStickyPosition() {
             let tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
-            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px'
+
+            this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
         },
         updateVirtualScrollerPosition() {
             const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
+
             this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
         },
         getVirtualScrollerProp(option, options) {
             options = options || this.virtualScrollerContentProps;
+
             return options ? options[option] : null;
         },
         bodyRef(el) {
             // For VirtualScroller
             const contentRef = this.getVirtualScrollerProp('contentRef');
+
             contentRef && contentRef(el);
         }
     },
@@ -502,15 +554,15 @@ export default {
         columnsLength() {
             let hiddenColLength = 0;
 
-            this.columns.forEach(column => {
-                if(this.columnProp(column, 'hidden')) hiddenColLength++;
+            this.columns.forEach((column) => {
+                if (this.columnProp(column, 'hidden')) hiddenColLength++;
             });
 
             return this.columns ? this.columns.length - hiddenColLength : 0;
         },
         rowGroupHeaderStyle() {
             if (this.scrollable) {
-                return {top: this.rowGroupHeaderStyleObject.top};
+                return { top: this.rowGroupHeaderStyleObject.top };
             }
 
             return null;
@@ -520,7 +572,7 @@ export default {
         }
     },
     components: {
-        'DTBodyCell': BodyCell
+        DTBodyCell: BodyCell
     }
-}
+};
 </script>

package/datatable/TableFooter.vue

@@ -1,14 +1,14 @@
 <template>
-    <tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
+    <tfoot v-if="hasFooter" class="p-datatable-tfoot" role="rowgroup">
         <tr v-if="!columnGroup" role="row">
-            <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" >
-                <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
+            <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
+                <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
             </template>
         </tr>
         <template v-else>
-            <tr v-for="(row,i) of getFooterRows()" :key="i" role="row">
-                <template v-for="(col,j) of getFooterColumns(row)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j">
-                    <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
+            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row">
+                <template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
+                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" />
                 </template>
             </tr>
         </template>
@@ -17,7 +17,7 @@
 
 <script>
 import FooterCell from './FooterCell.vue';
-import {ObjectUtils} from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'TableFooter',
@@ -29,7 +29,7 @@ export default {
         columns: {
             type: null,
             default: null
-        },
+        }
     },
     methods: {
         columnProp(col, prop) {
@@ -39,12 +39,12 @@ export default {
             let rows = [];
 
             let columnGroup = this.columnGroup;
+
             if (columnGroup.children && columnGroup.children.default) {
                 for (let child of columnGroup.children.default()) {
                     if (child.type.name === 'Row') {
                         rows.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
+                    } else if (child.children && child.children instanceof Array) {
                         rows = child.children;
                     }
                 }
@@ -52,15 +52,13 @@ export default {
                 return rows;
             }
         },
-        getFooterColumns(row){
+        getFooterColumns(row) {
             let cols = [];
 
             if (row.children && row.children.default) {
-                row.children.default().forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
+                row.children.default().forEach((child) => {
+                    if (child.children && child.children instanceof Array) cols = [...cols, ...child.children];
+                    else if (child.type.name === 'Column') cols.push(child);
                 });
 
                 return cols;
@@ -73,8 +71,7 @@ export default {
 
             if (this.columnGroup) {
                 hasFooter = true;
-            }
-            else if (this.columns) {
+            } else if (this.columns) {
                 for (let col of this.columns) {
                     if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
                         hasFooter = true;
@@ -87,7 +84,7 @@ export default {
         }
     },
     components: {
-        'DTFooterCell': FooterCell
+        DTFooterCell: FooterCell
     }
-}
+};
 </script>