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

package/src/components/form/CFormTextarea.ts

@@ -7,47 +7,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.
      */
@@ -57,36 +45,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.
      *

package/src/components/form/CInputGroup.ts

@@ -10,8 +10,6 @@ const CInputGroup = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['sm', 'lg'].includes(value)
       },

package/src/components/form/CInputGroupText.ts

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

package/src/components/form/__tests__/__snapshots__/CForm.spec.ts.snap

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

package/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize with label - CFormCheck component renders correctly 1`] = `
-"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\">
-<label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" disabled=\\"false\\" for=\\"uniqueid\\">some label</label>"
+"<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
+<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
 `;
 
 exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `
-"<input class=\\"btn-check is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"checkbox\\">
-<label class=\\"btn btn-outline-warning btn-lg rounded-circle\\" disabled=\\"false\\" for=\\"uniqueid\\">some label</label>"
+"<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
+<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
 `;
 
-exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class=\\"form-check-input\\" type=\\"checkbox\\">"`;
+exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class="form-check-input" type="checkbox">"`;

package/src/components/form/__tests__/__snapshots__/CFormFeedback.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CFormFeedback component renders correctly 1`] = `"<h2 class=\\"invalid-feedback valid-feedback\\">Default slot</h2>"`;
+exports[`Customize (two) CFormFeedback component renders correctly 1`] = `"<h2 class="invalid-feedback valid-feedback">Default slot</h2>"`;
 
-exports[`Customize CFormFeedback component renders correctly 1`] = `"<h2 class=\\"invalid-tooltip valid-tooltip\\">Default slot</h2>"`;
+exports[`Customize CFormFeedback component renders correctly 1`] = `"<h2 class="invalid-tooltip valid-tooltip">Default slot</h2>"`;
 
-exports[`Loads and display CFormFeedback component renders correctly 1`] = `"<div class=\\"\\">Default slot</div>"`;
+exports[`Loads and display CFormFeedback component renders correctly 1`] = `"<div class="">Default slot</div>"`;

package/src/components/form/__tests__/__snapshots__/CFormFloating.spec.ts.snap

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

package/src/components/form/__tests__/__snapshots__/CFormInput.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input class=\\"form-control form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
+exports[`Customize (two) CFormInput component renders correctly 1`] = `"<input class="form-control form-control-color form-control-lg is-invalid is-valid" disabled="" readonly="" type="color">"`;
 
-exports[`Customize CFormInput component renders correctly 1`] = `"<input class=\\"form-control-plaintext form-control-color form-control-lg is-invalid is-valid\\" disabled=\\"\\" readonly=\\"\\" type=\\"color\\">"`;
+exports[`Customize CFormInput component renders correctly 1`] = `"<input class="form-control-plaintext form-control-color form-control-lg is-invalid is-valid" disabled="" readonly="" type="color">"`;
 
-exports[`Loads and display CFormInput component renders correctly 1`] = `"<input class=\\"form-control\\" type=\\"text\\">"`;
+exports[`Loads and display CFormInput component renders correctly 1`] = `"<input class="form-control" type="text">"`;

package/src/components/form/__tests__/__snapshots__/CFormLabel.spec.ts.snap

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

package/src/components/form/__tests__/__snapshots__/CFormRange.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" disabled=\\"\\" max=\\"400\\" min=\\"50\\" readonly=\\"\\" steps=\\"10\\" type=\\"range\\">"`;
+exports[`Customize CFormRange component renders correctly 1`] = `"<input class="form-range" disabled="" max="400" min="50" readonly="" steps="10" type="range">"`;
 
-exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class=\\"form-range\\" type=\\"range\\">"`;
+exports[`Loads and display CFormRange component renders correctly 1`] = `"<input class="form-range" type="range">"`;

package/src/components/form/__tests__/__snapshots__/CFormSelect.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormSelect component renders correctly 1`] = `"<select class=\\"form-select form-select-lg is-invalid is-valid\\" size=\\"200\\">Default slot</select>"`;
+exports[`Customize CFormSelect component renders correctly 1`] = `"<select class="form-select form-select-lg is-invalid is-valid" size="200">Default slot</select>"`;
 
-exports[`Loads and display CFormSelect component renders correctly 1`] = `"<select class=\\"form-select\\">Default slot</select>"`;
+exports[`Loads and display CFormSelect component renders correctly 1`] = `"<select class="form-select">Default slot</select>"`;

package/src/components/form/__tests__/__snapshots__/CFormSwitch.spec.ts.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormSwitch component renders correctly 1`] = `"<div class=\\"form-check form-switch form-switch-lg is-invalid is-valid\\"><input class=\\"form-check-input is-invalid is-valid\\" id=\\"uniqueid\\" type=\\"radio\\"><label class=\\"form-label form-check-label\\" for=\\"uniqueid\\">some label</label></div>"`;
+exports[`Customize CFormSwitch component renders correctly 1`] = `"<div class="form-check form-switch form-switch-lg is-invalid is-valid"><input class="form-check-input is-invalid is-valid" id="uniqueid" type="radio"><label class="form-label form-check-label" for="uniqueid">some label</label></div>"`;
 
 exports[`Loads and display CFormSwitch component renders correctly 1`] = `
-"<div class=\\"form-check form-switch\\"><input class=\\"form-check-input\\" type=\\"checkbox\\">
+"<div class="form-check form-switch"><input class="form-check-input" type="checkbox">
   <!---->
 </div>"
 `;

package/src/components/form/__tests__/__snapshots__/CFormText.spec.ts.snap

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

package/src/components/form/__tests__/__snapshots__/CFormTextarea.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CFormTextarea component renders correctly 1`] = `"<textarea disabled=\\"\\" readonly=\\"\\" class=\\"form-control-plaintext is-invalid is-valid\\">Default slot</textarea>"`;
+exports[`Customize CFormTextarea component renders correctly 1`] = `"<textarea disabled="" readonly="" class="form-control-plaintext is-invalid is-valid">Default slot</textarea>"`;
 
-exports[`Loads and display CFormTextarea component renders correctly 1`] = `"<textarea class=\\"form-control\\">Default slot</textarea>"`;
+exports[`Loads and display CFormTextarea component renders correctly 1`] = `"<textarea class="form-control">Default slot</textarea>"`;

package/src/components/form/__tests__/__snapshots__/CInputGroup.spec.ts.snap

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

package/src/components/form/__tests__/__snapshots__/CInputGroupText.spec.ts.snap

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

package/src/components/grid/CCol.ts

@@ -29,8 +29,6 @@ const CCol = defineComponent({
      */
     xs: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
     /**
      * The number of columns/offset/order on small devices (<768px).
@@ -39,8 +37,6 @@ const CCol = defineComponent({
      */
     sm: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
     /**
      * The number of columns/offset/order on medium devices (<992px).
@@ -49,8 +45,6 @@ const CCol = defineComponent({
      */
     md: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
     /**
      * The number of columns/offset/order on large devices (<1200px).
@@ -59,8 +53,6 @@ const CCol = defineComponent({
      */
     lg: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
     /**
      * The number of columns/offset/order on X-Large devices (<1400px).
@@ -69,8 +61,6 @@ const CCol = defineComponent({
      */
     xl: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
     /**
      * The number of columns/offset/order on XX-Large devices (≥1400px).
@@ -79,8 +69,6 @@ const CCol = defineComponent({
      */
     xxl: {
       type: [Boolean, Number, String, Object] as PropType<Col>,
-      default: undefined,
-      require: false,
     },
   },
   setup(props, { slots }) {

package/src/components/grid/CContainer.ts

@@ -15,45 +15,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: string[] = []

package/src/components/grid/CRow.ts

@@ -24,61 +24,37 @@ const CRow = defineComponent({
      *
      * @values { cols: 'auto' | number | string } | { gutter: number | string } | { gutterX: number | string } | { gutterY: number | string }
      */
-    xs: {
-      type: Object as () => BPObject,
-      default: undefined,
-      required: false,
-    },
+    xs: Object as () => BPObject,
     /**
      * 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 as () => BPObject,
-      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 as () => BPObject,
-      default: undefined,
-      required: false,
-    },
+    sm: Object as () => BPObject,
+    /**
+     * 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 as () => BPObject,
     /**
      * 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 as () => BPObject,
-      default: undefined,
-      required: false,
-    },
+    lg: Object as () => BPObject,
     /**
      * 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 as () => BPObject,
-      default: undefined,
-      required: false,
-    },
+    xl: Object as () => BPObject,
     /**
      * 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 as () => BPObject,
-      default: undefined,
-      required: false,
-    },
+    xxl: Object as () => BPObject,
   },
   setup(props, { slots }) {
     const repsonsiveClassNames: string[] = []

package/src/components/grid/__tests__/__snapshots__/CCol.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CCol component renders correctly 1`] = `"<div class=\\"col-xl col-lg-4 col-md-auto order-md-last offset-md-3\\">Default slot</div>"`;
+exports[`Customize CCol component renders correctly 1`] = `"<div class="col-xl col-lg-4 col-md-auto order-md-last offset-md-3">Default slot</div>"`;
 
-exports[`Loads and display CCol component renders correctly 1`] = `"<div class=\\"col\\">Default slot</div>"`;
+exports[`Loads and display CCol component renders correctly 1`] = `"<div class="col">Default slot</div>"`;

package/src/components/grid/__tests__/__snapshots__/CContainer.spec.ts.snap

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

package/src/components/grid/__tests__/__snapshots__/CRow.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CRow component renders correctly 1`] = `"<div class=\\"row row-cols-md-4 g-md-10 gx-md-11 gy-md-12\\">Default slot</div>"`;
+exports[`Customize CRow component renders correctly 1`] = `"<div class="row row-cols-md-4 g-md-10 gx-md-11 gy-md-12">Default slot</div>"`;
 
-exports[`Loads and display CRow component renders correctly 1`] = `"<div class=\\"row\\">Default slot</div>"`;
+exports[`Loads and display CRow component renders correctly 1`] = `"<div class="row">Default slot</div>"`;

package/src/components/header/CHeader.ts

@@ -10,8 +10,6 @@ const CHeader = 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)
@@ -25,8 +23,6 @@ const CHeader = defineComponent({
      */
     position: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['fixed', 'sticky'].includes(value)
       },

package/src/components/header/CHeaderBrand.ts

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

package/src/components/header/CHeaderNav.ts

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

package/src/components/header/__tests__/__snapshots__/CHeader.spec.ts.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderBrand.spec.ts.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderDivider.spec.ts.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderNav.spec.ts.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderText.spec.ts.snap

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

package/src/components/header/__tests__/__snapshots__/CHeaderToggler.spec.ts.snap

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

package/src/components/image/CImage.ts

@@ -10,8 +10,6 @@ const CImage = defineComponent({
      */
     align: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['start', 'center', 'end'].includes(value)
       },
@@ -19,24 +17,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 () =>

package/src/components/image/__tests__/__snapshots__/CImage.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (two) CImage component renders correctly 1`] = `"<img class=\\"d-block mx-auto\\">"`;
+exports[`Customize (two) CImage component renders correctly 1`] = `"<img class="d-block mx-auto">"`;
 
-exports[`Customize CImage component renders correctly 1`] = `"<img class=\\"float-end img-fluid rounded img-thumbnail\\">"`;
+exports[`Customize CImage component renders correctly 1`] = `"<img class="float-end img-fluid rounded img-thumbnail">"`;
 
-exports[`Loads and display CImage component renders correctly 1`] = `"<img class=\\"\\">"`;
+exports[`Loads and display CImage component renders correctly 1`] = `"<img class="">"`;