@coreui/vue-pro 4.6.0 → 4.7.0-alpha.0

package/dist/index.js

@@ -1909,13 +1909,46 @@ const CCardPlugin = {
     },
 };
 
-const isVisible$1 = (element) => {
+const getNextSibling = (elem, selector) => {
+    // Get the next sibling element
+    let sibling = elem.nextElementSibling;
+    // If there's no selector, return the first sibling
+    if (!selector)
+        return sibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.nextElementSibling;
+    }
+    return;
+};
+
+const getPreviousSibling = (elem, selector) => {
+    // Get the next sibling element
+    let sibling = elem.previousElementSibling;
+    // If there's no selector, return the first sibling
+    if (!selector)
+        return sibling;
+    // If the sibling matches our selector, use it
+    // If not, jump to the next sibling and continue the loop
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.previousElementSibling;
+    }
+    return;
+};
+
+const isVisible = (element) => {
     const rect = element.getBoundingClientRect();
     return (rect.top >= 0 &&
         rect.left >= 0 &&
         rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
         rect.right <= (window.innerWidth || document.documentElement.clientWidth));
 };
+
 const CCarousel = vue.defineComponent({
     name: 'CCarousel',
     props: {
@@ -2027,7 +2060,7 @@ const CCarousel = vue.defineComponent({
         const nextItemWhenVisible = () => {
             // Don't call next when the page isn't visible
             // or the carousel or its parent isn't visible
-            if (!document.hidden && isVisible$1(carouselRef.value)) {
+            if (!document.hidden && isVisible(carouselRef.value)) {
                 handleControlClick('next');
             }
         };
@@ -2046,7 +2079,7 @@ const CCarousel = vue.defineComponent({
             }
         };
         const handleScroll = () => {
-            if (!document.hidden && isVisible$1(carouselRef.value)) {
+            if (!document.hidden && isVisible(carouselRef.value)) {
                 visible.value = true;
             }
             else {
@@ -8336,6 +8369,8 @@ const CFormControlWrapper = vue.defineComponent({
     },
 });
 
+const File = typeof window !== 'undefined' ? window.File : class File extends Object {
+};
 const CFormInput = vue.defineComponent({
     name: 'CFormInput',
     props: {
@@ -11938,6 +11973,12 @@ const CTimePickerRollCol = vue.defineComponent({
             }
             init.value = false;
         });
+        const handleKeyDown = (event, value) => {
+            if (event.code === 'Space' || event.key === 'Enter') {
+                event.preventDefault();
+                emit('click', value);
+            }
+        };
         return () => vue.h('div', { class: 'time-picker-roll-col', ref: colRef }, props.elements.map((element) => {
             return vue.h('div', {
                 class: [
@@ -11947,7 +11988,9 @@ const CTimePickerRollCol = vue.defineComponent({
                     },
                 ],
                 onClick: () => emit('click', element.value),
+                onKeydown: (event) => handleKeyDown(event, element.value),
                 role: 'button',
+                tabindex: 0,
             }, element.label);
         }));
     },
@@ -11976,10 +12019,10 @@ const getAmPm = (date, locale) => {
     }
     return date.getHours() >= 12 ? 'pm' : 'am';
 };
-const getListOfHours = (locale) => Array.from({ length: isAmPm(locale) ? 12 : 24 }, (_, i) => {
+const getListOfHours = (locale, ampm = 'auto') => Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm ? 12 : 24 }, (_, i) => {
     return {
-        value: isAmPm(locale) ? i + 1 : i,
-        label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+        value: (ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i,
+        label: ((ampm === 'auto' && isAmPm(locale)) || ampm ? i + 1 : i).toLocaleString(locale),
     };
 });
 const getListOfMinutes = (locale, valueAsString = false) => Array.from({ length: 60 }, (_, i) => {
@@ -12012,7 +12055,11 @@ const getListOfSeconds = (locale, valueAsString = false) => Array.from({ length:
             .split(':')[2],
     };
 });
-const getSelectedHour = (date, locale) => date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : '';
+const getSelectedHour = (date, locale, ampm = 'auto') => date
+    ? (ampm === 'auto' && isAmPm(locale)) || ampm
+        ? 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));
@@ -12025,6 +12072,24 @@ const CTimePicker = vue.defineComponent({
     name: 'CTimePicker',
     props: {
         ...CPicker.props,
+        /**
+         * Set if the component should use the 12/24 hour format. If `true` forces the interface to a 12-hour format. If `false` forces the interface into a 24-hour format. If `auto` the current locale will determine the 12 or 24-hour interface by default locales.
+         *
+         * @since 4.7.0
+         */
+        ampm: {
+            type: [Boolean, String],
+            default: 'auto',
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['auto'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
+        },
         /**
          * Toggle visibility or set the content of cancel button.
          */
@@ -12178,6 +12243,15 @@ const CTimePicker = vue.defineComponent({
             type: String,
             default: 'Select time',
         },
+        /**
+         * Show seconds.
+         *
+         * @since 4.7.0
+         */
+        seconds: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * Size the component small or large.
          *
@@ -12228,6 +12302,10 @@ const CTimePicker = vue.defineComponent({
                 return ['roll', 'select'].includes(value);
             },
         },
+        /**
+         * Toggle the visibility of the component.
+         */
+        visible: Boolean,
     },
     emits: [
         /**
@@ -12242,8 +12320,15 @@ const CTimePicker = vue.defineComponent({
          * Callback fired when the component requests to be shown.
          */
         'show',
+        /**
+         * Callback fired when the time changed.
+         *
+         * @since 4.7.0
+         */
+        'update:time',
     ],
     setup(props, { emit, attrs, slots }) {
+        const visible = vue.ref(props.visible);
         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');
@@ -12258,6 +12343,8 @@ const CTimePicker = vue.defineComponent({
         const handleClear = (event) => {
             event.stopPropagation();
             date.value = null;
+            emit('change', null);
+            emit('update:time', null);
         };
         const handleTimeChange = (set, value) => {
             const _date = date.value || new Date('1970-01-01');
@@ -12270,7 +12357,7 @@ const CTimePicker = vue.defineComponent({
                 }
             }
             if (set === 'hours') {
-                if (isAmPm(props.locale)) {
+                if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) {
                     _date.setHours(convert12hTo24h(ampm.value, parseInt(value)));
                 }
                 else {
@@ -12284,7 +12371,8 @@ const CTimePicker = vue.defineComponent({
                 _date.setSeconds(parseInt(value));
             }
             date.value = new Date(_date);
-            emit('change', _date.toTimeString(), _date.toLocaleTimeString(), _date);
+            emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date);
+            emit('update:time', _date.toLocaleTimeString(props.locale));
         };
         const InputGroup = () => vue.h(CInputGroup, { class: 'picker-input-group', size: props.size }, () => [
             vue.h(CFormInput, {
@@ -12297,7 +12385,12 @@ const CTimePicker = vue.defineComponent({
                 },
                 placeholder: props.placeholder,
                 readonly: props.inputReadOnly,
-                value: date.value ? date.value.toLocaleTimeString(props.locale) : '',
+                value: date.value
+                    ? date.value.toLocaleTimeString(props.locale, {
+                        hour12: (props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm ? true : false,
+                        ...(!props.seconds && { timeStyle: 'short' }),
+                    })
+                    : '',
             }),
             (props.indicator || props.cleaner) &&
                 vue.h(CInputGroupText, {}, () => [
@@ -12338,14 +12431,15 @@ const CTimePicker = vue.defineComponent({
                 onChange: (event) => handleTimeChange('minutes', event.target.value),
                 ...(date.value && { value: getSelectedMinutes(date.value) }),
             }),
-            ':',
-            // @ts-expect-error the getListOfMinutes function returns corect type
-            vue.h(CFormSelect, {
-                disabled: props.disabled,
-                options: getListOfSeconds(props.locale, true),
-                onChange: (event) => handleTimeChange('seconds', event.target.value),
-                ...(date.value && { value: getSelectedSeconds(date.value) }),
-            }),
+            props.seconds && ':',
+            props.seconds &&
+                // @ts-expect-error the getListOfMinutes function returns corect type
+                vue.h(CFormSelect, {
+                    disabled: props.disabled,
+                    options: getListOfSeconds(props.locale, true),
+                    onChange: (event) => handleTimeChange('seconds', event.target.value),
+                    ...(date.value && { value: getSelectedSeconds(date.value) }),
+                }),
             isAmPm(props.locale) &&
                 vue.h(CFormSelect, {
                     disabled: props.disabled,
@@ -12359,21 +12453,22 @@ const CTimePicker = vue.defineComponent({
         ];
         const TimePickerRoll = () => [
             vue.h(CTimePickerRollCol, {
-                elements: getListOfHours(props.locale),
+                elements: getListOfHours(props.locale, props.ampm),
                 onClick: (index) => handleTimeChange('hours', index.toString()),
-                selected: getSelectedHour(date.value, props.locale),
+                selected: getSelectedHour(date.value, props.locale, props.ampm),
             }),
             vue.h(CTimePickerRollCol, {
                 elements: getListOfMinutes(props.locale),
                 onClick: (index) => handleTimeChange('minutes', index.toString()),
                 selected: getSelectedMinutes(date.value),
             }),
-            vue.h(CTimePickerRollCol, {
-                elements: getListOfSeconds(props.locale),
-                onClick: (index) => handleTimeChange('seconds', index.toString()),
-                selected: getSelectedSeconds(date.value),
-            }),
-            isAmPm(props.locale) &&
+            props.seconds &&
+                vue.h(CTimePickerRollCol, {
+                    elements: getListOfSeconds(props.locale),
+                    onClick: (index) => handleTimeChange('seconds', index.toString()),
+                    selected: getSelectedSeconds(date.value),
+                }),
+            ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm) &&
                 vue.h(CTimePickerRollCol, {
                     elements: [
                         { value: 'am', label: 'AM' },
@@ -12412,16 +12507,20 @@ const CTimePicker = vue.defineComponent({
                     if (initialDate.value) {
                         date.value = new Date(initialDate.value);
                     }
+                    visible.value = false;
                 },
                 onHide: () => {
+                    visible.value = false;
                     emit('hide');
                 },
                 onShow: () => {
                     if (date.value) {
                         initialDate.value = new Date(date.value);
                     }
+                    visible.value = true;
                     emit('show');
                 },
+                visible: visible.value,
             }, {
                 ...(slots.cancelButton && {
                     cancelButton: () => slots.cancelButton && slots.cancelButton(),
@@ -12512,6 +12611,15 @@ const CDateRangePicker = vue.defineComponent({
             type: Boolean,
             default: true,
         },
+        /**
+         * If true the dropdown will be immediately closed after submitting the full date.
+         *
+         * @since 4.7.0
+         */
+        closeOnSelect: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * Toggle visibility or set the content of confirm button.
          */
@@ -12813,6 +12921,10 @@ const CDateRangePicker = vue.defineComponent({
          * @since 4.6.0
          */
         valid: Boolean,
+        /**
+         * Toggle the visibility of the component.
+         */
+        visible: Boolean,
         /**
          * Set length or format of day name.
          *
@@ -12858,8 +12970,23 @@ const CDateRangePicker = vue.defineComponent({
          * @property {string} formatedDate - formated date
          */
         'start-date-change',
+        /**
+         * Callback fired when the start date changed.
+         *
+         * @property {Date | null} date - date object
+         * @since 4.7.0
+         */
+        'update:start-date',
+        /**
+         * Callback fired when the end date changed.
+         *
+         * @property {Date | null} date - date object
+         * @since 4.7.0
+         */
+        'update:end-date',
     ],
     setup(props, { slots, attrs, emit }) {
+        const visible = vue.ref(props.visible);
         const calendarDate = vue.ref(props.calendarDate
             ? new Date(props.calendarDate)
             : props.startDate
@@ -12934,6 +13061,13 @@ const CDateRangePicker = vue.defineComponent({
                 selectEndDate.value = true;
             }
             emit('start-date-change', date, date ? formatDate(date) : undefined);
+            emit('update:start-date', date);
+            if (props.timepicker || props.footer) {
+                return;
+            }
+            if (props.closeOnSelect && !props.range) {
+                visible.value = false;
+            }
         };
         const handleEndDateChange = (date) => {
             endDate.value = date;
@@ -12942,6 +13076,13 @@ const CDateRangePicker = vue.defineComponent({
                 selectEndDate.value = false;
             }
             emit('end-date-change', date, date ? formatDate(date) : undefined);
+            emit('update:end-date', date);
+            if (props.timepicker || props.footer) {
+                return;
+            }
+            if (props.closeOnSelect && startDate.value !== null) {
+                visible.value = false;
+            }
         };
         const handleClear = (event) => {
             event.stopPropagation();
@@ -12949,6 +13090,10 @@ const CDateRangePicker = vue.defineComponent({
             endDate.value = null;
             inputStartHoverValue.value = null;
             inputEndHoverValue.value = null;
+            emit('start-date-change', null);
+            emit('end-date-change', null);
+            emit('update:start-date', null);
+            emit('update:end-date', null);
         };
         const InputGroup = () => vue.h(CInputGroup, {
             class: 'picker-input-group',
@@ -13054,8 +13199,10 @@ const CDateRangePicker = vue.defineComponent({
                 onCancel: () => {
                     startDate.value = initialStartDate.value;
                     endDate.value = initialEndDate.value;
+                    visible.value = false;
                 },
                 onHide: () => {
+                    visible.value = false;
                     emit('hide');
                 },
                 onShow: () => {
@@ -13065,8 +13212,10 @@ const CDateRangePicker = vue.defineComponent({
                     if (endDate.value) {
                         initialEndDate.value = new Date(endDate.value);
                     }
+                    visible.value = true;
                     emit('show');
                 },
+                visible: visible.value,
             }, {
                 ...(slots.cancelButton && {
                     cancelButton: () => slots.cancelButton && slots.cancelButton(),
@@ -13455,11 +13604,21 @@ const CDatePicker = vue.defineComponent({
          * @property {string} formatedDate - formated date
          */
         'date-change',
+        /**
+         * Callback fired when the date changed.
+         *
+         * @property {Date | null} date - date object
+         * @since 4.7.0
+         */
+        'update:date',
     ],
     setup(props, { emit }) {
         return () => vue.h(CDateRangePicker, {
             calendars: 1,
-            onStartDateChange: (date, formatedDate) => emit('date-change', date, formatedDate),
+            onStartDateChange: (date, formatedDate) => {
+                emit('date-change', date, formatedDate);
+                emit('update:date', date);
+            },
             range: false,
             startDate: props.date,
             ...props,
@@ -14290,11 +14449,10 @@ const CLoadingButton = vue.defineComponent({
             }
         };
         return () => vue.h(CButton, {
+            ...props,
             class: ['btn-loading', { ['is-loading']: loading.value }],
             ...(props.disabledOnLoading && loading.value && { disabled: true }),
             onClick: () => handleOnClick(),
-            // TODO: remove non button props
-            ...props,
         }, {
             default: () => [
                 vue.h(CSpinner, { class: 'btn-loading-spinner', size: 'sm', variant: props.spinnerType }),
@@ -14696,34 +14854,61 @@ const CMultiSelectOptions = vue.defineComponent({
             default: 'no items',
             required: false,
         },
+        selected: {
+            type: Array,
+            default: () => [],
+            required: false,
+        },
     },
     emits: ['optionClick'],
     setup(props, { emit }) {
+        const handleKeyDown = (event, option) => {
+            if (event.code === 'Space' || event.key === 'Enter') {
+                event.preventDefault();
+                handleOptionClick && handleOptionClick(option);
+                return;
+            }
+            if (event.key === 'Down' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                const target = event.target;
+                const next = getNextSibling(target, '.form-multi-select-option');
+                if (next) {
+                    next.focus(); // eslint-disable-line prettier/prettier
+                }
+            }
+            if (event.key === 'Up' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                const target = event.target;
+                const prev = getPreviousSibling(target, '.form-multi-select-option');
+                if (prev) {
+                    prev.focus(); // eslint-disable-line prettier/prettier
+                }
+            }
+        };
         const handleOptionClick = (option) => {
             emit('optionClick', option);
         };
-        const createOptions = (options) => {
-            return options.length > 0
-                ? options.map((option) => {
-                    return option.options
-                        ? vue.h('div', { class: 'form-multi-select-options' }, [
-                            vue.h('div', { class: 'form-multi-select-optgroup-label' }, option.label),
-                            createOptions(option.options),
-                        ])
-                        : vue.h('div', {
-                            class: [
-                                'form-multi-select-option',
-                                {
-                                    'form-multi-select-option-with-checkbox': props.optionsStyle === 'checkbox',
-                                    'form-multi-selected': option.selected,
-                                    disabled: option.disabled,
-                                },
-                            ],
-                            onClick: () => handleOptionClick(option),
-                        }, option.text);
-                })
-                : vue.h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel);
-        };
+        // TODO: find solution how to remove any
+        const createOptions = (options) => options.length > 0
+            ? options.map((option) => option.options
+                ? [
+                    vue.h('div', { class: 'form-multi-select-optgroup-label' }, option.label),
+                    createOptions(option.options),
+                ]
+                : vue.h('div', {
+                    class: [
+                        'form-multi-select-option',
+                        {
+                            'form-multi-select-option-with-checkbox': props.optionsStyle === 'checkbox',
+                            'form-multi-selected': props.selected.some((_option) => _option.value === option.value),
+                            disabled: option.disabled,
+                        },
+                    ],
+                    onClick: () => handleOptionClick(option),
+                    onKeydown: (event) => handleKeyDown(event, option),
+                    tabindex: 0,
+                }, option.text))
+            : vue.h('div', { class: 'form-multi-select-options-empty' }, props.searchNoResultsLabel);
         return () => vue.h('div', {
             class: 'form-multi-select-options',
             ...(props.optionsMaxHeight !== 'auto' && {
@@ -14750,7 +14935,7 @@ const CMultiSelectSelection = vue.defineComponent({
          * Enables search input element.
          */
         search: {
-            type: Boolean,
+            type: [Boolean, String],
             required: false,
             default: false,
         },
@@ -14820,6 +15005,11 @@ const CMultiSelectSelection = vue.defineComponent({
     },
 });
 
+const flattenArray = (options) => {
+    return options.reduce((acc, val) => {
+        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
+    }, []);
+};
 const CMultiSelect = vue.defineComponent({
     name: 'CMultiSelect',
     props: {
@@ -14941,9 +15131,18 @@ const CMultiSelect = vue.defineComponent({
          * Enables search input element.
          */
         search: {
-            type: Boolean,
+            type: [Boolean, String],
             default: true,
             required: false,
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['external'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
         },
         /**
          * Sets the label for no results when filtering.
@@ -15045,59 +15244,63 @@ const CMultiSelect = vue.defineComponent({
          * Execute a function when a user changes the selected option. [docs]
          */
         'change',
+        /**
+         * Execute a function when the filter value changed.
+         *
+         * @since 4.7.0
+         */
+        'filterChange',
     ],
     setup(props, { attrs, emit }) {
-        const flattenArray = (options) => {
-            return options.reduce((acc, val) => {
-                return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
-            }, []);
-        };
-        const getSelectedOptions = (options) => {
-            return flattenArray(options).filter((option) => {
-                if (option.selected) {
-                    return option;
-                }
-                return;
-            });
-        };
-        const updateOptions = (value, _options = options.value) => {
-            return props.multiple && _options
-                ? _options &&
-                    _options.map((option) => {
-                        count.value = count.value++;
-                        return option.options
-                            ? { ...option, options: updateOptions(value, option.options) }
-                            : option.value == value // TODO: find solution
-                                ? { ...option, selected: !option.selected, order: count.value }
-                                : { ...option };
-                    })
-                : _options &&
-                    _options.map((option) => {
-                        return option.options
-                            ? { ...option, options: updateOptions(value, option.options) }
-                            : option.value == value // TODO: find solution
-                                ? { ...option, selected: true }
-                                : { ...option, selected: false };
+        const nativeSelectRef = vue.ref();
+        vue.provide('nativeSelectRef', nativeSelectRef);
+        const searchRef = vue.ref();
+        const options = vue.ref(props.options);
+        const search = vue.ref('');
+        const selected = vue.ref([]);
+        const visible = vue.ref(props.visible);
+        const selectOptions = (options, deselected) => {
+            let _selected = [...selected.value, ...options];
+            if (deselected) {
+                _selected = _selected.filter((selectedOption) => !deselected.some((deselectedOption) => deselectedOption.value === selectedOption.value));
+            }
+            const deduplicated = _selected.reduce((unique, option) => {
+                if (!unique.some((obj) => obj.value === option.value)) {
+                    unique.push({
+                        value: option.value,
+                        text: option.text,
+                        ...(option.disabled && { disabled: option.disabled }),
                     });
-        };
-        const toggleAllOptions = (options, selected, counter = count.value) => {
-            return options.map((option) => {
-                !option.selected && counter++;
-                count.value = counter;
-                if (option.options) {
-                    return {
-                        ...option,
-                        options: toggleAllOptions(option.options, selected, counter),
-                    };
                 }
-                return option.disabled
-                    ? { ...option }
-                    : selected && !option.selected
-                        ? { ...option, selected: selected, order: counter }
-                        : { ...option, selected: selected };
-            });
+                return unique;
+            }, []);
+            selected.value = deduplicated;
         };
-        const filterOptionsList = (search, _options = vOptions.value) => {
+        vue.watch(() => props.options, (newValue, oldValue) => {
+            if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+                options.value = newValue;
+                const _selected = newValue &&
+                    flattenArray(newValue).filter((option) => {
+                        if (option.selected) {
+                            return option;
+                        }
+                        return;
+                    });
+                const deselected = newValue &&
+                    flattenArray(newValue).filter((option) => {
+                        if (option.selected === false) {
+                            return option;
+                        }
+                        return;
+                    });
+                _selected && selectOptions(_selected, deselected);
+            }
+        });
+        vue.watch(selected, () => {
+            nativeSelectRef.value &&
+                nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }));
+        });
+        const filterOptionsList = (search, _options) => {
             return search.length
                 ? _options &&
                     _options.reduce((acc, val) => {
@@ -15111,70 +15314,54 @@ const CMultiSelect = vue.defineComponent({
                     }, [])
                 : options.value;
         };
-        const nativeSelectRef = vue.ref();
-        vue.provide('nativeSelectRef', nativeSelectRef);
-        const searchRef = vue.ref();
-        const options = vue.ref(props.options);
-        const vOptions = vue.ref(props.options);
-        const search = vue.ref('');
-        const visible = vue.ref(props.visible);
-        const selected = vue.ref(getSelectedOptions(props.options));
-        const count = vue.ref(0);
-        vue.watch(() => props.options, (newValue, oldValue) => {
-            if (JSON.stringify(newValue) !== JSON.stringify(oldValue))
-                options.value = newValue;
-        });
-        vue.watch(options, () => {
-            const _selected = options.value && getSelectedOptions(options.value);
-            _selected.sort((a, b) => {
-                if (typeof a.order === 'undefined') {
-                    return -1;
-                }
-                if (b.order && a.order > b.order)
-                    return 1;
-                if (b.order && a.order < b.order)
-                    return -1;
-                return 0;
-            });
-            selected.value = _selected;
-        });
-        vue.watch([options, search], () => {
-            vOptions.value = filterOptionsList(search.value, options.value);
-        });
-        vue.watch(selected, () => {
-            nativeSelectRef.value &&
-                nativeSelectRef.value.dispatchEvent(new Event('change', { bubbles: true }));
-        });
+        // watch(
+        //   () => props.options,
+        //   (newValue, oldValue) => {
+        //     console.log(props.options)
+        //     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) options.value = newValue
+        //   },
+        // )
         const handleSearchChange = (event) => {
             const target = event.target;
             search.value = target.value.toLowerCase();
+            emit('filterChange', target.value);
         };
         const handleSearchKeyDown = (event) => {
-            if (search.value.length)
+            if (search.value.length) {
                 return;
+            }
             if (event.key === 'Backspace' || event.key === 'Delete') {
                 const last = selected.value.filter((option) => !option.disabled).pop();
                 if (last) {
                     selected.value = selected.value.filter((option) => option.value !== last.value);
-                    options.value = updateOptions(last.value);
                 }
             }
         };
         const handleOptionClick = (option) => {
-            options.value = updateOptions(option.value);
             if (!props.multiple) {
+                selected.value = [{ value: option.value, text: option.text }];
                 visible.value = false;
                 search.value = '';
                 if (searchRef.value) {
                     searchRef.value.value = '';
                 }
+                return;
+            }
+            if (selected.value.some((_option) => _option.value === option.value)) {
+                selected.value = selected.value.filter((_option) => _option.value !== option.value);
+            }
+            else {
+                selected.value = [
+                    ...selected.value,
+                    { value: option.value, text: option.text },
+                ];
             }
         };
         const handleSelectAll = () => {
-            options.value = toggleAllOptions(options.value, true);
+            selectOptions(flattenArray(options.value).filter((option) => !option.disabled));
         };
         const handleDeselectAll = () => {
-            options.value = toggleAllOptions(options.value, false);
+            selected.value = selected.value.filter((option) => option.disabled);
         };
         return () => [
             vue.h(CMultiSelectNativeSelect, {
@@ -15265,13 +15452,20 @@ const CMultiSelect = vue.defineComponent({
                     default: () => vue.h('div', {}, [
                         props.multiple &&
                             props.selectAll &&
-                            vue.h('button', { class: 'form-multi-select-all', onClick: () => handleSelectAll() }, props.selectAllLabel),
+                            vue.h('button', {
+                                class: 'form-multi-select-all',
+                                onClick: () => handleSelectAll(),
+                                type: 'button',
+                            }, props.selectAllLabel),
                         vue.h(CMultiSelectOptions, {
                             onOptionClick: (option) => handleOptionClick(option),
-                            options: vOptions.value,
+                            options: props.search === 'external'
+                                ? options.value
+                                : filterOptionsList(search.value, options.value),
                             optionsMaxHeight: props.optionsMaxHeight,
                             optionsStyle: props.optionsStyle,
                             searchNoResultsLabel: props.searchNoResultsLabel,
+                            selected: selected.value
                         }),
                     ]),
                 }),
@@ -15991,354 +16185,63 @@ const CPaginationItem = vue.defineComponent({
     },
 });
 
-const CSmartPagination = vue.defineComponent({
-    name: 'CSmartPagination',
+const CPaginationPlugin = {
+    install: (app) => {
+        app.component(CPagination.name, CPagination);
+        app.component(CPaginationItem.name, CPaginationItem);
+    },
+};
+
+const BREAKPOINTS$1 = [
+    'xxl',
+    'xl',
+    'lg',
+    'md',
+    'sm',
+    'xs',
+];
+const CPlaceholder = vue.defineComponent({
+    name: 'CPlaceholder',
     props: {
         /**
-         * Horizontall align
+         * Set animation type to better convey the perception of something being actively loaded.
          *
-         * @default 'start'
+         * @values 'glow', 'wave'
          */
-        align: {
+        animation: {
             type: String,
-            default: 'start',
+            default: undefined,
             require: false,
             validator: (value) => {
-                return ['start', 'center', 'end'].includes(value);
+                return ['glow', 'wave'].includes(value);
             },
         },
         /**
-         * Current page number
+         * Sets the color context of the component to one of CoreUI’s themed colors.
          *
-         * @default 1
+         * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        activePage: {
-            type: Number,
-            default: 1,
-            require: false,
-        },
+        color: Color,
         /**
-         * Show/hide arrows
-         *
-         * @default true
+         * Component used for the root node. Either a string to use a HTML element or a component.
          */
-        arrows: {
-            type: Boolean,
-            default: true,
-            require: false,
+        component: {
+            type: String,
+            default: 'span',
+            required: false,
         },
         /**
-         * Show/hide dots
+         * Size the component extra small, small, or large.
          *
-         * @default true
+         * @values 'xs', 'sm', 'lg'
          */
-        dots: {
-            type: Boolean,
-            default: true,
-            require: false,
-        },
-        /**
-         * Show double arrows buttons
-         *
-         * @default true
-         */
-        doubleArrows: {
-            type: Boolean,
-            default: true,
-            require: false,
-        },
-        /**
-         * The content of 'firstButton' button
-         *
-         * @default '&laquo;'
-         */
-        firstButton: {
-            type: String,
-            default: '&laquo;',
-            require: false,
-        },
-        /**
-         * The content of 'lastButton' button
-         *
-         * @default '&raquo;'
-         */
-        lastButton: {
-            type: String,
-            default: '&raquo;',
-            require: false,
-        },
-        /**
-         * Maximum items number
-         *
-         * @default 5
-         */
-        limit: {
-            type: Number,
-            default: 5,
-            require: false,
-        },
-        /**
-         * The content of 'nextButton' button
-         *
-         * @default '&rsaquo;'
-         */
-        nextButton: {
-            type: String,
-            default: '&rsaquo;',
-            require: false,
-        },
-        /**
-         * Number of pages
-         */
-        pages: {
-            type: Number,
-            default: 1000,
-            require: true,
-        },
-        /**
-         * The content of 'previousButton' button
-         *
-         * @default '&lsaquo;'
-         */
-        previousButton: {
-            type: String,
-            default: '&lsaquo;',
-            require: false,
-        },
-        /**
-         * Size of pagination, valid values: 'sm', 'lg'
-         */
-        size: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['sm', 'lg'].includes(value);
-            },
-        },
-    },
-    emits: [
-        /**
-         * On active page change callback.
-         */
-        'activePageChange',
-    ],
-    setup(props, { emit }) {
-        const activePage = vue.ref(props.activePage);
-        const limit = vue.ref(props.limit);
-        const pages = vue.ref(props.pages);
-        vue.watch(props, () => {
-            activePage.value = props.activePage;
-            limit.value = props.limit;
-            pages.value = props.pages;
-        });
-        const showDots = vue.computed(() => {
-            return props.dots && limit.value > 4 && limit.value < pages.value;
-        });
-        const maxPrevItems = vue.computed(() => {
-            return Math.floor((limit.value - 1) / 2);
-        });
-        const maxNextItems = vue.computed(() => {
-            return Math.ceil((limit.value - 1) / 2);
-        });
-        const beforeDots = vue.computed(() => {
-            return showDots.value && activePage.value > maxPrevItems.value + 1;
-        });
-        const afterDots = vue.computed(() => {
-            return showDots.value && activePage.value < pages.value - maxNextItems.value;
-        });
-        const computedLimit = vue.computed(() => {
-            return limit.value - (afterDots.value ? 1 : 0) - (beforeDots.value ? 1 : 0);
-        });
-        const range = vue.computed(() => {
-            return activePage.value + maxNextItems.value;
-        });
-        const lastItem = vue.computed(() => {
-            return range.value >= pages.value ? pages.value : range.value - (afterDots.value ? 1 : 0);
-        });
-        const itemsAmount = vue.computed(() => {
-            return pages.value < computedLimit.value ? pages.value : computedLimit.value;
-        });
-        const items = vue.computed(() => {
-            if (activePage.value - maxPrevItems.value <= 1) {
-                return Array.from({
-                    length: itemsAmount.value,
-                }, (_v, i) => i + 1);
-            }
-            else {
-                return Array.from({
-                    length: itemsAmount.value,
-                }, (_v, i) => {
-                    return lastItem.value - i;
-                }).reverse();
-            }
-        });
-        const setPage = (number) => {
-            if (number !== activePage.value) {
-                activePage.value = number;
-                emit('activePageChange', number);
-            }
-        };
-        return () => vue.h(CPagination, {
-            align: props.align,
-            'aria-label': 'pagination',
-            size: props.size,
-        }, {
-            default: () => [
-                props.doubleArrows &&
-                    vue.h(CPaginationItem, {
-                        onClick: () => {
-                            activePage.value !== 1 && setPage(1);
-                        },
-                        'aria-label': 'Go to first page',
-                        ...(activePage.value === 1 && {
-                            'aria-disabled': true,
-                            disabled: true,
-                        }),
-                    }, {
-                        default: () => typeof props.firstButton === 'string'
-                            ? vue.h('span', {
-                                innerHTML: props.firstButton,
-                            })
-                            : props.firstButton,
-                    }),
-                props.arrows &&
-                    vue.h(CPaginationItem, {
-                        onClick: () => {
-                            activePage.value !== 1 && setPage(activePage.value - 1);
-                        },
-                        'aria-label': 'Go to previous page',
-                        ...(activePage.value === 1 && {
-                            'aria-disabled': true,
-                            disabled: true,
-                        }),
-                    }, {
-                        default: () => typeof props.previousButton === 'string'
-                            ? vue.h('span', {
-                                innerHTML: props.previousButton,
-                            })
-                            : props.previousButton,
-                    }),
-                beforeDots.value &&
-                    vue.h(CPaginationItem, {
-                        role: 'separator',
-                        disabled: true,
-                    }, {
-                        default: () => '...',
-                    }),
-                items.value.map((i) => {
-                    return vue.h(CPaginationItem, {
-                        onClick: () => setPage(i),
-                        'aria-label': activePage.value === i ? `Current page ${i}` : `Go to page ${i}`,
-                        active: activePage.value === i,
-                    }, {
-                        default: () => i,
-                    });
-                }),
-                afterDots.value &&
-                    vue.h(CPaginationItem, {
-                        role: 'separator',
-                        disabled: true,
-                    }, {
-                        default: () => '...',
-                    }),
-                props.arrows &&
-                    vue.h(CPaginationItem, {
-                        onClick: () => {
-                            activePage.value !== pages.value && setPage(activePage.value + 1);
-                        },
-                        'aria-label': 'Go to next page',
-                        ...(activePage.value === pages.value && {
-                            'aria-disabled': true,
-                            disabled: true,
-                        }),
-                    }, {
-                        default: () => typeof props.nextButton === 'string'
-                            ? vue.h('span', {
-                                innerHTML: props.nextButton,
-                            })
-                            : props.nextButton,
-                    }),
-                props.doubleArrows &&
-                    vue.h(CPaginationItem, {
-                        onClick: () => {
-                            activePage.value !== pages.value && setPage(pages.value);
-                        },
-                        'aria-label': 'Go to last page',
-                        ...(activePage.value === pages.value && {
-                            'aria-disabled': true,
-                            disabled: true,
-                        }),
-                    }, {
-                        default: () => typeof props.lastButton === 'string'
-                            ? vue.h('span', {
-                                innerHTML: props.lastButton,
-                            })
-                            : props.lastButton,
-                    }),
-            ],
-        });
-    },
-});
-
-const CPaginationPlugin = {
-    install: (app) => {
-        app.component(CPagination.name, CPagination);
-        app.component(CPaginationItem.name, CPaginationItem);
-        app.component(CSmartPagination.name, CSmartPagination);
-    },
-};
-
-const BREAKPOINTS$1 = [
-    'xxl',
-    'xl',
-    'lg',
-    'md',
-    'sm',
-    'xs',
-];
-const CPlaceholder = vue.defineComponent({
-    name: 'CPlaceholder',
-    props: {
-        /**
-         * Set animation type to better convey the perception of something being actively loaded.
-         *
-         * @values 'glow', 'wave'
-         */
-        animation: {
-            type: String,
-            default: undefined,
-            require: false,
-            validator: (value) => {
-                return ['glow', 'wave'].includes(value);
-            },
-        },
-        /**
-         * 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,
-        /**
-         * Component used for the root node. Either a string to use a HTML element or a component.
-         */
-        component: {
-            type: String,
-            default: 'span',
-            required: false,
-        },
-        /**
-         * Size the component extra small, small, or large.
-         *
-         * @values 'xs', 'sm', 'lg'
-         */
-        size: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return ['xs', 'sm', 'lg'].includes(value);
-            },
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['xs', 'sm', 'lg'].includes(value);
+            },
         },
         /**
          * The number of columns on extra small devices (<576px).
@@ -16678,259 +16581,548 @@ const CPopover = vue.defineComponent({
     },
 });
 
-const CPopoverPlugin = {
+const CPopoverPlugin = {
+    install: (app) => {
+        app.component(CPopover.name, CPopover);
+    },
+};
+
+const isOnMobile = (element) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
+const CSidebar = vue.defineComponent({
+    name: 'CSidebar',
+    props: {
+        /**
+         * Sets if the color of text should be colored for a light or dark dark background.
+         *
+         * @values 'dark', light'
+         */
+        colorScheme: {
+            type: String,
+            default: undefined,
+            validator: (value) => {
+                return ['dark', 'light'].includes(value);
+            },
+        },
+        /**
+         * Make sidebar narrow.
+         */
+        narrow: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Set sidebar to overlaid variant.
+         */
+        overlaid: {
+            type: Boolean,
+            required: false,
+        },
+        /**
+         * Components placement, there’s no default placement.
+         * @values 'start', 'end'
+         */
+        placement: {
+            type: String,
+            default: undefined,
+            validator: (value) => {
+                return ['start', 'end'].includes(value);
+            },
+        },
+        /**
+         * Place sidebar in non-static positions.
+         */
+        position: {
+            type: String,
+            default: undefined,
+            validator: (value) => {
+                return ['fixed'].includes(value);
+            },
+        },
+        /**
+         * Size the component small, large, or extra large.
+         */
+        size: {
+            type: String,
+            default: undefined,
+            validator: (value) => {
+                return ['sm', 'lg', 'xl'].includes(value);
+            },
+        },
+        /**
+         * Expand narrowed sidebar on hover.
+         */
+        unfoldable: Boolean,
+        /**
+         * Toggle the visibility of sidebar component.
+         */
+        visible: Boolean,
+    },
+    emits: [
+        /**
+         * Callback fired when the component requests to be hidden.
+         */
+        'hide',
+        /**
+         * Callback fired when the component requests to be shown.
+         */
+        'show',
+        /**
+         * Event emitted after visibility of component changed.
+         */
+        'visible-change',
+    ],
+    setup(props, { attrs, slots, emit }) {
+        const mobile = vue.ref();
+        const inViewport = vue.ref();
+        const sidebarRef = vue.ref();
+        const visible = vue.ref(props.visible);
+        vue.watch(inViewport, () => {
+            emit('visible-change', inViewport.value);
+            inViewport.value ? emit('show') : emit('hide');
+        });
+        vue.watch(() => props.visible, () => (visible.value = props.visible));
+        vue.watch(mobile, () => {
+            if (mobile.value && visible.value)
+                visible.value = false;
+        });
+        vue.onMounted(() => {
+            mobile.value = isOnMobile(sidebarRef.value);
+            inViewport.value = isVisible(sidebarRef.value);
+            window.addEventListener('resize', () => handleResize());
+            window.addEventListener('mouseup', handleClickOutside);
+            window.addEventListener('keyup', handleKeyup);
+            sidebarRef.value.addEventListener('mouseup', handleOnClick);
+            sidebarRef.value.addEventListener('transitionend', () => {
+                inViewport.value = isVisible(sidebarRef.value);
+            });
+        });
+        vue.onBeforeUnmount(() => {
+            window.removeEventListener('resize', () => handleResize());
+            window.removeEventListener('mouseup', handleClickOutside);
+            window.removeEventListener('keyup', handleKeyup);
+            sidebarRef.value.removeEventListener('mouseup', handleOnClick);
+            sidebarRef.value.removeEventListener('transitionend', () => {
+                inViewport.value = isVisible(sidebarRef.value);
+            });
+        });
+        const handleHide = () => {
+            visible.value = false;
+            emit('visible-change', false);
+        };
+        const handleResize = () => {
+            mobile.value = isOnMobile(sidebarRef.value);
+            inViewport.value = isVisible(sidebarRef.value);
+        };
+        const handleKeyup = (event) => {
+            if (mobile.value && !sidebarRef.value.contains(event.target)) {
+                handleHide();
+            }
+        };
+        const handleClickOutside = (event) => {
+            if (mobile.value && !sidebarRef.value.contains(event.target)) {
+                handleHide();
+            }
+        };
+        const handleOnClick = (event) => {
+            const target = event.target;
+            target &&
+                target.classList.contains('nav-link') &&
+                !target.classList.contains('nav-group-toggle') &&
+                mobile.value &&
+                handleHide();
+        };
+        return () => [
+            vue.h('div', {
+                class: [
+                    'sidebar',
+                    {
+                        [`sidebar-${props.colorScheme}`]: props.colorScheme,
+                        'sidebar-narrow': props.narrow,
+                        'sidebar-overlaid': props.overlaid,
+                        [`sidebar-${props.placement}`]: props.placement,
+                        [`sidebar-${props.position}`]: props.position,
+                        [`sidebar-${props.size}`]: props.size,
+                        'sidebar-narrow-unfoldable': props.unfoldable,
+                        show: visible.value === true && mobile.value,
+                        hide: visible.value === false && !mobile.value,
+                    },
+                    attrs.class,
+                ],
+                ref: sidebarRef,
+            }, slots.default && slots.default()),
+            mobile.value &&
+                vue.h(CBackdrop, {
+                    class: 'sidebar-backdrop d-none',
+                    visible: props.visible,
+                    onClick: () => handleHide(),
+                }),
+        ];
+    },
+});
+
+const CSidebarBrand = vue.defineComponent({
+    name: 'CSidebarBrand',
+    setup(_, { slots }) {
+        return () => vue.h('div', { class: 'sidebar-brand' }, slots.default && slots.default());
+    },
+});
+
+const CSidebarFooter = vue.defineComponent({
+    name: 'CSidebarFooter',
+    setup(_, { slots }) {
+        return () => vue.h('div', { class: 'sidebar-footer' }, slots.default && slots.default());
+    },
+});
+
+const CSidebarHeader = vue.defineComponent({
+    name: 'CSidebarHeader',
+    setup(_, { slots }) {
+        return () => vue.h('div', { class: 'sidebar-header' }, slots.default && slots.default());
+    },
+});
+
+const CSidebarNav = vue.defineComponent({
+    name: 'CSidebarNav',
+    setup(_, { slots }) {
+        const visibleGroup = vue.ref();
+        const handleVisibleChange = (visible, index) => {
+            if (visible) {
+                visibleGroup.value = index;
+            }
+            else {
+                if (visibleGroup.value === index) {
+                    visibleGroup.value = 0;
+                }
+            }
+        };
+        const isVisible = (index) => Boolean(visibleGroup.value === index);
+        return () => vue.h('ul', {
+            class: 'sidebar-nav',
+        }, slots.default &&
+            slots.default().map((vnode, index) => {
+                // @ts-expect-error name is defined in component
+                if (vnode.type.name === 'CNavGroup') {
+                    return vue.h(vnode, {
+                        onVisibleChange: (visible) => handleVisibleChange(visible, index + 1),
+                        ...(visibleGroup.value && { visible: isVisible(index + 1) }),
+                    });
+                }
+                return vnode;
+            }));
+    },
+});
+
+const CSidebarToggler = vue.defineComponent({
+    name: 'CSidebarToggler',
+    setup(_, { slots }) {
+        return () => vue.h('button', { class: 'sidebar-toggler' }, slots.default && slots.default());
+    },
+});
+
+const CSidebarPlugin = {
     install: (app) => {
-        app.component(CPopover.name, CPopover);
+        app.component(CSidebar.name, CSidebar);
+        app.component(CSidebarBrand.name, CSidebarBrand);
+        app.component(CSidebarFooter.name, CSidebarFooter);
+        app.component(CSidebarHeader.name, CSidebarHeader);
+        app.component(CSidebarNav.name, CSidebarNav);
+        app.component(CSidebarToggler.name, CSidebarToggler);
     },
 };
 
-const isOnMobile = (element) => Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'));
-const isVisible = (element) => {
-    const rect = element.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-};
-const CSidebar = vue.defineComponent({
-    name: 'CSidebar',
+const CSmartPagination = vue.defineComponent({
+    name: 'CSmartPagination',
     props: {
         /**
-         * Sets if the color of text should be colored for a light or dark dark background.
+         * Horizontall align
          *
-         * @values 'dark', light'
+         * @default 'start'
          */
-        colorScheme: {
+        align: {
             type: String,
-            default: undefined,
+            default: 'start',
+            require: false,
             validator: (value) => {
-                return ['dark', 'light'].includes(value);
+                return ['start', 'center', 'end'].includes(value);
             },
         },
         /**
-         * Make sidebar narrow.
+         * Current page number
+         *
+         * @default 1
          */
-        narrow: {
+        activePage: {
+            type: Number,
+            default: 1,
+            require: false,
+        },
+        /**
+         * Show/hide arrows
+         *
+         * @default true
+         */
+        arrows: {
             type: Boolean,
-            required: false,
+            default: true,
+            require: false,
         },
         /**
-         * Set sidebar to overlaid variant.
+         * Show/hide dots
+         *
+         * @default true
          */
-        overlaid: {
+        dots: {
             type: Boolean,
-            required: false,
+            default: true,
+            require: false,
         },
         /**
-         * Components placement, there’s no default placement.
-         * @values 'start', 'end'
+         * Show double arrows buttons
+         *
+         * @default true
          */
-        placement: {
-            type: String,
-            default: undefined,
-            validator: (value) => {
-                return ['start', 'end'].includes(value);
-            },
+        doubleArrows: {
+            type: Boolean,
+            default: true,
+            require: false,
         },
         /**
-         * Place sidebar in non-static positions.
+         * The content of 'firstButton' button
+         *
+         * @default '&laquo;'
          */
-        position: {
+        firstButton: {
             type: String,
-            default: undefined,
-            validator: (value) => {
-                return ['fixed'].includes(value);
-            },
+            default: '&laquo;',
+            require: false,
         },
         /**
-         * Size the component small, large, or extra large.
+         * The content of 'lastButton' button
+         *
+         * @default '&raquo;'
          */
-        size: {
+        lastButton: {
             type: String,
-            default: undefined,
-            validator: (value) => {
-                return ['sm', 'lg', 'xl'].includes(value);
-            },
+            default: '&raquo;',
+            require: false,
         },
         /**
-         * Expand narrowed sidebar on hover.
+         * Maximum items number
+         *
+         * @default 5
          */
-        unfoldable: Boolean,
+        limit: {
+            type: Number,
+            default: 5,
+            require: false,
+        },
         /**
-         * Toggle the visibility of sidebar component.
+         * The content of 'nextButton' button
+         *
+         * @default '&rsaquo;'
          */
-        visible: Boolean,
-    },
-    emits: [
+        nextButton: {
+            type: String,
+            default: '&rsaquo;',
+            require: false,
+        },
         /**
-         * Callback fired when the component requests to be hidden.
+         * Number of pages
          */
-        'hide',
+        pages: {
+            type: Number,
+            default: 1000,
+            require: true,
+        },
         /**
-         * Callback fired when the component requests to be shown.
+         * The content of 'previousButton' button
+         *
+         * @default '&lsaquo;'
          */
-        'show',
+        previousButton: {
+            type: String,
+            default: '&lsaquo;',
+            require: false,
+        },
         /**
-         * Event emitted after visibility of component changed.
+         * Size of pagination, valid values: 'sm', 'lg'
          */
-        'visible-change',
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return ['sm', 'lg'].includes(value);
+            },
+        },
+    },
+    emits: [
+        /**
+         * On active page change callback.
+         */
+        'activePageChange',
     ],
-    setup(props, { attrs, slots, emit }) {
-        const mobile = vue.ref();
-        const inViewport = vue.ref();
-        const sidebarRef = vue.ref();
-        const visible = vue.ref(props.visible);
-        vue.watch(inViewport, () => {
-            emit('visible-change', inViewport.value);
-            inViewport.value ? emit('show') : emit('hide');
+    setup(props, { emit }) {
+        const activePage = vue.ref(props.activePage);
+        const limit = vue.ref(props.limit);
+        const pages = vue.ref(props.pages);
+        vue.watch(props, () => {
+            activePage.value = props.activePage;
+            limit.value = props.limit;
+            pages.value = props.pages;
         });
-        vue.watch(() => props.visible, () => (visible.value = props.visible));
-        vue.watch(mobile, () => {
-            if (mobile.value && visible.value)
-                visible.value = false;
+        const showDots = vue.computed(() => {
+            return props.dots && limit.value > 4 && limit.value < pages.value;
+        });
+        const maxPrevItems = vue.computed(() => {
+            return Math.floor((limit.value - 1) / 2);
+        });
+        const maxNextItems = vue.computed(() => {
+            return Math.ceil((limit.value - 1) / 2);
+        });
+        const beforeDots = vue.computed(() => {
+            return showDots.value && activePage.value > maxPrevItems.value + 1;
+        });
+        const afterDots = vue.computed(() => {
+            return showDots.value && activePage.value < pages.value - maxNextItems.value;
+        });
+        const computedLimit = vue.computed(() => {
+            return limit.value - (afterDots.value ? 1 : 0) - (beforeDots.value ? 1 : 0);
+        });
+        const range = vue.computed(() => {
+            return activePage.value + maxNextItems.value;
         });
-        vue.onMounted(() => {
-            mobile.value = isOnMobile(sidebarRef.value);
-            inViewport.value = isVisible(sidebarRef.value);
-            window.addEventListener('resize', () => handleResize());
-            window.addEventListener('mouseup', handleClickOutside);
-            window.addEventListener('keyup', handleKeyup);
-            sidebarRef.value.addEventListener('mouseup', handleOnClick);
-            sidebarRef.value.addEventListener('transitionend', () => {
-                inViewport.value = isVisible(sidebarRef.value);
-            });
+        const lastItem = vue.computed(() => {
+            return range.value >= pages.value ? pages.value : range.value - (afterDots.value ? 1 : 0);
         });
-        vue.onBeforeUnmount(() => {
-            window.removeEventListener('resize', () => handleResize());
-            window.removeEventListener('mouseup', handleClickOutside);
-            window.removeEventListener('keyup', handleKeyup);
-            sidebarRef.value.removeEventListener('mouseup', handleOnClick);
-            sidebarRef.value.removeEventListener('transitionend', () => {
-                inViewport.value = isVisible(sidebarRef.value);
-            });
+        const itemsAmount = vue.computed(() => {
+            return pages.value < computedLimit.value ? pages.value : computedLimit.value;
         });
-        const handleHide = () => {
-            visible.value = false;
-            emit('visible-change', false);
-        };
-        const handleResize = () => {
-            mobile.value = isOnMobile(sidebarRef.value);
-            inViewport.value = isVisible(sidebarRef.value);
-        };
-        const handleKeyup = (event) => {
-            if (mobile.value && !sidebarRef.value.contains(event.target)) {
-                handleHide();
-            }
-        };
-        const handleClickOutside = (event) => {
-            if (mobile.value && !sidebarRef.value.contains(event.target)) {
-                handleHide();
-            }
-        };
-        const handleOnClick = (event) => {
-            const target = event.target;
-            target &&
-                target.classList.contains('nav-link') &&
-                !target.classList.contains('nav-group-toggle') &&
-                mobile.value &&
-                handleHide();
-        };
-        return () => [
-            vue.h('div', {
-                class: [
-                    'sidebar',
-                    {
-                        [`sidebar-${props.colorScheme}`]: props.colorScheme,
-                        'sidebar-narrow': props.narrow,
-                        'sidebar-overlaid': props.overlaid,
-                        [`sidebar-${props.placement}`]: props.placement,
-                        [`sidebar-${props.position}`]: props.position,
-                        [`sidebar-${props.size}`]: props.size,
-                        'sidebar-narrow-unfoldable': props.unfoldable,
-                        show: visible.value === true && mobile.value,
-                        hide: visible.value === false && !mobile.value,
-                    },
-                    attrs.class,
-                ],
-                ref: sidebarRef,
-            }, slots.default && slots.default()),
-            mobile.value &&
-                vue.h(CBackdrop, {
-                    class: 'sidebar-backdrop d-none',
-                    visible: props.visible,
-                    onClick: () => handleHide(),
-                }),
-        ];
-    },
-});
-
-const CSidebarBrand = vue.defineComponent({
-    name: 'CSidebarBrand',
-    setup(_, { slots }) {
-        return () => vue.h('div', { class: 'sidebar-brand' }, slots.default && slots.default());
-    },
-});
-
-const CSidebarFooter = vue.defineComponent({
-    name: 'CSidebarFooter',
-    setup(_, { slots }) {
-        return () => vue.h('div', { class: 'sidebar-footer' }, slots.default && slots.default());
-    },
-});
-
-const CSidebarHeader = vue.defineComponent({
-    name: 'CSidebarHeader',
-    setup(_, { slots }) {
-        return () => vue.h('div', { class: 'sidebar-header' }, slots.default && slots.default());
-    },
-});
-
-const CSidebarNav = vue.defineComponent({
-    name: 'CSidebarNav',
-    setup(_, { slots }) {
-        const visibleGroup = vue.ref();
-        const handleVisibleChange = (visible, index) => {
-            if (visible) {
-                visibleGroup.value = index;
+        const items = vue.computed(() => {
+            if (activePage.value - maxPrevItems.value <= 1) {
+                return Array.from({
+                    length: itemsAmount.value,
+                }, (_v, i) => i + 1);
             }
             else {
-                if (visibleGroup.value === index) {
-                    visibleGroup.value = 0;
-                }
+                return Array.from({
+                    length: itemsAmount.value,
+                }, (_v, i) => {
+                    return lastItem.value - i;
+                }).reverse();
+            }
+        });
+        const setPage = (number) => {
+            if (number !== activePage.value) {
+                activePage.value = number;
+                emit('activePageChange', number);
             }
         };
-        const isVisible = (index) => Boolean(visibleGroup.value === index);
-        return () => vue.h('ul', {
-            class: 'sidebar-nav',
-        }, slots.default &&
-            slots.default().map((vnode, index) => {
-                // @ts-expect-error name is defined in component
-                if (vnode.type.name === 'CNavGroup') {
-                    return vue.h(vnode, {
-                        onVisibleChange: (visible) => handleVisibleChange(visible, index + 1),
-                        ...(visibleGroup.value && { visible: isVisible(index + 1) }),
+        return () => vue.h(CPagination, {
+            align: props.align,
+            'aria-label': 'pagination',
+            size: props.size,
+        }, {
+            default: () => [
+                props.doubleArrows &&
+                    vue.h(CPaginationItem, {
+                        onClick: () => {
+                            activePage.value !== 1 && setPage(1);
+                        },
+                        'aria-label': 'Go to first page',
+                        ...(activePage.value === 1 && {
+                            'aria-disabled': true,
+                            disabled: true,
+                        }),
+                    }, {
+                        default: () => typeof props.firstButton === 'string'
+                            ? vue.h('span', {
+                                innerHTML: props.firstButton,
+                            })
+                            : props.firstButton,
+                    }),
+                props.arrows &&
+                    vue.h(CPaginationItem, {
+                        onClick: () => {
+                            activePage.value !== 1 && setPage(activePage.value - 1);
+                        },
+                        'aria-label': 'Go to previous page',
+                        ...(activePage.value === 1 && {
+                            'aria-disabled': true,
+                            disabled: true,
+                        }),
+                    }, {
+                        default: () => typeof props.previousButton === 'string'
+                            ? vue.h('span', {
+                                innerHTML: props.previousButton,
+                            })
+                            : props.previousButton,
+                    }),
+                beforeDots.value &&
+                    vue.h(CPaginationItem, {
+                        role: 'separator',
+                        disabled: true,
+                    }, {
+                        default: () => '...',
+                    }),
+                items.value.map((i) => {
+                    return vue.h(CPaginationItem, {
+                        onClick: () => setPage(i),
+                        'aria-label': activePage.value === i ? `Current page ${i}` : `Go to page ${i}`,
+                        active: activePage.value === i,
+                    }, {
+                        default: () => i,
                     });
-                }
-                return vnode;
-            }));
-    },
-});
-
-const CSidebarToggler = vue.defineComponent({
-    name: 'CSidebarToggler',
-    setup(_, { slots }) {
-        return () => vue.h('button', { class: 'sidebar-toggler' }, slots.default && slots.default());
+                }),
+                afterDots.value &&
+                    vue.h(CPaginationItem, {
+                        role: 'separator',
+                        disabled: true,
+                    }, {
+                        default: () => '...',
+                    }),
+                props.arrows &&
+                    vue.h(CPaginationItem, {
+                        onClick: () => {
+                            activePage.value !== pages.value && setPage(activePage.value + 1);
+                        },
+                        'aria-label': 'Go to next page',
+                        ...(activePage.value === pages.value && {
+                            'aria-disabled': true,
+                            disabled: true,
+                        }),
+                    }, {
+                        default: () => typeof props.nextButton === 'string'
+                            ? vue.h('span', {
+                                innerHTML: props.nextButton,
+                            })
+                            : props.nextButton,
+                    }),
+                props.doubleArrows &&
+                    vue.h(CPaginationItem, {
+                        onClick: () => {
+                            activePage.value !== pages.value && setPage(pages.value);
+                        },
+                        'aria-label': 'Go to last page',
+                        ...(activePage.value === pages.value && {
+                            'aria-disabled': true,
+                            disabled: true,
+                        }),
+                    }, {
+                        default: () => typeof props.lastButton === 'string'
+                            ? vue.h('span', {
+                                innerHTML: props.lastButton,
+                            })
+                            : props.lastButton,
+                    }),
+            ],
+        });
     },
 });
 
-const CSidebarPlugin = {
+const CSmartPaginationPlugin = {
     install: (app) => {
-        app.component(CSidebar.name, CSidebar);
-        app.component(CSidebarBrand.name, CSidebarBrand);
-        app.component(CSidebarFooter.name, CSidebarFooter);
-        app.component(CSidebarHeader.name, CSidebarHeader);
-        app.component(CSidebarNav.name, CSidebarNav);
-        app.component(CSidebarToggler.name, CSidebarToggler);
+        app.component(CSmartPagination.name, CSmartPagination);
     },
 };
 
@@ -16957,7 +17149,6 @@ const CTableBody = vue.defineComponent({
 
 const CTableCaption = vue.defineComponent({
     name: 'CTableCaption',
-    props: {},
     setup(_, { slots }) {
         return () => vue.h('caption', {}, slots.default && slots.default());
     },
@@ -17973,13 +18164,13 @@ const CIcon = vue.defineComponent({
     },
 });
 
-const cilArrowBottom = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75' class='ci-primary'/>"];
+var cilArrowBottom = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='367.997 338.75 271.999 434.747 271.999 17.503 239.999 17.503 239.999 434.745 144.003 338.75 121.376 361.377 256 496 390.624 361.377 367.997 338.75' class='ci-primary'/>"];
 
-const cilArrowTop = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>"];
+var cilArrowTop = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='390.624 150.625 256 16 121.376 150.625 144.004 173.252 240.001 77.254 240.001 495.236 272.001 495.236 272.001 77.257 367.996 173.252 390.624 150.625' class='ci-primary'/>"];
 
-const cilFilterX = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>"];
+var cilFilterX = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='40 16 40 53.828 109.024 136 150.815 136 76.896 48 459.51 48 304 242.388 304 401.373 241.373 464 240 464 240 368 208 368 208 496 254.627 496 336 414.627 336 253.612 496 53.612 496 16 40 16' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='166.403 248.225 226.864 187.763 204.237 165.135 143.775 225.597 83.313 165.135 60.687 187.763 121.148 248.225 60.687 308.687 83.313 331.314 143.775 270.852 204.237 331.314 226.864 308.687 166.403 248.225' class='ci-primary'/>"];
 
-const cilSwapVertical = ["512 512","<polygon fill='var(--ci-primary-color, currentColor)' points='384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372' class='ci-primary'/>"];
+var cilSwapVertical = ["512 512", "<polygon fill='var(--ci-primary-color, currentColor)' points='384 433.373 384 160 352 160 352 434.51 282.177 364.687 259.55 387.313 367.432 495.196 475.313 387.313 452.687 364.687 384 433.373' class='ci-primary'/><polygon fill='var(--ci-primary-color, currentColor)' points='159.432 17.372 51.55 125.255 74.177 147.882 144 78.059 144 352 176 352 176 79.195 244.687 147.882 267.313 125.255 159.432 17.372' class='ci-primary'/>"];
 
 const CSmartTable = vue.defineComponent({
     name: 'CSmartTable',
@@ -18088,6 +18279,7 @@ const CSmartTable = vue.defineComponent({
          */
         itemsPerPage: {
             type: Number,
+            default: 10,
             required: false,
         },
         /**
@@ -18136,7 +18328,7 @@ const CSmartTable = vue.defineComponent({
          * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
          */
         pagination: {
-            type: Boolean,
+            type: [Boolean, Object],
             required: false,
         },
         /**
@@ -18623,12 +18815,14 @@ const CSmartTable = vue.defineComponent({
                 }, [
                     vue.h('div', {
                         class: 'col',
-                    }, props.pagination && numberOfPages.value > 1
+                    }, (props.pagination && numberOfPages.value > 1) || props.paginationProps
                         ? vue.h(CSmartPagination, {
-                            ...props.paginationProps,
                             pages: numberOfPages.value,
                             activePage: activePage.value,
-                            onActivePageChange: handleActivePageChange,
+                            ...props.paginationProps,
+                            onActivePageChange: (page) => typeof props.pagination === 'object' && props.pagination.external
+                                ? emit('activePageChange', page)
+                                : handleActivePageChange(page),
                         })
                         : ''),
                     vue.h('div', {
@@ -19757,7 +19951,6 @@ var Components = /*#__PURE__*/Object.freeze({
     CPaginationPlugin: CPaginationPlugin,
     CPagination: CPagination,
     CPaginationItem: CPaginationItem,
-    CSmartPagination: CSmartPagination,
     CPicker: CPicker,
     CPickerPlugin: CPickerPlugin,
     CPlaceholderPlugin: CPlaceholderPlugin,
@@ -19774,6 +19967,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CSidebarHeader: CSidebarHeader,
     CSidebarNav: CSidebarNav,
     CSidebarToggler: CSidebarToggler,
+    CSmartPaginationPlugin: CSmartPaginationPlugin,
+    CSmartPagination: CSmartPagination,
     CSmartTablePlugin: CSmartTablePlugin,
     CSmartTable: CSmartTable,
     CSpinnerPlugin: CSpinnerPlugin,
@@ -20181,6 +20376,7 @@ exports.CSidebarNav = CSidebarNav;
 exports.CSidebarPlugin = CSidebarPlugin;
 exports.CSidebarToggler = CSidebarToggler;
 exports.CSmartPagination = CSmartPagination;
+exports.CSmartPaginationPlugin = CSmartPaginationPlugin;
 exports.CSmartTable = CSmartTable;
 exports.CSmartTablePlugin = CSmartTablePlugin;
 exports.CSpinner = CSpinner;