@coreui/vue-pro 4.1.3 → 4.3.0-beta.0

package/dist/index.js

@@ -176,6 +176,7 @@ const CAccordionButton = vue.defineComponent({
         const toggleVisibility = vue.inject('toggleVisibility');
         const visible = vue.inject('visible');
         return () => vue.h('button', {
+            type: 'button',
             'aria-expanded': !visible.value,
             class: ['accordion-button', { ['collapsed']: !visible.value }],
             onClick: () => toggleVisibility(),
@@ -347,6 +348,9 @@ const CCloseButton = vue.defineComponent({
     ],
     setup(props, { emit }) {
         const handleClick = () => {
+            if (props.disabled) {
+                return;
+            }
             emit('click');
         };
         return () => vue.h('button', {
@@ -822,6 +826,20 @@ const CButton = vue.defineComponent({
                 return ['sm', 'lg'].includes(value);
             },
         },
+        /**
+         * Specifies the type of button. Always specify the type attribute for the `<button>` element.
+         * Different browsers may use different default types for the `<button>` element.
+         *
+         * @values 'button', 'submit', 'reset'
+         */
+        type: {
+            type: String,
+            default: 'button',
+            required: false,
+            validator: (value) => {
+                return ['button', 'submit', 'reset'].includes(value);
+            },
+        },
         /**
          * Set the button variant to an outlined button or a ghost button.
          *
@@ -836,7 +854,19 @@ const CButton = vue.defineComponent({
             },
         },
     },
-    setup(props, { slots }) {
+    emits: [
+        /**
+         * Event called when the user clicks on the button.
+         */
+        'click',
+    ],
+    setup(props, { emit, slots }) {
+        const handleClick = () => {
+            if (props.disabled) {
+                return;
+            }
+            emit('click');
+        };
         return () => vue.h(props.component, {
             class: [
                 'btn',
@@ -851,6 +881,8 @@ const CButton = vue.defineComponent({
             disabled: props.disabled && props.component !== 'a',
             ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
             ...(props.component === 'a' && props.href && { href: props.href }),
+            ...(props.component === 'button' && { type: props.type }),
+            onClick: handleClick,
         }, slots.default && slots.default());
     },
 });
@@ -909,6 +941,553 @@ const CButtonGroupPlugin = {
     },
 };
 
+const createGroupsInArray = (arr, numberOfGroups) => {
+    const perGroup = Math.ceil(arr.length / numberOfGroups);
+    return new Array(numberOfGroups)
+        .fill('')
+        .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup));
+};
+const getMonthsNames = (locale) => {
+    const months = [];
+    const d = new Date();
+    d.setDate(1);
+    for (let i = 0; i < 12; i++) {
+        d.setMonth(i);
+        months.push(d.toLocaleString(locale, { month: 'short' }));
+    }
+    return months;
+};
+const getYears = (year) => {
+    const years = [];
+    for (let _year = year - 6; _year < year + 6; _year++) {
+        years.push(_year);
+    }
+    return years;
+};
+const getLeadingDays = (year, month, firstDayOfWeek) => {
+    // 0: sunday
+    // 1: monday
+    const dates = [];
+    const d = new Date(year, month);
+    const y = d.getFullYear();
+    const m = d.getMonth();
+    const firstWeekday = new Date(y, m, 1).getDay();
+    let leadingDays = 6 - (6 - firstWeekday) - firstDayOfWeek;
+    if (firstDayOfWeek) {
+        leadingDays = leadingDays < 0 ? 7 + leadingDays : leadingDays;
+    }
+    for (let i = leadingDays * -1; i < 0; i++) {
+        dates.push({
+            date: new Date(y, m, i + 1),
+            month: 'previous',
+        });
+    }
+    return dates;
+};
+const getMonthDays = (year, month) => {
+    const dates = [];
+    const lastDay = new Date(year, month + 1, 0).getDate();
+    for (let i = 1; i <= lastDay; i++) {
+        dates.push({
+            date: new Date(year, month, i),
+            month: 'current',
+        });
+    }
+    return dates;
+};
+const getTrailingDays = (year, month, leadingDays, monthDays) => {
+    const dates = [];
+    const days = 42 - (leadingDays.length + monthDays.length);
+    for (let i = 1; i <= days; i++) {
+        dates.push({
+            date: new Date(year, month + 1, i),
+            month: 'next',
+        });
+    }
+    return dates;
+};
+const getMonthDetails = (year, month, firstDayOfWeek) => {
+    const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek);
+    const daysThisMonth = getMonthDays(year, month);
+    const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth);
+    const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth];
+    const weeks = [];
+    days.forEach((day, index) => {
+        if (index % 7 === 0 || weeks.length === 0) {
+            weeks.push([]);
+        }
+        weeks[weeks.length - 1].push(day);
+    });
+    return weeks;
+};
+const isDateDisabled = (date, min, max, dates) => {
+    let disabled;
+    if (dates) {
+        dates.forEach((_date) => {
+            if (Array.isArray(_date)) {
+                if (isDateInRange(date, _date[0], _date[1])) {
+                    disabled = true;
+                }
+            }
+            if (_date instanceof Date) {
+                if (isSameDateAs(date, _date)) {
+                    disabled = true;
+                }
+            }
+        });
+    }
+    if (min && date < min) {
+        disabled = true;
+    }
+    if (max && date > max) {
+        disabled = true;
+    }
+    return disabled;
+};
+const isDateInRange = (date, start, end) => {
+    return start && end && start <= date && date <= end;
+};
+const isDateSelected = (date, start, end) => {
+    return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date));
+};
+const isEndDate = (date, start, end) => {
+    return start && end && isSameDateAs(end, date) && start < end;
+};
+const isLastDayOfMonth = (date) => {
+    const test = new Date(date.getTime());
+    const month = test.getMonth();
+    test.setDate(test.getDate() + 1);
+    return test.getMonth() !== month;
+};
+const isSameDateAs = (date, date2) => {
+    return (date.getDate() == date2.getDate() &&
+        date.getMonth() == date2.getMonth() &&
+        date.getFullYear() == date2.getFullYear());
+};
+const isStartDate = (date, start, end) => {
+    return start && end && isSameDateAs(start, date) && start < end;
+};
+const isToday = (date) => {
+    const today = new Date();
+    return (date.getDate() == today.getDate() &&
+        date.getMonth() == today.getMonth() &&
+        date.getFullYear() == today.getFullYear());
+};
+const isValidDate = (date) => {
+    const d = new Date(date);
+    return d instanceof Date && d.getTime();
+};
+
+const CCalendar = vue.defineComponent({
+    name: 'CCalendar',
+    props: {
+        /**
+         * Default date of the component
+         */
+        calendarDate: {
+            type: [Date, String],
+        },
+        /**
+         * Specify the list of dates that cannot be selected.
+         */
+        disabledDates: {
+            type: Array,
+        },
+        /**
+         * Initial selected to date (range).
+         */
+        endDate: {
+            type: [Date, String],
+        },
+        /**
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         * - 7 - Sunday
+         */
+        firstDayOfWeek: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+         */
+        locale: {
+            type: String,
+            default: 'default',
+        },
+        /**
+         * Max selectable date.
+         */
+        maxDate: {
+            type: [Date, String],
+        },
+        /**
+         * Min selectable date.
+         */
+        minDate: {
+            type: [Date, String],
+        },
+        /**
+         * Show arrows navigation.
+         */
+        navigation: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Allow range selection.
+         */
+        range: Boolean,
+        /**
+         * Toggle select mode between start and end date.
+         */
+        selectEndDate: Boolean,
+        /**
+         * Initial selected date.
+         */
+        startDate: {
+            type: [Date, String],
+        },
+        /**
+         * Set length or format of day name.
+         *
+         * @type  number | 'long' | 'narrow' | 'short'
+         */
+        weekdayFormat: {
+            type: [Number, String],
+            default: 2,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['long', 'narrow', 'short'].includes(value);
+                }
+                if (typeof value === 'number') {
+                    return true;
+                }
+                return false;
+            },
+        },
+    },
+    emits: [
+        /**
+         * Callback fired when the user hovers over the calendar cell.
+         *
+         * @property {Date | null} date
+         */
+        'calendar-cell-hover',
+        /**
+         * Callback fired when the calendar date changed.
+         *
+         * @property {Date | null} date
+         */
+        'calendar-date-change',
+        /**
+         * Callback fired when the start date changed.
+         *
+         * @property {Date | null} date
+         */
+        'start-date-change',
+        /**
+         * Callback fired when the end date changed.
+         *
+         * @property {Date | null} date
+         */
+        'end-date-change',
+    ],
+    setup(props, { slots, emit }) {
+        const calendarDate = vue.ref(props.calendarDate ? new Date(props.calendarDate) : new Date());
+        const startDate = vue.ref(props.startDate ? new Date(props.startDate) : null);
+        const endDate = vue.ref(props.endDate ? new Date(props.endDate) : null);
+        const selectEndDate = vue.ref(props.selectEndDate);
+        const view = vue.ref('days');
+        const maxDate = props.maxDate ? new Date(props.maxDate) : null;
+        const minDate = props.minDate ? new Date(props.minDate) : null;
+        vue.watch(() => props.calendarDate, () => {
+            if (props.calendarDate)
+                calendarDate.value = new Date(props.calendarDate);
+        });
+        vue.watch(() => props.startDate, () => {
+            if (props.startDate === null) {
+                startDate.value = null;
+                return;
+            }
+            if (props.startDate) {
+                const d = new Date(props.startDate);
+                if (startDate.value === null) {
+                    startDate.value = d;
+                    return;
+                }
+                if (startDate.value && !isSameDateAs(d, startDate.value)) {
+                    startDate.value = d;
+                }
+            }
+        });
+        vue.watch(() => props.endDate, () => {
+            if (props.endDate === null) {
+                endDate.value = null;
+                return;
+            }
+            if (props.endDate) {
+                const d = new Date(props.endDate);
+                if (endDate.value === null) {
+                    endDate.value = d;
+                    return;
+                }
+                if (endDate.value && !isSameDateAs(d, endDate.value)) {
+                    endDate.value = d;
+                }
+            }
+        });
+        vue.watch(() => props.selectEndDate, () => {
+            selectEndDate.value = props.selectEndDate;
+        });
+        vue.watch(startDate, () => {
+            emit('start-date-change', startDate.value);
+        });
+        vue.watch(endDate, () => {
+            emit('end-date-change', endDate.value);
+        });
+        const setCalendarPage = (years, months = 0) => {
+            const year = calendarDate.value.getFullYear();
+            const month = calendarDate.value.getMonth();
+            const d = new Date(year, month, 1);
+            years && d.setFullYear(d.getFullYear() + years);
+            months && d.setMonth(d.getMonth() + months);
+            calendarDate.value = d;
+            emit('calendar-date-change', d);
+        };
+        const handleCellOnClick = (date) => {
+            if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+                return;
+            }
+            if (props.range) {
+                if (selectEndDate.value) {
+                    // If endDate > date
+                    if (startDate.value && startDate.value > date) {
+                        endDate.value = startDate.value;
+                        startDate.value = date;
+                    }
+                    else {
+                        endDate.value = date;
+                    }
+                    selectEndDate.value = false;
+                }
+                else {
+                    startDate.value = date;
+                    selectEndDate.value = true;
+                }
+            }
+            else {
+                startDate.value = date;
+            }
+        };
+        const handleCellMouseEnter = (date) => {
+            if (isDateDisabled(date, minDate, maxDate, props.disabledDates)) {
+                return;
+            }
+            emit('calendar-cell-hover', date);
+        };
+        const handleCellMouseLeave = () => {
+            emit('calendar-cell-hover', null);
+        };
+        const handleNavigationOnClick = (direction, double = false) => {
+            if (direction === 'prev') {
+                if (double) {
+                    setCalendarPage(view.value !== 'days' ? -10 : -1);
+                    return;
+                }
+                if (view.value !== 'days') {
+                    setCalendarPage(-1);
+                    return;
+                }
+                setCalendarPage(0, -1);
+                return;
+            }
+            if (direction === 'next') {
+                if (double) {
+                    setCalendarPage(view.value !== 'days' ? 10 : 1);
+                    return;
+                }
+                if (view.value !== 'days') {
+                    setCalendarPage(1);
+                    return;
+                }
+                setCalendarPage(0, 1);
+                return;
+            }
+        };
+        const Calendar = () => {
+            const monthDetails = getMonthDetails(calendarDate.value.getFullYear(), calendarDate.value.getMonth(), props.firstDayOfWeek);
+            const listOfMonths = createGroupsInArray(getMonthsNames(props.locale), 4);
+            const listOfYears = createGroupsInArray(getYears(calendarDate.value.getFullYear()), 4);
+            const weekDays = monthDetails[0];
+            return vue.h('table', {}, [
+                view.value === 'days' &&
+                    vue.h('thead', {}, vue.h('tr', {}, weekDays.map(({ date }) => {
+                        return vue.h('th', { class: 'calendar-cell' }, vue.h('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)));
+                    }))),
+                vue.h('tbody', {}, [
+                    view.value === 'days' &&
+                        monthDetails.map((week) => {
+                            return vue.h('tr', {}, week.map(({ date, month }) => {
+                                return vue.h('td', {
+                                    class: [
+                                        'calendar-cell',
+                                        {
+                                            today: isToday(date),
+                                            disabled: isDateDisabled(date, minDate, maxDate, props.disabledDates),
+                                            next: month === 'next',
+                                            previous: month === 'previous',
+                                            last: isLastDayOfMonth(date),
+                                            range: month === 'current' &&
+                                                isDateInRange(date, startDate.value, endDate.value),
+                                            selected: isDateSelected(date, startDate.value, endDate.value),
+                                            start: isStartDate(date, startDate.value, endDate.value),
+                                            end: isEndDate(date, startDate.value, endDate.value),
+                                        },
+                                    ],
+                                    title: date.toLocaleDateString(props.locale),
+                                    onClick: () => handleCellOnClick(date),
+                                    onmouseenter: () => handleCellMouseEnter(date),
+                                    onmouseleave: () => handleCellMouseLeave(),
+                                }, vue.h('div', {
+                                    class: 'calendar-cell-inner',
+                                }, date.toLocaleDateString(props.locale, { day: 'numeric' })));
+                            }));
+                        }),
+                    view.value === 'months' &&
+                        listOfMonths.map((row, index) => {
+                            return vue.h('tr', {}, row.map((month, idx) => {
+                                return vue.h('td', {
+                                    class: 'calendar-cell month',
+                                    onClick: () => {
+                                        setCalendarPage(0, index * 3 + idx);
+                                        view.value = 'days';
+                                    },
+                                }, vue.h('div', { class: 'calendar-cell-inner' }, month));
+                            }));
+                        }),
+                    view.value === 'years' &&
+                        listOfYears.map((row) => {
+                            return vue.h('tr', {}, row.map((year) => {
+                                return vue.h('td', {
+                                    class: 'calendar-cell year',
+                                    onClick: () => {
+                                        calendarDate.value = new Date(year, calendarDate.value.getMonth(), calendarDate.value.getDate());
+                                        view.value = 'months';
+                                    },
+                                }, vue.h('div', { class: 'calendar-cell-inner' }, year));
+                            }));
+                        }),
+                ]),
+            ]);
+        };
+        const Navigation = () => {
+            return vue.h('div', { class: 'calendar-nav' }, [
+                props.navigation &&
+                    vue.h('div', {
+                        class: 'calendar-nav-prev',
+                    }, [
+                        vue.h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => handleNavigationOnClick('prev', true),
+                        }, {
+                            /**
+                             * @slot Location for double previous icon.
+                             */
+                            default: () => slots.navPrevDoubleIcon
+                                ? slots.navPrevDoubleIcon()
+                                : vue.h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-prev' }),
+                        }),
+                        view.value === 'days' &&
+                            vue.h(CButton, {
+                                color: 'transparent',
+                                size: 'sm',
+                                onClick: () => handleNavigationOnClick('prev'),
+                            }, {
+                                /**
+                                 * @slot Location for previous icon.
+                                 */
+                                default: () => slots.navPrevIcon
+                                    ? slots.navPrevIcon()
+                                    : vue.h('span', { class: 'calendar-nav-icon calendar-nav-icon-prev' }),
+                            }),
+                    ]),
+                vue.h('div', {
+                    class: 'calendar-nav-date',
+                }, [
+                    view.value === 'days' &&
+                        vue.h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => {
+                                if (props.navigation)
+                                    view.value = 'months';
+                            },
+                        }, () => calendarDate.value.toLocaleDateString(props.locale, { month: 'long' })),
+                    vue.h(CButton, {
+                        color: 'transparent',
+                        size: 'sm',
+                        onClick: () => {
+                            if (props.navigation)
+                                view.value = 'years';
+                        },
+                    }, () => calendarDate.value.toLocaleDateString(props.locale, { year: 'numeric' })),
+                ]),
+                props.navigation &&
+                    vue.h('div', {
+                        class: 'calendar-nav-next',
+                    }, [
+                        view.value === 'days' &&
+                            vue.h(CButton, {
+                                color: 'transparent',
+                                size: 'sm',
+                                onClick: () => handleNavigationOnClick('next'),
+                            }, {
+                                /**
+                                 * @slot Location for next icon.
+                                 */
+                                default: () => slots.navNextIcon
+                                    ? slots.navNextIcon()
+                                    : vue.h('span', { class: 'calendar-nav-icon calendar-nav-icon-next' }),
+                            }),
+                        vue.h(CButton, {
+                            color: 'transparent',
+                            size: 'sm',
+                            onClick: () => handleNavigationOnClick('next', true),
+                        }, {
+                            /**
+                             * @slot Location for double next icon.
+                             */
+                            default: () => slots.navNextDoubleIcon
+                                ? slots.navNextDoubleIcon()
+                                : vue.h('span', { class: 'calendar-nav-icon calendar-nav-icon-double-next' }),
+                        }),
+                    ]),
+            ]);
+        };
+        return () => vue.h('div', { class: ['calendar', view.value] }, [vue.h(Navigation), vue.h(Calendar)]);
+    },
+});
+
+const CCalendarPlugin = {
+    install: (app) => {
+        app.component(CCalendar.name, CCalendar);
+    },
+};
+
 const CCallout = vue.defineComponent({
     name: 'CCallout',
     props: {
@@ -1509,32 +2088,928 @@ const CCollapsePlugin = {
     },
 };
 
-var top = 'top';
-var bottom = 'bottom';
-var right = 'right';
-var left = 'left';
-var auto = 'auto';
-var basePlacements = [top, bottom, right, left];
-var start = 'start';
-var end = 'end';
-var clippingParents = 'clippingParents';
-var viewport = 'viewport';
-var popper = 'popper';
-var reference = 'reference';
-var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
-  return acc.concat([placement + "-" + start, placement + "-" + end]);
-}, []);
-var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
-  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
-}, []); // modifiers that need to read the DOM
+const CForm = vue.defineComponent({
+    name: 'CForm',
+    props: {
+        /**
+         * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
+         */
+        validated: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h('form', { class: [{ ['was-validated']: props.validated }] }, slots.default && slots.default());
+    },
+});
 
-var beforeRead = 'beforeRead';
-var read = 'read';
-var afterRead = 'afterRead'; // pure-logic modifiers
+/*!
+ * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ */
 
-var beforeMain = 'beforeMain';
-var main = 'main';
-var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+function isObject(o) {
+  return Object.prototype.toString.call(o) === '[object Object]';
+}
+
+function isPlainObject(o) {
+  var ctor,prot;
+
+  if (isObject(o) === false) return false;
+
+  // If has modified constructor
+  ctor = o.constructor;
+  if (ctor === undefined) return true;
+
+  // If has modified prototype
+  prot = ctor.prototype;
+  if (isObject(prot) === false) return false;
+
+  // If constructor does not have an Object-specific method
+  if (prot.hasOwnProperty('isPrototypeOf') === false) {
+    return false;
+  }
+
+  // Most likely a plain Object
+  return true;
+}
+
+function t(){return t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},t.apply(this,arguments)}function r(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}const n={silent:!1,logLevel:"warn"},i=["validator"],o=Object.prototype,a=o.toString,s=o.hasOwnProperty,u=/^\s*function (\w+)/;function l(e){var t;const r=null!==(t=null==e?void 0:e.type)&&void 0!==t?t:e;if(r){const e=r.toString().match(u);return e?e[1]:""}return ""}const c=isPlainObject,f=e=>e;let d=f;if("production"!==process.env.NODE_ENV){const e="undefined"!=typeof console;d=e?function(e,t=n.logLevel){!1===n.silent&&console[t](`[VueTypes warn]: ${e}`);}:f;}const p=(e,t)=>s.call(e,t),y=Number.isInteger||function(e){return "number"==typeof e&&isFinite(e)&&Math.floor(e)===e},v=Array.isArray||function(e){return "[object Array]"===a.call(e)},h=e=>"[object Function]"===a.call(e),b=e=>c(e)&&p(e,"_vueTypes_name"),g=e=>c(e)&&(p(e,"type")||["_vueTypes_name","validator","default","required"].some(t=>p(e,t)));function O(e,t){return Object.defineProperty(e.bind(t),"__original",{value:e})}function m(e,t,r=!1){let n,i=!0,o="";n=c(e)?e:{type:e};const a=b(n)?n._vueTypes_name+" - ":"";if(g(n)&&null!==n.type){if(void 0===n.type||!0===n.type)return i;if(!n.required&&void 0===t)return i;v(n.type)?(i=n.type.some(e=>!0===m(e,t,!0)),o=n.type.map(e=>l(e)).join(" or ")):(o=l(n),i="Array"===o?v(t):"Object"===o?c(t):"String"===o||"Number"===o||"Boolean"===o||"Function"===o?function(e){if(null==e)return "";const t=e.constructor.toString().match(u);return t?t[1]:""}(t)===o:t instanceof n.type);}if(!i){const e=`${a}value "${t}" should be of type "${o}"`;return !1===r?(d(e),!1):e}if(p(n,"validator")&&h(n.validator)){const e=d,o=[];if(d=e=>{o.push(e);},i=n.validator(t),d=e,!i){const e=(o.length>1?"* ":"")+o.join("\n* ");return o.length=0,!1===r?(d(e),i):e}}return i}function j(e,t){const r=Object.defineProperties(t,{_vueTypes_name:{value:e,writable:!0},isRequired:{get(){return this.required=!0,this}},def:{value(e){return void 0===e?(p(this,"default")&&delete this.default,this):h(e)||!0===m(this,e,!0)?(this.default=v(e)?()=>[...e]:c(e)?()=>Object.assign({},e):e,this):(d(`${this._vueTypes_name} - invalid default value: "${e}"`),this)}}}),{validator:n}=r;return h(n)&&(r.validator=O(n,r)),r}function _(e,t){const r=j(e,t);return Object.defineProperty(r,"validate",{value(e){return h(this.validator)&&d(`${this._vueTypes_name} - calling .validate() will overwrite the current custom validator function. Validator info:\n${JSON.stringify(this)}`),this.validator=O(e,this),this}})}function T(e,t,n){const o=function(e){const t={};return Object.getOwnPropertyNames(e).forEach(r=>{t[r]=Object.getOwnPropertyDescriptor(e,r);}),Object.defineProperties({},t)}(t);if(o._vueTypes_name=e,!c(n))return o;const{validator:a}=n,s=r(n,i);if(h(a)){let{validator:e}=o;e&&(e=null!==(l=(u=e).__original)&&void 0!==l?l:u),o.validator=O(e?function(t){return e.call(this,t)&&a.call(this,t)}:a,o);}var u,l;return Object.assign(o,s)}function $(e){return e.replace(/^(?!\s*$)/gm,"  ")}const w=()=>_("any",{}),P=()=>_("function",{type:Function}),x=()=>_("boolean",{type:Boolean}),E=()=>_("string",{type:String}),N=()=>_("number",{type:Number}),q=()=>_("array",{type:Array}),A=()=>_("object",{type:Object}),V=()=>j("integer",{type:Number,validator:e=>y(e)}),S=()=>j("symbol",{validator:e=>"symbol"==typeof e});function k(e,t="custom validation failed"){if("function"!=typeof e)throw new TypeError("[VueTypes error]: You must provide a function as argument");return j(e.name||"<<anonymous function>>",{type:null,validator(r){const n=e(r);return n||d(`${this._vueTypes_name} - ${t}`),n}})}function D(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument.");const t=`oneOf - value should be one of "${e.join('", "')}".`,r=e.reduce((e,t)=>{if(null!=t){const r=t.constructor;-1===e.indexOf(r)&&e.push(r);}return e},[]);return j("oneOf",{type:r.length>0?r:void 0,validator(r){const n=-1!==e.indexOf(r);return n||d(t),n}})}function L(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument");let t=!1,r=[];for(let n=0;n<e.length;n+=1){const i=e[n];if(g(i)){if(b(i)&&"oneOf"===i._vueTypes_name&&i.type){r=r.concat(i.type);continue}if(h(i.validator)&&(t=!0),!0===i.type||!i.type){d('oneOfType - invalid usage of "true" or "null" as types.');continue}r=r.concat(i.type);}else r.push(i);}r=r.filter((e,t)=>r.indexOf(e)===t);const n=r.length>0?r:null;return j("oneOfType",t?{type:n,validator(t){const r=[],n=e.some(e=>{const n=m(b(e)&&"oneOf"===e._vueTypes_name?e.type||null:e,t,!0);return "string"==typeof n&&r.push(n),!0===n});return n||d(`oneOfType - provided value does not match any of the ${r.length} passed-in validators:\n${$(r.join("\n"))}`),n}}:{type:n})}function F(e){return j("arrayOf",{type:Array,validator(t){let r="";const n=t.every(t=>(r=m(e,t,!0),!0===r));return n||d(`arrayOf - value validation error:\n${$(r)}`),n}})}function Y(e){return j("instanceOf",{type:e})}function B(e){return j("objectOf",{type:Object,validator(t){let r="";const n=Object.keys(t).every(n=>(r=m(e,t[n],!0),!0===r));return n||d(`objectOf - value validation error:\n${$(r)}`),n}})}function I(e){const t=Object.keys(e),r=t.filter(t=>{var r;return !(null===(r=e[t])||void 0===r||!r.required)}),n=j("shape",{type:Object,validator(n){if(!c(n))return !1;const i=Object.keys(n);if(r.length>0&&r.some(e=>-1===i.indexOf(e))){const e=r.filter(e=>-1===i.indexOf(e));return d(1===e.length?`shape - required property "${e[0]}" is not defined.`:`shape - required properties "${e.join('", "')}" are not defined.`),!1}return i.every(r=>{if(-1===t.indexOf(r))return !0===this._vueTypes_isLoose||(d(`shape - shape definition does not include a "${r}" property. Allowed keys: "${t.join('", "')}".`),!1);const i=m(e[r],n[r],!0);return "string"==typeof i&&d(`shape - "${r}" property validation error:\n ${$(i)}`),!0===i})}});return Object.defineProperty(n,"_vueTypes_isLoose",{writable:!0,value:!1}),Object.defineProperty(n,"loose",{get(){return this._vueTypes_isLoose=!0,this}}),n}const J=["name","validate","getter"],M=/*#__PURE__*/(()=>{var e,t;return t=e=class{static get any(){return w()}static get func(){return P().def(this.defaults.func)}static get bool(){return x().def(this.defaults.bool)}static get string(){return E().def(this.defaults.string)}static get number(){return N().def(this.defaults.number)}static get array(){return q().def(this.defaults.array)}static get object(){return A().def(this.defaults.object)}static get integer(){return V().def(this.defaults.integer)}static get symbol(){return S()}static extend(e){if(v(e))return e.forEach(e=>this.extend(e)),this;const{name:t,validate:n=!1,getter:i=!1}=e,o=r(e,J);if(p(this,t))throw new TypeError(`[VueTypes error]: Type "${t}" already defined`);const{type:a}=o;if(b(a))return delete o.type,Object.defineProperty(this,t,i?{get:()=>T(t,a,o)}:{value(...e){const r=T(t,a,o);return r.validator&&(r.validator=r.validator.bind(r,...e)),r}});let s;return s=i?{get(){const e=Object.assign({},o);return n?_(t,e):j(t,e)},enumerable:!0}:{value(...e){const r=Object.assign({},o);let i;return i=n?_(t,r):j(t,r),r.validator&&(i.validator=r.validator.bind(i,...e)),i},enumerable:!0},Object.defineProperty(this,t,s)}},e.defaults={},e.sensibleDefaults=void 0,e.config=n,e.custom=k,e.oneOf=D,e.instanceOf=Y,e.oneOfType=L,e.arrayOf=F,e.objectOf=B,e.shape=I,e.utils={validate:(e,t)=>!0===m(t,e,!0),toType:(e,t,r=!1)=>r?_(e,t):j(e,t)},t})();function R(e={func:()=>{},bool:!0,string:"",number:0,array:()=>[],object:()=>({}),integer:0}){var r,n;return n=r=class extends M{static get sensibleDefaults(){return t({},this.defaults)}static set sensibleDefaults(r){this.defaults=!1!==r?t({},!0!==r?r:e):{};}},r.defaults=t({},e),n}class z extends(R()){}
+
+const CFormLabel = vue.defineComponent({
+    name: 'CFormLabel',
+    props: {
+        /**
+         * A string of all className you want to be applied to the component, and override standard className value.
+         */
+        customClassName: {
+            type: [Array, String],
+            default: undefined,
+            required: false,
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h('label', {
+            class: props.customClassName ? props.customClassName : 'form-label',
+        }, slots.default && slots.default());
+    },
+});
+
+const CFormCheck = vue.defineComponent({
+    name: 'CFormCheck',
+    inheritAttrs: false,
+    props: {
+        /**
+         * Create button-like checkboxes and radio buttons.
+         */
+        button: I({
+            /**
+             * Sets the color context of the component to one of CoreUI’s themed colors.
+             *
+             * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+             */
+            color: Color,
+            /**
+             * Select the shape of the component.
+             *
+             * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
+             */
+            shape: Shape,
+            /**
+             * Size the component small or large.
+             *
+             * @values 'sm' | 'lg'
+             */
+            size: {
+                type: String,
+                default: undefined,
+                required: false,
+                validator: (value) => {
+                    return ['sm', 'lg'].includes(value);
+                },
+            },
+            /**
+             * Set the button variant to an outlined button or a ghost button.
+             */
+            variant: {
+                type: String,
+                default: undefined,
+                required: false,
+                validator: (value) => {
+                    return ['outline', 'ghost'].includes(value);
+                },
+            },
+        }),
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         */
+        id: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Input Checkbox indeterminate Property
+         */
+        indeterminate: Boolean,
+        /**
+         * Group checkboxes or radios on the same horizontal row by adding.
+         */
+        inline: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * The element represents a caption for a component.
+         */
+        label: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [Boolean, String],
+            value: undefined,
+            required: false,
+        },
+        /**
+         * Specifies the type of component.
+         *
+         * @values 'checkbox', 'radio'
+         */
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when the checked value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.checked);
+        };
+        const formControl = () => {
+            return vue.h('input', {
+                ...attrs,
+                checked: props.modelValue,
+                class: [
+                    props.button ? 'btn-check' : 'form-check-input',
+                    {
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
+                    },
+                ],
+                id: props.id,
+                indeterminate: props.indeterminate,
+                onChange: (event) => handleChange(event),
+                type: props.type,
+            });
+        };
+        const formLabel = () => {
+            return vue.h(CFormLabel, {
+                customClassName: props.button
+                    ? [
+                        'btn',
+                        props.button.variant
+                            ? `btn-${props.button.variant}-${props.button.color}`
+                            : `btn-${props.button.color}`,
+                        {
+                            [`btn-${props.button.size}`]: props.button.size,
+                        },
+                        `${props.button.shape}`,
+                    ]
+                    : 'form-check-label',
+                ...(props.id && { for: props.id }),
+            }, {
+                default: () => (slots.label && slots.label()) || props.label,
+            });
+        };
+        return () => props.button
+            ? [formControl(), (slots.label || props.label) && formLabel()]
+            : props.label
+                ? vue.h('div', {
+                    class: [
+                        'form-check',
+                        {
+                            'form-check-inline': props.inline,
+                            'is-invalid': props.invalid,
+                            'is-valid': props.valid,
+                        },
+                        attrs.class,
+                    ],
+                }, [formControl(), props.label && formLabel()])
+                : formControl();
+    },
+});
+
+const CFormFeedback = vue.defineComponent({
+    name: 'CFormFeedback',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            required: false,
+            default: 'div',
+        },
+        /**
+         * Method called immediately after the `value` prop changes.
+         */
+        invalid: Boolean,
+        /**
+         * If your form layout allows it, you can display validation feedback in a styled tooltip.
+         */
+        tooltip: Boolean,
+        /**
+         * Set component validation state to valid.
+         */
+        valid: Boolean,
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, {
+            class: [
+                {
+                    [`invalid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.invalid,
+                    [`valid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.valid,
+                },
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+const CFormFloating = vue.defineComponent({
+    name: 'CFormFloating',
+    setup(_, { slots }) {
+        return () => vue.h('div', {
+            class: 'form-floating',
+        }, slots.default && slots.default());
+    },
+});
+
+const CFormInput = vue.defineComponent({
+    name: 'CFormInput',
+    props: {
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
+         */
+        plainText: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Toggle the readonly state for the component.
+         */
+        readonly: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm' | 'lg'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            require: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Specifies the type of component.
+         *
+         * @values 'color' | 'file' | 'text' | string
+         */
+        type: {
+            type: String,
+            default: 'text',
+            require: false,
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when the element loses focus, after the content has been changed.
+         */
+        'change',
+        /**
+         * Event occurs immediately after the value of a component has changed.
+         */
+        'input',
+        /**
+         * Emit the new value whenever there’s an input or change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.value);
+        };
+        const handleInput = (event) => {
+            const target = event.target;
+            emit('input', event);
+            emit('update:modelValue', target.value);
+        };
+        return () => vue.h('input', {
+            class: [
+                props.plainText ? 'form-control-plaintext' : 'form-control',
+                {
+                    'form-control-color': props.type === 'color',
+                    [`form-control-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                },
+            ],
+            disabled: props.disabled,
+            onChange: (event) => handleChange(event),
+            onInput: (event) => handleInput(event),
+            readonly: props.readonly,
+            type: props.type,
+            value: props.modelValue,
+        }, slots.default && slots.default());
+    },
+});
+
+const CFormRange = vue.defineComponent({
+    name: 'CFormRange',
+    props: {
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Specifies the maximum value for the component.
+         */
+        max: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Specifies the minimum value for the component.
+         */
+        min: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            value: undefined,
+            required: false,
+        },
+        /**
+         * Toggle the readonly state for the component.
+         */
+        readonly: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Specifies the interval between legal numbers in the component.
+         */
+        steps: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * The `value` attribute of component.
+         *
+         * @controllable onChange
+         * */
+        value: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when the value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.value);
+        };
+        return () => vue.h('input', {
+            class: 'form-range',
+            disabled: props.disabled,
+            max: props.max,
+            min: props.min,
+            onChange: (event) => handleChange(event),
+            steps: props.steps,
+            readonly: props.readonly,
+            type: 'range',
+            value: props.modelValue,
+        }, slots.default && slots.default());
+    },
+});
+
+const CFormSelect = vue.defineComponent({
+    name: 'CFormSelect',
+    props: {
+        /**
+         * Specifies the number of visible options in a drop-down list.
+         */
+        htmlSize: {
+            type: Number,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [String, Array],
+            default: undefined,
+            require: false,
+        },
+        multiple: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Options list of the select component. Available keys: `label`, `value`, `disabled`.
+         * Examples:
+         * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
+         * - `:options="['js', 'html']"`
+         */
+        options: {
+            type: Array,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm' | 'lg'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            require: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when when a user changes the selected option of a `<select>` element.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleChange = (event) => {
+            const target = event.target;
+            const selected = Array.from(target.options)
+                .filter((option) => option.selected)
+                .map((option) => option.value);
+            emit('change', event);
+            emit('update:modelValue', target.multiple ? selected : selected[0]);
+        };
+        return () => vue.h('select', {
+            class: [
+                'form-select',
+                {
+                    [`form-select-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                },
+            ],
+            multiple: props.multiple,
+            onChange: (event) => handleChange(event),
+            size: props.htmlSize,
+            ...(props.modelValue && !props.multiple && { value: props.modelValue }),
+        }, props.options
+            ? props.options.map((option) => {
+                return vue.h('option', {
+                    ...(typeof option === 'object' && {
+                        ...(option.disabled && { disabled: option.disabled }),
+                        ...(option.selected && { selected: option.selected }),
+                        ...(option.value && {
+                            value: option.value,
+                            ...(props.modelValue &&
+                                props.multiple &&
+                                props.modelValue.includes(option.value) && { selected: true }),
+                        }),
+                    }),
+                }, typeof option === 'string' ? option : option.label);
+            })
+            : slots.default && slots.default());
+    },
+});
+
+const CFormSwitch = vue.defineComponent({
+    name: 'CFormSwitch',
+    inheritAttrs: false,
+    props: {
+        /**
+         * The id global attribute defines an identifier (ID) that must be unique in the whole document
+         */
+        id: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * The element represents a caption for a component.
+         */
+        label: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: [Boolean, String],
+            value: undefined,
+            required: false,
+        },
+        /**
+         * Size the component large or extra large. Works only with `switch`.
+         *
+         * @values 'lg' | 'xl'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['lg', 'xl'].includes(value);
+            },
+        },
+        /**
+         * Specifies the type of component.
+         *
+         * @values 'checkbox', 'radio'
+         */
+        type: {
+            type: String,
+            default: 'checkbox',
+            required: false,
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when the checked value has been changed.
+         */
+        'change',
+        /**
+         * Emit the new value whenever there’s a change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { attrs, emit }) {
+        const checked = vue.ref(attrs.checked);
+        vue.watch(() => props.modelValue, () => {
+            if (typeof props.modelValue === 'boolean')
+                checked.value = props.modelValue;
+        });
+        const handleChange = (event) => {
+            const target = event.target;
+            emit('change', event);
+            emit('update:modelValue', target.checked);
+        };
+        return () => vue.h('div', {
+            class: [
+                'form-check form-switch',
+                {
+                    [`form-switch-${props.size}`]: props.size,
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                },
+            ],
+        }, [
+            vue.h('input', {
+                ...attrs,
+                checked: checked.value,
+                class: [
+                    'form-check-input',
+                    {
+                        'is-invalid': props.invalid,
+                        'is-valid': props.valid,
+                    },
+                ],
+                id: props.id,
+                onChange: (event) => handleChange(event),
+                type: props.type,
+            }),
+            props.label &&
+                vue.h(CFormLabel, {
+                    ...(props.id && { for: props.id }),
+                    class: 'form-check-label',
+                }, {
+                    default: () => props.label,
+                }),
+        ]);
+    },
+});
+
+const CFormText = vue.defineComponent({
+    name: 'CFormText',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            required: false,
+            default: 'div',
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, { class: 'form-text' }, slots.default && slots.default());
+    },
+});
+
+const CFormTextarea = vue.defineComponent({
+    name: 'CFormTextarea',
+    props: {
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Set component validation state to invalid.
+         */
+        invalid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * The default name for a value passed using v-model.
+         */
+        modelValue: {
+            type: String,
+            default: undefined,
+            require: false,
+        },
+        /**
+         * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
+         */
+        plainText: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Toggle the readonly state for the component.
+         */
+        readonly: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Set component validation state to valid.
+         */
+        valid: {
+            type: Boolean,
+            required: false,
+        },
+    },
+    emits: [
+        /**
+         * Event occurs when the element loses focus, after the content has been changed.
+         */
+        'change',
+        /**
+         * Event occurs immediately after the value of a component has changed.
+         */
+        'input',
+        /**
+         * Emit the new value whenever there’s an input or change event.
+         */
+        'update:modelValue',
+    ],
+    setup(props, { emit, slots }) {
+        const handleInput = (event) => {
+            const target = event.target;
+            emit('input', event);
+            emit('update:modelValue', target.value);
+        };
+        return () => vue.h('textarea', {
+            disabled: props.disabled,
+            readonly: props.readonly,
+            class: [
+                props.plainText ? 'form-control-plaintext' : 'form-control',
+                {
+                    'is-invalid': props.invalid,
+                    'is-valid': props.valid,
+                },
+            ],
+            onInput: (event) => handleInput(event),
+            value: props.modelValue,
+        }, slots.default && slots.default());
+    },
+});
+
+const CInputGroup = vue.defineComponent({
+    name: 'CInputGroup',
+    props: {
+        /**
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h('div', {
+            class: [
+                'input-group',
+                {
+                    [`input-group-${props.size}`]: props.size,
+                },
+            ],
+        }, slots.default && slots.default());
+    },
+});
+
+const CInputGroupText = vue.defineComponent({
+    name: 'CInputGroupText',
+    props: {
+        /**
+         * Component used for the root node. Either a string to use a HTML element or a component.
+         */
+        component: {
+            type: String,
+            required: false,
+            default: 'span',
+        },
+    },
+    setup(props, { slots }) {
+        return () => vue.h(props.component, { class: 'input-group-text' }, slots.default && slots.default());
+    },
+});
+
+const CFormPlugin = {
+    install: (app) => {
+        app.component(CForm.name, CForm);
+        app.component(CFormCheck.name, CFormCheck);
+        // app.component(CFormControl.name, CFormControl)
+        app.component(CFormFeedback.name, CFormFeedback);
+        app.component(CFormFloating.name, CFormFloating);
+        app.component(CFormInput.name, CFormInput);
+        app.component(CFormLabel.name, CFormLabel);
+        app.component(CFormRange.name, CFormRange);
+        app.component(CFormSelect.name, CFormSelect);
+        app.component(CFormSwitch.name, CFormSwitch);
+        app.component(CFormText.name, CFormText);
+        app.component(CFormTextarea.name, CFormTextarea);
+        app.component(CInputGroup.name, CInputGroup);
+        app.component(CInputGroupText.name, CInputGroupText);
+    },
+};
+
+var top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var auto = 'auto';
+var basePlacements = [top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) {
+  return acc.concat([placement + "-" + start, placement + "-" + end]);
+}, []);
+var placements = /*#__PURE__*/[].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+  return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+}, []); // modifiers that need to read the DOM
+
+var beforeRead = 'beforeRead';
+var read = 'read';
+var afterRead = 'afterRead'; // pure-logic modifiers
+
+var beforeMain = 'beforeMain';
+var main = 'main';
+var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
 
 var beforeWrite = 'beforeWrite';
 var write = 'write';
@@ -1809,6 +3284,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -2041,7 +3520,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -2049,7 +3528,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -3508,6 +4987,20 @@ const CDropdown = vue.defineComponent({
                 }
             },
         },
+        /**
+         * Configure the auto close behavior of the dropdown:
+         * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+         * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+         * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+         * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+         */
+        autoClose: {
+            type: [Boolean, String],
+            default: true,
+            validator: (value) => {
+                return typeof value === 'boolean' || ['inside', 'outside'].includes(value);
+            },
+        },
         /**
          * Sets a darker color scheme to match a dark navbar.
          */
@@ -3593,21 +5086,23 @@ const CDropdown = vue.defineComponent({
         'show',
     ],
     setup(props, { slots, emit }) {
-        const dropdownRef = vue.ref();
+        const dropdownToggleRef = vue.ref();
         const dropdownMenuRef = vue.ref();
         const placement = vue.ref(props.placement);
         const popper = vue.ref();
-        const config = vue.reactive({
+        const visible = vue.ref(props.visible);
+        vue.watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        vue.provide('config', {
+            autoClose: props.autoClose,
             alignment: props.alignment,
             dark: props.dark,
             popper: props.popper,
-            visible: props.visible,
         });
-        const { visible } = vue.toRefs(config);
-        vue.provide('config', config);
         vue.provide('variant', props.variant);
         vue.provide('visible', visible);
-        vue.provide('dropdownRef', dropdownRef);
+        vue.provide('dropdownToggleRef', dropdownToggleRef);
         vue.provide('dropdownMenuRef', dropdownMenuRef);
         if (props.direction === 'dropup') {
             placement.value = 'top-start';
@@ -3626,8 +5121,8 @@ const CDropdown = vue.defineComponent({
             if (typeof props.alignment === 'object') {
                 return;
             }
-            if (dropdownRef.value) {
-                popper.value = createPopper(dropdownRef.value, dropdownMenuRef.value, {
+            if (dropdownToggleRef.value) {
+                popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
                     placement: placement.value,
                 });
             }
@@ -3638,40 +5133,28 @@ const CDropdown = vue.defineComponent({
             }
             popper.value = undefined;
         };
-        const toggleMenu = function () {
-            if (props.disabled === false) {
-                if (visible.value === true) {
-                    visible.value = false;
-                }
-                else {
-                    visible.value = true;
-                }
+        const toggleMenu = (_visible) => {
+            if (props.disabled) {
+                return;
             }
-        };
-        vue.provide('toggleMenu', toggleMenu);
-        const hideMenu = function () {
-            if (props.disabled === false) {
-                visible.value = false;
+            if (typeof _visible == 'boolean') {
+                visible.value = _visible;
+                return;
             }
-        };
-        const handleKeyup = (event) => {
-            if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
-                hideMenu();
+            if (visible.value === true) {
+                visible.value = false;
+                return;
             }
+            visible.value = true;
         };
-        const handleClickOutside = (event) => {
-            if (dropdownRef.value && !dropdownRef.value.contains(event.target)) {
-                hideMenu();
+        vue.provide('toggleMenu', toggleMenu);
+        const hideMenu = () => {
+            if (props.disabled) {
+                return;
             }
+            visible.value = false;
         };
-        vue.onMounted(() => {
-            window.addEventListener('click', handleClickOutside);
-            window.addEventListener('keyup', handleKeyup);
-        });
-        vue.onUnmounted(() => {
-            window.removeEventListener('click', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyup);
-        });
+        vue.provide('hideMenu', hideMenu);
         vue.watch(visible, () => {
             props.popper && (visible.value ? initPopper() : destroyPopper());
             visible.value ? emit('show') : emit('hide');
@@ -3777,10 +5260,12 @@ const CDropdownMenu = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
+        const dropdownToggleRef = vue.inject('dropdownToggleRef');
         const dropdownMenuRef = vue.inject('dropdownMenuRef');
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const config = vue.inject('config');
-        const { alignment, dark, popper, visible } = vue.toRefs(config);
+        const config = vue.inject('config'); // eslint-disable-line @typescript-eslint/no-explicit-any
+        const hideMenu = vue.inject('hideMenu');
+        const visible = vue.inject('visible');
+        const { autoClose, alignment, dark, popper } = config;
         // eslint-disable-next-line @typescript-eslint/ban-types
         const alignmentClassNames = (alignment) => {
             const classNames = [];
@@ -3794,13 +5279,46 @@ const CDropdownMenu = vue.defineComponent({
             }
             return classNames;
         };
+        const handleKeyup = (event) => {
+            if (autoClose === false) {
+                return;
+            }
+            if (event.key === 'Escape') {
+                hideMenu();
+            }
+        };
+        const handleMouseUp = (event) => {
+            if (dropdownToggleRef.value?.contains(event.target)) {
+                return;
+            }
+            if (autoClose === true) {
+                hideMenu();
+                return;
+            }
+            if (autoClose === 'inside' && dropdownMenuRef.value?.contains(event.target)) {
+                hideMenu();
+                return;
+            }
+            if (autoClose === 'outside' &&
+                !dropdownMenuRef.value?.contains(event.target)) {
+                hideMenu();
+            }
+        };
+        vue.onUpdated(() => {
+            visible.value && window.addEventListener('mouseup', handleMouseUp);
+            visible.value && window.addEventListener('keyup', handleKeyup);
+        });
+        vue.onUnmounted(() => {
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyup);
+        });
         return () => vue.h(props.component, {
             class: [
                 'dropdown-menu',
-                { 'dropdown-menu-dark': dark.value, show: visible.value },
-                alignmentClassNames(alignment.value),
+                { 'dropdown-menu-dark': dark, show: visible.value },
+                alignmentClassNames(alignment),
             ],
-            ...((typeof alignment.value === 'object' || !popper.value) && {
+            ...((typeof alignment === 'object' || !popper) && {
                 'data-coreui-popper': 'static',
             }),
             ref: dropdownMenuRef,
@@ -3843,6 +5361,10 @@ const CDropdownToggle = vue.defineComponent({
             default: 'button',
             require: false,
         },
+        /**
+         * Create a custom toggler which accepts any content.
+         */
+        custom: Boolean,
         /**
          * Toggle the disabled state for the component.
          */
@@ -3874,6 +5396,16 @@ const CDropdownToggle = vue.defineComponent({
             type: Boolean,
             required: false,
         },
+        /**
+         * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
+         *
+         * @type 'hover' | 'focus' | 'click'
+         */
+        trigger: {
+            type: String,
+            default: 'click',
+            required: false,
+        },
         /**
          * Set the button variant to an outlined button or a ghost button.
          *
@@ -3889,7 +5421,8 @@ const CDropdownToggle = vue.defineComponent({
         },
     },
     setup(props, { slots }) {
-        const dropdownRef = vue.inject('dropdownRef');
+        const togglerRef = vue.ref();
+        const dropdownToggleRef = vue.inject('dropdownToggleRef');
         const dropdownVariant = vue.inject('variant');
         const visible = vue.inject('visible');
         const toggleMenu = vue.inject('toggleMenu');
@@ -3897,43 +5430,83 @@ const CDropdownToggle = vue.defineComponent({
             {
                 'dropdown-toggle': props.caret,
                 'dropdown-toggle-split': props.split,
-                show: visible,
                 active: props.active,
                 disabled: props.disabled,
             },
         ];
-        const buttonClassName = [
-            'btn',
-            props.variant ? `btn-${props.variant}-${props.color}` : `btn-${props.color}`,
-            {
-                [`btn-${props.size}`]: props.size,
-            },
-            props.shape,
-        ];
-        return () => dropdownVariant === 'nav-item'
-            ? vue.h('a', {
-                active: props.active,
-                class: ['nav-link', className],
-                disabled: props.disabled,
-                href: '#',
-                onClick: (event) => {
-                    event.preventDefault();
-                    return toggleMenu();
+        const triggers = {
+            ...((props.trigger === 'click' || props.trigger.includes('click')) && {
+                onClick: () => {
+                    if (props.disabled) {
+                        return;
+                    }
+                    toggleMenu();
                 },
-                ref: dropdownRef,
-            }, { default: () => slots.default && slots.default() })
-            : vue.h(
-            // TODO: check how to use CButton component
-            props.component, {
-                class: [...className, ...buttonClassName],
-                active: props.active,
-                disabled: props.disabled,
-                onClick: () => toggleMenu(),
-                ...(props.component === 'button' && { type: 'button' }),
-                ref: dropdownRef,
-            }, props.split
-                ? vue.h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-                : slots.default && slots.default());
+            }),
+            ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
+                onfocus: () => {
+                    if (props.disabled) {
+                        return;
+                    }
+                    toggleMenu(true);
+                },
+                onblur: () => {
+                    if (props.disabled) {
+                        return;
+                    }
+                    toggleMenu(false);
+                },
+            }),
+        };
+        vue.onMounted(() => {
+            if (togglerRef.value) {
+                dropdownToggleRef.value = togglerRef.value.$el;
+            }
+        });
+        return () => props.custom
+            ? slots.default &&
+                slots.default().map((slot) => vue.cloneVNode(slot, {
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
+                    ...triggers,
+                }))
+            : dropdownVariant === 'nav-item'
+                ? vue.h('a', {
+                    active: props.active,
+                    class: [
+                        'nav-link',
+                        className,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    disabled: props.disabled,
+                    href: '#',
+                    ref: dropdownToggleRef,
+                    ...triggers,
+                }, { default: () => slots.default && slots.default() })
+                : vue.h(CButton, {
+                    class: [
+                        className,
+                        {
+                            show: visible.value,
+                        },
+                    ],
+                    active: props.active,
+                    color: props.color,
+                    disabled: props.disabled,
+                    ref: (el) => {
+                        togglerRef.value = el;
+                    },
+                    shape: props.shape,
+                    size: props.size,
+                    ...triggers,
+                    ...(props.component === 'button' && { type: 'button' }),
+                    variant: props.variant,
+                }, () => props.split
+                    ? vue.h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                    : slots.default && slots.default());
     },
 });
 
@@ -3948,1101 +5521,1630 @@ const CDropdownPlugin = {
     },
 };
 
-const CSpinner = vue.defineComponent({
-    name: 'CSpinner',
+const CPicker = vue.defineComponent({
+    name: 'CPicker',
     props: {
+        ...CDropdown.props,
         /**
-         * Sets the color context of the component to one of CoreUI’s themed colors.
-         *
-         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         * Toggle visibility or set the content of cancel button.
          */
-        color: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return [
-                    'primary',
-                    'secondary',
-                    'success',
-                    'danger',
-                    'warning',
-                    'info',
-                    'dark',
-                    'light',
-                ].includes(value);
-            },
+        cancelButton: {
+            type: [Boolean, String],
+            default: 'Cancel',
         },
         /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
+         * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        component: {
-            type: String,
-            default: 'div',
-            required: false,
+        cancelButtonColor: {
+            ...Color,
+            default: 'primary',
         },
         /**
-         * Size the component small.
+         * Size the cancel button small or large.
          *
-         * @values 'sm'
+         * @values 'sm', 'lg'
          */
-        size: {
+        cancelButtonSize: {
             type: String,
-            default: undefined,
-            required: false,
+            default: 'sm',
             validator: (value) => {
-                return value === 'sm';
+                return ['sm', 'lg'].includes(value);
             },
         },
         /**
-         * Set the button variant to an outlined button or a ghost button.
+         * Set the cancel button variant to an outlined button or a ghost button.
          *
-         * @values 'border', 'grow'
+         * @values 'ghost', 'outline'
          */
-        variant: {
+        cancelButtonVariant: {
             type: String,
-            default: 'border',
-            required: false,
+            default: 'ghost',
             validator: (value) => {
-                return ['border', 'grow'].includes(value);
+                return ['ghost', 'outline'].includes(value);
             },
         },
         /**
-         * Set visually hidden label for accessibility purposes.
+         * Toggle visibility or set the content of confirm button.
          */
-        visuallyHiddenLabel: {
-            type: String,
-            default: 'Loading...',
-            required: false,
+        confirmButton: {
+            type: [Boolean, String],
+            default: 'OK',
         },
-    },
-    setup(props) {
-        return () => vue.h(props.component, {
-            class: [
-                `spinner-${props.variant}`,
-                `text-${props.color}`,
-                props.size && `spinner-${props.variant}-${props.size}`,
-            ],
-            role: 'status',
-        }, vue.h('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
-    },
-});
-
-const CSpinnerPlugin = {
-    install: (app) => {
-        app.component(CSpinner.name, CSpinner);
-    },
-};
-
-const CElementCover = vue.defineComponent({
-    name: 'CElementCover',
-    props: {
         /**
-         * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
-         * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
-         * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
+         * Sets the color context of the confirm button to one of CoreUI’s themed colors.
          *
-         * @type {sides: string[], query: string}[]
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        boundaries: {
-            // TODO: check if this is correct, TJ
-            type: Array,
-            require: true,
+        confirmButtonColor: {
+            ...Color,
+            default: 'primary',
         },
         /**
-         * Opacity of the cover. [docs]
-         *
-         * @type number
-         */
-        opacity: {
-            type: Number,
-            require: false,
-        },
-    },
-    setup(props) {
-        let containerCoords = {};
-        const elementRef = vue.ref();
-        const getCustomBoundaries = () => {
-            if (!props.boundaries || elementRef === null) {
-                return {};
-            }
-            const parent = elementRef.value.parentElement;
-            if (!parent) {
-                return {};
-            }
-            const parentCoords = parent.getBoundingClientRect();
-            const customBoundaries = {};
-            props.boundaries.forEach((value) => {
-                const element = parent.querySelector(value.query);
-                if (!element || !value.sides) {
-                    return;
-                }
-                const coords = element.getBoundingClientRect();
-                value.sides.forEach((side) => {
-                    const sideMargin = Math.abs(coords[side] - parentCoords[side]);
-                    customBoundaries[side] = `${sideMargin}px`;
-                });
-            });
-            return customBoundaries;
-        };
-        vue.onMounted(function () {
-            vue.nextTick(function () {
-                containerCoords = getCustomBoundaries();
-            });
-        });
-        return () => vue.h('div', {
-            style: {
-                ...containerCoords,
-                position: 'absolute',
-                'background-color': `rgb(255,255,255,${props.opacity})`,
-            },
-            ref: elementRef,
-        }, vue.h('div', // TODO: use slot to override this
-        {
-            style: {
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translateX(-50%) translateY(-50%)',
-            },
-        }, vue.h(CSpinner, {
-            variant: 'grow',
-            color: 'primary',
-        })));
-    },
-});
-
-const CElementCoverPlugin = {
-    install: (app) => {
-        app.component(CElementCover.name, CElementCover);
-    },
-};
-
-const CFooter = vue.defineComponent({
-    name: 'CFooter',
-    props: {
+         * Size the confirm button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        confirmButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
         /**
-         * Place footer in non-static positions.
+         * Set the confirm button variant to an outlined button or a ghost button.
          *
-         * @values 'fixed', 'sticky'
+         * @values 'ghost', 'outline'
          */
-        position: {
+        confirmButtonVariant: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
-                return ['fixed', 'sticky'].includes(value);
+                return ['ghost', 'outline'].includes(value);
             },
         },
+        /**
+         * Set container type for the component.
+         */
+        container: {
+            type: String,
+            default: 'dropdown',
+        },
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * Toggle visibility of footer element or set the content of footer.
+         */
+        footer: Boolean,
+        /**
+         * Toggle the visibility of the component.
+         */
+        visible: Boolean,
     },
-    setup(props, { slots }) {
-        return () => vue.h('div', { class: ['footer', { [`footer-${props.position}`]: props.position }] }, slots.default && slots.default());
+    emits: [
+        /**
+         * Callback fired when the cancel button has been clicked.
+         */
+        'cancel',
+        /**
+         * Callback fired when the confirm button has been clicked.
+         */
+        'confirm',
+        /**
+         * Callback fired when the component requests to be hidden.
+         */
+        'hide',
+        /**
+         * Callback fired when the component requests to be shown.
+         */
+        'show',
+    ],
+    setup(props, { emit, slots }) {
+        const visible = vue.ref(props.visible);
+        vue.watch(() => props.visible, () => {
+            visible.value = props.visible;
+        });
+        const handleConfirm = () => {
+            emit('confirm');
+            visible.value = false;
+        };
+        const Footer = () => vue.h('div', { class: 'picker-footer' }, [
+            props.cancelButton &&
+                vue.h(CButton, {
+                    color: props.cancelButtonColor,
+                    onClick: () => emit('cancel'),
+                    size: props.cancelButtonSize,
+                    variant: props.cancelButtonVariant,
+                }, 
+                /**
+                 * @slot Location for the cancel button content.
+                 */
+                () => (slots.cancelButton ? slots.cancelButton() : props.cancelButton)),
+            props.confirmButton &&
+                vue.h(CButton, {
+                    color: props.confirmButtonColor,
+                    onClick: handleConfirm,
+                    size: props.confirmButtonSize,
+                    variant: props.confirmButtonVariant,
+                }, 
+                /**
+                 * @slot Location for the confirm button content.
+                 */
+                () => (slots.confirmButton ? slots.confirmButton() : props.confirmButton)),
+        ]);
+        switch (props.container) {
+            case 'inline':
+                return () => vue.h('div', { class: 'picker' }, slots.default && slots.default());
+            default:
+                return () => vue.h(CDropdown, {
+                    autoClose: 'outside',
+                    class: 'picker',
+                    onHide: () => {
+                        visible.value = false;
+                        emit('hide');
+                    },
+                    onShow: () => {
+                        visible.value = true;
+                        emit('show');
+                    },
+                    variant: 'dropdown',
+                    visible: visible.value,
+                }, () => [
+                    vue.h(CDropdownToggle, {
+                        custom: true,
+                        disabled: visible.value || props.disabled,
+                    }, {
+                        /**
+                         * @slot Location for the toggler element.
+                         */
+                        default: () => slots.toggler && slots.toggler(),
+                    }),
+                    vue.h(CDropdownMenu, {}, () => [
+                        slots.default && slots.default(),
+                        props.footer && Footer(),
+                    ]),
+                ]);
+        }
     },
 });
 
-const CFooterPlugin = {
+const CPickerPlugin = {
     install: (app) => {
-        app.component(CFooter.name, CFooter);
+        app.component(CPicker.name, CPicker);
     },
 };
 
-const CForm = vue.defineComponent({
-    name: 'CForm',
+const CTimePickerRollCol = vue.defineComponent({
+    name: 'CTimePickerRollCol',
     props: {
-        /**
-         * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
-         */
-        validated: {
-            type: Boolean,
-            required: false,
+        elements: {
+            type: Array,
+            required: true,
+        },
+        selected: {
+            type: [Number, String],
         },
     },
-    setup(props, { slots }) {
-        return () => vue.h('form', { class: [{ ['was-validated']: props.validated }] }, slots.default && slots.default());
+    emits: ['click'],
+    setup(props, { emit }) {
+        const init = vue.ref(true);
+        const colRef = vue.ref();
+        vue.onUpdated(() => {
+            const nodeEl = colRef.value?.querySelector('.selected');
+            if (nodeEl && nodeEl instanceof HTMLElement) {
+                colRef.value?.scrollTo({
+                    top: nodeEl.offsetTop,
+                    behavior: init.value ? 'auto' : 'smooth',
+                });
+            }
+            init.value = false;
+        });
+        return () => vue.h('div', { class: 'time-picker-roll-col', ref: colRef }, props.elements.map((element) => {
+            return vue.h('div', {
+                class: [
+                    'time-picker-roll-cell',
+                    {
+                        selected: element.value === props.selected,
+                    },
+                ],
+                onClick: () => emit('click', element.value),
+                role: 'button',
+            }, element.label);
+        }));
     },
 });
 
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-function isObject(o) {
-  return Object.prototype.toString.call(o) === '[object Object]';
-}
-
-function isPlainObject(o) {
-  var ctor,prot;
-
-  if (isObject(o) === false) return false;
-
-  // If has modified constructor
-  ctor = o.constructor;
-  if (ctor === undefined) return true;
-
-  // If has modified prototype
-  prot = ctor.prototype;
-  if (isObject(prot) === false) return false;
-
-  // If constructor does not have an Object-specific method
-  if (prot.hasOwnProperty('isPrototypeOf') === false) {
-    return false;
-  }
-
-  // Most likely a plain Object
-  return true;
-}
-
-function t(){return t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n]);}return e},t.apply(this,arguments)}function r(e,t){if(null==e)return {};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(i[r]=e[r]);return i}const n={silent:!1,logLevel:"warn"},i=["validator"],o=Object.prototype,a=o.toString,s=o.hasOwnProperty,u=/^\s*function (\w+)/;function l(e){var t;const r=null!==(t=null==e?void 0:e.type)&&void 0!==t?t:e;if(r){const e=r.toString().match(u);return e?e[1]:""}return ""}const c=isPlainObject,f=e=>e;let d=f;if("production"!==process.env.NODE_ENV){const e="undefined"!=typeof console;d=e?function(e,t=n.logLevel){!1===n.silent&&console[t](`[VueTypes warn]: ${e}`);}:f;}const p=(e,t)=>s.call(e,t),y=Number.isInteger||function(e){return "number"==typeof e&&isFinite(e)&&Math.floor(e)===e},v=Array.isArray||function(e){return "[object Array]"===a.call(e)},h=e=>"[object Function]"===a.call(e),b=e=>c(e)&&p(e,"_vueTypes_name"),g=e=>c(e)&&(p(e,"type")||["_vueTypes_name","validator","default","required"].some(t=>p(e,t)));function O(e,t){return Object.defineProperty(e.bind(t),"__original",{value:e})}function m(e,t,r=!1){let n,i=!0,o="";n=c(e)?e:{type:e};const a=b(n)?n._vueTypes_name+" - ":"";if(g(n)&&null!==n.type){if(void 0===n.type||!0===n.type)return i;if(!n.required&&void 0===t)return i;v(n.type)?(i=n.type.some(e=>!0===m(e,t,!0)),o=n.type.map(e=>l(e)).join(" or ")):(o=l(n),i="Array"===o?v(t):"Object"===o?c(t):"String"===o||"Number"===o||"Boolean"===o||"Function"===o?function(e){if(null==e)return "";const t=e.constructor.toString().match(u);return t?t[1]:""}(t)===o:t instanceof n.type);}if(!i){const e=`${a}value "${t}" should be of type "${o}"`;return !1===r?(d(e),!1):e}if(p(n,"validator")&&h(n.validator)){const e=d,o=[];if(d=e=>{o.push(e);},i=n.validator(t),d=e,!i){const e=(o.length>1?"* ":"")+o.join("\n* ");return o.length=0,!1===r?(d(e),i):e}}return i}function j(e,t){const r=Object.defineProperties(t,{_vueTypes_name:{value:e,writable:!0},isRequired:{get(){return this.required=!0,this}},def:{value(e){return void 0===e?(p(this,"default")&&delete this.default,this):h(e)||!0===m(this,e,!0)?(this.default=v(e)?()=>[...e]:c(e)?()=>Object.assign({},e):e,this):(d(`${this._vueTypes_name} - invalid default value: "${e}"`),this)}}}),{validator:n}=r;return h(n)&&(r.validator=O(n,r)),r}function _(e,t){const r=j(e,t);return Object.defineProperty(r,"validate",{value(e){return h(this.validator)&&d(`${this._vueTypes_name} - calling .validate() will overwrite the current custom validator function. Validator info:\n${JSON.stringify(this)}`),this.validator=O(e,this),this}})}function T(e,t,n){const o=function(e){const t={};return Object.getOwnPropertyNames(e).forEach(r=>{t[r]=Object.getOwnPropertyDescriptor(e,r);}),Object.defineProperties({},t)}(t);if(o._vueTypes_name=e,!c(n))return o;const{validator:a}=n,s=r(n,i);if(h(a)){let{validator:e}=o;e&&(e=null!==(l=(u=e).__original)&&void 0!==l?l:u),o.validator=O(e?function(t){return e.call(this,t)&&a.call(this,t)}:a,o);}var u,l;return Object.assign(o,s)}function $(e){return e.replace(/^(?!\s*$)/gm,"  ")}const w=()=>_("any",{}),P=()=>_("function",{type:Function}),x=()=>_("boolean",{type:Boolean}),E=()=>_("string",{type:String}),N=()=>_("number",{type:Number}),q=()=>_("array",{type:Array}),A=()=>_("object",{type:Object}),V=()=>j("integer",{type:Number,validator:e=>y(e)}),S=()=>j("symbol",{validator:e=>"symbol"==typeof e});function k(e,t="custom validation failed"){if("function"!=typeof e)throw new TypeError("[VueTypes error]: You must provide a function as argument");return j(e.name||"<<anonymous function>>",{type:null,validator(r){const n=e(r);return n||d(`${this._vueTypes_name} - ${t}`),n}})}function D(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument.");const t=`oneOf - value should be one of "${e.join('", "')}".`,r=e.reduce((e,t)=>{if(null!=t){const r=t.constructor;-1===e.indexOf(r)&&e.push(r);}return e},[]);return j("oneOf",{type:r.length>0?r:void 0,validator(r){const n=-1!==e.indexOf(r);return n||d(t),n}})}function L(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument");let t=!1,r=[];for(let n=0;n<e.length;n+=1){const i=e[n];if(g(i)){if(b(i)&&"oneOf"===i._vueTypes_name&&i.type){r=r.concat(i.type);continue}if(h(i.validator)&&(t=!0),!0===i.type||!i.type){d('oneOfType - invalid usage of "true" or "null" as types.');continue}r=r.concat(i.type);}else r.push(i);}r=r.filter((e,t)=>r.indexOf(e)===t);const n=r.length>0?r:null;return j("oneOfType",t?{type:n,validator(t){const r=[],n=e.some(e=>{const n=m(b(e)&&"oneOf"===e._vueTypes_name?e.type||null:e,t,!0);return "string"==typeof n&&r.push(n),!0===n});return n||d(`oneOfType - provided value does not match any of the ${r.length} passed-in validators:\n${$(r.join("\n"))}`),n}}:{type:n})}function F(e){return j("arrayOf",{type:Array,validator(t){let r="";const n=t.every(t=>(r=m(e,t,!0),!0===r));return n||d(`arrayOf - value validation error:\n${$(r)}`),n}})}function Y(e){return j("instanceOf",{type:e})}function B(e){return j("objectOf",{type:Object,validator(t){let r="";const n=Object.keys(t).every(n=>(r=m(e,t[n],!0),!0===r));return n||d(`objectOf - value validation error:\n${$(r)}`),n}})}function I(e){const t=Object.keys(e),r=t.filter(t=>{var r;return !(null===(r=e[t])||void 0===r||!r.required)}),n=j("shape",{type:Object,validator(n){if(!c(n))return !1;const i=Object.keys(n);if(r.length>0&&r.some(e=>-1===i.indexOf(e))){const e=r.filter(e=>-1===i.indexOf(e));return d(1===e.length?`shape - required property "${e[0]}" is not defined.`:`shape - required properties "${e.join('", "')}" are not defined.`),!1}return i.every(r=>{if(-1===t.indexOf(r))return !0===this._vueTypes_isLoose||(d(`shape - shape definition does not include a "${r}" property. Allowed keys: "${t.join('", "')}".`),!1);const i=m(e[r],n[r],!0);return "string"==typeof i&&d(`shape - "${r}" property validation error:\n ${$(i)}`),!0===i})}});return Object.defineProperty(n,"_vueTypes_isLoose",{writable:!0,value:!1}),Object.defineProperty(n,"loose",{get(){return this._vueTypes_isLoose=!0,this}}),n}const J=["name","validate","getter"],M=/*#__PURE__*/(()=>{var e,t;return t=e=class{static get any(){return w()}static get func(){return P().def(this.defaults.func)}static get bool(){return x().def(this.defaults.bool)}static get string(){return E().def(this.defaults.string)}static get number(){return N().def(this.defaults.number)}static get array(){return q().def(this.defaults.array)}static get object(){return A().def(this.defaults.object)}static get integer(){return V().def(this.defaults.integer)}static get symbol(){return S()}static extend(e){if(v(e))return e.forEach(e=>this.extend(e)),this;const{name:t,validate:n=!1,getter:i=!1}=e,o=r(e,J);if(p(this,t))throw new TypeError(`[VueTypes error]: Type "${t}" already defined`);const{type:a}=o;if(b(a))return delete o.type,Object.defineProperty(this,t,i?{get:()=>T(t,a,o)}:{value(...e){const r=T(t,a,o);return r.validator&&(r.validator=r.validator.bind(r,...e)),r}});let s;return s=i?{get(){const e=Object.assign({},o);return n?_(t,e):j(t,e)},enumerable:!0}:{value(...e){const r=Object.assign({},o);let i;return i=n?_(t,r):j(t,r),r.validator&&(i.validator=r.validator.bind(i,...e)),i},enumerable:!0},Object.defineProperty(this,t,s)}},e.defaults={},e.sensibleDefaults=void 0,e.config=n,e.custom=k,e.oneOf=D,e.instanceOf=Y,e.oneOfType=L,e.arrayOf=F,e.objectOf=B,e.shape=I,e.utils={validate:(e,t)=>!0===m(t,e,!0),toType:(e,t,r=!1)=>r?_(e,t):j(e,t)},t})();function R(e={func:()=>{},bool:!0,string:"",number:0,array:()=>[],object:()=>({}),integer:0}){var r,n;return n=r=class extends M{static get sensibleDefaults(){return t({},this.defaults)}static set sensibleDefaults(r){this.defaults=!1!==r?t({},!0!==r?r:e):{};}},r.defaults=t({},e),n}class z extends(R()){}
+const convert12hTo24h = (abbr, hour) => {
+    if (abbr === 'am' && hour === 12) {
+        return 0;
+    }
+    if (abbr === 'am') {
+        return hour;
+    }
+    if (abbr === 'pm' && hour === 12) {
+        return 12;
+    }
+    return hour + 12;
+};
+const convert24hTo12h = (hour) => hour % 12 || 12;
+const convertTimeToDate = (time) => time ? (time instanceof Date ? new Date(time) : new Date(`1970-01-01 ${time}`)) : null;
+const getAmPm = (date, locale) => {
+    if (date.toLocaleTimeString(locale).includes('AM')) {
+        return 'am';
+    }
+    if (date.toLocaleTimeString(locale).includes('PM')) {
+        return 'pm';
+    }
+    return date.getHours() >= 12 ? 'pm' : 'am';
+};
+const getListOfHours = (locale) => Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+    return {
+        value: isAmPm(locale) ? i + 1 : i,
+        label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+    };
+});
+const getMinutesOrSeconds = (locale) => Array.from({ length: 60 }, (_, i) => {
+    return {
+        value: i,
+        label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+    };
+});
+const getSelectedHour = (date, locale) => date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : '';
+const getSelectedMinutes = (date) => (date ? date.getMinutes() : '');
+const getSelectedSeconds = (date) => (date ? date.getSeconds() : '');
+const isAmPm = (locale) => ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el));
+const isValidTime = (time) => {
+    const d = new Date(`1970-01-01 ${time}`);
+    return d instanceof Date && d.getTime();
+};
 
-const CFormLabel = vue.defineComponent({
-    name: 'CFormLabel',
+const CTimePicker = vue.defineComponent({
+    name: 'CTimePicker',
     props: {
+        ...CPicker.props,
         /**
-         * A string of all className you want to be applied to the component, and override standard className value.
+         * Toggle visibility or set the content of cancel button.
          */
-        customClassName: {
-            type: [Array, String],
-            default: undefined,
-            required: false,
+        cancelButton: {
+            type: [Boolean, String],
+            default: 'Cancel',
         },
-    },
-    setup(props, { slots }) {
-        return () => vue.h('label', {
-            class: props.customClassName ? props.customClassName : 'form-label',
-        }, slots.default && slots.default());
-    },
-});
-
-const CFormCheck = vue.defineComponent({
-    name: 'CFormCheck',
-    inheritAttrs: false,
-    props: {
         /**
-         * Create button-like checkboxes and radio buttons.
+         * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        button: I({
-            /**
-             * Sets the color context of the component to one of CoreUI’s themed colors.
-             *
-             * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-             */
-            color: Color,
-            /**
-             * Select the shape of the component.
-             *
-             * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
-             */
-            shape: Shape,
-            /**
-             * Size the component small or large.
-             *
-             * @values 'sm' | 'lg'
-             */
-            size: {
-                type: String,
-                default: undefined,
-                required: false,
-                validator: (value) => {
-                    return ['sm', 'lg'].includes(value);
-                },
+        cancelButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the cancel button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        cancelButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
             },
-            /**
-             * Set the button variant to an outlined button or a ghost button.
-             */
-            variant: {
-                type: String,
-                default: undefined,
-                required: false,
-                validator: (value) => {
-                    return ['outline', 'ghost'].includes(value);
-                },
+        },
+        /**
+         * Set the cancel button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
+         */
+        cancelButtonVariant: {
+            type: String,
+            default: 'ghost',
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
             },
-        }),
+        },
         /**
-         * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+         * Toggle visibility of the cleaner button.
          */
-        id: {
+        cleaner: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Toggle visibility or set the content of confirm button.
+         */
+        confirmButton: {
+            type: [Boolean, String],
+            default: 'OK',
+        },
+        /**
+         * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        confirmButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the confirm button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        confirmButtonSize: {
             type: String,
-            default: undefined,
-            required: false,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
         },
         /**
-         * Input Checkbox indeterminate Property
+         * Set the confirm button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
          */
-        indeterminate: Boolean,
+        confirmButtonVariant: {
+            type: String,
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
+        },
         /**
-         * Group checkboxes or radios on the same horizontal row by adding.
+         * Toggle visibility or set the content of the input indicator.
+         */
+        indicator: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Toggle the readonly state for the component.
+         */
+        inputReadOnly: Boolean,
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
          */
-        inline: {
-            type: Boolean,
-            required: false,
+        locale: {
+            type: String,
+            defalut: 'default',
         },
         /**
-         * Set component validation state to invalid.
+         * Specifies a short hint that is visible in the input.
          */
-        invalid: {
-            type: Boolean,
-            required: false,
+        placeholder: {
+            type: String,
+            default: 'Select time',
         },
         /**
-         * The element represents a caption for a component.
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
          */
-        label: {
+        size: {
             type: String,
             default: undefined,
-            required: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
         },
         /**
-         * The default name for a value passed using v-model.
+         * Initial selected time.
          */
-        modelValue: {
-            type: [Boolean, String],
-            value: undefined,
-            required: false,
+        time: {
+            type: [Date, String],
         },
         /**
-         * Specifies the type of component.
+         * Set the time picker variant to a roll or select.
          *
-         * @values 'checkbox', 'radio'
+         * @values 'roll', 'select'
          */
-        type: {
+        variant: {
             type: String,
-            default: 'checkbox',
-            required: false,
-        },
-        /**
-         * Set component validation state to valid.
-         */
-        valid: {
-            type: Boolean,
-            required: false,
+            default: 'roll',
+            validator: (value) => {
+                return ['roll', 'select'].includes(value);
+            },
         },
     },
     emits: [
         /**
-         * Event occurs when the checked value has been changed.
+         * Callback fired when the time changed.
          */
         'change',
         /**
-         * Emit the new value whenever there’s a change event.
+         * Callback fired when the component requests to be hidden.
          */
-        'update:modelValue',
+        'hide',
+        /**
+         * Callback fired when the component requests to be shown.
+         */
+        'show',
     ],
-    setup(props, { attrs, emit, slots }) {
-        const handleChange = (event) => {
-            const target = event.target;
-            emit('change', event);
-            emit('update:modelValue', target.checked);
+    setup(props, { emit, slots }) {
+        const date = vue.ref(convertTimeToDate(props.time));
+        const initialDate = vue.ref(null);
+        const ampm = vue.ref(date.value ? getAmPm(new Date(date.value), props.locale) : 'am');
+        vue.watch(() => props.time, () => {
+            date.value = convertTimeToDate(props.time);
+        });
+        vue.watch(date, () => {
+            if (date.value) {
+                ampm.value = getAmPm(new Date(date.value), props.locale);
+            }
+        });
+        const handleClear = (event) => {
+            event.stopPropagation();
+            date.value = null;
+        };
+        const handleTimeChange = (set, value) => {
+            const _date = date.value || new Date('1970-01-01');
+            if (set === 'toggle') {
+                if (value === 'am') {
+                    _date.setHours(_date.getHours() - 12);
+                }
+                if (value === 'pm') {
+                    _date.setHours(_date.getHours() + 12);
+                }
+            }
+            if (set === 'hours') {
+                if (isAmPm(props.locale)) {
+                    _date.setHours(convert12hTo24h(ampm.value, parseInt(value)));
+                }
+                else {
+                    _date.setHours(parseInt(value));
+                }
+            }
+            if (set === 'minutes') {
+                _date.setMinutes(parseInt(value));
+            }
+            if (set === 'seconds') {
+                _date.setSeconds(parseInt(value));
+            }
+            date.value = new Date(_date);
+            emit('change', _date.toTimeString(), _date.toLocaleTimeString(), _date);
         };
-        const formControl = () => {
-            return vue.h('input', {
-                checked: props.modelValue,
+        const InputGroup = () => vue.h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
+            vue.h(CFormInput, {
+                disabled: props.disabled,
+                onInput: (event) => {
+                    if (isValidTime(event.target.value)) {
+                        date.value = convertTimeToDate(event.target.value);
+                    }
+                },
+                placeholder: props.placeholder,
+                readonly: props.inputReadOnly,
+                value: date.value ? date.value.toLocaleTimeString(props.locale) : '',
+            }),
+            (props.indicator || props.cleaner) &&
+                vue.h(CInputGroupText, {}, () => [
+                    props.indicator &&
+                        vue.h('span', {
+                            class: 'picker-input-group-indicator',
+                        }, slots.indicator
+                            ? slots.indicator()
+                            : vue.h('span', { class: 'picker-input-group-icon time-picker-input-icon' })),
+                    props.cleaner &&
+                        vue.h('span', {
+                            class: 'picker-input-group-cleaner',
+                            onClick: (event) => handleClear(event),
+                            role: 'button',
+                        }, slots.cleaner
+                            ? slots.cleaner()
+                            : vue.h('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' })),
+                ]),
+        ]);
+        const TimePickerSelect = () => [
+            vue.h('span', { class: 'time-picker-inline-icon' }),
+            vue.h(CFormSelect, {
+                disabled: props.disabled,
+                options: getListOfHours(props.locale).map((option) => {
+                    return {
+                        value: option.value.toString(),
+                        label: option.label,
+                    };
+                }),
+                onChange: (event) => handleTimeChange('hours', event.target.value),
+                ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
+            }),
+            ':',
+            vue.h(CFormSelect, {
+                disabled: props.disabled,
+                options: Array.from({ length: 60 }, (_, i) => {
+                    return {
+                        value: i.toString(),
+                        label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
+                    };
+                }),
+                onChange: (event) => handleTimeChange('minutes', event.target.value),
+                ...(date.value && { value: getSelectedMinutes(date.value) }),
+            }),
+            ':',
+            vue.h(CFormSelect, {
+                disabled: props.disabled,
+                options: Array.from({ length: 60 }, (_, i) => {
+                    return {
+                        value: i.toString(),
+                        label: i.toLocaleString(props.locale).padStart(2, (0).toLocaleString(props.locale)),
+                    };
+                }),
+                onChange: (event) => handleTimeChange('seconds', event.target.value),
+                ...(date.value && { value: getSelectedSeconds(date.value) }),
+            }),
+            isAmPm(props.locale) &&
+                vue.h(CFormSelect, {
+                    disabled: props.disabled,
+                    options: [
+                        { value: 'am', label: 'AM' },
+                        { value: 'pm', label: 'PM' },
+                    ],
+                    onChange: (event) => handleTimeChange('toggle', event.target.value),
+                    value: ampm.value,
+                }),
+        ];
+        const TimePickerRoll = () => [
+            vue.h(CTimePickerRollCol, {
+                elements: getListOfHours(props.locale),
+                onClick: (index) => handleTimeChange('hours', index.toString()),
+                selected: getSelectedHour(date.value, props.locale),
+            }),
+            vue.h(CTimePickerRollCol, {
+                elements: getMinutesOrSeconds(props.locale),
+                onClick: (index) => handleTimeChange('minutes', index.toString()),
+                selected: getSelectedMinutes(date.value),
+            }),
+            vue.h(CTimePickerRollCol, {
+                elements: getMinutesOrSeconds(props.locale),
+                onClick: (index) => handleTimeChange('seconds', index.toString()),
+                selected: getSelectedSeconds(date.value),
+            }),
+            isAmPm(props.locale) &&
+                vue.h(CTimePickerRollCol, {
+                    elements: [
+                        { value: 'am', label: 'AM' },
+                        { value: 'pm', label: 'PM' },
+                    ],
+                    onClick: (value) => handleTimeChange('toggle', value),
+                    selected: ampm.value,
+                }),
+        ];
+        return () => vue.h(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');
+            },
+        }, {
+            ...(slots.cancelButton && {
+                cancelButton: () => slots.cancelButton && slots.cancelButton(),
+            }),
+            ...(slots.confirmButton && {
+                confirmButton: () => slots.confirmButton && slots.confirmButton(),
+            }),
+            toggler: () => InputGroup(),
+            default: () => vue.h('div', {
                 class: [
-                    props.button ? 'btn-check' : 'form-check-input',
+                    'time-picker-body',
                     {
-                        'is-invalid': props.invalid,
-                        'is-valid': props.valid,
+                        ['time-picker-roll']: props.variant === 'roll',
                     },
                 ],
-                id: props.id,
-                indeterminate: props.indeterminate,
-                onChange: (event) => handleChange(event),
-                type: props.type,
-                ...attrs,
-            });
-        };
-        const formLabel = () => {
-            return vue.h(CFormLabel, {
-                customClassName: props.button
-                    ? [
-                        'btn',
-                        props.button.variant
-                            ? `btn-${props.button.variant}-${props.button.color}`
-                            : `btn-${props.button.color}`,
-                        {
-                            [`btn-${props.button.size}`]: props.button.size,
-                        },
-                        `${props.button.shape}`,
-                    ]
-                    : 'form-check-label',
-                ...(props.id && { for: props.id }),
-            }, {
-                default: () => (slots.label && slots.label()) || props.label,
-            });
-        };
-        return () => props.button
-            ? [formControl(), (slots.label || props.label) && formLabel()]
-            : props.label
-                ? vue.h('div', {
-                    class: [
-                        'form-check',
-                        {
-                            'form-check-inline': props.inline,
-                            'is-invalid': props.invalid,
-                            'is-valid': props.valid,
-                        },
-                    ],
-                }, [formControl(), props.label && formLabel()])
-                : formControl();
+            }, props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()),
+        });
     },
 });
 
-const CFormFeedback = vue.defineComponent({
-    name: 'CFormFeedback',
+const CTimePickerPlugin = {
+    install: (app) => {
+        app.component(CTimePicker.name, CTimePicker);
+    },
+};
+
+const CDateRangePicker = vue.defineComponent({
+    name: 'CDateRangePicker',
     props: {
         /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
+         * The number of calendars that render on desktop devices.
          */
-        component: {
+        calendars: {
+            type: Number,
+            default: 2,
+        },
+        /**
+         * Default date of the component
+         */
+        calendarDate: {
+            type: [Date, String],
+        },
+        /**
+         * Toggle visibility or set the content of cancel button.
+         */
+        cancelButton: {
+            type: [Boolean, String],
+            default: 'Cancel',
+        },
+        /**
+         * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        cancelButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the cancel button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        cancelButtonSize: {
             type: String,
-            required: false,
-            default: 'div',
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
         },
         /**
-         * Method called immediately after the `value` prop changes.
+         * Set the cancel button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
          */
-        invalid: Boolean,
+        cancelButtonVariant: {
+            type: String,
+            default: 'ghost',
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
+        },
         /**
-         * If your form layout allows it, you can display validation feedback in a styled tooltip.
+         * Toggle visibility of the cleaner button.
          */
-        tooltip: Boolean,
+        cleaner: {
+            type: Boolean,
+            default: true,
+        },
         /**
-         * Set component validation state to valid.
+         * Toggle visibility or set the content of confirm button.
          */
-        valid: Boolean,
-    },
-    setup(props, { slots }) {
-        return () => vue.h(props.component, {
-            class: [
-                {
-                    [`invalid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.invalid,
-                    [`valid-${props.tooltip ? 'tooltip' : 'feedback'}`]: props.valid,
-                },
-            ],
-        }, slots.default && slots.default());
-    },
-});
-
-const CFormFloating = vue.defineComponent({
-    name: 'CFormFloating',
-    setup(_, { slots }) {
-        return () => vue.h('div', {
-            class: 'form-floating',
-        }, slots.default && slots.default());
-    },
-});
-
-const CFormInput = vue.defineComponent({
-    name: 'CFormInput',
-    props: {
+        confirmButton: {
+            type: [Boolean, String],
+            default: 'OK',
+        },
+        /**
+         * Sets the color context of the confirm button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+         */
+        confirmButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the confirm button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        confirmButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Set the confirm button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
+         */
+        confirmButtonVariant: {
+            type: String,
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
+        },
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
+        disabled: Boolean,
+        /**
+         * Specify the list of dates that cannot be selected.
+         */
+        disabledDates: {
+            type: Array,
         },
         /**
-         * Set component validation state to invalid.
+         * Initial selected to date (range).
          */
-        invalid: {
-            type: Boolean,
+        endDate: {
+            type: [Date, String],
             required: false,
         },
         /**
-         * The default name for a value passed using v-model.
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         * - 7 - Sunday
          */
-        modelValue: {
-            type: String,
-            default: undefined,
-            require: false,
+        firstDayOfWeek: {
+            type: Number,
+            default: 1,
         },
         /**
-         * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
+         * Toggle visibility of footer element or set the content of footer.
          */
-        plainText: {
-            type: Boolean,
-            required: false,
-        },
+        footer: Boolean,
         /**
-         * Toggle the readonly state for the component.
+         * Toggle visibility or set the content of the input indicator.
          */
-        readonly: {
+        indicator: {
             type: Boolean,
-            required: false,
+            default: true,
         },
         /**
-         * Size the component small or large.
-         *
-         * @values 'sm' | 'lg'
+         * Toggle the readonly state for the component.
          */
-        size: {
-            type: String,
-            default: undefined,
-            require: false,
-            validator: (value) => {
-                return ['sm', 'lg'].includes(value);
-            },
-        },
+        inputReadOnly: Boolean,
         /**
-         * Specifies the type of component.
-         *
-         * @values 'color' | 'file' | 'text' | string
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
          */
-        type: {
+        locale: {
             type: String,
-            default: 'text',
-            require: false,
+            default: 'default',
         },
         /**
-         * Set component validation state to valid.
+         * Max selectable date.
          */
-        valid: {
-            type: Boolean,
-            required: false,
+        maxDate: {
+            type: [Date, String],
         },
-    },
-    emits: [
         /**
-         * Event occurs when the element loses focus, after the content has been changed.
+         * Min selectable date.
          */
-        'change',
+        minDate: {
+            type: [Date, String],
+        },
         /**
-         * Event occurs immediately after the value of a component has changed.
+         * Show arrows navigation.
          */
-        'input',
+        navigation: {
+            type: Boolean,
+            default: true,
+        },
         /**
-         * Emit the new value whenever there’s an input or change event.
+         * Specifies a short hint that is visible in the input.
          */
-        'update:modelValue',
-    ],
-    setup(props, { emit, slots }) {
-        const handleChange = (event) => {
-            const target = event.target;
-            emit('change', event);
-            emit('update:modelValue', target.value);
-        };
-        const handleInput = (event) => {
-            const target = event.target;
-            emit('input', event);
-            emit('update:modelValue', target.value);
-        };
-        return () => vue.h('input', {
-            class: [
-                props.plainText ? 'form-control-plaintext' : 'form-control',
-                {
-                    'form-control-color': props.type === 'color',
-                    [`form-control-${props.size}`]: props.size,
-                    'is-invalid': props.invalid,
-                    'is-valid': props.valid,
-                },
-            ],
-            disabled: props.disabled,
-            onChange: (event) => handleChange(event),
-            onInput: (event) => handleInput(event),
-            readonly: props.readonly,
-            type: props.type,
-            value: props.modelValue,
-        }, slots.default && slots.default());
-    },
-});
-
-const CFormRange = vue.defineComponent({
-    name: 'CFormRange',
-    props: {
+        placeholder: {
+            type: [String, Array],
+            default: () => ['Start date', 'End date'],
+        },
         /**
-         * Toggle the disabled state for the component.
+         * @ignore
          */
-        disabled: {
+        range: {
             type: Boolean,
-            default: undefined,
-            required: false,
+            default: true,
         },
         /**
-         * Specifies the maximum value for the component.
+         * Predefined date ranges the user can select from.
          */
-        max: {
-            type: Number,
-            default: undefined,
-            required: false,
-        },
+        ranges: Object,
         /**
-         * Specifies the minimum value for the component.
+         * Toggle select mode between start and end date.
          */
-        min: {
-            type: Number,
-            default: undefined,
-            required: false,
+        selectEndDate: Boolean,
+        /**
+         * Default icon or character character that separates two dates.
+         */
+        separator: {
+            type: Boolean,
+            default: true,
         },
         /**
-         * The default name for a value passed using v-model.
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
          */
-        modelValue: {
+        size: {
             type: String,
-            value: undefined,
             required: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
         },
         /**
-         * Toggle the readonly state for the component.
+         * Initial selected date.
          */
-        readonly: {
-            type: Boolean,
-            required: false,
+        startDate: {
+            type: [Date, String],
         },
         /**
-         * Specifies the interval between legal numbers in the component.
+         * Provide an additional time selection by adding select boxes to choose times.
          */
-        steps: {
-            type: Number,
-            default: undefined,
-            required: false,
-        },
+        timepicker: Boolean,
         /**
-         * The `value` attribute of component.
+         * Set length or format of day name.
          *
-         * @controllable onChange
-         * */
-        value: {
-            type: Number,
-            default: undefined,
-            required: false,
+         * @type  number | 'long' | 'narrow' | 'short'
+         */
+        weekdayFormat: {
+            type: [Number, String],
+            default: 2,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['long', 'narrow', 'short'].includes(value);
+                }
+                if (typeof value === 'number') {
+                    return true;
+                }
+                return false;
+            },
         },
     },
-    emits: [
+    emit: [
         /**
-         * Event occurs when the value has been changed.
+         * Callback fired when the end date changed.
          */
-        'change',
+        'end-date-change',
         /**
-         * Emit the new value whenever there’s a change event.
+         * Callback fired when the component requests to be hidden.
          */
-        'update:modelValue',
+        'hide',
+        /**
+         * Callback fired when the component requests to be shown.
+         */
+        'show',
+        /**
+         * Callback fired when the start date changed.
+         */
+        'start-date-change',
     ],
-    setup(props, { emit, slots }) {
-        const handleChange = (event) => {
-            const target = event.target;
-            emit('change', event);
-            emit('update:modelValue', target.value);
+    setup(props, { slots, emit }) {
+        const calendarDate = vue.ref(props.calendarDate
+            ? new Date(props.calendarDate)
+            : props.startDate
+                ? new Date(props.startDate)
+                : props.endDate
+                    ? new Date(props.endDate)
+                    : new Date());
+        const inputStartHoverValue = vue.ref(null);
+        const inputEndHoverValue = vue.ref(null);
+        const startDate = vue.ref(props.startDate ? new Date(props.startDate) : null);
+        const endDate = vue.ref(props.endDate ? new Date(props.endDate) : null);
+        const initialStartDate = vue.ref(startDate.value ? new Date(startDate.value) : null);
+        const initialEndDate = vue.ref(endDate.value ? new Date(endDate.value) : null);
+        const selectEndDate = vue.ref(false);
+        const isMobile = vue.ref(false);
+        vue.onMounted(() => {
+            isMobile.value = window.innerWidth < 768;
+        });
+        vue.watch(() => props.startDate, () => {
+            if (props.startDate) {
+                calendarDate.value = new Date(props.startDate);
+            }
+        });
+        vue.watch(() => props.endDate, () => {
+            if (props.endDate) {
+                calendarDate.value = new Date(props.endDate);
+            }
+        });
+        const setInputValue = (date, timepicker) => {
+            if (date) {
+                return timepicker
+                    ? date.toLocaleString(props.locale)
+                    : date.toLocaleDateString(props.locale);
+            }
+            return '';
         };
-        return () => vue.h('input', {
-            class: 'form-range',
+        const handleCalendarCellHover = (date) => {
+            if (selectEndDate.value) {
+                inputEndHoverValue.value = date === null ? null : date;
+                return;
+            }
+            inputStartHoverValue.value = date === null ? null : date;
+        };
+        const handleCalendarDateChange = (date, difference) => {
+            if (difference) {
+                calendarDate.value = new Date(date.getFullYear(), date.getMonth() - difference, 1);
+                return;
+            }
+            calendarDate.value = date;
+        };
+        const handleStartDateChange = (date) => {
+            startDate.value = date;
+            inputStartHoverValue.value = null;
+            if (props.range) {
+                selectEndDate.value = true;
+            }
+            emit('start-date-change', date);
+        };
+        const handleEndDateChange = (date) => {
+            endDate.value = date;
+            inputEndHoverValue.value = null;
+            if (props.range) {
+                selectEndDate.value = false;
+            }
+            emit('end-date-change', date);
+        };
+        const handleClear = (event) => {
+            event.stopPropagation();
+            startDate.value = null;
+            endDate.value = null;
+            inputStartHoverValue.value = null;
+            inputEndHoverValue.value = null;
+        };
+        const InputGroup = () => vue.h(CInputGroup, {
+            class: 'picker-input-group',
+            size: props.size,
+        }, () => [
+            vue.h(CFormInput, {
+                class: {
+                    hover: inputStartHoverValue.value,
+                },
+                disabled: props.disabled,
+                onClick: () => {
+                    selectEndDate.value = false;
+                },
+                onInput: (event) => {
+                    if (isValidDate(event.target.value)) {
+                        calendarDate.value = new Date(event.target.value);
+                        startDate.value = new Date(event.target.value);
+                    }
+                },
+                placeholder: Array.isArray(props.placeholder)
+                    ? props.placeholder[0]
+                    : props.placeholder,
+                readonly: props.inputReadOnly,
+                value: inputStartHoverValue.value
+                    ? setInputValue(inputStartHoverValue.value, props.timepicker)
+                    : setInputValue(startDate.value, props.timepicker),
+            }),
+            props.range &&
+                props.separator !== false &&
+                vue.h(CInputGroupText, {}, () => slots.separator
+                    ? slots.separator()
+                    : vue.h('span', { class: 'picker-input-group-icon date-picker-arrow-icon' })),
+            props.range &&
+                vue.h(CFormInput, {
+                    class: {
+                        hover: inputEndHoverValue.value,
+                    },
+                    disabled: props.disabled,
+                    onClick: () => {
+                        selectEndDate.value = true;
+                    },
+                    onInput: (event) => {
+                        if (isValidDate(event.target.value)) {
+                            calendarDate.value = new Date(event.target.value);
+                            endDate.value = new Date(event.target.value);
+                        }
+                    },
+                    placeholder: props.placeholder[1],
+                    readonly: props.inputReadOnly,
+                    value: inputEndHoverValue.value
+                        ? setInputValue(inputEndHoverValue.value, props.timepicker)
+                        : setInputValue(endDate.value, props.timepicker),
+                }),
+            (props.indicator || props.cleaner) &&
+                vue.h(CInputGroupText, {}, () => [
+                    props.indicator &&
+                        vue.h('span', {
+                            class: 'picker-input-group-indicator',
+                        }, slots.indicator
+                            ? slots.indicator()
+                            : vue.h('span', { class: 'picker-input-group-icon date-picker-input-icon' })),
+                    props.cleaner &&
+                        vue.h('span', {
+                            class: 'picker-input-group-cleaner',
+                            onClick: (event) => handleClear(event),
+                            role: 'button',
+                        }, slots.cleaner
+                            ? slots.cleaner()
+                            : vue.h('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' })),
+                ]),
+        ]);
+        return () => vue.h(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,
-            max: props.max,
-            min: props.min,
-            onChange: (event) => handleChange(event),
-            steps: props.steps,
-            readonly: props.readonly,
-            type: 'range',
-            value: props.modelValue,
-        }, slots.default && slots.default());
+            footer: props.footer || props.timepicker,
+            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');
+            },
+        }, {
+            ...(slots.cancelButton && {
+                cancelButton: () => slots.cancelButton && slots.cancelButton(),
+            }),
+            ...(slots.confirmButton && {
+                confirmButton: () => slots.confirmButton && slots.confirmButton(),
+            }),
+            toggler: () => InputGroup(),
+            default: () => vue.h('div', {
+                class: 'date-picker-body',
+            }, [
+                props.ranges &&
+                    vue.h('div', { class: 'date-picker-ranges' }, Object.keys(props.ranges).map((key) => vue.h(CButton, {
+                        color: 'secondary',
+                        onClick: () => {
+                            if (props.ranges) {
+                                startDate.value = props.ranges[key][0];
+                                endDate.value = props.ranges[key][1];
+                            }
+                        },
+                        variant: 'ghost',
+                    }, () => key))),
+                vue.h('div', { class: 'date-picker-calendars' }, [...Array(isMobile.value ? 1 : props.calendars)].map((_, index) => vue.h('div', { class: 'date-picker-calendar' }, [
+                    vue.h(CCalendar, {
+                        calendarDate: new Date(calendarDate.value.getFullYear(), calendarDate.value.getMonth() + index, 1),
+                        disabledDates: props.disabledDates,
+                        ...(endDate.value && { endDate: endDate.value }),
+                        firstDayOfWeek: props.firstDayOfWeek,
+                        locale: props.locale,
+                        maxDate: props.maxDate,
+                        minDate: props.minDate,
+                        navigation: props.navigation,
+                        range: true,
+                        selectEndDate: selectEndDate.value,
+                        ...(startDate.value && { startDate: startDate.value }),
+                        onCalendarCellHover: (date) => handleCalendarCellHover(date),
+                        onCalendarDateChange: (date) => handleCalendarDateChange(date, index),
+                        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(),
+                        }),
+                    }),
+                    !isMobile.value &&
+                        props.timepicker &&
+                        (index === 0 || props.calendars - index === 1) &&
+                        vue.h(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',
+                        }),
+                    isMobile.value &&
+                        props.timepicker && [
+                        vue.h(CTimePicker, {
+                            container: 'inline',
+                            disabled: startDate.value === null ? true : false,
+                            locale: props.locale,
+                            onChange: (_, __, date) => handleStartDateChange(date),
+                            time: startDate.value,
+                            variant: 'select',
+                        }),
+                        vue.h(CTimePicker, {
+                            container: 'inline',
+                            disabled: endDate.value === null ? true : false,
+                            locale: props.locale,
+                            onChange: (_, __, date) => handleEndDateChange(date),
+                            time: endDate.value,
+                            variant: 'select',
+                        }),
+                    ],
+                ]))),
+            ]),
+        });
     },
 });
 
-const CFormSelect = vue.defineComponent({
-    name: 'CFormSelect',
+const CDateRangePickerPlugin = {
+    install: (app) => {
+        app.component(CDateRangePicker.name, CDateRangePicker);
+    },
+};
+
+const CDatePicker = vue.defineComponent({
+    name: 'CDatePicker',
     props: {
         /**
-         * Specifies the number of visible options in a drop-down list.
+         * Default date of the component
+         */
+        calendarDate: {
+            type: [Date, String],
+        },
+        /**
+         * Toggle visibility or set the content of cancel button.
+         */
+        cancelButton: {
+            type: [Boolean, String],
+            default: 'Cancel',
+        },
+        /**
+         * Sets the color context of the cancel button to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        htmlSize: {
-            type: Number,
-            default: undefined,
-            required: false,
+        cancelButtonColor: {
+            ...Color,
+            default: 'primary',
         },
         /**
-         * Set component validation state to invalid.
+         * Size the cancel button small or large.
+         *
+         * @values 'sm', 'lg'
          */
-        invalid: {
-            type: Boolean,
-            required: false,
+        cancelButtonSize: {
+            type: String,
+            default: 'sm',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
         },
         /**
-         * The default name for a value passed using v-model.
+         * Set the cancel button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
          */
-        modelValue: {
-            type: [String, Array],
-            default: undefined,
-            require: false,
+        cancelButtonVariant: {
+            type: String,
+            default: 'ghost',
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
         },
-        multiple: {
+        /**
+         * Toggle visibility of the cleaner button.
+         */
+        cleaner: {
             type: Boolean,
-            required: false,
+            default: true,
         },
         /**
-         * Options list of the select component. Available keys: `label`, `value`, `disabled`.
-         * Examples:
-         * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
-         * - `:options="['js', 'html']"`
+         * Toggle visibility or set the content of confirm button.
          */
-        options: {
-            type: Array,
-            default: undefined,
-            required: false,
+        confirmButton: {
+            type: [Boolean, String],
+            default: 'OK',
         },
         /**
-         * Size the component small or large.
+         * Sets the color context of the confirm button to one of CoreUI’s themed colors.
          *
-         * @values 'sm' | 'lg'
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        size: {
+        confirmButtonColor: {
+            ...Color,
+            default: 'primary',
+        },
+        /**
+         * Size the confirm button small or large.
+         *
+         * @values 'sm', 'lg'
+         */
+        confirmButtonSize: {
             type: String,
-            default: undefined,
-            require: false,
+            default: 'sm',
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
         },
         /**
-         * Set component validation state to valid.
+         * Set the confirm button variant to an outlined button or a ghost button.
+         *
+         * @values 'ghost', 'outline'
          */
-        valid: {
-            type: Boolean,
-            required: false,
+        confirmButtonVariant: {
+            type: String,
+            validator: (value) => {
+                return ['ghost', 'outline'].includes(value);
+            },
         },
-    },
-    emits: [
         /**
-         * Event occurs when when a user changes the selected option of a `<select>` element.
+         * Toggle the disabled state for the component.
          */
-        'change',
+        disabled: Boolean,
         /**
-         * Emit the new value whenever there’s a change event.
+         * Specify the list of dates that cannot be selected.
          */
-        'update:modelValue',
-    ],
-    setup(props, { emit, slots }) {
-        const handleChange = (event) => {
-            const target = event.target;
-            const selected = Array.from(target.options)
-                .filter((option) => option.selected)
-                .map((option) => option.value);
-            emit('change', event);
-            emit('update:modelValue', target.multiple ? selected : selected[0]);
-        };
-        return () => vue.h('select', {
-            class: [
-                'form-select',
-                {
-                    [`form-select-${props.size}`]: props.size,
-                    'is-invalid': props.invalid,
-                    'is-valid': props.valid,
-                },
-            ],
-            multiple: props.multiple,
-            onChange: (event) => handleChange(event),
-            size: props.htmlSize,
-            ...(props.modelValue && !props.multiple && { value: props.modelValue }),
-        }, props.options
-            ? props.options.map((option) => {
-                return vue.h('option', {
-                    ...(typeof option === 'object' && {
-                        ...(option.disabled && { disabled: option.disabled }),
-                        ...(option.selected && { selected: option.selected }),
-                        ...(option.value && {
-                            value: option.value,
-                            ...(props.modelValue &&
-                                props.multiple &&
-                                props.modelValue.includes(option.value) && { selected: true }),
-                        }),
-                    }),
-                }, typeof option === 'string' ? option : option.label);
-            })
-            : slots.default && slots.default());
-    },
-});
-
-const CFormSwitch = vue.defineComponent({
-    name: 'CFormSwitch',
-    inheritAttrs: false,
-    props: {
+        disabledDates: {
+            type: Array,
+        },
         /**
-         * The id global attribute defines an identifier (ID) that must be unique in the whole document
+         * Initial selected date.
          */
-        id: {
-            type: String,
-            default: undefined,
+        date: {
+            type: [Date, String],
             required: false,
         },
         /**
-         * Set component validation state to invalid.
+         * Sets the day of start week.
+         * - 0 - Sunday,
+         * - 1 - Monday,
+         * - 2 - Tuesday,
+         * - 3 - Wednesday,
+         * - 4 - Thursday,
+         * - 5 - Friday,
+         * - 6 - Saturday,
+         * - 7 - Sunday
          */
-        invalid: {
-            type: Boolean,
-            required: false,
+        firstDayOfWeek: {
+            type: Number,
+            default: 1,
         },
         /**
-         * The element represents a caption for a component.
+         * Toggle visibility of footer element or set the content of footer.
          */
-        label: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        footer: Boolean,
         /**
-         * The default name for a value passed using v-model.
+         * Toggle visibility or set the content of the input indicator.
          */
-        modelValue: {
-            type: [Boolean, String],
-            value: undefined,
-            required: false,
+        indicator: {
+            type: Boolean,
+            default: true,
         },
         /**
-         * Size the component large or extra large. Works only with `switch`.
-         *
-         * @values 'lg' | 'xl'
+         * Toggle the readonly state for the component.
          */
-        size: {
+        inputReadOnly: Boolean,
+        /**
+         * Sets the default locale for components. If not set, it is inherited from the navigator.language.
+         */
+        locale: {
             type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['lg', 'xl'].includes(value);
-            },
+            default: 'default',
         },
         /**
-         * Specifies the type of component.
-         *
-         * @values 'checkbox', 'radio'
+         * Max selectable date.
          */
-        type: {
-            type: String,
-            default: 'checkbox',
-            required: false,
+        maxDate: {
+            type: [Date, String],
         },
         /**
-         * Set component validation state to valid.
+         * Min selectable date.
          */
-        valid: {
-            type: Boolean,
-            required: false,
+        minDate: {
+            type: [Date, String],
         },
-    },
-    emits: [
         /**
-         * Event occurs when the checked value has been changed.
+         * Show arrows navigation.
          */
-        'change',
+        navigation: {
+            type: Boolean,
+            default: true,
+        },
         /**
-         * Emit the new value whenever there’s a change event.
+         * Specifies a short hint that is visible in the input.
          */
-        'update:modelValue',
-    ],
-    setup(props, { attrs, emit }) {
-        const checked = vue.ref(attrs.checked);
-        vue.onMounted(() => {
-            if (props.modelValue && typeof props.modelValue === 'boolean') {
-                console.log(props.modelValue);
-            }
-        });
-        vue.watch(() => props.modelValue, () => {
-            if (typeof props.modelValue === 'boolean')
-                checked.value = props.modelValue;
-        });
-        const handleChange = (event) => {
-            const target = event.target;
-            emit('change', event);
-            emit('update:modelValue', target.checked);
-        };
-        return () => vue.h('div', {
-            class: [
-                'form-check form-switch',
-                {
-                    [`form-switch-${props.size}`]: props.size,
-                    'is-invalid': props.invalid,
-                    'is-valid': props.valid,
-                },
-            ],
-        }, [
-            vue.h('input', {
-                ...attrs,
-                checked: checked.value,
-                class: [
-                    'form-check-input',
-                    {
-                        'is-invalid': props.invalid,
-                        'is-valid': props.valid,
-                    },
-                ],
-                id: props.id,
-                onChange: (event) => handleChange(event),
-                type: props.type,
-            }),
-            props.label &&
-                vue.h(CFormLabel, {
-                    ...(props.id && { for: props.id }),
-                    class: 'form-check-label',
-                }, {
-                    default: () => props.label,
-                }),
-        ]);
-    },
-});
-
-const CFormText = vue.defineComponent({
-    name: 'CFormText',
-    props: {
+        placeholder: {
+            type: String,
+            default: 'Select date',
+        },
         /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
+         * Size the component small or large.
+         *
+         * @values 'sm', 'lg'
          */
-        component: {
+        size: {
             type: String,
             required: false,
-            default: 'div',
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+        /**
+         * Provide an additional time selection by adding select boxes to choose times.
+         */
+        timepicker: Boolean,
+        /**
+         * Set length or format of day name.
+         *
+         * @type  number | 'long' | 'narrow' | 'short'
+         */
+        weekdayFormat: {
+            type: [Number, String],
+            default: 2,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['long', 'narrow', 'short'].includes(value);
+                }
+                if (typeof value === 'number') {
+                    return true;
+                }
+                return false;
+            },
         },
     },
-    setup(props, { slots }) {
-        return () => vue.h(props.component, { class: 'form-text' }, slots.default && slots.default());
+    emit: [
+        /**
+         * Callback fired when the date changed.
+         */
+        'date-change',
+    ],
+    setup(props, { emit }) {
+        return () => vue.h(CDateRangePicker, {
+            calendars: 1,
+            onStartDateChange: (date) => emit('date-change', date),
+            range: false,
+            startDate: props.date,
+            ...props,
+            // cleaner: props.cleaner,
+            // disabled: props.disabled,
+            // indicator: props.indicator,
+            // inputReadOnly: props.inputReadOnly,
+            // locale: props.locale,
+            // placeholder: props.placeholder,
+            // size: props.size,
+            // timepicker: props.timepicker,
+        });
     },
 });
 
-const CFormTextarea = vue.defineComponent({
-    name: 'CFormTextarea',
+const CDatePickerPlugin = {
+    install: (app) => {
+        app.component(CDatePicker.name, CDatePicker);
+    },
+};
+
+const CSpinner = vue.defineComponent({
+    name: 'CSpinner',
     props: {
         /**
-         * Toggle the disabled state for the component.
+         * Sets the color context of the component to one of CoreUI’s themed colors.
+         *
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        disabled: {
-            type: Boolean,
+        color: {
+            type: String,
+            default: undefined,
             required: false,
+            validator: (value) => {
+                return [
+                    'primary',
+                    'secondary',
+                    'success',
+                    'danger',
+                    'warning',
+                    'info',
+                    'dark',
+                    'light',
+                ].includes(value);
+            },
         },
         /**
-         * Set component validation state to invalid.
+         * Component used for the root node. Either a string to use a HTML element or a component.
          */
-        invalid: {
-            type: Boolean,
+        component: {
+            type: String,
+            default: 'div',
             required: false,
         },
         /**
-         * The default name for a value passed using v-model.
+         * Size the component small.
+         *
+         * @values 'sm'
          */
-        modelValue: {
+        size: {
             type: String,
             default: undefined,
-            require: false,
-        },
-        /**
-         * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
-         */
-        plainText: {
-            type: Boolean,
             required: false,
+            validator: (value) => {
+                return value === 'sm';
+            },
         },
         /**
-         * Toggle the readonly state for the component.
+         * Set the button variant to an outlined button or a ghost button.
+         *
+         * @values 'border', 'grow'
          */
-        readonly: {
-            type: Boolean,
+        variant: {
+            type: String,
+            default: 'border',
             required: false,
+            validator: (value) => {
+                return ['border', 'grow'].includes(value);
+            },
         },
         /**
-         * Set component validation state to valid.
+         * Set visually hidden label for accessibility purposes.
          */
-        valid: {
-            type: Boolean,
+        visuallyHiddenLabel: {
+            type: String,
+            default: 'Loading...',
             required: false,
         },
     },
-    emits: [
-        /**
-         * Event occurs when the element loses focus, after the content has been changed.
-         */
-        'change',
-        /**
-         * Event occurs immediately after the value of a component has changed.
-         */
-        'input',
-        /**
-         * Emit the new value whenever there’s an input or change event.
-         */
-        'update:modelValue',
-    ],
-    setup(props, { emit, slots }) {
-        const handleInput = (event) => {
-            const target = event.target;
-            emit('input', event);
-            emit('update:modelValue', target.value);
-        };
-        return () => vue.h('textarea', {
-            disabled: props.disabled,
-            readonly: props.readonly,
+    setup(props) {
+        return () => vue.h(props.component, {
             class: [
-                props.plainText ? 'form-control-plaintext' : 'form-control',
-                {
-                    'is-invalid': props.invalid,
-                    'is-valid': props.valid,
-                },
+                `spinner-${props.variant}`,
+                `text-${props.color}`,
+                props.size && `spinner-${props.variant}-${props.size}`,
             ],
-            onInput: (event) => handleInput(event),
-            value: props.modelValue,
-        }, slots.default && slots.default());
+            role: 'status',
+        }, vue.h('span', { class: ['visually-hidden'] }, props.visuallyHiddenLabel));
     },
 });
 
-const CInputGroup = vue.defineComponent({
-    name: 'CInputGroup',
+const CSpinnerPlugin = {
+    install: (app) => {
+        app.component(CSpinner.name, CSpinner);
+    },
+};
+
+const CElementCover = vue.defineComponent({
+    name: 'CElementCover',
     props: {
         /**
-         * Size the component small or large.
+         * Array of custom boundaries. Use to create custom cover area (instead of parent element area). Area is defined by four sides: 'top', 'bottom', 'right', 'left'. If side is not defined by any custom boundary it is equal to parent element boundary. Each custom boundary is object with keys:
+         * - sides (array) - select boundaries of element to define boundaries. Sides names: 'top', 'bottom', 'right', 'left'.
+         * - query (string) - query used to get element which define boundaries. Search will be done only inside parent element, by parent.querySelector(query) function. [docs]
          *
-         * @values 'sm', 'lg'
+         * @type {sides: string[], query: string}[]
          */
-        size: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['sm', 'lg'].includes(value);
-            },
+        boundaries: {
+            // TODO: check if this is correct, TJ
+            type: Array,
+            require: true,
+        },
+        /**
+         * Opacity of the cover. [docs]
+         *
+         * @type number
+         */
+        opacity: {
+            type: Number,
+            require: false,
         },
     },
-    setup(props, { slots }) {
+    setup(props) {
+        let containerCoords = {};
+        const elementRef = vue.ref();
+        const getCustomBoundaries = () => {
+            if (!props.boundaries || elementRef === null) {
+                return {};
+            }
+            const parent = elementRef.value.parentElement;
+            if (!parent) {
+                return {};
+            }
+            const parentCoords = parent.getBoundingClientRect();
+            const customBoundaries = {};
+            props.boundaries.forEach((value) => {
+                const element = parent.querySelector(value.query);
+                if (!element || !value.sides) {
+                    return;
+                }
+                const coords = element.getBoundingClientRect();
+                value.sides.forEach((side) => {
+                    const sideMargin = Math.abs(coords[side] - parentCoords[side]);
+                    customBoundaries[side] = `${sideMargin}px`;
+                });
+            });
+            return customBoundaries;
+        };
+        vue.onMounted(function () {
+            vue.nextTick(function () {
+                containerCoords = getCustomBoundaries();
+            });
+        });
         return () => vue.h('div', {
-            class: [
-                'input-group',
-                {
-                    [`input-group-${props.size}`]: props.size,
-                },
-            ],
-        }, slots.default && slots.default());
+            style: {
+                ...containerCoords,
+                position: 'absolute',
+                'background-color': `rgb(255,255,255,${props.opacity})`,
+            },
+            ref: elementRef,
+        }, vue.h('div', // TODO: use slot to override this
+        {
+            style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            },
+        }, vue.h(CSpinner, {
+            variant: 'grow',
+            color: 'primary',
+        })));
     },
 });
 
-const CInputGroupText = vue.defineComponent({
-    name: 'CInputGroupText',
+const CElementCoverPlugin = {
+    install: (app) => {
+        app.component(CElementCover.name, CElementCover);
+    },
+};
+
+const CFooter = vue.defineComponent({
+    name: 'CFooter',
     props: {
         /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
+         * Place footer in non-static positions.
+         *
+         * @values 'fixed', 'sticky'
          */
-        component: {
+        position: {
             type: String,
+            default: undefined,
             required: false,
-            default: 'span',
+            validator: (value) => {
+                return ['fixed', 'sticky'].includes(value);
+            },
         },
     },
     setup(props, { slots }) {
-        return () => vue.h(props.component, { class: 'input-group-text' }, slots.default && slots.default());
+        return () => vue.h('div', { class: ['footer', { [`footer-${props.position}`]: props.position }] }, slots.default && slots.default());
     },
 });
 
-const CFormPlugin = {
+const CFooterPlugin = {
     install: (app) => {
-        app.component(CForm.name, CForm);
-        app.component(CFormCheck.name, CFormCheck);
-        // app.component(CFormControl.name, CFormControl)
-        app.component(CFormFeedback.name, CFormFeedback);
-        app.component(CFormFloating.name, CFormFloating);
-        app.component(CFormInput.name, CFormInput);
-        app.component(CFormLabel.name, CFormLabel);
-        app.component(CFormRange.name, CFormRange);
-        app.component(CFormSelect.name, CFormSelect);
-        app.component(CFormSwitch.name, CFormSwitch);
-        app.component(CFormText.name, CFormText);
-        app.component(CFormTextarea.name, CFormTextarea);
-        app.component(CInputGroup.name, CInputGroup);
-        app.component(CInputGroupText.name, CInputGroupText);
+        app.component(CFooter.name, CFooter);
     },
 };
 
@@ -8554,11 +10656,6 @@ const CSmartTableBody = vue.defineComponent({
             default: undefined,
             require: false,
         },
-        columns: {
-            type: Array,
-            default: () => [],
-            require: true,
-        },
         rawColumnNames: {
             type: Array,
             default: () => [],
@@ -9672,7 +11769,7 @@ const CSmartTable = vue.defineComponent({
                                     ...props.tableHeadProps,
                                     columnFilter: props.columnFilter,
                                     columnFilterValue: columnFilterState.value,
-                                    columns: rawColumnNames.value,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     columnSorter: props.columnSorter,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
@@ -9719,7 +11816,6 @@ const CSmartTable = vue.defineComponent({
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
-                                columns: rawColumnNames.value,
                                 scopedSlots: slots,
                                 selectable: props.selectable,
                                 onRowChecked: (id, value) => handleRowChecked(id, value),
@@ -9734,7 +11830,7 @@ const CSmartTable = vue.defineComponent({
                                     ...props.tableFootProps,
                                     columnFilter: false,
                                     columnSorter: false,
-                                    columns: rawColumnNames.value,
+                                    columns: props.columns ? props.columns : rawColumnNames.value,
                                     selectable: props.selectable,
                                     selectAll: selectedAll.value,
                                     onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
@@ -10763,6 +12859,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CButtonGroupPlugin: CButtonGroupPlugin,
     CButtonToolbar: CButtonToolbar,
     CButtonGroup: CButtonGroup,
+    CCalendar: CCalendar,
+    CCalendarPlugin: CCalendarPlugin,
     CCalloutPlugin: CCalloutPlugin,
     CCallout: CCallout,
     CCardPlugin: CCardPlugin,
@@ -10785,6 +12883,10 @@ var Components = /*#__PURE__*/Object.freeze({
     CCloseButton: CCloseButton,
     CCollapsePlugin: CCollapsePlugin,
     CCollapse: CCollapse,
+    CDatePickerPlugin: CDatePickerPlugin,
+    CDatePicker: CDatePicker,
+    CDateRangePickerPlugin: CDateRangePickerPlugin,
+    CDateRangePicker: CDateRangePicker,
     CDropdownPlugin: CDropdownPlugin,
     CDropdown: CDropdown,
     CDropdownItem: CDropdownItem,
@@ -10860,6 +12962,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CPagination: CPagination,
     CPaginationItem: CPaginationItem,
     CSmartPagination: CSmartPagination,
+    CPicker: CPicker,
+    CPickerPlugin: CPickerPlugin,
     CPlaceholderPlugin: CPlaceholderPlugin,
     CPlaceholder: CPlaceholder,
     CProgressPlugin: CProgressPlugin,
@@ -10890,6 +12994,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CTabsPlugin: CTabsPlugin,
     CTabContent: CTabContent,
     CTabPane: CTabPane,
+    CTimePicker: CTimePicker,
+    CTimePickerPlugin: CTimePickerPlugin,
     CToastPlugin: CToastPlugin,
     CToast: CToast,
     CToastBody: CToastBody,
@@ -11162,6 +13268,8 @@ exports.CButtonGroupPlugin = CButtonGroupPlugin;
 exports.CButtonPlugin = CButtonPlugin;
 exports.CButtonToolbar = CButtonToolbar;
 exports.CCLinkPlugin = CCLinkPlugin;
+exports.CCalendar = CCalendar;
+exports.CCalendarPlugin = CCalendarPlugin;
 exports.CCallout = CCallout;
 exports.CCalloutPlugin = CCalloutPlugin;
 exports.CCard = CCard;
@@ -11186,6 +13294,10 @@ exports.CCol = CCol;
 exports.CCollapse = CCollapse;
 exports.CCollapsePlugin = CCollapsePlugin;
 exports.CContainer = CContainer;
+exports.CDatePicker = CDatePicker;
+exports.CDatePickerPlugin = CDatePickerPlugin;
+exports.CDateRangePicker = CDateRangePicker;
+exports.CDateRangePickerPlugin = CDateRangePickerPlugin;
 exports.CDropdown = CDropdown;
 exports.CDropdownDivider = CDropdownDivider;
 exports.CDropdownHeader = CDropdownHeader;
@@ -11256,6 +13368,8 @@ exports.COffcanvasTitle = COffcanvasTitle;
 exports.CPagination = CPagination;
 exports.CPaginationItem = CPaginationItem;
 exports.CPaginationPlugin = CPaginationPlugin;
+exports.CPicker = CPicker;
+exports.CPickerPlugin = CPickerPlugin;
 exports.CPlaceholder = CPlaceholder;
 exports.CPlaceholderPlugin = CPlaceholderPlugin;
 exports.CPopover = CPopover;
@@ -11288,6 +13402,8 @@ exports.CTableHeaderCell = CTableHeaderCell;
 exports.CTablePlugin = CTablePlugin;
 exports.CTableRow = CTableRow;
 exports.CTabsPlugin = CTabsPlugin;
+exports.CTimePicker = CTimePicker;
+exports.CTimePickerPlugin = CTimePickerPlugin;
 exports.CToast = CToast;
 exports.CToastBody = CToastBody;
 exports.CToastClose = CToastClose;