@coreui/vue-pro 4.7.0 → 4.8.0-next.1

package/dist/index.js

@@ -1909,38 +1909,6 @@ const CCardPlugin = {
     },
 };
 
-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 isInViewport = (element) => {
     const rect = element.getBoundingClientRect();
     return (Math.floor(rect.top) >= 0 &&
@@ -8719,38 +8687,34 @@ const getAmPm = (date, locale) => {
     }
     return date.getHours() >= 12 ? 'pm' : 'am';
 };
-const getListOfHours = (locale, ampm = 'auto') => Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {
-    return {
-        value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,
-        label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(locale),
-    };
-});
-const getListOfMinutes = (locale, valueAsString = false) => Array.from({ length: 60 }, (_, i) => {
-    const d = new Date();
-    d.setMinutes(i);
-    return {
-        value: valueAsString ? i.toString() : i,
-        label: d
-            .toLocaleTimeString(locale, {
-            minute: '2-digit',
-            second: '2-digit',
-        })
-            .split(/[^A-Za-z0-9]/)[0],
-    };
-});
-const getListOfSeconds = (locale, valueAsString = false) => Array.from({ length: 60 }, (_, i) => {
-    const d = new Date();
-    d.setSeconds(i);
+const getLocalizedTimePartials = (locale, ampm = 'auto') => {
+    const date = new Date();
+    const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el));
+    const listOfHours = Array.from({ length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 }, (_, i) => {
+        return {
+            value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,
+            label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),
+        };
+    });
+    const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {
+        date.setMinutes(i);
+        return {
+            value: i,
+            label: date
+                .toLocaleTimeString(locale, {
+                minute: '2-digit',
+                second: '2-digit',
+            })
+                .split(/[^A-Za-z0-9\u06F0-\u06F90-9]/)[0],
+        };
+    });
     return {
-        value: valueAsString ? i.toString() : i,
-        label: d
-            .toLocaleTimeString(locale, {
-            minute: '2-digit',
-            second: '2-digit',
-        })
-            .split(/[^A-Za-z0-9]/)[1],
+        listOfHours,
+        listOfMinutes: listOfMinutesSeconds,
+        listOfSeconds: listOfMinutesSeconds,
+        hour12,
     };
-});
+};
 const getSelectedHour = (date, locale, ampm = 'auto') => date
     ? (ampm === 'auto' && isAmPm(locale)) || ampm === true
         ? convert24hTo12h(date.getHours())
@@ -9024,14 +8988,21 @@ const CTimePicker = vue.defineComponent({
         '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');
+        const initialDate = vue.ref(null);
+        const visible = vue.ref(props.visible);
+        const localizedTimePartials = vue.ref({
+            listOfHours: [],
+            listOfMinutes: [],
+            listOfSeconds: [],
+            hour12: false,
+        });
         vue.watch(() => props.time, () => {
             date.value = convertTimeToDate(props.time);
         });
         vue.watch(date, () => {
+            localizedTimePartials.value = getLocalizedTimePartials(props.locale, props.ampm);
             if (date.value) {
                 ampm.value = getAmPm(new Date(date.value), props.locale);
             }
@@ -9053,7 +9024,7 @@ const CTimePicker = vue.defineComponent({
                 }
             }
             if (set === 'hours') {
-                if ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm === true) {
+                if (localizedTimePartials.value && localizedTimePartials.value.hour12) {
                     _date.setHours(convert12hTo24h(ampm.value, parseInt(value)));
                 }
                 else {
@@ -9083,8 +9054,7 @@ const CTimePicker = vue.defineComponent({
                 readonly: props.inputReadOnly,
                 value: date.value
                     ? date.value.toLocaleTimeString(props.locale, {
-                        hour12: (props.ampm === 'auto' && isAmPm(props.locale)) ||
-                            (props.ampm === 'boolean' && props.ampm),
+                        hour12: localizedTimePartials.value && localizedTimePartials.value.hour12,
                         ...(!props.seconds && { timeStyle: 'short' }),
                     })
                     : '',
@@ -9111,33 +9081,45 @@ const CTimePicker = vue.defineComponent({
             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,
-                    };
-                }),
+                options: localizedTimePartials.value &&
+                    localizedTimePartials.value.listOfHours?.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) }),
             }),
             ':',
-            // @ts-expect-error the getListOfMinutes function returns corect type
             vue.h(CFormSelect, {
                 disabled: props.disabled,
-                options: getListOfMinutes(props.locale, true),
+                options: localizedTimePartials.value &&
+                    localizedTimePartials.value.listOfMinutes.map((option) => {
+                        return {
+                            value: option.value.toString(),
+                            label: option.label,
+                        };
+                    }),
                 onChange: (event) => handleTimeChange('minutes', event.target.value),
                 ...(date.value && { value: getSelectedMinutes(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),
+                    options: localizedTimePartials.value &&
+                        localizedTimePartials.value.listOfSeconds.map((option) => {
+                            return {
+                                value: option.value.toString(),
+                                label: option.label,
+                            };
+                        }),
                     onChange: (event) => handleTimeChange('seconds', event.target.value),
                     ...(date.value && { value: getSelectedSeconds(date.value) }),
                 }),
-            isAmPm(props.locale) &&
+            localizedTimePartials.value &&
+                localizedTimePartials.value.hour12 &&
                 vue.h(CFormSelect, {
                     disabled: props.disabled,
                     options: [
@@ -9150,22 +9132,23 @@ const CTimePicker = vue.defineComponent({
         ];
         const TimePickerRoll = () => [
             vue.h(CTimePickerRollCol, {
-                elements: getListOfHours(props.locale, props.ampm),
+                elements: localizedTimePartials.value && localizedTimePartials.value.listOfHours,
                 onClick: (index) => handleTimeChange('hours', index.toString()),
                 selected: getSelectedHour(date.value, props.locale, props.ampm),
             }),
             vue.h(CTimePickerRollCol, {
-                elements: getListOfMinutes(props.locale),
+                elements: localizedTimePartials.value && localizedTimePartials.value.listOfMinutes,
                 onClick: (index) => handleTimeChange('minutes', index.toString()),
                 selected: getSelectedMinutes(date.value),
             }),
             props.seconds &&
                 vue.h(CTimePickerRollCol, {
-                    elements: getListOfSeconds(props.locale),
+                    elements: localizedTimePartials.value && localizedTimePartials.value.listOfSeconds,
                     onClick: (index) => handleTimeChange('seconds', index.toString()),
                     selected: getSelectedSeconds(date.value),
                 }),
-            ((props.ampm === 'auto' && isAmPm(props.locale)) || props.ampm === true) &&
+            localizedTimePartials.value &&
+                localizedTimePartials.value.hour12 &&
                 vue.h(CTimePickerRollCol, {
                     elements: [
                         { value: 'am', label: 'AM' },
@@ -10488,16 +10471,16 @@ const CElementCover = vue.defineComponent({
         return () => vue.h('div', {
             style: { ...coverStyles, ...customBoundaries.value },
             ref: elementCoverRef,
+        }, vue.h('div', {
+            style: {
+                position: 'absolute',
+                top: '50%',
+                left: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+            },
         }, slots.default
             ? slots.default()
-            : vue.h('div', {
-                style: {
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translateX(-50%) translateY(-50%)',
-                },
-            }, vue.h(CSpinner, {
+            : vue.h(CSpinner, {
                 variant: 'grow',
                 color: 'primary',
             })));
@@ -11187,7 +11170,6 @@ const CModal = vue.defineComponent({
          */
         alignment: {
             default: 'top',
-            required: false,
             validator: (value) => {
                 return ['top', 'center'].includes(value);
             },
@@ -11195,12 +11177,20 @@ const CModal = vue.defineComponent({
         /**
          * Apply a backdrop on body while offcanvas is open.
          *
-         * @values 'static'
+         * @values boolean | 'static'
          */
         backdrop: {
             type: [Boolean, String],
             default: true,
-            require: false,
+            validator: (value) => {
+                if (typeof value == 'string') {
+                    return ['static'].includes(value);
+                }
+                if (typeof value == 'boolean') {
+                    return true;
+                }
+                return false;
+            },
         },
         /**
          * A string of all className you want applied to the modal content component.
@@ -11208,7 +11198,6 @@ const CModal = vue.defineComponent({
         contentClassName: {
             type: String,
             default: undefined,
-            required: false,
         },
         /**
          * Set modal to covers the entire user viewport
@@ -11218,7 +11207,6 @@ const CModal = vue.defineComponent({
         fullscreen: {
             type: [Boolean, String],
             default: undefined,
-            required: false,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
@@ -11235,14 +11223,12 @@ const CModal = vue.defineComponent({
         keyboard: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * Create a scrollable modal that allows scrolling the modal body.
          */
         scrollable: {
             type: Boolean,
-            required: false,
         },
         /**
          * Size the component small, large, or extra large.
@@ -11252,7 +11238,6 @@ const CModal = vue.defineComponent({
         size: {
             type: String,
             default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg', 'xl'].includes(value);
             },
@@ -11263,7 +11248,6 @@ const CModal = vue.defineComponent({
         transition: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
@@ -11271,7 +11255,6 @@ const CModal = vue.defineComponent({
         unmountOnClose: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * Toggle the visibility of alert component.
@@ -11519,6 +11502,159 @@ const CMultiSelectNativeSelect = vue.defineComponent({
     },
 });
 
+const CVirtualScroller = vue.defineComponent({
+    name: 'CVirtualScroller',
+    props: {
+        /**
+         * Amount of visible items
+         */
+        visibleItems: {
+            type: Number,
+            default: 10,
+        },
+    },
+    setup(props, { slots }) {
+        const virtualScrollRef = vue.ref();
+        const virtualScrollContentRef = vue.ref();
+        const currentItemIndex = vue.ref(1);
+        const itemHeight = vue.ref(0);
+        const itemsNumber = vue.ref(0);
+        const viewportPadding = vue.ref(0);
+        const buffer = vue.computed(() => Math.floor(props.visibleItems / 2));
+        const maxHeight = vue.computed(() => itemsNumber.value * itemHeight.value + 2 * viewportPadding.value);
+        const viewportHeight = vue.computed(() => props.visibleItems * itemHeight.value + 2 * viewportPadding.value);
+        vue.onMounted(() => {
+            if (virtualScrollRef.value) {
+                viewportPadding.value = parseFloat(getComputedStyle(virtualScrollRef.value).paddingTop);
+                // It's necessary to calculate heights of items
+                virtualScrollRef.value.dispatchEvent(new CustomEvent('scroll'));
+            }
+        });
+        const handleScroll = (scrollTop) => {
+            currentItemIndex.value =
+                itemHeight.value && Math.max(Math.ceil(scrollTop / itemHeight.value), 1);
+        };
+        return () => {
+            const children = slots.default
+                ? Array.isArray(slots.default()[0].children)
+                    ? slots.default()[0].children
+                    : slots.default()
+                : [];
+            itemsNumber.value = children && children.length ? children.length : 0;
+            return vue.h('div', {
+                class: ['virtual-scroller'],
+                onScroll: (event) => handleScroll(event.target.scrollTop),
+                style: {
+                    height: `${maxHeight.value > viewportHeight.value ? viewportHeight.value : maxHeight.value}px`,
+                    overflowY: 'auto',
+                },
+                ref: virtualScrollRef,
+            }, vue.h('div', {
+                class: 'virtual-scroller-content',
+                style: {
+                    height: `${maxHeight.value}px`,
+                },
+                ref: virtualScrollContentRef,
+            }, children.map((slot, index) => index + 1 > Math.max(currentItemIndex.value - buffer.value, 0) &&
+                index + 1 <= currentItemIndex.value + props.visibleItems + buffer.value &&
+                vue.cloneVNode(slot, {
+                    class: [
+                        {
+                            'virtual-scroller-item-preload': index + 1 > currentItemIndex.value + props.visibleItems ||
+                                index + 1 < currentItemIndex.value,
+                        },
+                    ],
+                    style: {
+                        ...(currentItemIndex.value > buffer.value && {
+                            transform: `translateY(${(currentItemIndex.value - buffer.value) * itemHeight.value}px)`,
+                        }),
+                    },
+                    ref: (node) => {
+                        if (node && node.offsetHeight) {
+                            itemHeight.value =
+                                node.offsetHeight +
+                                    parseFloat(getComputedStyle(node).marginTop) +
+                                    parseFloat(getComputedStyle(node).marginBottom);
+                        }
+                    },
+                }))));
+        };
+    },
+});
+
+const CVirtualScrollerPlugin = {
+    install: (app) => {
+        app.component(CVirtualScroller.name, CVirtualScroller);
+    },
+};
+
+const filterOptionsList = (search, _options) => {
+    return search.length
+        ? _options &&
+            _options.reduce((acc, val) => {
+                const options = val.options &&
+                    val.options.filter((element) => element.text && element.text.toLowerCase().includes(search.toLowerCase()));
+                if ((val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
+                    (options && options.length)) {
+                    acc.push(Object.assign({}, val, options && options.length && { options }));
+                }
+                return acc;
+            }, [])
+        : _options;
+};
+const flattenArray = (options) => {
+    return options.reduce((acc, val) => {
+        return acc.concat(Array.isArray(val.options) ? flattenArray(val.options) : val);
+    }, []);
+};
+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 selectOptions = (options, selected, deselected) => {
+    let _selected = [...selected, ...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 }),
+            });
+        }
+        return unique;
+    }, []);
+    return deduplicated;
+};
+
 const CMultiSelectOptions = vue.defineComponent({
     name: 'CMultiSelectOptions',
     props: {
@@ -11528,7 +11664,6 @@ const CMultiSelectOptions = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11538,7 +11673,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11549,7 +11683,6 @@ const CMultiSelectOptions = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11560,12 +11693,15 @@ const CMultiSelectOptions = vue.defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         selected: {
             type: Array,
             default: () => [],
-            required: false,
+        },
+        virtualScroller: Boolean,
+        visibleItems: {
+            type: Number,
+            default: 10,
         },
     },
     emits: ['optionClick'],
@@ -11617,12 +11753,19 @@ const CMultiSelectOptions = vue.defineComponent({
                     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' && {
-                style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
-            }),
-        }, createOptions(props.options));
+        return () => props.virtualScroller
+            ? vue.h(CVirtualScroller, {
+                class: 'form-multi-select-options',
+                visibleItems: props.visibleItems,
+            }, {
+                default: () => createOptions(props.options),
+            })
+            : vue.h('div', {
+                class: 'form-multi-select-options',
+                ...(props.optionsMaxHeight !== 'auto' && {
+                    style: { maxHeight: props.optionsMaxHeight, overflow: 'scroll' },
+                }),
+            }, createOptions(props.options));
     },
 });
 
@@ -11713,11 +11856,6 @@ 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: {
@@ -11728,7 +11866,6 @@ const CMultiSelect = vue.defineComponent({
          */
         cleaner: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11736,7 +11873,6 @@ const CMultiSelect = vue.defineComponent({
          */
         disabled: {
             type: Boolean,
-            required: false,
             default: false,
         },
         /**
@@ -11791,7 +11927,6 @@ const CMultiSelect = vue.defineComponent({
         multiple: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * List of option elements.
@@ -11799,7 +11934,6 @@ const CMultiSelect = vue.defineComponent({
         options: {
             type: Array,
             default: () => [],
-            required: false,
         },
         /**
          * Sets maxHeight of options list.
@@ -11809,7 +11943,6 @@ const CMultiSelect = vue.defineComponent({
         optionsMaxHeight: {
             type: [Number, String],
             default: 'auto',
-            required: false,
         },
         /**
          * Sets option style.
@@ -11820,7 +11953,6 @@ const CMultiSelect = vue.defineComponent({
         optionsStyle: {
             type: String,
             default: 'checkbox',
-            required: false,
             validator: (value) => {
                 return ['checkbox', 'text'].includes(value);
             },
@@ -11833,7 +11965,6 @@ const CMultiSelect = vue.defineComponent({
         placeholder: {
             type: String,
             default: 'Select...',
-            required: false,
         },
         /**
          * Enables search input element.
@@ -11841,7 +11972,6 @@ const CMultiSelect = vue.defineComponent({
         search: {
             type: [Boolean, String],
             default: true,
-            required: false,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['external'].includes(value);
@@ -11858,7 +11988,6 @@ const CMultiSelect = vue.defineComponent({
         searchNoResultsLabel: {
             type: String,
             default: 'no items',
-            required: false,
         },
         /**
          * Enables select all button.
@@ -11867,7 +11996,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAll: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -11877,7 +12005,6 @@ const CMultiSelect = vue.defineComponent({
          */
         selectAllLabel: {
             type: String,
-            required: false,
             default: 'Select all options',
         },
         /**
@@ -11889,7 +12016,6 @@ const CMultiSelect = vue.defineComponent({
         selectionType: {
             type: String,
             default: 'tags',
-            required: false,
             validator: (value) => {
                 return ['counter', 'tags', 'text'].includes(value);
             },
@@ -11902,7 +12028,6 @@ const CMultiSelect = vue.defineComponent({
         selectionTypeCounterText: {
             type: String,
             default: 'item(s) selected',
-            required: false,
         },
         /**
          * Size the component small or large.
@@ -11911,7 +12036,6 @@ const CMultiSelect = vue.defineComponent({
          */
         size: {
             type: String,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -11936,6 +12060,12 @@ const CMultiSelect = vue.defineComponent({
          * @since 4.6.0
          */
         valid: Boolean,
+        /**
+         * Enable virtual scroller for the options list.
+         *
+         * @since 4.8.0
+         */
+        virtualScroller: Boolean,
         /**
          * Toggle the visibility of multi select dropdown.
          *
@@ -11944,7 +12074,16 @@ const CMultiSelect = vue.defineComponent({
         visible: {
             type: Boolean,
             default: false,
-            required: false,
+        },
+        /**
+         *
+         * Amount of visible items when virtualScroller is set to `true`.
+         *
+         * @since 4.8.0
+         */
+        visibleItems: {
+            type: Number,
+            default: 10,
         },
     },
     emits: [
@@ -11961,29 +12100,12 @@ const CMultiSelect = vue.defineComponent({
     ],
     setup(props, { attrs, emit }) {
         const nativeSelectRef = vue.ref();
-        vue.provide('nativeSelectRef', nativeSelectRef);
-        const searchRef = vue.ref();
         const options = vue.ref(props.options);
         const search = vue.ref('');
+        const searchRef = 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 }),
-                    });
-                }
-                return unique;
-            }, []);
-            selected.value = deduplicated;
-        };
+        vue.provide('nativeSelectRef', nativeSelectRef);
         vue.watch(() => props.options, (newValue, oldValue) => {
             if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
                 options.value = newValue;
@@ -12001,34 +12123,15 @@ const CMultiSelect = vue.defineComponent({
                         }
                         return;
                     });
-                _selected && selectOptions(_selected, deselected);
+                if (_selected) {
+                    selected.value = selectOptions(_selected, selected.value, deselected);
+                }
             }
-        });
+        }, { immediate: true });
         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) => {
-                        const options = val.options &&
-                            val.options.filter((element) => element.text && element.text.toLowerCase().includes(search.toLowerCase()));
-                        if ((val.text && val.text.toLowerCase().includes(search.toLowerCase())) ||
-                            (options && options.length)) {
-                            acc.push(Object.assign({}, val, options && options.length && { options }));
-                        }
-                        return acc;
-                    }, [])
-                : options.value;
-        };
-        // 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();
@@ -12066,7 +12169,7 @@ const CMultiSelect = vue.defineComponent({
             }
         };
         const handleSelectAll = () => {
-            selectOptions(flattenArray(options.value).filter((option) => !option.disabled));
+            selected.value = selectOptions(flattenArray(options.value).filter((option) => !option.disabled), selected.value);
         };
         const handleDeselectAll = () => {
             selected.value = selected.value.filter((option) => option.disabled);
@@ -12157,7 +12260,7 @@ const CMultiSelect = vue.defineComponent({
                                 ref: searchRef,
                             }),
                     ]),
-                    default: () => vue.h('div', {}, [
+                    default: () => visible.value && [
                         props.multiple &&
                             props.selectAll &&
                             vue.h('button', {
@@ -12173,9 +12276,11 @@ const CMultiSelect = vue.defineComponent({
                             optionsMaxHeight: props.optionsMaxHeight,
                             optionsStyle: props.optionsStyle,
                             searchNoResultsLabel: props.searchNoResultsLabel,
-                            selected: selected.value
+                            selected: selected.value,
+                            virtualScroller: props.virtualScroller,
+                            visibleItems: props.visibleItems,
                         }),
-                    ]),
+                    ],
                 }),
             }),
         ];
@@ -12613,11 +12718,21 @@ const COffcanvas = vue.defineComponent({
     props: {
         /**
          * Apply a backdrop on body while offcanvas is open.
+         *
+         * @values boolean | 'static'
          */
         backdrop: {
-            type: Boolean,
+            type: [Boolean, String],
             default: true,
-            require: false,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['static'].includes(value);
+                }
+                if (typeof value === 'boolean') {
+                    return true;
+                }
+                return false;
+            },
         },
         /**
          * Closes the offcanvas when escape key is pressed.
@@ -12625,7 +12740,6 @@ const COffcanvas = vue.defineComponent({
         keyboard: {
             type: Boolean,
             default: true,
-            require: false,
         },
         /**
          * Components placement, there’s no default placement.
@@ -12640,21 +12754,36 @@ const COffcanvas = vue.defineComponent({
                 return ['start', 'end', 'top', 'bottom'].includes(value);
             },
         },
+        /**
+         * Responsive offcanvas property hide content outside the viewport from a specified breakpoint and down.
+         *
+         * @values boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+         * @since 4.7.0
+         */
+        responsive: {
+            type: [Boolean, String],
+            default: true,
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
+                }
+                if (typeof value === 'boolean') {
+                    return true;
+                }
+                return false;
+            },
+        },
         /**
          * Allow body scrolling while offcanvas is open
          */
         scroll: {
             type: Boolean,
             default: false,
-            required: false,
         },
         /**
          * Toggle the visibility of offcanvas component.
          */
-        visible: {
-            type: Boolean,
-            require: false,
-        },
+        visible: Boolean,
     },
     emits: [
         /**
@@ -12689,40 +12818,31 @@ const COffcanvas = vue.defineComponent({
             emit('show');
             executeAfterTransition(() => done(), el);
             setTimeout(() => {
-                el.style.visibility = 'visible';
                 el.classList.add('show');
             }, 1);
         };
         const handleAfterEnter = () => {
-            window.addEventListener('mousedown', handleMouseDown);
-            window.addEventListener('keyup', handleKeyUp);
+            offcanvasRef.value.focus();
         };
         const handleLeave = (el, done) => {
             executeAfterTransition(() => done(), el);
-            window.removeEventListener('mousedown', handleMouseDown);
-            window.removeEventListener('keyup', handleKeyUp);
-            el.classList.remove('show');
+            el.classList.add('hiding');
         };
         const handleAfterLeave = (el) => {
-            el.style.visibility = 'hidden';
+            el.classList.remove('show', 'hiding');
         };
         const handleDismiss = () => {
             visible.value = false;
             emit('hide');
         };
-        const handleKeyUp = (event) => {
-            if (offcanvasRef.value && !offcanvasRef.value.contains(event.target)) {
-                if (event.key === 'Escape' && props.keyboard && props.backdrop) {
-                    return handleDismiss();
-                }
+        const handleBackdropDismiss = () => {
+            if (props.backdrop !== 'static') {
+                handleDismiss();
             }
         };
-        const handleMouseDown = (event) => {
-            window.addEventListener('mouseup', () => handleMouseUp(event), { once: true });
-        };
-        const handleMouseUp = (event) => {
-            if (offcanvasRef.value && !offcanvasRef.value.contains(event.target)) {
-                props.backdrop && handleDismiss();
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape' && props.keyboard) {
+                handleDismiss();
             }
         };
         return () => [
@@ -12734,17 +12854,20 @@ const COffcanvas = vue.defineComponent({
                 onAfterLeave: (el) => handleAfterLeave(el),
             }, () => vue.withDirectives(vue.h('div', {
                 class: [
-                    'offcanvas',
                     {
+                        [`offcanvas${typeof props.responsive !== 'boolean' ? '-' + props.responsive : ''}`]: props.responsive,
                         [`offcanvas-${props.placement}`]: props.placement,
                     },
                 ],
+                onKeydown: (event) => handleKeyDown(event),
                 ref: offcanvasRef,
                 role: 'dialog',
+                tabindex: -1,
             }, slots.default && slots.default()), [[vVisible, props.visible]])),
             props.backdrop &&
                 vue.h(CBackdrop, {
                     class: 'offcanvas-backdrop',
+                    onClick: handleBackdropDismiss,
                     visible: visible.value,
                 }),
         ];
@@ -13834,6 +13957,140 @@ const CSmartPaginationPlugin = {
     },
 };
 
+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'/>"];
+
+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'/>"];
+
+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'/>"];
+
+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 CIcon = vue.defineComponent({
+    name: 'CIcon',
+    props: {
+        /**
+         * Use `:icon="..."` instead of
+         *
+         * @deprecated since version 3.0
+         */
+        content: {
+            type: [String, Array],
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
+         */
+        customClassName: {
+            type: [String, Array, Object],
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Name of the icon placed in React object or SVG content.
+         */
+        icon: {
+            type: [String, Array],
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Use `icon="..."` instead of
+         *
+         * @deprecated since version 3.0
+         */
+        name: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
+         */
+        size: {
+            type: String,
+            default: undefined,
+            required: false,
+            validator: (value) => {
+                return [
+                    'custom',
+                    'custom-size',
+                    'sm',
+                    'lg',
+                    'xl',
+                    'xxl',
+                    '3xl',
+                    '4xl',
+                    '5xl',
+                    '6xl',
+                    '7xl',
+                    '8xl',
+                    '9xl',
+                ].includes(value);
+            },
+        },
+        /**
+         * Title tag content.
+         */
+        title: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+        /**
+         * If defined component will be rendered using 'use' tag.
+         */
+        use: {
+            type: String,
+            default: undefined,
+            required: false,
+        },
+    },
+    setup(props, { attrs }) {
+        const icons = vue.inject('icons');
+        const _icon = props.icon || props.content || props.name;
+        const toCamelCase = (str) => {
+            return str
+                .replace(/([-_][a-z0-9])/gi, ($1) => {
+                return $1.toUpperCase();
+            })
+                .replace(/-/gi, '');
+        };
+        const iconName = vue.computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');
+        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
+        const code = vue.computed(() => Array.isArray(_icon)
+            ? _icon
+            : typeof _icon === 'string' && iconName.value && icons[iconName.value]
+                ? icons[iconName.value]
+                : 'undefined');
+        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;
+        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
+        const viewBox = attrs.viewBox || `0 0 ${scale}`;
+        const size = () => {
+            const addCustom = !props.size && (attrs.width || attrs.height);
+            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;
+        };
+        const classNames = (() => {
+            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];
+        })();
+        return () => props.use
+            ? vue.h('svg', {
+                ...attrs,
+                xmlns: 'http://www.w3.org/2000/svg',
+                class: classNames,
+                role: 'img',
+            }, vue.h('use', { href: props.use }))
+            : vue.h('svg', {
+                ...attrs,
+                xmlns: 'http://www.w3.org/2000/svg',
+                class: classNames,
+                viewBox: viewBox,
+                innerHTML: `${titleCode}${iconCode}`,
+                role: 'img',
+            });
+    },
+});
+
 const CTableBody = vue.defineComponent({
     name: 'CTableBody',
     props: {
@@ -14019,7 +14276,7 @@ const CTableRow = vue.defineComponent({
     },
 });
 
-const pretifyName = (name) => {
+const pretifyName$1 = (name) => {
     return name
         .replace(/[-_.]/g, ' ')
         .replace(/ +/g, ' ')
@@ -14031,8 +14288,8 @@ const pretifyName = (name) => {
 const label = (column) => typeof column === 'object'
     ? column.label !== undefined
         ? column.label
-        : pretifyName(column.key)
-    : pretifyName(column);
+        : pretifyName$1(column.key)
+    : pretifyName$1(column);
 const CTable = vue.defineComponent({
     name: 'CTable',
     props: {
@@ -14322,120 +14579,244 @@ const CTablePlugin = {
     },
 };
 
+const filterColumns = (items, columnFilter, columnFilterState, itemsDataColumns) => {
+    if (columnFilter && typeof columnFilter === 'object' && columnFilter.external) {
+        return items;
+    }
+    Object.entries(columnFilterState).forEach(([key, value]) => {
+        if (value instanceof Function) {
+            items = items.filter((item) => value(item[key]));
+            return;
+        }
+        const columnFilter = String(value).toLowerCase();
+        if (columnFilter && itemsDataColumns.includes(key)) {
+            items = items.filter((item) => {
+                return String(item[key]).toLowerCase().includes(columnFilter);
+            });
+        }
+    });
+    return items;
+};
+const filterTable = (items, tableFilter, tableFilterState, itemsDataColumns) => {
+    if (!tableFilterState ||
+        (tableFilter && typeof tableFilter === 'object' && tableFilter.external)) {
+        return items;
+    }
+    const filter = tableFilterState.toLowerCase();
+    const valueContainFilter = (val) => String(val).toLowerCase().includes(filter);
+    items = items.filter((item) => {
+        return !!itemsDataColumns.find((key) => valueContainFilter(item[key]));
+    });
+    return items;
+};
+const getClickedColumnName = (target, columnNames) => {
+    const closest = target.closest('tr');
+    const children = closest ? Array.from(closest.children) : [];
+    const clickedCell = children.filter((child) => child.contains(target))[0];
+    return columnNames[children.indexOf(clickedCell)];
+};
+const getColumnKey = (column) => typeof column === 'object' ? column.key : column;
+const getColumnLabel = (column) => typeof column === 'object'
+    ? column.label !== undefined
+        ? column.label
+        : pretifyName(column.key)
+    : pretifyName(column);
+const getColumnNames = (columns, items) => columns
+    ? columns.map((column) => {
+        if (typeof column === 'object')
+            return column.key;
+        else
+            return column;
+    })
+    : getColumnNamesFromItems(items);
+const getColumnNamesFromItems = (items) => Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_');
+const getColumnSorterState = (key, sorterState) => {
+    if (sorterState && sorterState.column === key) {
+        if (sorterState.state) {
+            return sorterState.state;
+        }
+        return 0;
+    }
+    return 0;
+};
+const getColumnValues = (items, key) => {
+    return items.map((item) => item[key]);
+};
+const getTableDataCellProps = (item, colName) => {
+    const props = item._cellProps && {
+        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
+        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+    };
+    return props;
+};
+const getTableHeaderCellProps = (column) => {
+    if (typeof column === 'object' && column._props) {
+        return column._props;
+    }
+    return {};
+};
+const getTableHeaderCellStyles = (column, columnSorter) => {
+    const style = {};
+    if (columnSorter &&
+        (typeof column !== 'object' ||
+            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))) {
+        style['cursor'] = 'pointer';
+    }
+    if (typeof column === 'object' && column._style) {
+        return { ...style, ...column._style };
+    }
+    return style;
+};
+const isObjectInArray = (array, item, ignore = []) => array.some((_item) => {
+    let result = true;
+    for (const key in item) {
+        if (!ignore.includes(key) && item[key] !== _item[key]) {
+            result = false;
+            break;
+        }
+    }
+    return result;
+});
+const isSortable = (i, columns, columnSorter, itemsDataColumns, columnNames) => {
+    const isDataColumn = itemsDataColumns.includes(columnNames[i]);
+    let column;
+    if (columns)
+        column = columns[i];
+    return (columnSorter &&
+        (!columns ||
+            typeof column !== 'object' ||
+            (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+        isDataColumn);
+};
+const pretifyName = (name) => {
+    return name
+        .replace(/[-_.]/g, ' ')
+        .replace(/ +/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .split(' ')
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+};
+const sortItems = (columnSorter, items, itemsDataColumns, sorterState) => {
+    const column = sorterState.column;
+    if (!column ||
+        !itemsDataColumns.includes(column) ||
+        (columnSorter && typeof columnSorter === 'object' && columnSorter.external)) {
+        return items;
+    }
+    const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
+    const sorted = items.slice().sort((item, item2) => {
+        const value = item[column];
+        const value2 = item2[column];
+        const a = typeof value === 'number' ? value : String(value).toLowerCase();
+        const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase();
+        return a > b ? 1 * flip : b > a ? -1 * flip : 0;
+    });
+    return sorted;
+};
+
 const CSmartTableBody = vue.defineComponent({
     name: 'CSmartTableBody',
     props: {
-        clickableRows: {
-            type: Boolean,
-            require: false,
+        clickableRows: Boolean,
+        columnNames: {
+            type: Array,
+            default: () => [],
+            require: true,
         },
         currentItems: {
             type: Array,
             default: () => [],
-            required: false,
         },
         firstItemOnActivePageIndex: {
             type: Number,
             require: true,
             default: 0,
         },
-        noItemLabel: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
-        rawColumnNames: {
-            type: Array,
-            default: () => [],
-            require: true,
-        },
-        scopedSlots: {
-            type: Object,
-            default: undefined,
-            require: false,
-        },
+        noItemsLabel: String,
+        scopedSlots: Object,
         selectable: Boolean,
+        selected: Array,
     },
     emits: ['rowChecked', 'rowClick'],
     setup(props, { emit }) {
-        const handleRowClick = (item, index, columnName, event) => {
-            emit('rowClick', item, index, columnName, event);
-        };
-        const handleRowChecked = (id, value) => {
-            emit('rowChecked', id, value);
-        };
-        const tableDataCellProps = (item, colName) => {
-            const props = item._cellProps && {
-                ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-                ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-            };
-            return props;
-        };
-        const getColumnName = (event) => {
-            const target = event.target;
-            const closest = target.closest('tr');
-            const children = closest ? Array.from(closest.children) : [];
-            const clickedCell = children.filter((child) => child.contains(target))[0];
-            return props.rawColumnNames[children.indexOf(clickedCell)];
-        };
+        const colspan = props.selectable
+            ? props.columnNames.length + 1
+            : props.columnNames.length;
         return () => vue.h(CTableBody, {
             ...(props.clickableRows && { style: 'cursor:pointer;' }),
         }, {
-            default: () => props.currentItems.map((item, trIndex) => [
-                vue.h(CTableRow, {
-                    ...(item._props && { ...item._props }),
-                    ...(props.clickableRows && { tabindex: 0 }),
-                    onClick: (event) => handleRowClick(item, trIndex + props.firstItemOnActivePageIndex, getColumnName(event), event),
-                }, {
-                    default: () => [
-                        props.selectable &&
-                            vue.h(CTableDataCell, {}, () => vue.h(CFormCheck, {
-                                checked: item._selected ? item._selected : false,
-                                onChange: (event) => handleRowChecked(item._id, event.target.checked),
-                            })),
-                        props.rawColumnNames.map((colName) => props.scopedSlots &&
-                            props.scopedSlots[colName] &&
-                            typeof props.scopedSlots[colName] === 'function'
-                            ? vue.h(props.scopedSlots[colName], { item: item })
-                            : vue.h(CTableDataCell, {
-                                ...tableDataCellProps(item, colName),
-                            }, {
-                                default: () => String(item[colName]),
-                            })),
-                    ],
-                }),
-                props.scopedSlots &&
-                    props.scopedSlots['details'] && [
-                    vue.h(CTableRow, {
-                        colspan: props.selectable
-                            ? props.rawColumnNames.length + 1
-                            : props.rawColumnNames.length,
-                        class: 'p-0',
-                        style: { 'border-bottom-width': '0' },
-                        tabindex: '-1',
-                    }),
+            default: () => props.currentItems.length
+                ? props.currentItems.map((item, trIndex) => [
                     vue.h(CTableRow, {
-                        class: 'p-0',
-                        key: `details${trIndex}`,
-                        onClick: (event) => handleRowClick(item, trIndex + props.firstItemOnActivePageIndex, getColumnName(event), true),
+                        ...(item._props && { ...item._props }),
+                        ...(props.clickableRows && { tabindex: 0 }),
+                        onClick: (event) => {
+                            emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames), event);
+                        },
                     }, {
-                        default: () => vue.h(CTableDataCell, {
+                        default: () => [
+                            props.selectable &&
+                                vue.h(CTableDataCell, {}, () => vue.h(CFormCheck, {
+                                    checked: props.selected &&
+                                        isObjectInArray(props.selected, item, [
+                                            '_cellProps',
+                                            '_props',
+                                            '_selected',
+                                        ]),
+                                    onChange: (event) => {
+                                        emit('rowChecked', item, event.target.checked);
+                                    },
+                                })),
+                            props.columnNames.map((colName) => props.scopedSlots &&
+                                props.scopedSlots[colName] &&
+                                typeof props.scopedSlots[colName] === 'function'
+                                ? vue.h(props.scopedSlots[colName], { item: item })
+                                : vue.h(CTableDataCell, {
+                                    ...getTableDataCellProps(item, colName),
+                                }, {
+                                    default: () => String(item[colName]),
+                                })),
+                        ],
+                    }),
+                    props.scopedSlots &&
+                        props.scopedSlots['details'] && [
+                        vue.h(CTableRow, {
                             colspan: props.selectable
-                                ? props.rawColumnNames.length + 1
-                                : props.rawColumnNames.length,
+                                ? props.columnNames.length + 1
+                                : props.columnNames.length,
                             class: 'p-0',
-                            style: { border: 0 },
+                            style: { 'border-bottom-width': '0' },
+                            tabindex: '-1',
+                        }),
+                        vue.h(CTableRow, {
+                            class: 'p-0',
+                            key: `details${trIndex}`,
+                            onClick: (event) => {
+                                emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames), true);
+                            },
                         }, {
-                            default: () => props.scopedSlots &&
-                                props.scopedSlots['details'] &&
-                                vue.h(props.scopedSlots['details'], {
-                                    item: item,
-                                    onClick: (event) => handleRowClick(item, trIndex + props.firstItemOnActivePageIndex, getColumnName(event), true),
-                                }),
+                            default: () => vue.h(CTableDataCell, {
+                                colspan: props.selectable
+                                    ? props.columnNames.length + 1
+                                    : props.columnNames.length,
+                                class: 'p-0',
+                                style: { border: 0 },
+                            }, {
+                                default: () => props.scopedSlots &&
+                                    props.scopedSlots['details'] &&
+                                    vue.h(props.scopedSlots['details'], {
+                                        item: item,
+                                    }),
+                            }),
                         }),
+                    ],
+                ])
+                : vue.h(CTableRow, {}, {
+                    default: () => vue.h(CTableDataCell, { colspan: colspan }, {
+                        default: () => props.noItemsLabel,
                     }),
-                ],
-            ]),
+                }),
         });
     },
 });
@@ -14443,140 +14824,63 @@ const CSmartTableBody = vue.defineComponent({
 const CSmartTableHead = vue.defineComponent({
     name: 'CSmartTableHead',
     props: {
-        clearSorterAndFilter: {
-            type: String,
-            require: false,
-            default: '',
-        },
-        columnFilter: {
-            type: [Boolean, Object],
-            require: false,
-        },
-        columnFilterValue: {
-            type: Object,
-            required: false,
-        },
-        columnSorter: {
-            type: [Boolean, Object],
-            default: undefined,
-            require: false,
-        },
+        columnFilter: [Boolean, Object],
+        columnFilterValue: Object,
+        columnSorter: [Boolean, Object],
         component: {
             type: String,
             default: 'head',
-            require: false,
         },
         columns: {
             type: Array,
             default: () => [],
-            required: false,
         },
         items: {
             type: Array,
             default: () => [],
-            required: false,
         },
         selectable: Boolean,
-        selectAll: [Boolean, String],
-        sorterState: {
-            type: Object,
-            default: undefined,
-            require: false,
-        },
+        selectAll: [Boolean, Object],
+        selectedAll: [Boolean, String],
+        sorterState: Object,
     },
     emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
     setup(props, { slots, emit }) {
-        const handleSortClick = (key, index) => {
-            emit('sortClick', key, index);
-        };
-        const tableHeaderCellProps = (column) => {
-            if (typeof column === 'object' && column._props) {
-                return column._props;
-            }
-            return {};
-        };
-        const tableHeaderCellStyles = (column) => {
-            const style = { verticalAlign: 'middle', overflow: 'hidden', cursor: '' };
-            if (props.columnSorter &&
-                (typeof column !== 'object' ||
-                    (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))) {
-                style.cursor = 'pointer';
-            }
-            if (typeof column === 'object' && column._style) {
-                return { ...style, ...column._style };
-            }
-            return style;
-        };
-        const pretifyName = (name) => {
-            return name
-                .replace(/[-_.]/g, ' ')
-                .replace(/ +/g, ' ')
-                .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-                .split(' ')
-                .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-                .join(' ');
-        };
-        const label = (column) => typeof column === 'object'
-            ? column.label !== undefined
-                ? column.label
-                : pretifyName(column.key)
-            : pretifyName(column);
-        const key = (column) => (typeof column === 'object' ? column.key : column);
-        const getColumnSorterState = (key) => {
-            if (props.sorterState && props.sorterState.column === key) {
-                if (props.sorterState.state) {
-                    return props.sorterState.state;
-                }
-                return 0;
-            }
-            return 0;
-        };
-        const getValues = (items, key) => {
-            return items.map((a) => a[key]);
-        };
         const columnSorterIcon = (column) => {
-            if (getColumnSorterState(key(column)) === 0) {
+            if (getColumnSorterState(getColumnKey(column), props.sorterState) === 0) {
                 return vue.h('span', { class: 'opacity-25 float-end me-1' }, slots.sortingIcon && slots.sortingIcon());
             }
-            if (getColumnSorterState(key(column)) === 'asc') {
+            if (getColumnSorterState(getColumnKey(column), props.sorterState) === 'asc') {
                 return vue.h('span', { class: 'float-end me-1' }, slots.sortingIconAscending && slots.sortingIconAscending());
             }
-            if (getColumnSorterState(key(column)) === 'desc') {
+            if (getColumnSorterState(getColumnKey(column), props.sorterState) === 'desc') {
                 return vue.h('span', { class: 'float-end me-1' }, slots.sortingIconDescending && slots.sortingIconDescending());
             }
             return;
         };
-        const handleOnCustomFilterChange = (key, value) => {
-            emit('customFilterChange', key, value);
-        };
-        const handleFilterInput = (key, value) => {
-            emit('filterInput', key, value);
-        };
-        const handleFilterChange = (key, value) => {
-            emit('filterChange', key, value);
-        };
-        const handleSelectAllChecked = () => {
-            emit('selectAllChecked');
-        };
         return () => vue.h(props.component === 'head' ? CTableHead : CTableFoot, {}, {
             default: () => [
                 vue.h(CTableRow, {}, {
                     default: () => [
                         props.selectable &&
                             vue.h(CTableHeaderCell, {}, () => vue.h(CFormCheck, {
-                                checked: typeof props.selectAll === 'boolean' ? props.selectAll : false,
-                                indeterminate: props.selectAll === 'indeterminate' ? true : false,
-                                onChange: () => handleSelectAllChecked(),
+                                checked: typeof props.selectedAll === 'boolean' ? props.selectAll : false,
+                                indeterminate: props.selectedAll === 'indeterminate' ? true : false,
+                                onChange: () => {
+                                    emit('selectAllChecked');
+                                },
                             })),
                         props.columns.map((column, index) => vue.h(CTableHeaderCell, {
-                            ...tableHeaderCellProps(column),
-                            onClick: () => handleSortClick(key(column), index),
-                            style: tableHeaderCellStyles(column),
+                            ...getTableHeaderCellProps(column),
+                            onClick: () => {
+                                emit('sortClick', getColumnKey(column), index);
+                            },
+                            style: getTableHeaderCellStyles(column, props.columnSorter),
                         }, {
                             default: () => [
                                 vue.h('div', {
                                     class: 'd-inline',
-                                }, label(column)),
+                                }, getColumnLabel(column)),
                                 props.columnSorter &&
                                     (typeof column !== 'object'
                                         ? true
@@ -14593,7 +14897,7 @@ const CSmartTableHead = vue.defineComponent({
                         default: () => [
                             props.selectable && vue.h(CTableHeaderCell),
                             props.columns.map((column) => vue.h(CTableHeaderCell, {
-                                ...tableHeaderCellProps(column),
+                                ...getTableHeaderCellProps(column),
                             }, {
                                 default: () => (typeof column !== 'object'
                                     ? true
@@ -14601,15 +14905,21 @@ const CSmartTableHead = vue.defineComponent({
                                         ? true
                                         : column.filter)
                                     ? typeof column !== 'string' && typeof column.filter === 'function'
-                                        ? column.filter(getValues(props.items, key(column)), (value) => handleOnCustomFilterChange(key(column), value))
+                                        ? column.filter(getColumnValues(props.items, getColumnKey(column)), (value) => {
+                                            emit('customFilterChange', getColumnKey(column), value);
+                                        })
                                         : vue.h(CFormInput, {
                                             size: 'sm',
-                                            onInput: (event) => handleFilterInput(key(column), event.target.value),
-                                            onChange: (event) => handleFilterChange(key(column), event.target.value),
-                                            'aria-label': `column name: '${label(column)}' filter input`,
+                                            onInput: (event) => {
+                                                emit('filterInput', getColumnKey(column), event.target.value);
+                                            },
+                                            onChange: (event) => {
+                                                emit('filterChange', event.target.value);
+                                            },
+                                            'aria-label': `column name: '${getColumnLabel(column)}' filter input`,
                                             ...(props.columnFilterValue &&
-                                                props.columnFilterValue[key(column)] && {
-                                                value: props.columnFilterValue[key(column)],
+                                                props.columnFilterValue[getColumnKey(column)] && {
+                                                value: props.columnFilterValue[getColumnKey(column)],
                                             }),
                                         })
                                     : '',
@@ -14621,268 +14931,6 @@ const CSmartTableHead = vue.defineComponent({
     },
 });
 
-const CSmartTableFilterProps = {
-    filterLabel: {
-        type: String,
-        require: false,
-        default: 'Filter:',
-    },
-    filterPlaceholder: {
-        type: String,
-        require: false,
-        default: 'type string...',
-    },
-    value: {
-        type: [String, Number],
-        require: false,
-        default: '',
-    },
-};
-const CSmartTableFilter = vue.defineComponent({
-    name: 'CSmartTableFilter',
-    props: CSmartTableFilterProps,
-    emits: ['filterInput', 'filterChange'],
-    setup(props, { emit }) {
-        const handleFilterInput = (event) => {
-            const target = event.target;
-            emit('filterInput', target.value);
-        };
-        const handleFilterChange = (event) => {
-            const target = event.target;
-            emit('filterChange', target.value);
-        };
-        return () => vue.h('div', {
-            class: 'row mb-2',
-        }, {
-            default: () => [
-                vue.h(CFormLabel, {
-                    class: 'col-sm-auto col-form-label',
-                }, {
-                    default: () => props.filterLabel,
-                }),
-                vue.h('div', {
-                    class: 'col-sm-auto',
-                }, vue.h(CFormInput, {
-                    placeholder: props.filterPlaceholder,
-                    value: props.value,
-                    onInput: handleFilterInput,
-                    onChange: handleFilterChange,
-                })),
-            ],
-        });
-    },
-});
-
-const CSmartTableCleaner = vue.defineComponent({
-    name: 'CSmartTableCleaner',
-    props: {
-        isFiltered: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
-    },
-    emits: ['tableCleanerClick'],
-    setup(props, { emit, slots }) {
-        const handleClick = () => {
-            emit('tableCleanerClick');
-        };
-        return () => vue.h('button', {
-            type: 'button',
-            class: 'btn btn-transparent',
-            ...(!props.isFiltered && { disabled: true, tabIndex: -1 }),
-            onClick: handleClick,
-        }, slots.cleanerIcon && slots.cleanerIcon());
-    },
-});
-
-const CSmartTableItemsPerPageSelector = vue.defineComponent({
-    name: 'CSmartTableItemsPerPageSelector',
-    props: {
-        itemsPerPage: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
-        itemsPerPageLabel: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
-        itemsPerPageOptions: {
-            type: Array,
-            default: () => [],
-            require: false,
-        },
-    },
-    emits: ['changeItemsPerPage'],
-    setup(props, { emit }) {
-        const handleChange = (event) => {
-            const target = event.target;
-            emit('changeItemsPerPage', Number(target.value));
-        };
-        return () => vue.h('div', {
-            class: 'row',
-        }, {
-            default: () => [
-                vue.h(CFormLabel, {
-                    class: 'col-auto col-form-label',
-                }, {
-                    default: () => props.itemsPerPageLabel,
-                }),
-                vue.h('div', {
-                    class: 'col-auto',
-                }, vue.h(CFormSelect, {
-                    value: props.itemsPerPage,
-                    onChange: handleChange,
-                }, {
-                    default: () => props.itemsPerPageOptions &&
-                        props.itemsPerPageOptions.map((number, index) => {
-                            return vue.h('option', {
-                                value: number,
-                                key: index,
-                            }, number);
-                        }),
-                })),
-            ],
-        });
-    },
-});
-
-const CIcon = vue.defineComponent({
-    name: 'CIcon',
-    props: {
-        /**
-         * Use `:icon="..."` instead of
-         *
-         * @deprecated since version 3.0
-         */
-        content: {
-            type: [String, Array],
-            default: undefined,
-            required: false,
-        },
-        /**
-         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
-         */
-        customClassName: {
-            type: [String, Array, Object],
-            default: undefined,
-            required: false,
-        },
-        /**
-         * Name of the icon placed in React object or SVG content.
-         */
-        icon: {
-            type: [String, Array],
-            default: undefined,
-            required: false,
-        },
-        /**
-         * Use `icon="..."` instead of
-         *
-         * @deprecated since version 3.0
-         */
-        name: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
-        /**
-         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.
-         */
-        size: {
-            type: String,
-            default: undefined,
-            required: false,
-            validator: (value) => {
-                return [
-                    'custom',
-                    'custom-size',
-                    'sm',
-                    'lg',
-                    'xl',
-                    'xxl',
-                    '3xl',
-                    '4xl',
-                    '5xl',
-                    '6xl',
-                    '7xl',
-                    '8xl',
-                    '9xl',
-                ].includes(value);
-            },
-        },
-        /**
-         * Title tag content.
-         */
-        title: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
-        /**
-         * If defined component will be rendered using 'use' tag.
-         */
-        use: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
-    },
-    setup(props, { attrs }) {
-        const icons = vue.inject('icons');
-        const _icon = props.icon || props.content || props.name;
-        const toCamelCase = (str) => {
-            return str
-                .replace(/([-_][a-z0-9])/gi, ($1) => {
-                return $1.toUpperCase();
-            })
-                .replace(/-/gi, '');
-        };
-        const iconName = vue.computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');
-        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';
-        const code = vue.computed(() => Array.isArray(_icon)
-            ? _icon
-            : typeof _icon === 'string' && iconName.value && icons[iconName.value]
-                ? icons[iconName.value]
-                : 'undefined');
-        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;
-        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';
-        const viewBox = attrs.viewBox || `0 0 ${scale}`;
-        const size = () => {
-            const addCustom = !props.size && (attrs.width || attrs.height);
-            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;
-        };
-        const classNames = (() => {
-            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];
-        })();
-        return () => props.use
-            ? vue.h('svg', {
-                ...attrs,
-                xmlns: 'http://www.w3.org/2000/svg',
-                class: classNames,
-                role: 'img',
-            }, vue.h('use', { href: props.use }))
-            : vue.h('svg', {
-                ...attrs,
-                xmlns: 'http://www.w3.org/2000/svg',
-                class: classNames,
-                viewBox: viewBox,
-                innerHTML: `${titleCode}${iconCode}`,
-                role: 'img',
-            });
-    },
-});
-
-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'/>"];
-
-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'/>"];
-
-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'/>"];
-
-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',
     props: {
@@ -14892,7 +14940,6 @@ const CSmartTable = vue.defineComponent({
         activePage: {
             type: Number,
             default: 1,
-            required: false,
         },
         /**
          * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
@@ -14901,14 +14948,12 @@ const CSmartTable = vue.defineComponent({
          */
         cleaner: {
             type: Boolean,
-            required: false,
         },
         /**
          * Style table items as clickable.
          */
         clickableRows: {
             type: Boolean,
-            required: false,
         },
         /**
          * When set, displays additional filter row between table header and items, allowing filtering by specific column.
@@ -14918,7 +14963,6 @@ const CSmartTable = vue.defineComponent({
          */
         columnFilter: {
             type: [Boolean, Object],
-            required: false,
         },
         /**
          * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
@@ -14926,8 +14970,6 @@ const CSmartTable = vue.defineComponent({
          */
         columnFilterValue: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
@@ -14944,7 +14986,6 @@ const CSmartTable = vue.defineComponent({
          */
         columns: {
             type: Array,
-            required: false,
         },
         /**
          * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
@@ -14955,8 +14996,6 @@ const CSmartTable = vue.defineComponent({
          */
         columnSorter: {
             type: [Boolean, Object],
-            default: undefined,
-            required: false,
         },
         /**
          * If `true` Displays table footer, which mirrors table header. (without column filter).
@@ -14969,14 +15008,12 @@ const CSmartTable = vue.defineComponent({
          */
         footer: {
             type: [Boolean, Array],
-            required: false,
         },
         /**
          * Set to false to remove table header.
          */
         header: {
             type: Boolean,
-            required: false,
             default: true,
         },
         /**
@@ -14989,22 +15026,25 @@ const CSmartTable = vue.defineComponent({
         items: {
             type: Array,
             default: () => [],
-            required: false,
         },
+        /**
+         * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+         *
+         * @since 4.8.0
+         */
+        itemsNumber: Number,
         /**
          * Number of items per site, when pagination is enabled.
          */
         itemsPerPage: {
             type: Number,
             default: 10,
-            required: false,
         },
         /**
          * Label for items per page selector.
          */
         itemsPerPageLabel: {
             type: String,
-            required: false,
             default: 'Items per page:',
         },
         /**
@@ -15013,7 +15053,6 @@ const CSmartTable = vue.defineComponent({
         itemsPerPageOptions: {
             type: Array,
             default: () => [5, 10, 20, 50],
-            required: false,
         },
         /**
          * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
@@ -15023,15 +15062,12 @@ const CSmartTable = vue.defineComponent({
          */
         itemsPerPageSelect: {
             type: [Boolean, Object],
-            default: undefined,
-            required: false,
         },
         /**
          * When set, table will have loading style: loading spinner and reduced opacity. When 'small' prop is enabled spinner will be also smaller.
          */
         loading: {
             type: Boolean,
-            required: false,
         },
         /**
          * ReactNode or string for passing custom noItemsLabel texts.
@@ -15039,51 +15075,63 @@ const CSmartTable = vue.defineComponent({
         noItemsLabel: {
             type: String,
             default: 'No items found',
-            required: false,
         },
         /**
          * 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, Object],
-            required: false,
         },
         /**
          * Properties to [CSmartPagination](https://coreui.io/vue/docs/components/smart-pagination#csmartpagination) component.
          */
         paginationProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Add checkboxes to make table rows selectable.
          */
         selectable: Boolean,
+        /**
+         * Enables select all checkbox displayed in the header of the table.
+         *
+         * Can be customized, by passing prop as object with additional options as keys. Available options:
+         * - external (Boolean) - Disables automatic selection inside the component.
+         *
+         * @since 4.8.0
+         */
+        selectAll: {
+            type: [Boolean, Object],
+        },
+        /**
+         * Array of selected objects, where each object represents one item - row in table.
+         *
+         * Example item: `{ name: 'John' , age: 12 }`
+         *
+         * @since 4.8.0
+         */
+        selected: {
+            type: Array,
+            default: () => [],
+        },
         /**
          * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'. eg.:
          * { column: 'status', state: 'asc' }
          */
         sorterValue: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
          */
         tableBodyProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Properties to [CTableFoot](https://coreui.io/vue/docs/components/table/#ctablefoot) component.
          */
         tableFootProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * When set, displays table filter above table, allowing filtering by specific column.
@@ -15094,7 +15142,6 @@ const CSmartTable = vue.defineComponent({
          */
         tableFilter: {
             type: [Boolean, Object],
-            required: false,
         },
         /**
          * The element represents a caption for a component.
@@ -15102,7 +15149,6 @@ const CSmartTable = vue.defineComponent({
         tableFilterLabel: {
             type: String,
             default: 'Filter:',
-            required: false,
         },
         /**
          * Specifies a short hint that is visible in the search input.
@@ -15110,31 +15156,24 @@ const CSmartTable = vue.defineComponent({
         tableFilterPlaceholder: {
             type: String,
             default: 'type string...',
-            required: false,
         },
         /**
          * Value of table filter.
          */
         tableFilterValue: {
             type: String,
-            default: undefined,
-            required: false,
         },
         /**
          * Properties to [CTableHead](https://coreui.io/vue/docs/components/table/#ctablehead) component.
          */
         tableHeadProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Properties to [CTable](https://coreui.io/vue/docs/components/table/#ctable) component.
          */
         tableProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
     },
     emits: [
@@ -15171,6 +15210,12 @@ const CSmartTable = vue.defineComponent({
          * @property {event} event
          */
         'rowClick',
+        /**
+         * Select all callback.
+         *
+         * @since 4.8.0
+         */
+        'selectAll',
         /**
          * Selected items change callback.
          *
@@ -15191,66 +15236,90 @@ const CSmartTable = vue.defineComponent({
         'tableFilterChange',
     ],
     setup(props, { emit, slots }) {
-        // reactive data
+        const activePage = vue.ref(props.activePage);
+        const columnFilterState = vue.ref(props.columnFilterValue ? props.columnFilterValue : {});
         const items = vue.ref(props.items.map((item, index) => {
             return { ...item, _id: index };
         }));
+        const itemsNumber = vue.ref(props.itemsNumber);
+        const itemsPerPage = vue.ref(props.itemsPerPage || items.value.length);
+        const selected = vue.ref([]);
+        const selectedAll = vue.ref();
+        const sorterState = vue.ref(props.sorterValue || {});
+        const tableFilterState = vue.ref(props.tableFilterValue ? props.tableFilterValue : '');
+        vue.watch(() => props.activePage, () => {
+            activePage.value = props.activePage;
+        });
+        vue.watch(() => props.columnFilterValue, () => {
+            if (props.columnFilterValue) {
+                columnFilterState.value = props.columnFilterValue;
+            }
+        });
         vue.watch(() => props.items, () => {
-            items.value = props.items.map((item, index) => {
-                return { ...item, _id: index };
-            });
-            if (items.value &&
-                items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
+            if (props.items &&
+                props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
                 activePage.value = 1;
             }
+            props.items.forEach((item) => {
+                if (item._selected) {
+                    const _item = { ...item };
+                    delete _item['_cellProps'];
+                    delete _item['_props'];
+                    delete _item['_selected'];
+                    selected.value = [...selected.value, _item];
+                }
+            });
+            if (Array.isArray(props.items)) {
+                items.value = props.items;
+                itemsNumber.value = props.itemsNumber || props.items.length;
+            }
         });
-        const selectedAll = vue.ref();
-        vue.watch(items, () => {
-            const selected = items.value.filter((item) => item._selected === true);
+        vue.watch(() => props.itemsNumber, () => {
+            itemsNumber.value = props.itemsNumber;
+        });
+        vue.watch(() => props.itemsPerPage, () => {
+            itemsPerPage.value = props.itemsPerPage;
+        });
+        vue.watch(() => props.selected, () => {
+            selected.value = props.selected;
+        });
+        vue.watch(() => props.sorterValue, () => {
+            if (props.sorterValue) {
+                sorterState.value = props.sorterValue;
+            }
+        });
+        vue.watch(itemsPerPage, () => {
+            if (props.itemsPerPage !== itemsPerPage.value) {
+                activePage.value = 1; // TODO: set proper page after _itemsPerPage update
+            }
+            emit('itemsPerPageChange', itemsPerPage.value);
+        });
+        vue.watch([selected, itemsNumber], () => {
             emit('selectedItemsChange', selected);
-            if (selected.length === items.value.length) {
+            if (selected.value.length === itemsNumber.value) {
                 selectedAll.value = true;
                 return;
             }
-            if (selected.length === 0) {
+            if (selected.value.length === 0) {
                 selectedAll.value = false;
                 return;
             }
-            if (selected.length !== 0 && selected.length !== items.value.length) {
+            if (selected.value.length !== 0 && selected.value.length !== itemsNumber.value) {
                 selectedAll.value = 'indeterminate';
             }
         });
-        const itemsPerPage = vue.ref(props.itemsPerPage || items.value.length);
-        const activePage = vue.ref(props.activePage);
-        const sorterState = vue.reactive(props.sorterValue || {});
-        const columnFilterState = vue.ref(props.columnFilterValue ? props.columnFilterValue : {});
-        const tableFilterState = vue.ref(props.tableFilterValue ? props.tableFilterValue : '');
         vue.onMounted(() => {
             if (items.value &&
                 items.value.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
                 activePage.value = 1;
             }
         });
-        // functions
-        const isLazy = (columnFilter) => columnFilter && typeof columnFilter === 'object' && columnFilter.lazy === true;
-        const isSortable = (i) => {
-            const isDataColumn = itemsDataColumns.value.includes(rawColumnNames.value[i]);
-            let column;
-            if (props.columns)
-                column = props.columns[i];
-            return (props.columnSorter &&
-                (!props.columns ||
-                    typeof column !== 'object' ||
-                    (typeof column === 'object' &&
-                        (typeof column.sorter === 'undefined' || column.sorter))) &&
-                isDataColumn);
-        };
-        const sorterChange = (column, index) => {
-            if (!isSortable(index)) {
+        const handleSorterChange = (column, index) => {
+            if (!isSortable(index, props.columns, props.columnSorter, itemsDataColumns.value, columnNames.value)) {
                 return;
             }
             //if column changed or sort was descending change asc to true
-            const state = sorterState;
+            const state = sorterState.value;
             if (state.column === column) {
                 if (state.state === 0) {
                     state.state = 'asc';
@@ -15271,40 +15340,47 @@ const CSmartTable = vue.defineComponent({
                 state.column = column;
                 state.state = 'asc';
             }
-            sorterState.column = state.column;
-            sorterState.state = state.state;
-            emit('sorterChange', sorterState);
+            sorterState.value.column = state.column;
+            sorterState.value.state = state.state;
+            emit('sorterChange', sorterState.value);
         };
         const handleActivePageChange = (page) => {
             activePage.value = page;
             emit('activePageChange', page);
         };
-        const handleItemsPerPageChange = (itemsPerPageNumber) => {
-            itemsPerPage.value = itemsPerPageNumber;
-            itemsPerPageNumber !== props.itemsPerPage && handleActivePageChange(1); // TODO: set proper page after _itemsPerPage update
-            emit('itemsPerPageChange', itemsPerPageNumber);
-        };
-        const handleRowChecked = (id, value) => {
-            const newArr = [...items.value];
-            newArr[id]._selected = value;
-            items.value = newArr;
+        const handleItemsPerPageChange = (event) => {
+            if (typeof props.itemsPerPageSelect !== 'object' ||
+                (typeof props.itemsPerPageSelect === 'object' && !props.itemsPerPageSelect.external)) {
+                itemsPerPage.value = Number(event.target.value);
+            }
         };
-        const handleRowClick = (item, index, columnName, event) => {
-            emit('rowClick', item, index, columnName, event);
+        const handleRowChecked = (item, value) => {
+            if (value && !isObjectInArray(selected.value, item, ['_cellProps', '_props', '_selected'])) {
+                selected.value = [...selected.value, item];
+                return;
+            }
+            selected.value = selected.value.filter((_item) => !isObjectInArray([_item], item, ['_cellProps', '_props', '_selected']));
         };
         const handleSelectAllChecked = () => {
             if (selectedAll.value === true) {
-                items.value = items.value.map((item) => {
-                    return { ...item, _selected: false };
-                });
+                selected.value = [];
+                return;
+            }
+            emit('selectAll');
+            if (props.selectAll && typeof props.selectAll === 'object' && props.selectAll.external) {
                 return;
             }
-            items.value = items.value.map((item) => {
-                return { ...item, _selected: true };
+            selected.value = items.value.map((item) => {
+                delete item['_cellProps'];
+                delete item['_props'];
+                delete item['_selected'];
+                return item;
             });
         };
-        const columnFilterChange = (colName, value, type) => {
-            const _isLazy = isLazy(props.columnFilter);
+        const handleColumnFilterChange = (colName, value, type) => {
+            const _isLazy = props.columnFilter &&
+                typeof props.columnFilter === 'object' &&
+                props.columnFilter.lazy === true;
             if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
                 return;
             }
@@ -15312,98 +15388,32 @@ const CSmartTable = vue.defineComponent({
             columnFilterState.value = { ...columnFilterState.value, [`${colName}`]: value };
             emit('columnFilterChange', columnFilterState.value);
         };
-        const tableFilterChange = (value, type) => {
-            const _isLazy = isLazy(props.columnFilter);
+        const handleTableFilterChange = (value, type) => {
+            const _isLazy = props.columnFilter &&
+                typeof props.columnFilter === 'object' &&
+                props.columnFilter.lazy === true;
             if ((_isLazy && type === 'input') || (!_isLazy && type === 'change')) {
                 return;
             }
             activePage.value = 1;
             tableFilterState.value = value;
-            emit('tableFilterChange', tableFilterState);
+            emit('tableFilterChange', tableFilterState.value);
         };
-        const clean = () => {
+        const handleClean = () => {
             tableFilterState.value = '';
             columnFilterState.value = {};
-            sorterState.column = '';
-            sorterState.state = '';
+            sorterState.value = {};
         };
-        // computed
-        const genCols = vue.computed(() => Object.keys(items.value[0] || {}).filter((el) => el.charAt(0) !== '_'));
-        const rawColumnNames = vue.computed(() => props.columns
-            ? props.columns.map((column) => {
-                if (typeof column === 'object')
-                    return column.key;
-                else
-                    return column;
-            })
-            : genCols.value); //! || el
-        const itemsDataColumns = vue.computed(() => rawColumnNames.value.filter((name) => genCols.value.includes(name)));
-        // variables
-        const filteredColumns = vue.computed(() => {
-            let _items = items.value;
-            if (props.columnFilter &&
-                typeof props.columnFilter === 'object' &&
-                props.columnFilter.external) {
-                return _items;
-            }
-            Object.entries(columnFilterState.value).forEach(([key, value]) => {
-                if (value instanceof Function) {
-                    _items = _items.filter((item) => value(item[key]));
-                    return;
-                }
-                const columnFilter = String(value).toLowerCase();
-                if (columnFilter && itemsDataColumns.value.includes(key)) {
-                    _items = _items.filter((item) => {
-                        return String(item[key]).toLowerCase().includes(columnFilter);
-                    });
-                }
-            });
-            return _items;
-        });
-        const filteredTable = vue.computed(() => {
-            let items = filteredColumns.value;
-            if (!tableFilterState.value ||
-                (props.tableFilter && typeof props.tableFilter === 'object' && props.tableFilter.external)) {
-                return items;
-            }
-            const filter = tableFilterState.value.toLowerCase();
-            const valueContainFilter = (val) => String(val).toLowerCase().includes(filter);
-            items = items.filter((item) => {
-                return !!itemsDataColumns.value.find((key) => valueContainFilter(item[key]));
-            });
-            emit('filteredItemsChange', items);
-            return items;
-        });
-        const sortedItems = vue.computed(() => {
-            const col = sorterState.column;
-            if (!col ||
-                !itemsDataColumns.value.includes(col) ||
-                (props.columnSorter &&
-                    typeof props.columnSorter === 'object' &&
-                    props.columnSorter.external)) {
-                return filteredTable.value;
-            }
-            //if values in column are to be sorted by numeric value they all have to be type number
-            // const flip = sorterState.asc ? 1 : -1
-            const flip = sorterState.state === 'asc' ? 1 : sorterState.state === 'desc' ? -1 : 0;
-            const sorted = filteredTable.value.slice().sort((item, item2) => {
-                const value = item[col];
-                const value2 = item2[col];
-                const a = typeof value === 'number' ? value : String(value).toLowerCase();
-                const b = typeof value2 === 'number' ? value2 : String(value2).toLowerCase();
-                return a > b ? 1 * flip : b > a ? -1 * flip : 0;
-            });
-            return sorted;
-        });
+        const columnNames = vue.computed(() => getColumnNames(props.columns, items.value));
+        const itemsDataColumns = vue.computed(() => columnNames.value.filter((name) => getColumnNamesFromItems(items.value).includes(name)));
+        const filteredColumns = vue.computed(() => filterColumns(items.value, props.columnFilter, columnFilterState.value, itemsDataColumns.value));
+        const filteredTable = vue.computed(() => filterTable(filteredColumns.value, props.tableFilter, tableFilterState.value, itemsDataColumns.value));
+        const sortedItems = vue.computed(() => sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value));
         const numberOfPages = vue.computed(() => itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1);
         const firstItemOnActivePageIndex = vue.computed(() => activePage.value ? (activePage.value - 1) * itemsPerPage.value : 0);
-        const itemsOnActivePage = vue.computed(() => sortedItems.value.slice(firstItemOnActivePageIndex.value, firstItemOnActivePageIndex.value + itemsPerPage.value));
-        const currentItems = vue.computed(() => activePage.value ? itemsOnActivePage.value : sortedItems.value);
-        const isFiltered = vue.computed(() => {
-            return (tableFilterState.value ||
-                sorterState.column ||
-                Object.values(columnFilterState.value).join(''));
-        });
+        const currentItems = vue.computed(() => activePage.value
+            ? sortedItems.value.slice(firstItemOnActivePageIndex.value, firstItemOnActivePageIndex.value + itemsPerPage.value)
+            : sortedItems.value);
         return () => vue.h('div', {}, [
             (props.tableFilter || props.cleaner) &&
                 vue.h('div', {
@@ -15413,25 +15423,46 @@ const CSmartTable = vue.defineComponent({
                         vue.h('div', {
                             class: 'col-auto p-0',
                         }, props.tableFilter &&
-                            vue.h(CSmartTableFilter, {
-                                filterLabel: props.tableFilterLabel,
-                                filterPlaceholder: props.tableFilterPlaceholder,
-                                onFilterInput: (value) => tableFilterChange(value, 'input'),
-                                onFilterChange: (value) => tableFilterChange(value, 'change'),
-                                value: tableFilterState.value,
+                            vue.h('div', {
+                                class: 'row mb-2',
+                            }, {
+                                default: () => [
+                                    vue.h(CFormLabel, {
+                                        class: 'col-sm-auto col-form-label',
+                                    }, {
+                                        default: () => props.tableFilterLabel,
+                                    }),
+                                    vue.h('div', {
+                                        class: 'col-sm-auto',
+                                    }, vue.h(CFormInput, {
+                                        onInput: (e) => {
+                                            handleTableFilterChange(e.target.value, 'input');
+                                        },
+                                        onChange: (e) => {
+                                            handleTableFilterChange(e.target.value, 'change');
+                                        },
+                                        placeholder: props.tableFilterPlaceholder,
+                                        value: tableFilterState.value,
+                                    })),
+                                ],
                             })),
                     props.cleaner &&
                         vue.h('div', {
                             class: 'col-auto p-0',
-                        }, vue.h(CSmartTableCleaner, {
-                            onClick: () => clean(),
-                            isFiltered: isFiltered.value,
-                        }, {
-                            // @slot Cleaner icon.
-                            cleanerIcon: () => slots.cleanerIcon
-                                ? slots.cleanerIcon()
-                                : vue.h(CIcon, { width: '18', content: cilFilterX }),
-                        })),
+                        }, vue.h('button', {
+                            type: 'button',
+                            class: 'btn btn-transparent',
+                            ...(!(tableFilterState.value ||
+                                sorterState.value.column ||
+                                Object.values(columnFilterState.value).join('')) && { disabled: true, tabIndex: -1 }),
+                            onClick: () => handleClean(),
+                            onKeydown: (event) => {
+                                if (event.key === 'Enter')
+                                    handleClean();
+                            },
+                        }, slots.cleanerIcon
+                            ? slots.cleanerIcon()
+                            : vue.h(CIcon, { width: '18', content: cilFilterX }))),
                 ]),
             vue.h('div', {
                 class: 'position-relative',
@@ -15447,17 +15478,18 @@ const CSmartTable = vue.defineComponent({
                                     ...props.tableHeadProps,
                                     columnFilter: props.columnFilter,
                                     columnFilterValue: columnFilterState.value,
-                                    columns: props.columns ? props.columns : rawColumnNames.value,
+                                    columns: props.columns ? props.columns : columnNames.value,
                                     columnSorter: props.columnSorter,
                                     items: items.value,
                                     selectable: props.selectable,
-                                    selectAll: selectedAll.value,
-                                    sorterState: sorterState,
-                                    onCustomFilterChange: (key, value) => columnFilterChange(key, value),
-                                    onFilterInput: (key, value) => columnFilterChange(key, value, 'input'),
-                                    onFilterChange: (key, value) => columnFilterChange(key, value, 'change'),
+                                    selectAll: props.selectAll,
+                                    selectedAll: selectedAll.value,
+                                    sorterState: sorterState.value,
+                                    onCustomFilterChange: (key, value) => handleColumnFilterChange(key, value),
+                                    onFilterInput: (key, value) => handleColumnFilterChange(key, value, 'input'),
+                                    onFilterChange: (key, value) => handleColumnFilterChange(key, value, 'change'),
                                     onSelectAllChecked: () => handleSelectAllChecked(),
-                                    onSortClick: (key, index) => sorterChange(key, index),
+                                    onSortClick: (key, index) => handleSorterChange(key, index),
                                 }, {
                                     // @slot Sorter icon when items are unsorted.
                                     sortingIcon: () => slots.sortingIcon
@@ -15472,36 +15504,35 @@ const CSmartTable = vue.defineComponent({
                                     // @slot Sorter icon when items are sorted ascending.
                                     sortingIconAscending: () => slots.sortingIconAscending
                                         ? slots.sortingIconAscending()
-                                        : // : h(CIcon, { content: cilArrowBottom }, 'b'),
-                                            vue.h('svg', {
-                                                xmlns: 'http://www.w3.org/2000/svg',
-                                                class: 'icon',
-                                                viewBox: '0 0 512 512',
-                                                role: 'img',
-                                                innerHTML: cilArrowBottom[1],
-                                            }),
+                                        : vue.h('svg', {
+                                            xmlns: 'http://www.w3.org/2000/svg',
+                                            class: 'icon',
+                                            viewBox: '0 0 512 512',
+                                            role: 'img',
+                                            innerHTML: cilArrowBottom[1],
+                                        }),
                                     // @slot  Sorter icon when items are sorted descending.
                                     sortingIconDescending: () => slots.sortingIconDescending
                                         ? slots.sortingIconDescending()
-                                        : // : h(CIcon, { content: cilArrowTop }, 'c'),
-                                            vue.h('svg', {
-                                                xmlns: 'http://www.w3.org/2000/svg',
-                                                class: 'icon',
-                                                viewBox: '0 0 512 512',
-                                                role: 'img',
-                                                innerHTML: cilArrowTop[1],
-                                            }),
+                                        : vue.h('svg', {
+                                            xmlns: 'http://www.w3.org/2000/svg',
+                                            class: 'icon',
+                                            viewBox: '0 0 512 512',
+                                            role: 'img',
+                                            innerHTML: cilArrowTop[1],
+                                        }),
                                 }),
                             vue.h(CSmartTableBody, {
+                                clickableRows: props.clickableRows,
+                                columnNames: columnNames.value,
                                 currentItems: currentItems.value,
                                 firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                                 noItemsLabel: props.noItemsLabel,
+                                onRowChecked: (item, value) => handleRowChecked(item, value),
+                                onRowClick: (item, index, columnName, event) => props.clickableRows && emit('rowClick', item, index, columnName, event),
                                 scopedSlots: slots,
                                 selectable: props.selectable,
-                                onRowChecked: (id, value) => handleRowChecked(id, value),
-                                onRowClick: (item, index, columnName, event) => handleRowClick(item, index, columnName, event),
-                                rawColumnNames: rawColumnNames.value,
-                                clickableRows: props.clickableRows,
+                                selected: selected.value,
                                 ...props.tableBodyProps,
                             }),
                             typeof props.footer === 'boolean' &&
@@ -15511,9 +15542,10 @@ const CSmartTable = vue.defineComponent({
                                     ...props.tableFootProps,
                                     columnFilter: false,
                                     columnSorter: false,
-                                    columns: props.columns ? props.columns : rawColumnNames.value,
+                                    columns: props.columns ? props.columns : columnNames.value,
                                     selectable: props.selectable,
-                                    selectAll: selectedAll.value,
+                                    selectAll: props.selectAll,
+                                    selectedAll: selectedAll.value,
                                     onSelectAllChecked: () => handleSelectAllChecked(),
                                 }),
                             Array.isArray(props.footer) &&
@@ -15540,6 +15572,11 @@ const CSmartTable = vue.defineComponent({
                                 { sides: ['top'], query: 'tbody' },
                                 { sides: ['bottom'], query: 'tbody' },
                             ],
+                        }, {
+                            // @slot elementCover.
+                            ...(slots.elementCover && {
+                                default: () => slots.elementCover && slots.elementCover(),
+                            }),
                         }),
                 ],
             }),
@@ -15562,14 +15599,33 @@ const CSmartTable = vue.defineComponent({
                     vue.h('div', {
                         class: 'col-auto ms-auto',
                     }, props.itemsPerPageSelect &&
-                        vue.h(CSmartTableItemsPerPageSelector, {
-                            itemsPerPage: itemsPerPage.value,
-                            itemsPerPageLabel: props.itemsPerPageLabel,
-                            itemsPerPageOptions: props.itemsPerPageOptions,
-                            onChangeItemsPerPage: handleItemsPerPageChange,
+                        vue.h('div', {
+                            class: 'row',
+                        }, {
+                            default: () => [
+                                vue.h(CFormLabel, {
+                                    class: 'col-auto col-form-label',
+                                }, {
+                                    default: () => props.itemsPerPageLabel,
+                                }),
+                                vue.h('div', {
+                                    class: 'col-auto',
+                                }, vue.h(CFormSelect, {
+                                    value: itemsPerPage.value,
+                                    onChange: handleItemsPerPageChange,
+                                }, {
+                                    default: () => props.itemsPerPageOptions &&
+                                        props.itemsPerPageOptions.map((number, index) => {
+                                            return vue.h('option', {
+                                                value: number,
+                                                key: index,
+                                            }, number);
+                                        }),
+                                })),
+                            ],
                         })),
                 ]),
-        ]); //h
+        ]);
     },
 });
 
@@ -16729,6 +16785,8 @@ var Components = /*#__PURE__*/Object.freeze({
     CToaster: CToaster,
     CTooltip: CTooltip,
     CTooltipPlugin: CTooltipPlugin,
+    CVirtualScroller: CVirtualScroller,
+    CVirtualScrollerPlugin: CVirtualScrollerPlugin,
     CWidgetStatsA: CWidgetStatsA,
     CWidgetStatsB: CWidgetStatsB,
     CWidgetStatsC: CWidgetStatsC,
@@ -17137,6 +17195,8 @@ exports.CToastPlugin = CToastPlugin;
 exports.CToaster = CToaster;
 exports.CTooltip = CTooltip;
 exports.CTooltipPlugin = CTooltipPlugin;
+exports.CVirtualScroller = CVirtualScroller;
+exports.CVirtualScrollerPlugin = CVirtualScrollerPlugin;
 exports.CWidgetStatsA = CWidgetStatsA;
 exports.CWidgetStatsB = CWidgetStatsB;
 exports.CWidgetStatsC = CWidgetStatsC;