@coreui/vue-pro 4.9.0-beta.2 → 5.0.0-alpha.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, cloneVNode, onUnmounted, nextTick, computed, vShow, onBeforeUnmount, Teleport } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, cloneVNode, nextTick, computed, vShow, onBeforeUnmount, Teleport } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -1827,6 +1827,20 @@ const CCardPlugin = {
     },
 };
 
+const getRTLPlacement = (placement, element) => {
+    switch (placement) {
+        case 'right': {
+            return isRTL(element) ? 'left' : 'right';
+        }
+        case 'left': {
+            return isRTL(element) ? 'right' : 'left';
+        }
+        default: {
+            return placement;
+        }
+    }
+};
+
 const getUID = (prefix) => {
     do {
         prefix += Math.floor(Math.random() * 1_000_000);
@@ -7704,14 +7718,16 @@ const CDateRangePicker = defineComponent({
         });
         watch(() => props.startDate, () => {
             if (props.startDate) {
-                calendarDate.value = new Date(props.startDate);
-                startDate.value = new Date(props.startDate);
+                const date = new Date(props.startDate);
+                calendarDate.value = date;
+                startDate.value = date;
             }
         });
         watch(() => props.endDate, () => {
             if (props.endDate) {
-                calendarDate.value = new Date(props.endDate);
-                endDate.value = new Date(props.endDate);
+                const date = new Date(props.endDate);
+                calendarDate.value = date;
+                endDate.value = date;
             }
         });
         watch(() => props.maxDate, () => {
@@ -8377,6 +8393,91 @@ const CDatePickerPlugin = {
     },
 };
 
+const getStoredTheme = (localStorageItemName) => typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
+const setStoredTheme = (localStorageItemName, colorMode) => localStorage.setItem(localStorageItemName, colorMode);
+const getPreferredColorScheme = (localStorageItemName) => {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const storedTheme = getStoredTheme(localStorageItemName);
+    if (storedTheme) {
+        return storedTheme;
+    }
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+};
+const setTheme = (colorMode) => {
+    document.documentElement.dataset.coreuiTheme =
+        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : colorMode;
+    const event = new Event('ColorSchemeChange');
+    document.documentElement.dispatchEvent(event);
+};
+const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
+    const colorMode = ref(getPreferredColorScheme(localStorageItemName));
+    watch(colorMode, () => {
+        if (colorMode.value) {
+            setStoredTheme(localStorageItemName, colorMode.value);
+            setTheme(colorMode.value);
+        }
+    });
+    onBeforeMount(() => {
+        if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
+            setTheme(colorMode.value);
+        }
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            const storedTheme = getStoredTheme(localStorageItemName);
+            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
+                setTheme(colorMode.value);
+            }
+        });
+    });
+    return {
+        colorMode,
+        isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
+        setColorMode: (mode) => {
+            colorMode.value = mode;
+        },
+    };
+};
+
+const usePopper = () => {
+    const _popper = ref();
+    const initPopper = (reference, popper, options) => {
+        _popper.value = createPopper(reference, popper, options);
+    };
+    const destroyPopper = () => {
+        if (_popper.value) {
+            _popper.value.destroy();
+        }
+        _popper.value = undefined;
+    };
+    return {
+        popper: _popper.value,
+        initPopper,
+        destroyPopper,
+    };
+};
+
+const getPlacement = (placement, direction, alignment, isRTL) => {
+    let _placement = placement;
+    if (direction === 'dropup') {
+        _placement = isRTL ? 'top-end' : 'top-start';
+    }
+    if (direction === 'dropup-center') {
+        _placement = 'top';
+    }
+    if (direction === 'dropend') {
+        _placement = isRTL ? 'left-start' : 'right-start';
+    }
+    if (direction === 'dropstart') {
+        _placement = isRTL ? 'right-start' : 'left-start';
+    }
+    if (alignment === 'end') {
+        _placement = isRTL ? 'bottom-start' : 'bottom-end';
+    }
+    return _placement;
+};
 const CDropdown = defineComponent({
     name: 'CDropdown',
     props: {
@@ -8448,6 +8549,15 @@ const CDropdown = defineComponent({
          * Toggle the disabled state for the component.
          */
         disabled: Boolean,
+        /**
+         * Offset of the dropdown menu relative to its target.
+         *
+         * @since 4.9.0
+         */
+        offset: {
+            type: Array,
+            default: () => [0, 2],
+        },
         /**
          * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
          *
@@ -8501,14 +8611,37 @@ const CDropdown = defineComponent({
     setup(props, { slots, emit }) {
         const dropdownToggleRef = ref();
         const dropdownMenuRef = ref();
-        const placement = ref(props.placement);
-        const popper = ref();
+        const popper = ref(typeof props.alignment === 'object' ? false : props.popper);
         const visible = ref(props.visible);
+        const { initPopper, destroyPopper } = usePopper();
+        const popperConfig = {
+            modifiers: [
+                {
+                    name: 'offset',
+                    options: {
+                        offset: props.offset,
+                    },
+                },
+            ],
+            placement: getPlacement(props.placement, props.direction, props.alignment, isRTL(dropdownMenuRef.value)),
+        };
         watch(() => props.visible, () => {
             visible.value = props.visible;
         });
+        watch(visible, () => {
+            if (visible.value && dropdownToggleRef.value && dropdownMenuRef.value) {
+                popper.value && initPopper(dropdownToggleRef.value, dropdownMenuRef.value, popperConfig);
+                window.addEventListener('mouseup', handleMouseUp);
+                window.addEventListener('keyup', handleKeyup);
+                emit('show');
+                return;
+            }
+            popper.value && destroyPopper();
+            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('keyup', handleKeyup);
+            emit('hide');
+        });
         provide('config', {
-            autoClose: props.autoClose,
             alignment: props.alignment,
             dark: props.dark,
             popper: props.popper,
@@ -8517,24 +8650,31 @@ const CDropdown = defineComponent({
         provide('visible', visible);
         provide('dropdownToggleRef', dropdownToggleRef);
         provide('dropdownMenuRef', dropdownMenuRef);
-        const initPopper = () => {
-            // Disable popper if responsive aligment is set.
-            if (typeof props.alignment === 'object') {
+        const handleKeyup = (event) => {
+            if (props.autoClose === false) {
                 return;
             }
-            if (dropdownToggleRef.value) {
-                popper.value = createPopper(dropdownToggleRef.value, dropdownMenuRef.value, {
-                    placement: placement.value,
-                });
+            if (event.key === 'Escape') {
+                setVisible(false);
             }
         };
-        const destroyPopper = () => {
-            if (popper.value) {
-                popper.value.destroy();
+        const handleMouseUp = (event) => {
+            if (!dropdownToggleRef.value || !dropdownMenuRef.value) {
+                return;
+            }
+            if (dropdownToggleRef.value.contains(event.target)) {
+                return;
+            }
+            if (props.autoClose === true ||
+                (props.autoClose === 'inside' &&
+                    dropdownMenuRef.value.contains(event.target)) ||
+                (props.autoClose === 'outside' &&
+                    !dropdownMenuRef.value.contains(event.target))) {
+                setVisible(false);
+                return;
             }
-            popper.value = undefined;
         };
-        const toggleMenu = (_visible) => {
+        const setVisible = (_visible) => {
             if (props.disabled) {
                 return;
             }
@@ -8548,38 +8688,7 @@ const CDropdown = defineComponent({
             }
             visible.value = true;
         };
-        provide('toggleMenu', toggleMenu);
-        const hideMenu = () => {
-            if (props.disabled) {
-                return;
-            }
-            visible.value = false;
-        };
-        provide('hideMenu', hideMenu);
-        watch(visible, () => {
-            props.popper && (visible.value ? initPopper() : destroyPopper());
-            visible.value ? emit('show') : emit('hide');
-        });
-        onMounted(() => {
-            if (props.direction === 'center') {
-                placement.value = 'bottom';
-            }
-            if (props.direction === 'dropup') {
-                placement.value = isRTL(dropdownMenuRef.value) ? 'top-end' : 'top-start';
-            }
-            if (props.direction === 'dropup-center') {
-                placement.value = 'top';
-            }
-            if (props.direction === 'dropend') {
-                placement.value = isRTL(dropdownMenuRef.value) ? 'left-start' : 'right-start';
-            }
-            if (props.direction === 'dropstart') {
-                placement.value = isRTL(dropdownMenuRef.value) ? 'right-start' : 'left-start';
-            }
-            if (props.alignment === 'end') {
-                placement.value = isRTL(dropdownMenuRef.value) ? 'bottom-start' : 'bottom-end';
-            }
-        });
+        provide('setVisible', setVisible);
         return () => props.variant === 'input-group'
             ? [slots.default && slots.default()]
             : h$1('div', {
@@ -8672,12 +8781,10 @@ const CDropdownMenu = defineComponent({
         },
     },
     setup(props, { slots }) {
-        const dropdownToggleRef = inject('dropdownToggleRef');
         const dropdownMenuRef = inject('dropdownMenuRef');
         const config = inject('config'); // eslint-disable-line @typescript-eslint/no-explicit-any
-        const hideMenu = inject('hideMenu');
         const visible = inject('visible');
-        const { autoClose, alignment, dark, popper } = config;
+        const { alignment, dark, popper } = config;
         // eslint-disable-next-line @typescript-eslint/ban-types, unicorn/consistent-function-scoping
         const alignmentClassNames = (alignment) => {
             const classNames = [];
@@ -8691,39 +8798,6 @@ const CDropdownMenu = defineComponent({
             }
             return classNames;
         };
-        const handleKeyup = (event) => {
-            if (autoClose === false) {
-                return;
-            }
-            if (event.key === 'Escape') {
-                hideMenu();
-            }
-        };
-        const handleMouseUp = (event) => {
-            if (dropdownToggleRef.value?.contains(event.target)) {
-                return;
-            }
-            if (autoClose === true) {
-                hideMenu();
-                return;
-            }
-            if (autoClose === 'inside' && dropdownMenuRef.value?.contains(event.target)) {
-                hideMenu();
-                return;
-            }
-            if (autoClose === 'outside' &&
-                !dropdownMenuRef.value?.contains(event.target)) {
-                hideMenu();
-            }
-        };
-        onUpdated(() => {
-            visible.value && window.addEventListener('mouseup', handleMouseUp);
-            visible.value && window.addEventListener('keyup', handleKeyup);
-        });
-        onUnmounted(() => {
-            window.removeEventListener('mouseup', handleMouseUp);
-            window.removeEventListener('keyup', handleKeyup);
-        });
         return () => h$1(props.component, {
             class: [
                 'dropdown-menu',
@@ -8820,7 +8894,7 @@ const CDropdownToggle = defineComponent({
         const dropdownToggleRef = inject('dropdownToggleRef');
         const dropdownVariant = inject('variant');
         const visible = inject('visible');
-        const toggleMenu = inject('toggleMenu');
+        const setVisible = inject('setVisible');
         const className = [
             {
                 'dropdown-toggle': props.caret,
@@ -8835,7 +8909,7 @@ const CDropdownToggle = defineComponent({
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu();
+                    setVisible();
                 },
             }),
             ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
@@ -8843,13 +8917,13 @@ const CDropdownToggle = defineComponent({
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu(true);
+                    setVisible(true);
                 },
                 onblur: () => {
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu(false);
+                    setVisible(false);
                 },
             }),
         };
@@ -9140,6 +9214,12 @@ const CFormCheck = defineComponent({
          * @see http://coreui.io/vue/docs/components/button.html
          */
         button: Object,
+        /**
+         * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `false` state.
+         *
+         * @since 4.9.0
+         */
+        falseValue: String,
         /**
          * Provide valuable, actionable feedback.
          *
@@ -9192,7 +9272,7 @@ const CFormCheck = defineComponent({
          * The default name for a value passed using v-model.
          */
         modelValue: {
-            type: [Boolean, String],
+            type: [Array, Boolean, String],
             value: undefined,
         },
         /**
@@ -9207,6 +9287,12 @@ const CFormCheck = defineComponent({
          * @since 4.3.0
          */
         tooltipFeedback: Boolean,
+        /**
+         * Use in conjunction with the v-model directive to specify the value that should be assigned to the bound variable when the checkbox is in the `true` state.
+         *
+         * @since 4.9.0
+         */
+        trueValue: String,
         /**
          * Specifies the type of component.
          *
@@ -9237,8 +9323,28 @@ const CFormCheck = defineComponent({
     ],
     setup(props, { attrs, emit, slots }) {
         const handleChange = (event) => {
+            const target = event.target;
             emit('change', event);
-            emit('update:modelValue', event.target.value);
+            if (props.falseValue && props.trueValue) {
+                emit('update:modelValue', target.checked ? props.trueValue : props.falseValue);
+                return;
+            }
+            if (props.value && Array.isArray(props.modelValue)) {
+                if (props.modelValue.includes(props.value)) {
+                    emit('update:modelValue', props.modelValue.filter((value) => value !== props.value));
+                }
+                else {
+                    emit('update:modelValue', [...props.modelValue, props.value]);
+                }
+                return;
+            }
+            if (props.value === undefined) {
+                emit('update:modelValue', target.checked);
+                return;
+            }
+            if (props.value && (props.modelValue === undefined || typeof props.modelValue === 'string')) {
+                emit('update:modelValue', target.checked ? props.value : undefined);
+            }
         };
         const className = [
             'form-check',
@@ -9258,11 +9364,19 @@ const CFormCheck = defineComponent({
                 'me-2': props.hitArea,
             },
         ];
-        const isChecked = computed(() => props.modelValue == props.value);
+        const isChecked = computed(() => {
+            if (Array.isArray(props.modelValue)) {
+                return props.modelValue.includes(props.value);
+            }
+            if (typeof props.modelValue === 'string') {
+                return props.modelValue === props.value;
+            }
+            return props.modelValue;
+        });
         const formControl = () => {
             return h$1('input', {
                 ...attrs,
-                ...(props.modelValue && { checked: isChecked.value }),
+                ...(props.modelValue && props.value && { checked: isChecked.value }),
                 class: inputClassName,
                 id: props.id,
                 indeterminate: props.indeterminate,
@@ -11267,7 +11381,7 @@ const CMultiSelect = defineComponent({
         /**
          * Allow users to create options if they are not in the list of options.
          *
-         * @since 4.9.0-next.0
+         * @since 4.9.0
          */
         allowCreateOptions: Boolean,
         /**
@@ -11282,7 +11396,7 @@ const CMultiSelect = defineComponent({
         /**
          * Clear current search on selecting an item.
          *
-         * @since 4.9.0-next.0
+         * @since 4.9.0
          */
         clearSearchOnSelect: Boolean,
         /**
@@ -11326,7 +11440,7 @@ const CMultiSelect = defineComponent({
         /**
          * When set, the options list will have a loading style: loading spinner and reduced opacity.
          *
-         * @since 4.9.0-next.0
+         * @since 4.9.0
          */
         loading: Boolean,
         /**
@@ -12716,26 +12830,49 @@ const CProgressPlugin = {
     },
 };
 
-const getPlacement$1 = (placement, element) => {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
 const CPopover = defineComponent({
     name: 'CPopover',
     props: {
+        /**
+         * Apply a CSS fade transition to the popover.
+         *
+         * @since 4.9.0
+         */
+        animation: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
          */
         content: String,
+        /**
+         * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+         *
+         * @since 4.9.0
+         */
+        delay: {
+            type: [Number, Object],
+            default: 0,
+        },
+        /**
+         * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+         *
+         * @since 4.9.0
+         */
+        fallbackPlacements: {
+            type: [String, Array],
+            default: () => ['top', 'right', 'bottom', 'left'],
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['top', 'right', 'bottom', 'left'].includes(value);
+                }
+                if (Array.isArray(value)) {
+                    return value.every((e) => ['top', 'right', 'bottom', 'left'].includes(e));
+                }
+                return false;
+            },
+        },
         /**
          * Offset of the popover relative to its target.
          */
@@ -12793,11 +12930,35 @@ const CPopover = defineComponent({
     setup(props, { attrs, slots, emit }) {
         const togglerRef = ref();
         const popoverRef = ref();
-        const popper = ref();
         const visible = ref(props.visible);
+        const { initPopper, destroyPopper } = usePopper();
+        const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay;
+        const popperConfig = {
+            modifiers: [
+                {
+                    name: 'arrow',
+                    options: {
+                        element: '.popover-arrow',
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: props.fallbackPlacements,
+                    },
+                },
+                {
+                    name: 'offset',
+                    options: {
+                        offset: props.offset,
+                    },
+                },
+            ],
+            placement: getRTLPlacement(props.placement, togglerRef.value),
+        };
         const handleEnter = (el, done) => {
             emit('show');
-            initPopper();
+            initPopper(togglerRef.value, popoverRef.value, popperConfig);
             el.classList.add('show');
             executeAfterTransition(() => done(), el);
         };
@@ -12809,30 +12970,17 @@ const CPopover = defineComponent({
                 destroyPopper();
             }, el);
         };
-        const handleToggle = (event) => {
+        const toggleVisible = (event, _visible) => {
             togglerRef.value = event.target;
-            visible.value = !visible.value;
-        };
-        const initPopper = () => {
-            if (togglerRef.value) {
-                popper.value = createPopper(togglerRef.value, popoverRef.value, {
-                    placement: getPlacement$1(props.placement, togglerRef.value),
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: props.offset,
-                            },
-                        },
-                    ],
-                });
-            }
-        };
-        const destroyPopper = () => {
-            if (popper.value) {
-                popper.value.destroy();
+            if (_visible) {
+                setTimeout(() => {
+                    visible.value = true;
+                }, delay.show);
+                return;
             }
-            popper.value = undefined;
+            setTimeout(() => {
+                visible.value = false;
+            }, delay.hide);
         };
         return () => [
             h$1(Teleport, {
@@ -12842,12 +12990,18 @@ const CPopover = defineComponent({
                 onLeave: (el, done) => handleLeave(el, done),
             }, () => visible.value &&
                 h$1('div', {
-                    class: 'popover fade bs-popover-auto',
+                    class: [
+                        'popover',
+                        'bs-popover-auto',
+                        {
+                            fade: props.animation,
+                        },
+                    ],
                     ref: popoverRef,
                     role: 'tooltip',
                     ...attrs,
                 }, [
-                    h$1('div', { class: 'popover-arrow', 'data-popper-arrow': '' }),
+                    h$1('div', { class: 'popover-arrow' }),
                     (props.title || slots.title) &&
                         h$1('div', { class: 'popover-header' }, {
                             default: () => (slots.title && slots.title()) || props.title,
@@ -12860,11 +13014,11 @@ const CPopover = defineComponent({
             slots.toggler &&
                 slots.toggler({
                     on: {
-                        click: (event) => props.trigger.includes('click') && handleToggle(event),
-                        blur: (event) => props.trigger.includes('focus') && handleToggle(event),
-                        focus: (event) => props.trigger.includes('focus') && handleToggle(event),
-                        mouseenter: (event) => props.trigger.includes('hover') && handleToggle(event),
-                        mouseleave: (event) => props.trigger.includes('hover') && handleToggle(event),
+                        click: (event) => props.trigger.includes('click') && toggleVisible(event, !visible.value),
+                        blur: (event) => props.trigger.includes('focus') && toggleVisible(event, false),
+                        focus: (event) => props.trigger.includes('focus') && toggleVisible(event, true),
+                        mouseenter: (event) => props.trigger.includes('hover') && toggleVisible(event, true),
+                        mouseleave: (event) => props.trigger.includes('hover') && toggleVisible(event, false),
                     },
                 }),
         ];
@@ -15424,26 +15578,49 @@ const CToastPlugin = {
     },
 };
 
-const getPlacement = (placement, element) => {
-    switch (placement) {
-        case 'right': {
-            return isRTL(element) ? 'left' : 'right';
-        }
-        case 'left': {
-            return isRTL(element) ? 'right' : 'left';
-        }
-        default: {
-            return placement;
-        }
-    }
-};
 const CTooltip = defineComponent({
     name: 'CTooltip',
     props: {
+        /**
+         * Apply a CSS fade transition to the tooltip.
+         *
+         * @since 4.9.0
+         */
+        animation: {
+            type: Boolean,
+            default: true,
+        },
         /**
          * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
          */
         content: String,
+        /**
+         * The delay for displaying and hiding the popover (in milliseconds). When a numerical value is provided, the delay applies to both the hide and show actions. The object structure for specifying the delay is as follows: delay: `{ 'show': 500, 'hide': 100 }`.
+         *
+         * @since 4.9.0
+         */
+        delay: {
+            type: [Number, Object],
+            default: 0,
+        },
+        /**
+         * Specify the desired order of fallback placements by providing a list of placements as an array. The placements should be prioritized based on preference.
+         *
+         * @since 4.9.0
+         */
+        fallbackPlacements: {
+            type: [String, Array],
+            default: () => ['top', 'right', 'bottom', 'left'],
+            validator: (value) => {
+                if (typeof value === 'string') {
+                    return ['top', 'right', 'bottom', 'left'].includes(value);
+                }
+                if (Array.isArray(value)) {
+                    return value.every((e) => ['top', 'right', 'bottom', 'left'].includes(e));
+                }
+                return false;
+            },
+        },
         /**
          * Offset of the tooltip relative to its target.
          */
@@ -15468,7 +15645,7 @@ const CTooltip = defineComponent({
          */
         trigger: {
             type: [String, Array],
-            default: 'hover',
+            default: () => ['hover', 'focus'],
             validator: (value) => {
                 if (typeof value === 'string') {
                     return ['click', 'focus', 'hover'].includes(value);
@@ -15497,11 +15674,35 @@ const CTooltip = defineComponent({
     setup(props, { attrs, slots, emit }) {
         const togglerRef = ref();
         const tooltipRef = ref();
-        const popper = ref();
         const visible = ref(props.visible);
+        const { initPopper, destroyPopper } = usePopper();
+        const delay = typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay;
+        const popperConfig = {
+            modifiers: [
+                {
+                    name: 'arrow',
+                    options: {
+                        element: '.tooltip-arrow',
+                    },
+                },
+                {
+                    name: 'flip',
+                    options: {
+                        fallbackPlacements: props.fallbackPlacements,
+                    },
+                },
+                {
+                    name: 'offset',
+                    options: {
+                        offset: props.offset,
+                    },
+                },
+            ],
+            placement: getRTLPlacement(props.placement, togglerRef.value),
+        };
         const handleEnter = (el, done) => {
             emit('show');
-            initPopper();
+            initPopper(togglerRef.value, tooltipRef.value, popperConfig);
             el.classList.add('show');
             executeAfterTransition(() => done(), el);
         };
@@ -15513,30 +15714,17 @@ const CTooltip = defineComponent({
                 destroyPopper();
             }, el);
         };
-        const handleToggle = (event) => {
+        const toggleVisible = (event, _visible) => {
             togglerRef.value = event.target;
-            visible.value = !visible.value;
-        };
-        const initPopper = () => {
-            if (togglerRef.value) {
-                popper.value = createPopper(togglerRef.value, tooltipRef.value, {
-                    placement: getPlacement(props.placement, togglerRef.value),
-                    modifiers: [
-                        {
-                            name: 'offset',
-                            options: {
-                                offset: props.offset,
-                            },
-                        },
-                    ],
-                });
-            }
-        };
-        const destroyPopper = () => {
-            if (popper.value) {
-                popper.value.destroy();
+            if (_visible) {
+                setTimeout(() => {
+                    visible.value = true;
+                }, delay.show);
+                return;
             }
-            popper.value = undefined;
+            setTimeout(() => {
+                visible.value = false;
+            }, delay.hide);
         };
         return () => [
             h$1(Teleport, {
@@ -15546,12 +15734,18 @@ const CTooltip = defineComponent({
                 onLeave: (el, done) => handleLeave(el, done),
             }, () => visible.value &&
                 h$1('div', {
-                    class: 'tooltip fade bs-tooltip-auto',
+                    class: [
+                        'tooltip',
+                        'bs-tooltip-auto',
+                        {
+                            fade: props.animation,
+                        },
+                    ],
                     ref: tooltipRef,
                     role: 'tooltip',
                     ...attrs,
                 }, [
-                    h$1('div', { class: 'tooltip-arrow', 'data-popper-arrow': '' }),
+                    h$1('div', { class: 'tooltip-arrow' }),
                     (props.content || slots.content) &&
                         h$1('div', { class: 'tooltip-inner' }, {
                             default: () => (slots.content && slots.content()) || props.content,
@@ -15560,11 +15754,11 @@ const CTooltip = defineComponent({
             slots.toggler &&
                 slots.toggler({
                     on: {
-                        click: (event) => props.trigger.includes('click') && handleToggle(event),
-                        blur: (event) => props.trigger.includes('focus') && handleToggle(event),
-                        focus: (event) => props.trigger.includes('focus') && handleToggle(event),
-                        mouseenter: (event) => props.trigger.includes('hover') && handleToggle(event),
-                        mouseleave: (event) => props.trigger.includes('hover') && handleToggle(event),
+                        click: (event) => props.trigger.includes('click') && toggleVisible(event, !visible.value),
+                        blur: (event) => props.trigger.includes('focus') && toggleVisible(event, false),
+                        focus: (event) => props.trigger.includes('focus') && toggleVisible(event, true),
+                        mouseenter: (event) => props.trigger.includes('hover') && toggleVisible(event, true),
+                        mouseleave: (event) => props.trigger.includes('hover') && toggleVisible(event, false),
                     },
                 }),
         ];
@@ -15669,7 +15863,7 @@ function isPlainObject(o) {
   return true;
 }
 
-function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e},t.apply(this,arguments)}function n(e,t){if(null==e)return {};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}const r={silent:!1,logLevel:"warn"},i=["validator"],o=Object.prototype,a=o.toString,s=o.hasOwnProperty,u=/^\s*function (\w+)/;function l(e){var t;const n=null!==(t=null==e?void 0:e.type)&&void 0!==t?t:e;if(n){const e=n.toString().match(u);return e?e[1]:""}return ""}const c=isPlainObject,f=e=>e;let d=f;if("production"!==process.env.NODE_ENV){const e="undefined"!=typeof console;d=e?function(e,t=r.logLevel){!1===r.silent&&console[t](`[VueTypes warn]: ${e}`);}:f;}const p=(e,t)=>s.call(e,t),y=Number.isInteger||function(e){return "number"==typeof e&&isFinite(e)&&Math.floor(e)===e},v=Array.isArray||function(e){return "[object Array]"===a.call(e)},h=e=>"[object Function]"===a.call(e),b=(e,t)=>c(e)&&p(e,"_vueTypes_name")&&(!t||e._vueTypes_name===t),g=e=>c(e)&&(p(e,"type")||["_vueTypes_name","validator","default","required"].some(t=>p(e,t)));function O(e,t){return Object.defineProperty(e.bind(t),"__original",{value:e})}function m(e,t,n=!1){let r,i=!0,o="";r=c(e)?e:{type:e};const a=b(r)?r._vueTypes_name+" - ":"";if(g(r)&&null!==r.type){if(void 0===r.type||!0===r.type)return i;if(!r.required&&null==t)return i;v(r.type)?(i=r.type.some(e=>!0===m(e,t,!0)),o=r.type.map(e=>l(e)).join(" or ")):(o=l(r),i="Array"===o?v(t):"Object"===o?c(t):"String"===o||"Number"===o||"Boolean"===o||"Function"===o?function(e){if(null==e)return "";const t=e.constructor.toString().match(u);return t?t[1]:""}(t)===o:t instanceof r.type);}if(!i){const e=`${a}value "${t}" should be of type "${o}"`;return !1===n?(d(e),!1):e}if(p(r,"validator")&&h(r.validator)){const e=d,o=[];if(d=e=>{o.push(e);},i=r.validator(t),d=e,!i){const e=(o.length>1?"* ":"")+o.join("\n* ");return o.length=0,!1===n?(d(e),i):e}}return i}function j(e,t){const n=Object.defineProperties(t,{_vueTypes_name:{value:e,writable:!0},isRequired:{get(){return this.required=!0,this}},def:{value(e){return void 0===e?this.type===Boolean||Array.isArray(this.type)&&this.type.includes(Boolean)?void(this.default=void 0):(p(this,"default")&&delete this.default,this):h(e)||!0===m(this,e,!0)?(this.default=v(e)?()=>[...e]:c(e)?()=>Object.assign({},e):e,this):(d(`${this._vueTypes_name} - invalid default value: "${e}"`),this)}}}),{validator:r}=n;return h(r)&&(n.validator=O(r,n)),n}function _(e,t){const n=j(e,t);return Object.defineProperty(n,"validate",{value(e){return h(this.validator)&&d(`${this._vueTypes_name} - calling .validate() will overwrite the current custom validator function. Validator info:\n${JSON.stringify(this)}`),this.validator=O(e,this),this}})}function T(e,t,r){const o=function(e){const t={};return Object.getOwnPropertyNames(e).forEach(n=>{t[n]=Object.getOwnPropertyDescriptor(e,n);}),Object.defineProperties({},t)}(t);if(o._vueTypes_name=e,!c(r))return o;const{validator:a}=r,s=n(r,i);if(h(a)){let{validator:e}=o;e&&(e=null!==(l=(u=e).__original)&&void 0!==l?l:u),o.validator=O(e?function(t){return e.call(this,t)&&a.call(this,t)}:a,o);}var u,l;return Object.assign(o,s)}function $(e){return e.replace(/^(?!\s*$)/gm,"  ")}const w=()=>_("any",{}),x=()=>_("function",{type:Function}),P=()=>_("boolean",{type:Boolean}),A=()=>_("string",{type:String}),E=()=>_("number",{type:Number}),S=()=>_("array",{type:Array}),N=()=>_("object",{type:Object}),V=()=>j("integer",{type:Number,validator(e){const t=y(e);return !1===t&&d(`integer - "${e}" is not an integer`),t}}),q=()=>j("symbol",{validator(e){const t="symbol"==typeof e;return !1===t&&d(`symbol - invalid value "${e}"`),t}}),k=()=>Object.defineProperty({type:null,validator(e){const t=null===e;return !1===t&&d("nullable - value should be null"),t}},"_vueTypes_name",{value:"nullable"});function D(e,t="custom validation failed"){if("function"!=typeof e)throw new TypeError("[VueTypes error]: You must provide a function as argument");return j(e.name||"<<anonymous function>>",{type:null,validator(n){const r=e(n);return r||d(`${this._vueTypes_name} - ${t}`),r}})}function L(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument.");const t=`oneOf - value should be one of "${e.map(e=>"symbol"==typeof e?e.toString():e).join('", "')}".`,n={validator(n){const r=-1!==e.indexOf(n);return r||d(t),r}};if(-1===e.indexOf(null)){const t=e.reduce((e,t)=>{if(null!=t){const n=t.constructor;-1===e.indexOf(n)&&e.push(n);}return e},[]);t.length>0&&(n.type=t);}return j("oneOf",n)}function B(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument");let t=!1,n=!1,r=[];for(let i=0;i<e.length;i+=1){const o=e[i];if(g(o)){if(h(o.validator)&&(t=!0),b(o,"oneOf")&&o.type){r=r.concat(o.type);continue}if(b(o,"nullable")){n=!0;continue}if(!0===o.type||!o.type){d('oneOfType - invalid usage of "true" and "null" as types.');continue}r=r.concat(o.type);}else r.push(o);}r=r.filter((e,t)=>r.indexOf(e)===t);const i=!1===n&&r.length>0?r:null;return j("oneOfType",t?{type:i,validator(t){const n=[],r=e.some(e=>{const r=m(e,t,!0);return "string"==typeof r&&n.push(r),!0===r});return r||d(`oneOfType - provided value does not match any of the ${n.length} passed-in validators:\n${$(n.join("\n"))}`),r}}:{type:i})}function F(e){return j("arrayOf",{type:Array,validator(t){let n="";const r=t.every(t=>(n=m(e,t,!0),!0===n));return r||d(`arrayOf - value validation error:\n${$(n)}`),r}})}function Y(e){return j("instanceOf",{type:e})}function I(e){return j("objectOf",{type:Object,validator(t){let n="";const r=Object.keys(t).every(r=>(n=m(e,t[r],!0),!0===n));return r||d(`objectOf - value validation error:\n${$(n)}`),r}})}function J(e){const t=Object.keys(e),n=t.filter(t=>{var n;return !(null===(n=e[t])||void 0===n||!n.required)}),r=j("shape",{type:Object,validator(r){if(!c(r))return !1;const i=Object.keys(r);if(n.length>0&&n.some(e=>-1===i.indexOf(e))){const e=n.filter(e=>-1===i.indexOf(e));return d(1===e.length?`shape - required property "${e[0]}" is not defined.`:`shape - required properties "${e.join('", "')}" are not defined.`),!1}return i.every(n=>{if(-1===t.indexOf(n))return !0===this._vueTypes_isLoose||(d(`shape - shape definition does not include a "${n}" property. Allowed keys: "${t.join('", "')}".`),!1);const i=m(e[n],r[n],!0);return "string"==typeof i&&d(`shape - "${n}" property validation error:\n ${$(i)}`),!0===i})}});return Object.defineProperty(r,"_vueTypes_isLoose",{writable:!0,value:!1}),Object.defineProperty(r,"loose",{get(){return this._vueTypes_isLoose=!0,this}}),r}const M=["name","validate","getter"],R=/*#__PURE__*/(()=>{var e;return (e=class{static get any(){return w()}static get func(){return x().def(this.defaults.func)}static get bool(){return void 0===this.defaults.bool?P():P().def(this.defaults.bool)}static get string(){return A().def(this.defaults.string)}static get number(){return E().def(this.defaults.number)}static get array(){return S().def(this.defaults.array)}static get object(){return N().def(this.defaults.object)}static get integer(){return V().def(this.defaults.integer)}static get symbol(){return q()}static get nullable(){return k()}static extend(e){if(d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."),v(e))return e.forEach(e=>this.extend(e)),this;const{name:t,validate:r=!1,getter:i=!1}=e,o=n(e,M);if(p(this,t))throw new TypeError(`[VueTypes error]: Type "${t}" already defined`);const{type:a}=o;if(b(a))return delete o.type,Object.defineProperty(this,t,i?{get:()=>T(t,a,o)}:{value(...e){const n=T(t,a,o);return n.validator&&(n.validator=n.validator.bind(n,...e)),n}});let s;return s=i?{get(){const e=Object.assign({},o);return r?_(t,e):j(t,e)},enumerable:!0}:{value(...e){const n=Object.assign({},o);let i;return i=r?_(t,n):j(t,n),n.validator&&(i.validator=n.validator.bind(i,...e)),i},enumerable:!0},Object.defineProperty(this,t,s)}}).defaults={},e.sensibleDefaults=void 0,e.config=r,e.custom=D,e.oneOf=L,e.instanceOf=Y,e.oneOfType=B,e.arrayOf=F,e.objectOf=I,e.shape=J,e.utils={validate:(e,t)=>!0===m(t,e,!0),toType:(e,t,n=!1)=>n?_(e,t):j(e,t)},e})();function U(e={func:()=>{},bool:!0,string:"",number:0,array:()=>[],object:()=>({}),integer:0}){var n;return (n=class extends R{static get sensibleDefaults(){return t({},this.defaults)}static set sensibleDefaults(n){this.defaults=!1!==n?t({},!0!==n?n:e):{};}}).defaults=t({},e),n}class z extends(U()){}
+function t(){return t=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);}return e},t.apply(this,arguments)}function n(e,t){if(null==e)return {};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(i[n]=e[n]);return i}const r={silent:!1,logLevel:"warn"},i=["validator"],o=Object.prototype,a=o.toString,s=o.hasOwnProperty,u=/^\s*function (\w+)/;function l(e){var t;const n=null!==(t=null==e?void 0:e.type)&&void 0!==t?t:e;if(n){const e=n.toString().match(u);return e?e[1]:""}return ""}const c=isPlainObject,f=e=>e;let d=f;if("production"!==process.env.NODE_ENV){const e="undefined"!=typeof console;d=e?function(e,t=r.logLevel){!1===r.silent&&console[t](`[VueTypes warn]: ${e}`);}:f;}const p=(e,t)=>s.call(e,t),y=Number.isInteger||function(e){return "number"==typeof e&&isFinite(e)&&Math.floor(e)===e},v=Array.isArray||function(e){return "[object Array]"===a.call(e)},h=e=>"[object Function]"===a.call(e),b=(e,t)=>c(e)&&p(e,"_vueTypes_name")&&(!t||e._vueTypes_name===t),g=e=>c(e)&&(p(e,"type")||["_vueTypes_name","validator","default","required"].some(t=>p(e,t)));function O(e,t){return Object.defineProperty(e.bind(t),"__original",{value:e})}function m(e,t,n=!1){let r,i=!0,o="";r=c(e)?e:{type:e};const a=b(r)?r._vueTypes_name+" - ":"";if(g(r)&&null!==r.type){if(void 0===r.type||!0===r.type)return i;if(!r.required&&null==t)return i;v(r.type)?(i=r.type.some(e=>!0===m(e,t,!0)),o=r.type.map(e=>l(e)).join(" or ")):(o=l(r),i="Array"===o?v(t):"Object"===o?c(t):"String"===o||"Number"===o||"Boolean"===o||"Function"===o?function(e){if(null==e)return "";const t=e.constructor.toString().match(u);return t?t[1].replace(/^Async/,""):""}(t)===o:t instanceof r.type);}if(!i){const e=`${a}value "${t}" should be of type "${o}"`;return !1===n?(d(e),!1):e}if(p(r,"validator")&&h(r.validator)){const e=d,o=[];if(d=e=>{o.push(e);},i=r.validator(t),d=e,!i){const e=(o.length>1?"* ":"")+o.join("\n* ");return o.length=0,!1===n?(d(e),i):e}}return i}function j(e,t){const n=Object.defineProperties(t,{_vueTypes_name:{value:e,writable:!0},isRequired:{get(){return this.required=!0,this}},def:{value(e){return void 0===e?this.type===Boolean||Array.isArray(this.type)&&this.type.includes(Boolean)?void(this.default=void 0):(p(this,"default")&&delete this.default,this):h(e)||!0===m(this,e,!0)?(this.default=v(e)?()=>[...e]:c(e)?()=>Object.assign({},e):e,this):(d(`${this._vueTypes_name} - invalid default value: "${e}"`),this)}}}),{validator:r}=n;return h(r)&&(n.validator=O(r,n)),n}function _(e,t){const n=j(e,t);return Object.defineProperty(n,"validate",{value(e){return h(this.validator)&&d(`${this._vueTypes_name} - calling .validate() will overwrite the current custom validator function. Validator info:\n${JSON.stringify(this)}`),this.validator=O(e,this),this}})}function T(e,t,r){const o=function(e){const t={};return Object.getOwnPropertyNames(e).forEach(n=>{t[n]=Object.getOwnPropertyDescriptor(e,n);}),Object.defineProperties({},t)}(t);if(o._vueTypes_name=e,!c(r))return o;const{validator:a}=r,s=n(r,i);if(h(a)){let{validator:e}=o;e&&(e=null!==(l=(u=e).__original)&&void 0!==l?l:u),o.validator=O(e?function(t){return e.call(this,t)&&a.call(this,t)}:a,o);}var u,l;return Object.assign(o,s)}function $(e){return e.replace(/^(?!\s*$)/gm,"  ")}const w=()=>_("any",{}),x=()=>_("function",{type:Function}),P=()=>_("boolean",{type:Boolean}),A=()=>_("string",{type:String}),E=()=>_("number",{type:Number}),S=()=>_("array",{type:Array}),N=()=>_("object",{type:Object}),V=()=>j("integer",{type:Number,validator(e){const t=y(e);return !1===t&&d(`integer - "${e}" is not an integer`),t}}),q=()=>j("symbol",{validator(e){const t="symbol"==typeof e;return !1===t&&d(`symbol - invalid value "${e}"`),t}}),k=()=>Object.defineProperty({type:null,validator(e){const t=null===e;return !1===t&&d("nullable - value should be null"),t}},"_vueTypes_name",{value:"nullable"});function D(e,t="custom validation failed"){if("function"!=typeof e)throw new TypeError("[VueTypes error]: You must provide a function as argument");return j(e.name||"<<anonymous function>>",{type:null,validator(n){const r=e(n);return r||d(`${this._vueTypes_name} - ${t}`),r}})}function L(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument.");const t=`oneOf - value should be one of "${e.map(e=>"symbol"==typeof e?e.toString():e).join('", "')}".`,n={validator(n){const r=-1!==e.indexOf(n);return r||d(t),r}};if(-1===e.indexOf(null)){const t=e.reduce((e,t)=>{if(null!=t){const n=t.constructor;-1===e.indexOf(n)&&e.push(n);}return e},[]);t.length>0&&(n.type=t);}return j("oneOf",n)}function B(e){if(!v(e))throw new TypeError("[VueTypes error]: You must provide an array as argument");let t=!1,n=!1,r=[];for(let i=0;i<e.length;i+=1){const o=e[i];if(g(o)){if(h(o.validator)&&(t=!0),b(o,"oneOf")&&o.type){r=r.concat(o.type);continue}if(b(o,"nullable")){n=!0;continue}if(!0===o.type||!o.type){d('oneOfType - invalid usage of "true" and "null" as types.');continue}r=r.concat(o.type);}else r.push(o);}r=r.filter((e,t)=>r.indexOf(e)===t);const i=!1===n&&r.length>0?r:null;return j("oneOfType",t?{type:i,validator(t){const n=[],r=e.some(e=>{const r=m(e,t,!0);return "string"==typeof r&&n.push(r),!0===r});return r||d(`oneOfType - provided value does not match any of the ${n.length} passed-in validators:\n${$(n.join("\n"))}`),r}}:{type:i})}function F(e){return j("arrayOf",{type:Array,validator(t){let n="";const r=t.every(t=>(n=m(e,t,!0),!0===n));return r||d(`arrayOf - value validation error:\n${$(n)}`),r}})}function Y(e){return j("instanceOf",{type:e})}function I(e){return j("objectOf",{type:Object,validator(t){let n="";const r=Object.keys(t).every(r=>(n=m(e,t[r],!0),!0===n));return r||d(`objectOf - value validation error:\n${$(n)}`),r}})}function J(e){const t=Object.keys(e),n=t.filter(t=>{var n;return !(null===(n=e[t])||void 0===n||!n.required)}),r=j("shape",{type:Object,validator(r){if(!c(r))return !1;const i=Object.keys(r);if(n.length>0&&n.some(e=>-1===i.indexOf(e))){const e=n.filter(e=>-1===i.indexOf(e));return d(1===e.length?`shape - required property "${e[0]}" is not defined.`:`shape - required properties "${e.join('", "')}" are not defined.`),!1}return i.every(n=>{if(-1===t.indexOf(n))return !0===this._vueTypes_isLoose||(d(`shape - shape definition does not include a "${n}" property. Allowed keys: "${t.join('", "')}".`),!1);const i=m(e[n],r[n],!0);return "string"==typeof i&&d(`shape - "${n}" property validation error:\n ${$(i)}`),!0===i})}});return Object.defineProperty(r,"_vueTypes_isLoose",{writable:!0,value:!1}),Object.defineProperty(r,"loose",{get(){return this._vueTypes_isLoose=!0,this}}),r}const M=["name","validate","getter"],R=/*#__PURE__*/(()=>{var e;return (e=class{static get any(){return w()}static get func(){return x().def(this.defaults.func)}static get bool(){return void 0===this.defaults.bool?P():P().def(this.defaults.bool)}static get string(){return A().def(this.defaults.string)}static get number(){return E().def(this.defaults.number)}static get array(){return S().def(this.defaults.array)}static get object(){return N().def(this.defaults.object)}static get integer(){return V().def(this.defaults.integer)}static get symbol(){return q()}static get nullable(){return k()}static extend(e){if(d("VueTypes.extend is deprecated. Use the ES6+ method instead. See https://dwightjack.github.io/vue-types/advanced/extending-vue-types.html#extending-namespaced-validators-in-es6 for details."),v(e))return e.forEach(e=>this.extend(e)),this;const{name:t,validate:r=!1,getter:i=!1}=e,o=n(e,M);if(p(this,t))throw new TypeError(`[VueTypes error]: Type "${t}" already defined`);const{type:a}=o;if(b(a))return delete o.type,Object.defineProperty(this,t,i?{get:()=>T(t,a,o)}:{value(...e){const n=T(t,a,o);return n.validator&&(n.validator=n.validator.bind(n,...e)),n}});let s;return s=i?{get(){const e=Object.assign({},o);return r?_(t,e):j(t,e)},enumerable:!0}:{value(...e){const n=Object.assign({},o);let i;return i=r?_(t,n):j(t,n),n.validator&&(i.validator=n.validator.bind(i,...e)),i},enumerable:!0},Object.defineProperty(this,t,s)}}).defaults={},e.sensibleDefaults=void 0,e.config=r,e.custom=D,e.oneOf=L,e.instanceOf=Y,e.oneOfType=B,e.arrayOf=F,e.objectOf=I,e.shape=J,e.utils={validate:(e,t)=>!0===m(t,e,!0),toType:(e,t,n=!1)=>n?_(e,t):j(e,t)},e})();function U(e={func:()=>{},bool:!0,string:"",number:0,array:()=>[],object:()=>({}),integer:0}){var n;return (n=class extends R{static get sensibleDefaults(){return t({},this.defaults)}static set sensibleDefaults(n){this.defaults=!1!==n?t({},!0!==n?n:e):{};}}).defaults=t({},e),n}class z extends(U()){}
 
 const CWidgetStatsB = defineComponent({
     name: 'CWidgetStatsB',
@@ -16409,54 +16603,6 @@ var Directives = /*#__PURE__*/Object.freeze({
     vctooltip: vCTooltip
 });
 
-const getStoredTheme = (localStorageItemName) => typeof window !== 'undefined' && localStorage.getItem(localStorageItemName);
-const setStoredTheme = (localStorageItemName, colorMode) => localStorage.setItem(localStorageItemName, colorMode);
-const getPreferredColorScheme = (localStorageItemName) => {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    const storedTheme = getStoredTheme(localStorageItemName);
-    if (storedTheme) {
-        return storedTheme;
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-};
-const setTheme = (colorMode) => {
-    document.documentElement.dataset.coreuiTheme =
-        colorMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : colorMode;
-    const event = new Event('ColorSchemeChange');
-    document.documentElement.dispatchEvent(event);
-};
-const useColorModes = (localStorageItemName = 'coreui-vue-color-scheme') => {
-    const colorMode = ref(getPreferredColorScheme(localStorageItemName));
-    watch(colorMode, () => {
-        if (colorMode.value) {
-            setStoredTheme(localStorageItemName, colorMode.value);
-            setTheme(colorMode.value);
-        }
-    });
-    onBeforeMount(() => {
-        if (typeof getStoredTheme(localStorageItemName) === 'string' && colorMode.value) {
-            setTheme(colorMode.value);
-        }
-        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-            const storedTheme = getStoredTheme(localStorageItemName);
-            if (storedTheme !== 'light' && storedTheme !== 'dark' && colorMode.value) {
-                setTheme(colorMode.value);
-            }
-        });
-    });
-    return {
-        getColorMode: () => colorMode.value,
-        isColorModeSet: () => Boolean(getStoredTheme(localStorageItemName)),
-        setColorMode: (mode) => {
-            colorMode.value = mode;
-        },
-    };
-};
-
 const CoreuiVue = {
     install: (app) => {
         for (const key in Components) {
@@ -16468,5 +16614,5 @@ const CoreuiVue = {
     },
 };
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CVirtualScroller, CVirtualScrollerPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, useColorModes, vCPlaceholder as vcplaceholder, vCPopover as vcpopover, vCTooltip as vctooltip };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAccordionPlugin, CAlert, CAlertHeading, CAlertLink, CAlertPlugin, CAvatar, CAvatarPlugin, CBackdrop, CBackdropPlugin, CBadge, CBadgePlugin, CBreadcrumb, CBreadcrumbItem, CBreadcrumbPlugin, CButton, CButtonGroup, CButtonGroupPlugin, CButtonPlugin, CButtonToolbar, CCLinkPlugin, CCalendar, CCalendarPlugin, CCallout, CCalloutPlugin, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardPlugin, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCarouselPlugin, CCloseButton, CCloseButtonPlugin, CCol, CCollapse, CCollapsePlugin, CContainer, CDatePicker, CDatePickerPlugin, CDateRangePicker, CDateRangePickerPlugin, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownPlugin, CDropdownToggle, CElementCover, CElementCoverPlugin, CFooter, CFooterPlugin, CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormPlugin, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CGridPlugin, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderPlugin, CHeaderText, CHeaderToggler, CImage, CImagePlugin, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CListGroupPlugin, CLoadingButton, CLoadingButtonPlugin, CModal, CModalBody, CModalFooter, CModalHeader, CModalPlugin, CModalTitle, CMultiSelect, CMultiSelectPlugin, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavPlugin, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarPlugin, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasPlugin, COffcanvasTitle, CPagination, CPaginationItem, CPaginationPlugin, CPicker, CPickerPlugin, CPlaceholder, CPlaceholderPlugin, CPopover, CPopoverPlugin, CProgress, CProgressBar, CProgressPlugin, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarPlugin, CSidebarToggler, CSmartPagination, CSmartPaginationPlugin, CSmartTable, CSmartTablePlugin, CSpinner, CSpinnerPlugin, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTablePlugin, CTableRow, CTabsPlugin, CTimePicker, CTimePickerPlugin, CToast, CToastBody, CToastClose, CToastHeader, CToastPlugin, CToaster, CTooltip, CTooltipPlugin, CVirtualScroller, CVirtualScrollerPlugin, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, CWidgetsStatsPlugin, CoreuiVue as default, useColorModes, usePopper, vCPlaceholder as vcplaceholder, vCPopover as vcpopover, vCTooltip as vctooltip };
 //# sourceMappingURL=index.es.js.map