primevue 2.7.0 → 2.9.1

package/treetable/HeaderCell.vue

@@ -0,0 +1,183 @@
+<template>
+    <th :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown"
+        :tabindex="columnProp('sortable') ? '0' : null"  :aria-sort="ariaSort">
+        <span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
+        <TTColumnSlot :column="column" v-if="column.children && column.children.header" />
+        <span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
+        <span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>
+        <span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
+    </th>
+</template>
+
+<script>
+import DomHandler from '../utils/DomHandler.js';
+import ObjectUtils from '../utils/ObjectUtils.js';
+import TreeTableColumnSlot from './TreeTableColumnSlot.vue';
+
+export default {
+    props: {
+        column: {
+            type: Object,
+            default: null
+        },
+        resizableColumns: {
+            type: Boolean,
+            default: false
+        },
+        sortField: {
+            type: [String, Function],
+            default: null
+        },
+        sortOrder: {
+            type: Number,
+            default: null
+        },
+        multiSortMeta: {
+            type: Array,
+            default: null
+        },
+        sortMode: {
+            type: String,
+            default: 'single'
+        }
+    },
+    data() {
+        return {
+            styleObject: {
+                left: '',
+                right: ''
+            }
+        }
+    },
+    mounted() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    updated() {
+        if (this.columnProp('frozen')) {
+            this.updateStickyPosition();
+        }
+    },
+    methods: {
+        columnProp(prop) {
+            return ObjectUtils.getVNodeProp(this.column, prop);
+        },
+        updateStickyPosition() {
+            if (this.columnProp('frozen')) {
+                let align = this.columnProp('alignFrozen');
+                if (align === 'right') {
+                    let right = 0;
+                    let next = this.$el.nextElementSibling;
+                    if (next) {
+                        right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
+                    }
+                    this.styleObject.right = right + 'px';
+                }
+                else {
+                    let left = 0;
+                    let prev = this.$el.previousElementSibling;
+                    if (prev) {
+                        left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
+                    }
+                    this.styleObject.left = left + 'px';
+                }
+
+                let filterRow = this.$el.parentElement.nextElementSibling;
+                if (filterRow) {
+                    let index = DomHandler.index(this.$el);
+                    filterRow.children[index].style.left = this.styleObject.left;
+                    filterRow.children[index].style.right = this.styleObject.right;
+                }
+            }
+        },
+        onClick(event) {
+            this.$emit('column-click', {originalEvent: event, column: this.column});
+        },
+        onKeyDown(event) {
+            if (event.which === 13 && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
+                this.$emit('column-click', {originalEvent: event, column: this.column});
+            }
+        },
+        onResizeStart(event) {
+            this.$emit('column-resizestart', event);
+        },
+        getMultiSortMetaIndex() {
+            let index = -1;
+
+            for (let i = 0; i < this.multiSortMeta.length; i++) {
+                let meta = this.multiSortMeta[i];
+                if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
+                    index = i;
+                    break;
+                }
+            }
+
+            return index;
+        },
+        isMultiSorted() {
+            return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
+        },
+        isColumnSorted() {
+            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
+        }
+    },
+    computed: {
+        containerClass() {
+            return [this.columnProp('headerClass'), this.columnProp('className'), {
+                'p-sortable-column': this.columnProp('sortable'),
+                'p-resizable-column': this.resizableColumns,
+                'p-highlight': this.isColumnSorted(),
+                'p-frozen-column': this.columnProp('frozen')
+            }];
+        },
+        containerStyle() {
+            let headerStyle = this.columnProp('headerStyle');
+            let columnStyle = this.columnProp('styles');
+
+            return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
+        },
+        sortableColumnIcon() {
+            let sorted = false;
+            let sortOrder = null;
+
+            if (this.sortMode === 'single') {
+                sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
+                sortOrder = sorted ? this.sortOrder: 0;
+            }
+            else if (this.sortMode === 'multiple') {
+                let metaIndex = this.getMultiSortMetaIndex();
+                if (metaIndex > -1) {
+                    sorted = true;
+                    sortOrder = this.multiSortMeta[metaIndex].order;
+                }
+            }
+
+            return [
+                'p-sortable-column-icon pi pi-fw', {
+                    'pi-sort-alt': !sorted,
+                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
+                    'pi-sort-amount-down': sorted && sortOrder < 0
+                }
+            ];
+        },
+        ariaSort() {
+            if (this.columnProp('sortable')) {
+                const sortIcon = this.sortableColumnIcon;
+                if (sortIcon[1]['pi-sort-amount-down'])
+                    return 'descending';
+                else if (sortIcon[1]['pi-sort-amount-up-alt'])
+                    return 'ascending';
+                else
+                    return 'none';
+            }
+            else {
+                return null;
+            }
+        },
+    },
+    components: {
+        'TTColumnSlot': TreeTableColumnSlot
+    },
+}
+</script>

package/treetable/TreeTable.d.ts

@@ -35,6 +35,7 @@ declare class TreeTable extends Vue {
     resizableColumns?: boolean;
     columnResizeMode?: string;
     indentation?: number;
+    showGridlines?: boolean;
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;

package/treetable/TreeTable.vue

@@ -9,7 +9,7 @@
         <div class="p-treetable-header" v-if="$scopedSlots.header">
             <slot name="header"></slot>
         </div>
-         <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+        <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
             <template #start v-if="$scopedSlots.paginatorstart">
                 <slot name="paginatorstart"></slot>
@@ -22,31 +22,21 @@
             <table ref="table">
                 <thead class="p-treetable-thead">
                     <tr>
-                        <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
-                            :tabindex="col.sortable ? '0' : null"  :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
-                            <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
-                            <TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
-                            <span class="p-column-title" v-if="col.header">{{col.header}}</span>
-                            <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
-                            <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
-                        </th>
+                        <template v-for="(col,i) of columns">
+                            <TTHeaderCell v-if="!columnProp(col, 'hidden')" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :column="col" :resizableColumns="resizableColumns"
+                            :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :sortMode="sortMode"
+                            @column-click="onColumnHeaderClick" @column-resizestart="onColumnResizeStart"></TTHeaderCell>
+                        </template>
                     </tr>
                     <tr v-if="hasColumnFilter()">
                         <template v-for="(col,i) of columns">
-                            <th :key="col.columnKey||col.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.filterHeaderStyle">
+                            <th v-if="!columnProp(col, 'hidden')" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
+                                :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'styles'),columnProp(col, 'filterHeaderStyle')]">
                                 <TTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
                             </th>
                         </template>
                     </tr>
                 </thead>
-                <tfoot class="p-treetable-tfoot" v-if="hasFooter">
-                    <tr>
-                        <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass">
-                            <TTColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
-                            {{col.footer}}
-                        </td>
-                    </tr>
-                </tfoot>
                 <tbody class="p-treetable-tbody">
                     <template v-if="!empty">
                         <TTRow v-for="node of dataToRender" :key="node.key" :columns="columns" :node="node" :level="0"
@@ -59,6 +49,13 @@
                         </td>
                     </tr>
                 </tbody>
+                <tfoot class="p-treetable-tfoot" v-if="hasFooter">
+                    <tr>
+                        <template v-for="(col,i) of columns">
+                            <TTFooterCell v-if="!columnProp(col, 'hidden')" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :column="col"></TTFooterCell>
+                        </template>
+                    </tr>
+                </tfoot>
             </table>
         </div>
         <TTPaginator v-if="paginatorBottom" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
@@ -79,10 +76,12 @@
 
 <script>
 import ObjectUtils from '../utils/ObjectUtils';
-import FilterUtils from '../utils/FilterUtils';
 import DomHandler from '../utils/DomHandler';
+import FilterService from '../api/FilterService';
 import TreeTableColumnSlot from './TreeTableColumnSlot';
 import TreeTableRowLoader from './TreeTableRowLoader';
+import FooterCell from './FooterCell.vue';
+import HeaderCell from './HeaderCell.vue';
 import Paginator from '../paginator/Paginator';
 
 export default {
@@ -214,6 +213,10 @@ export default {
         indentation: {
             type: Number,
             default: 1
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
         }
     },
     documentColumnResizeListener: null,
@@ -255,6 +258,9 @@ export default {
         this.allChildren = this.$children;
     },
     methods: {
+        columnProp(col, prop) {
+            return ObjectUtils.getVNodeProp(col, prop);
+        },
         onNodeToggle(node) {
             const key = node.key;
 
@@ -373,67 +379,18 @@ export default {
             this.d_first = 0;
             this.$emit('update:first', this.d_first);
         },
-        isMultiSorted(column) {
-            return column.sortable && this.getMultiSortMetaIndex(column) > -1
-        },
-        isColumnSorted(column) {
-            if (column.sortable) {
-                return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
-            }
-
-            return false;
-        },
-        getColumnHeaderClass(column) {
-            return [column.headerClass,
-                    {'p-sortable-column': column.sortable},
-                    {'p-resizable-column': this.resizableColumns},
-                    {'p-highlight': this.isColumnSorted(column)}
-            ];
-        },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', column.filterHeaderClass];
-        },
-        getSortableColumnIcon(column) {
-            let sorted = false;
-            let sortOrder = null;
-
-            if (this.sortMode === 'single') {
-                sorted =  this.d_sortField === (column.field || column.sortField);
-                sortOrder = sorted ? this.d_sortOrder: 0;
-            }
-            else if (this.sortMode === 'multiple') {
-                let metaIndex = this.getMultiSortMetaIndex(column);
-                if (metaIndex > -1) {
-                    sorted = true;
-                    sortOrder = this.d_multiSortMeta[metaIndex].order;
-                }
-            }
-
-            return [
-                'p-sortable-column-icon pi pi-fw', {
-                    'pi-sort-alt': !sorted,
-                    'pi-sort-amount-up-alt': sorted && sortOrder > 0,
-                    'pi-sort-amount-down': sorted && sortOrder < 0
-                }
-            ];
+            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), {
+                'p-frozen-column': this.columnProp(column, 'frozen')
+            }];
         },
-        getMultiSortMetaIndex(column) {
-            let index = -1;
+        onColumnHeaderClick(e) {
+            let event = e.originalEvent;
+            let column = e.column;
 
-            for (let i = 0; i < this.d_multiSortMeta.length; i++) {
-                let meta = this.d_multiSortMeta[i];
-                if (meta.field === (column.field || column.sortField)) {
-                    index = i;
-                    break;
-                }
-            }
-
-            return index;
-        },
-        onColumnHeaderClick(event, column) {
-            if (column.sortable) {
+            if (this.columnProp(column, 'sortable')) {
                 const targetNode = event.target;
-                const columnField = column.sortField || column.field;
+                const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -561,13 +518,13 @@ export default {
 
                 for (let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
-                    let filterField = col.field;
+                    let filterField = this.columnProp(col, 'field');
 
                     //local
-                    if (Object.prototype.hasOwnProperty.call(this.filters, col.field)) {
-                        let filterMatchMode = col.filterMatchMode;
-                        let filterValue = this.filters[col.field];
-                        let filterConstraint = FilterUtils[filterMatchMode];
+                    if (Object.prototype.hasOwnProperty.call(this.filters, this.columnProp(col, 'field'))) {
+                        let filterMatchMode = this.columnProp(col, 'filterMatchMode') || 'startsWith';
+                        let filterValue = this.filters[this.columnProp(col, 'field')];
+                        let filterConstraint = FilterService.filters[filterMatchMode];
                         let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
 
                         if ((strict && !(this.findFilteredNodes(copyNode, paramsWithoutNode) || this.isFilterMatched(copyNode, paramsWithoutNode))) ||
@@ -584,7 +541,7 @@ export default {
                     if (this.hasGlobalFilter() && !globalMatch) {
                         let copyNodeForGlobal = {...copyNode};
                         let filterValue = this.filters['global'];
-                        let filterConstraint = FilterUtils['contains'];
+                        let filterConstraint = FilterService.filters['contains'];
                         let globalFilterParamsWithoutNode = {filterField, filterValue, filterConstraint, strict};
 
                         if ((strict && (this.findFilteredNodes(copyNodeForGlobal, globalFilterParamsWithoutNode) || this.isFilterMatched(copyNodeForGlobal, globalFilterParamsWithoutNode))) ||
@@ -655,8 +612,8 @@ export default {
             if (this.hasFilters()) {
                 filterMatchModes = {};
                 this.columns.forEach(col => {
-                    if (col.field) {
-                        filterMatchModes[col.field] = col.filterMatchMode;
+                    if (this.columnProp(col, 'field')) {
+                        filterMatchModes[col.field] = this.columnProp(col, 'filterMatchMode');
                     }
                 });
             }
@@ -695,7 +652,7 @@ export default {
             let newColumnWidth = columnWidth + delta;
             let minWidth = this.resizeColumnElement.style.minWidth||15;
 
-            if(columnWidth + delta > parseInt(minWidth, 10)) {
+            if (columnWidth + delta > parseInt(minWidth, 10)) {
                 if(this.columnResizeMode === 'fit') {
                     let nextColumn = this.resizeColumnElement.nextElementSibling;
                     let nextColumnWidth = nextColumn.offsetWidth - delta;
@@ -724,6 +681,23 @@ export default {
 
             this.unbindColumnResizeEvents();
         },
+        resizeTableCells(newColumnWidth, nextColumnWidth) {
+            let colIndex = DomHandler.index(this.resizeColumnElement);
+            let children = this.$refs.table.children;
+            for (let child of children) {
+                for (let row of child.children) {
+                    let resizeCell = row.children[colIndex];
+                    resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
+
+                    if (this.columnResizeMode === 'fit') {
+                        let nextCell = resizeCell.nextElementSibling;
+                        if (nextCell) {
+                            nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
+                        }
+                    }
+                }
+            }
+        },
         bindColumnResizeEvents() {
             if (!this.documentColumnResizeListener) {
                 this.documentColumnResizeListener = document.addEventListener('mousemove', () => {
@@ -751,7 +725,7 @@ export default {
 
             if (this.documentColumnResizeEndListener) {
                 document.removeEventListener('document', this.documentColumnResizeEndListener);
-                 this.documentColumnResizeEndListener = null;
+                this.documentColumnResizeEndListener = null;
             }
         },
         onColumnKeyDown(event, col) {
@@ -759,24 +733,10 @@ export default {
                 this.onColumnHeaderClick(event, col);
             }
         },
-        getAriaSort(column) {
-            if (column.sortable) {
-                const sortIcon = this.getSortableColumnIcon(column);
-                if (sortIcon[1]['pi-sort-amount-down'])
-                    return 'descending';
-                else if (sortIcon[1]['pi-sort-amount-up-alt'])
-                    return 'ascending';
-                else
-                    return 'none';
-            }
-            else {
-                return null;
-            }
-        },
         hasColumnFilter() {
             if (this.columns) {
                 for (let col of this.columns) {
-                    if (col.$scopedSlots.filter) {
+                    if (col.children && col.children.filter) {
                         return true;
                     }
                 }
@@ -798,6 +758,7 @@ export default {
                 'p-treetable-auto-layout': this.autoLayout,
                 'p-treetable-resizable': this.resizableColumns,
                 'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                'p-treetable-gridlines': this.showGridlines
             }];
         },
         columns() {
@@ -894,6 +855,8 @@ export default {
         'TTColumnSlot': TreeTableColumnSlot,
         'TTRow': TreeTableRowLoader,
         'TTPaginator': Paginator,
+        'TTHeaderCell': HeaderCell,
+        'TTFooterCell': FooterCell
     }
 }
 </script>
@@ -914,10 +877,6 @@ export default {
     user-select: none;
 }
 
-.p-treetable-auto-layout > .p-treetable-wrapper {
-    overflow-x: auto;
-}
-
 .p-treetable-auto-layout > .p-treetable-wrapper > table {
     table-layout: auto;
 }
@@ -956,7 +915,7 @@ export default {
     overflow: hidden;
 }
 
-.p-treetable-resizable .p-resizable-column {
+.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
     background-clip: padding-box;
     position: relative;
 }

package/treetable/TreeTableRow.vue

@@ -1,10 +1,10 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
-        <td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" :class="col.bodyClass">
-            <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.expander" :style="togglerStyle" tabindex="-1" v-ripple>
+        <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'bodyStyle')" :class="columnProp(col, 'bodyClass')">
+            <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col,'expander')" :style="togglerStyle" tabindex="-1" v-ripple>
                 <i :class="togglerIcon"></i>
             </button>
-            <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.expander" role="checkbox" :aria-checked="checked">
+            <div :class="['p-checkbox p-treetable-checkbox p-component', {'p-checkbox-focused': checkboxFocused}]" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp(col,'expander')" role="checkbox" :aria-checked="checked">
                 <div class="p-hidden-accessible">
                     <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
                 </div>
@@ -67,6 +67,9 @@ export default {
     },
     nodeTouched: false,
     methods: {
+        columnProp(column, prop) {
+            return ObjectUtils.getVNodeProp(column, prop);
+        },
         resolveFieldData(rowData, field) {
             return ObjectUtils.resolveFieldData(rowData, field);
         },
@@ -198,7 +201,7 @@ export default {
             });
         },
         onCheckboxFocus() {
-           this.checkboxFocused = true;
+            this.checkboxFocused = true;
         },
         onCheckboxBlur() {
             this.checkboxFocused = false;