primevue 3.8.2 → 3.9.0

package/datatable/datatable.js

@@ -348,7 +348,15 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             hide() {
                 this.overlayVisible = false;
             },
-            onContentClick() {
+            onContentClick(event) {
+                this.selfClick = true;
+
+                OverlayEventBus__default['default'].emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.overlay
+                });
+            },
+            onContentMouseDown() {
                 this.selfClick = true;
             },
             onOverlayEnter(el) {
@@ -362,7 +370,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.bindResizeListener();
 
                 this.overlayEventListener = (e) => {
-                    if (this.overlay.contains(e.target)) {
+                    if (!this.isOutsideClicked(e.target)) {
                         this.selfClick = true;
                     }
                 };
@@ -385,13 +393,16 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             overlayRef(el) {
                 this.overlay = el;
             },
-            isTargetClicked(event) {
-                return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
+            isOutsideClicked(target) {
+                return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
+            },
+            isTargetClicked(target) {
+                return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
             },
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
+                        if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                             this.overlayVisible = false;
                         }
                         this.selfClick = false;
@@ -583,7 +594,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     ref: $options.overlayRef,
                     class: $options.overlayClass,
                     onKeydown: _cache[12] || (_cache[12] = vue.withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                    onMousedown: _cache[14] || (_cache[14] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
                   }, [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterHeaderTemplate), {
                       field: $props.field,
@@ -1124,6 +1136,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             },
             getFilterColumnHeaderStyle(column) {
                 return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
+            },
+            getHeaderColumns(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);
+                    });
+
+                    return cols;
+                }
             }
         },
         components: {
@@ -1256,7 +1282,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 key: i,
                 role: "row"
               }, [
-                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getHeaderColumns(row), (col, j) => {
                   return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
                   }, [
@@ -1784,82 +1810,91 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 index: $props.rowIndex,
                 frozenRow: $props.frozenRow
               }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
-            : ($options.columnProp('selectionMode'))
-              ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 3 }, [
-                  ($options.columnProp('selectionMode') === 'single')
-                    ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
-                        key: 0,
-                        value: $props.rowData,
-                        checked: $props.selected,
-                        onChange: $options.toggleRowWithRadio
-                      }, null, 8, ["value", "checked", "onChange"]))
-                    : ($options.columnProp('selectionMode') ==='multiple')
-                      ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
-                          key: 1,
+            : ($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,
+                  data: $options.editingRowData,
+                  column: $props.column,
+                  field: $options.field,
+                  index: $props.rowIndex,
+                  frozenRow: $props.frozenRow
+                }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+              : ($options.columnProp('selectionMode'))
+                ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 4 }, [
+                    ($options.columnProp('selectionMode') === 'single')
+                      ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
+                          key: 0,
                           value: $props.rowData,
                           checked: $props.selected,
-                          onChange: $options.toggleRowWithCheckbox
+                          onChange: $options.toggleRowWithRadio
                         }, null, 8, ["value", "checked", "onChange"]))
-                      : vue.createCommentVNode("", true)
-                ], 64))
-              : ($options.columnProp('rowReorder'))
-                ? (vue.openBlock(), vue.createBlock("i", {
-                    key: 4,
-                    class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
-                  }, null, 2))
-                : ($options.columnProp('expander'))
-                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                      : ($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"]))
+                        : vue.createCommentVNode("", true)
+                  ], 64))
+                : ($options.columnProp('rowReorder'))
+                  ? (vue.openBlock(), vue.createBlock("i", {
                       key: 5,
-                      class: "p-row-toggler p-link",
-                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                      type: "button"
-                    }, [
-                      vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                    ], 512)), [
-                      [_directive_ripple]
-                    ])
-                  : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                    ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 6 }, [
-                        (!$data.d_editing)
-                          ? 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))),
-                              type: "button"
-                            }, [
-                              _hoisted_2$3
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? 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))),
-                              type: "button"
-                            }, [
-                              _hoisted_3$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? 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))),
-                              type: "button"
-                            }, [
-                              _hoisted_4$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true)
-                      ], 64))
-                    : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
-                        vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
-                      ], 64))
+                      class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                    }, null, 2))
+                  : ($options.columnProp('expander'))
+                    ? 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))),
+                        type: "button"
+                      }, [
+                        vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
+                      ], 512)), [
+                        [_directive_ripple]
+                      ])
+                    : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
+                      ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
+                          (!$data.d_editing)
+                            ? 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))),
+                                type: "button"
+                              }, [
+                                _hoisted_2$3
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true),
+                          ($data.d_editing)
+                            ? 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))),
+                                type: "button"
+                              }, [
+                                _hoisted_3$1
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true),
+                          ($data.d_editing)
+                            ? 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))),
+                                type: "button"
+                              }, [
+                                _hoisted_4$1
+                              ], 512)), [
+                                [_directive_ripple]
+                              ])
+                            : vue.createCommentVNode("", true)
+                        ], 64))
+                      : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 8 }, [
+                          vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
+                        ], 64))
       ], 38))
     }
 
@@ -1948,6 +1983,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             editMode: {
                 type: String,
                 default: null
@@ -2348,6 +2387,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       class: $options.getRowClass(rowData),
+                      style: $props.rowStyle,
                       key: $options.getRowKey(rowData, index),
                       onClick: $event => ($options.onRowClick($event, rowData, index)),
                       onDblclick: $event => ($options.onRowDblClick($event, rowData, index)),
@@ -2396,7 +2436,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 128))
-                    ], 42, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                    ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
                   : vue.createCommentVNode("", true),
                 ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
                   ? (vue.openBlock(), vue.createBlock("tr", {
@@ -2540,6 +2580,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         methods: {
             columnProp(col, prop) {
                 return utils.ObjectUtils.getVNodeProp(col, prop);
+            },
+            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);
+                    });
+
+                    return cols;
+                }
             }
         },
         computed: {
@@ -2601,7 +2655,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     key: i,
                     role: "row"
                   }, [
-                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), (col, j) => {
                       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                         key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                       }, [
@@ -2833,6 +2887,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             scrollable: {
                 type: Boolean,
                 default: false
@@ -3235,7 +3293,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 if (this.selectionMode) {
                     const rowData = e.data;
-                    const rowIndex = e.index;
+                    const rowIndex = this.d_first + e.index;
 
                     if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
                         utils.DomHandler.clearSelection();
@@ -4290,7 +4348,22 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     document.head.removeChild(this.styleElement);
                     this.styleElement = null;
                 }
-            }
+            },
+            recursiveGetChildren(children, results) {
+                if (!results) {
+                    results = [];
+                }
+                if (children && children.length) {
+                    children.forEach((child) => {
+                        if (child.children instanceof Array) {
+                            results.concat(this.recursiveGetChildren(child.children, results));
+                        } else if (child.type.name == 'Column') {
+                            results.push(child);
+                        }
+                    });
+                }
+                return results;
+            },
         },
         computed: {
             containerClass() {
@@ -4315,19 +4388,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ];
             },
             columns() {
-                let cols = [];
                 let children = this.getChildren();
 
                 if (!children) {
                     return;
                 }
 
-                children.forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
-                });
+                const cols = this.recursiveGetChildren(children, []);
 
                 if (this.reorderableColumns && this.d_columnOrder) {
                     let orderedColumns = [];
@@ -4501,7 +4568,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
               key: 2,
               rows: $data.d_rows,
-              first: $data.d_first,
+              first: $props.lazy ? 0 : $data.d_first,
               totalRecords: $options.totalRecordsLength,
               pageLinkSize: $props.pageLinkSize,
               template: $props.paginatorTemplate,
@@ -4511,19 +4578,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined
@@ -4583,6 +4650,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   groupRowsBy: $props.groupRowsBy,
                   expandableRowGroups: $props.expandableRowGroups,
                   rowClass: $props.rowClass,
+                  rowStyle: $props.rowStyle,
                   editMode: $props.editMode,
                   compareSelectionBy: $props.compareSelectionBy,
                   scrollable: $props.scrollable,
@@ -4619,7 +4687,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   onRowEditCancel: _cache[26] || (_cache[26] = $event => ($options.onRowEditCancel($event))),
                   editingMeta: $data.d_editingMeta,
                   onEditingMetaChange: $options.onEditingMetaChange
-                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
+                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : vue.createCommentVNode("", true),
             vue.createVNode(_component_DTTableBody, {
               value: $options.dataToRender,
@@ -4635,6 +4703,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               groupRowsBy: $props.groupRowsBy,
               expandableRowGroups: $props.expandableRowGroups,
               rowClass: $props.rowClass,
+              rowStyle: $props.rowStyle,
               editMode: $props.editMode,
               compareSelectionBy: $props.compareSelectionBy,
               scrollable: $props.scrollable,
@@ -4671,7 +4740,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onRowEditCancel: _cache[43] || (_cache[43] = $event => ($options.onRowEditCancel($event))),
               editingMeta: $data.d_editingMeta,
               onEditingMetaChange: $options.onEditingMetaChange
-            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
+            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
             vue.createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: $options.columns
@@ -4682,7 +4751,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
               key: 3,
               rows: $data.d_rows,
-              first: $data.d_first,
+              first: $props.lazy ? 0 : $data.d_first,
               totalRecords: $options.totalRecordsLength,
               pageLinkSize: $props.pageLinkSize,
               template: $props.paginatorTemplate,
@@ -4692,19 +4761,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined