@coreui/vue-pro 4.9.0-beta.2 → 4.9.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,30 @@ const CCardPlugin = {
     },
 };
 
+const isRTL = (element) => {
+    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
+        return true;
+    }
+    if (element) {
+        return element.closest('[dir="rtl"]') !== null;
+    }
+    return false;
+};
+
+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);
@@ -1853,16 +1877,6 @@ const isObjectInArray = (array, item, ignore = []) => array.some((_item) => {
     return result;
 });
 
-const isRTL = (element) => {
-    if (typeof document !== 'undefined' && document.documentElement.dir === 'rtl') {
-        return true;
-    }
-    if (element) {
-        return element.closest('[dir="rtl"]') !== null;
-    }
-    return false;
-};
-
 const CCarousel = defineComponent({
     name: 'CCarousel',
     props: {
@@ -6485,6 +6499,8 @@ const CPicker = defineComponent({
             default: {
                 return () => h$1('div', {
                     class: [
+                        'dropdown',
+                        'picker',
                         attrs.class,
                         {
                             show: visible.value,
@@ -6506,7 +6522,16 @@ const CPicker = defineComponent({
                                 togglerRef.value = el;
                             },
                         })),
-                    h$1('div', { class: props.dropdownClassNames, ref: dropdownRef }, [
+                    h$1('div', {
+                        class: [
+                            'dropdown-menu',
+                            {
+                                show: visible.value,
+                            },
+                            props.dropdownClassNames,
+                        ],
+                        ref: dropdownRef,
+                    }, [
                         slots.default && slots.default(),
                         /**
                          * @slot Location for the footer element.
@@ -7006,10 +7031,18 @@ const CTimePicker = defineComponent({
             emit('change', _date.toTimeString(), _date.toLocaleTimeString(props.locale), _date);
             emit('update:time', _date.toLocaleTimeString(props.locale));
         };
-        const InputGroup = () => h$1('div', { class: 'time-picker-input-group' }, [
+        const InputGroup = () => h$1('div', {
+            class: [
+                'input-group',
+                'picker-input-group',
+                {
+                    [`input-group-${props.size}`]: props.size,
+                },
+            ],
+        }, [
             h$1('input', {
                 autocomplete: 'off',
-                class: 'time-picker-input',
+                class: 'form-control',
                 disabled: props.disabled,
                 onInput: (event) => {
                     if (isValidTime(event.target.value)) {
@@ -7027,18 +7060,28 @@ const CTimePicker = defineComponent({
                     })
                     : '',
             }),
-            props.indicator && h$1('div', { class: 'time-picker-indicator' }),
-            props.cleaner &&
-                date.value &&
-                h$1('div', {
-                    class: 'time-picker-cleaner',
-                    onClick: (event) => handleClear(event),
-                }),
+            (props.indicator || props.cleaner) &&
+                h$1('div', { class: 'input-group-text' }, [
+                    props.indicator &&
+                        h$1('span', {
+                            class: 'picker-input-group-indicator',
+                        }, slots.indicator
+                            ? slots.indicator()
+                            : h$1('span', { class: 'picker-input-group-icon time-picker-input-icon' })),
+                    props.cleaner &&
+                        h$1('span', {
+                            class: 'picker-input-group-cleaner',
+                            onClick: (event) => handleClear(event),
+                            role: 'button',
+                        }, slots.cleaner
+                            ? slots.cleaner()
+                            : h$1('span', { class: 'picker-input-group-icon time-picker-cleaner-icon' })),
+                ]),
         ]);
         const TimePickerSelect = () => [
             h$1('span', { class: 'time-picker-inline-icon' }),
             h$1('select', {
-                class: 'time-picker-inline-select',
+                class: 'form-select',
                 disabled: props.disabled,
                 onChange: (event) => handleTimeChange('hours', event.target.value),
                 ...(date.value && { value: getSelectedHour(date.value, props.locale) }),
@@ -7048,7 +7091,7 @@ const CTimePicker = defineComponent({
                 }, option.label))),
             ':',
             h$1('select', {
-                class: 'time-picker-inline-select',
+                class: 'form-select',
                 disabled: props.disabled,
                 onChange: (event) => handleTimeChange('minutes', event.target.value),
                 ...(date.value && { value: getSelectedMinutes(date.value) }),
@@ -7059,7 +7102,7 @@ const CTimePicker = defineComponent({
             props.seconds && ':',
             props.seconds &&
                 h$1('select', {
-                    class: 'time-picker-inline-select',
+                    class: 'form-select',
                     disabled: props.disabled,
                     onChange: (event) => handleTimeChange('seconds', event.target.value),
                     ...(date.value && { value: getSelectedSeconds(date.value) }),
@@ -7070,7 +7113,7 @@ const CTimePicker = defineComponent({
             localizedTimePartials.value &&
                 localizedTimePartials.value.hour12 &&
                 h$1('select', {
-                    class: 'time-picker-inline-select',
+                    class: 'form-select',
                     disabled: props.disabled,
                     onChange: (event) => handleTimeChange('toggle', event.target.value),
                     value: ampm.value,
@@ -7127,7 +7170,6 @@ const CTimePicker = defineComponent({
                 class: [
                     'time-picker',
                     {
-                        [`time-picker-${props.size}`]: props.size,
                         disabled: props.disabled,
                         'is-invalid': isValid.value === false ? true : false,
                         'is-valid': isValid.value,
@@ -7165,7 +7207,7 @@ const CTimePicker = defineComponent({
                         },
                     ],
                 }, props.variant === 'select' ? TimePickerSelect() : TimePickerRoll()),
-                footer: () => h$1('div', { class: 'time-picker-footer' }, [
+                footer: () => h$1('div', { class: 'picker-footer' }, [
                     props.cancelButton &&
                         h$1(CButton, {
                             color: props.cancelButtonColor,
@@ -7704,14 +7746,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, () => {
@@ -7816,12 +7860,18 @@ const CDateRangePicker = defineComponent({
             emit('update:end-date', null);
         };
         const InputGroup = () => h$1('div', {
-            class: 'date-picker-input-group',
+            class: [
+                'input-group',
+                'picker-input-group',
+                {
+                    [`input-group-${props.size}`]: props.size,
+                },
+            ],
         }, [
             h$1('input', {
                 autocomplete: 'off',
                 class: [
-                    'date-picker-input',
+                    'form-control date-picker-input',
                     {
                         hover: inputStartHoverValue.value,
                     },
@@ -7848,12 +7898,16 @@ const CDateRangePicker = defineComponent({
                     ? setInputValue(inputStartHoverValue.value)
                     : setInputValue(startDate.value),
             }),
-            props.range && props.separator !== false && h$1('div', { class: 'date-picker-separator' }),
+            props.range &&
+                props.separator !== false &&
+                h$1('span', { class: 'input-group-text' }, slots.separator
+                    ? slots.separator()
+                    : h$1('span', { class: 'picker-input-group-icon date-picker-arrow-icon' })),
             props.range &&
                 h$1('input', {
                     autocomplete: 'off',
                     class: [
-                        'date-picker-input',
+                        'form-control date-picker-input',
                         {
                             hover: inputEndHoverValue.value,
                         },
@@ -7878,13 +7932,23 @@ const CDateRangePicker = defineComponent({
                         ? setInputValue(inputEndHoverValue.value)
                         : setInputValue(endDate.value),
                 }),
-            props.indicator && h$1('div', { class: 'date-picker-indicator' }),
-            props.cleaner &&
-                (startDate.value || endDate.value) &&
-                h$1('div', {
-                    class: 'date-picker-cleaner',
-                    onClick: (event) => handleClear(event),
-                }),
+            (props.indicator || props.cleaner) &&
+                h$1('span', { class: 'input-group-text' }, [
+                    props.indicator &&
+                        h$1('span', {
+                            class: 'picker-input-group-indicator',
+                        }, slots.indicator
+                            ? slots.indicator()
+                            : h$1('span', { class: 'picker-input-group-icon date-picker-input-icon' })),
+                    props.cleaner &&
+                        h$1('span', {
+                            class: 'picker-input-group-cleaner',
+                            onClick: (event) => handleClear(event),
+                            role: 'button',
+                        }, slots.cleaner
+                            ? slots.cleaner()
+                            : h$1('span', { class: 'picker-input-group-icon date-picker-cleaner-icon' })),
+                ]),
         ]);
         return () => h$1(CFormControlWrapper, {
             describedby: attrs['aria-describedby'],
@@ -7902,7 +7966,6 @@ const CDateRangePicker = defineComponent({
                 class: [
                     'date-picker',
                     {
-                        [`date-picker-${props.size}`]: props.size,
                         disabled: props.disabled,
                         'is-invalid': isValid.value === false ? true : false,
                         'is-valid': isValid.value,
@@ -7929,7 +7992,7 @@ const CDateRangePicker = defineComponent({
                 visible: visible.value,
             }, {
                 toggler: () => InputGroup(),
-                footer: () => h$1('div', { class: 'date-picker-footer' }, [
+                footer: () => h$1('div', { class: 'picker-footer' }, [
                     props.todayButton &&
                         h$1(CButton, {
                             class: 'me-auto',
@@ -8377,6 +8440,43 @@ const CDatePickerPlugin = {
     },
 };
 
+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 +8548,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 +8610,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 +8649,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 +8687,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 +8780,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 +8797,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 +8893,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 +8908,7 @@ const CDropdownToggle = defineComponent({
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu();
+                    setVisible();
                 },
             }),
             ...((props.trigger === 'focus' || props.trigger.includes('focus')) && {
@@ -8843,13 +8916,13 @@ const CDropdownToggle = defineComponent({
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu(true);
+                    setVisible(true);
                 },
                 onblur: () => {
                     if (props.disabled) {
                         return;
                     }
-                    toggleMenu(false);
+                    setVisible(false);
                 },
             }),
         };
@@ -11219,12 +11292,7 @@ const CMultiSelectSelection = defineComponent({
             emit('remove', option);
         };
         return () => h$1('div', {
-            class: [
-                'form-multi-select-selection',
-                {
-                    'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
-                },
-            ],
+            class: 'form-multi-select-selection',
         }, [
             props.multiple &&
                 props.selectionType === 'counter' &&
@@ -11244,10 +11312,10 @@ const CMultiSelectSelection = defineComponent({
                             option.text,
                             !option.disabled &&
                                 h$1('button', {
-                                    class: 'form-multi-select-tag-delete',
+                                    class: 'form-multi-select-tag-delete close',
                                     ariaLabel: 'Close',
                                     onClick: () => handleRemove(option),
-                                }),
+                                }, h$1('span', { ariaHidden: 'true' }, 'x')),
                         ]);
                     }
                     return;
@@ -11267,7 +11335,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 +11350,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 +11394,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,
         /**
@@ -11712,13 +11780,17 @@ const CMultiSelect = defineComponent({
             }, {
                 default: () => h$1('div', {
                     class: [
+                        'dropdown',
+                        'picker',
                         'form-multi-select',
                         {
+                            'form-multi-select-with-cleaner': props.cleaner,
                             disabled: props.disabled,
                             [`form-multi-select-${props.size}`]: props.size,
+                            'form-multi-select-selection-tags': props.multiple && props.selectionType === 'tags',
+                            show: visible.value,
                             'is-invalid': props.invalid,
                             'is-valid': props.valid,
-                            show: visible.value,
                         },
                     ],
                     'aria-expanded': visible.value,
@@ -11742,56 +11814,51 @@ const CMultiSelect = defineComponent({
                                     selected: selected.value,
                                     selectionType: props.selectionType,
                                     selectionTypeCounterText: props.selectionTypeCounterText,
-                                }, {
-                                    default: () => props.search &&
-                                        h$1('input', {
-                                            type: 'text',
-                                            class: 'form-multi-select-search',
-                                            disabled: props.disabled,
-                                            autocomplete: 'off',
-                                            onInput: (event) => handleSearchChange(event),
-                                            onKeydown: (event) => handleSearchKeyDown(event),
-                                            ...(selected.value.length === 0 && {
-                                                placeholder: props.placeholder,
-                                            }),
-                                            ...(selected.value.length > 0 &&
-                                                props.selectionType === 'counter' && {
-                                                placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
-                                            }),
-                                            ...(selected.value.length > 0 &&
-                                                !props.multiple && {
-                                                placeholder: selected.value.map((option) => option.text)[0],
-                                            }),
-                                            ...(props.multiple &&
-                                                selected.value.length > 0 &&
-                                                props.selectionType !== 'counter' && {
-                                                size: searchValue.value.length + 2,
-                                            }),
-                                            ref: searchRef,
-                                        }),
                                 }),
-                                h$1('div', { class: 'form-multi-select-buttons' }, {
-                                    default: () => [
-                                        h$1('button', {
-                                            class: 'form-multi-select-cleaner',
-                                            onClick: () => handleDeselectAll(),
-                                            type: 'button',
+                                props.multiple &&
+                                    props.cleaner &&
+                                    selected.value.length > 0 &&
+                                    !props.disabled &&
+                                    h$1('button', {
+                                        type: 'button',
+                                        class: 'form-multi-select-selection-cleaner',
+                                        onClick: () => handleDeselectAll(),
+                                    }),
+                                props.search &&
+                                    h$1('input', {
+                                        type: 'text',
+                                        class: 'form-multi-select-search',
+                                        disabled: props.disabled,
+                                        autocomplete: 'off',
+                                        onInput: (event) => handleSearchChange(event),
+                                        onKeydown: (event) => handleSearchKeyDown(event),
+                                        ...(selected.value.length === 0 && {
+                                            placeholder: props.placeholder,
                                         }),
-                                        h$1('button', {
-                                            class: 'form-multi-select-indicator',
-                                            onClick: (event) => {
-                                                event.preventDefault();
-                                                event.stopPropagation();
-                                                visible.value = !visible.value;
-                                            },
-                                            type: 'button',
+                                        ...(selected.value.length > 0 &&
+                                            props.selectionType === 'counter' && {
+                                            placeholder: `${selected.value.length} ${props.selectionTypeCounterText}`,
                                         }),
-                                    ],
-                                }),
+                                        ...(selected.value.length > 0 &&
+                                            !props.multiple && {
+                                            placeholder: selected.value.map((option) => option.text)[0],
+                                        }),
+                                        ...(props.multiple &&
+                                            selected.value.length > 0 &&
+                                            props.selectionType !== 'counter' && {
+                                            size: searchValue.value.length + 2,
+                                        }),
+                                        ref: searchRef,
+                                    }),
                             ],
                         }),
                         h$1('div', {
-                            class: 'form-multi-select-dropdown',
+                            class: [
+                                'dropdown-menu',
+                                {
+                                    show: visible.value,
+                                },
+                            ],
                             role: 'menu',
                             ref: dropdownRef,
                         }, {
@@ -12716,26 +12783,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 +12883,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 +12923,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 +12943,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 +12967,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 +15531,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 +15598,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 +15627,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 +15667,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 +15687,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 +15707,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),
                     },
                 }),
         ];
@@ -16409,54 +16556,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 +16567,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, usePopper, vCPlaceholder as vcplaceholder, vCPopover as vcpopover, vCTooltip as vctooltip };
 //# sourceMappingURL=index.es.js.map