Merge branch 'master' into v4

components/lib/autocomplete/AutoComplete.vue

@@ -777,8 +777,13 @@ export default {
         isValidSelectedOption(option) {
             return this.isValidOption(option) && this.isSelected(option);
         },
+        isEquals(value1, value2) {
+            return ObjectUtils.equals(value1, value2, this.equalityKey);
+        },
         isSelected(option) {
-            return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
+            const optionValue = this.getOptionValue(option);
+
+            return this.multiple ? (this.modelValue || []).some((value) => this.isEquals(value, optionValue)) : this.isEquals(this.modelValue, this.getOptionValue(option));
         },
         findFirstOptionIndex() {
             return this.visibleOptions.findIndex((option) => this.isValidOption(option));

components/lib/datatable/DataTable.d.ts

@@ -943,9 +943,9 @@ export interface DataTableProps {
      */
     filterDisplay?: 'menu' | 'row' | undefined;
     /**
-     * Fields for global filter
+     * 	An array of fields as string or function to use in global filtering.
      */
-    globalFilterFields?: string[] | undefined;
+    globalFilterFields?: (string | ((data: any) => string))[] | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */

components/lib/datatable/DataTable.vue

@@ -87,6 +87,7 @@
                             :filtersStore="filters"
                             :filterDisplay="filterDisplay"
                             :filterInputProps="filterInputProps"
+                            :first="d_first"
                             @column-click="onColumnHeaderClick($event)"
                             @column-mousedown="onColumnHeaderMouseDown($event)"
                             @filter-change="onFilterChange"

components/lib/datatable/TableHeader.vue

@@ -29,6 +29,7 @@
                         :filterDisplay="filterDisplay"
                         :filtersStore="filtersStore"
                         :filterInputProps="filterInputProps"
+                        :first="first"
                         @filter-change="$emit('filter-change', $event)"
                         @filter-apply="$emit('filter-apply')"
                         @operator-change="$emit('operator-change', $event)"
@@ -223,6 +224,10 @@ export default {
             type: Boolean,
             default: false
         },
+        first: {
+            type: Number,
+            default: 0
+        },
         filterInputProps: {
             type: null,
             default: null

components/lib/inputnumber/InputNumber.vue

@@ -355,7 +355,7 @@ export default {
                 return;
             }
 
-            if (event.shiftKey || event.altKey) {
+            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
                 this.isSpecialChar = true;
 
                 return;

components/lib/inputotp/InputOtp.vue

@@ -157,7 +157,7 @@ export default {
                     break;
 
                 default:
-                    if ((this.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.code) >= 0 && Number(event.code) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
+                    if ((this.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
                         event.preventDefault();
                     }
 

components/lib/slider/Slider.vue

@@ -5,8 +5,8 @@
             v-if="!range"
             :class="cx('handle')"
             :style="[sx('handle'), handleStyle]"
-            @touchstart="onDragStart($event)"
+            @touchstart.passive="onDragStart($event)"
-            @touchmove="onDrag($event)"
+            @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event)"
             @keydown="onKeyDown($event)"
@@ -24,8 +24,8 @@
             v-if="range"
             :class="cx('handle')"
             :style="[sx('handle'), rangeStartHandleStyle]"
-            @touchstart="onDragStart($event, 0)"
+            @touchstart.passive="onDragStart($event, 0)"
-            @touchmove="onDrag($event)"
+            @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 0)"
             @keydown="onKeyDown($event, 0)"
@@ -43,8 +43,8 @@
             v-if="range"
             :class="cx('handle')"
             :style="[sx('handle'), rangeEndHandleStyle]"
-            @touchstart="onDragStart($event, 1)"
+            @touchstart.passive="onDragStart($event, 1)"
-            @touchmove="onDrag($event)"
+            @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 1)"
             @keydown="onKeyDown($event, 1)"

components/lib/tree/Tree.d.ts

@@ -370,13 +370,17 @@ export interface TreeSlots {
     }): VNode[];
     /**
      * Custom node icon template.
-     * @param {Object} scope - togglericon slot's params.
+     * @param {Object} scope - nodeicon slot's params.
      */
     nodeicon(scope: {
         /**
          * Tree node instance
          */
         node: TreeNode;
+        /**
+         * Style class of the icon.
+         */
+        class: string;
     }): VNode[];
     /**
      * Custom checkbox icon

components/lib/tree/Tree.spec.js

@@ -63,7 +63,7 @@ describe('Tree.vue', () => {
     it('should render icon slot', ({ expect }) => {
         let wrapper = mount(Tree, {
             slots: {
-                nodeIcon: `<i data-node-icon/>`
+                nodeicon: `<i data-node-icon/>`
             },
             props: {
                 value: [

components/lib/tree/TreeNode.vue

@@ -32,7 +32,7 @@
                     <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getPTOptions('nodeCheckbox.icon')" />
                 </template>
             </Checkbox>
-            <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node"></component>
+            <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]"></component>
             <span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
             <span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />

doc/button/IconsDoc.vue

@@ -38,7 +38,7 @@ export default {
         <Button icon="pi pi-check" aria-label="Submit" />
         <Button label="Submit" icon="pi pi-check" />
         <Button label="Submit" icon="pi pi-check" iconPos="right" />
-    </div>s
+    </div>
 </template>
 
 <script setup>

doc/common/apidoc/index.json

@@ -20104,9 +20104,9 @@
                             "name": "globalFilterFields",
                             "optional": true,
                             "readonly": false,
-                            "type": "string[]",
+                            "type": "(string | Function)[]",
                             "default": "",
-                            "description": "Fields for global filter"
+                            "description": "An array of fields as string or function to use in global filtering."
                         },
                         {
                             "name": "filterLocale",
@@ -57315,8 +57315,8 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n }",
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">node</span>: <span class=\"doc-option-parameter-type\">TreeNode</span>, <span class=\"doc-option-parameter-type\">// Tree node instance</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the icon.</span>\n }",
-                                    "description": "togglericon slot's params."
+                                    "description": "nodeicon slot's params."
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",