primevue 3.34.0 → 3.35.0

package/datatable/datatable.js

@@ -30,7 +30,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
     var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
     var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
 
-    var styles = "\n.p-datatable {\n    position: relative;\n}\n\n.p-datatable-table {\n    border-spacing: 0px;\n    width: 100%;\n}\n\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    user-select: none;\n}\n\n.p-datatable .p-sortable-column .p-column-title,\n.p-datatable .p-sortable-column .p-sortable-column-icon,\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    vertical-align: middle;\n}\n\n.p-datatable .p-sortable-column .p-sortable-column-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-datatable-hoverable-rows .p-selectable-row {\n    cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable > .p-datatable-wrapper {\n    position: relative;\n}\n\n.p-datatable-scrollable-table > .p-datatable-thead {\n    top: 0;\n    z-index: 1;\n}\n\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tfoot {\n    bottom: 0;\n    z-index: 1;\n}\n\n.p-datatable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n\n.p-datatable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n\n.p-datatable-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n\n.p-datatable-flex-scrollable > .p-datatable-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\n}\n\n.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n    position: sticky;\n    z-index: 1;\n}\n\n/* Resizable */\n.p-datatable-resizable-table > .p-datatable-thead > tr > th,\n.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n.p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n\n.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n\n.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: 0.5rem;\n    height: 100%;\n    padding: 0px;\n    cursor: col-resize;\n    border: 1px solid transparent;\n}\n\n.p-datatable .p-column-header-content {\n    display: flex;\n    align-items: center;\n}\n\n.p-datatable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Reorder */\n.p-datatable-reorder-indicator-up,\n.p-datatable-reorder-indicator-down {\n    position: absolute;\n    display: none;\n}\n\n.p-reorderable-column,\n.p-datatable-reorderablerow-handle {\n    cursor: move;\n}\n\n/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n    display: flex;\n    align-items: center;\n    width: 100%;\n}\n\n.p-column-filter-menu {\n    display: inline-flex;\n    margin-left: auto;\n}\n\n.p-column-filter-row .p-column-filter-element {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-column-filter-row-items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.p-column-filter-row-item {\n    cursor: pointer;\n}\n\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n    justify-content: center;\n}\n\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n    flex-grow: 0;\n}\n\n.p-column-filter-buttonbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n    width: auto;\n}\n\n/* Responsive */\n.p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n    display: none;\n}\n\n/* VirtualScroller */\n.p-datatable-virtualscroller-spacer {\n    display: flex;\n}\n\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n";
+    var styles = "\n@layer primevue {\n    .p-datatable {\n        position: relative;\n    }\n    \n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n    \n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n    \n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n    \n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-datatable-hoverable-rows .p-selectable-row {\n        cursor: pointer;\n    }\n    \n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-thead {\n        top: 0;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        bottom: 0;\n        z-index: 1;\n    }\n    \n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n    \n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n    \n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n    \n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n    \n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n    \n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n    \n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n    \n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute !important;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n    \n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n    \n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n    \n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n    \n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n    \n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n    \n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n    \n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n    \n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n    \n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n    \n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n    \n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n    \n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n    \n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n    \n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n    \n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n    \n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none !important;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n}\n";
     var inlineStyles = {
       wrapper: {
         overflow: 'auto'
@@ -1367,8 +1367,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "data-pc-group-section": "rowactionbutton"
       }), [$props.column.children && $props.column.children.rowtogglericon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowtogglericon), {
         key: 0,
+        "class": vue.normalizeClass(_ctx.cx('rowTogglerIcon')),
         rowExpanded: $props.isRowExpanded
-      }, null, 8, ["rowExpanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+      }, null, 8, ["class", "rowExpanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: 1
       }, [$props.isRowExpanded && $props.expandedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", {
         key: 0,
@@ -1470,7 +1471,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           "default": 0
         },
         dataKey: {
-          type: String,
+          type: [String, Function],
           "default": null
         },
         expandedRowIcon: {
@@ -3079,8 +3080,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   key: 1,
                   field: $props.field,
                   filterModel: fieldConstraint,
-                  filterCallback: $options.filterCallback
-                }, null, 8, ["field", "filterModel", "filterCallback"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterRemove'))), [$options.showRemoveIcon ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
+                  filterCallback: $options.filterCallback,
+                  applyFilter: $options.applyFilter
+                }, null, 8, ["field", "filterModel", "filterCallback", "applyFilter"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterRemove'))), [$options.showRemoveIcon ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
                   key: 0,
                   type: "button",
                   "class": vue.normalizeClass(_ctx.cx('filterRemoveButton')),
@@ -4488,7 +4490,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         },
         onRowClick: function onRowClick(e) {
           var event = e.originalEvent;
-          var index = e.index;
           var body = this.$refs.bodyRef && this.$refs.bodyRef.$el;
           var focusedItem = utils.DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
           if (utils.DomHandler.isClickable(event.target)) {
@@ -4588,8 +4589,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
           this.rowTouched = false;
           if (focusedItem) {
+            var targetRow = e.originalEvent.target.closest('tr[data-p-selectable-row="true"]');
             focusedItem.tabIndex = '-1';
-            utils.DomHandler.find(body, 'tr[data-p-selectable-row="true"]')[index].tabIndex = '0';
+            targetRow.tabIndex = '0';
           }
         },
         onRowDblClick: function onRowDblClick(e) {
@@ -5210,7 +5212,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return null;
         },
         onRowMouseDown: function onRowMouseDown(event) {
-          if (utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
+          if (utils.DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || utils.DomHandler.getAttribute(event.target.parentElement, 'data-pc-section') === 'rowreordericon') event.currentTarget.draggable = true;else event.currentTarget.draggable = false;
         },
         onRowDragStart: function onRowDragStart(e) {
           var event = e.originalEvent;
@@ -5857,28 +5859,52 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         key: "1"
       } : undefined, _ctx.$slots.paginatorfirstpagelinkicon ? {
         name: "firstpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "2"
       } : undefined, _ctx.$slots.paginatorprevpagelinkicon ? {
         name: "prevpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "3"
       } : undefined, _ctx.$slots.paginatornextpagelinkicon ? {
         name: "nextpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "4"
       } : undefined, _ctx.$slots.paginatorlastpagelinkicon ? {
         name: "lastpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "5"
+      } : undefined, _ctx.$slots.paginatorjumptopagedropdownicon ? {
+        name: "jumptopagedropdownicon",
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorjumptopagedropdownicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
+        }),
+        key: "6"
+      } : undefined, _ctx.$slots.paginatorrowsperpagedropdownicon ? {
+        name: "rowsperpagedropdownicon",
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorrowsperpagedropdownicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
+        }),
+        key: "7"
       } : undefined]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "class", "alwaysShow", "unstyled", "pt"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
         "class": _ctx.cx('wrapper'),
         style: [_ctx.sx('wrapper'), {
@@ -6184,28 +6210,52 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         key: "1"
       } : undefined, _ctx.$slots.paginatorfirstpagelinkicon ? {
         name: "firstpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorfirstpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "2"
       } : undefined, _ctx.$slots.paginatorprevpagelinkicon ? {
         name: "prevpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorprevpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "3"
       } : undefined, _ctx.$slots.paginatornextpagelinkicon ? {
         name: "nextpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatornextpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "4"
       } : undefined, _ctx.$slots.paginatorlastpagelinkicon ? {
         name: "lastpagelinkicon",
-        fn: vue.withCtx(function () {
-          return [vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon")];
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorlastpagelinkicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
         }),
         key: "5"
+      } : undefined, _ctx.$slots.paginatorjumptopagedropdownicon ? {
+        name: "jumptopagedropdownicon",
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorjumptopagedropdownicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
+        }),
+        key: "6"
+      } : undefined, _ctx.$slots.paginatorrowsperpagedropdownicon ? {
+        name: "rowsperpagedropdownicon",
+        fn: vue.withCtx(function (slotProps) {
+          return [vue.renderSlot(_ctx.$slots, "paginatorrowsperpagedropdownicon", {
+            "class": vue.normalizeClass(slotProps["class"])
+          })];
+        }),
+        key: "7"
       } : undefined]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "class", "alwaysShow", "unstyled", "pt"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", vue.mergeProps({
         ref: "resizeHelper",
         "class": _ctx.cx('resizeHelper'),