@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-alpha.1

package/README.md

@@ -46,7 +46,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v5.0.0-alpha.0.zip)
+- [Download the latest release](https://github.com/coreui/coreui-vue-pro/archive/v5.0.0-alpha.1.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-vue-pro.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/vue-pro`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/vue-pro`

package/dist/components/calendar/CCalendar.d.ts

@@ -3,9 +3,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Default date of the component
      */
-    calendarDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    calendarDate: PropType<string | Date | null>;
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -34,9 +32,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    endDate: PropType<string | Date | null>;
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -61,15 +57,11 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Max selectable date.
      */
-    maxDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    maxDate: PropType<string | Date | null>;
     /**
      * Min selectable date.
      */
-    minDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    minDate: PropType<string | Date | null>;
     /**
      * Show arrows navigation.
      */
@@ -97,6 +89,16 @@ declare const CCalendar: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -106,12 +108,16 @@ declare const CCalendar: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Initial selected date.
      */
-    startDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    startDate: PropType<string | Date | null>;
     /**
      * Set length or format of day name.
      *
@@ -122,15 +128,19 @@ declare const CCalendar: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("calendar-cell-hover" | "calendar-date-change" | "start-date-change" | "end-date-change")[], "calendar-cell-hover" | "calendar-date-change" | "start-date-change" | "end-date-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("date-hover" | "calendar-date-change" | "start-date-change" | "end-date-change")[], "date-hover" | "calendar-date-change" | "start-date-change" | "end-date-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Default date of the component
      */
-    calendarDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    calendarDate: PropType<string | Date | null>;
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -159,9 +169,7 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Initial selected to date (range).
      */
-    endDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    endDate: PropType<string | Date | null>;
     /**
      * Sets the day of start week.
      * - 0 - Sunday,
@@ -186,15 +194,11 @@ declare const CCalendar: import("vue").DefineComponent<{
     /**
      * Max selectable date.
      */
-    maxDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    maxDate: PropType<string | Date | null>;
     /**
      * Min selectable date.
      */
-    minDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    minDate: PropType<string | Date | null>;
     /**
      * Show arrows navigation.
      */
@@ -222,6 +226,16 @@ declare const CCalendar: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -231,12 +245,16 @@ declare const CCalendar: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Initial selected date.
      */
-    startDate: {
-        type: (StringConstructor | DateConstructor)[];
-    };
+    startDate: PropType<string | Date | null>;
     /**
      * Set length or format of day name.
      *
@@ -247,8 +265,14 @@ declare const CCalendar: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }>> & {
-    "onCalendar-cell-hover"?: ((...args: any[]) => any) | undefined;
+    "onDate-hover"?: ((...args: any[]) => any) | undefined;
     "onCalendar-date-change"?: ((...args: any[]) => any) | undefined;
     "onStart-date-change"?: ((...args: any[]) => any) | undefined;
     "onEnd-date-change"?: ((...args: any[]) => any) | undefined;
@@ -262,7 +286,9 @@ declare const CCalendar: import("vue").DefineComponent<{
     range: boolean;
     selectEndDate: boolean;
     selectAdjacementDays: boolean;
+    selectionType: "day" | "week" | "month" | "year";
     showAdjacementDays: boolean;
+    showWeekNumber: boolean;
     weekdayFormat: string | number | Function;
 }, {}>;
 export { CCalendar };

package/dist/components/calendar/utils.d.ts

@@ -1,16 +1,23 @@
+export declare const convertIsoWeekToDate: (isoWeek: string) => Date;
+export declare const convertToDateObject: (date: Date | string | null, selectionType?: 'day' | 'week' | 'month' | 'year') => Date;
 export declare const convertToLocalDate: (d: Date, locale: string, options?: {}) => string;
 export declare const convertToLocalTime: (d: Date, locale: string, options?: {}) => string;
 export declare const createGroupsInArray: <T>(arr: T[], numberOfGroups: number) => T[][];
+export declare const getCalendarDate: (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => Date;
 export declare const getCurrentYear: () => number;
 export declare const getCurrentMonth: () => number;
-export declare const getLocalDateFromString: (string: string, locale: string, time?: boolean) => Date | undefined;
+export declare const getDateBySelectionType: (date: Date | null, selectionType: 'day' | 'week' | 'month' | 'year') => string | Date | null;
 export declare const getMonthName: (month: number, locale: string) => string;
 export declare const getMonthsNames: (locale: string) => string[];
 export declare const getYears: (year: number) => number[];
+export declare const getWeekNumber: (date: Date) => number;
 export declare const getMonthDetails: (year: number, month: number, firstDayOfWeek: number) => {
-    date: Date;
-    month: string;
-}[][];
+    weekNumber?: number | undefined;
+    days: {
+        date: Date;
+        month: string;
+    }[];
+}[];
 export declare const isDisableDateInRange: (startDate?: Date | null, endDate?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean;
 export declare const isDateDisabled: (date: Date, min?: Date | null, max?: Date | null, dates?: Date[] | Date[][] | (Date | Date[])[]) => boolean | undefined;
 export declare const isDateInRange: (date: Date, start: Date | null, end: Date | null) => boolean | null;

package/dist/components/close-button/CCloseButton.d.ts

@@ -1,4 +1,8 @@
 export declare const CCloseButton: import("vue").DefineComponent<{
+    /**
+     * Invert the default color.
+     */
+    dark: BooleanConstructor;
     /**
      * Toggle the disabled state for the component.
      */
@@ -10,6 +14,10 @@ export declare const CCloseButton: import("vue").DefineComponent<{
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "click"[], "click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Invert the default color.
+     */
+    dark: BooleanConstructor;
     /**
      * Toggle the disabled state for the component.
      */
@@ -21,6 +29,7 @@ export declare const CCloseButton: import("vue").DefineComponent<{
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
 }, {
+    dark: boolean;
     disabled: boolean;
     white: boolean;
 }, {}>;

package/dist/components/date-picker/CDatePicker.d.ts

@@ -156,6 +156,27 @@ declare const CDatePicker: import("vue").DefineComponent<{
      * Toggle the readonly state for the component.
      */
     inputReadOnly: BooleanConstructor;
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -201,6 +222,16 @@ declare const CDatePicker: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -210,6 +241,12 @@ declare const CDatePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Size the component small or large.
      *
@@ -234,6 +271,12 @@ declare const CDatePicker: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("date-change" | "update:date")[], "date-change" | "update:date", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -393,6 +436,27 @@ declare const CDatePicker: import("vue").DefineComponent<{
      * Toggle the readonly state for the component.
      */
     inputReadOnly: BooleanConstructor;
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -438,6 +502,16 @@ declare const CDatePicker: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -447,6 +521,12 @@ declare const CDatePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Size the component small or large.
      *
@@ -471,6 +551,12 @@ declare const CDatePicker: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }>> & {
     "onDate-change"?: ((...args: any[]) => any) | undefined;
     "onUpdate:date"?: ((...args: any[]) => any) | undefined;
@@ -482,7 +568,9 @@ declare const CDatePicker: import("vue").DefineComponent<{
     navigation: boolean;
     navYearFirst: boolean;
     selectAdjacementDays: boolean;
+    selectionType: "day" | "week" | "month" | "year";
     showAdjacementDays: boolean;
+    showWeekNumber: boolean;
     weekdayFormat: string | number | Function;
     footer: boolean;
     cancelButton: string | boolean;
@@ -496,6 +584,7 @@ declare const CDatePicker: import("vue").DefineComponent<{
     indicator: boolean;
     inputReadOnly: boolean;
     placeholder: string;
+    inputOnChangeDelay: number;
     timepicker: boolean;
 }, {}>;
 export { CDatePicker };

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -184,6 +184,27 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
      * Toggle the readonly state for the component.
      */
     inputReadOnly: BooleanConstructor;
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Set component validation state to invalid.
      *
@@ -261,6 +282,16 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -270,6 +301,12 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Default icon or character character that separates two dates.
      */
@@ -366,6 +403,12 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show" | "start-date-change" | "end-date-change" | "update:start-date" | "update:end-date")[], "hide" | "show" | "start-date-change" | "end-date-change" | "update:start-date" | "update:end-date", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -553,6 +596,27 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
      * Toggle the readonly state for the component.
      */
     inputReadOnly: BooleanConstructor;
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: FunctionConstructor;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: FunctionConstructor;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+        type: NumberConstructor;
+        default: number;
+    };
     /**
      * Set component validation state to invalid.
      *
@@ -630,6 +694,16 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
      * @since 4.9.0
      */
     selectAdjacementDays: BooleanConstructor;
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+        type: PropType<"day" | "week" | "month" | "year">;
+        default: string;
+        validator: (value: string) => boolean;
+    };
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -639,6 +713,12 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: BooleanConstructor;
     /**
      * Default icon or character character that separates two dates.
      */
@@ -735,6 +815,12 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
         default: number;
         validator: (value: string | number) => boolean;
     };
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: StringConstructor;
 }>> & {
     onHide?: ((...args: any[]) => any) | undefined;
     onShow?: ((...args: any[]) => any) | undefined;
@@ -755,7 +841,9 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
     range: boolean;
     selectEndDate: boolean;
     selectAdjacementDays: boolean;
+    selectionType: "day" | "week" | "month" | "year";
     showAdjacementDays: boolean;
+    showWeekNumber: boolean;
     weekdayFormat: string | number | Function;
     required: boolean;
     footer: boolean;
@@ -773,6 +861,7 @@ declare const CDateRangePicker: import("vue").DefineComponent<{
     inputReadOnly: boolean;
     placeholder: string | string[];
     closeOnSelect: boolean;
+    inputOnChangeDelay: number;
     separator: boolean;
     timepicker: boolean;
     todayButton: string | boolean;

package/dist/components/dropdown/CDropdown.d.ts

@@ -1,21 +1,6 @@
 import { PropType } from 'vue';
 import type { Placement } from '@popperjs/core';
 import type { Triggers } from '../../types';
-export type Directions = 'start' | 'end';
-export type Breakpoints = {
-    xs: Directions;
-} | {
-    sm: Directions;
-} | {
-    md: Directions;
-} | {
-    lg: Directions;
-} | {
-    xl: Directions;
-} | {
-    xxl: Directions;
-};
-export type Alignments = Directions | Breakpoints;
 declare const CDropdown: import("vue").DefineComponent<{
     /**
      * Set aligment of dropdown menu.
@@ -24,17 +9,17 @@ declare const CDropdown: import("vue").DefineComponent<{
      */
     alignment: {
         type: PropType<string | {
-            xs: Directions;
+            xs: import("./types").Directions;
         } | {
-            sm: Directions;
+            sm: import("./types").Directions;
         } | {
-            md: Directions;
+            md: import("./types").Directions;
         } | {
-            lg: Directions;
+            lg: import("./types").Directions;
         } | {
-            xl: Directions;
+            xl: import("./types").Directions;
         } | {
-            xxl: Directions;
+            xxl: import("./types").Directions;
         }>;
         validator: (value: string | any) => boolean;
     };
@@ -125,17 +110,17 @@ declare const CDropdown: import("vue").DefineComponent<{
      */
     alignment: {
         type: PropType<string | {
-            xs: Directions;
+            xs: import("./types").Directions;
         } | {
-            sm: Directions;
+            sm: import("./types").Directions;
         } | {
-            md: Directions;
+            md: import("./types").Directions;
         } | {
-            lg: Directions;
+            lg: import("./types").Directions;
         } | {
-            xl: Directions;
+            xl: import("./types").Directions;
         } | {
-            xxl: Directions;
+            xxl: import("./types").Directions;
         }>;
         validator: (value: string | any) => boolean;
     };
@@ -219,8 +204,8 @@ declare const CDropdown: import("vue").DefineComponent<{
     onShow?: ((...args: any[]) => any) | undefined;
 }, {
     visible: boolean;
-    disabled: boolean;
     dark: boolean;
+    disabled: boolean;
     variant: string;
     placement: Placement;
     offset: unknown[];