primevue 3.11.1 → 3.12.2

package/datatable/DataTable.vue

@@ -731,7 +731,7 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                         else {
                             if(this.isSingleSelectionMode()) {
@@ -743,18 +743,18 @@ export default {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                     }
                     else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                         else if (this.selectionMode === 'multiple') {
@@ -762,12 +762,12 @@ export default {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                     }
@@ -863,11 +863,11 @@ export default {
 
             if (this.isSelected(rowData)) {
                 this.$emit('update:selection', null);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
             else {
                 this.$emit('update:selection', rowData);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
         },
         toggleRowWithCheckbox(event) {
@@ -877,13 +877,13 @@ export default {
                 const selectionIndex = this.findIndexInSelection(rowData);
                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                 this.$emit('update:selection', _selection);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
             else {
                 let _selection = this.selection ? [...this.selection] : [];
                 _selection = [..._selection, rowData];
                 this.$emit('update:selection', _selection);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
         },
         toggleRowsWithCheckbox(event) {
@@ -1033,7 +1033,7 @@ export default {
                     else
                         headerInitiated = true;
 
-                    csv += '"' + (this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
+                    csv += '"' + (this.columnProp(column, 'exportHeader') || this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
             }
 
@@ -1154,7 +1154,7 @@ export default {
                     }
                 `
             });
-        
+
             this.styleElement.innerHTML = innerHTML;
         },
         bindColumnResizeEvents() {
@@ -1625,16 +1625,19 @@ export default {
         },
         onEditingMetaChange(event) {
             let { data, field, index, editing } = event;
-            let meta = this.d_editingMeta[index];
+            let editingMeta = { ...this.d_editingMeta };
+            let meta = editingMeta[index];
 
             if (editing) {
-                !meta && (meta = this.d_editingMeta[index] = { data: { ...data }, fields: [] });
+                !meta && (meta = editingMeta[index] = { data: { ...data }, fields: [] });
                 meta['fields'].push(field);
             }
             else if (meta) {
                 const fields = meta['fields'].filter(f => f !== field);
-                !fields.length ? (delete this.d_editingMeta[index]) : (meta['fields'] = fields);
+                !fields.length ? (delete editingMeta[index]) : (meta['fields'] = fields);
             }
+
+            this.d_editingMeta = editingMeta;
         },
         clearEditingMetaData() {
             if (this.editMode) {

package/datatable/RowCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click="onClick">
+    <div :class="['p-checkbox p-component', {'p-checkbox-focused': focused}]" @click.stop.prevent="onClick">
         <div ref="box" :class="['p-checkbox-box p-component', {'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused}]"
             role="checkbox" :aria-checked="checked" :tabindex="$attrs.disabled ? null : '0'" @keydown.space.prevent="onClick" @focus="onFocus($event)" @blur="onBlur($event)">
             <span :class="['p-checkbox-icon', {'pi pi-check': checked}]"></span>

package/datatable/TableBody.vue

@@ -505,7 +505,13 @@ export default {
     },
     computed: {
         columnsLength() {
-            return this.columns ? this.columns.length : 0;
+            let hiddenColLength = 0;
+
+            this.columns.forEach(column => {
+                if(this.columnProp(column, 'hidden')) hiddenColLength++;
+            });
+
+            return this.columns ? this.columns.length - hiddenColLength : 0;
         },
         rowGroupHeaderStyle() {
             if (this.scrollable) {

package/datatable/datatable.cjs.js

@@ -160,7 +160,7 @@ var script$9 = {
     overlayEventListener: null,
     beforeUnmount() {
         if (this.overlayEventListener) {
-            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         }
 
@@ -363,7 +363,7 @@ var script$9 = {
         onContentClick(event) {
             this.selfClick = true;
 
-            OverlayEventBus__default["default"].emit('overlay-click', {
+            OverlayEventBus__default['default'].emit('overlay-click', {
                 originalEvent: event,
                 target: this.overlay
             });
@@ -386,7 +386,7 @@ var script$9 = {
                     this.selfClick = true;
                 }
             };
-            OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
         },
         onOverlayLeave() {
             this.onOverlayHide();
@@ -399,7 +399,7 @@ var script$9 = {
             this.unbindResizeListener();
             this.unbindScrollListener();
             this.overlay = null;
-            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         },
         overlayRef(el) {
@@ -527,8 +527,8 @@ var script$9 = {
         }
     },
     components: {
-        'CFDropdown': Dropdown__default["default"],
-        'CFButton': Button__default["default"]
+        'CFDropdown': Dropdown__default['default'],
+        'CFButton': Button__default['default']
     }
 };
 
@@ -1443,7 +1443,7 @@ var script$5 = {
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return (vue.openBlock(), vue.createBlock("div", {
     class: ['p-checkbox p-component', {'p-checkbox-focused': $data.focused}],
-    onClick: _cache[4] || (_cache[4] = (...args) => ($options.onClick && $options.onClick(...args)))
+    onClick: _cache[4] || (_cache[4] = vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["stop","prevent"]))
   }, [
     vue.createVNode("div", {
       ref: "box",
@@ -1552,7 +1552,7 @@ var script$4 = {
     },
     beforeUnmount() {
         if (this.overlayEventListener) {
-            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         }
     },
@@ -1569,11 +1569,11 @@ var script$4 = {
                 data: this.rowData
             });
         },
-        toggleRowWithRadio(event) {
-            this.$emit('radio-change', event);
+        toggleRowWithRadio(event, index) {
+            this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data});
         },
-        toggleRowWithCheckbox(event) {
-            this.$emit('checkbox-change', event);
+        toggleRowWithCheckbox(event, index) {
+            this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
         },
         isEditable() {
             return this.column.children && this.column.children.editor != null;
@@ -1600,7 +1600,7 @@ var script$4 = {
         switchCellToViewMode() {
             this.d_editing = false;
             this.unbindDocumentEditListener();
-            OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
+            OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
             this.overlayEventListener = null;
         },
         onClick(event) {
@@ -1617,7 +1617,7 @@ var script$4 = {
                             this.selfClick = true;
                         }
                     };
-                    OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
+                    OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
                 }
             }
         },
@@ -1749,6 +1749,15 @@ var script$4 = {
         onRowEditCancel(event) {
             this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
         },
+        editorInitCallback(event) {
+            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
+        editorSaveCallback(event) {
+            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
+        editorCancelCallback(event) {
+            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
+        },
         updateStickyPosition() {
             if (this.columnProp('frozen')) {
                 let align = this.columnProp('alignFrozen');
@@ -1816,7 +1825,7 @@ var script$4 = {
         'DTCheckbox': script$5
     },
     directives: {
-        'ripple': Ripple__default["default"]
+        'ripple': Ripple__default['default']
     }
 };
 
@@ -1852,8 +1861,8 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         key: 1,
         style: $options.containerStyle,
         class: $options.containerClass,
-        onClick: _cache[5] || (_cache[5] = (...args) => ($options.onClick && $options.onClick(...args))),
-        onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+        onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args))),
+        onKeydown: _cache[8] || (_cache[8] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
         role: "cell"
       }, [
         ($props.responsiveLayout === 'stack')
@@ -1866,8 +1875,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               column: $props.column,
               field: $options.field,
               index: $props.rowIndex,
-              frozenRow: $props.frozenRow
-            }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+              frozenRow: $props.frozenRow,
+              editorInitCallback: $options.editorInitCallback
+            }, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback"]))
           : ($props.column.children && $props.column.children.editor && $data.d_editing)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
                 key: 2,
@@ -1875,8 +1885,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 column: $props.column,
                 field: $options.field,
                 index: $props.rowIndex,
-                frozenRow: $props.frozenRow
-              }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+                frozenRow: $props.frozenRow,
+                editorSaveCallback: $options.editorSaveCallback,
+                editorCancelCallback: $options.editorCancelCallback
+              }, null, 8, ["data", "column", "field", "index", "frozenRow", "editorSaveCallback", "editorCancelCallback"]))
             : ($props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing)
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
                   key: 3,
@@ -1893,15 +1905,15 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                           key: 0,
                           value: $props.rowData,
                           checked: $props.selected,
-                          onChange: $options.toggleRowWithRadio
-                        }, null, 8, ["value", "checked", "onChange"]))
+                          onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex)))
+                        }, null, 8, ["value", "checked"]))
                       : ($options.columnProp('selectionMode') ==='multiple')
                         ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
                             key: 1,
                             value: $props.rowData,
                             checked: $props.selected,
-                            onChange: $options.toggleRowWithCheckbox
-                          }, null, 8, ["value", "checked", "onChange"]))
+                            onChange: _cache[2] || (_cache[2] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
+                          }, null, 8, ["value", "checked"]))
                         : vue.createCommentVNode("", true)
                   ], 64))
                 : ($options.columnProp('rowReorder'))
@@ -1913,7 +1925,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                     ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
                         key: 6,
                         class: "p-row-toggler p-link",
-                        onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                        onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
                         type: "button"
                       }, [
                         vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
@@ -1926,7 +1938,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                             ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
                                 key: 0,
                                 class: "p-row-editor-init p-link",
-                                onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
+                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
                                 type: "button"
                               }, [
                                 _hoisted_2$2
@@ -1938,7 +1950,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                             ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
                                 key: 1,
                                 class: "p-row-editor-save p-link",
-                                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
+                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
                                 type: "button"
                               }, [
                                 _hoisted_3$1
@@ -1950,7 +1962,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                             ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
                                 key: 2,
                                 class: "p-row-editor-cancel p-link",
-                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
+                                onClick: _cache[6] || (_cache[6] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
                                 type: "button"
                               }, [
                                 _hoisted_4$1
@@ -2424,7 +2436,13 @@ var script$3 = {
     },
     computed: {
         columnsLength() {
-            return this.columns ? this.columns.length : 0;
+            let hiddenColLength = 0;
+
+            this.columns.forEach(column => {
+                if(this.columnProp(column, 'hidden')) hiddenColLength++;
+            });
+
+            return this.columns ? this.columns.length - hiddenColLength : 0;
         },
         rowGroupHeaderStyle() {
             if (this.scrollable) {
@@ -3452,7 +3470,7 @@ var script = {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                         else {
                             if(this.isSingleSelectionMode()) {
@@ -3464,18 +3482,18 @@ var script = {
                                 this.$emit('update:selection', _selection);
                             }
 
-                            this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                            this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                         }
                     }
                     else {
                         if (this.selectionMode === 'single') {
                             if (selected) {
                                 this.$emit('update:selection', null);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 this.$emit('update:selection', rowData);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                         else if (this.selectionMode === 'multiple') {
@@ -3483,12 +3501,12 @@ var script = {
                                 const selectionIndex = this.findIndexInSelection(rowData);
                                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-unselect', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                             else {
                                 const _selection = this.selection ? [...this.selection, rowData] : [rowData];
                                 this.$emit('update:selection', _selection);
-                                this.$emit('row-select', {originalEvent: event, data: rowData, index: event.index, type: 'row'});
+                                this.$emit('row-select', {originalEvent: event, data: rowData, index: rowIndex, type: 'row'});
                             }
                         }
                     }
@@ -3580,11 +3598,11 @@ var script = {
 
             if (this.isSelected(rowData)) {
                 this.$emit('update:selection', null);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
             else {
                 this.$emit('update:selection', rowData);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'radiobutton'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'radiobutton' });
             }
         },
         toggleRowWithCheckbox(event) {
@@ -3594,13 +3612,13 @@ var script = {
                 const selectionIndex = this.findIndexInSelection(rowData);
                 const _selection = this.selection.filter((val, i) => i != selectionIndex);
                 this.$emit('update:selection', _selection);
-                this.$emit('row-unselect', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-unselect', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
             else {
                 let _selection = this.selection ? [...this.selection] : [];
                 _selection = [..._selection, rowData];
                 this.$emit('update:selection', _selection);
-                this.$emit('row-select', {originalEvent: event, data: rowData, type: 'checkbox'});
+                this.$emit('row-select', { originalEvent: event.originalEvent, data: rowData, index: event.index, type: 'checkbox' });
             }
         },
         toggleRowsWithCheckbox(event) {
@@ -3750,7 +3768,7 @@ var script = {
                     else
                         headerInitiated = true;
 
-                    csv += '"' + (this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
+                    csv += '"' + (this.columnProp(column, 'exportHeader') || this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
             }
 
@@ -3871,7 +3889,7 @@ var script = {
                     }
                 `;
             });
-        
+
             this.styleElement.innerHTML = innerHTML;
         },
         bindColumnResizeEvents() {
@@ -4342,16 +4360,19 @@ var script = {
         },
         onEditingMetaChange(event) {
             let { data, field, index, editing } = event;
-            let meta = this.d_editingMeta[index];
+            let editingMeta = { ...this.d_editingMeta };
+            let meta = editingMeta[index];
 
             if (editing) {
-                !meta && (meta = this.d_editingMeta[index] = { data: { ...data }, fields: [] });
+                !meta && (meta = editingMeta[index] = { data: { ...data }, fields: [] });
                 meta['fields'].push(field);
             }
             else if (meta) {
                 const fields = meta['fields'].filter(f => f !== field);
-                !fields.length ? (delete this.d_editingMeta[index]) : (meta['fields'] = fields);
+                !fields.length ? (delete editingMeta[index]) : (meta['fields'] = fields);
             }
+
+            this.d_editingMeta = editingMeta;
         },
         clearEditingMetaData() {
             if (this.editMode) {
@@ -4621,11 +4642,11 @@ var script = {
         }
     },
     components: {
-        'DTPaginator': Paginator__default["default"],
+        'DTPaginator': Paginator__default['default'],
         'DTTableHeader': script$7,
         'DTTableBody': script$3,
         'DTTableFooter': script$1,
-        'DTVirtualScroller': VirtualScroller__default["default"]
+        'DTVirtualScroller': VirtualScroller__default['default']
     }
 };