primevue 3.9.1 → 3.10.0

package/picklist/PickList.d.ts

@@ -1,42 +1,209 @@
 import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-interface PickListProps {
-    modelValue?: any[][];
-    selection?: any[][];
-    dataKey?: string;
-    metaKeySelection?: boolean;
-    listStyle?: any;
-    responsive?: boolean;
-    breakpoint?: string;
+export interface PickListReorderEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Ordered list
+     */
+    value: any[];
+    /**
+     * Direction of the change; 'up', 'down', 'bottom', 'top'
+     */
+    direction: string;
+    /**
+     * Index of the list that is ordered, 0 represents the source and 1 represents the target list.
+     */
+    listIndex: number;
 }
 
-interface PickListItemSlotInterface {
-    item: any;
-    index: number;
+export interface PickListSelectionChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Selected item
+     */
+    value: any[];
 }
 
-declare class PickList {
-    $props: PickListProps;
-    $emit(eventName: 'update:modelValue', value: any[]): this;
-    $emit(eventName: 'update:selection', value: any[]): this;
-    $emit(eventName: 'reorder', e: { originalEvent: Event, value: any[]; direction: string, listIndex: number}): this;
-    $emit(eventName: 'selection-change', e: { originalEvent: Event, value: any[]}): this;
-    $emit(eventName: 'move-to-target', e: { originalEvent: Event, items: [] }): this;
-    $emit(eventName: 'move-all-to-target', e: { originalEvent: Event, items: [] }): this;
-    $emit(eventName: 'move-to-source', e: { originalEvent: Event, items: [] }): this;
-    $emit(eventName: 'move-all-tou-source', e: { originalEvent: Event, items: [] }): this;
-    $slots: {
-        header: VNode[];
-        item: PickListItemSlotInterface;
-        sourceheader: VNode[];
-        targetheader: VNode[];
-        sourcecontrolsstart: VNode[];
-        sourcecontrolsend: VNode[];
-        movecontrolsstart: VNode[];
-        movecontrolsend: VNode[];
-        targetcontrolsstart: VNode[];
-        targetcontrolsend: VNode[];
+export interface PickListMoveToTargetEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Moved items
+     */
+    items: any[];
+}
+
+/**
+ * @extends PickListMoveToTargetEvent
+ */
+export interface PickListMoveAllToTargetEvent extends PickListMoveToTargetEvent { }
+
+/**
+ * @extends PickListMoveToTargetEvent
+ */
+export interface PickListMoveToSourceEvent extends PickListMoveToTargetEvent { }
+
+ /**
+ * @extends PickListMoveToTargetEvent
+ */
+export interface PickListMoveAllToSourceEvent extends PickListMoveToTargetEvent { }
+
+export interface PickListProps {
+    /**
+     * Value of the component as a multidimensional array.
+     */
+    modelValue?: any[][] | undefined;
+    /**
+     * Selected items in the list as a multidimensional array.
+     */
+    selection?: any[][] | undefined;
+    /**
+     * Name of the field that uniquely identifies the a record in the data.
+     */
+    dataKey?: string | undefined;
+    /**
+     * Defines whether metaKey is requred or not for the selection.
+     * 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.
+     */
+    metaKeySelection?: boolean | undefined;
+    /**
+     * Inline style of the the list element.
+     */
+    listStyle?: any | undefined;
+    /**
+     * Whether the list optimizes layout based on screen size.
+     * Default value is true.
+     */
+    responsive?: boolean | undefined;
+    /**
+     * The breakpoint to define the maximum width boundary when responsiveness is enabled.
+     * Default value is '960px'.
+     */
+    breakpoint?: string | undefined;
+}
+
+export interface PickListSlots {
+    /**
+     * Custom header template.
+     */
+    header: () => VNode[];
+    /**
+     * Custom item template.
+     * @param {Object} scope - item slot's params.
+     */
+    item: (scope: {
+        /**
+         * Item of the component
+         */
+        item: any;
+        /**
+         * Index of the item
+         */
+        index: number;
+    }) => VNode[];
+    /**
+     * Custom source header template.
+     */
+    sourceheader: () => VNode[];
+    /**
+     * Custom target header template.
+     */
+    targetheader: () => VNode[];
+    /**
+     * Custom source controls start template.
+     */
+    sourcecontrolsstart: () => VNode[];
+     /**
+     * Custom source controls end template.
+     */
+    sourcecontrolsend: () => VNode[];
+    /**
+     * Custom move controls start template.
+     */
+    movecontrolsstart: () => VNode[];
+    /**
+     * Custom move controls end template.
+     */
+    movecontrolsend: () => VNode[];
+    /**
+     * Custom target controls start template.
+     */
+    targetcontrolsstart: () => VNode[];
+    /**
+     * Custom target controls end template.
+     */
+    targetcontrolsend: () => VNode[];
+}
+
+export declare type PickListEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue': (value: any[][]) => void;
+    /**
+     * Emitted when the selection changes.
+     * @param {*} value - New value.
+     */
+    'update:selection': (value: any[][]) => void;
+    /**
+     * Callback to invoke when the list is reordered.
+     * @param {PickListReorderEvent} event - Custom reorder event.
+     */
+    'reorder': (event: PickListReorderEvent) => void;
+    /**
+     * Callback to invoke when one or more items are moved to the other list.
+     * @param {PickListSelectionChangeEvent} event - Custom selection change event.
+     */
+    'selection-change': (event: PickListSelectionChangeEvent) => void;
+    /**
+     * Callback to invoke when one or more items are moved to the target list.
+     * @param {PickListMoveToTargetEvent} event - Custom move to target event.
+     */
+    'move-to-target': (event: PickListMoveToTargetEvent) => void;
+    /**
+     * Callback to invoke when all items are moved to the target list.
+     * @param {PickListMoveAllToTargetEvent} event - Custom move all to target event.
+     */
+    'move-all-to-target': (event: PickListMoveAllToTargetEvent) => void;
+    /**
+     * Callback to invoke when one or more items are moved to the source list.
+     * @param {PickListMoveToSourceEvent} event - Custom move to source event.
+     */
+    'move-to-source': (event: PickListMoveToSourceEvent) => void;
+    /**
+     * Callback to invoke when all items are moved to the source list.
+     * @param {PickListMoveAllToSourceEvent} event - Custom move all to source event.
+     */
+    'move-all-to-source': (event: PickListMoveAllToSourceEvent) => void;
+}
+
+declare class PickList extends ClassComponent<PickListProps, PickListSlots, PickListEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        PickList: GlobalComponentConstructor<PickList>
     }
 }
 
+/**
+ *
+ * PickList is used to reorder items between different lists.
+ *
+ * Demos:
+ *
+ * - [PickList](https://www.primefaces.org/primevue/showcase/#/picklist)
+ *
+ */
 export default PickList;

package/progressbar/ProgressBar.d.ts

@@ -1,16 +1,51 @@
 import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-interface ProgressBarProps {
-    value?: number;
-    mode?: string;
-    showValue?: boolean;
+type ProgressBarModeType = 'determinate' | 'indeterminate' | undefined;
+
+export interface ProgressBarProps {
+    /**
+     * Current value of the progress.
+     */
+    value?: number | undefined;
+    /**
+     * Defines the mode of the progress
+     * @see ProgressBarModeType
+     * Default value is 'determinate'.
+     */
+    mode?: ProgressBarModeType;
+    /**
+     * Whether to display the progress bar value.
+     * Default value is true.
+     */
+    showValue?: boolean | undefined;
+}
+
+export interface ProgressBarSlots {
+    /**
+     * Custom content slot.
+     */
+    default: () => VNode[];
 }
 
-declare class ProgressBar {
-    $props: ProgressBarProps;
-    $slots: {
-        '': VNode[];
+export declare type ProgressBarEmits = {
+}
+
+declare class ProgressBar extends ClassComponent<ProgressBarProps, ProgressBarSlots, ProgressBarEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ProgressBar: GlobalComponentConstructor<ProgressBar>
     }
 }
 
+/**
+ *
+ * ProgressBar is a process status indicator.
+ *
+ * Demos:
+ *
+ * - [ProgressBar](https://www.primefaces.org/primevue/showcase/#/progressbar)
+ *
+ */
 export default ProgressBar;

package/progressspinner/ProgressSpinner.d.ts

@@ -1,11 +1,44 @@
-interface ProgressSpinnerProps {
-    strokeWidth?: string;
-    fill?: string;
-    animationDuration?: string;
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface ProgressSpinnerProps {
+    /**
+     * Width of the circle stroke.
+     * Default value is 2.
+     */
+    strokeWidth?: string | undefined;
+    /**
+     * Color for the background of the circle.
+     */
+    fill?: string | undefined;
+    /**
+     * Duration of the rotate animation.
+     * Default value is 2s.
+     */
+    animationDuration?: string | undefined;
+}
+
+export interface ProgressSpinnerSlots {
 }
 
-declare class ProgressSpinner {
-    $props: ProgressSpinnerProps;
+export declare type ProgressSpinnerEmits = {
+}
+
+declare class ProgressSpinner extends ClassComponent<ProgressSpinnerProps, ProgressSpinnerSlots, ProgressSpinnerEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        ProgressSpinner: GlobalComponentConstructor<ProgressSpinner>
+    }
 }
 
+/**
+ *
+ * ProgressSpinner is a process status indicator.
+ *
+ * Demos:
+ *
+ * - [ProgressSpinner](https://www.primefaces.org/primevue/showcase/#/progressspinner)
+ *
+ */
 export default ProgressSpinner;

package/radiobutton/RadioButton.d.ts

@@ -1,15 +1,60 @@
-interface RadioButtonProps {
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface RadioButtonProps {
+    /**
+     * Value of the checkbox.
+     */
     value?: any;
+    /**
+     * Value binding of the checkbox.
+     */
     modelValue?: any;
+    /**
+     * Style class of the component input field.
+     */
     class?: string;
+    /**
+     * Inline style of the component.
+     */
     style?: any;
 }
 
-declare class RadioButton {
-    $props: RadioButtonProps;
-    $emit(eventName: 'update:modelValue', value: any): this;
-    $emit(eventName: 'click', event: Event): this;
-    $emit(eventName: 'change', event: Event): this;
+export interface RadioButtonSlots {
+}
+
+export declare type RadioButtonEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {*} value - New value.
+     */
+    'update:modelValue': (value: any) => void;
+    /**
+     * Callback to invoke on radio button click.
+     * @param {Event} event - Browser event.
+     */
+    'click': (event: Event) => void;
+    /**
+     * Callback to invoke on radio button value change.
+     * @param {Event} event - Browser event.
+     */
+    'change': (event: Event) => void;
+}
+
+declare class RadioButton extends ClassComponent<RadioButtonProps, RadioButtonSlots, RadioButtonEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        RadioButton: GlobalComponentConstructor<RadioButton>
+    }
 }
 
+/**
+ *
+ * RadioButton is an extension to standard radio button element with theming.
+ *
+ * Demos:
+ *
+ * - [RadioButton](https://www.primefaces.org/primevue/showcase/#/radiobutton)
+ *
+ */
 export default RadioButton;

package/rating/Rating.d.ts

@@ -1,15 +1,72 @@
-interface RatingProps {
-    modelValue?: number;
-    disabled?: boolean;
-    readonly?: boolean;
-    stars?: number;
-    cancel?: boolean;
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+export interface RatingChangeEvent {
+    /**
+     * Browser event
+     */
+    originalEvent: Event;
+    /**
+     * Selected option value
+     */
+    value: number;
+}
+
+export interface RatingProps {
+    /**
+     * Value of the rating.
+     */
+    modelValue?: number | undefined;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that component is read-only.
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Number of stars.
+     * Default value is 5.
+     */
+    stars?: number | undefined;
+    /**
+     * When specified a cancel icon is displayed to allow clearing the value.
+     * Default value is true.
+     */
+    cancel?: boolean | undefined;
+}
+
+export interface RatingSlots {
+}
+
+export declare type RatingEmits = {
+    /**
+     * Emitted when the value changes.
+     * @param {number} value - New value.
+     */
+    'update:modelValue': (value: number) => void;
+    /**
+     * Callback to invoke when a suggestion is selected.
+     * @param {RatingChangeEvent} event - Custom change event.
+     */
+    'change': (event: RatingChangeEvent) => void;
 }
 
-declare class Rating {
-    $props: RatingProps;
-    $emit(eventName: 'update:modelValue', value: number): this;
-    $emit(eventName: 'change', e: { originalEvent: Event, value: any }): this;
+declare class Rating extends ClassComponent<RatingProps, RatingSlots, RatingEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Rating: GlobalComponentConstructor<Rating>
+    }
 }
 
+/**
+ *
+ * Rating component is a star based selection input.
+ *
+ * Demos:
+ *
+ * - [Rating](https://www.primefaces.org/primevue/showcase/#/rating)
+ *
+ */
 export default Rating;

package/resources/themes/arya-blue/theme.css

@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2358,6 +2358,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #1e1e1e;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #1e1e1e;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/arya-green/theme.css

@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2358,6 +2358,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #1e1e1e;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #1e1e1e;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/arya-orange/theme.css

@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2358,6 +2358,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #1e1e1e;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #1e1e1e;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/arya-purple/theme.css

@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #1e1e1e;
-  border-color: #383838;
+  border: 1px solid #383838;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2358,6 +2358,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #1e1e1e;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #1e1e1e;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/bootstrap4-dark-blue/theme.css

@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #2a323d;
-  border-color: #3f4b5b;
+  border: 1px solid #3f4b5b;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2370,6 +2370,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #2a323d;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #2a323d;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/bootstrap4-dark-purple/theme.css

@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #2a323d;
-  border-color: #3f4b5b;
+  border: 1px solid #3f4b5b;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2370,6 +2370,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #2a323d;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #2a323d;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/bootstrap4-light-blue/theme.css

@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #212529;
-  border-color: #212529;
+  border: 1px solid #212529;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2370,6 +2370,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #efefef;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #ffffff;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/bootstrap4-light-purple/theme.css

@@ -694,7 +694,7 @@
 
 .p-colorpicker-panel {
   background: #212529;
-  border-color: #212529;
+  border: 1px solid #212529;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2370,6 +2370,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #efefef;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #ffffff;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }

package/resources/themes/fluent-light/theme.css

@@ -690,7 +690,7 @@
 
 .p-colorpicker-panel {
   background: #323232;
-  border-color: #191919;
+  border: 1px solid #191919;
 }
 .p-colorpicker-panel .p-colorpicker-color-handle,
 .p-colorpicker-panel .p-colorpicker-hue-handle {
@@ -2358,6 +2358,10 @@
 .p-datatable .p-datatable-scrollable-footer {
   background: #faf9f8;
 }
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
+.p-datatable.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot {
+  background-color: #ffffff;
+}
 .p-datatable .p-datatable-loading-icon {
   font-size: 2rem;
 }