primevue 3.22.4 → 3.24.0

package/treetable/TreeTable.d.ts

@@ -1,31 +1,19 @@
+/**
+ *
+ * TreeTable is used to display hierarchical data in tabular format.
+ *
+ * [Live Demo](https://www.primevue.org/treetable/)
+ *
+ * @module treetable
+ *
+ */
 import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { TreeNode } from '../tree';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type TreeTablePaginatorPositionType = 'top' | 'bottom' | 'both' | undefined;
-
-type TreeTableSortFieldType = string | ((item: any) => string) | undefined;
-
-type TreeTableMultiSortMetaType = TreeTableSortMeta[] | undefined | null;
-
-type TreeTableSortOrderType = 1 | 0 | -1 | undefined | null;
-
-type TreeTableSortModeType = 'single' | 'multiple' | undefined;
-
-type TreeTableFilterMatchModeType = 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
-
-type TreeTableSelectionModeType = 'single' | 'multiple' | 'checkbox' | undefined;
-
-type TreeTableFilterModeType = 'lenient' | 'strict' | undefined;
-
-type TreeTableColumnResizeModeType = 'fit' | 'expand' | undefined;
-
-type TreeTableScrollDirectionType = 'vertical' | 'horizontal' | 'both' | undefined;
-
-type TreeTableScrollHeightType = 'flex' | string | undefined;
-
-type TreeTableResponsiveLayoutType = 'stack' | 'scroll' | undefined;
-
+/**
+ * Custom treetable filter metadata.
+ */
 export interface TreeTableFilterMetaData {
     /**
      * Filter value
@@ -33,11 +21,13 @@ export interface TreeTableFilterMetaData {
     value: any;
     /**
      * Filter match mode
-     * @see TreeTableFilterMatchModeType
      */
-    matchMode: TreeTableFilterMatchModeType;
+    matchMode: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
 }
 
+/**
+ * Custom operator filter metadata.
+ */
 export interface TreeTableOperatorFilterMetaData {
     /**
      * Filter operator
@@ -50,6 +40,9 @@ export interface TreeTableOperatorFilterMetaData {
     constraints: TreeTableFilterMetaData[];
 }
 
+/**
+ * Custom filter metadata.
+ */
 export interface TreeTableFilterMeta {
     /**
      * Filter keys
@@ -58,6 +51,10 @@ export interface TreeTableFilterMeta {
     [key: string]: string | TreeTableFilterMetaData | TreeTableOperatorFilterMetaData;
 }
 
+/**
+ * Custom sort event.
+ * @see {@link TreeTableEmits.sort}
+ */
 export interface TreeTableSortEvent {
     /**
      * Browser event.
@@ -73,19 +70,16 @@ export interface TreeTableSortEvent {
     rows: number;
     /**
      * Field to sort against
-     * @see TreeTableSortFieldType
      */
-    sortField: TreeTableSortFieldType;
+    sortField: string | ((item: any) => string) | undefined;
     /**
      * Sort order as integer
-     * @see TreeTableSortOrderType
      */
-    sortOrder: TreeTableSortOrderType;
+    sortOrder: 1 | 0 | -1 | undefined | null;
     /**
      * MultiSort metadata
-     * @see TreeTableMultiSortMetaType
      */
-    multiSortMeta: TreeTableMultiSortMetaType;
+    multiSortMeta: TreeTableSortMeta[] | undefined | null;
     /**
      * Collection of active filters
      * @see TreeTableFilterMeta
@@ -93,12 +87,13 @@ export interface TreeTableSortEvent {
     filters: TreeTableFilterMeta;
     /**
      * Match modes per field
-     * @see TreeTableFilterMatchModeType
      */
-    filterMatchModes: TreeTableFilterMatchModeType;
+    filterMatchModes: 'startsWith' | 'contains' | 'notContains' | 'endsWith' | 'equals' | 'notEquals' | 'in' | 'lt' | 'lte' | 'gt' | 'gte' | 'between' | 'dateIs' | 'dateIsNot' | 'dateBefore' | 'dateAfter' | undefined;
 }
 
 /**
+ * Custom page event.
+ * @see {@link TreeTableEmits.sort}
  * @extends TreeTableSortEvent
  */
 export interface TreeTablePageEvent extends TreeTableSortEvent {
@@ -113,6 +108,8 @@ export interface TreeTablePageEvent extends TreeTableSortEvent {
 }
 
 /**
+ * Custom filter event.
+ * @see {@link TreeTableEmits.sort}
  * @extends TreeTableSortEvent
  */
 export interface TreeTableFilterEvent extends TreeTableSortEvent {
@@ -122,6 +119,9 @@ export interface TreeTableFilterEvent extends TreeTableSortEvent {
     filteredValue: any;
 }
 
+/**
+ * Custom sort metadata.
+ */
 export interface TreeTableSortMeta {
     /**
      * Column field
@@ -130,9 +130,12 @@ export interface TreeTableSortMeta {
     /**
      * Column sort order
      */
-    order: TreeTableSortOrderType;
+    order: 1 | 0 | -1 | undefined | null;
 }
 
+/**
+ * Custom expanded keys metadata.
+ */
 export interface TreeTableExpandedKeys {
     /**
      * Optional
@@ -140,6 +143,9 @@ export interface TreeTableExpandedKeys {
     [key: string]: any;
 }
 
+/**
+ * Custom selection keys metadata.
+ */
 export interface TreeTableSelectionKeys {
     /**
      * Optional
@@ -147,6 +153,9 @@ export interface TreeTableSelectionKeys {
     [key: string]: any;
 }
 
+/**
+ * Defines valid properties in TreeTable component.
+ */
 export interface TreeTableProps {
     /**
      * An array of treenodes.
@@ -164,13 +173,12 @@ export interface TreeTableProps {
     selectionKeys?: TreeTableSelectionKeys;
     /**
      * Defines the selection mode.
-     * @see TreeTableSelectionModeType
      */
-    selectionMode?: TreeTableSelectionModeType;
+    selectionMode?: 'single' | 'multiple' | 'checkbox' | undefined;
     /**
      * Defines how multiple items can be selected, when true metaKey needs to be pressed to select or unselect an item and when set to false selection of each item can be toggled individually.
      * On touch enabled devices, metaKeySelection is turned off automatically.
-     * Default value is true.
+     * @defaultValue true
      */
     metaKeySelection?: boolean | undefined;
     /**
@@ -179,7 +187,7 @@ export interface TreeTableProps {
     rows?: number | undefined;
     /**
      * Index of the first row to be displayed.
-     * Default value is 0.
+     * @defaultValue 0
      */
     first?: number | undefined;
     /**
@@ -192,17 +200,16 @@ export interface TreeTableProps {
     paginator?: boolean | undefined;
     /**
      * Position of the paginator, options are 'top','bottom' or 'both'.
-     * @see TreeTablePaginatorPositionType
-     * Default value is 'bottom'.
+     * @defaultValue bottom
      */
-    paginatorPosition?: TreeTablePaginatorPositionType;
+    paginatorPosition?: 'top' | 'bottom' | 'both' | undefined;
     /**
      * Whether to show it even there is only one page.
-     * Default value is true.
+     * @defaultValue true
      */
     alwaysShowPaginator?: boolean | undefined;
     /**
-     * Template of the paginator. It can be customized using the template property using the predefined keys, default value is 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'. Here are the available elements that can be placed inside a paginator in any order.
+     * Template of the paginator. It can be customized using the template property using the predefined keys. Here are the available elements that can be placed inside a paginator in any order.
      *
      * - FirstPageLink
      * - PrevPageLink
@@ -213,11 +220,13 @@ export interface TreeTableProps {
      * - JumpToPageDropdown
      * - JumpToPageInput
      * - CurrentPageReport
+     *
+     * @defaultValue FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown
      */
     paginatorTemplate?: string | undefined;
     /**
      * Number of page links to display.
-     * Default value is 5.
+     * @defaultValue 5
      */
     pageLinkSize?: number | undefined;
     /**
@@ -225,7 +234,7 @@ export interface TreeTableProps {
      */
     rowsPerPageOptions?: number[] | undefined;
     /**
-     * Template of the current page report element. It displays information about the pagination state. Default value is ({currentPage} of {totalPages}) whereas available placeholders are the following;
+     * Template of the current page report element. It displays information about the pagination state.
      *
      * - {currentPage}
      * - {totalPages}
@@ -233,56 +242,60 @@ export interface TreeTableProps {
      * - {first}
      * - {last}
      * - {totalRecords}
+     *
+     * @defaultValue '({currentPage} of {totalPages})'
      */
     currentPageReportTemplate?: string | undefined;
     /**
      * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
      */
     lazy?: boolean | undefined;
     /**
      * Displays a loader to indicate data load is in progress.
+     * @defaultValue false
      */
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
-     * Default value is 'pi pi-spinner'.
+     * @defaultValue pi pi-spinner
      */
     loadingIcon?: string | undefined;
     /**
      * When enabled, background of the rows change on hover.
+     * @defaultValue false
      */
     rowHover?: boolean | undefined;
     /**
      * Whether the cell widths scale according to their content or not.
+     * @defaultValue false
      */
     autoLayout?: boolean | undefined;
     /**
      * Property name or a getter function of a row data used for sorting by default.
-     * @see TreeTableSortFieldType
      */
-    sortField?: TreeTableSortFieldType | undefined;
+    sortField?: string | ((item: any) => string) | undefined | undefined;
     /**
      * Order to sort the data by default.
      */
     sortOrder?: number | undefined;
     /**
      * Default sort order of an unsorted column.
-     * Default value is 1.
+     * @defaultValue 1
      */
     defaultSortOrder?: number | undefined;
     /**
      * An array of SortMeta objects to sort the data by default in multiple sort mode.
-     * @see TreeTableMultiSortMetaType
      */
-    multiSortMeta?: TreeTableMultiSortMetaType;
+    multiSortMeta?: TreeTableSortMeta[] | undefined | null;
     /**
      * Defines whether sorting works on single column or on multiple columns.
-     * @see TreeTableSortModeType
-     * Default value is 'single'.
+     * @defaultValue single
      */
-    sortMode?: TreeTableSortModeType;
+    sortMode?: 'single' | 'multiple' | undefined;
     /**
      * When enabled, columns can have an un-sorted state.
+     * @defaultValue false
      */
     removableSort?: boolean | undefined;
     /**
@@ -292,10 +305,9 @@ export interface TreeTableProps {
     filters?: TreeTableFilterMeta;
     /**
      * Mode for filtering.
-     * @see TreeTableFilterModeType
-     *
+     * @defaultValue lenient
      */
-    filterMode?: TreeTableFilterModeType;
+    filterMode?: 'lenient' | 'strict' | undefined;
     /**
      * Locale to use in filtering. The default locale is the host environment's current locale.
      */
@@ -306,147 +318,162 @@ export interface TreeTableProps {
     resizableColumns?: boolean | undefined;
     /**
      * Defines whether the overall table width should change on column resize.
-     * @see TreeTableColumnResizeModeType
-     * Default value is 'fit'.
+     * @defaultValue fit
      */
-    columnResizeMode?: TreeTableColumnResizeModeType;
+    columnResizeMode?: 'fit' | 'expand' | undefined;
     /**
      * Indentation factor as rem value for children nodes.
-     * Default value is 1.
+     * @defaultValue 1
      */
     indentation?: number | undefined;
     /**
      * Whether to show grid lines between cells.
+     * @defaultValue false
      */
     showGridlines?: boolean | undefined;
     /**
      * When specified, enables horizontal and/or vertical scrolling.
+     * @defaultValue false
      */
     scrollable?: boolean | undefined;
     /**
      * Height of the scroll viewport in fixed pixels or the 'flex' keyword for a dynamic size.
-     * @see TreeTableScrollHeightType
      */
-    scrollHeight?: TreeTableScrollHeightType;
+    scrollHeight?: 'flex' | string | undefined;
     /**
      * Orientation of the scrolling.
-     * @see TreeTableScrollDirectionType
-     * Default value is 'vertical'.
+     * @defaultValue vertical
      */
-    scrollDirection?: TreeTableScrollDirectionType;
+    scrollDirection?: 'vertical' | 'horizontal' | 'both' | undefined;
     /**
      * Defines the responsive mode, currently only option is scroll.
-     * @see TreeTableResponsiveLayoutType
-     * Default value is 'stack'.
+     * @defaultValue stack
      */
-    responsiveLayout?: TreeTableResponsiveLayoutType;
+    responsiveLayout?: 'stack' | 'scroll' | undefined;
     /**
      * Props to pass to the table element.
      */
     tableProps?: any | undefined;
 }
 
+/**
+ * Defines valid slots in TreeTable component.
+ */
 export interface TreeTableSlots {
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom footer template.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
     /**
      * Custom paginator start template.
      */
-    paginatorstart: () => VNode[];
+    paginatorstart(): VNode[];
     /**
      * Custom paginator end template.
      */
-    paginatorend: () => VNode[];
+    paginatorend(): VNode[];
     /**
      * Custom empty template.
      */
-    empty: () => VNode[];
+    empty(): VNode[];
 }
 
-export declare type TreeTableEmits = {
+/**
+ * Defines valid emits in TreeTable component.
+ */
+export interface TreeTableEmits {
     /**
      * Emitted when the expanded keys change.
      * @param {TreeNode} value - New expanded keys.
      */
-    'update:expandedKeys': (value: TreeTableExpandedKeys) => void;
+    'update:expandedKeys'(value: TreeTableExpandedKeys): void;
     /**
      * Emitted when the selection keys change.
      * @param {TreeSelectionKeys} value - New selection keys.
      */
-    'update:selectionKeys': (event: TreeTableSelectionKeys) => void;
+    'update:selectionKeys'(event: TreeTableSelectionKeys): void;
     /**
      * Emitted when the first changes.
      * @param {number} value - New value.
      */
-    'update:first': (value: number) => void;
+    'update:first'(value: number): void;
     /**
      * Emitted when the rows changes.
      * @param {number} value - New value.
      */
-    'update:rows': (value: number) => void;
+    'update:rows'(value: number): void;
     /**
      * Emitted when the sortField changes.
      * @param {string} value - New value.
      */
-    'update:sortField': (value: string) => void;
+    'update:sortField'(value: string): void;
     /**
      * Emitted when the sortOrder changes.
      * @param {number | undefined} value - New value.
      */
-    'update:sortOrder': (value: number | undefined) => void;
+    'update:sortOrder'(value: number | undefined): void;
     /**
      * Emitted when the multiSortMeta changes.
-     * @param {TreeTableMultiSortMetaType} value - New value.
+     * @param {TreeTableSortMeta[] | undefined | null} value - New value.
      */
-    'update:multiSortMeta': (value: TreeTableMultiSortMetaType) => void;
+    'update:multiSortMeta'(value: TreeTableSortMeta[] | undefined | null): void;
     /**
      * Callback to invoke on pagination. Sort and Filter information is also available for lazy loading implementation.
      * @param {TreeTablePageEvent} event - Custom page event.
      */
-    page: (event: TreeTablePageEvent) => void;
+    page(event: TreeTablePageEvent): void;
     /**
      * Callback to invoke on sort. Page and Filter information is also available for lazy loading implementation.
      * @param {TreeTableSortEvent} event - Custom sort event.
      */
-    sort: (event: TreeTableSortEvent) => void;
+    sort(event: TreeTableSortEvent): void;
     /**
      * Event to emit after filtering, not triggered in lazy mode.
      * @param {TreeTableFilterEvent} event - Custom filter event.
      */
-    filter: (event: TreeTableFilterEvent) => void;
+    filter(event: TreeTableFilterEvent): void;
     /**
      * Callback to invoke when a node is selected.
      * @param {TreeNode} node - Node instance.
      */
-    'node-select': (node: TreeNode) => void;
+    'node-select'(node: TreeNode): void;
     /**
      * Callback to invoke when a node is unselected.
      * @param {TreeNode} node - Node instance.
      */
-    'node-unselect': (node: TreeNode) => void;
+    'node-unselect'(node: TreeNode): void;
     /**
      * Callback to invoke when a node is expanded.
      * @param {TreeNode} node - Node instance.
      */
-    'node-expand': (node: TreeNode) => void;
+    'node-expand'(node: TreeNode): void;
     /**
      * Callback to invoke when a node is collapsed.
      * @param {TreeNode} node - Node instance.
      */
-    'node-collapse': (node: TreeNode) => void;
+    'node-collapse'(node: TreeNode): void;
     /**
      * Callback to invoke when a column is resized.
      * @param {Event} event - Browser event.
      */
-    'column-resize-end': (event: Event) => void;
-};
+    'column-resize-end'(event: Event): void;
+}
 
+/**
+ * **PrimeVue - TreeTable**
+ *
+ * _TreeTable is used to display hierarchical data in tabular format._
+ *
+ * [Live Demo](https://www.primevue.org/treetable/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class TreeTable extends ClassComponent<TreeTableProps, TreeTableSlots, TreeTableEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -455,17 +482,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * TreeTable is used to display hierarchical data in tabular format.
- *
- * Helper Components:
- *
- * - Column
- *
- * Demos:
- *
- * - [TreeTable](https://www.primefaces.org/primevue/treetable)
- *
- */
 export default TreeTable;

package/tristatecheckbox/TriStateCheckbox.d.ts

@@ -1,13 +1,27 @@
+/**
+ *
+ * TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value.
+ *
+ * [Live Demo](https://www.primevue.org/tristatecheckbox/)
+ *
+ * @module tristatecheckbox
+ *
+ */
 import { InputHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 
+/**
+ * Defines valid properties in TriStateCheckbox component.
+ */
 export interface TriStateCheckboxProps {
     /**
      * Value of the component.
+     * @defaultValue null
      */
     modelValue?: Nullable<boolean>;
     /**
      * When present, it specifies that the component should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
     /**
@@ -32,16 +46,34 @@ export interface TriStateCheckboxProps {
     'aria-label'?: string | undefined;
 }
 
+/**
+ * Defines valid slots in TriStateCheckbox component.
+ */
 export interface TriStateCheckboxSlots {}
 
-export declare type TriStateCheckboxEmits = {
+/**
+ * Defines valid emits in TriStateCheckbox component.
+ */
+export interface TriStateCheckboxEmits {
     /**
      * Emitted when the value changes.
      * @param {boolean|null|undefined} value - New value.
      */
-    'update:modelValue': (value: Nullable<boolean>) => void;
-};
+    'update:modelValue'(value: Nullable<boolean>): void;
+}
 
+/**
+ * **PrimeVue - TriStateCheckbox**
+ *
+ * _TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value._
+ *
+ * [Live Demo](https://www.primevue.org/tristatecheckbox/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class TriStateCheckbox extends ClassComponent<TriStateCheckboxProps, TriStateCheckboxSlots, TriStateCheckboxEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -50,13 +82,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * TriStateCheckbox is used to select either 'true', 'false' or 'null' as the value.
- *
- * Demos:
- *
- * - [TriStateCheckbox](https://www.primefaces.org/primevue/tristatecheckbox)
- *
- */
 export default TriStateCheckbox;

package/ts-helpers.d.ts

@@ -1,4 +1,4 @@
-import { ComponentCustomProps, VNodeProps, EmitsOptions, AllowedComponentProps, ObjectEmitsOptions } from 'vue';
+import { AllowedComponentProps, ComponentCustomProps, ObjectEmitsOptions, VNodeProps } from 'vue';
 
 declare type PublicProps = VNodeProps & AllowedComponentProps & ComponentCustomProps;
 
@@ -14,7 +14,7 @@ declare type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options =
           }[Event]
       >;
 
-export class ClassComponent<Props, Slots, Emits extends EmitsOptions = {}> {
+export class ClassComponent<Props, Slots, Emits> {
     $props: Props & PublicProps;
     $slots: Slots;
     $emit: EmitFn<Emits>;

package/utils/utils.cjs.js

@@ -582,21 +582,24 @@ var DomHandler = {
     },
 
     isClickable(element) {
-        const targetNode = element.nodeName;
-        const parentNode = element.parentElement && element.parentElement.nodeName;
-
-        return (
-            targetNode == 'INPUT' ||
-            targetNode == 'BUTTON' ||
-            targetNode == 'A' ||
-            parentNode == 'INPUT' ||
-            parentNode == 'BUTTON' ||
-            parentNode == 'A' ||
-            this.hasClass(element, 'p-button') ||
-            this.hasClass(element.parentElement, 'p-button') ||
-            this.hasClass(element.parentElement, 'p-checkbox') ||
-            this.hasClass(element.parentElement, 'p-radiobutton')
-        );
+        if (element) {
+            const targetNode = element.nodeName;
+            const parentNode = element.parentElement && element.parentElement.nodeName;
+
+            return (
+                targetNode === 'INPUT' ||
+                targetNode === 'TEXTAREA' ||
+                targetNode === 'BUTTON' ||
+                targetNode === 'A' ||
+                parentNode === 'INPUT' ||
+                parentNode === 'TEXTAREA' ||
+                parentNode === 'BUTTON' ||
+                parentNode === 'A' ||
+                !!element.closest('.p-button, .p-checkbox, .p-radiobutton')
+            );
+        }
+
+        return false;
     },
 
     applyStyle(element, style) {
@@ -817,15 +820,10 @@ var ObjectUtils = {
     },
 
     reorderArray(value, from, to) {
-        let target;
-
         if (value && from !== to) {
             if (to >= value.length) {
-                target = to - value.length;
-
-                while (target-- + 1) {
-                    value.push(undefined);
-                }
+                to %= value.length;
+                from %= value.length;
             }
 
             value.splice(to, 0, value.splice(from, 1)[0]);