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

package/src/components/link/CLink.ts

@@ -6,33 +6,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: [
     /**

package/src/components/link/__tests__/__snapshots__/CLink.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CLink component renders correctly 1`] = `"<div class=\\"active disabled\\" aria-current=\\"page\\" href=\\"/bazinga\\">Default slot</div>"`;
+exports[`Customize CLink component renders correctly 1`] = `"<div class="active disabled" aria-current="page" href="/bazinga">Default slot</div>"`;
 
-exports[`Loads and display CLink component renders correctly 1`] = `"<a class=\\"disabled\\" aria-disabled=\\"true\\" tabindex=\\"-1\\">Default slot</a>"`;
+exports[`Loads and display CLink component renders correctly 1`] = `"<a class="disabled" aria-disabled="true" tabindex="-1">Default slot</a>"`;

package/src/components/list-group/CListGroup.ts

@@ -8,16 +8,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.
      *
@@ -25,8 +21,6 @@ const CListGroup = defineComponent({
      */
     layout: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return [
           'horizontal',

package/src/components/list-group/CListGroupItem.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CListGroupItem = defineComponent({
   name: 'CListGroupItem',
@@ -8,10 +8,7 @@ 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.
      *
@@ -21,16 +18,12 @@ const CListGroupItem = defineComponent({
     /**
      * 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',
     },
   },

package/src/components/list-group/__tests__/__snapshots__/CListGroup.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CListGroup component renders correctly 1`] = `"<div class=\\"list-group list-group-flush list-group-horizontal-lg\\">Default slot</div>"`;
+exports[`Customize CListGroup component renders correctly 1`] = `"<div class="list-group list-group-flush list-group-horizontal-lg">Default slot</div>"`;
 
-exports[`Loads and display CListGroup component renders correctly 1`] = `"<ul class=\\"list-group\\">Default slot</ul>"`;
+exports[`Loads and display CListGroup component renders correctly 1`] = `"<ul class="list-group">Default slot</ul>"`;

package/src/components/list-group/__tests__/__snapshots__/CListGroupItem.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CListGroupItem component renders correctly 1`] = `"<button class=\\"list-group-item list-group-item-action active disabled\\" active=\\"true\\" disabled=\\"\\" aria-current=\\"true\\" aria-disabled=\\"true\\">Default slot</button>"`;
+exports[`Customize (two) CListGroupItem component renders correctly 1`] = `"<button class="list-group-item list-group-item-action active disabled" active="true" disabled="" aria-current="true" aria-disabled="true">Default slot</button>"`;
 
-exports[`Customize CListGroupItem component renders correctly 1`] = `"<div class=\\"list-group-item list-group-item-warning active disabled\\" aria-current=\\"true\\" aria-disabled=\\"true\\">Default slot</div>"`;
+exports[`Customize CListGroupItem component renders correctly 1`] = `"<div class="list-group-item list-group-item-warning active disabled" aria-current="true" aria-disabled="true">Default slot</div>"`;
 
-exports[`Loads and display CListGroupItem component renders correctly 1`] = `"<li class=\\"list-group-item\\">Default slot</li>"`;
+exports[`Loads and display CListGroupItem component renders correctly 1`] = `"<li class="list-group-item">Default slot</li>"`;

package/src/components/modal/CModal.ts

@@ -10,9 +10,9 @@ import {
   withDirectives,
 } from 'vue'
 
-import { CBackdrop } from './../backdrop/CBackdrop'
+import { CBackdrop } from '../backdrop/CBackdrop'
 
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CModal = defineComponent({
   name: 'CModal',
@@ -50,10 +50,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
      *
@@ -61,7 +58,6 @@ const CModal = defineComponent({
      */
     fullscreen: {
       type: [Boolean, String],
-      default: undefined,
       validator: (value: boolean | string) => {
         if (typeof value == 'string') {
           return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
@@ -82,9 +78,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.
      *
@@ -92,7 +86,6 @@ const CModal = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
       validator: (value: string) => {
         return ['sm', 'lg', 'xl'].includes(value)
       },

package/src/components/modal/CModalHeader.ts

@@ -10,7 +10,6 @@ const CModalHeader = defineComponent({
      */
     closeButton: {
       type: Boolean,
-      required: false,
       default: true,
     },
   },

package/src/components/modal/CModalTitle.ts

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

package/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap

@@ -1,24 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CModal component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"modal\\">
-    <div class=\\"modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg\\" role=\\"dialog\\">
-      <div class=\\"modal-content bazinga\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="modal">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg" role="dialog">
+      <div class="modal-content bazinga">Default slot</div>
     </div>
   </div>
 </transition-stub>"
 `;
 
 exports[`Loads and display CModal component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"modal fade\\">
-    <div class=\\"modal-dialog modal-fullscreen\\" role=\\"dialog\\">
-      <div class=\\"modal-content\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="modal fade">
+    <div class="modal-dialog modal-fullscreen" role="dialog">
+      <div class="modal-content">Default slot</div>
     </div>
   </div>
 </transition-stub>
-<transition-stub class=\\"modal-backdrop\\">
-  <div class=\\"fade\\"></div>
+<transition-stub appear="false" persisted="false" css="true" class="modal-backdrop">
+  <div class="fade"></div>
 </transition-stub>"
 `;

package/src/components/modal/__tests__/__snapshots__/CModalBody.spec.ts.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalFooter.spec.ts.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalHeader.spec.ts.snap

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

package/src/components/modal/__tests__/__snapshots__/CModalTitle.spec.ts.snap

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

package/src/components/nav/CNav.ts

@@ -8,7 +8,6 @@ const CNav = defineComponent({
      */
     component: {
       type: String,
-      required: false,
       default: 'ul',
     },
     /**
@@ -18,8 +17,6 @@ const CNav = defineComponent({
      */
     layout: {
       type: String,
-      required: false,
-      default: undefined,
       validator: (value: string) => {
         return ['fill', 'justified'].includes(value)
       },
@@ -31,8 +28,6 @@ const CNav = defineComponent({
      */
     variant: {
       type: String,
-      required: false,
-      default: undefined,
       validator: (value: string) => {
         return ['tabs', 'pills', 'underline'].includes(value)
       },

package/src/components/nav/CNavGroup.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, onMounted, ref, RendererElement, Transition, watch } from 'vue'
 
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CNavGroup = defineComponent({
   name: 'CNavGroup',

package/src/components/nav/CNavLink.ts

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

package/src/components/nav/__tests__/__snapshots__/CNav.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CNav component renders correctly 1`] = `"<div class=\\"nav nav-fill nav-pills\\" role=\\"navigation\\">Default slot</div>"`;
+exports[`Customize CNav component renders correctly 1`] = `"<div class="nav nav-fill nav-pills" role="navigation">Default slot</div>"`;
 
-exports[`Loads and display CNav component renders correctly 1`] = `"<ul class=\\"nav\\" role=\\"navigation\\">Default slot</ul>"`;
+exports[`Loads and display CNav component renders correctly 1`] = `"<ul class="nav" role="navigation">Default slot</ul>"`;

package/src/components/nav/__tests__/__snapshots__/CNavGroup.spec.ts.snap

@@ -1,17 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavGroup component renders correctly 1`] = `
-"<li class=\\"nav-group show\\"><a class=\\"nav-link nav-group-toggle\\">togglerContent</a>
-  <transition-stub>
-    <ul class=\\"nav-group-items compact\\"></ul>
+"<li class="nav-group show"><a class="nav-link nav-group-toggle">togglerContent</a>
+  <transition-stub appear="false" persisted="false" css="false">
+    <ul class="nav-group-items compact"></ul>
   </transition-stub>
 </li>"
 `;
 
 exports[`Loads and display CNavGroup component renders correctly 1`] = `
-"<li class=\\"nav-group\\">
+"<li class="nav-group">
   <!---->
-  <transition-stub>
+  <transition-stub appear="false" persisted="false" css="false">
     <!---->
   </transition-stub>
 </li>"

package/src/components/nav/__tests__/__snapshots__/CNavGroupItems.spec.ts.snap

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

package/src/components/nav/__tests__/__snapshots__/CNavItem.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavItem component renders correctly 1`] = `
-"<li class=\\"nav-item\\">
-  <div class=\\"active disabled nav-link\\" aria-current=\\"page\\" href=\\"/bazinga\\">Default slot</div>
+"<li class="nav-item">
+  <div class="active disabled nav-link" aria-current="page" href="/bazinga">Default slot</div>
 </li>"
 `;
 
-exports[`Loads and display CNavItem component renders correctly 1`] = `"<li class=\\"nav-item\\">Default slot</li>"`;
+exports[`Loads and display CNavItem component renders correctly 1`] = `"<li class="nav-item">Default slot</li>"`;

package/src/components/nav/__tests__/__snapshots__/CNavLink.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CNavLink component renders correctly 1`] = `"<div class=\\"active disabled nav-link\\" aria-current=\\"page\\" href=\\"/bazinga\\">Default slot</div>"`;
+exports[`Customize CNavLink component renders correctly 1`] = `"<div class="active disabled nav-link" aria-current="page" href="/bazinga">Default slot</div>"`;
 
-exports[`Loads and display CNavLink component renders correctly 1`] = `"<a class=\\"nav-link\\">Default slot</a>"`;
+exports[`Loads and display CNavLink component renders correctly 1`] = `"<a class="nav-link">Default slot</a>"`;

package/src/components/nav/__tests__/__snapshots__/CNavTitle.spec.ts.snap

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

package/src/components/navbar/CNavbar.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CNavbar = defineComponent({
   name: 'CNavbar',
@@ -18,8 +18,6 @@ const CNavbar = defineComponent({
      */
     colorScheme: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['dark', 'light'].includes(value)
       },
@@ -30,7 +28,6 @@ const CNavbar = defineComponent({
     component: {
       type: String,
       default: 'nav',
-      required: false,
     },
     /**
      * Defines optional container wrapping children elements.
@@ -39,8 +36,6 @@ const CNavbar = defineComponent({
      */
     container: {
       type: [Boolean, String],
-      default: undefined,
-      required: false,
       validator: (value: boolean | string) => {
         return (
           typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl', 'fluid'].includes(value)
@@ -54,8 +49,6 @@ const CNavbar = defineComponent({
      */
     expand: {
       type: [Boolean, String],
-      default: undefined,
-      required: false,
       validator: (value: boolean | string) => {
         return typeof value === 'boolean' || ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
       },
@@ -67,8 +60,6 @@ const CNavbar = defineComponent({
      */
     placement: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['fixed-top', 'fixed-bottom', 'sticky-top'].includes(value)
       },

package/src/components/navbar/CNavbarBrand.ts

@@ -10,16 +10,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 () =>

package/src/components/navbar/CNavbarNav.ts

@@ -8,7 +8,6 @@ const CNavbarNav = defineComponent({
      */
     component: {
       type: String,
-      required: false,
       default: 'ul',
     },
   },

package/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavbar component renders correctly 1`] = `
-"<div class=\\"navbar bg-warning navbar-light navbar-expand-xl fixed-bottom\\">
-  <div class=\\"container-lg\\">Default slot</div>
+"<div class="navbar bg-warning navbar-light navbar-expand-xl fixed-bottom">
+  <div class="container-lg">Default slot</div>
 </div>"
 `;
 
-exports[`Loads and display CNavbar component renders correctly 1`] = `"<nav class=\\"navbar\\">Default slot</nav>"`;
+exports[`Loads and display CNavbar component renders correctly 1`] = `"<nav class="navbar">Default slot</nav>"`;

package/src/components/navbar/__tests__/__snapshots__/CNavbarBrand.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CNavbarBrand component renders correctly 1`] = `"<a class=\\"navbar-brand\\" href=\\"/bazinga\\">Default slot</a>"`;
+exports[`Customize (two) CNavbarBrand component renders correctly 1`] = `"<a class="navbar-brand" href="/bazinga">Default slot</a>"`;
 
-exports[`Customize CNavbarBrand component renders correctly 1`] = `"<div class=\\"navbar-brand\\" href=\\"/bazinga\\">Default slot</div>"`;
+exports[`Customize CNavbarBrand component renders correctly 1`] = `"<div class="navbar-brand" href="/bazinga">Default slot</div>"`;
 
-exports[`Loads and display CNavbarBrand component renders correctly 1`] = `"<a class=\\"navbar-brand\\">Default slot</a>"`;
+exports[`Loads and display CNavbarBrand component renders correctly 1`] = `"<a class="navbar-brand">Default slot</a>"`;

package/src/components/navbar/__tests__/__snapshots__/CNavbarNav.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CNavbarNav component renders correctly 1`] = `"<div class=\\"navbar-nav\\" role=\\"navigation\\">Default slot</div>"`;
+exports[`Customize CNavbarNav component renders correctly 1`] = `"<div class="navbar-nav" role="navigation">Default slot</div>"`;
 
-exports[`Loads and display CNavbarNav component renders correctly 1`] = `"<ul class=\\"navbar-nav\\" role=\\"navigation\\">Default slot</ul>"`;
+exports[`Loads and display CNavbarNav component renders correctly 1`] = `"<ul class="navbar-nav" role="navigation">Default slot</ul>"`;

package/src/components/navbar/__tests__/__snapshots__/CNavbarText.spec.ts.snap

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

package/src/components/navbar/__tests__/__snapshots__/CNavbarToggler.spec.ts.snap

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

package/src/components/offcanvas/COffcanvas.ts

@@ -3,7 +3,7 @@ import { defineComponent, h, ref, RendererElement, Transition, watch, withDirect
 import { CBackdrop } from '../backdrop'
 
 import { vVisible } from '../../directives/v-c-visible'
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
@@ -40,7 +40,6 @@ const COffcanvas = defineComponent({
      */
     placement: {
       type: String,
-      default: undefined,
       require: true,
       validator: (value: string) => {
         return ['start', 'end', 'top', 'bottom'].includes(value)
@@ -72,10 +71,14 @@ const COffcanvas = defineComponent({
       type: Boolean,
       default: false,
     },
+
     /**
      * Toggle the visibility of offcanvas component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     /**
@@ -98,12 +101,12 @@ const COffcanvas = defineComponent({
       },
     )
 
+
     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
       }
 

package/src/components/offcanvas/COffcanvasTitle.ts

@@ -8,7 +8,6 @@ const COffcanvasTitle = defineComponent({
      */
     component: {
       type: String,
-      required: false,
       default: 'h5',
     },
   },

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -1,19 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize COffcanvas component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"offcanvas offcanvas-bottom\\" role=\\"dialog\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="offcanvas offcanvas-bottom" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"offcanvas-backdrop\\">
-  <div class=\\"fade\\"></div>
+<transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
+  <div class="fade"></div>
 </transition-stub>"
 `;
 
 exports[`Loads and display COffcanvas component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"offcanvas offcanvas-end\\" role=\\"dialog\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="false">
+  <div class="offcanvas offcanvas-end" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
-<transition-stub class=\\"offcanvas-backdrop\\">
-  <div class=\\"fade\\"></div>
+<transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
+  <div class="fade"></div>
 </transition-stub>"
 `;