primevue 3.22.4 → 3.24.0

package/dataview/DataView.d.ts

@@ -1,12 +1,19 @@
+/**
+ *
+ * DataView displays data in grid or list layout with pagination and sorting features.
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ *
+ * @module dataview
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type DataViewLayoutType = 'list' | 'grid' | undefined;
-
-type DataTablePositionType = 'top' | 'bottom' | 'both' | undefined;
-
-type DataViewSortFieldType = string | ((item: any) => string) | undefined;
-
+/**
+ * Custom page event.
+ * @see {@link DataViewEmits.page}
+ */
 export interface DataViewPageEvent {
     /**
      * New page number
@@ -26,6 +33,9 @@ export interface DataViewPageEvent {
     pageCount: number;
 }
 
+/**
+ * Defines valid properties in DataView component. In addition to these, all properties of HTMLDivElement can be used in this component.
+ */
 export interface DataViewProps {
     /**
      * An array of objects to display.
@@ -33,18 +43,17 @@ export interface DataViewProps {
     value?: any[] | undefined;
     /**
      * Layout of the items, valid values are 'list' and 'grid'.
-     * @see DataViewLayoutType
-     * Default value is 'list'.
+     * @defaultValue list
      */
-    layout?: any;
+    layout?: 'list' | 'grid' | undefined;
     /**
      * Number of rows to display per page.
-     * Default value is 0.
+     * @defaultValue 0
      */
     rows?: number | undefined;
     /**
      * Index of the first record to render.
-     * Default value is 0.
+     * @defaultValue 0
      */
     first?: number | undefined;
     /**
@@ -53,21 +62,21 @@ export interface DataViewProps {
     totalRecords?: number | undefined;
     /**
      * When specified as true, enables the pagination.
+     * @defaultValue false
      */
     paginator?: boolean | undefined;
     /**
      * Position of the paginator, options are 'top','bottom' or 'both'.
-     * @see DataTablePositionType
-     * Default value is 'bottom'.
+     * @defaultValue bottom
      */
-    paginatorPosition?: DataTablePositionType;
+    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,
      *
      * - FirstPageLink
      * - PrevPageLink
@@ -78,11 +87,13 @@ export interface DataViewProps {
      * - 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;
     /**
@@ -90,7 +101,7 @@ export interface DataViewProps {
      */
     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}
@@ -98,19 +109,21 @@ export interface DataViewProps {
      * - {first}
      * - {last}
      * - {totalRecords}
+     *
+     * @defaultValue '({currentPage} of {totalPages})'
      */
     currentPageReportTemplate?: string | undefined;
     /**
      * Property name or a getter function of data to use in sorting by default.
-     * @see DataViewSortFieldType
      */
-    sortField?: DataViewSortFieldType;
+    sortField?: string | ((item: any) => string) | undefined;
     /**
      * Order to sort the data by default.
      */
     sortOrder?: number | undefined;
     /**
      * Defines if data is loaded and interacted with in lazy manner.
+     * @defaultValue false
      */
     lazy?: boolean | undefined;
     /**
@@ -119,32 +132,35 @@ export interface DataViewProps {
     dataKey: string | undefined;
 }
 
+/**
+ * Defines valid slots in DataView component.
+ */
 export interface DataViewSlots {
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom footer template.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
     /**
      * Custom empty template.
      */
-    empty: () => VNode[];
+    empty(): VNode[];
     /**
      * Custom paginator start template.
      */
-    paginatorstart: () => VNode[];
+    paginatorstart(): VNode[];
     /**
      * Custom paginator end template.
      */
-    paginatorend: () => VNode[];
+    paginatorend(): VNode[];
     /**
      * Custom list template.
      * @param {Object} scope - list slot's params.
      */
-    list: (scope: {
+    list(scope: {
         /**
          * Value of the component
          */
@@ -153,12 +169,12 @@ export interface DataViewSlots {
          * Index of the grid
          */
         index: number;
-    }) => VNode[];
+    }): VNode[];
     /**
      * Custom list template.
      * @param {Object} scope - list slot's params.
      */
-    grid: (scope: {
+    grid(scope: {
         /**
          * Value of the component
          */
@@ -167,27 +183,42 @@ export interface DataViewSlots {
          * Index of the grid
          */
         index: number;
-    }) => VNode[];
+    }): VNode[];
 }
 
-export declare type DataViewEmits = {
+/**
+ * Defines valid slots in DataView component.
+ */
+export interface DataViewEmits {
     /**
      * 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;
     /**
      * Callback to invoke when page changes, the event object contains information about the new state.
      * @param {DataViewPageEvent} event - Custom page event.
      */
-    page: (event: DataViewPageEvent) => void;
-};
+    page(event: DataViewPageEvent): void;
+}
 
+/**
+ * **PrimeVue - DataViewLayoutOptions**
+ *
+ * _DataView displays data in grid or list layout with pagination and sorting features._
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class DataView extends ClassComponent<DataViewProps, DataViewSlots, DataViewEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -196,17 +227,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * DataView displays data in grid or list layout with pagination and sorting features.
- *
- * Helper API:
- *
- * - PrimeFlex
- *
- * Demos:
- *
- * - [DataView](https://www.primefaces.org/primevue/dataview)
- *
- */
 export default DataView;

package/dataviewlayoutoptions/DataViewLayoutOptions.d.ts

@@ -1,5 +1,17 @@
+/**
+ *
+ * The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well.
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ *
+ * @module dataviewlayoutoptions
+ *
+ */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in DataViewLayoutOptions component.
+ */
 export interface DataViewLayoutOptionsProps {
     /**
      * Value of the component.
@@ -7,16 +19,34 @@ export interface DataViewLayoutOptionsProps {
     modelValue?: string | undefined;
 }
 
+/**
+ * Defines valid propslotserties in DataViewLayoutOptions component.
+ */
 export interface DataViewLayoutOptionsSlots {}
 
-export declare type DataViewLayoutOptionsEmits = {
+/**
+ * Defines valid emits in DataViewLayoutOptions component.
+ */
+export interface DataViewLayoutOptionsEmits {
     /**
      * Emitted when the value changes.
      * @param {*} value - New value.
      */
-    'update:modelValue': (value: string) => void;
-};
+    'update:modelValue'(value: string): void;
+}
 
+/**
+ * **PrimeVue - DataViewLayoutOptions**
+ *
+ * _The helper DataViewLayoutOptions component can be used to switch between the modes however this component is optional and you may use your own UI to switch modes as well._
+ *
+ * [Live Demo](https://www.primevue.org/dataview/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
 declare class DataViewLayoutOptions extends ClassComponent<DataViewLayoutOptionsProps, DataViewLayoutOptionsSlots, DataViewLayoutOptionsEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -25,14 +55,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * When both layout modes are enabled in DataView, a UI element would be necessary to let the user toggle between the view.
- * DataViewLayoutOptions is a helper component to display a buttonset to choose the layout mode in DataView.
- *
- * Demos:
- *
- * - [DataViewLayoutOptions](https://www.primefaces.org/primevue/dataview)
- *
- */
 export default DataViewLayoutOptions;

package/deferredcontent/DeferredContent.d.ts

@@ -1,22 +1,48 @@
+/**
+ *
+ * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
+ *
+ * [Live Demo](https://www.primevue.org/deferredcontent/)
+ *
+ * @module deferredcontent
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface DeferredContentProps {}
 
+/**
+ * Defines valid slots in DeferredContent component.
+ */
 export interface DeferredContentSlots {
     /**
      * Default content slot.
      */
-    default: () => VNode[];
+    default(): VNode[];
 }
 
-export declare type DeferredContentEmits = {
+/**
+ * Defines valid emits in DeferredContent component.
+ */
+export interface DeferredContentEmits {
     /**
      * Callback to invoke when deferred content is loaded.
      */
-    load: () => void;
-};
+    load(): void;
+}
 
+/**
+ * **PrimeVue - DeferredContent**
+ *
+ * _DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll._
+ *
+ * [Live Demo](https://www.primevue.org/deferredcontent/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class DeferredContent extends ClassComponent<DeferredContentProps, DeferredContentSlots, DeferredContentEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -25,13 +51,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
- *
- * Demos:
- *
- * - [DeferredContent](https://www.primefaces.org/primevue/deferredcontent)
- *
- */
 export default DeferredContent;

package/dialog/Dialog.d.ts

@@ -1,10 +1,18 @@
+/**
+ *
+ * Dialog is a container to display content in an overlay window.
+ *
+ * [Live Demo](https://www.primevue.org/dialog)
+ *
+ * @module dialog
+ *
+ */
 import { HTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type DialogPositionType = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright' | undefined;
-
-type DialogAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
-
+/**
+ * Custom breakpoint metadata.
+ */
 export interface DialogBreakpoints {
     /**
      * Breakpoint for responsive mode.
@@ -24,6 +32,9 @@ export interface DialogBreakpoints {
     [key: string]: string;
 }
 
+/**
+ * Defines valid properties in Dialog component.
+ */
 export interface DialogProps {
     /**
      * Title content of the dialog.
@@ -35,10 +46,12 @@ export interface DialogProps {
     footer?: string | undefined;
     /**
      * Specifies the visibility of the dialog.
+     * @defaultValue false
      */
     visible?: boolean | undefined;
     /**
      * Defines if background should be blocked when dialog is displayed.
+     * @defaultValue false
      */
     modal?: boolean | undefined;
     /**
@@ -55,149 +68,166 @@ export interface DialogProps {
     contentProps?: HTMLAttributes | undefined;
     /**
      * When enabled dialog is displayed in RTL direction.
+     * @defaultValue false
      */
     rtl?: boolean | undefined;
     /**
      * Adds a close icon to the header to hide the dialog.
-     * Default value is true.
+     * @defaultValue true
      */
     closable?: boolean | undefined;
     /**
      * Specifies if clicking the modal background should hide the dialog.
+     * @defaultValue false
      */
     dismissableMask?: boolean | undefined;
     /**
      * Specifies if pressing escape key should hide the dialog.
-     * Default value is true.
+     * @defaultValue true
      */
     closeOnEscape?: boolean | undefined;
     /**
      * Whether to show the header or not.
-     * Default value is true.
+     * @defaultValue true
      */
     showHeader?: boolean | undefined;
     /**
      * Base zIndex value to use in layering.
-     * Default value is 0.
+     * @defaultValue 0
      */
     baseZIndex?: number | undefined;
     /**
      * Whether to automatically manage layering.
-     * Default value is true.
+     * @defaultValue true
      */
     autoZIndex?: boolean | undefined;
     /**
-     * Position of the dialog, options are 'center', 'top', 'bottom', 'left', 'right', 'topleft', 'topright', 'bottomleft' or 'bottomright'.
-     * @see DialogPositionType
-     * Default value is 'center'.
+     * Position of the dialog.
+     * @defaultValue center
      */
-    position?: DialogPositionType;
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright' | undefined;
     /**
      * Whether the dialog can be displayed full screen.
+     * @defaultValue false
      */
     maximizable?: boolean | undefined;
     /**
      * Object literal to define widths per screen size.
-     * @see DialogBreakpoints
      */
     breakpoints?: DialogBreakpoints;
     /**
      * Enables dragging to change the position using header.
-     * Default value is true.
+     * @defaultValue true
      */
     draggable?: boolean | undefined;
     /**
      * Keeps dialog in the viewport when dragging.
-     * Default value is true.
+     * @defaultValue true
      */
     keepInViewPort?: boolean | undefined;
     /**
      * Minimum value for the left coordinate of dialog in dragging.
-     * Default value is 0.
+     * @defaultValue 0.
      */
     minX?: number | undefined;
     /**
      * Minimum value for the top coordinate of dialog in dragging.
-     * Default value is 0.
+     * @defaultValue 0
      */
     minY?: number | undefined;
     /**
-     * A valid query selector or an HTMLElement to specify where the dialog gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
-     * @see DialogAppendToType
-     * Default value is 'body'.
+     * A valid query selector or an HTMLElement to specify where the dialog gets attached.
+     * @defaultValue body
      */
-    appendTo?: DialogAppendToType;
+    appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
     /**
      * Style of the dynamic dialog.
      */
     style?: any;
     /**
      * Icon to display in the dialog close button.
-     * Default value is 'pi pi-times'.
+     * @defaultValue pi pi-times
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is not maximized.
-     * Default value is 'pi pi-window-maximize'.
+     * @defaultValue pi pi-window-maximize
      */
     maximizeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is maximized.
-     * Default value is 'pi pi-window-minimize'.
+     * @defaultValue pi pi-window-minimize
      */
     minimizeIcon?: string | undefined;
 }
 
+/**
+ * Defines valid slots in Dialog component.
+ */
 export interface DialogSlots {
     /**
      * Default content slot.
      */
-    default: () => VNode[];
+    default(): VNode[];
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom footer template.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
 }
 
-export declare type DialogEmits = {
+/**
+ * Defines valid emits in Dialog component.
+ */
+export interface DialogEmits {
     /**
      * Emitted when the visible changes.
      * @param {boolean} value - New value.
      */
-    'update:visible': (value: boolean) => void;
+    'update:visible'(value: boolean): void;
     /**
      * Callback to invoke when dialog is hidden.
      */
-    hide: () => void;
+    hide(): void;
     /**
      * Callback to invoke after dialog is hidden.
      */
-    'after-hide': () => void;
+    'after-hide'(): void;
     /**
      * Callback to invoke when dialog is shown.
      */
-    show: () => void;
+    show(): void;
     /**
      * Fired when a dialog gets maximized.
      * @param {event} event - Browser event.
      */
-    maximize: (event: Event) => void;
+    maximize(event: Event): void;
     /**
      * Fired when a dialog gets unmaximized.
      * @param {event} event - Browser event.
      */
-    unmaximize: (event: Event) => void;
+    unmaximize(event: Event): void;
     /**
      * Fired when a dialog drag completes.
      * @param {event} event - Browser event.
      */
-    dragend: (event: Event) => void;
-};
+    dragend(event: Event): void;
+}
 
+/**
+ * **PrimeVue - Dialog**
+ *
+ * _Dialog is a container to display content in an overlay window._
+ *
+ * [Live Demo](https://www.primevue.org/dialog/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class Dialog extends ClassComponent<DialogProps, DialogSlots, DialogEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -206,13 +236,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Dialog is a container to display content in an overlay window.
- *
- * Demos:
- *
- * - [Dialog](https://www.primefaces.org/primevue/dialog)
- *
- */
 export default Dialog;

package/dialog/Dialog.vue

@@ -231,7 +231,7 @@ export default {
             this.$emit('after-hide');
         },
         onMaskClick(event) {
-            if (this.dismissableMask && this.closable && this.modal && this.mask === event.target) {
+            if (this.dismissableMask && this.modal && this.mask === event.target) {
                 this.close();
             }
         },

package/dialog/dialog.cjs.js

@@ -208,7 +208,7 @@ var script = {
             this.$emit('after-hide');
         },
         onMaskClick(event) {
-            if (this.dismissableMask && this.closable && this.modal && this.mask === event.target) {
+            if (this.dismissableMask && this.modal && this.mask === event.target) {
                 this.close();
             }
         },