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

package/src/components/card/__tests__/__snapshots__/CCard.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCard component renders correctly 1`] = `"<div class=\\"card bg-warning text-info\\">Default slot</div>"`;
+exports[`Customize CCard component renders correctly 1`] = `"<div class="card bg-warning text-info">Default slot</div>"`;
 
-exports[`Loads and display CCard component renders correctly 1`] = `"<div class=\\"card\\">Default slot</div>"`;
+exports[`Loads and display CCard component renders correctly 1`] = `"<div class="card">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardBody.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCardBody component renders correctly 1`] = `"<div class=\\"card-body\\">Default slot</div>"`;
+exports[`Loads and display CCardBody component renders correctly 1`] = `"<div class="card-body">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardFooter.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCardFooter component renders correctly 1`] = `"<div class=\\"card-footer\\">Default slot</div>"`;
+exports[`Loads and display CCardFooter component renders correctly 1`] = `"<div class="card-footer">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardGroup.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCardGroup component renders correctly 1`] = `"<div class=\\"card-group\\">Default slot</div>"`;
+exports[`Loads and display CCardGroup component renders correctly 1`] = `"<div class="card-group">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardHeader.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCardHeader component renders correctly 1`] = `"<span class=\\"card-header\\">Default slot</span>"`;
+exports[`Customize CCardHeader component renders correctly 1`] = `"<span class="card-header">Default slot</span>"`;
 
-exports[`Loads and display CCardHeader component renders correctly 1`] = `"<div class=\\"card-header\\">Default slot</div>"`;
+exports[`Loads and display CCardHeader component renders correctly 1`] = `"<div class="card-header">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardImage.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCardImage component renders correctly 1`] = `"<a class=\\"card-img-bottom\\">Default slot</a>"`;
+exports[`Customize CCardImage component renders correctly 1`] = `"<a class="card-img-bottom">Default slot</a>"`;
 
-exports[`Loads and display CCardImage component renders correctly 1`] = `"<img class=\\"card-img\\">"`;
+exports[`Loads and display CCardImage component renders correctly 1`] = `"<img class="card-img">"`;

package/src/components/card/__tests__/__snapshots__/CCardImageOverlay.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCardImageOverlay component renders correctly 1`] = `"<div class=\\"card-img-overlay\\">Default slot</div>"`;
+exports[`Loads and display CCardImageOverlay component renders correctly 1`] = `"<div class="card-img-overlay">Default slot</div>"`;

package/src/components/card/__tests__/__snapshots__/CCardLink.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCardLink component renders correctly 1`] = `"<a class=\\"card-link\\" href=\\"/bazinga\\">Default slot</a>"`;
+exports[`Loads and display CCardLink component renders correctly 1`] = `"<a class="card-link" href="/bazinga">Default slot</a>"`;

package/src/components/card/__tests__/__snapshots__/CCardSubtitle.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCardSubtitle component renders correctly 1`] = `"<h4 class=\\"card-subtitle\\">Default slot</h4>"`;
+exports[`Customize CCardSubtitle component renders correctly 1`] = `"<h4 class="card-subtitle">Default slot</h4>"`;
 
-exports[`Loads and display CCardSubtitle component renders correctly 1`] = `"<h6 class=\\"card-subtitle\\">Default slot</h6>"`;
+exports[`Loads and display CCardSubtitle component renders correctly 1`] = `"<h6 class="card-subtitle">Default slot</h6>"`;

package/src/components/card/__tests__/__snapshots__/CCardText.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCardText component renders correctly 1`] = `"<h4 class=\\"card-text\\">Default slot</h4>"`;
+exports[`Customize CCardText component renders correctly 1`] = `"<h4 class="card-text">Default slot</h4>"`;
 
-exports[`Loads and display CCardText component renders correctly 1`] = `"<p class=\\"card-text\\">Default slot</p>"`;
+exports[`Loads and display CCardText component renders correctly 1`] = `"<p class="card-text">Default slot</p>"`;

package/src/components/card/__tests__/__snapshots__/CCardTitle.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCardTitle component renders correctly 1`] = `"<h2 class=\\"card-title\\">Default slot</h2>"`;
+exports[`Customize CCardTitle component renders correctly 1`] = `"<h2 class="card-title">Default slot</h2>"`;
 
-exports[`Loads and display CCardTitle component renders correctly 1`] = `"<h5 class=\\"card-title\\">Default slot</h5>"`;
+exports[`Loads and display CCardTitle component renders correctly 1`] = `"<h5 class="card-title">Default slot</h5>"`;

package/src/components/carousel/CCarousel.ts

@@ -1,7 +1,6 @@
 import {
   defineComponent,
   h,
-  reactive,
   ref,
   VNode,
   onBeforeMount,
@@ -11,7 +10,7 @@ import {
   watch,
 } from 'vue'
 
-import { isInViewport } from './../../utils'
+import { isInViewport } from '../../utils'
 
 const CCarousel = defineComponent({
   name: 'CCarousel',
@@ -30,7 +29,6 @@ const CCarousel = defineComponent({
     index: {
       type: Number,
       default: 0,
-      required: false,
     },
     /**
      * Adding indicators at the bottom of the carousel for each item.
@@ -42,7 +40,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.
@@ -50,7 +47,6 @@ const CCarousel = defineComponent({
     pause: {
       type: [Boolean, String],
       default: 'hover',
-      required: false,
       validator: (value: boolean | string) => {
         return typeof value === 'boolean' || value === 'hover'
       },
@@ -63,7 +59,6 @@ const CCarousel = defineComponent({
     transition: {
       type: String,
       default: 'slide',
-      required: false,
       validator: (value: string) => {
         return ['crossfade', 'slide'].includes(value)
       },
@@ -74,15 +69,19 @@ 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<boolean | number>(props.interval)
+    const direction = ref('next')
+    const items = ref<VNode[]>([])
+    const timeout = ref()
+    const visible = ref()
+    
     const setAnimating = (value: boolean) => {
       animating.value = value
     }
@@ -105,28 +104,15 @@ const CCarousel = defineComponent({
       }
     }
 
-    const state = reactive({
-      items: [] as VNode[],
-      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: string) => {
+    const handleControlClick = (_direction: string) => {
       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--
       }
     }
 
@@ -139,19 +125,19 @@ const CCarousel = defineComponent({
     }
 
     const handleIndicatorClick = (index: number) => {
-      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
       }
     }
 
@@ -163,6 +149,17 @@ const CCarousel = defineComponent({
       }
     }
 
+    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)
     })
@@ -174,7 +171,7 @@ const CCarousel = defineComponent({
           return
         }
 
-        if (!props.wrap && state.active < state.items.length - 1) {
+        if (!props.wrap && active.value < items.value.length - 1) {
           !animating.value && cycle()
         }
       })
@@ -204,12 +201,12 @@ const CCarousel = defineComponent({
               {
                 class: 'carousel-indicators',
               },
-              state.items.map((_, index) => {
+              items.value.map((_, index) => {
                 return h('button', {
                   type: 'button',
                   id: index,
                   'data-coreui-target': '',
-                  ...(state.active === index && { class: 'active' }),
+                  ...(active.value === index && { class: 'active' }),
                   onClick: () => handleIndicatorClick(index),
                 })
               }),
@@ -217,10 +214,10 @@ const CCarousel = defineComponent({
           h(
             'div',
             { class: 'carousel-inner' },
-            state.items.map((item, index) => {
+            items.value.map((item, index) => {
               return h(item, {
-                active: state.active === index ? true : false,
-                direction: state.direction,
+                active: active.value === index ? true : false,
+                direction: direction.value,
               })
             }),
           ),

package/src/components/carousel/CCarouselItem.ts

@@ -16,7 +16,6 @@ const CCarouselItem = defineComponent({
     direction: {
       type: String,
       default: 'next',
-      required: false,
     },
     /**
      * The amount of time to delay between automatically cycling an item.
@@ -24,7 +23,6 @@ const CCarouselItem = defineComponent({
     interval: {
       type: [Boolean, Number],
       default: false,
-      required: false,
     },
   },
   setup(props, { slots }) {

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CCarousel component renders correctly 1`] = `
-"<div class=\\"carousel slide carousel-fade carousel-dark\\">
-  <div class=\\"carousel-indicators\\"></div>
-  <div class=\\"carousel-inner\\"></div><button type=\\"button\\" class=\\"carousel-control-prev\\" data-coreui-target=\\"\\"><span class=\\"carousel-control-prev-icon\\" ariahidden=\\"true\\"></span><span class=\\"visually-hidden\\">Previous</span></button><button type=\\"button\\" class=\\"carousel-control-next\\" data-coreui-target=\\"\\"><span class=\\"carousel-control-next-icon\\" ariahidden=\\"true\\"></span><span class=\\"visually-hidden\\">Next</span></button>
+"<div class="carousel slide carousel-fade carousel-dark">
+  <div class="carousel-indicators"></div>
+  <div class="carousel-inner"></div><button type="button" class="carousel-control-prev" data-coreui-target=""><span class="carousel-control-prev-icon" ariahidden="true"></span><span class="visually-hidden">Previous</span></button><button type="button" class="carousel-control-next" data-coreui-target=""><span class="carousel-control-next-icon" ariahidden="true"></span><span class="visually-hidden">Next</span></button>
 </div>"
 `;
 
 exports[`Loads and display CCarousel component renders correctly 1`] = `
-"<div class=\\"carousel slide\\">
+"<div class="carousel slide">
   <!---->
-  <div class=\\"carousel-inner\\"></div>
+  <div class="carousel-inner"></div>
   <!---->
 </div>"
 `;

package/src/components/carousel/__tests__/__snapshots__/CCarouselCaption.spec.ts.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loads and display CCarouselCaption component renders correctly 1`] = `"<div class=\\"carousel-caption\\">Default slot</div>"`;
+exports[`Loads and display CCarouselCaption component renders correctly 1`] = `"<div class="carousel-caption">Default slot</div>"`;

package/src/components/carousel/__tests__/__snapshots__/CCarouselItem.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCarouselItem component renders correctly 1`] = `"<div class=\\"carousel-item active\\">Default slot</div>"`;
+exports[`Customize CCarouselItem component renders correctly 1`] = `"<div class="carousel-item active">Default slot</div>"`;
 
-exports[`Loads and display CCarouselItem component renders correctly 1`] = `"<div class=\\"carousel-item\\">Default slot</div>"`;
+exports[`Loads and display CCarouselItem component renders correctly 1`] = `"<div class="carousel-item">Default slot</div>"`;

package/src/components/close-button/CCloseButton.ts

@@ -6,17 +6,11 @@ export const CCloseButton = defineComponent({
     /**
      * Toggle the disabled state for the component.
      */
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
+    disabled: Boolean,
     /**
      * Change the default color to white.
      */
-    white: {
-      type: Boolean,
-      required: false,
-    },
+    white: Boolean,
   },
   emits: [
     /**

package/src/components/close-button/__tests__/__snapshots__/CCloseButton.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCloseButton component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close btn-close-white\\" aria-label=\\"Close\\" disabled=\\"\\"></button>"`;
+exports[`Customize CCloseButton component renders correctly 1`] = `"<button type="button" class="btn btn-close btn-close-white" aria-label="Close" disabled=""></button>"`;
 
-exports[`Loads and display CCloseButton component renders correctly 1`] = `"<button type=\\"button\\" class=\\"btn btn-close\\" aria-label=\\"Close\\"></button>"`;
+exports[`Loads and display CCloseButton component renders correctly 1`] = `"<button type="button" class="btn btn-close" aria-label="Close"></button>"`;

package/src/components/collapse/CCollapse.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue'
 
 import { vVisible } from '../../directives/v-c-visible'
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CCollapse = defineComponent({
   name: 'CCollapse',
@@ -9,17 +9,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: [
     /**

package/src/components/collapse/__test__/__snapshots__/CCollapse.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CCollapse component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"collapse\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="collapse">Default slot</div>
 </transition-stub>"
 `;
 
 exports[`Loads and display CCollapse component renders correctly 2`] = `
-"<transition-stub>
-  <div class=\\"collapse show\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="collapse show">Default slot</div>
 </transition-stub>"
 `;

package/src/components/dropdown/CDropdown.ts

@@ -1,6 +1,8 @@
 import { defineComponent, h, ref, provide, watch, PropType } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
+import { Triggers } from '../../types'
+
 const CDropdown = defineComponent({
   name: 'CDropdown',
   props: {
@@ -11,8 +13,6 @@ const CDropdown = defineComponent({
      */
     alignment: {
       type: [String, Object],
-      default: undefined,
-      required: false,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       validator: (value: string | any) => {
         if (value === 'start' || value === 'end') {
@@ -57,10 +57,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.
      *
@@ -68,8 +65,6 @@ const CDropdown = defineComponent({
      */
     direction: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['center', 'dropup', 'dropup-center', 'dropend', 'dropstart'].includes(value)
       },
@@ -77,10 +72,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.
      *
@@ -89,7 +81,6 @@ const CDropdown = defineComponent({
     placement: {
       type: String as PropType<Placement>,
       default: 'bottom-start',
-      required: false,
     },
     /**
      * If you want to disable dynamic positioning set this property to `true`.
@@ -97,14 +88,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 as PropType<Triggers>,
       default: 'click',
     },
     /**
@@ -115,7 +104,6 @@ const CDropdown = defineComponent({
     variant: {
       type: String,
       default: 'btn-group',
-      required: false,
       validator: (value: string) => {
         return ['btn-group', 'dropdown', 'input-group', 'nav-item'].includes(value)
       },
@@ -123,10 +111,7 @@ const CDropdown = defineComponent({
     /**
      * Toggle the visibility of dropdown menu component.
      */
-    visible: {
-      type: Boolean,
-      required: false,
-    },
+    visible: Boolean,
   },
   emits: [
     /**

package/src/components/dropdown/CDropdownHeader.ts

@@ -9,7 +9,6 @@ const CDropdownHeader = defineComponent({
     component: {
       type: String,
       default: 'h6',
-      required: false,
     },
   },
   setup(props, { slots }) {

package/src/components/dropdown/CDropdownItem.ts

@@ -8,33 +8,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 () =>

package/src/components/dropdown/CDropdownMenu.ts

@@ -11,7 +11,6 @@ const CDropdownMenu = defineComponent({
     component: {
       type: String,
       default: 'div',
-      required: false,
     },
   },
   setup(props, { slots }) {

package/src/components/dropdown/CDropdownToggle.ts

@@ -1,7 +1,9 @@
 import { cloneVNode, defineComponent, h, inject, onMounted, PropType, Ref, ref } from 'vue'
+
 import { CButton } from '../button'
-import { Color, Shape } from '../props'
-import { Triggers } from '../Types'
+
+import { Color, Shape } from '../../props'
+import { Triggers } from '../../types'
 
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
@@ -9,11 +11,7 @@ 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.
      *
@@ -26,15 +24,13 @@ const CDropdownToggle = defineComponent({
     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.
@@ -43,10 +39,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'
      */
@@ -58,8 +51,6 @@ const CDropdownToggle = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['sm', 'lg'].includes(value)
       },
@@ -67,10 +58,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.
      *
@@ -79,7 +67,6 @@ const CDropdownToggle = defineComponent({
     trigger: {
       type: String as PropType<Triggers>,
       default: 'click',
-      required: false,
     },
     /**
      * Set the button variant to an outlined button or a ghost button.
@@ -88,8 +75,6 @@ const CDropdownToggle = defineComponent({
      */
     variant: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['ghost', 'outline'].includes(value)
       },

package/src/components/dropdown/__tests__/__snapshots__/CDropdown.spec.ts.snap

@@ -2,6 +2,6 @@
 
 exports[`Customize (variant number two) CDropdown component renders correctly 1`] = `"Default slot"`;
 
-exports[`Customize CDropdown component renders correctly 1`] = `"<div class=\\"nav-item dropdown dropend\\">Default slot</div>"`;
+exports[`Customize CDropdown component renders correctly 1`] = `"<div class="nav-item dropdown dropend">Default slot</div>"`;
 
-exports[`Loads and display CDropdown component renders correctly 1`] = `"<div class=\\"btn-group\\">Default slot</div>"`;
+exports[`Loads and display CDropdown component renders correctly 1`] = `"<div class="btn-group">Default slot</div>"`;