@coreui/vue-pro 4.8.0 → 4.8.1

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>"`;

package/src/components/table/CTable.ts

@@ -1,6 +1,5 @@
 import { computed, defineComponent, h, PropType } from 'vue'
 
-import { Color } from '../props'
 import { CTableBody } from './CTableBody'
 import { CTableCaption } from './CTableCaption'
 import { CTableDataCell } from './CTableDataCell'
@@ -9,43 +8,9 @@ import { CTableHead } from './CTableHead'
 import { CTableHeaderCell } from './CTableHeaderCell'
 import { CTableRow } from './CTableRow'
 
-export interface Column {
-  label?: string
-  key: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _style?: any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _props?: any
-}
-
-export interface FooterItem {
-  label?: string
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _props?: any
-}
-
-export type Item = {
-  [key: string]: number | string | any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  _props?: any
-}
-
-const pretifyName = (name: string) => {
-  return name
-    .replace(/[-_.]/g, ' ')
-    .replace(/ +/g, ' ')
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .split(' ')
-    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}
-
-const label = (column: Column | string) =>
-  typeof column === 'object'
-    ? column.label !== undefined
-      ? column.label
-      : pretifyName(column.key)
-    : pretifyName(column)
+import { Color } from '../../props'
+import { getColumnLabel, getColumnNames } from './utils'
+import type { Column, FooterItem, Item } from './types'
 
 const CTable = defineComponent({
   name: 'CTable',
@@ -57,8 +22,6 @@ const CTable = defineComponent({
      */
     align: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['bottom', 'middle', 'top'].includes(value)
       },
@@ -72,37 +35,23 @@ const CTable = defineComponent({
     /**
      * Add borders on all sides of the table and cells.
      */
-    bordered: {
-      type: Boolean,
-      required: false,
-    },
+    bordered: Boolean,
     /**
      * Remove borders on all sides of the table and cells.
      */
-    borderless: {
-      type: Boolean,
-      required: false,
-    },
+    borderless: Boolean,
     /**
      * Put the `<caption>` on the top of the table.
      *
      * @values 'top' | string
      */
-    caption: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    caption: String,
     /**
      * Set the text of the table caption and the caption on the top of the table.
      *
      * @since 4.5.0
      */
-    captionTop: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    captionTop: String,
     /**
      * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_props')
      *
@@ -118,7 +67,6 @@ const CTable = defineComponent({
      */
     columns: {
       type: Array as PropType<(Column | string)[]>,
-      required: false,
     },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -138,15 +86,11 @@ const CTable = defineComponent({
      */
     footer: {
       type: Array as PropType<(FooterItem | string)[]>,
-      required: false,
     },
     /**
      * Enable a hover state on table rows within a `<CTableBody>`.
      */
-    hover: {
-      type: Boolean,
-      required: false,
-    },
+    hover: Boolean,
     /**
      * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
      *
@@ -157,12 +101,9 @@ const CTable = defineComponent({
      */
     items: {
       type: Array as PropType<Item[]>,
-      required: false,
     },
     responsive: {
       type: [Boolean, String],
-      default: undefined,
-      required: false,
       validator: (value: boolean | string) => {
         if (typeof value == 'string') {
           return ['sm', 'md', 'lg', 'xl', 'xxl'].includes(value)
@@ -176,26 +117,17 @@ const CTable = defineComponent({
     /**
      * Make table more compact by cutting all cell `padding` in half.
      */
-    small: {
-      type: Boolean,
-      required: false,
-    },
+    small: Boolean,
     /**
      * Add zebra-striping to any table row within the `<CTableBody>`.
      */
-    striped: {
-      type: Boolean,
-      required: false,
-    },
+    striped: Boolean,
     /**
      * Add zebra-striping to any table column.
      *
      * @since 4.4.0
      */
-    stripedColumns: {
-      type: Boolean,
-      required: false,
-    },
+    stripedColumns: Boolean,
     /**
      * Properties that will be passed to the table footer component.
      *
@@ -204,8 +136,6 @@ const CTable = defineComponent({
      */
     tableFootProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
     /**
      * Properties that will be passed to the table head component.
@@ -215,19 +145,17 @@ const CTable = defineComponent({
      */
     tableHeadProps: {
       type: Object,
-      default: undefined,
-      required: false,
     },
   },
   setup(props, { slots, attrs }) {
-    const rawColumnNames = computed(() =>
-      props.columns
-        ? props.columns.map((column: Column | string) => {
-            if (typeof column === 'object') return column.key
-            else return column
-          })
-        : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'),
-    )
+    const columnNames = computed(() => getColumnNames(props.columns, props.items))
+    //   props.columns
+    //     ? props.columns.map((column: Column | string) => {
+    //         if (typeof column === 'object') return column.key
+    //         else return column
+    //       })
+    //     : Object.keys((props.items && props.items[0]) || {}).filter((el) => el.charAt(0) !== '_'),
+    // )
 
     const table = () =>
       h(
@@ -284,7 +212,7 @@ const CTable = defineComponent({
                                     column._style && { style: { ...column._style } }),
                                 },
                                 {
-                                  default: () => label(column),
+                                  default: () => getColumnLabel(column),
                                 },
                               ),
                             ),
@@ -308,7 +236,7 @@ const CTable = defineComponent({
                           },
                           {
                             default: () => [
-                              rawColumnNames.value.map(
+                              columnNames.value && columnNames.value.map(
                                 (colName: string) =>
                                   item[colName] &&
                                   h(

package/src/components/table/CTableBody.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CTableBody = defineComponent({
   name: 'CTableBody',

package/src/components/table/CTableDataCell.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CTableDataCell = defineComponent({
   name: 'CTableDataCell',
@@ -8,10 +8,7 @@ const CTableDataCell = defineComponent({
     /**
      * Highlight a table row or cell.
      */
-    active: {
-      type: Boolean,
-      required: false,
-    },
+    active: Boolean,
     /**
      * Set the vertical aligment.
      *
@@ -19,8 +16,6 @@ const CTableDataCell = defineComponent({
      */
     align: {
       type: String,
-      default: undefined,
-      required: false,
       validator: (value: string) => {
         return ['bottom', 'middle', 'top'].includes(value)
       },
@@ -34,10 +29,7 @@ const CTableDataCell = defineComponent({
     /**
      * @ignore
      */
-    scope: {
-      type: String,
-      required: false,
-    },
+    scope: String,
   },
   setup(props, { slots }) {
     return () =>

package/src/components/table/CTableFoot.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CTableFoot = defineComponent({
   name: 'CTableFoot',

package/src/components/table/CTableHead.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CTableHead = defineComponent({
   name: 'CTableHead',

package/src/components/table/CTableHeaderCell.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CTableHeaderCell = defineComponent({
   name: 'CTableHeaderCell',