primevue 3.23.0 → 3.24.0

package/calendar/Calendar.d.ts

@@ -1,18 +1,18 @@
+/**
+ *
+ * Calendar also known as DatePicker, is a form component to work with dates.
+ *
+ * [Live Demo](https://www.primevue.org/calendar/)
+ *
+ * @module calendar
+ *
+ */
 import { HTMLAttributes, InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-type CalendarValueType = string | Date | string[] | Date[] | undefined;
-
-type CalendarSlotDateType = { day: number; month: number; year: number; today: boolean; selectable: boolean };
-
-type CalendarSelectionModeType = 'single' | 'multiple' | 'range' | undefined;
-
-type CalendarViewType = 'date' | 'month' | 'year' | undefined;
-
-type CalendarHourFormatType = '12' | '24' | undefined;
-
-type CalendarAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
-
+/**
+ * Custom Calendar responsive options metadata.
+ */
 export interface CalendarResponsiveOptions {
     /**
      * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...}
@@ -24,6 +24,10 @@ export interface CalendarResponsiveOptions {
     numMonths: number;
 }
 
+/**
+ * Custom Calendar month change event.
+ * @see {@link CalendarEmits['month-change']]}
+ */
 export interface CalendarMonthChangeEvent {
     /**
      * New month.
@@ -35,6 +39,10 @@ export interface CalendarMonthChangeEvent {
     year: number;
 }
 
+/**
+ * Custom Calendar year change event.
+ * @see {@link CalendarEmits['year-change']]}
+ */
 export interface CalendarYearChangeEvent {
     /**
      * New month.
@@ -46,6 +54,10 @@ export interface CalendarYearChangeEvent {
     year: number;
 }
 
+/**
+ * Custom Calendar blur event.
+ * @see {@link CalendarEmits.blur}
+ */
 export interface CalendarBlurEvent {
     /**
      * Browser event
@@ -57,99 +69,107 @@ export interface CalendarBlurEvent {
     value: string;
 }
 
+/**
+ * Defines valid properties in Calendar component.
+ */
 export interface CalendarProps {
     /**
      * Value of the component.
+     * @defaultValue null
      */
-    modelValue?: CalendarValueType;
+    modelValue?: string | Date | string[] | Date[] | undefined | null;
     /**
-     * Defines the quantity of the selection, valid values are 'single', 'multiple' and 'range'.
-     * @see CalendarSelectionModeType
-     * Default value is 'single'.
+     * Defines the quantity of the selection.
+     * @defaultValue single
      */
-    selectionMode?: CalendarSelectionModeType;
+    selectionMode?: 'single' | 'multiple' | 'range' | undefined;
     /**
      * Format of the date. Defaults to PrimeVue Locale configuration.
      */
     dateFormat?: string | undefined;
     /**
      * When enabled, displays the calendar as inline instead of an overlay.
+     * @defaultValue false
      */
     inline?: boolean | undefined;
     /**
      * Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.
-     * Default value is true.
+     * @defaultValue true
      */
     showOtherMonths?: boolean | undefined;
     /**
      * Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.
+     * @defaultValue false
      */
     selectOtherMonths?: boolean | undefined;
     /**
      * When enabled, displays a button with icon next to input.
+     * @defaultValue false
      */
     showIcon?: boolean | undefined;
     /**
      * Icon of the calendar button.
-     * Default value is 'pi pi-calendar'.
+     * @defaultValue pi pi-calendar
      */
     icon?: string | undefined;
     /**
      * Icon to show in the previous button.
-     * Default value is 'pi pi-chevron-left'.
+     * @defaultValue pi pi-chevron-left
      */
     previousIcon?: string | undefined;
     /**
      * Icon to show in the next button.
-     * Default value is 'pi pi-chevron-right'.
+     * @defaultValue pi pi-chevron-right
      */
     nextIcon?: string | undefined;
     /**
      * Icon to show in each of the increment buttons.
-     * Default value is 'pi pi-chevron-up'.
+     * @defaultValue pi pi-chevron-up
      */
     incrementIcon?: string | undefined;
     /**
      * Icon to show in each of the decrement buttons.
-     * Default value is 'pi pi-chevron-down'.
+     * @defaultValue pi pi-chevron-down
      */
     decrementIcon?: string | undefined;
     /**
      * Number of months to display.
-     * Default value is 1.
+     * @defaultValue 1
      */
     numberOfMonths?: number | undefined;
     /**
      * An array of options for responsive design.
-     * @see CalendarResponsiveOptions
      */
     responsiveOptions?: CalendarResponsiveOptions[];
     /**
-     * Type of view to display, valid values are 'date', 'month' and 'year'.
-     * @see CalendarViewType
-     * Default value is 'date'.
+     * Type of view to display.
+     * @defaultValue date
      */
-    view?: CalendarViewType;
+    view?: 'date' | 'month' | 'year' | undefined;
     /**
      * When enabled, calendar overlay is displayed as optimized for touch devices.
+     * @defaultValue false
      */
     touchUI?: boolean | undefined;
     /**
      * Whether the month should be rendered as a dropdown instead of text.
      *
      * @deprecated since version 3.9.0, Navigator is always on.
+     * @defaultValue false
      */
     monthNavigator?: boolean | undefined;
     /**
      * Whether the year should be rendered as a dropdown instead of text.
      *
      * @deprecated since version 3.9.0, Navigator is always on.
+     * @defaultValue false
      */
     yearNavigator?: boolean | undefined;
     /**
      * The range of years displayed in the year drop-down in (nnnn:nnnn) format such as (2000:2020).
      *
      * @deprecated since version 3.9.0, Years are based on decades by default.
+     * @defaultValue false
      */
     yearRange?: string | undefined;
     /**
@@ -174,87 +194,97 @@ export interface CalendarProps {
     maxDateCount?: number | undefined;
     /**
      * When disabled, datepicker will not be visible with input focus.
-     * Default value is true.
+     * @defaultValue true
      */
     showOnFocus?: boolean | undefined;
     /**
      * Whether to automatically manage layering.
-     * Default value is true.
+     * @defaultValue true
      */
     autoZIndex?: boolean | undefined;
     /**
      * Base zIndex value to use in layering.
-     * Default value is 0.
+     * @defaultValue 0
      */
     baseZIndex?: number | undefined;
     /**
      * Whether to display today and clear buttons at the footer.
+     * @defaultValue false
      */
     showButtonBar?: boolean | undefined;
     /**
      * The cutoff year for determining the century for a date.
-     * Default value is +10.
+     * @defaultValue +10
      */
     shortYearCutoff?: string | undefined;
     /**
      * Whether to display timepicker.
+     * @defaultValue false
      */
     showTime?: boolean | undefined;
     /**
      * Whether to display timepicker only.
+     * @defaultValue false
      */
     timeOnly?: boolean | undefined;
     /**
-     * Specifies 12 or 24 hour format.
+     * Specifies hour format.
+     * @defaultValue 24
      */
-    hourFormat?: CalendarHourFormatType;
+    hourFormat?: '12' | '24' | undefined;
     /**
      * Hours to change per step.
-     * Default value is 1.
+     * @defaultValue 1
      */
     stepHour?: number | undefined;
     /**
      * Minutes to change per step.
-     * Default value is 1.
+     * @defaultValue 1
      */
     stepMinute?: number | undefined;
     /**
      * Seconds to change per step.
-     * Default value is 1.
+     * @defaultValue 1
      */
     stepSecond?: number | undefined;
     /**
      * Whether to show the seconds in time picker.
+     * @defaultValue false
      */
     showSeconds?: boolean | undefined;
     /**
      * Whether to hide the overlay on date selection when showTime is enabled.
+     * @defaultValue false
      */
     hideOnDateTimeSelect?: boolean | undefined;
     /**
      * Whether to hide the overlay on date selection is completed when selectionMode is range.
+     * @defaultValue false
      */
     hideOnRangeSelection?: boolean | undefined;
     /**
      * Separator of time selector.
-     * Default value is ':'.
+     * @defaultValue :
      */
     timeSeparator?: string | undefined;
     /**
      * When enabled, calendar will show week numbers.
+     * @defaultValue false
      */
     showWeek?: boolean | undefined;
     /**
      * Wheter to allow prevents entering the date manually via typing.
-     * Default value is true.
+     * @defaultValue true
      */
     manualInput?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
     /**
      * When present, it specifies that an input field is read-only.
+     * @defaultValue false
      */
     readonly?: boolean | undefined;
     /**
@@ -262,11 +292,10 @@ export interface CalendarProps {
      */
     placeholder?: string | undefined;
     /**
-     * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
-     * @see CalendarAppendToType
-     * Default value is 'body'.
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * @defaultValue body
      */
-    appendTo?: CalendarAppendToType;
+    appendTo?: 'body' | 'self' | string | undefined | HTMLElement;
     /**
      * Identifier of the element.
      */
@@ -309,97 +338,112 @@ export interface CalendarProps {
     'aria-label'?: string | undefined;
 }
 
+/**
+ * Defines valid slots in Calendar component.
+ */
 export interface CalendarSlots {
     /**
      * Custom header template of panel.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom footer template of panel.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
     /**
      * Custom date template.
-     * @param {Object} scope - date slot's params.
      */
-    date: (scope: {
+    date(scope: {
         /**
          * Value of the component.
          */
-        date: CalendarSlotDateType;
-    }) => VNode[];
+        date: { day: number; month: number; year: number; today: boolean; selectable: boolean };
+    }): VNode[];
     /**
      * Custom decade template.
-     * @param {CalendarDecadeSlot} scope - decade slot's params.
      */
-    decade: (scope: {
+    decade(scope: {
         /**
          * An array containing the start and and year of a decade to display at header of the year picker.
          */
         years: string[] | undefined;
-    }) => VNode[];
+    }): VNode[];
 }
 
-export declare type CalendarEmits = {
+/**
+ * Defines valid emits in Calendar component.
+ */
+export interface CalendarEmits {
     /**
      * Emitted when the value changes.
-     * @param {CalendarValueType} value - New value.
+     * @param {string | Date | string[] | Date[] | undefined} value - New value.
      */
-    'update:modelValue': (value: CalendarValueType) => void;
+    'update:modelValue'(value: string | Date | string[] | Date[] | undefined): void;
     /**
      * Callback to invoke when input field is being typed.
      * @param {Event} event - Browser event
      */
-    input: (event: Event) => void;
+    input(event: Event): void;
     /**
      * Callback to invoke when a date is selected.
      * @param {Date} value - Selected value.
      */
-    'date-select': (value: Date) => void;
+    'date-select'(value: Date): void;
     /**
      * Callback to invoke when datepicker panel is shown.
      */
-    show: () => void;
+    show(): void;
     /**
      * Callback to invoke when datepicker panel is hidden.
      */
-    hide: () => void;
+    hide(): void;
     /**
      * Callback to invoke when today button is clicked.
      * @param {Date} date - Today as a date instance.
      */
-    'today-click': (date: Date) => void;
+    'today-click'(date: Date): void;
     /**
      * Callback to invoke when clear button is clicked.
      * @param {Event} event - Browser event.
      */
-    'clear-click': (event: Event) => void;
+    'clear-click'(event: Event): void;
     /**
      * Callback to invoke when a month is changed using the navigators.
      * @param {CalendarMonthChangeEvent} event - Custom month change event.
      */
-    'month-change': (event: CalendarMonthChangeEvent) => void;
+    'month-change'(event: CalendarMonthChangeEvent): void;
     /**
      * Callback to invoke when a year is changed using the navigators.
      * @param {CalendarYearChangeEvent} event - Custom year change event.
      */
-    'year-change': (event: CalendarYearChangeEvent) => void;
+    'year-change'(event: CalendarYearChangeEvent): void;
     /**
      * Callback to invoke on focus of input field.
      * @param {Event} event - Focus event
      */
-    focus: (event: Event) => void;
+    focus(event: Event): void;
     /**
      * Callback to invoke on blur of input field.
      * @param {CalendarBlurEvent} event - Blur event
      */
-    blur: (event: CalendarBlurEvent) => void;
+    blur(event: CalendarBlurEvent): void;
     /**
      * Callback to invoke when a key is pressed.
      */
-    keydown: (event: Event) => void;
-};
+    keydown(event: Event): void;
+}
 
+/**
+ * **PrimeVue - Calendar**
+ *
+ * _Calendar also known as DatePicker, is a form component to work with dates._
+ *
+ * [Live Demo](https://www.primevue.org/calendar/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class Calendar extends ClassComponent<CalendarProps, CalendarSlots, CalendarEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -408,13 +452,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Calendar is an input component to select a date.
- *
- * Demos:
- *
- * - [Calendar](https://www.primefaces.org/primevue/calendar)
- *
- */
 export default Calendar;

package/card/Card.d.ts

@@ -1,33 +1,62 @@
+/**
+ *
+ * Card is a flexible container component.
+ *
+ * [Live Demo](https://www.primevue.org/card/)
+ *
+ * @module card
+ *
+ */
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+/**
+ * Defines valid properties in Card component.
+ */
 export interface CardProps {}
 
+/**
+ * Defines valid slots in Card component.
+ */
 export interface CardSlots {
     /**
      * Custom header template.
      */
-    header: () => VNode[];
+    header(): VNode[];
     /**
      * Custom title template.
      */
-    title: () => VNode[];
+    title(): VNode[];
     /**
      * Custom subtitle template.
      */
-    subtitle: () => VNode[];
+    subtitle(): VNode[];
     /**
      * Custom content template.
      */
-    content: () => VNode[];
+    content(): VNode[];
     /**
      * Custom footer template.
      */
-    footer: () => VNode[];
+    footer(): VNode[];
 }
 
-export declare type CardEmits = {};
+/**
+ * Defines valid emits in Card component.
+ */
+export interface CardEmits {}
 
+/**
+ * **PrimeVue - Card**
+ *
+ * _Card is a flexible container component._
+ *
+ * [Live Demo](https://www.primevue.org/card/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ */
 declare class Card extends ClassComponent<CardProps, CardSlots, CardEmits> {}
 
 declare module '@vue/runtime-core' {
@@ -36,13 +65,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-/**
- *
- * Card is a flexible container component.
- *
- * Demos:
- *
- * - [Card](https://www.primefaces.org/primevue/card)
- *
- */
 export default Card;