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

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, reactive, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
+import { defineComponent, ref, provide, h as h$1, Transition, withDirectives, inject, watch, onBeforeMount, onMounted, onUpdated, toRefs, onUnmounted, cloneVNode, nextTick, vShow, computed, Teleport, onBeforeUnmount } from 'vue';
 
 const CAccordion = defineComponent({
     name: 'CAccordion',
@@ -6,11 +6,7 @@ const CAccordion = defineComponent({
         /**
          * The active item key.
          */
-        activeItemKey: {
-            type: [Number, String],
-            default: undefined,
-            require: false,
-        },
+        activeItemKey: [Number, String],
         /**
          * Make accordion items stay open when another item is opened
          */
@@ -116,17 +112,11 @@ const CCollapse = defineComponent({
         /**
          * Set horizontal collapsing to transition the width instead of height.
          */
-        horizontal: {
-            type: Boolean,
-            required: false,
-        },
+        horizontal: Boolean,
         /**
          * Toggle the visibility of component.
          */
-        visible: {
-            type: Boolean,
-            required: false,
-        },
+        visible: Boolean,
     },
     emits: [
         /**
@@ -241,16 +231,11 @@ const CAccordionItem = defineComponent({
         /**
          * The item key.
          */
-        itemKey: {
-            type: [Number, String],
-            default: undefined,
-            require: false,
-        },
+        itemKey: [Number, String]
     },
     setup(props, { slots }) {
         const activeItemKey = inject('activeItemKey');
         const alwaysOpen = inject('alwaysOpen');
-        // eslint-disable-next-line no-unused-vars
         const setActiveItemKey = inject('setActiveItemKey');
         const itemKey = ref(props.itemKey ? props.itemKey : Math.random().toString(36).substr(2, 9));
         const visible = ref(Boolean(activeItemKey.value === itemKey.value));
@@ -275,6 +260,54 @@ const CAccordionPlugin = {
     },
 };
 
+const CCloseButton = defineComponent({
+    name: 'CCloseButton',
+    props: {
+        /**
+         * Toggle the disabled state for the component.
+         */
+        disabled: Boolean,
+        /**
+         * Change the default color to white.
+         */
+        white: Boolean,
+    },
+    emits: [
+        /**
+         * Event called when the user clicks on the component.
+         */
+        'click',
+    ],
+    setup(props, { emit }) {
+        const handleClick = () => {
+            if (props.disabled) {
+                return;
+            }
+            emit('click');
+        };
+        return () => h$1('button', {
+            type: 'button',
+            class: [
+                'btn',
+                'btn-close',
+                {
+                    ['btn-close-white']: props.white,
+                },
+                props.disabled,
+            ],
+            'aria-label': 'Close',
+            disabled: props.disabled,
+            onClick: handleClick,
+        });
+    },
+});
+
+const CCloseButtonPlugin = {
+    install: (app) => {
+        app.component(CCloseButton.name, CCloseButton);
+    },
+};
+
 const Shape = {
     type: String,
     validator: (value) => {
@@ -294,7 +327,7 @@ const Shape = {
         ].includes(value);
     },
 };
-const Color = {
+const Color$1 = {
     type: String,
     validator: (value) => {
         // The value must match one of these strings
@@ -344,54 +377,6 @@ const TextColor = {
     },
 };
 
-const CCloseButton = defineComponent({
-    name: 'CCloseButton',
-    props: {
-        /**
-         * Toggle the disabled state for the component.
-         */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
-        /**
-         * Change the default color to white.
-         */
-        white: {
-            type: Boolean,
-            required: false,
-        },
-    },
-    emits: [
-        /**
-         * Event called when the user clicks on the component.
-         */
-        'click',
-    ],
-    setup(props, { emit }) {
-        const handleClick = () => {
-            if (props.disabled) {
-                return;
-            }
-            emit('click');
-        };
-        return () => h$1('button', {
-            type: 'button',
-            class: [
-                'btn',
-                'btn-close',
-                {
-                    ['btn-close-white']: props.white,
-                },
-                props.disabled,
-            ],
-            'aria-label': 'Close',
-            disabled: props.disabled,
-            onClick: handleClick,
-        });
-    },
-});
-
 const CAlert = defineComponent({
     name: 'CAlert',
     props: {
@@ -400,15 +385,11 @@ const CAlert = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Optionally add a close button to alert and allow it to self dismisss.
          */
-        dismissible: {
-            type: Boolean,
-            default: false,
-            required: false,
-        },
+        dismissible: Boolean,
         /**
          * Set the alert variant to a solid.
          *
@@ -416,8 +397,6 @@ const CAlert = defineComponent({
          */
         variant: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return value === 'solid';
             },
@@ -428,7 +407,6 @@ const CAlert = defineComponent({
         visible: {
             type: Boolean,
             default: true,
-            required: false,
         },
     },
     emits: [
@@ -447,8 +425,6 @@ const CAlert = defineComponent({
             emit('close');
         };
         return () => h$1(Transition, {
-            name: 'fade',
-            duration: 350,
             enterFromClass: '',
             enterActiveClass: 'fade',
             enterToClass: 'fade show',
@@ -488,7 +464,6 @@ const CAlertHeading = defineComponent({
         component: {
             type: String,
             default: 'h4',
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -523,7 +498,7 @@ const CAvatar = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Select the shape of the component.
          *
@@ -537,8 +512,6 @@ const CAvatar = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'md', 'lg', 'xl'].includes(value);
             },
@@ -546,11 +519,7 @@ const CAvatar = defineComponent({
         /**
          * The src attribute for the img element.
          */
-        src: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        src: String,
         /**
          * Sets the color context of the status indicator to one of CoreUI’s themed colors.
          *
@@ -558,8 +527,6 @@ const CAvatar = defineComponent({
          */
         status: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return [
                     'primary',
@@ -615,32 +582,16 @@ const CBackdrop = defineComponent({
         visible: {
             type: Boolean,
             default: false,
-            required: false,
         },
     },
     setup(props) {
-        const handleBeforeEnter = (el) => {
-            el.classList.remove('d-none');
-        };
-        const handleEnter = (el, done) => {
-            executeAfterTransition(() => done(), el);
-            setTimeout(() => {
-                el.style.visibility = 'visible';
-                el.classList.add('show');
-            }, 1);
-        };
-        const handleLeave = (el, done) => {
-            executeAfterTransition(() => done(), el);
-            el.classList.remove('show');
-        };
-        const handleAfterLeave = (el) => {
-            el.classList.add('d-none');
-        };
         return () => h$1(Transition, {
-            onBeforeEnter: (el) => handleBeforeEnter(el),
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-            onAfterLeave: (el) => handleAfterLeave(el),
+            onEnter: (el) => {
+                el.classList.add('show');
+            },
+            onLeave: (el) => {
+                el.classList.remove('show');
+            }
         }, () => props.visible &&
             h$1('div', {
                 class: 'fade',
@@ -662,13 +613,12 @@ const CBadge = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
-            required: false,
             default: 'span',
         },
         /**
@@ -678,8 +628,6 @@ const CBadge = defineComponent({
          */
         position: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['top-start', 'top-end', 'bottom-end', 'bottom-start'].includes(value);
             },
@@ -697,8 +645,6 @@ const CBadge = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return value === 'sm';
             },
@@ -742,18 +688,11 @@ const CBreadcrumbItem = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * The `href` attribute for the inner link component.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     setup(props, { slots }) {
         return () => h$1('li', {
@@ -792,40 +731,28 @@ const CButton = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            default: false,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
             default: 'button',
-            required: false,
         },
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * The href attribute specifies the URL of the page the link goes to.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
         /**
          * Select the shape of the component.
          *
@@ -839,8 +766,6 @@ const CButton = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -854,7 +779,6 @@ const CButton = defineComponent({
         type: {
             type: String,
             default: 'button',
-            required: false,
             validator: (value) => {
                 return ['button', 'submit', 'reset'].includes(value);
             },
@@ -866,8 +790,6 @@ const CButton = defineComponent({
          */
         variant: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['ghost', 'outline'].includes(value);
             },
@@ -929,8 +851,6 @@ const CButtonGroup = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -938,10 +858,7 @@ const CButtonGroup = defineComponent({
         /**
          * Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here.
          */
-        vertical: {
-            type: Boolean,
-            required: false,
-        },
+        vertical: Boolean,
     },
     setup(props, { slots }) {
         return () => h$1('div', {
@@ -1633,7 +1550,7 @@ const CCallout = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('div', {
@@ -1661,7 +1578,7 @@ const CCard = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Sets the text color context of the component to one of CoreUI’s themed colors.
          *
@@ -1711,7 +1628,6 @@ const CCardHeader = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'div',
         },
     },
@@ -1728,7 +1644,6 @@ const CCardImage = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'img',
         },
         /**
@@ -1738,8 +1653,6 @@ const CCardImage = defineComponent({
          */
         orientation: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['top', 'bottom'].includes(value);
             },
@@ -1765,33 +1678,22 @@ const CLink = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
-            required: false,
             default: 'a',
         },
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * The href attribute specifies the URL of the page the link goes to.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     emits: [
         /**
@@ -1830,7 +1732,6 @@ const CCardLink = defineComponent({
         href: {
             type: String,
             default: '#',
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -1846,7 +1747,6 @@ const CCardSubtitle = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'h6',
         },
     },
@@ -1863,7 +1763,6 @@ const CCardText = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'p',
         },
     },
@@ -1880,7 +1779,6 @@ const CCardTitle = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'h5',
         },
     },
@@ -1930,7 +1828,6 @@ const CCarousel = defineComponent({
         index: {
             type: Number,
             default: 0,
-            required: false,
         },
         /**
          * Adding indicators at the bottom of the carousel for each item.
@@ -1942,7 +1839,6 @@ const CCarousel = defineComponent({
         interval: {
             type: [Boolean, Number],
             default: 5000,
-            required: false,
         },
         /**
          * If set to 'hover', pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.
@@ -1950,7 +1846,6 @@ const CCarousel = defineComponent({
         pause: {
             type: [Boolean, String],
             default: 'hover',
-            required: false,
             validator: (value) => {
                 return typeof value === 'boolean' || value === 'hover';
             },
@@ -1963,7 +1858,6 @@ const CCarousel = defineComponent({
         transition: {
             type: String,
             default: 'slide',
-            required: false,
             validator: (value) => {
                 return ['crossfade', 'slide'].includes(value);
             },
@@ -1974,15 +1868,17 @@ const CCarousel = defineComponent({
         wrap: {
             type: Boolean,
             default: true,
-            required: false,
         },
     },
     setup(props, { slots }) {
         const carouselRef = ref();
-        const timeout = ref();
+        const active = ref(props.index);
         const animating = ref(false);
-        const visible = ref();
         const customInterval = ref(props.interval);
+        const direction = ref('next');
+        const items = ref([]);
+        const timeout = ref();
+        const visible = ref();
         const setAnimating = (value) => {
             animating.value = value;
         };
@@ -1998,27 +1894,16 @@ const CCarousel = defineComponent({
                 timeout.value = setTimeout(() => nextItemWhenVisible(), typeof customInterval.value === 'number' ? customInterval.value : props.interval);
             }
         };
-        const state = reactive({
-            items: [],
-            active: props.index,
-            direction: 'next',
-        });
-        onBeforeMount(() => {
-            if (slots.default) {
-                // @ts-expect-error TODO: fix types
-                state.items = slots.default().filter((child) => child.type.name === 'CCarouselItem');
-            }
-        });
-        const handleControlClick = (direction) => {
+        const handleControlClick = (_direction) => {
             if (animating.value) {
                 return;
             }
-            state.direction = direction;
-            if (direction === 'next') {
-                state.active === state.items.length - 1 ? (state.active = 0) : state.active++;
+            direction.value = _direction;
+            if (_direction === 'next') {
+                active.value === items.value.length - 1 ? (active.value = 0) : active.value++;
             }
             else {
-                state.active === 0 ? (state.active = state.items.length - 1) : state.active--;
+                active.value === 0 ? (active.value = items.value.length - 1) : active.value--;
             }
         };
         const nextItemWhenVisible = () => {
@@ -2029,17 +1914,17 @@ const CCarousel = defineComponent({
             }
         };
         const handleIndicatorClick = (index) => {
-            if (state.active === index) {
+            if (active.value === index) {
                 return;
             }
-            if (state.active < index) {
-                state.direction = 'next';
-                state.active = index;
+            if (active.value < index) {
+                direction.value = 'next';
+                active.value = index;
                 return;
             }
-            if (state.active > index) {
-                state.direction = 'prev';
-                state.active = index;
+            if (active.value > index) {
+                direction.value = 'prev';
+                active.value = index;
             }
         };
         const handleScroll = () => {
@@ -2050,6 +1935,15 @@ const CCarousel = defineComponent({
                 visible.value = false;
             }
         };
+        onBeforeMount(() => {
+            if (slots.default) {
+                const children = typeof slots.default()[0].type === 'symbol' ? slots.default()[0].children : slots.default();
+                if (children && Array.isArray(children)) {
+                    // @ts-expect-error TODO: fix types
+                    items.value = children.filter((child) => child.type.name === 'CCarouselItem');
+                }
+            }
+        });
         onMounted(() => {
             window.addEventListener('scroll', handleScroll);
         });
@@ -2059,7 +1953,7 @@ const CCarousel = defineComponent({
                     !animating.value && cycle();
                     return;
                 }
-                if (!props.wrap && state.active < state.items.length - 1) {
+                if (!props.wrap && active.value < items.value.length - 1) {
                     !animating.value && cycle();
                 }
             });
@@ -2080,19 +1974,19 @@ const CCarousel = defineComponent({
             props.indicators &&
                 h$1('div', {
                     class: 'carousel-indicators',
-                }, state.items.map((_, index) => {
+                }, items.value.map((_, index) => {
                     return h$1('button', {
                         type: 'button',
                         id: index,
                         'data-coreui-target': '',
-                        ...(state.active === index && { class: 'active' }),
+                        ...(active.value === index && { class: 'active' }),
                         onClick: () => handleIndicatorClick(index),
                     });
                 })),
-            h$1('div', { class: 'carousel-inner' }, state.items.map((item, index) => {
+            h$1('div', { class: 'carousel-inner' }, items.value.map((item, index) => {
                 return h$1(item, {
-                    active: state.active === index ? true : false,
-                    direction: state.direction,
+                    active: active.value === index ? true : false,
+                    direction: direction.value,
                 });
             })),
             props.controls && [
@@ -2144,7 +2038,6 @@ const CCarouselItem = defineComponent({
         direction: {
             type: String,
             default: 'next',
-            required: false,
         },
         /**
          * The amount of time to delay between automatically cycling an item.
@@ -2152,7 +2045,6 @@ const CCarouselItem = defineComponent({
         interval: {
             type: [Boolean, Number],
             default: false,
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -2214,12 +2106,6 @@ const CCarouselPlugin = {
     },
 };
 
-const CCloseButtonPlugin = {
-    install: (app) => {
-        app.component(CCloseButton.name, CCloseButton);
-    },
-};
-
 const CCollapsePlugin = {
     install: (app) => {
         app.component(CCollapse.name, CCollapse);
@@ -4587,10 +4473,7 @@ const CForm = defineComponent({
         /**
          * Mark a form as validated. If you set it `true`, all validation styles will be applied to the forms component.
          */
-        validated: {
-            type: Boolean,
-            required: false,
-        },
+        validated: Boolean,
     },
     setup(props, { slots }) {
         return () => h$1('form', { class: [{ ['was-validated']: props.validated }] }, slots.default && slots.default());
@@ -4605,7 +4488,6 @@ const CFormFeedback = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'div',
         },
         /**
@@ -4640,33 +4522,25 @@ const CFormControlValidation = defineComponent({
         /**
          * @ignore
          */
-        describedby: {
-            type: String,
-        },
+        describedby: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedback: {
-            type: String,
-        },
+        feedback: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedbackInvalid: {
-            type: String,
-        },
+        feedbackInvalid: String,
         /**
          * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        feedbackValid: {
-            type: String,
-        },
+        feedbackValid: String,
         /**
          * Set component validation state to invalid.
          */
@@ -4719,11 +4593,7 @@ const CFormLabel = defineComponent({
         /**
          * A string of all className you want to be applied to the component, and override standard className value.
          */
-        customClassName: {
-            type: [Array, String],
-            default: undefined,
-            required: false,
-        },
+        customClassName: [Array, String],
     },
     setup(props, { slots }) {
         return () => h$1('label', {
@@ -4741,33 +4611,25 @@ const CFormCheck = defineComponent({
          *
          * @see http://coreui.io/vue/docs/components/button.html
          */
-        button: {
-            type: Object,
-        },
+        button: Object,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedback: {
-            type: String,
-        },
+        feedback: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedbackInvalid: {
-            type: String,
-        },
+        feedbackInvalid: String,
         /**
          * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        feedbackValid: {
-            type: String,
-        },
+        feedbackValid: String,
         /**
          * Sets hit area to the full area of the component.
          */
@@ -4781,9 +4643,7 @@ const CFormCheck = defineComponent({
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document.
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Input Checkbox indeterminate Property
          */
@@ -4791,9 +4651,7 @@ const CFormCheck = defineComponent({
         /**
          * Group checkboxes or radios on the same horizontal row by adding.
          */
-        inline: {
-            type: Boolean,
-        },
+        inline: Boolean,
         /**
          * Set component validation state to invalid.
          */
@@ -4801,9 +4659,7 @@ const CFormCheck = defineComponent({
         /**
          * The element represents a caption for a component.
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * The default name for a value passed using v-model.
          */
@@ -4811,6 +4667,12 @@ const CFormCheck = defineComponent({
             type: [Boolean, String],
             value: undefined,
         },
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -4829,9 +4691,7 @@ const CFormCheck = defineComponent({
         /**
          * Set component validation state to valid.
          */
-        valid: {
-            type: Boolean,
-        },
+        valid: Boolean,
     },
     emits: [
         /**
@@ -4853,6 +4713,7 @@ const CFormCheck = defineComponent({
             'form-check',
             {
                 'form-check-inline': props.inline,
+                'form-check-reverse': props.reverse,
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
             },
@@ -4934,7 +4795,6 @@ const CFormText = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'div',
         },
     },
@@ -4953,31 +4813,23 @@ const CFormControlWrapper = defineComponent({
          *
          * @since 4.3.0
          */
-        floatingLabel: {
-            type: String,
-        },
+        floatingLabel: String,
         /**
          * @ignore
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Add a caption for a component.
          *
          * @since 4.3.0
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * Add helper text to the component.
          *
          * @since 4.3.0
          */
-        text: {
-            type: String,
-        },
+        text: String,
     },
     setup(props, { slots }) {
         const formControlValidation = () => h$1(CFormControlValidation, {
@@ -5041,49 +4893,36 @@ const CFormInput = defineComponent({
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         // Inherited Props from CFormControlWrapper
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedback: {
-            type: String,
-        },
+        feedback: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedbackInvalid: {
-            type: String,
-        },
+        feedbackInvalid: String,
         /**
          * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        feedbackValid: {
-            type: String,
-        },
+        feedbackValid: String,
         /**
          * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        floatingLabel: {
-            type: String,
-        },
+        floatingLabel: String,
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document.
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Set component validation state to invalid.
          */
@@ -5093,30 +4932,19 @@ const CFormInput = defineComponent({
          *
          * @since 4.3.0
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * The default name for a value passed using v-model.
          */
-        modelValue: {
-            type: [File, Number, String],
-            default: undefined,
-        },
+        modelValue: [File, Number, String],
         /**
          * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
          */
-        plainText: {
-            type: Boolean,
-            required: false,
-        },
+        plainText: Boolean,
         /**
          * Toggle the readonly state for the component.
          */
-        readonly: {
-            type: Boolean,
-            required: false,
-        },
+        readonly: Boolean,
         /**
          * Size the component small or large.
          *
@@ -5133,9 +4961,7 @@ const CFormInput = defineComponent({
          *
          * @since 4.3.0
          */
-        text: {
-            type: String,
-        },
+        text: String,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -5233,61 +5059,39 @@ const CFormRange = defineComponent({
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            default: undefined,
-        },
+        disabled: Boolean,
         /**
          * Add a caption for a component.
          *
          * @since 4.3.0
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * Specifies the maximum value for the component.
          */
-        max: {
-            type: Number,
-            default: undefined,
-        },
+        max: Number,
         /**
          * Specifies the minimum value for the component.
          */
-        min: {
-            type: Number,
-            default: undefined,
-        },
+        min: Number,
         /**
          * The default name for a value passed using v-model.
          */
-        modelValue: {
-            type: String,
-            value: undefined,
-        },
+        modelValue: String,
         /**
          * Toggle the readonly state for the component.
          */
-        readonly: {
-            type: Boolean,
-        },
+        readonly: Boolean,
         /**
          * Specifies the interval between legal numbers in the component.
          */
-        steps: {
-            type: Number,
-            default: undefined,
-        },
+        steps: Number,
         /**
          * The `value` attribute of component.
          *
          * @controllable onChange
          * */
-        value: {
-            type: Number,
-            default: undefined,
-        },
+        value: Number,
     },
     emits: [
         /**
@@ -5336,47 +5140,33 @@ const CFormSelect = defineComponent({
          *
          * @since 4.3.0
          */
-        feedback: {
-            type: String,
-        },
+        feedback: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedbackInvalid: {
-            type: String,
-        },
+        feedbackInvalid: String,
         /**
          * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        feedbackValid: {
-            type: String,
-        },
+        feedbackValid: String,
         /**
          * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        floatingLabel: {
-            type: String,
-        },
+        floatingLabel: String,
         /**
          * Specifies the number of visible options in a drop-down list.
          */
-        htmlSize: {
-            type: Number,
-            default: undefined,
-            required: false,
-        },
+        htmlSize: Number,
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document.
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Set component validation state to invalid.
          */
@@ -5386,32 +5176,21 @@ const CFormSelect = defineComponent({
          *
          * @since 4.3.0
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * The default name for a value passed using v-model.
          */
         modelValue: {
             type: [String, Array],
-            default: undefined,
-            require: false,
-        },
-        multiple: {
-            type: Boolean,
-            required: false,
         },
+        multiple: Boolean,
         /**
          * Options list of the select component. Available keys: `label`, `value`, `disabled`.
          * Examples:
          * - `:options="[{ value: 'js', label: 'JavaScript' }, { value: 'html', label: 'HTML', disabled: true }]"`
          * - `:options="['js', 'html']"`
          */
-        options: {
-            type: Array,
-            default: undefined,
-            required: false,
-        },
+        options: Array,
         /**
          * Size the component small or large.
          *
@@ -5419,8 +5198,6 @@ const CFormSelect = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            require: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -5430,9 +5207,7 @@ const CFormSelect = defineComponent({
          *
          * @since 4.3.0
          */
-        text: {
-            type: String,
-        },
+        text: String,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -5528,28 +5303,25 @@ const CFormSwitch = defineComponent({
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Set component validation state to invalid.
          */
-        invalid: {
-            type: Boolean,
-        },
+        invalid: Boolean,
         /**
          * The element represents a caption for a component.
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * The default name for a value passed using v-model.
          */
-        modelValue: {
-            type: [Boolean, String],
-            value: undefined,
-        },
+        modelValue: [Boolean, String],
+        /**
+         * Put checkboxes or radios on the opposite side.
+         *
+         * @sinve 4.8.0
+         */
+        reverse: Boolean,
         /**
          * Size the component large or extra large. Works only with `switch`.
          *
@@ -5573,9 +5345,7 @@ const CFormSwitch = defineComponent({
         /**
          * Set component validation state to valid.
          */
-        valid: {
-            type: Boolean,
-        },
+        valid: Boolean,
     },
     emits: [
         /**
@@ -5597,6 +5367,7 @@ const CFormSwitch = defineComponent({
             class: [
                 'form-check form-switch',
                 {
+                    'form-check-reverse': props.reverse,
                     [`form-switch-${props.size}`]: props.size,
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
@@ -5634,47 +5405,35 @@ const CFormTextarea = defineComponent({
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-        },
+        disabled: Boolean,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedback: {
-            type: String,
-        },
+        feedback: String,
         /**
          * Provide valuable, actionable feedback.
          *
          * @since 4.3.0
          */
-        feedbackInvalid: {
-            type: String,
-        },
+        feedbackInvalid: String,
         /**
          * Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        feedbackValid: {
-            type: String,
-        },
+        feedbackValid: String,
         /**
          * Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
          *
          * @since 4.3.0
          */
-        floatingLabel: {
-            type: String,
-        },
+        floatingLabel: String,
         /**
          * The id global attribute defines an identifier (ID) that must be unique in the whole document.
          */
-        id: {
-            type: String,
-        },
+        id: String,
         /**
          * Set component validation state to invalid.
          */
@@ -5684,36 +5443,25 @@ const CFormTextarea = defineComponent({
          *
          * @since 4.3.0
          */
-        label: {
-            type: String,
-        },
+        label: String,
         /**
          * The default name for a value passed using v-model.
          */
-        modelValue: {
-            type: String,
-            default: undefined,
-        },
+        modelValue: String,
         /**
          * Render the component styled as plain text. Removes the default form field styling and preserve the correct margin and padding. Recommend to use only along side `readonly`.
          */
-        plainText: {
-            type: Boolean,
-        },
+        plainText: Boolean,
         /**
          * Toggle the readonly state for the component.
          */
-        readonly: {
-            type: Boolean,
-        },
+        readonly: Boolean,
         /**
          * Add helper text to the component.
          *
          * @since 4.3.0
          */
-        text: {
-            type: String,
-        },
+        text: String,
         /**
          * Display validation feedback in a styled tooltip.
          *
@@ -5802,8 +5550,6 @@ const CInputGroup = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -5829,7 +5575,6 @@ const CInputGroupText = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'span',
         },
     },
@@ -7841,8 +7586,6 @@ const CDropdown = defineComponent({
          */
         alignment: {
             type: [String, Object],
-            default: undefined,
-            required: false,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             validator: (value) => {
                 if (value === 'start' || value === 'end') {
@@ -7888,10 +7631,7 @@ const CDropdown = defineComponent({
         /**
          * Sets a darker color scheme to match a dark navbar.
          */
-        dark: {
-            type: Boolean,
-            required: false,
-        },
+        dark: Boolean,
         /**
          * Sets a specified  direction and location of the dropdown menu.
          *
@@ -7899,8 +7639,6 @@ const CDropdown = defineComponent({
          */
         direction: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value);
             },
@@ -7908,10 +7646,7 @@ const CDropdown = defineComponent({
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * 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.
          *
@@ -7920,7 +7655,6 @@ const CDropdown = defineComponent({
         placement: {
             type: String,
             default: 'bottom-start',
-            required: false,
         },
         /**
          * If you want to disable dynamic positioning set this property to `true`.
@@ -7928,14 +7662,12 @@ const CDropdown = defineComponent({
         popper: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
          */
         trigger: {
-            type: [String, Array],
-            required: false,
+            type: String,
             default: 'click',
         },
         /**
@@ -7946,7 +7678,6 @@ const CDropdown = defineComponent({
         variant: {
             type: String,
             default: 'btn-group',
-            required: false,
             validator: (value) => {
                 return ['btn-group', 'dropdown', 'input-group', 'nav-item'].includes(value);
             },
@@ -7954,10 +7685,7 @@ const CDropdown = defineComponent({
         /**
          * Toggle the visibility of dropdown menu component.
          */
-        visible: {
-            type: Boolean,
-            required: false,
-        },
+        visible: Boolean,
     },
     emits: [
         /**
@@ -8070,33 +7798,22 @@ const CDropdownItem = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
             default: 'a',
-            required: false,
         },
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * The href attribute specifies the URL of the page the link goes to.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     setup(props, { slots }) {
         return () => h$1(CLink, {
@@ -8120,7 +7837,6 @@ const CDropdownHeader = defineComponent({
         component: {
             type: String,
             default: 'h6',
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -8150,7 +7866,6 @@ const CDropdownMenu = defineComponent({
         component: {
             type: String,
             default: 'div',
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -8228,32 +7943,26 @@ const CDropdownToggle = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            default: false,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Enables pseudo element caret on toggler.
          */
         caret: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
-            default: 'button',
-            require: false,
+            default: 'button'
         },
         /**
          * Create a custom toggler which accepts any content.
@@ -8262,10 +7971,7 @@ const CDropdownToggle = defineComponent({
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * @values 'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
          */
@@ -8277,8 +7983,6 @@ const CDropdownToggle = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -8286,10 +7990,7 @@ const CDropdownToggle = defineComponent({
         /**
          * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
          */
-        split: {
-            type: Boolean,
-            required: false,
-        },
+        split: Boolean,
         /**
          * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
          *
@@ -8298,7 +7999,6 @@ const CDropdownToggle = defineComponent({
         trigger: {
             type: String,
             default: 'click',
-            required: false,
         },
         /**
          * Set the button variant to an outlined button or a ghost button.
@@ -8307,8 +8007,6 @@ const CDropdownToggle = defineComponent({
          */
         variant: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['ghost', 'outline'].includes(value);
             },
@@ -8415,6 +8113,33 @@ const CDropdownPlugin = {
     },
 };
 
+const Color = {
+    type: String,
+    validator: (value) => {
+        // The value must match one of these strings
+        return [
+            'primary',
+            'secondary',
+            'success',
+            'danger',
+            'warning',
+            'info',
+            'dark',
+            'light',
+            'link',
+            'transparent',
+            'primary-gradient',
+            'secondary-gradient',
+            'success-gradient',
+            'danger-gradient',
+            'warning-gradient',
+            'info-gradient',
+            'dark-gradient',
+            'light-gradient',
+        ].includes(value);
+    },
+};
+
 const CPicker = defineComponent({
     name: 'CPicker',
     props: {
@@ -10320,8 +10045,6 @@ const CSpinner = defineComponent({
          */
         color: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return [
                     'primary',
@@ -10341,7 +10064,6 @@ const CSpinner = defineComponent({
         component: {
             type: String,
             default: 'div',
-            required: false,
         },
         /**
          * Size the component small.
@@ -10350,8 +10072,6 @@ const CSpinner = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return value === 'sm';
             },
@@ -10364,7 +10084,6 @@ const CSpinner = defineComponent({
         variant: {
             type: String,
             default: 'border',
-            required: false,
             validator: (value) => {
                 return ['border', 'grow'].includes(value);
             },
@@ -10375,7 +10094,6 @@ const CSpinner = defineComponent({
         visuallyHiddenLabel: {
             type: String,
             default: 'Loading...',
-            required: false,
         },
     },
     setup(props) {
@@ -10499,8 +10217,6 @@ const CFooter = defineComponent({
          */
         position: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['fixed', 'sticky'].includes(value);
             },
@@ -10535,8 +10251,6 @@ const CCol = defineComponent({
          */
         xs: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
         /**
          * The number of columns/offset/order on small devices (<768px).
@@ -10545,8 +10259,6 @@ const CCol = defineComponent({
          */
         sm: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
         /**
          * The number of columns/offset/order on medium devices (<992px).
@@ -10555,8 +10267,6 @@ const CCol = defineComponent({
          */
         md: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
         /**
          * The number of columns/offset/order on large devices (<1200px).
@@ -10565,8 +10275,6 @@ const CCol = defineComponent({
          */
         lg: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
         /**
          * The number of columns/offset/order on X-Large devices (<1400px).
@@ -10575,8 +10283,6 @@ const CCol = defineComponent({
          */
         xl: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
         /**
          * The number of columns/offset/order on XX-Large devices (≥1400px).
@@ -10585,8 +10291,6 @@ const CCol = defineComponent({
          */
         xxl: {
             type: [Boolean, Number, String, Object],
-            default: undefined,
-            require: false,
         },
     },
     setup(props, { slots }) {
@@ -10637,45 +10341,27 @@ const CContainer = defineComponent({
         /**
          * Set container 100% wide until small breakpoint.
          */
-        sm: {
-            type: Boolean,
-            required: false,
-        },
+        sm: Boolean,
         /**
          * Set container 100% wide until medium breakpoint.
          */
-        md: {
-            type: Boolean,
-            required: false,
-        },
+        md: Boolean,
         /**
          * Set container 100% wide until large breakpoint.
          */
-        lg: {
-            type: Boolean,
-            required: false,
-        },
+        lg: Boolean,
         /**
          * Set container 100% wide until X-large breakpoint.
          */
-        xl: {
-            type: Boolean,
-            required: false,
-        },
+        xl: Boolean,
         /**
          * Set container 100% wide until XX-large breakpoint.
          */
-        xxl: {
-            type: Boolean,
-            required: false,
-        },
+        xxl: Boolean,
         /**
          * Set container 100% wide, spanning the entire width of the viewport.
          */
-        fluid: {
-            type: Boolean,
-            required: false,
-        },
+        fluid: Boolean,
     },
     setup(props, { slots }) {
         const repsonsiveClassNames = [];
@@ -10705,61 +10391,37 @@ const CRow = defineComponent({
          *
          * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
          */
-        xs: {
-            type: Object,
-            default: undefined,
-            required: false,
-        },
+        xs: Object,
         /**
          * The number of columns/offset/order on small devices (<768px).
          *
          * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
          */
-        sm: {
-            type: Object,
-            default: undefined,
-            required: false,
-            /**
-             * The number of columns/offset/order on medium devices (<992px).
-             *
-             * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
-             */
-        },
-        md: {
-            type: Object,
-            default: undefined,
-            required: false,
-        },
+        sm: Object,
+        /**
+         * The number of columns/offset/order on medium devices (<992px).
+         *
+         * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
+         */
+        md: Object,
         /**
          * The number of columns/offset/order on large devices (<1200px).
          *
          * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
          */
-        lg: {
-            type: Object,
-            default: undefined,
-            required: false,
-        },
+        lg: Object,
         /**
          * The number of columns/offset/order on X-Large devices (<1400px).
          *
          * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
          */
-        xl: {
-            type: Object,
-            default: undefined,
-            required: false,
-        },
+        xl: Object,
         /**
          * The number of columns/offset/order on XX-Large devices (≥1400px).
          *
          * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
          */
-        xxl: {
-            type: Object,
-            default: undefined,
-            required: false,
-        },
+        xxl: Object,
     },
     setup(props, { slots }) {
         const repsonsiveClassNames = [];
@@ -10805,8 +10467,6 @@ const CHeader = defineComponent({
          */
         container: {
             type: [Boolean, String],
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return (typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value));
             },
@@ -10818,8 +10478,6 @@ const CHeader = defineComponent({
          */
         position: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['fixed', 'sticky'].includes(value);
             },
@@ -10840,7 +10498,6 @@ const CHeaderBrand = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'a',
         },
     },
@@ -10864,7 +10521,6 @@ const CHeaderNav = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'ul',
         },
     },
@@ -10915,8 +10571,6 @@ const CImage = defineComponent({
          */
         align: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['start', 'center', 'end'].includes(value);
             },
@@ -10924,24 +10578,15 @@ const CImage = defineComponent({
         /**
          * Make image responsive.
          */
-        fluid: {
-            type: Boolean,
-            required: false,
-        },
+        fluid: Boolean,
         /**
          * Make image rounded.
          */
-        rounded: {
-            type: Boolean,
-            required: false,
-        },
+        rounded: Boolean,
         /**
          * Give an image a rounded 1px border appearance.
          */
-        thumbnail: {
-            type: Boolean,
-            required: false,
-        },
+        thumbnail: Boolean,
     },
     setup(props) {
         return () => h$1('img', {
@@ -10972,16 +10617,12 @@ const CListGroup = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'ul',
         },
         /**
          * Remove some borders and rounded corners to render list group items edge-to-edge in a parent component (e.g., `<CCard>`)
          */
-        flush: {
-            type: Boolean,
-            required: false,
-        },
+        flush: Boolean,
         /**
          * Specify a layout type.
          *
@@ -10989,8 +10630,6 @@ const CListGroup = defineComponent({
          */
         layout: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return [
                     'horizontal',
@@ -11022,29 +10661,22 @@ const CListGroupItem = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
-            required: false,
             default: 'li',
         },
     },
@@ -11191,10 +10823,7 @@ const CModal = defineComponent({
         /**
          * A string of all className you want applied to the modal content component.
          */
-        contentClassName: {
-            type: String,
-            default: undefined,
-        },
+        contentClassName: String,
         /**
          * Set modal to covers the entire user viewport
          *
@@ -11202,7 +10831,6 @@ const CModal = defineComponent({
          */
         fullscreen: {
             type: [Boolean, String],
-            default: undefined,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
@@ -11223,9 +10851,7 @@ const CModal = defineComponent({
         /**
          * Create a scrollable modal that allows scrolling the modal body.
          */
-        scrollable: {
-            type: Boolean,
-        },
+        scrollable: Boolean,
         /**
          * Size the component small, large, or extra large.
          *
@@ -11233,7 +10859,6 @@ const CModal = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
             validator: (value) => {
                 return ['sm', 'lg', 'xl'].includes(value);
             },
@@ -11406,7 +11031,6 @@ const CModalHeader = defineComponent({
          */
         closeButton: {
             type: Boolean,
-            required: false,
             default: true,
         },
     },
@@ -11428,7 +11052,6 @@ const CModalTitle = defineComponent({
         component: {
             type: String,
             default: 'h5',
-            required: false,
         },
     },
     setup(props, { slots }) {
@@ -12297,7 +11920,6 @@ const CNav = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'ul',
         },
         /**
@@ -12307,8 +11929,6 @@ const CNav = defineComponent({
          */
         layout: {
             type: String,
-            required: false,
-            default: undefined,
             validator: (value) => {
                 return ['fill', 'justified'].includes(value);
             },
@@ -12320,8 +11940,6 @@ const CNav = defineComponent({
          */
         variant: {
             type: String,
-            required: false,
-            default: undefined,
             validator: (value) => {
                 return ['tabs', 'pills', 'underline'].includes(value);
             },
@@ -12465,33 +12083,22 @@ const CNavLink = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
-            required: false,
             default: 'a',
         },
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * @ignore
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     setup(props, { slots }) {
         return () => h$1(CLink, {
@@ -12553,7 +12160,7 @@ const CNavbar = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
         /**
          * Sets if the color of text should be colored for a light or dark dark background.
          *
@@ -12561,8 +12168,6 @@ const CNavbar = defineComponent({
          */
         colorScheme: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['dark', 'light'].includes(value);
             },
@@ -12573,7 +12178,6 @@ const CNavbar = defineComponent({
         component: {
             type: String,
             default: 'nav',
-            required: false,
         },
         /**
          * Defines optional container wrapping children elements.
@@ -12582,8 +12186,6 @@ const CNavbar = defineComponent({
          */
         container: {
             type: [Boolean, String],
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return (typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value));
             },
@@ -12595,8 +12197,6 @@ const CNavbar = defineComponent({
          */
         expand: {
             type: [Boolean, String],
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
             },
@@ -12608,8 +12208,6 @@ const CNavbar = defineComponent({
          */
         placement: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['fixed-top', 'fixed-bottom', 'sticky-top'].includes(value);
             },
@@ -12644,16 +12242,11 @@ const CNavbarBrand = defineComponent({
         component: {
             type: String,
             default: 'a',
-            required: false,
         },
         /**
          * The href attribute specifies the URL of the page the link goes to.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     setup(props, { slots }) {
         return () => h$1(props.component ? props.component : props.href ? 'a' : 'span', {
@@ -12671,7 +12264,6 @@ const CNavbarNav = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'ul',
         },
     },
@@ -12744,7 +12336,6 @@ const COffcanvas = defineComponent({
          */
         placement: {
             type: String,
-            default: undefined,
             require: true,
             validator: (value) => {
                 return ['start', 'end', 'top', 'bottom'].includes(value);
@@ -12779,7 +12370,10 @@ const COffcanvas = defineComponent({
         /**
          * Toggle the visibility of offcanvas component.
          */
-        visible: Boolean,
+        visible: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: [
         /**
@@ -12798,11 +12392,9 @@ const COffcanvas = defineComponent({
             visible.value = props.visible;
         });
         watch(visible, () => {
-            if (visible.value) {
-                if (!props.scroll) {
-                    document.body.style.overflow = 'hidden';
-                    document.body.style.paddingRight = '0px';
-                }
+            if (visible.value && !props.scroll) {
+                document.body.style.overflow = 'hidden';
+                document.body.style.paddingRight = '0px';
                 return;
             }
             if (!props.scroll) {
@@ -12892,7 +12484,6 @@ const COffcanvasTitle = defineComponent({
          */
         component: {
             type: String,
-            required: false,
             default: 'h5',
         },
     },
@@ -12920,8 +12511,6 @@ const CPagination = defineComponent({
          */
         align: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['start', 'center', 'end'].includes(value);
             },
@@ -12933,8 +12522,6 @@ const CPagination = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['sm', 'lg'].includes(value);
             },
@@ -12959,33 +12546,19 @@ const CPaginationItem = defineComponent({
         /**
          * Toggle the active state for the component.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
-        component: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        component: String,
         /**
          * Toggle the disabled state for the component.
          */
-        disabled: {
-            type: Boolean,
-            required: false,
-        },
+        disabled: Boolean,
         /**
          * The href attribute specifies the URL of the page the link goes to.
          */
-        href: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        href: String,
     },
     setup(props, { slots }) {
         return () => {
@@ -13037,8 +12610,6 @@ const CPlaceholder = defineComponent({
          */
         animation: {
             type: String,
-            default: undefined,
-            require: false,
             validator: (value) => {
                 return ['glow', 'wave'].includes(value);
             },
@@ -13048,14 +12619,13 @@ const CPlaceholder = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
         component: {
             type: String,
             default: 'span',
-            required: false,
         },
         /**
          * Size the component extra small, small, or large.
@@ -13064,8 +12634,6 @@ const CPlaceholder = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['xs', 'sm', 'lg'].includes(value);
             },
@@ -13073,51 +12641,27 @@ const CPlaceholder = defineComponent({
         /**
          * The number of columns on extra small devices (<576px).
          */
-        xs: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        xs: Number,
         /**
          * The number of columns on small devices (<768px).
          */
-        sm: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        sm: Number,
         /**
          * The number of columns on medium devices (<992px).
          */
-        md: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        md: Number,
         /**
          * The number of columns on large devices (<1200px).
          */
-        lg: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        lg: Number,
         /**
          * The number of columns on X-Large devices (<1400px).
          */
-        xl: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        xl: Number,
         /**
          * The number of columns on XX-Large devices (≥1400px).
          */
-        xxl: {
-            type: Number,
-            default: undefined,
-            require: false,
-        },
+        xxl: Number,
     },
     setup(props, { slots }) {
         const repsonsiveClassNames = [];
@@ -13156,22 +12700,18 @@ const CProgressBar = defineComponent({
         /**
          * Use to animate the stripes right to left via CSS3 animations.
          */
-        animated: {
-            type: Boolean,
-            required: false,
-        },
+        animated: Boolean,
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * The percent to progress the ProgressBar.
          */
         value: {
             type: Number,
-            required: false,
             default: 0,
         },
         /**
@@ -13181,8 +12721,6 @@ const CProgressBar = defineComponent({
          */
         variant: {
             type: String,
-            default: undefined,
-            require: false,
             validator: (value) => {
                 return value === 'striped';
             },
@@ -13213,11 +12751,7 @@ const CProgress = defineComponent({
         /**
          * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
          */
-        height: {
-            type: Number,
-            default: undefined,
-            required: false,
-        },
+        height: Number,
         /**
          * Makes progress bar thinner.
          */
@@ -13262,18 +12796,13 @@ const CPopover = defineComponent({
         /**
          * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
          */
-        content: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        content: String,
         /**
          * Offset of the popover relative to its target.
          */
         offset: {
             type: Array,
             default: () => [0, 8],
-            required: false,
         },
         /**
          * 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.
@@ -13281,7 +12810,6 @@ const CPopover = defineComponent({
         placement: {
             type: String,
             default: 'top',
-            required: false,
             validator: (value) => {
                 return ['top', 'right', 'bottom', 'left'].includes(value);
             },
@@ -13289,11 +12817,7 @@ const CPopover = defineComponent({
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        title: String,
         /**
          * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
          *
@@ -13302,7 +12826,6 @@ const CPopover = defineComponent({
         trigger: {
             type: [String, Array],
             default: 'click',
-            required: false,
             validator: (value) => {
                 if (typeof value === 'string') {
                     return ['click', 'focus', 'hover'].includes(value);
@@ -13433,17 +12956,11 @@ const CSidebar = defineComponent({
         /**
          * Make sidebar narrow.
          */
-        narrow: {
-            type: Boolean,
-            required: false,
-        },
+        narrow: Boolean,
         /**
          * Set sidebar to overlaid variant.
          */
-        overlaid: {
-            type: Boolean,
-            required: false,
-        },
+        overlaid: Boolean,
         /**
          * Components placement, there’s no default placement.
          * @values 'start', 'end'
@@ -13460,7 +12977,6 @@ const CSidebar = defineComponent({
          */
         position: {
             type: String,
-            default: undefined,
             validator: (value) => {
                 return ['fixed'].includes(value);
             },
@@ -13470,7 +12986,6 @@ const CSidebar = defineComponent({
          */
         size: {
             type: String,
-            default: undefined,
             validator: (value) => {
                 return ['sm', 'lg', 'xl'].includes(value);
             },
@@ -14095,7 +13610,7 @@ const CTableBody = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('tbody', {
@@ -14121,10 +13636,7 @@ const CTableDataCell = defineComponent({
         /**
          * Highlight a table row or cell.
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Set the vertical aligment.
          *
@@ -14132,8 +13644,6 @@ const CTableDataCell = defineComponent({
          */
         align: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['bottom', 'middle', 'top'].includes(value);
             },
@@ -14143,14 +13653,11 @@ const CTableDataCell = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
         /**
          * @ignore
          */
-        scope: {
-            type: String,
-            required: false,
-        },
+        scope: String,
     },
     setup(props, { slots }) {
         return () => h$1(props.scope ? 'th' : 'td', {
@@ -14174,7 +13681,7 @@ const CTableFoot = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('tfoot', {
@@ -14195,7 +13702,7 @@ const CTableHead = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('thead', {
@@ -14216,7 +13723,7 @@ const CTableHeaderCell = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('th', {
@@ -14235,10 +13742,7 @@ const CTableRow = defineComponent({
         /**
          * Highlight a table row or cell..
          */
-        active: {
-            type: Boolean,
-            required: false,
-        },
+        active: Boolean,
         /**
          * Set the vertical aligment.
          *
@@ -14246,8 +13750,6 @@ const CTableRow = defineComponent({
          */
         align: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['bottom', 'middle', 'top'].includes(value);
             },
@@ -14257,7 +13759,7 @@ const CTableRow = defineComponent({
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
     },
     setup(props, { slots }) {
         return () => h$1('tr', {
@@ -14281,11 +13783,14 @@ const pretifyName$1 = (name) => {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 };
-const label = (column) => typeof column === 'object'
-    ? column.label !== undefined
-        ? column.label
-        : pretifyName$1(column.key)
-    : pretifyName$1(column);
+const getColumnLabel$1 = (column) => typeof column === 'object' ? column.label ?? pretifyName$1(column.key) : pretifyName$1(column);
+const getColumnNames$1 = (columns, items) => columns
+    ? columns.map((column) => {
+        return typeof column === 'object' ? column.key : column;
+    })
+    : items && getColumnNamesFromItems$1(items);
+const getColumnNamesFromItems$1 = (items) => Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_');
+
 const CTable = defineComponent({
     name: 'CTable',
     props: {
@@ -14296,8 +13801,6 @@ const CTable = defineComponent({
          */
         align: {
             type: String,
-            default: undefined,
-            required: false,
             validator: (value) => {
                 return ['bottom', 'middle', 'top'].includes(value);
             },
@@ -14307,41 +13810,27 @@ const CTable = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        borderColor: Color,
+        borderColor: Color$1,
         /**
          * Add borders on all sides of the table and cells.
          */
-        bordered: {
-            type: Boolean,
-            required: false,
-        },
+        bordered: Boolean,
         /**
          * Remove borders on all sides of the table and cells.
          */
-        borderless: {
-            type: Boolean,
-            required: false,
-        },
+        borderless: Boolean,
         /**
          * Put the `<caption>` on the top of the table.
          *
          * @values 'top' | string
          */
-        caption: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        caption: String,
         /**
          * Set the text of the table caption and the caption on the top of the table.
          *
          * @since 4.5.0
          */
-        captionTop: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        captionTop: String,
         /**
          * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
          *
@@ -14357,14 +13846,13 @@ const CTable = defineComponent({
          */
         columns: {
             type: Array,
-            required: false,
         },
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values  'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
         /**
          * Array of objects or strings, where each element represents one cell in the table footer.
          *
@@ -14377,15 +13865,11 @@ const CTable = defineComponent({
          */
         footer: {
             type: Array,
-            required: false,
         },
         /**
          * Enable a hover state on table rows within a `<CTableBody>`.
          */
-        hover: {
-            type: Boolean,
-            required: false,
-        },
+        hover: Boolean,
         /**
          * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
          *
@@ -14396,12 +13880,9 @@ const CTable = defineComponent({
          */
         items: {
             type: Array,
-            required: false,
         },
         responsive: {
             type: [Boolean, String],
-            default: undefined,
-            required: false,
             validator: (value) => {
                 if (typeof value == 'string') {
                     return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value);
@@ -14415,26 +13896,17 @@ const CTable = defineComponent({
         /**
          * Make table more compact by cutting all cell `padding` in half.
          */
-        small: {
-            type: Boolean,
-            required: false,
-        },
+        small: Boolean,
         /**
          * Add zebra-striping to any table row within the `<CTableBody>`.
          */
-        striped: {
-            type: Boolean,
-            required: false,
-        },
+        striped: Boolean,
         /**
          * Add zebra-striping to any table column.
          *
          * @since 4.4.0
          */
-        stripedColumns: {
-            type: Boolean,
-            required: false,
-        },
+        stripedColumns: Boolean,
         /**
          * Properties that will be passed to the table footer component.
          *
@@ -14443,8 +13915,6 @@ const CTable = defineComponent({
          */
         tableFootProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
         /**
          * Properties that will be passed to the table head component.
@@ -14454,19 +13924,17 @@ const CTable = defineComponent({
          */
         tableHeadProps: {
             type: Object,
-            default: undefined,
-            required: false,
         },
     },
     setup(props, { slots, attrs }) {
-        const rawColumnNames = computed(() => props.columns
-            ? props.columns.map((column) => {
-                if (typeof column === 'object')
-                    return column.key;
-                else
-                    return column;
-            })
-            : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'));
+        const columnNames = computed(() => getColumnNames$1(props.columns, props.items));
+        //   props.columns
+        //     ? props.columns.map((column: Column | string) => {
+        //         if (typeof column === 'object') return column.key
+        //         else return column
+        //       })
+        //     : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'),
+        // )
         const table = () => h$1('table', {
             class: [
                 'table',
@@ -14503,7 +13971,7 @@ const CTable = defineComponent({
                                         ...(typeof column === 'object' &&
                                             column._style && { style: { ...column._style } }),
                                     }, {
-                                        default: () => label(column),
+                                        default: () => getColumnLabel$1(column),
                                     })),
                             ],
                         }),
@@ -14516,7 +13984,7 @@ const CTable = defineComponent({
                                     ...(item._props && { ...item._props }),
                                 }, {
                                     default: () => [
-                                        rawColumnNames.value.map((colName) => item[colName] &&
+                                        columnNames.value && columnNames.value.map((colName) => item[colName] &&
                                             h$1(CTableDataCell, {
                                                 ...(item._cellProps &&
                                                     item._cellProps['all'] && { ...item._cellProps['all'] }),
@@ -15592,10 +15060,10 @@ const CSmartTable = defineComponent({
                                 : handleActivePageChange(page),
                         })
                         : ''),
-                    h$1('div', {
-                        class: 'col-auto ms-auto',
-                    }, props.itemsPerPageSelect &&
+                    props.itemsPerPageSelect &&
                         h$1('div', {
+                            class: 'col-auto ms-auto',
+                        }, h$1('div', {
                             class: 'row',
                         }, {
                             default: () => [
@@ -15647,7 +15115,6 @@ const CTabPane = defineComponent({
         visible: {
             type: Boolean,
             default: false,
-            required: false,
         },
     },
     emits: [
@@ -15710,21 +15177,19 @@ const CToast = defineComponent({
         autohide: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * Sets the color context of the component to one of CoreUI’s themed colors.
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string
          */
-        color: Color,
+        color: Color$1,
         /**
          * Delay hiding the toast (ms).
          */
         delay: {
             type: Number,
             default: 5000,
-            required: false,
         },
         /**
          * Optionally add a close button to component and allow it to self dismiss.
@@ -15732,32 +15197,19 @@ const CToast = defineComponent({
         dismissible: {
             type: Boolean,
             default: true,
-            required: false,
         },
         /**
          * index of the component.
          */
-        index: {
-            type: Number,
-            default: undefined,
-            required: false,
-        },
+        index: Number,
         /**
          * Title node for your component.
          */
-        title: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        title: String,
         /**
          * Toggle the visibility of component.
          */
-        visible: {
-            type: Boolean,
-            default: true,
-            required: false,
-        },
+        visible: Boolean,
     },
     emits: [
         /**
@@ -15770,46 +15222,19 @@ const CToast = defineComponent({
         'show',
     ],
     setup(props, { slots, emit }) {
-        const visible = ref(props.visible);
-        let timeout = 0;
-        const updateVisible = (v) => {
-            visible.value = v;
+        const timeout = ref(0);
+        const visible = ref();
+        const updateVisible = (_visible) => {
+            visible.value = _visible;
         };
         provide('updateVisible', updateVisible);
-        const handleBeforeEnter = (el) => {
-            el.classList.add('showing');
-        };
-        const handleEnter = (el, done) => {
-            executeAfterTransition(() => done(), el);
-            el.classList.add('show');
-            setTimeout(() => {
-                el.classList.remove('showing');
-            }, 1);
-            if (props.index) {
-                emit('show', props.index);
-            }
-            else {
-                emit('show');
-            }
-        };
-        const handleLeave = (el, done) => {
-            executeAfterTransition(() => done(), el);
-            el.classList.add('showing');
-        };
-        const handleAfterLeave = (el) => {
-            el.classList.remove('show');
-            el.classList.add('hide');
-            if (props.index) {
-                emit('close', props.index);
-            }
-            else {
-                emit('close');
-            }
-        };
         onMounted(() => {
+            if (props.visible) {
+                visible.value = props.visible;
+            }
             if (props.autohide) {
-                clearTimeout(timeout);
-                timeout = window.setTimeout(() => {
+                clearTimeout(timeout.value);
+                timeout.value = window.setTimeout(() => {
                     visible.value = false;
                     emit('close');
                 }, props.delay);
@@ -15817,23 +15242,33 @@ const CToast = defineComponent({
         });
         return () => h$1(Transition, {
             appear: true,
-            onBeforeEnter: (el) => handleBeforeEnter(el),
-            onEnter: (el, done) => handleEnter(el, done),
-            onLeave: (el, done) => handleLeave(el, done),
-            onAfterLeave: (el) => handleAfterLeave(el),
-        }, () => visible.value &&
-            h$1('div', {
-                class: [
-                    'toast fade',
-                    {
-                        [`bg-${props.color}`]: props.color,
-                    },
-                ],
-                'aria-live': 'assertive',
-                'aria-atomic': true,
-                role: 'alert',
-                ref: 'toastRef',
-            }, slots.default && slots.default()));
+            enterFromClass: '',
+            enterActiveClass: 'show showing',
+            enterToClass: 'show',
+            leaveFromClass: 'show',
+            leaveActiveClass: 'show showing',
+            leaveToClass: 'show',
+            onAfterEnter: (el) => {
+                el.classList.add('show');
+                props.index ? emit('show', props.index) : emit('show');
+            },
+            onAfterLeave: () => {
+                props.index ? emit('close', props.index) : emit('close');
+            },
+        }, {
+            default: () => visible.value &&
+                h$1('div', {
+                    class: [
+                        'toast fade',
+                        {
+                            [`bg-${props.color}`]: props.color,
+                        },
+                    ],
+                    'aria-live': 'assertive',
+                    'aria-atomic': true,
+                    role: 'alert',
+                }, slots.default && slots.default()),
+        });
     },
 });
 
@@ -15850,11 +15285,7 @@ const CToastClose = defineComponent({
         /**
          * Component used for the root node. Either a string to use a HTML element or a component.
          */
-        component: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        component: String,
         ...CCloseButton.props,
     },
     emits: [
@@ -15895,8 +15326,6 @@ const CToaster = defineComponent({
          */
         placement: {
             type: String,
-            default: undefined,
-            require: false,
             validator: (value) => {
                 return [
                     'top-start',
@@ -15936,10 +15365,7 @@ const CToastHeader = defineComponent({
         /**
          * Automatically add a close button to the header.
          */
-        closeButton: {
-            type: Boolean,
-            require: false,
-        },
+        closeButton: Boolean,
     },
     emits: [
         /**
@@ -15974,18 +15400,13 @@ const CTooltip = defineComponent({
         /**
          * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
          */
-        content: {
-            type: String,
-            default: undefined,
-            required: false,
-        },
+        content: String,
         /**
          * Offset of the tooltip relative to its target.
          */
         offset: {
             type: Array,
             default: () => [0, 0],
-            required: false,
         },
         /**
          * 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.
@@ -15993,7 +15414,6 @@ const CTooltip = defineComponent({
         placement: {
             type: String,
             default: 'top',
-            required: false,
             validator: (value) => {
                 return ['top', 'right', 'bottom', 'left'].includes(value);
             },
@@ -16006,7 +15426,6 @@ const CTooltip = defineComponent({
         trigger: {
             type: [String, Array],
             default: 'hover',
-            required: false,
             validator: (value) => {
                 if (typeof value === 'string') {
                     return ['click', 'focus', 'hover'].includes(value);
@@ -16117,26 +15536,17 @@ const CTooltipPlugin = {
 const CWidgetStatsA = defineComponent({
     name: 'CWidgetStatsA',
     props: {
-        color: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        color: String,
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        title: String,
         /**
          * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
          */
         value: {
             type: [Number, String],
-            default: 0,
-            require: false,
+            default: 0
         },
     },
     /**
@@ -16225,22 +15635,18 @@ const CWidgetStatsB = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Colors have been inverted from their default dark shade.
          */
-        inverse: {
-            type: Boolean,
-            default: undefined,
-            require: false,
-        },
+        inverse: Boolean,
         progress: J({
             /**
              * Sets the color context of the progress bar to one of CoreUI’s themed colors
              *
              * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
              */
-            color: Color,
+            color: Color$1,
             /**
              * The percent to progress the ProgressBar (out of 100).
              */
@@ -16252,26 +15658,17 @@ const CWidgetStatsB = defineComponent({
         /**
          * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
          */
-        text: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        text: String,
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        title: String,
         /**
          * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
          */
         value: {
             type: [Number, String],
-            default: 0,
-            require: false,
+            default: 0
         },
     },
     setup(props, { slots }) {
@@ -16322,22 +15719,18 @@ const CWidgetStatsC = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Colors have been inverted from their default dark shade.
          */
-        inverse: {
-            type: Boolean,
-            default: undefined,
-            require: false,
-        },
+        inverse: Boolean,
         progress: J({
             /**
              * Sets the color context of the progress bar to one of CoreUI’s themed colors
              *
              * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
              */
-            color: Color,
+            color: Color$1,
             /**
              * The percent to progress the ProgressBar (out of 100).
              */
@@ -16349,18 +15742,13 @@ const CWidgetStatsC = defineComponent({
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        title: String,
         /**
          * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
          */
         value: {
             type: [Number, String],
-            default: 0,
-            require: false,
+            default: 0
         },
     },
     /**
@@ -16420,14 +15808,13 @@ const CWidgetStatsD = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Values and titles for your component.
          */
         values: {
             type: Array,
             default: () => [],
-            require: false,
         },
     },
     /**
@@ -16476,18 +15863,13 @@ const CWidgetStatsE = defineComponent({
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        title: String,
         /**
          * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
          */
         value: {
             type: [Number, String],
-            default: 0,
-            require: false,
+            default: 0
         },
     },
     /**
@@ -16525,7 +15907,7 @@ const CWidgetStatsF = defineComponent({
          *
          * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
          */
-        color: Color,
+        color: Color$1,
         /**
          * Set padding of your component.
          */
@@ -16536,26 +15918,17 @@ const CWidgetStatsF = defineComponent({
         /**
          * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
          */
-        title: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        title: String,
         /**
          * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
          */
-        text: {
-            type: String,
-            default: undefined,
-            require: false,
-        },
+        text: String,
         /**
          * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
          */
         value: {
             type: [Number, String],
-            default: 0,
-            require: false,
+            default: 0
         },
     },
     /**