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

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

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

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

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

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

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

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CDropdownMenu component renders correctly 1`] = `
-"<ul class=\\"dropdown-menu dropdown-menu-dark show dropdown-menu-lg-end\\" data-coreui-popper=\\"static\\">
+"<ul class="dropdown-menu dropdown-menu-dark show dropdown-menu-lg-end" data-coreui-popper="static">
   <li>Default slot</li>
 </ul>"
 `;
 
-exports[`Loads and display CDropdownMenu component renders correctly 1`] = `"<div class=\\"dropdown-menu dropdown-menu-lg-end\\" data-coreui-popper=\\"static\\">Default slot</div>"`;
+exports[`Loads and display CDropdownMenu component renders correctly 1`] = `"<div class="dropdown-menu dropdown-menu-lg-end" data-coreui-popper="static">Default slot</div>"`;

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

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active=\\"true\\" class=\\"nav-link dropdown-toggle-split active disabled show\\" disabled=\\"true\\" href=\\"#\\">Default slot</a>"`;
+exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active="true" class="nav-link dropdown-toggle-split active disabled show" disabled="true" href="#">Default slot</a>"`;
 
-exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class=\\"btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show\\" disabled=\\"\\" type=\\"button\\"><span class=\\"visually-hidden\\">Toggle Dropdown</span></button>"`;
+exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show" disabled="" type="button"><span class="visually-hidden">Toggle Dropdown</span></button>"`;

package/src/components/footer/CFooter.ts

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

package/src/components/footer/__tests__/__snapshots__/CFooter.spec.ts.snap

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

package/src/components/form/CForm.ts

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

package/src/components/form/CFormCheck.ts

@@ -13,33 +13,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.
      */
@@ -53,9 +45,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
      */
@@ -63,9 +53,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.
      */
@@ -73,9 +61,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.
      */
@@ -83,6 +69,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.
      *
@@ -101,9 +93,7 @@ const CFormCheck = defineComponent({
     /**
      * Set component validation state to valid.
      */
-    valid: {
-      type: Boolean,
-    },
+    valid: Boolean,
   },
   emits: [
     /**
@@ -126,6 +116,7 @@ const CFormCheck = defineComponent({
       'form-check',
       {
         'form-check-inline': props.inline,
+        'form-check-reverse': props.reverse,
         'is-invalid': props.invalid,
         'is-valid': props.valid,
       },

package/src/components/form/CFormControlValidation.ts

@@ -8,33 +8,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.
      */

package/src/components/form/CFormControlWrapper.ts

@@ -14,31 +14,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 = () =>

package/src/components/form/CFormFeedback.ts

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

package/src/components/form/CFormInput.ts

@@ -9,10 +9,7 @@ const CFormInput = defineComponent({
     /**
      * Toggle the disabled state for the component.
      */
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
+    disabled: Boolean,
 
     // Inherited Props from CFormControlWrapper
     /**
@@ -20,39 +17,29 @@ const CFormInput = 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,
     /**
      * 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.
      */
@@ -62,30 +49,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.
      *
@@ -102,9 +78,7 @@ const CFormInput = defineComponent({
      *
      * @since 4.3.0
      */
-    text: {
-      type: String,
-    },
+    text: String,
     /**
      * Display validation feedback in a styled tooltip.
      *

package/src/components/form/CFormLabel.ts

@@ -6,11 +6,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 () =>

package/src/components/form/CFormRange.ts

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

package/src/components/form/CFormSelect.ts

@@ -16,47 +16,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.
      */
@@ -66,32 +52,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] as PropType<string | string[]>,
-      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 as PropType<Option[] | string[]>,
-      default: undefined,
-      required: false,
-    },
+    options: Array as PropType<Option[] | string[]>,
     /**
      * Size the component small or large.
      *
@@ -99,8 +74,6 @@ const CFormSelect = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return ['sm', 'lg'].includes(value)
       },
@@ -110,9 +83,7 @@ const CFormSelect = defineComponent({
      *
      * @since 4.3.0
      */
-    text: {
-      type: String,
-    },
+    text: String,
     /**
      * Display validation feedback in a styled tooltip.
      *

package/src/components/form/CFormSwitch.ts

@@ -9,28 +9,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`.
      *
@@ -54,9 +51,7 @@ const CFormSwitch = defineComponent({
     /**
      * Set component validation state to valid.
      */
-    valid: {
-      type: Boolean,
-    },
+    valid: Boolean,
   },
   emits: [
     /**
@@ -82,6 +77,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,

package/src/components/form/CFormText.ts

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