primevue 4.0.7 → 4.1.0

package/datatable/index.mjs

@@ -1,4 +1,4 @@
-import { getFirstFocusableElement, invokeElementMethod, getAttribute, getNextElementSibling, getOuterWidth, getPreviousElementSibling, getOuterHeight, focus, addStyle, absolutePosition, isTouchDevice, getIndex, isClickable, clearSelection, findSingle, find, exportCSV, getOffset, getHiddenElementOuterWidth, getHiddenElementOuterHeight, getWindowScrollTop, removeClass, addClass, setAttribute } from '@primeuix/utils/dom';
+import { getFirstFocusableElement, invokeElementMethod, getAttribute, getNextElementSibling, getOuterWidth, getPreviousElementSibling, getOuterHeight, focus, addStyle, absolutePosition, isTouchDevice, getIndex, isClickable, clearSelection, findSingle, find, exportCSV, getOffset, getHiddenElementOuterWidth, getHiddenElementOuterHeight, removeClass, addClass, setAttribute } from '@primeuix/utils/dom';
 import { resolveFieldData, equals, isNotEmpty, localeComparator, sort, findIndexInList, reorderArray, isEmpty } from '@primeuix/utils/object';
 import { FilterOperator, FilterService, FilterMatchMode } from '@primevue/core/api';
 import { getVNodeProp, UniqueComponentId, HelperSet, ConnectedOverlayScrollHandler } from '@primevue/core/utils';
@@ -270,6 +270,10 @@ var script$c = {
       type: String,
       "default": '960px'
     },
+    showHeaders: {
+      type: Boolean,
+      "default": true
+    },
     showGridlines: {
       type: Boolean,
       "default": false
@@ -2163,8 +2167,10 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     key: 1,
     empty: $props.empty,
     columns: $props.columns,
-    templates: $props.templates
-  }, null, 8, ["empty", "columns", "templates"]))], 16);
+    templates: $props.templates,
+    unstyled: _ctx.unstyled,
+    pt: _ctx.pt
+  }, null, 8, ["empty", "columns", "templates", "unstyled", "pt"]))], 16);
 }
 
 script$7.render = render$7;
@@ -3333,6 +3339,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     disabled: $props.disabled,
     "aria-label": $options.headerCheckboxAriaLabel,
     onChange: $options.onChange,
+    unstyled: _ctx.unstyled,
     pt: $options.getColumnPT('pcHeaderCheckbox')
   }, {
     icon: withCtx(function (slotProps) {
@@ -3346,7 +3353,7 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, $options.getColumnPT('pcHeaderCheckbox')['icon']), null, 16, ["class"])) : createCommentVNode("", true)];
     }),
     _: 1
-  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "pt"]);
+  }, 8, ["modelValue", "disabled", "aria-label", "onChange", "unstyled", "pt"]);
 }
 
 script$3.render = render$3;
@@ -3980,9 +3987,8 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     role: "rowgroup"
   }, $props.columnGroup ? _objectSpread$2(_objectSpread$2({}, _ctx.ptm('thead', $options.ptmTHeadOptions)), $options.getColumnGroupPT('root')) : _ctx.ptm('thead', $options.ptmTHeadOptions), {
     "data-pc-section": "thead"
-  }), [!$props.columnGroup ? (openBlock(), createElementBlock(Fragment, {
-    key: 0
-  }, [createElementVNode("tr", mergeProps({
+  }), [!$props.columnGroup ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 0,
     role: "row"
   }, _ctx.ptm('headerRow')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
     return openBlock(), createElementBlock(Fragment, {
@@ -4055,8 +4061,66 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
     }, null, 8, ["column", "index", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "filterButtonProps", "first", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
-  }), 128))], 16), $props.filterDisplay === 'row' ? (openBlock(), createElementBlock("tr", mergeProps({
-    key: 0,
+  }), 128))], 16)) : (openBlock(true), createElementBlock(Fragment, {
+    key: 1
+  }, renderList($options.getHeaderRows(), function (row, i) {
+    return openBlock(), createElementBlock("tr", mergeProps({
+      key: i,
+      role: "row",
+      ref_for: true
+    }, _objectSpread$2(_objectSpread$2({}, _ctx.ptm('headerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getHeaderColumns(row), function (col, j) {
+      return openBlock(), createElementBlock(Fragment, {
+        key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
+      }, [!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')) && typeof col.children !== 'string' ? (openBlock(), createBlock(_component_DTHeaderCell, {
+        key: 0,
+        column: col,
+        onColumnClick: _cache[15] || (_cache[15] = function ($event) {
+          return _ctx.$emit('column-click', $event);
+        }),
+        onColumnMousedown: _cache[16] || (_cache[16] = function ($event) {
+          return _ctx.$emit('column-mousedown', $event);
+        }),
+        groupRowsBy: $props.groupRowsBy,
+        groupRowSortField: $props.groupRowSortField,
+        sortMode: $props.sortMode,
+        sortField: $props.sortField,
+        sortOrder: $props.sortOrder,
+        multiSortMeta: $props.multiSortMeta,
+        allRowsSelected: $props.allRowsSelected,
+        empty: $props.empty,
+        onCheckboxChange: _cache[17] || (_cache[17] = function ($event) {
+          return _ctx.$emit('checkbox-change', $event);
+        }),
+        filters: $props.filters,
+        filterDisplay: $props.filterDisplay,
+        filtersStore: $props.filtersStore,
+        onFilterChange: _cache[18] || (_cache[18] = function ($event) {
+          return _ctx.$emit('filter-change', $event);
+        }),
+        onFilterApply: _cache[19] || (_cache[19] = function ($event) {
+          return _ctx.$emit('filter-apply');
+        }),
+        onOperatorChange: _cache[20] || (_cache[20] = function ($event) {
+          return _ctx.$emit('operator-change', $event);
+        }),
+        onMatchmodeChange: _cache[21] || (_cache[21] = function ($event) {
+          return _ctx.$emit('matchmode-change', $event);
+        }),
+        onConstraintAdd: _cache[22] || (_cache[22] = function ($event) {
+          return _ctx.$emit('constraint-add', $event);
+        }),
+        onConstraintRemove: _cache[23] || (_cache[23] = function ($event) {
+          return _ctx.$emit('constraint-remove', $event);
+        }),
+        onApplyClick: _cache[24] || (_cache[24] = function ($event) {
+          return _ctx.$emit('apply-click', $event);
+        }),
+        unstyled: _ctx.unstyled,
+        pt: _ctx.pt
+      }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
+    }), 128))], 16);
+  }), 128)), $props.filterDisplay === 'row' ? (openBlock(), createElementBlock("tr", mergeProps({
+    key: 2,
     role: "row"
   }, _ctx.ptm('headerRow')), [(openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, function (col, i) {
     return openBlock(), createElementBlock(Fragment, {
@@ -4070,7 +4134,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       key: 0,
       checked: $props.allRowsSelected,
       disabled: $props.empty,
-      onChange: _cache[15] || (_cache[15] = function ($event) {
+      onChange: _cache[25] || (_cache[25] = function ($event) {
         return _ctx.$emit('checkbox-change', $event);
       }),
       column: col,
@@ -4095,10 +4159,10 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       filtersStore: $props.filtersStore,
       filterInputProps: $props.filterInputProps,
       filterButtonProps: $props.filterButtonProps,
-      onFilterChange: _cache[16] || (_cache[16] = function ($event) {
+      onFilterChange: _cache[26] || (_cache[26] = function ($event) {
         return _ctx.$emit('filter-change', $event);
       }),
-      onFilterApply: _cache[17] || (_cache[17] = function ($event) {
+      onFilterApply: _cache[27] || (_cache[27] = function ($event) {
         return _ctx.$emit('filter-apply');
       }),
       filterMenuStyle: $options.columnProp(col, 'filterMenuStyle'),
@@ -4110,84 +4174,26 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       showAddButton: $options.columnProp(col, 'showAddButton'),
       matchModeOptions: $options.columnProp(col, 'filterMatchModeOptions'),
       maxConstraints: $options.columnProp(col, 'maxConstraints'),
-      onOperatorChange: _cache[18] || (_cache[18] = function ($event) {
+      onOperatorChange: _cache[28] || (_cache[28] = function ($event) {
         return _ctx.$emit('operator-change', $event);
       }),
-      onMatchmodeChange: _cache[19] || (_cache[19] = function ($event) {
+      onMatchmodeChange: _cache[29] || (_cache[29] = function ($event) {
         return _ctx.$emit('matchmode-change', $event);
       }),
-      onConstraintAdd: _cache[20] || (_cache[20] = function ($event) {
+      onConstraintAdd: _cache[30] || (_cache[30] = function ($event) {
         return _ctx.$emit('constraint-add', $event);
       }),
-      onConstraintRemove: _cache[21] || (_cache[21] = function ($event) {
+      onConstraintRemove: _cache[31] || (_cache[31] = function ($event) {
         return _ctx.$emit('constraint-remove', $event);
       }),
-      onApplyClick: _cache[22] || (_cache[22] = function ($event) {
+      onApplyClick: _cache[32] || (_cache[32] = function ($event) {
         return _ctx.$emit('apply-click', $event);
       }),
       column: col,
       unstyled: _ctx.unstyled,
       pt: _ctx.pt
     }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterButtonProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints", "column", "unstyled", "pt"])) : createCommentVNode("", true)], 16)) : createCommentVNode("", true)], 64);
-  }), 128))], 16)) : createCommentVNode("", true)], 64)) : (openBlock(true), createElementBlock(Fragment, {
-    key: 1
-  }, renderList($options.getHeaderRows(), function (row, i) {
-    return openBlock(), createElementBlock("tr", mergeProps({
-      key: i,
-      role: "row",
-      ref_for: true
-    }, _objectSpread$2(_objectSpread$2({}, _ctx.ptm('headerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getHeaderColumns(row), function (col, j) {
-      return openBlock(), createElementBlock(Fragment, {
-        key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
-      }, [!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')) && typeof col.children !== 'string' ? (openBlock(), createBlock(_component_DTHeaderCell, {
-        key: 0,
-        column: col,
-        onColumnClick: _cache[23] || (_cache[23] = function ($event) {
-          return _ctx.$emit('column-click', $event);
-        }),
-        onColumnMousedown: _cache[24] || (_cache[24] = function ($event) {
-          return _ctx.$emit('column-mousedown', $event);
-        }),
-        groupRowsBy: $props.groupRowsBy,
-        groupRowSortField: $props.groupRowSortField,
-        sortMode: $props.sortMode,
-        sortField: $props.sortField,
-        sortOrder: $props.sortOrder,
-        multiSortMeta: $props.multiSortMeta,
-        allRowsSelected: $props.allRowsSelected,
-        empty: $props.empty,
-        onCheckboxChange: _cache[25] || (_cache[25] = function ($event) {
-          return _ctx.$emit('checkbox-change', $event);
-        }),
-        filters: $props.filters,
-        filterDisplay: $props.filterDisplay,
-        filtersStore: $props.filtersStore,
-        onFilterChange: _cache[26] || (_cache[26] = function ($event) {
-          return _ctx.$emit('filter-change', $event);
-        }),
-        onFilterApply: _cache[27] || (_cache[27] = function ($event) {
-          return _ctx.$emit('filter-apply');
-        }),
-        onOperatorChange: _cache[28] || (_cache[28] = function ($event) {
-          return _ctx.$emit('operator-change', $event);
-        }),
-        onMatchmodeChange: _cache[29] || (_cache[29] = function ($event) {
-          return _ctx.$emit('matchmode-change', $event);
-        }),
-        onConstraintAdd: _cache[30] || (_cache[30] = function ($event) {
-          return _ctx.$emit('constraint-add', $event);
-        }),
-        onConstraintRemove: _cache[31] || (_cache[31] = function ($event) {
-          return _ctx.$emit('constraint-remove', $event);
-        }),
-        onApplyClick: _cache[32] || (_cache[32] = function ($event) {
-          return _ctx.$emit('apply-click', $event);
-        }),
-        unstyled: _ctx.unstyled,
-        pt: _ctx.pt
-      }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "unstyled", "pt"])) : createCommentVNode("", true)], 64);
-    }), 128))], 16);
-  }), 128))], 16);
+  }), 128))], 16)) : createCommentVNode("", true)], 16);
 }
 
 script$1.render = render$1;
@@ -4306,7 +4312,6 @@ var script = {
     }
   },
   mounted: function mounted() {
-    this.$el.setAttribute(this.attributeSelector, '');
     if (this.isStateful()) {
       this.restoreState();
       this.resizableColumns && this.restoreColumnWidths();
@@ -5152,7 +5157,7 @@ var script = {
       this.destroyStyleElement();
       this.createStyleElement();
       var innerHTML = '';
-      var selector = "[data-pc-name=\"datatable\"][".concat(this.attributeSelector, "] > [data-pc-section=\"tablecontainer\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
+      var selector = "[data-pc-name=\"datatable\"][".concat(this.$attrSelector, "] > [data-pc-section=\"tablecontainer\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
         var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
@@ -5338,7 +5343,7 @@ var script = {
       var index = e.index;
       if (this.rowDragging && this.draggedRowIndex !== index) {
         var rowElement = event.currentTarget;
-        var rowY = getOffset(rowElement).top + getWindowScrollTop();
+        var rowY = getOffset(rowElement).top;
         var pageY = event.pageY;
         var rowMidY = rowY + getOuterHeight(rowElement) / 2;
         var prevRowElement = rowElement.previousElementSibling;
@@ -5564,7 +5569,7 @@ var script = {
     addColumnWidthStyles: function addColumnWidthStyles(widths) {
       this.createStyleElement();
       var innerHTML = '';
-      var selector = "[data-pc-name=\"datatable\"][".concat(this.attributeSelector, "] > [data-pc-section=\"tablecontainer\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
+      var selector = "[data-pc-name=\"datatable\"][".concat(this.$attrSelector, "] > [data-pc-section=\"tablecontainer\"] ").concat(this.virtualScrollerDisabled ? '' : '> [data-pc-name="virtualscroller"]', " > table[data-pc-section=\"table\"]");
       widths.forEach(function (width, index) {
         var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
         innerHTML += "\n        ".concat(selector, " > thead[data-pc-section=\"thead\"] > tr > th:nth-child(").concat(index + 1, "),\n        ").concat(selector, " > tbody[data-pc-section=\"tbody\"] > tr > td:nth-child(").concat(index + 1, "),\n        ").concat(selector, " > tfoot[data-pc-section=\"tfoot\"] > tr > td:nth-child(").concat(index + 1, ") {\n            ").concat(style, "\n        }\n    ");
@@ -5809,9 +5814,6 @@ var script = {
         });
       }
     },
-    attributeSelector: function attributeSelector() {
-      return UniqueComponentId();
-    },
     groupRowSortField: function groupRowSortField() {
       return this.sortMode === 'single' ? this.sortField : this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null;
     },
@@ -6029,7 +6031,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         role: "table",
         "class": [_ctx.cx('table'), _ctx.tableClass],
         style: [_ctx.tableStyle, slotProps.spacerStyle]
-      }, _objectSpread(_objectSpread({}, _ctx.tableProps), _ctx.ptm('table'))), [createVNode(_component_DTTableHeader, {
+      }, _objectSpread(_objectSpread({}, _ctx.tableProps), _ctx.ptm('table'))), [_ctx.showHeaders ? (openBlock(), createBlock(_component_DTTableHeader, {
+        key: 0,
         columnGroup: $options.headerColumnGroup,
         columns: slotProps.columns,
         rowGroupMode: _ctx.rowGroupMode,
@@ -6077,8 +6080,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         }),
         unstyled: _ctx.unstyled,
         pt: _ctx.pt
-      }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterButtonProps", "filterInputProps", "first", "onFilterChange", "onFilterApply", "unstyled", "pt"]), _ctx.frozenValue ? (openBlock(), createBlock(_component_DTTableBody, {
-        key: 0,
+      }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterButtonProps", "filterInputProps", "first", "onFilterChange", "onFilterApply", "unstyled", "pt"])) : createCommentVNode("", true), _ctx.frozenValue ? (openBlock(), createBlock(_component_DTTableBody, {
+        key: 1,
         ref: "frozenBodyRef",
         value: _ctx.frozenValue,
         frozenRow: true,
@@ -6259,7 +6262,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         unstyled: _ctx.unstyled,
         pt: _ctx.pt
       }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "editButtonProps", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "unstyled", "pt"]), $options.hasSpacerStyle(slotProps.spacerStyle) ? (openBlock(), createElementBlock("tbody", mergeProps({
-        key: 1,
+        key: 2,
         "class": _ctx.cx('virtualScrollerSpacer'),
         style: {
           height: "calc(".concat(slotProps.spacerStyle.height, " - ").concat(slotProps.rows.length * slotProps.itemSize, "px)")