primevue 3.47.2 → 3.48.0

package/datatable/BodyRow.vue

@@ -479,6 +479,7 @@ export default {
         },
         rowClasses() {
             let rowStyleClass = [];
+            let columnSelectionMode = null;
 
             if (this.rowClass) {
                 let rowClassValue = this.rowClass(this.rowData);
@@ -488,7 +489,18 @@ export default {
                 }
             }
 
-            return [this.cx('row', { rowData: this.rowData, index: this.rowIndex }), rowStyleClass];
+            if (this.columns) {
+                for (let col of this.columns) {
+                    let _selectionMode = this.columnProp(col, 'selectionMode');
+
+                    if (ObjectUtils.isNotEmpty(_selectionMode) && _selectionMode === 'multiple') {
+                        columnSelectionMode = _selectionMode;
+                        break;
+                    }
+                }
+            }
+
+            return [this.cx('row', { rowData: this.rowData, index: this.rowIndex, columnSelectionMode }), rowStyleClass];
         },
         rowTabindex() {
             if (this.selection === null && (this.selectionMode === 'single' || this.selectionMode === 'multiple')) {

package/datatable/ColumnFilter.vue

@@ -69,7 +69,6 @@
                                 @update:modelValue="onOperatorChange($event)"
                                 :unstyled="unstyled"
                                 :pt="getColumnPT('filterOperatorDropdown')"
-                                data-pc-section="filteroperatordropdown"
                             ></CFDropdown>
                         </div>
                         <div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
@@ -85,7 +84,6 @@
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :unstyled="unstyled"
                                     :pt="getColumnPT('filterMatchModeDropdown')"
-                                    data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
@@ -100,7 +98,6 @@
                                         severity="danger"
                                         size="small"
                                         :pt="getColumnPT('filterRemoveButton')"
-                                        data-pc-section="filterremovebutton"
                                     >
                                         <template #icon="iconProps">
                                             <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
@@ -121,7 +118,6 @@
                                 severity="info"
                                 size="small"
                                 :pt="getColumnPT('filterAddRuleButton')"
-                                data-pc-section="filteraddrulebutton"
                             >
                                 <template #icon="iconProps">
                                     <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
@@ -139,21 +135,10 @@
                                 size="small"
                                 outlined
                                 :pt="getColumnPT('filterClearButton')"
-                                data-pc-section="filterclearbutton"
                             ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton
-                                    v-if="!filterApplyTemplate"
-                                    type="button"
-                                    :class="cx('filterApplyButton')"
-                                    :label="applyButtonLabel"
-                                    @click="applyFilter()"
-                                    :unstyled="unstyled"
-                                    size="small"
-                                    :pt="getColumnPT('filterApplyButton')"
-                                    data-pc-section="filterapplybutton"
-                                ></CFButton>
+                                <CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -294,11 +279,17 @@ export default {
     },
     data() {
         return {
+            id: this.$attrs.id,
             overlayVisible: false,
             defaultMatchMode: null,
             defaultOperator: null
         };
     },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        }
+    },
     overlay: null,
     selfClick: false,
     overlayEventListener: null,
@@ -314,6 +305,8 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.filters && this.filters[this.field]) {
             let fieldFilters = this.filters[this.field];
 
@@ -635,7 +628,7 @@ export default {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
         },
         overlayId() {
-            return UniqueComponentId();
+            return this.id + '_overlay';
         },
         matchModes() {
             return (

package/datatable/DataTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
+    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
         <slot></slot>
         <div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
             <slot v-if="$slots.loading" name="loading"></slot>
@@ -1281,7 +1281,7 @@ export default {
 
             this.$refs.resizeHelper.style.display = 'none';
             this.resizeColumn = null;
-            this.$el.setAttribute('data-p-unselectable-text', 'true');
+            this.$el.removeAttribute('data-p-unselectable-text');
             !this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text');
 
             this.unbindColumnResizeEvents();

package/datatable/HeaderCell.vue

@@ -27,7 +27,7 @@
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
             <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
-                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" data-pc-section="sorticon" />
+                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
             </span>
             <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
             <DTHeaderCheckbox

package/datatable/TableBody.vue

@@ -1,7 +1,7 @@
 <template>
     <tbody :ref="bodyRef" :class="cx('tbody')" role="rowgroup" :style="bodyStyle" v-bind="ptm('tbody', ptmTBodyOptions)">
         <template v-if="!empty">
-            <template v-for="(rowData, rowIndex) of value" :key="rowIndex">
+            <template v-for="(rowData, rowIndex) of value" :key="getRowKey(rowData, rowIndex)">
                 <DTBodyRow
                     :rowData="rowData"
                     :index="rowIndex"
@@ -71,7 +71,7 @@
 
 <script>
 import BaseComponent from 'primevue/basecomponent';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import BodyRow from './BodyRow.vue';
 
 export default {
@@ -248,6 +248,9 @@ export default {
         }
     },
     methods: {
+        getRowKey(rowData, rowIndex) {
+            return this.dataKey ? ObjectUtils.resolveFieldData(rowData, this.dataKey) : rowIndex;
+        },
         updateFrozenRowStickyPosition() {
             this.$el.style.top = DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
         },

package/datatable/datatable.cjs.js

@@ -1154,6 +1154,9 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
 script$9.render = render$9;
 
 function _typeof$9(o) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof$9(o); }
+function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
+function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty$9(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -1533,15 +1536,35 @@ var script$8 = {
     },
     rowClasses: function rowClasses() {
       var rowStyleClass = [];
+      var columnSelectionMode = null;
       if (this.rowClass) {
         var rowClassValue = this.rowClass(this.rowData);
         if (rowClassValue) {
           rowStyleClass.push(rowClassValue);
         }
       }
+      if (this.columns) {
+        var _iterator = _createForOfIteratorHelper$2(this.columns),
+          _step;
+        try {
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            var col = _step.value;
+            var _selectionMode = this.columnProp(col, 'selectionMode');
+            if (utils.ObjectUtils.isNotEmpty(_selectionMode) && _selectionMode === 'multiple') {
+              columnSelectionMode = _selectionMode;
+              break;
+            }
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      }
       return [this.cx('row', {
         rowData: this.rowData,
-        index: this.rowIndex
+        index: this.rowIndex,
+        columnSelectionMode: columnSelectionMode
       }), rowStyleClass];
     },
     rowTabindex: function rowTabindex() {
@@ -1934,6 +1957,9 @@ var script$7 = {
     }
   },
   methods: {
+    getRowKey: function getRowKey(rowData, rowIndex) {
+      return this.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.dataKey) : rowIndex;
+    },
     updateFrozenRowStickyPosition: function updateFrozenRowStickyPosition() {
       this.$el.style.top = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
     },
@@ -1994,7 +2020,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     key: 0
   }, vue.renderList($props.value, function (rowData, rowIndex) {
     return vue.openBlock(), vue.createBlock(_component_DTBodyRow, {
-      key: rowIndex,
+      key: $options.getRowKey(rowData, rowIndex),
       rowData: rowData,
       index: rowIndex,
       value: $props.value,
@@ -2515,11 +2541,17 @@ var script$4 = {
   },
   data: function data() {
     return {
+      id: this.$attrs.id,
       overlayVisible: false,
       defaultMatchMode: null,
       defaultOperator: null
     };
   },
+  watch: {
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || utils.UniqueComponentId();
+    }
+  },
   overlay: null,
   selfClick: false,
   overlayEventListener: null,
@@ -2534,6 +2566,7 @@ var script$4 = {
     }
   },
   mounted: function mounted() {
+    this.id = this.id || utils.UniqueComponentId();
     if (this.filters && this.filters[this.field]) {
       var fieldFilters = this.filters[this.field];
       if (fieldFilters.operator) {
@@ -2849,7 +2882,7 @@ var script$4 = {
       return this.showMenu && (this.display === 'row' ? this.type !== 'boolean' : true);
     },
     overlayId: function overlayId() {
-      return utils.UniqueComponentId();
+      return this.id + '_overlay';
     },
     matchModes: function matchModes() {
       var _this5 = this;
@@ -3063,8 +3096,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               return $options.onOperatorChange($event);
             }),
             unstyled: _ctx.unstyled,
-            pt: $options.getColumnPT('filterOperatorDropdown'),
-            "data-pc-section": "filteroperatordropdown"
+            pt: $options.getColumnPT('filterOperatorDropdown')
           }, null, 8, ["options", "modelValue", "aria-label", "class", "unstyled", "pt"])], 16)) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
             "class": _ctx.cx('filterConstraints')
           }, $options.getColumnPT('filterConstraints')), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.fieldConstraints, function (fieldConstraint, i) {
@@ -3083,8 +3115,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 return $options.onMenuMatchModeChange($event, i);
               },
               unstyled: _ctx.unstyled,
-              pt: $options.getColumnPT('filterMatchModeDropdown'),
-              "data-pc-section": "filtermatchmodedropdown"
+              pt: $options.getColumnPT('filterMatchModeDropdown')
             }, null, 8, ["options", "modelValue", "class", "aria-label", "onUpdate:modelValue", "unstyled", "pt"])) : vue.createCommentVNode("", true), $props.display === 'menu' ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
               key: 1,
               field: $props.field,
@@ -3103,8 +3134,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               text: "",
               severity: "danger",
               size: "small",
-              pt: $options.getColumnPT('filterRemoveButton'),
-              "data-pc-section": "filterremovebutton"
+              pt: $options.getColumnPT('filterRemoveButton')
             }, {
               icon: vue.withCtx(function (iconProps) {
                 return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), vue.mergeProps({
@@ -3128,8 +3158,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             text: "",
             severity: "info",
             size: "small",
-            pt: $options.getColumnPT('filterAddRuleButton'),
-            "data-pc-section": "filteraddrulebutton"
+            pt: $options.getColumnPT('filterAddRuleButton')
           }, {
             icon: vue.withCtx(function (iconProps) {
               return [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), vue.mergeProps({
@@ -3148,8 +3177,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             unstyled: _ctx.unstyled,
             size: "small",
             outlined: "",
-            pt: $options.getColumnPT('filterClearButton'),
-            "data-pc-section": "filterclearbutton"
+            pt: $options.getColumnPT('filterClearButton')
           }, null, 8, ["class", "label", "onClick", "unstyled", "pt"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearTemplate), {
             key: 1,
             field: $props.field,
@@ -3167,8 +3195,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             }),
             unstyled: _ctx.unstyled,
             size: "small",
-            pt: $options.getColumnPT('filterApplyButton'),
-            "data-pc-section": "filterapplybutton"
+            pt: $options.getColumnPT('filterApplyButton')
           }, null, 8, ["class", "label", "unstyled", "pt"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterApplyTemplate), {
             key: 1,
             field: $props.field,
@@ -3604,9 +3631,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     sorted: $options.sortState.sorted,
     sortOrder: $options.sortState.sortOrder,
     "class": _ctx.cx('sortIcon')
-  }, $options.getColumnPT('sorticon'), {
-    "data-pc-section": "sorticon"
-  }), null, 16, ["sorted", "sortOrder", "class"]))], 16)) : vue.createCommentVNode("", true), $options.isMultiSorted() ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+  }, $options.getColumnPT('sorticon')), null, 16, ["sorted", "sortOrder", "class"]))], 16)) : vue.createCommentVNode("", true), $options.isMultiSorted() ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
     key: 3,
     "class": _ctx.cx('sortBadge')
   }, $options.getColumnPT('sortBadge')), vue.toDisplayString($options.getBadgeValue()), 17)) : vue.createCommentVNode("", true), $options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row' ? (vue.openBlock(), vue.createBlock(_component_DTHeaderCheckbox, {
@@ -5033,7 +5058,7 @@ var script = {
       }
       this.$refs.resizeHelper.style.display = 'none';
       this.resizeColumn = null;
-      this.$el.setAttribute('data-p-unselectable-text', 'true');
+      this.$el.removeAttribute('data-p-unselectable-text');
       !this.isUnstyled && utils.DomHandler.removeClass(this.$el, 'p-unselectable-text');
       this.unbindColumnResizeEvents();
       if (this.isStateful()) {
@@ -5765,9 +5790,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     "class": _ctx.cx('root'),
     "data-scrollselectors": ".p-datatable-wrapper"
-  }, _ctx.ptm('root'), {
-    "data-pc-name": "datatable"
-  }), [vue.renderSlot(_ctx.$slots, "default"), _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+  }, _ctx.ptm('root')), [vue.renderSlot(_ctx.$slots, "default"), _ctx.loading ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     key: 0,
     "class": _ctx.cx('loadingOverlay')
   }, _ctx.ptm('loadingOverlay')), [_ctx.$slots.loading ? vue.renderSlot(_ctx.$slots, "loading", {