@coreui/vue-pro 4.4.2 → 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 &&
@@ -8467,7 +8509,7 @@ const CFormInput = defineComponent({
                 onInput: (event) => handleInput(event),
                 readonly: props.readonly,
                 type: props.type,
-                ...(props.modelValue && { value: props.modelValue }),
+                ...((props.modelValue || props.modelValue === 0) && { value: props.modelValue })
             }, slots.default && slots.default()),
             ...(slots.feedback && { feedback: () => slots.feedback && slots.feedback() }),
             ...(slots.feedbackInvalid && {
@@ -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,148 +13022,165 @@ 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;
             },
         },
@@ -14573,6 +14829,58 @@ const CMultiSelect = defineComponent({
             required: false,
             default: true,
         },
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: {
+            type: Boolean,
+            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.
          *
@@ -14685,6 +14993,38 @@ const CMultiSelect = defineComponent({
             default: 'item(s) selected',
             required: false,
         },
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            required: false,
+            validator: (value) => {
+                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.
          *
@@ -14702,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);
@@ -14767,7 +15107,6 @@ const CMultiSelect = defineComponent({
                     }, [])
                 : options.value;
         };
-        const multiSelectRef = ref();
         const nativeSelectRef = ref();
         provide('nativeSelectRef', nativeSelectRef);
         const searchRef = ref();
@@ -14777,8 +15116,9 @@ const CMultiSelect = defineComponent({
         const visible = ref(props.visible);
         const selected = ref(getSelectedOptions(props.options));
         const count = ref(0);
-        watch(() => props.options, () => {
-            options.value = props.options;
+        watch(() => props.options, (newValue, oldValue) => {
+            if (JSON.stringify(newValue) !== JSON.stringify(oldValue))
+                options.value = newValue;
         });
         watch(options, () => {
             const _selected = options.value && getSelectedOptions(options.value);
@@ -14801,24 +15141,6 @@ const CMultiSelect = defineComponent({
             nativeSelectRef.value &&
                 nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }));
         });
-        onMounted(() => {
-            window.addEventListener('click', handleClickOutside);
-            window.addEventListener('keyup', handleKeyup);
-        });
-        onUnmounted(() => {
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyup);
-        });
-        const handleKeyup = (event) => {
-            if (multiSelectRef.value && !multiSelectRef.value.contains(event.target)) {
-                visible.value = false;
-            }
-        };
-        const handleClickOutside = (event) => {
-            if (multiSelectRef.value && !multiSelectRef.value.contains(event.target)) {
-                visible.value = false;
-            }
-        };
         const handleSearchChange = (event) => {
             const target = event.target;
             search.value = target.value.toLowerCase();
@@ -14836,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);
@@ -14852,68 +15181,97 @@ const CMultiSelect = defineComponent({
                     : selected.value.map((option) => option.value)[0],
                 onChange: () => emit('change', selected.value),
             }),
-            h$1('div', {
-                class: [
-                    'form-multi-select',
-                    {
-                        show: visible.value,
-                        'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+            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,
+            }, {
+                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;
                     },
-                ],
-                onClick: () => {
-                    visible.value = true;
-                    props.search && searchRef.value && searchRef.value.focus();
-                },
-                ref: multiSelectRef,
-            }, [
-                h$1(CMultiSelectSelection, {
-                    multiple: props.multiple,
-                    onRemove: (option) => handleOptionClick(option),
-                    search: props.search,
-                    selected: selected.value,
-                    selectionType: props.selectionType,
-                    selectionTypeCounterText: props.selectionTypeCounterText,
-                }),
-                props.multiple &&
-                    props.cleaner &&
-                    selected.value.length > 0 &&
-                    h$1('button', {
-                        type: 'button',
-                        class: 'form-multi-select-selection-cleaner',
-                        onClick: () => handleDeselectAll(),
-                    }),
-                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}`,
+                    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,
                         }),
-                        ...(selected.value.length &&
-                            !props.multiple && { placeholder: selected.value.map((option) => option.text)[0] }),
-                        onInput: (event) => handleSearchChange(event),
-                        onKeydown: (event) => handleSearchKeyDown(event),
-                        ...(props.multiple &&
-                            selected.value.length &&
-                            props.selectionType !== 'counter' && { size: search.value.length + 2 }),
-                        ref: searchRef,
-                    }),
-                h$1('div', { class: 'form-multi-select-dropdown' }, [
-                    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,
-                    }),
-                ]),
-            ]),
+                        props.multiple &&
+                            props.cleaner &&
+                            selected.value.length > 0 &&
+                            !props.disabled &&
+                            h$1('button', {
+                                type: 'button',
+                                class: 'form-multi-select-selection-cleaner',
+                                onClick: () => handleDeselectAll(),
+                            }),
+                        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,
+                            }),
+                    ]),
+                    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,
+                        }),
+                    ]),
+                }),
+            }),
         ];
     },
 });
@@ -16572,53 +16930,56 @@ const CSidebarPlugin = {
     },
 };
 
-const CTable = defineComponent({
-    name: 'CTable',
+const CTableBody = defineComponent({
+    name: 'CTableBody',
     props: {
         /**
-         * Set the vertical aligment.
-         *
-         * @values 'bottom', 'middle', 'top'
-         */
-        align: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['bottom', 'middle', 'top'].includes(value);
-            },
-        },
-        /**
-         * Sets the border color of the component to one of CoreUI’s themed colors.
+         * Sets the color context of the component to one of CoreUI’s themed colors.
          *
-         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-         */
-        borderColor: Color,
-        /**
-         * Add borders on all sides of the table and cells.
+         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        bordered: {
-            type: Boolean,
-            required: false,
-        },
+        color: Color,
+    },
+    setup(props, { slots }) {
+        return () => h$1('tbody', {
+            class: [
+                {
+                    [`table-${props.color}`]: props.color,
+                },
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+const CTableCaption = defineComponent({
+    name: 'CTableCaption',
+    props: {},
+    setup(_, { slots }) {
+        return () => h$1('caption', {}, slots.default && slots.default());
+    },
+});
+
+const CTableDataCell = defineComponent({
+    name: 'CTableDataCell',
+    props: {
         /**
-         * Remove borders on all sides of the table and cells.
+         * Highlight a table row or cell.
          */
-        borderless: {
+        active: {
             type: Boolean,
             required: false,
         },
         /**
-         * Put the `<caption>` on the top of the table.
+         * Set the vertical aligment.
          *
-         * @values 'top'
+         * @values 'bottom', 'middle', 'top'
          */
-        caption: {
+        align: {
             type: String,
             default: undefined,
             required: false,
             validator: (value) => {
-                return value === 'top';
+                return ['bottom', 'middle', 'top'].includes(value);
             },
         },
         /**
@@ -16628,88 +16989,50 @@ const CTable = defineComponent({
          */
         color: Color,
         /**
-         * Enable a hover state on table rows within a `<CTableBody>`.
+         * @ignore
          */
-        hover: {
-            type: Boolean,
+        scope: {
+            type: String,
             required: false,
         },
+    },
+    setup(props, { slots }) {
+        return () => h$1(props.scope ? 'th' : 'td', {
+            class: [
+                {
+                    [`align-${props.align}`]: props.align,
+                    'table-active': props.active,
+                    [`table-${props.color}`]: props.color,
+                },
+            ],
+            ...(props.scope && { scope: props.scope }),
+        }, slots.default && slots.default());
+    },
+});
+
+const CTableFoot = defineComponent({
+    name: 'CTableFoot',
+    props: {
         /**
-         * Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to.
+         * Sets the color context of the component to one of CoreUI’s themed colors.
          *
-         * @values boolean, 'sm', 'md', 'lg', 'xl', 'xxl'
+         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        responsive: {
-            type: [Boolean, String],
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                if (typeof value == 'string') {
-                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
-                }
-                if (typeof value == 'boolean') {
-                    return true;
-                }
-                return false;
-            },
-        },
-        /**
-         * Make table more compact by cutting all cell `padding` in half.
-         */
-        small: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Add zebra-striping to any table row within the `<CTableBody>`.
-         */
-        striped: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Add zebra-striping to any table column.
-         *
-         * @since 4.4.0
-         */
-        stripedColumns: {
-            type: Boolean,
-            required: false,
-        },
+        color: Color,
     },
-    setup(props, { slots, attrs }) {
-        const table = () => h$1('table', {
+    setup(props, { slots }) {
+        return () => h$1('tfoot', {
             class: [
-                'table',
                 {
-                    [`align-${props.align}`]: props.align,
-                    [`caption-${props.caption}`]: props.caption,
-                    [`border-${props.borderColor}`]: props.borderColor,
-                    'table-bordered': props.bordered,
-                    'table-borderless': props.borderless,
                     [`table-${props.color}`]: props.color,
-                    'table-hover': props.hover,
-                    'table-sm': props.small,
-                    'table-striped': props.striped,
-                    'table-striped-columns': props.stripedColumns,
                 },
-                attrs.class,
             ],
         }, slots.default && slots.default());
-        return () => [
-            props.responsive
-                ? h$1('div', {
-                    class: typeof props.responsive === 'boolean'
-                        ? 'table-responsive'
-                        : `table-responsive-${props.responsive}`,
-                }, table())
-                : table(),
-        ];
     },
 });
 
-const CTableBody = defineComponent({
-    name: 'CTableBody',
+const CTableHead = defineComponent({
+    name: 'CTableHead',
     props: {
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -16719,7 +17042,7 @@ const CTableBody = defineComponent({
         color: Color,
     },
     setup(props, { slots }) {
-        return () => h$1('tbody', {
+        return () => h$1('thead', {
             class: [
                 {
                     [`table-${props.color}`]: props.color,
@@ -16729,19 +17052,32 @@ const CTableBody = defineComponent({
     },
 });
 
-const CTableCaption = defineComponent({
-    name: 'CTableCaption',
-    props: {},
-    setup(_, { slots }) {
-        return () => h$1('caption', {}, slots.default && slots.default());
+const CTableHeaderCell = defineComponent({
+    name: 'CTableHeaderCell',
+    props: {
+        /**
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         */
+        color: Color,
+    },
+    setup(props, { slots }) {
+        return () => h$1('th', {
+            class: [
+                {
+                    [`table-${props.color}`]: props.color,
+                },
+            ],
+        }, slots.default && slots.default());
     },
 });
 
-const CTableDataCell = defineComponent({
-    name: 'CTableDataCell',
+const CTableRow = defineComponent({
+    name: 'CTableRow',
     props: {
         /**
-         * Highlight a table row or cell.
+         * Highlight a table row or cell..
          */
         active: {
             type: Boolean,
@@ -16768,7 +17104,7 @@ const CTableDataCell = defineComponent({
         color: Color,
     },
     setup(props, { slots }) {
-        return () => h$1('td', {
+        return () => h$1('tr', {
             class: [
                 {
                     [`align-${props.align}`]: props.align,
@@ -16780,109 +17116,290 @@ const CTableDataCell = defineComponent({
     },
 });
 
-const CTableFoot = defineComponent({
-    name: 'CTableFoot',
+const pretifyName = (name) => {
+    return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+};
+const label = (column) => typeof column === 'object'
+    ? column.label !== undefined
+        ? column.label
+        : pretifyName(column.key)
+    : pretifyName(column);
+const CTable = defineComponent({
+    name: 'CTable',
     props: {
         /**
-         * Sets the color context of the component to one of CoreUI’s themed colors.
+         * Set the vertical aligment.
          *
-         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         * @values 'bottom', 'middle', 'top'
          */
-        color: Color,
-    },
-    setup(props, { slots }) {
-        return () => h$1('tfoot', {
-            class: [
-                {
-                    [`table-${props.color}`]: props.color,
-                },
-            ],
-        }, slots.default && slots.default());
-    },
-});
-
-const CTableHead = defineComponent({
-    name: 'CTableHead',
-    props: {
+        align: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['bottom', 'middle', 'top'].includes(value);
+            },
+        },
         /**
-         * Sets the color context of the component to one of CoreUI’s themed colors.
+         * Sets the border color of the component to one of CoreUI’s themed colors.
          *
-         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
-    },
-    setup(props, { slots }) {
-        return () => h$1('thead', {
-            class: [
-                {
-                    [`table-${props.color}`]: props.color,
-                },
-            ],
-        }, slots.default && slots.default());
-    },
-});
-
-const CTableHeaderCell = defineComponent({
-    name: 'CTableHeaderCell',
-    props: {
+        borderColor: Color,
+        /**
+         * Add borders on all sides of the table and cells.
+         */
+        bordered: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Remove borders on all sides of the table and cells.
+         */
+        borderless: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Put the `<caption>` on the top of the table.
+         *
+         * @values 'top' | string
+         */
+        caption: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Set the text of the table caption and the caption on the top of the table.
+         *
+         * @since 4.5.0
+         */
+        captionTop: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
+         *
+         * In columns prop each array item represents one column. Item might be specified in two ways:
+         * String: each item define column name equal to item value.
+         * Object: item is object with following keys available as column configuration:
+         * - key (required)(String) - define column name equal to item key.
+         * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+         * - _props (Object) - adds classes to all cels in column, ex. _props: { scope: 'col', className: 'custom-class' },
+         * - _style (Object) - adds styles to the column header (useful for defining widths)
+         *
+         * @since 4.5.0
+         */
+        columns: {
+            type: Array,
+            required: false,
+        },
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
         color: Color,
-    },
-    setup(props, { slots }) {
-        return () => h$1('th', {
-            class: [
-                {
-                    [`table-${props.color}`]: props.color,
-                },
-            ],
-        }, slots.default && slots.default());
-    },
-});
-
-const CTableRow = defineComponent({
-    name: 'CTableRow',
-    props: {
         /**
-         * Highlight a table row or cell..
+         * Array of objects or strings, where each element represents one cell in the table footer.
+         *
+         * Example items:
+         * ['FooterCell', 'FooterCell', 'FooterCell']
+         * or
+         * [{ label: 'FooterCell', _props: { color: 'success' }, ...]
+         *
+         * @since 4.5.0
          */
-        active: {
+        footer: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
+        /**
+         * Enable a hover state on table rows within a `<CTableBody>`.
+         */
+        hover: {
             type: Boolean,
             required: false,
         },
         /**
-         * Set the vertical aligment.
+         * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
          *
-         * @values 'bottom', 'middle', 'top'
+         * Example item:
+         * { name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}
+         *
+         * @since 4.5.0
          */
-        align: {
-            type: String,
+        items: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
+        responsive: {
+            type: [Boolean, String],
             default: undefined,
             required: false,
             validator: (value) => {
-                return ['bottom', 'middle', 'top'].includes(value);
+                if (typeof value == 'string') {
+                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
             },
         },
         /**
-         * Sets the color context of the component to one of CoreUI’s themed colors.
+         * Make table more compact by cutting all cell `padding` in half.
+         */
+        small: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Add zebra-striping to any table row within the `<CTableBody>`.
+         */
+        striped: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Add zebra-striping to any table column.
          *
-         * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
+         * @since 4.4.0
          */
-        color: Color,
+        stripedColumns: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Properties that will be passed to the table footer component.
+         *
+         * Properties to [CTableFoot](#ctablefoot) component.
+         * @since 4.5.0
+         */
+        tableFootProps: {
+            type: Object,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Properties that will be passed to the table head component.
+         *
+         *  Properties to [CTableHead](#ctablehead) component.
+         * @since 4.5.0
+         */
+        tableHeadProps: {
+            type: Object,
+            default: undefined,
+            required: false,
+        },
     },
-    setup(props, { slots }) {
-        return () => h$1('tr', {
+    setup(props, { slots, attrs }) {
+        const rawColumnNames = computed(() => props.columns
+            ? props.columns.map((column) => {
+                if (typeof column === 'object')
+                    return column.key;
+                else
+                    return column;
+            })
+            : Object.keys(props.items[0] || {}).filter((el) => el.charAt(0) !== '_'));
+        const table = () => h$1('table', {
             class: [
+                'table',
                 {
                     [`align-${props.align}`]: props.align,
-                    'table-active': props.active,
+                    [`caption-top`]: props.captionTop || props.caption === 'top',
+                    [`border-${props.borderColor}`]: props.borderColor,
+                    'table-bordered': props.bordered,
+                    'table-borderless': props.borderless,
                     [`table-${props.color}`]: props.color,
+                    'table-hover': props.hover,
+                    'table-sm': props.small,
+                    'table-striped': props.striped,
+                    'table-striped-columns': props.stripedColumns,
                 },
+                attrs.class,
             ],
-        }, slots.default && slots.default());
+        }, {
+            default: () => [
+                ((props.caption && props.caption !== 'top') || props.captionTop) &&
+                    h$1(CTableCaption, {}, {
+                        default: () => props.caption || props.captionTop,
+                    }),
+                props.columns &&
+                    h$1(CTableHead, {
+                        ...props.tableHeadProps,
+                    }, {
+                        default: () => h$1(CTableRow, {}, {
+                            default: () => [
+                                props.columns &&
+                                    props.columns.map((column) => h$1(CTableHeaderCell, {
+                                        ...(typeof column === 'object' &&
+                                            column._props && { ...column._props }),
+                                        ...(typeof column === 'object' &&
+                                            column._style && { style: { ...column._style } }),
+                                    }, {
+                                        default: () => label(column),
+                                    })),
+                            ],
+                        }),
+                    }),
+                props.items &&
+                    h$1(CTableBody, {}, {
+                        default: () => [
+                            props.items.map((item) => h$1(CTableRow, {
+                                ...(item._props && { ...item._props }),
+                            }, {
+                                default: () => [
+                                    rawColumnNames.value.map((colName) => item[colName] &&
+                                        h$1(CTableDataCell, {
+                                            ...(item._cellProps &&
+                                                item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                            ...(item._cellProps &&
+                                                item._cellProps[colName] && { ...item._cellProps[colName] }),
+                                        }, {
+                                            default: () => item[colName],
+                                        })),
+                                ],
+                            })),
+                        ],
+                    }),
+                slots.default && slots.default(),
+                props.footer &&
+                    h$1(CTableFoot, {
+                        ...props.tableFootProps,
+                    }, {
+                        default: () => h$1(CTableRow, {}, {
+                            default: () => [
+                                props.footer.map((item) => h$1(CTableDataCell, {
+                                    ...(typeof item === 'object' && item._props && { ...item._props }),
+                                }, {
+                                    default: () => (typeof item === 'object' ? item.label : item),
+                                })),
+                            ],
+                        }),
+                    }),
+            ],
+        });
+        return () => [
+            props.responsive
+                ? h$1('div', {
+                    class: typeof props.responsive === 'boolean'
+                        ? 'table-responsive'
+                        : `table-responsive-${props.responsive}`,
+                }, table())
+                : table(),
+        ];
     },
 });
 
@@ -17048,6 +17565,11 @@ const CSmartTableHead = defineComponent({
             default: () => [],
             required: false,
         },
+        items: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
         selectable: Boolean,
         selectAll: [Boolean, String],
         sorterState: {
@@ -17056,7 +17578,7 @@ const CSmartTableHead = defineComponent({
             require: false,
         },
     },
-    emits: ['filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
+    emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
     setup(props, { slots, emit }) {
         const handleSortClick = (key, index) => {
             emit('sortClick', key, index);
@@ -17103,6 +17625,9 @@ const CSmartTableHead = defineComponent({
             }
             return 0;
         };
+        const getValues = (items, key) => {
+            return items.map((a) => a[key]);
+        };
         const columnSorterIcon = (column) => {
             if (getColumnSorterState(key(column)) === 0) {
                 return h$1('span', { class: 'opacity-25 float-end me-1' }, slots.sortingIcon && slots.sortingIcon());
@@ -17115,6 +17640,9 @@ const CSmartTableHead = defineComponent({
             }
             return;
         };
+        const handleOnCustomFilterChange = (key, value) => {
+            emit('customFilterChange', key, value);
+        };
         const handleFilterInput = (key, value) => {
             emit('filterInput', key, value);
         };
@@ -17165,17 +17693,20 @@ const CSmartTableHead = defineComponent({
                                     ? true
                                     : typeof column.filter === 'undefined'
                                         ? true
-                                        : column.filter) &&
-                                    h$1(CFormInput, {
-                                        size: 'sm',
-                                        onInput: (event) => handleFilterInput(key(column), event.target.value),
-                                        onChange: (event) => handleFilterChange(key(column), event.target.value),
-                                        'aria-label': `column name: '${label(column)}' filter input`,
-                                        ...(props.columnFilterValue &&
-                                            props.columnFilterValue[key(column)] && {
-                                            value: props.columnFilterValue[key(column)],
-                                        }),
-                                    }),
+                                        : column.filter)
+                                    ? typeof column !== 'string' && typeof column.filter === 'function'
+                                        ? column.filter(getValues(props.items, key(column)), (value) => handleOnCustomFilterChange(key(column), value))
+                                        : h$1(CFormInput, {
+                                            size: 'sm',
+                                            onInput: (event) => handleFilterInput(key(column), event.target.value),
+                                            onChange: (event) => handleFilterChange(key(column), event.target.value),
+                                            'aria-label': `column name: '${label(column)}' filter input`,
+                                            ...(props.columnFilterValue &&
+                                                props.columnFilterValue[key(column)] && {
+                                                value: props.columnFilterValue[key(column)],
+                                            }),
+                                        })
+                                    : '',
                             })),
                         ],
                     }),
@@ -17296,7 +17827,7 @@ const CSmartTableItemsPerPageSelector = defineComponent({
                 h$1('div', {
                     class: 'col-auto',
                 }, h$1(CFormSelect, {
-                    defaultValue: props.itemsPerPage,
+                    value: props.itemsPerPage,
                     onChange: handleChange,
                 }, {
                     default: () => props.itemsPerPageOptions &&
@@ -17788,6 +18319,7 @@ const CSmartTable = defineComponent({
             }
         });
         // functions
+        const isLazy = (columnFilter) => columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
         const isSortable = (i) => {
             const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i]);
             let column;
@@ -17859,10 +18391,8 @@ const CSmartTable = defineComponent({
             });
         };
         const columnFilterChange = (colName, value, type) => {
-            const isLazy = props.columnFilter &&
-                typeof props.columnFilter === 'object' &&
-                props.columnFilter.lazy === true;
-            if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+            const _isLazy = isLazy(props.columnFilter);
+            if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
                 return;
             }
             activePage.value = 1;
@@ -17870,10 +18400,8 @@ const CSmartTable = defineComponent({
             emit('columnFilterChange', columnFilterState.value);
         };
         const tableFilterChange = (value, type) => {
-            const isLazy = props.columnFilter &&
-                typeof props.columnFilter === 'object' &&
-                props.columnFilter.lazy === true;
-            if ((isLazy && type === 'input') || (!isLazy && type === 'change')) {
+            const _isLazy = isLazy(props.columnFilter);
+            if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
                 return;
             }
             activePage.value = 1;
@@ -17898,7 +18426,7 @@ const CSmartTable = defineComponent({
             : genCols.value); //! || el
         const itemsDataColumns = computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
         // variables
-        const columnFiltered = () => {
+        const filteredColumns = computed(() => {
             let _items = items.value;
             if (props.columnFilter &&
                 typeof props.columnFilter === 'object' &&
@@ -17906,6 +18434,10 @@ const CSmartTable = defineComponent({
                 return _items;
             }
             Object.entries(columnFilterState.value).forEach(([key, value]) => {
+                if (value instanceof Function) {
+                    _items = _items.filter((item) => value(item[key]));
+                    return;
+                }
                 const columnFilter = String(value).toLowerCase();
                 if (columnFilter && itemsDataColumns.value.includes(key)) {
                     _items = _items.filter((item) => {
@@ -17914,9 +18446,9 @@ const CSmartTable = defineComponent({
                 }
             });
             return _items;
-        };
-        const tableFiltered = computed(() => {
-            let items = columnFiltered();
+        });
+        const filteredTable = computed(() => {
+            let items = filteredColumns.value;
             if (!tableFilterState.value ||
                 (props.tableFilter && typeof props.tableFilter === 'object' && props.tableFilter.external)) {
                 return items;
@@ -17936,12 +18468,12 @@ const CSmartTable = defineComponent({
                 (props.columnSorter &&
                     typeof props.columnSorter === 'object' &&
                     props.columnSorter.external)) {
-                return tableFiltered.value;
+                return filteredTable.value;
             }
             //if values in column are to be sorted by numeric value they all have to be type number
             // const flip = sorterState.asc ? 1 : -1
             const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
-            const sorted = tableFiltered.value.slice().sort((item, item2) => {
+            const sorted = filteredTable.value.slice().sort((item, item2) => {
                 const value = item[col];
                 const value2 = item2[col];
                 const a = typeof value === 'number' ? value : String(value).toLowerCase();
@@ -18004,9 +18536,11 @@ const CSmartTable = defineComponent({
                                     columnFilterValue: columnFilterState.value,
                                     columns: props.columns ? props.columns : rawColumnNames.value,
                                     columnSorter: props.columnSorter,
+                                    items: items.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
                                     sorterState: sorterState,
+                                    onCustomFilterChange: (key, value) => columnFilterChange(key, value),
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
                                     onFilterChange: (key, value) => columnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
@@ -18066,8 +18600,6 @@ const CSmartTable = defineComponent({
                                     columns: props.columns ? props.columns : rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
-                                    onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
-                                    onFilterChange: (key, value) => columnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
                                 }),
                         ],