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

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

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

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

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

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

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

package/src/components/pagination/CPagination.ts

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

package/src/components/pagination/CPaginationItem.ts

@@ -8,33 +8,19 @@ const CPaginationItem = defineComponent({
     /**
      * Toggle the active state for the component.
      */
-    active: {
-      type: Boolean,
-      required: false,
-    },
+    active: Boolean,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    component: String,
     /**
      * Toggle the disabled state for the component.
      */
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
+    disabled: Boolean,
     /**
      * The href attribute specifies the URL of the page the link goes to.
      */
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    href: String,
   },
   setup(props, { slots }) {
     return () => {

package/src/components/pagination/__tests__/__snapshots__/CPagination.spec.ts.snap

@@ -2,12 +2,12 @@
 
 exports[`Customize CPagination component renders correctly 1`] = `
 "<nav>
-  <ul class=\\"pagination pagination-lg\\">Default slot</ul>
+  <ul class="pagination pagination-lg">Default slot</ul>
 </nav>"
 `;
 
 exports[`Loads and display CPagination component renders correctly 1`] = `
 "<nav>
-  <ul class=\\"pagination\\">Default slot</ul>
+  <ul class="pagination">Default slot</ul>
 </nav>"
 `;

package/src/components/pagination/__tests__/__snapshots__/CPaginationItem.spec.ts.snap

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

package/src/components/placeholder/CPlaceholder.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const BREAKPOINTS = [
   'xxl' as const,
@@ -21,8 +21,6 @@ export const CPlaceholder = defineComponent({
      */
     animation: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return ['glow', 'wave'].includes(value)
       },
@@ -39,7 +37,6 @@ export const CPlaceholder = defineComponent({
     component: {
       type: String,
       default: 'span',
-      required: false,
     },
     /**
      * Size the component extra small, small, or large.
@@ -48,8 +45,6 @@ export const CPlaceholder = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['xs', 'sm', 'lg'].includes(value)
       },
@@ -57,51 +52,27 @@ export const CPlaceholder = defineComponent({
     /**
      * The number of columns on extra small devices (<576px).
      */
-    xs: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    xs: Number,
     /**
      * The number of columns on small devices (<768px).
      */
-    sm: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    sm: Number,
     /**
      * The number of columns on medium devices (<992px).
      */
-    md: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    md: Number,
     /**
      * The number of columns on large devices (<1200px).
      */
-    lg: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    lg: Number,
     /**
      * The number of columns on X-Large devices (<1400px).
      */
-    xl: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    xl: Number,
     /**
      * The number of columns on XX-Large devices (≥1400px).
      */
-    xxl: {
-      type: Number,
-      default: undefined,
-      require: false,
-    },
+    xxl: Number,
   },
   setup(props, { slots }) {
     const repsonsiveClassNames: string[] = []

package/src/components/placeholder/__tests__/CPlaceholder.spec.ts

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils'
-import { CPlaceholder as Component } from './../../'
+import { CPlaceholder as Component } from '../../'
 
 const ComponentName = 'CPlaceholder'
 const wrapper = shallowMount(Component)

package/src/components/popover/CPopover.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
 import { createPopper, Placement } from '@popperjs/core'
 
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -9,18 +9,13 @@ const CPopover = defineComponent({
     /**
      * Content for your component. If you want to pass non-string value please use dedicated slot `<template #content>...</template>`
      */
-    content: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    content: String,
     /**
      * Offset of the popover relative to its target.
      */
     offset: {
       type: Array,
       default: () => [0, 8],
-      required: false,
     },
     /**
      * Describes the placement of your component after Popper.js has applied all the modifiers that may have flipped or altered the originally provided placement property.
@@ -28,7 +23,6 @@ const CPopover = defineComponent({
     placement: {
       type: String as PropType<Placement>,
       default: 'top',
-      required: false,
       validator: (value: string) => {
         return ['top', 'right', 'bottom', 'left'].includes(value)
       },
@@ -36,11 +30,7 @@ const CPopover = defineComponent({
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    title: String,
     /**
      * Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them.
      *
@@ -49,7 +39,6 @@ const CPopover = defineComponent({
     trigger: {
       type: [String, Array] as PropType<string | string[]>,
       default: 'click',
-      required: false,
       validator: (value: string | string[]) => {
         if (typeof value === 'string') {
           return ['click', 'focus', 'hover'].includes(value)

package/src/components/progress/CProgress.ts

@@ -8,11 +8,7 @@ const CProgress = defineComponent({
     /**
      * Sets the height of the component. If you set that value the inner `<CProgressBar>` will automatically resize accordingly.
      */
-    height: {
-      type: Number,
-      default: undefined,
-      required: false,
-    },
+    height: Number,
     /**
      * Makes progress bar thinner.
      */

package/src/components/progress/CProgressBar.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CProgressBar = defineComponent({
   name: 'CProgressBar',
@@ -8,10 +8,7 @@ const CProgressBar = defineComponent({
     /**
      * Use to animate the stripes right to left via CSS3 animations.
      */
-    animated: {
-      type: Boolean,
-      required: false,
-    },
+    animated: Boolean,
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -23,7 +20,6 @@ const CProgressBar = defineComponent({
      */
     value: {
       type: Number,
-      required: false,
       default: 0,
     },
     /**
@@ -33,8 +29,6 @@ const CProgressBar = defineComponent({
      */
     variant: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return value === 'striped'
       },

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgress component renders correctly 1`] = `"<div class=\\"progress progress-thin progress-white\\" style=\\"height: 100px;\\">Default slot</div>"`;
+exports[`Customize CProgress component renders correctly 1`] = `"<div class="progress progress-thin progress-white" style="height: 100px;">Default slot</div>"`;
 
-exports[`Loads and display CProgress component renders correctly 1`] = `"<div class=\\"progress\\" style=\\"\\">Default slot</div>"`;
+exports[`Loads and display CProgress component renders correctly 1`] = `"<div class="progress" style="">Default slot</div>"`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgressBar component renders correctly 1`] = `"<div class=\\"progress-bar bg-warning progress-bar-striped progress-bar-animated\\" role=\\"progressbar\\" style=\\"width: 75%;\\" aria-valuenow=\\"75\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">Default slot</div>"`;
+exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
 
-exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class=\\"progress-bar bg-undefined\\" role=\\"progressbar\\" style=\\"width: 0%;\\" aria-valuenow=\\"0\\" aria-valuemin=\\"0\\" aria-valuemax=\\"100\\">Default slot</div>"`;
+exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;

package/src/components/props.ts

@@ -1,4 +1,4 @@
-const Shape = {
+export const Shape = {
   type: String,
   validator: (value: string): boolean => {
     // The value must match one of these strings
@@ -17,14 +17,16 @@ const Shape = {
     ].includes(value)
   },
 }
-const Align = {
+
+export const Align = {
   type: String,
   validator: (value: string): boolean => {
     // The value must match one of these strings
     return ['', 'left', 'center', 'right'].includes(value)
   },
 }
-const Color = {
+
+export const Color = {
   type: String,
   validator: (value: string): boolean => {
     // The value must match one of these strings
@@ -50,7 +52,8 @@ const Color = {
     ].includes(value)
   },
 }
-const TextColor = {
+
+export const TextColor = {
   type: String,
   validator: (value: string): boolean => {
     return [
@@ -73,7 +76,8 @@ const TextColor = {
     ].includes(value)
   },
 }
-const Breakpoint = {
+
+export const Breakpoint = {
   validator: (value: boolean | number): boolean => {
     if (typeof value == 'boolean' || typeof value == 'number') {
       return true
@@ -81,6 +85,4 @@ const Breakpoint = {
       return false
     }
   },
-}
-
-export { Align, Breakpoint, Color, Shape, TextColor }
+}

package/src/components/sidebar/CSidebar.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { CBackdrop } from '../backdrop'
 
-import { isInViewport } from './../../utils'
+import { isInViewport } from '../../utils'
 
 const isOnMobile = (element: HTMLDivElement) =>
   Boolean(getComputedStyle(element).getPropertyValue('--cui-is-mobile'))
@@ -24,17 +24,11 @@ const CSidebar = defineComponent({
     /**
      * Make sidebar narrow.
      */
-    narrow: {
-      type: Boolean,
-      required: false,
-    },
+    narrow: Boolean,
     /**
      * Set sidebar to overlaid variant.
      */
-    overlaid: {
-      type: Boolean,
-      required: false,
-    },
+    overlaid: Boolean,
     /**
      * Components placement, there’s no default placement.
      * @values 'start', 'end'
@@ -51,7 +45,6 @@ const CSidebar = defineComponent({
      */
     position: {
       type: String,
-      default: undefined,
       validator: (value: string) => {
         return ['fixed'].includes(value)
       },
@@ -61,7 +54,6 @@ const CSidebar = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
       validator: (value: string) => {
         return ['sm', 'lg', 'xl'].includes(value)
       },

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarBrand.spec.ts.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarFooter.spec.ts.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarHeader.spec.ts.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarNav.spec.ts.snap

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

package/src/components/sidebar/__tests__/__snapshots__/CSidebarToggler.spec.ts.snap

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

package/src/components/smart-table/CSmartTable.ts

@@ -900,12 +900,12 @@ const CSmartTable = defineComponent({
                     })
                   : '',
               ),
-              h(
-                'div',
-                {
-                  class: 'col-auto ms-auto',
-                },
-                props.itemsPerPageSelect &&
+              props.itemsPerPageSelect &&
+                h(
+                  'div',
+                  {
+                    class: 'col-auto ms-auto',
+                  },
                   h(
                     'div',
                     {
@@ -952,7 +952,7 @@ const CSmartTable = defineComponent({
                       ],
                     },
                   ),
-              ),
+                ),
             ],
           ),
       ])

package/src/components/spinner/CSpinner.ts

@@ -10,8 +10,6 @@ const CSpinner = defineComponent({
      */
     color: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return [
           'primary',
@@ -31,7 +29,6 @@ const CSpinner = defineComponent({
     component: {
       type: String,
       default: 'div',
-      required: false,
     },
     /**
      * Size the component small.
@@ -40,8 +37,6 @@ const CSpinner = defineComponent({
      */
     size: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return value === 'sm'
       },
@@ -54,7 +49,6 @@ const CSpinner = defineComponent({
     variant: {
       type: String,
       default: 'border',
-      required: false,
       validator: (value: string) => {
         return ['border', 'grow'].includes(value)
       },
@@ -65,7 +59,6 @@ const CSpinner = defineComponent({
     visuallyHiddenLabel: {
       type: String,
       default: 'Loading...',
-      required: false,
     },
   },
   setup(props) {

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class=\\"spinner-grow text-warning spinner-grow-sm\\" role=\\"status\\"><span class=\\"visually-hidden\\">visuallyHiddenLabel</span></h4>"`;
+exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow text-warning spinner-grow-sm" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
 
-exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class=\\"spinner-border text-undefined\\" role=\\"status\\"><span class=\\"visually-hidden\\">Loading...</span></div>"`;
+exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border text-undefined" role="status"><span class="visually-hidden">Loading...</span></div>"`;