@coreui/vue-pro 4.5.0 → 4.6.0

package/dist/index.es.js

@@ -1159,6 +1159,29 @@ const CCalendar = defineComponent({
             type: Number,
             default: 1,
         },
+        /**
+         * Set the format of day name.
+         *
+         * @default 'numeric'
+         * @since 4.6.0
+         */
+        dayFormat: {
+            type: [Function, String],
+            default: 'numeric',
+            required: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['numeric', '2-digit'].includes(value);
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
         /**
          * Specify the list of dates that cannot be selected.
          */
@@ -1211,6 +1234,12 @@ const CCalendar = defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Reorder year-month navigation, and render year first.
+         *
+         * @since 4.6.0
+         */
+        navYearFirst: Boolean,
         /**
          * Allow range selection.
          */
@@ -1231,7 +1260,7 @@ const CCalendar = defineComponent({
          * @type  number | 'long' | 'narrow' | 'short'
          */
         weekdayFormat: {
-            type: [Number, String],
+            type: [Function, Number, String],
             default: 2,
             validator: (value) => {
                 if (typeof value === 'string') {
@@ -1240,6 +1269,9 @@ const CCalendar = defineComponent({
                 if (typeof value === 'number') {
                     return true;
                 }
+                if (typeof value === 'function') {
+                    return true;
+                }
                 return false;
             },
         },
@@ -1415,11 +1447,15 @@ const CCalendar = defineComponent({
                     h$1('thead', {}, h$1('tr', {}, weekDays.map(({ date }) => {
                         return h$1('th', { class: 'calendar-cell' }, h$1('div', {
                             class: 'calendar-header-cell-inner',
-                        }, props.weekdayFormat === 'string'
-                            ? date.toLocaleDateString(props.locale, { weekday: props.weekdayFormat })
-                            : date
-                                .toLocaleDateString(props.locale, { weekday: 'long' })
-                                .slice(0, props.weekdayFormat)));
+                        }, typeof props.weekdayFormat === 'function'
+                            ? props.weekdayFormat(date)
+                            : typeof props.weekdayFormat === 'string'
+                                ? date.toLocaleDateString(props.locale, {
+                                    weekday: props.weekdayFormat,
+                                })
+                                : date
+                                    .toLocaleDateString(props.locale, { weekday: 'long' })
+                                    .slice(0, props.weekdayFormat)));
                     }))),
                 h$1('tbody', {}, [
                     view.value === 'days' &&
@@ -1452,7 +1488,11 @@ const CCalendar = defineComponent({
                                     }),
                                 }, h$1('div', {
                                     class: 'calendar-cell-inner',
-                                }, date.toLocaleDateString(props.locale, { day: 'numeric' })));
+                                }, typeof props.dayFormat === 'function'
+                                    ? props.dayFormat(date)
+                                    : date.toLocaleDateString(props.locale, {
+                                        day: props.dayFormat,
+                                    })));
                             }));
                         }),
                     view.value === 'months' &&
@@ -1520,6 +1560,7 @@ const CCalendar = defineComponent({
                     ]),
                 h$1('div', {
                     class: 'calendar-nav-date',
+                    ...(props.navYearFirst && { style: { display: 'flex', justifyContent: 'center' } }),
                 }, [
                     view.value === 'days' &&
                         h$1(CButton, {
@@ -1537,6 +1578,7 @@ const CCalendar = defineComponent({
                             if (props.navigation)
                                 view.value = 'years';
                         },
+                        ...(props.navYearFirst && { style: { order: '-1' } }),
                     }, () => date.toLocaleDateString(props.locale, { year: 'numeric' })),
                 ]),
                 props.navigation &&
@@ -12065,6 +12107,34 @@ const CTimePicker = defineComponent({
                 return ['ghost', 'outline'].includes(value);
             },
         },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedback: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedbackInvalid: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+         *
+         * @since 4.6.0
+         */
+        feedbackValid: {
+            type: String,
+        },
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         */
+        id: String,
         /**
          * Toggle visibility or set the content of the input indicator.
          */
@@ -12076,6 +12146,20 @@ const CTimePicker = defineComponent({
          * Toggle the readonly state for the component.
          */
         inputReadOnly: Boolean,
+        /**
+         * Set component validation state to invalid.
+         *
+         * @since 4.6.0
+         */
+        invalid: Boolean,
+        /**
+         * Add a caption for a component.
+         *
+         * @since 4.6.0
+         */
+        label: {
+            type: String,
+        },
         /**
          * Sets the default locale for components. If not set, it is inherited from the navigator.language.
          */
@@ -12102,12 +12186,32 @@ const CTimePicker = defineComponent({
                 return ['sm', 'lg'].includes(value);
             },
         },
+        /**
+         * Add helper text to the component.
+         *
+         * @since 4.6.0
+         */
+        text: {
+            type: String,
+        },
         /**
          * Initial selected time.
          */
         time: {
             type: [Date, String],
         },
+        /**
+         * Display validation feedback in a styled tooltip.
+         *
+         * @since 4.6.0
+         */
+        tooltipFeedback: Boolean,
+        /**
+         * Set component validation state to valid.
+         *
+         * @since 4.6.0
+         */
+        valid: Boolean,
         /**
          * Set the time picker variant to a roll or select.
          *
@@ -12135,7 +12239,7 @@ const CTimePicker = defineComponent({
          */
         'show',
     ],
-    setup(props, { emit, slots }) {
+    setup(props, { emit, attrs, slots }) {
         const date = ref(convertTimeToDate(props.time));
         const initialDate = ref(null);
         const ampm = ref(date.value ? getAmPm(new Date(date.value), props.locale) : 'am');
@@ -12275,49 +12379,62 @@ const CTimePicker = defineComponent({
                     selected: ampm.value,
                 }),
         ];
-        return () => h$1(CPicker, {
-            cancelButton: props.cancelButton,
-            cancelButtonColor: props.cancelButtonColor,
-            cancelButtonSize: props.cancelButtonSize,
-            cancelButtonVariant: props.cancelButtonVariant,
-            class: 'time-picker',
-            confirmButton: props.confirmButton,
-            confirmButtonColor: props.confirmButtonColor,
-            confirmButtonSize: props.confirmButtonSize,
-            confirmButtonVariant: props.confirmButtonVariant,
-            container: props.container,
-            disabled: props.disabled,
-            footer: true,
-            onCancel: () => {
-                if (initialDate.value) {
-                    date.value = new Date(initialDate.value);
-                }
-            },
-            onHide: () => {
-                emit('hide');
-            },
-            onShow: () => {
-                if (date.value) {
-                    initialDate.value = new Date(date.value);
-                }
-                emit('show');
-            },
+        return () => h$1(CFormControlWrapper, {
+            describedby: attrs['aria-describedby'],
+            feedback: props.feedback,
+            feedbackInvalid: props.feedbackInvalid,
+            feedbackValid: props.feedbackValid,
+            id: props.id,
+            invalid: props.invalid,
+            label: props.label,
+            text: props.text,
+            tooltipFeedback: props.tooltipFeedback,
+            valid: props.valid,
         }, {
-            ...(slots.cancelButton && {
-                cancelButton: () => slots.cancelButton && slots.cancelButton(),
-            }),
-            ...(slots.confirmButton && {
-                confirmButton: () => slots.confirmButton && slots.confirmButton(),
+            default: () => h$1(CPicker, {
+                cancelButton: props.cancelButton,
+                cancelButtonColor: props.cancelButtonColor,
+                cancelButtonSize: props.cancelButtonSize,
+                cancelButtonVariant: props.cancelButtonVariant,
+                class: ['time-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
+                confirmButton: props.confirmButton,
+                confirmButtonColor: props.confirmButtonColor,
+                confirmButtonSize: props.confirmButtonSize,
+                confirmButtonVariant: props.confirmButtonVariant,
+                container: props.container,
+                disabled: props.disabled,
+                footer: true,
+                onCancel: () => {
+                    if (initialDate.value) {
+                        date.value = new Date(initialDate.value);
+                    }
+                },
+                onHide: () => {
+                    emit('hide');
+                },
+                onShow: () => {
+                    if (date.value) {
+                        initialDate.value = new Date(date.value);
+                    }
+                    emit('show');
+                },
+            }, {
+                ...(slots.cancelButton && {
+                    cancelButton: () => slots.cancelButton && slots.cancelButton(),
+                }),
+                ...(slots.confirmButton && {
+                    confirmButton: () => slots.confirmButton && slots.confirmButton(),
+                }),
+                toggler: () => InputGroup(),
+                default: () => h$1('div', {
+                    class: [
+                        'time-picker-body',
+                        {
+                            ['time-picker-roll']: props.variant === 'roll',
+                        },
+                    ],
+                }, props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()),
             }),
-            toggler: () => InputGroup(),
-            default: () => h$1('div', {
-                class: [
-                    'time-picker-body',
-                    {
-                        ['time-picker-roll']: props.variant === 'roll',
-                    },
-                ],
-            }, props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()),
         });
     },
 });
@@ -12430,6 +12547,29 @@ const CDateRangePicker = defineComponent({
                 return ['ghost', 'outline'].includes(value);
             },
         },
+        /**
+         * Set the format of day name.
+         *
+         * @default 'numeric'
+         * @since 4.6.0
+         */
+        dayFormat: {
+            type: [Function, String],
+            default: 'numeric',
+            required: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['numeric', '2-digit'].includes(value);
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
         /**
          * Toggle the disabled state for the component.
          */
@@ -12447,6 +12587,30 @@ const CDateRangePicker = defineComponent({
             type: [Date, String],
             required: false,
         },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedback: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedbackInvalid: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+         *
+         * @since 4.6.0
+         */
+        feedbackValid: {
+            type: String,
+        },
         /**
          * Sets the day of start week.
          * - 0 - Sunday,
@@ -12489,6 +12653,20 @@ const CDateRangePicker = defineComponent({
          * Toggle the readonly state for the component.
          */
         inputReadOnly: Boolean,
+        /**
+         * Set component validation state to invalid.
+         *
+         * @since 4.6.0
+         */
+        invalid: Boolean,
+        /**
+         * Add a caption for a component.
+         *
+         * @since 4.6.0
+         */
+        label: {
+            type: String,
+        },
         /**
          * Sets the default locale for components. If not set, it is inherited from the navigator.language.
          */
@@ -12515,6 +12693,12 @@ const CDateRangePicker = defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Reorder year-month navigation, and render year first.
+         *
+         * @since 4.6.0
+         */
+        navYearFirst: Boolean,
         /**
          * Specifies a short hint that is visible in the input.
          */
@@ -12562,6 +12746,14 @@ const CDateRangePicker = defineComponent({
         startDate: {
             type: [Date, String],
         },
+        /**
+         * Add helper text to the component.
+         *
+         * @since 4.6.0
+         */
+        text: {
+            type: String,
+        },
         /**
          * Provide an additional time selection by adding select boxes to choose times.
          */
@@ -12605,13 +12797,25 @@ const CDateRangePicker = defineComponent({
                 return ['ghost', 'outline'].includes(value);
             },
         },
+        /**
+         * Display validation feedback in a styled tooltip.
+         *
+         * @since 4.6.0
+         */
+        tooltipFeedback: Boolean,
+        /**
+         * Set component validation state to valid.
+         *
+         * @since 4.6.0
+         */
+        valid: Boolean,
         /**
          * Set length or format of day name.
          *
          * @type  number | 'long' | 'narrow' | 'short'
          */
         weekdayFormat: {
-            type: [Number, String],
+            type: [Function, Number, String],
             default: 2,
             validator: (value) => {
                 if (typeof value === 'string') {
@@ -12620,6 +12824,9 @@ const CDateRangePicker = defineComponent({
                 if (typeof value === 'number') {
                     return true;
                 }
+                if (typeof value === 'function') {
+                    return true;
+                }
                 return false;
             },
         },
@@ -12648,7 +12855,7 @@ const CDateRangePicker = defineComponent({
          */
         'start-date-change',
     ],
-    setup(props, { slots, emit }) {
+    setup(props, { slots, attrs, emit }) {
         const calendarDate = ref(props.calendarDate
             ? new Date(props.calendarDate)
             : props.startDate
@@ -12815,147 +13022,164 @@ const CDateRangePicker = defineComponent({
                             : h$1('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' })),
                 ]),
         ]);
-        return () => h$1(CPicker, {
-            cancelButton: props.cancelButton,
-            cancelButtonColor: props.cancelButtonColor,
-            cancelButtonSize: props.cancelButtonSize,
-            cancelButtonVariant: props.cancelButtonVariant,
-            class: 'date-picker',
-            confirmButton: props.confirmButton,
-            confirmButtonColor: props.confirmButtonColor,
-            confirmButtonSize: props.confirmButtonSize,
-            confirmButtonVariant: props.confirmButtonVariant,
-            disabled: props.disabled,
-            footer: props.footer || props.timepicker,
+        return () => h$1(CFormControlWrapper, {
+            describedby: attrs['aria-describedby'],
+            feedback: props.feedback,
+            feedbackInvalid: props.feedbackInvalid,
+            feedbackValid: props.feedbackValid,
             id: props.id,
-            onCancel: () => {
-                startDate.value = initialStartDate.value;
-                endDate.value = initialEndDate.value;
-            },
-            onHide: () => {
-                emit('hide');
-            },
-            onShow: () => {
-                if (startDate.value) {
-                    initialStartDate.value = new Date(startDate.value);
-                }
-                if (endDate.value) {
-                    initialEndDate.value = new Date(endDate.value);
-                }
-                emit('show');
-            },
+            invalid: props.invalid,
+            label: props.label,
+            text: props.text,
+            tooltipFeedback: props.tooltipFeedback,
+            valid: props.valid,
         }, {
-            ...(slots.cancelButton && {
-                cancelButton: () => slots.cancelButton && slots.cancelButton(),
-            }),
-            ...(slots.confirmButton && {
-                confirmButton: () => slots.confirmButton && slots.confirmButton(),
-            }),
-            toggler: () => InputGroup(),
-            footer: () => h$1(CButton, {
-                class: 'me-auto',
-                color: props.todayButtonColor,
-                size: props.todayButtonSize,
-                variant: props.todayButtonVariant,
-                onClick: () => {
-                    const date = new Date();
-                    startDate.value = date;
-                    endDate.value = date;
-                    calendarDate.value = date;
+            default: () => h$1(CPicker, {
+                cancelButton: props.cancelButton,
+                cancelButtonColor: props.cancelButtonColor,
+                cancelButtonSize: props.cancelButtonSize,
+                cancelButtonVariant: props.cancelButtonVariant,
+                class: ['date-picker', { 'is-invalid': props.invalid, 'is-valid': props.valid }],
+                confirmButton: props.confirmButton,
+                confirmButtonColor: props.confirmButtonColor,
+                confirmButtonSize: props.confirmButtonSize,
+                confirmButtonVariant: props.confirmButtonVariant,
+                disabled: props.disabled,
+                footer: props.footer || props.timepicker,
+                id: props.id,
+                onCancel: () => {
+                    startDate.value = initialStartDate.value;
+                    endDate.value = initialEndDate.value;
                 },
-            }, () => props.todayButton),
-            default: () => h$1('div', {
-                class: 'date-picker-body',
-            }, [
-                props.ranges &&
-                    h$1('div', { class: 'date-picker-ranges' }, Object.keys(props.ranges).map((key) => h$1(CButton, {
-                        color: 'secondary',
-                        onClick: () => {
-                            if (props.ranges) {
-                                startDate.value = props.ranges[key][0];
-                                endDate.value = props.ranges[key][1];
-                            }
-                        },
-                        variant: 'ghost',
-                    }, () => key))),
-                h$1('div', { class: 'date-picker-calendars' }, h$1(CCalendar, {
-                    calendarDate: new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth(), 1),
-                    calendars: props.calendars,
-                    disabledDates: props.disabledDates,
-                    ...(endDate.value && { endDate: endDate.value }),
-                    firstDayOfWeek: props.firstDayOfWeek,
-                    locale: props.locale,
-                    maxDate: maxDate.value,
-                    minDate: minDate.value,
-                    navigation: props.navigation,
-                    range: props.range,
-                    selectEndDate: selectEndDate.value,
-                    ...(startDate.value && { startDate: startDate.value }),
-                    onCalendarCellHover: (date) => handleCalendarCellHover(date),
-                    onCalendarDateChange: (date) => handleCalendarDateChange(date),
-                    onStartDateChange: (date) => handleStartDateChange(date),
-                    onEndDateChange: (date) => handleEndDateChange(date),
-                }, {
-                    /**
-                     * @slot Location for next icon.
-                     */
-                    ...(slots.navNextIcon && {
-                        navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
-                    }),
-                    /**
-                     * @slot Location for next double icon.
-                     */
-                    ...(slots.navNextDoubleIcon && {
-                        navNextDoubleIcon: () => slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
-                    }),
-                    /**
-                     * @slot Location for previous icon.
-                     */
-                    ...(slots.navPrevIcon && {
-                        navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
-                    }),
-                    /**
-                     * @slot Location for double previous icon.
-                     */
-                    ...(slots.navPrevDoubleIcon && {
-                        navPrevDoubleIcon: () => slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
-                    }),
-                })),
-                props.timepicker &&
-                    h$1('div', { class: 'date-picker-timepickers' }, isMobile.value || (props.range && props.calendars === 1)
-                        ? [
-                            h$1(CTimePicker, {
-                                container: 'inline',
-                                disabled: startDate.value === null ? true : false,
-                                locale: props.locale,
-                                onChange: (_, __, date) => handleStartDateChange(date),
-                                time: startDate.value,
-                                variant: 'select',
-                            }),
-                            h$1(CTimePicker, {
+                onHide: () => {
+                    emit('hide');
+                },
+                onShow: () => {
+                    if (startDate.value) {
+                        initialStartDate.value = new Date(startDate.value);
+                    }
+                    if (endDate.value) {
+                        initialEndDate.value = new Date(endDate.value);
+                    }
+                    emit('show');
+                },
+            }, {
+                ...(slots.cancelButton && {
+                    cancelButton: () => slots.cancelButton && slots.cancelButton(),
+                }),
+                ...(slots.confirmButton && {
+                    confirmButton: () => slots.confirmButton && slots.confirmButton(),
+                }),
+                toggler: () => InputGroup(),
+                footer: () => h$1(CButton, {
+                    class: 'me-auto',
+                    color: props.todayButtonColor,
+                    size: props.todayButtonSize,
+                    variant: props.todayButtonVariant,
+                    onClick: () => {
+                        const date = new Date();
+                        startDate.value = date;
+                        endDate.value = date;
+                        calendarDate.value = date;
+                    },
+                }, () => props.todayButton),
+                default: () => h$1('div', {
+                    class: 'date-picker-body',
+                }, [
+                    props.ranges &&
+                        h$1('div', { class: 'date-picker-ranges' }, Object.keys(props.ranges).map((key) => h$1(CButton, {
+                            color: 'secondary',
+                            onClick: () => {
+                                if (props.ranges) {
+                                    startDate.value = props.ranges[key][0];
+                                    endDate.value = props.ranges[key][1];
+                                }
+                            },
+                            variant: 'ghost',
+                        }, () => key))),
+                    h$1('div', { class: 'date-picker-calendars' }, h$1(CCalendar, {
+                        calendarDate: new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth(), 1),
+                        calendars: props.calendars,
+                        dayFormat: props.dayFormat,
+                        disabledDates: props.disabledDates,
+                        ...(endDate.value && { endDate: endDate.value }),
+                        firstDayOfWeek: props.firstDayOfWeek,
+                        locale: props.locale,
+                        maxDate: maxDate.value,
+                        minDate: minDate.value,
+                        navYearFirst: props.navYearFirst,
+                        navigation: props.navigation,
+                        range: props.range,
+                        selectEndDate: selectEndDate.value,
+                        ...(startDate.value && { startDate: startDate.value }),
+                        onCalendarCellHover: (date) => handleCalendarCellHover(date),
+                        onCalendarDateChange: (date) => handleCalendarDateChange(date),
+                        onStartDateChange: (date) => handleStartDateChange(date),
+                        onEndDateChange: (date) => handleEndDateChange(date),
+                    }, {
+                        /**
+                         * @slot Location for next icon.
+                         */
+                        ...(slots.navNextIcon && {
+                            navNextIcon: () => slots.navNextIcon && slots.navNextIcon(),
+                        }),
+                        /**
+                         * @slot Location for next double icon.
+                         */
+                        ...(slots.navNextDoubleIcon && {
+                            navNextDoubleIcon: () => slots.navNextDoubleIcon && slots.navNextDoubleIcon(),
+                        }),
+                        /**
+                         * @slot Location for previous icon.
+                         */
+                        ...(slots.navPrevIcon && {
+                            navPrevIcon: () => slots.navPrevIcon && slots.navPrevIcon(),
+                        }),
+                        /**
+                         * @slot Location for double previous icon.
+                         */
+                        ...(slots.navPrevDoubleIcon && {
+                            navPrevDoubleIcon: () => slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
+                        }),
+                    })),
+                    props.timepicker &&
+                        h$1('div', { class: 'date-picker-timepickers' }, isMobile.value || (props.range && props.calendars === 1)
+                            ? [
+                                h$1(CTimePicker, {
+                                    container: 'inline',
+                                    disabled: startDate.value === null ? true : false,
+                                    locale: props.locale,
+                                    onChange: (_, __, date) => handleStartDateChange(date),
+                                    time: startDate.value,
+                                    variant: 'select',
+                                }),
+                                h$1(CTimePicker, {
+                                    container: 'inline',
+                                    disabled: endDate.value === null ? true : false,
+                                    locale: props.locale,
+                                    onChange: (_, __, date) => handleEndDateChange(date),
+                                    time: endDate.value,
+                                    variant: 'select',
+                                }),
+                            ]
+                            : [...Array(props.calendars)].map((_, index) => h$1(CTimePicker, {
                                 container: 'inline',
-                                disabled: endDate.value === null ? true : false,
+                                disabled: index === 0
+                                    ? startDate.value === null
+                                        ? true
+                                        : false
+                                    : endDate.value === null
+                                        ? true
+                                        : false,
                                 locale: props.locale,
-                                onChange: (_, __, date) => handleEndDateChange(date),
-                                time: endDate.value,
+                                onChange: (_, __, date) => index === 0
+                                    ? handleStartDateChange(date)
+                                    : handleEndDateChange(date),
+                                time: index === 0 ? startDate.value : endDate.value,
                                 variant: 'select',
-                            }),
-                        ]
-                        : [...Array(props.calendars)].map((_, index) => h$1(CTimePicker, {
-                            container: 'inline',
-                            disabled: index === 0
-                                ? startDate.value === null
-                                    ? true
-                                    : false
-                                : endDate.value === null
-                                    ? true
-                                    : false,
-                            locale: props.locale,
-                            onChange: (_, __, date) => index === 0 ? handleStartDateChange(date) : handleEndDateChange(date),
-                            time: index === 0 ? startDate.value : endDate.value,
-                            variant: 'select',
-                        }))),
-            ]),
+                            }))),
+                ]),
+            }),
         });
     },
 });
@@ -13061,6 +13285,29 @@ const CDatePicker = defineComponent({
                 return ['ghost', 'outline'].includes(value);
             },
         },
+        /**
+         * Set the format of day name.
+         *
+         * @default 'numeric'
+         * @since 4.6.0
+         */
+        dayFormat: {
+            type: [Function, String],
+            default: 'numeric',
+            required: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['numeric', '2-digit'].includes(value);
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                if (typeof value === 'function') {
+                    return true;
+                }
+                return false;
+            },
+        },
         /**
          * Toggle the disabled state for the component.
          */
@@ -13145,6 +13392,12 @@ const CDatePicker = defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * Reorder year-month navigation, and render year first.
+         *
+         * @since 4.6.0
+         */
+        navYearFirst: Boolean,
         /**
          * Specifies a short hint that is visible in the input.
          */
@@ -13174,7 +13427,7 @@ const CDatePicker = defineComponent({
          * @type  number | 'long' | 'narrow' | 'short'
          */
         weekdayFormat: {
-            type: [Number, String],
+            type: [Function, Number, String],
             default: 2,
             validator: (value) => {
                 if (typeof value === 'string') {
@@ -13183,6 +13436,9 @@ const CDatePicker = defineComponent({
                 if (typeof value === 'number') {
                     return true;
                 }
+                if (typeof value === 'function') {
+                    return true;
+                }
                 return false;
             },
         },
@@ -14581,6 +14837,50 @@ const CMultiSelect = defineComponent({
             required: false,
             default: false,
         },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedback: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable feedback.
+         *
+         * @since 4.6.0
+         */
+        feedbackInvalid: {
+            type: String,
+        },
+        /**
+         * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
+         *
+         * @since 4.6.0
+         */
+        feedbackValid: {
+            type: String,
+        },
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         */
+        id: {
+            type: String,
+        },
+        /**
+         * Set component validation state to invalid.
+         *
+         * @since 4.6.0
+         */
+        invalid: Boolean,
+        /**
+         * Add a caption for a component.
+         *
+         * @since 4.6.0
+         */
+        label: {
+            type: String,
+        },
         /**
          * It specifies that multiple options can be selected at once.
          *
@@ -14705,6 +15005,26 @@ const CMultiSelect = defineComponent({
                 return ['sm', 'lg'].includes(value);
             },
         },
+        /**
+         * Add helper text to the component.
+         *
+         * @since 4.6.0
+         */
+        text: {
+            type: String,
+        },
+        /**
+         * Display validation feedback in a styled tooltip.
+         *
+         * @since 4.6.0
+         */
+        tooltipFeedback: Boolean,
+        /**
+         * Set component validation state to valid.
+         *
+         * @since 4.6.0
+         */
+        valid: Boolean,
         /**
          * Toggle the visibility of multi select dropdown.
          *
@@ -14722,7 +15042,7 @@ const CMultiSelect = defineComponent({
          */
         'change',
     ],
-    setup(props, { emit }) {
+    setup(props, { attrs, emit }) {
         const flattenArray = (options) => {
             return options.reduce((acc, val) => {
                 return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
@@ -14838,6 +15158,13 @@ const CMultiSelect = defineComponent({
         };
         const handleOptionClick = (option) => {
             options.value = updateOptions(option.value);
+            if (!props.multiple) {
+                visible.value = false;
+                search.value = '';
+                if (searchRef.value) {
+                    searchRef.value.value = '';
+                }
+            }
         };
         const handleSelectAll = () => {
             options.value = toggleAllOptions(options.value, true);
@@ -14854,75 +15181,96 @@ const CMultiSelect = defineComponent({
                     : selected.value.map((option) => option.value)[0],
                 onChange: () => emit('change', selected.value),
             }),
-            h$1(CPicker, {
-                class: [
-                    'form-multi-select',
-                    {
-                        'form-multi-select-with-cleaner': props.cleaner,
-                        disabled: props.disabled,
-                        [`form-multi-select-${props.size}`]: props.size,
-                        'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-                        show: visible.value,
-                    },
-                ],
-                disabled: props.disabled,
-                onShow: () => {
-                    props.search && searchRef.value && searchRef.value.focus();
-                },
+            h$1(CFormControlWrapper, {
+                describedby: attrs['aria-describedby'],
+                feedback: props.feedback,
+                feedbackInvalid: props.feedbackInvalid,
+                feedbackValid: props.feedbackValid,
+                id: props.id,
+                invalid: props.invalid,
+                label: props.label,
+                text: props.text,
+                tooltipFeedback: props.tooltipFeedback,
+                valid: props.valid,
             }, {
-                toggler: () => h$1('div', {}, [
-                    h$1(CMultiSelectSelection, {
-                        multiple: props.multiple,
-                        onRemove: (option) => !props.disabled && handleOptionClick(option),
-                        search: props.search,
-                        selected: selected.value,
-                        selectionType: props.selectionType,
-                        selectionTypeCounterText: props.selectionTypeCounterText,
-                    }),
-                    props.multiple &&
-                        props.cleaner &&
-                        selected.value.length > 0 &&
-                        !props.disabled &&
-                        h$1('button', {
-                            type: 'button',
-                            class: 'form-multi-select-selection-cleaner',
-                            onClick: () => handleDeselectAll(),
+                default: () => h$1(CPicker, {
+                    class: [
+                        'form-multi-select',
+                        {
+                            'form-multi-select-with-cleaner': props.cleaner,
+                            disabled: props.disabled,
+                            [`form-multi-select-${props.size}`]: props.size,
+                            'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+                            show: visible.value,
+                            'is-invalid': props.invalid,
+                            'is-valid': props.valid,
+                        },
+                    ],
+                    disabled: props.disabled,
+                    id: props.id,
+                    onHide: () => {
+                        visible.value = false;
+                    },
+                    onShow: () => {
+                        props.search && searchRef.value && searchRef.value.focus();
+                        visible.value = true;
+                    },
+                    visible: visible.value,
+                }, {
+                    toggler: () => h$1('div', {}, [
+                        h$1(CMultiSelectSelection, {
+                            multiple: props.multiple,
+                            onRemove: (option) => !props.disabled && handleOptionClick(option),
+                            search: props.search,
+                            selected: selected.value,
+                            selectionType: props.selectionType,
+                            selectionTypeCounterText: props.selectionTypeCounterText,
                         }),
-                    props.search &&
-                        h$1('input', {
-                            type: 'text',
-                            class: 'form-multi-select-search',
-                            autocomplete: 'off',
-                            ...(selected.value.length === 0 && { placeholder: props.placeholder }),
-                            ...(selected.value.length &&
-                                props.selectionType === 'counter' && {
-                                placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                        props.multiple &&
+                            props.cleaner &&
+                            selected.value.length > 0 &&
+                            !props.disabled &&
+                            h$1('button', {
+                                type: 'button',
+                                class: 'form-multi-select-selection-cleaner',
+                                onClick: () => handleDeselectAll(),
                             }),
-                            ...(selected.value.length &&
-                                !props.multiple && {
-                                placeholder: selected.value.map((option) => option.text)[0],
+                        props.search &&
+                            h$1('input', {
+                                type: 'text',
+                                class: 'form-multi-select-search',
+                                autocomplete: 'off',
+                                ...(selected.value.length === 0 && { placeholder: props.placeholder }),
+                                ...(selected.value.length &&
+                                    props.selectionType === 'counter' && {
+                                    placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
+                                }),
+                                ...(selected.value.length &&
+                                    !props.multiple && {
+                                    placeholder: selected.value.map((option) => option.text)[0],
+                                }),
+                                disabled: props.disabled,
+                                onInput: (event) => handleSearchChange(event),
+                                onKeydown: (event) => handleSearchKeyDown(event),
+                                ...(props.multiple &&
+                                    selected.value.length &&
+                                    props.selectionType !== 'counter' && { size: search.value.length + 2 }),
+                                ref: searchRef,
                             }),
-                            disabled: props.disabled,
-                            onInput: (event) => handleSearchChange(event),
-                            onKeydown: (event) => handleSearchKeyDown(event),
-                            ...(props.multiple &&
-                                selected.value.length &&
-                                props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-                            ref: searchRef,
+                    ]),
+                    default: () => h$1('div', {}, [
+                        props.multiple &&
+                            props.selectAll &&
+                            h$1('button', { class: 'form-multi-select-all', onClick: () => handleSelectAll() }, props.selectAllLabel),
+                        h$1(CMultiSelectOptions, {
+                            onOptionClick: (option) => handleOptionClick(option),
+                            options: vOptions.value,
+                            optionsMaxHeight: props.optionsMaxHeight,
+                            optionsStyle: props.optionsStyle,
+                            searchNoResultsLabel: props.searchNoResultsLabel,
                         }),
-                ]),
-                default: () => h$1('div', {}, [
-                    props.multiple &&
-                        props.selectAll &&
-                        h$1('button', { class: 'form-multi-select-all', onClick: () => handleSelectAll() }, props.selectAllLabel),
-                    h$1(CMultiSelectOptions, {
-                        onOptionClick: (option) => handleOptionClick(option),
-                        options: vOptions.value,
-                        optionsMaxHeight: props.optionsMaxHeight,
-                        optionsStyle: props.optionsStyle,
-                        searchNoResultsLabel: props.searchNoResultsLabel,
-                    }),
-                ]),
+                    ]),
+                }),
             }),
         ];
     },