@coreui/vue-pro 4.8.0 → 4.8.1

package/src/components/table/CTableRow.ts

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

package/src/components/table/__tests__/__snapshots__/CTable.spec.ts.snap

@@ -1,9 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CTable component renders correctly 1`] = `
-"<div class=\\"table-responsive-lg\\">
-  <table class=\\"table align-center caption-top border-dark table-bordered table-borderless table-warning table-hover table-sm table-striped\\">Default slot</table>
+"<div class="table-responsive-lg">
+  <table class="table align-center caption-top border-dark table-bordered table-borderless table-warning table-hover table-sm table-striped">
+    <!---->
+    <!---->
+    <!---->Default slot
+    <!---->
+  </table>
 </div>"
 `;
 
-exports[`Loads and display CTable component renders correctly 1`] = `"<table class=\\"table\\">Default slot</table>"`;
+exports[`Loads and display CTable component renders correctly 1`] = `
+"<table class="table">
+  <!---->
+  <!---->
+  <!---->Default slot
+  <!---->
+</table>"
+`;

package/src/components/table/__tests__/__snapshots__/CTableBody.spec.ts.snap

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

package/src/components/table/__tests__/__snapshots__/CTableDataCell.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CTableDataCell component renders correctly 1`] = `"<td class=\\"align-middle table-active table-warning\\">Default slot</td>"`;
+exports[`Customize CTableDataCell component renders correctly 1`] = `"<td class="align-middle table-active table-warning">Default slot</td>"`;
 
-exports[`Loads and display CTableDataCell component renders correctly 1`] = `"<td class=\\"\\">Default slot</td>"`;
+exports[`Loads and display CTableDataCell component renders correctly 1`] = `"<td class="">Default slot</td>"`;

package/src/components/table/__tests__/__snapshots__/CTableFoot.spec.ts.snap

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

package/src/components/table/__tests__/__snapshots__/CTableHead.spec.ts.snap

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

package/src/components/table/__tests__/__snapshots__/CTableHeaderCell.spec.ts.snap

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

package/src/components/table/__tests__/__snapshots__/CTableRow.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CTableRow component renders correctly 1`] = `"<tr class=\\"align-middle table-active table-warning\\">Default slot</tr>"`;
+exports[`Customize CTableRow component renders correctly 1`] = `"<tr class="align-middle table-active table-warning">Default slot</tr>"`;
 
-exports[`Loads and display CTableRow component renders correctly 1`] = `"<tr class=\\"\\">Default slot</tr>"`;
+exports[`Loads and display CTableRow component renders correctly 1`] = `"<tr class="">Default slot</tr>"`;

package/src/components/table/types.ts

@@ -0,0 +1,20 @@
+export type 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 type 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
+  }

package/src/components/table/utils.ts

@@ -0,0 +1,24 @@
+import type { Column, Item } from './types'
+
+export 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(' ')
+}
+
+export const getColumnLabel = (column: Column | string) =>
+  typeof column === 'object' ? column.label ?? pretifyName(column.key) : pretifyName(column)
+
+export const getColumnNames = (columns: (string | Column)[] | undefined, items?: Item[]) =>
+  columns
+    ? columns.map((column: Column | string) => {
+        return typeof column === 'object' ? column.key : column
+      })
+    : items && getColumnNamesFromItems(items)
+
+export const getColumnNamesFromItems = (items: Item[]) =>
+  Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')

package/src/components/tabs/CTabPane.ts

@@ -1,6 +1,6 @@
 import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue'
 
-import { executeAfterTransition } from './../../utils/transition'
+import { executeAfterTransition } from '../../utils/transition'
 
 const CTabPane = defineComponent({
   name: 'CTabPane',
@@ -11,7 +11,6 @@ const CTabPane = defineComponent({
     visible: {
       type: Boolean,
       default: false,
-      required: false,
     },
   },
   emits: [

package/src/components/tabs/__tests__/__snapshots__/CTabContent.spec.ts.snap

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

package/src/components/tabs/__tests__/__snapshots__/CTabPane.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CTabPane component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"tab-pane fade active show\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="true">
+  <div class="tab-pane fade active show">Default slot</div>
 </transition-stub>"
 `;
 
 exports[`Loads and display CTabPane component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"tab-pane fade\\" style=\\"display: none;\\">Default slot</div>
+"<transition-stub appear="false" persisted="false" css="true">
+  <div class="tab-pane fade" style="display: none;">Default slot</div>
 </transition-stub>"
 `;

package/src/components/toast/CToast.ts

@@ -1,8 +1,6 @@
-import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, onMounted, provide, ref, Transition } from 'vue'
 
-import { executeAfterTransition } from './../../utils/transition'
-
-import { Color } from '../props'
+import { Color } from '../../props'
 
 const CToast = defineComponent({
   name: 'CToast',
@@ -13,7 +11,6 @@ const CToast = defineComponent({
     autohide: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
@@ -27,7 +24,6 @@ const CToast = defineComponent({
     delay: {
       type: Number,
       default: 5000,
-      required: false,
     },
     /**
      * Optionally add a close button to component and allow it to self dismiss.
@@ -35,32 +31,19 @@ const CToast = defineComponent({
     dismissible: {
       type: Boolean,
       default: true,
-      required: false,
     },
     /**
      * index of the component.
      */
-    index: {
-      type: Number,
-      default: undefined,
-      required: false,
-    },
+    index: Number,
     /**
      * Title node for your component.
      */
-    title: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    title: String,
     /**
      * Toggle the visibility of component.
      */
-    visible: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
+    visible: Boolean,
   },
   emits: [
     /**
@@ -73,51 +56,23 @@ const CToast = defineComponent({
     'show',
   ],
   setup(props, { slots, emit }) {
-    const visible = ref(props.visible)
-    let timeout = 0
-
-    const updateVisible = (v: boolean) => {
-      visible.value = v
-    }
-    provide('updateVisible', updateVisible)
-
-    const handleBeforeEnter = (el: RendererElement) => {
-      el.classList.add('showing')
-    }
-
-    const handleEnter = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      el.classList.add('show')
-      setTimeout(() => {
-        el.classList.remove('showing')
-      }, 1)
-
-      if (props.index) {
-        emit('show', props.index)
-      } else {
-        emit('show')
-      }
-    }
+    const timeout = ref(0)
+    const visible = ref()
 
-    const handleLeave = (el: RendererElement, done: () => void) => {
-      executeAfterTransition(() => done(), el as HTMLElement)
-      el.classList.add('showing')
+    const updateVisible = (_visible: boolean) => {
+      visible.value = _visible
     }
 
-    const handleAfterLeave = (el: RendererElement) => {
-      el.classList.remove('show')
-      el.classList.add('hide')
-      if (props.index) {
-        emit('close', props.index)
-      } else {
-        emit('close')
-      }
-    }
+    provide('updateVisible', updateVisible)
 
     onMounted(() => {
+      if (props.visible) {
+        visible.value = props.visible
+      }
+      
       if (props.autohide) {
-        clearTimeout(timeout)
-        timeout = window.setTimeout(() => {
+        clearTimeout(timeout.value)
+        timeout.value = window.setTimeout(() => {
           visible.value = false
           emit('close')
         }, props.delay)
@@ -129,29 +84,39 @@ const CToast = defineComponent({
         Transition,
         {
           appear: true,
-          onBeforeEnter: (el) => handleBeforeEnter(el),
-          onEnter: (el, done) => handleEnter(el, done),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          enterFromClass: '',
+          enterActiveClass: 'show showing',
+          enterToClass: 'show',
+          leaveFromClass: 'show',
+          leaveActiveClass: 'show showing',
+          leaveToClass: 'show',
+          onAfterEnter: (el) => {
+            el.classList.add('show')
+            props.index ? emit('show', props.index) : emit('show')
+          },
+          onAfterLeave: () => {
+            props.index ? emit('close', props.index) : emit('close')
+          },
+        },
+        {
+          default: () =>
+            visible.value &&
+            h(
+              'div',
+              {
+                class: [
+                  'toast fade',
+                  {
+                    [`bg-${props.color}`]: props.color,
+                  },
+                ],
+                'aria-live': 'assertive',
+                'aria-atomic': true,
+                role: 'alert',
+              },
+              slots.default && slots.default(),
+            ),
         },
-        () =>
-          visible.value &&
-          h(
-            'div',
-            {
-              class: [
-                'toast fade',
-                {
-                  [`bg-${props.color}`]: props.color,
-                },
-              ],
-              'aria-live': 'assertive',
-              'aria-atomic': true,
-              role: 'alert',
-              ref: 'toastRef',
-            },
-            slots.default && slots.default(),
-          ),
       )
   },
 })

package/src/components/toast/CToastClose.ts

@@ -7,11 +7,7 @@ const CToastClose = defineComponent({
     /**
      * 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,
     ...CCloseButton.props,
   },
   emits: [

package/src/components/toast/CToastHeader.ts

@@ -7,10 +7,7 @@ const CToastHeader = defineComponent({
     /**
      * Automatically add a close button to the header.
      */
-    closeButton: {
-      type: Boolean,
-      require: false,
-    },
+    closeButton: Boolean,
   },
   emits: [
     /**

package/src/components/toast/CToaster.ts

@@ -10,8 +10,6 @@ const CToaster = defineComponent({
      */
     placement: {
       type: String,
-      default: undefined,
-      require: false,
       validator: (value: string) => {
         return [
           'top-start',

package/src/components/toast/__tests__/CToast.spec.ts

@@ -4,7 +4,9 @@ import { CToast as Component } from '../../../index'
 const ComponentName = 'CToast'
 
 const defaultWrapper = mount(Component, {
-  propsData: {},
+  propsData: {
+    visible: true,
+  },
   slots: {
     default: 'Default slot',
   },

package/src/components/toast/__tests__/__snapshots__/CToast.spec.ts.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CToast component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"toast fade bg-warning\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" role=\\"alert\\">Default slot</div>
+"<transition-stub enterfromclass="" enteractiveclass="show showing" entertoclass="show" leavefromclass="show" leaveactiveclass="show showing" leavetoclass="show" appear="true" persisted="false" css="true">
+  <div class="toast fade bg-warning" aria-live="assertive" aria-atomic="true" role="alert">Default slot</div>
 </transition-stub>"
 `;
 
 exports[`Loads and display CToast component renders correctly 1`] = `
-"<transition-stub>
-  <div class=\\"toast fade\\" aria-live=\\"assertive\\" aria-atomic=\\"true\\" role=\\"alert\\">Default slot</div>
+"<transition-stub enterfromclass="" enteractiveclass="show showing" entertoclass="show" leavefromclass="show" leaveactiveclass="show showing" leavetoclass="show" appear="true" persisted="false" css="true">
+  <div class="toast fade" aria-live="assertive" aria-atomic="true" role="alert">Default slot</div>
 </transition-stub>"
 `;

package/src/components/toast/__tests__/__snapshots__/CToastBody.spec.ts.snap

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

package/src/components/toast/__tests__/__snapshots__/CToastClose.spec.ts.snap

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

package/src/components/toast/__tests__/__snapshots__/CToastHeader.spec.ts.snap

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

package/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToaster component renders correctly 1`] = `"<div class=\\"toaster toast-container p-3 position-fixed top-0 end-0\\">Default slot</div>"`;
+exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3 position-fixed top-0 end-0">Default slot</div>"`;
 
-exports[`Loads and display CToaster component renders correctly 1`] = `"<div class=\\"toaster toast-container p-3\\">Default slot</div>"`;
+exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3">Default slot</div>"`;

package/src/components/tooltip/CTooltip.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 CTooltip = defineComponent({
   name: 'CTooltip',
@@ -9,18 +9,13 @@ const CTooltip = 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 tooltip relative to its target.
      */
     offset: {
       type: Array,
       default: () => [0, 0],
-      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 CTooltip = defineComponent({
     placement: {
       type: String as PropType<Placement>,
       default: 'top',
-      required: false,
       validator: (value: string) => {
         return ['top', 'right', 'bottom', 'left'].includes(value)
       },
@@ -41,7 +35,6 @@ const CTooltip = defineComponent({
     trigger: {
       type: [String, Array] as PropType<string | string[]>,
       default: 'hover',
-      required: false,
       validator: (value: string | string[]) => {
         if (typeof value === 'string') {
           return ['click', 'focus', 'hover'].includes(value)

package/src/components/widgets/CWidgetStatsA.ts

@@ -5,26 +5,17 @@ import { CCard, CCardBody } from '../card'
 const CWidgetStatsA = defineComponent({
   name: 'CWidgetStatsA',
   props: {
-    color: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    color: String,
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   /**

package/src/components/widgets/CWidgetStatsB.ts

@@ -1,9 +1,10 @@
 import { defineComponent, h } from 'vue'
 import { shape } from 'vue-types'
 
-import { Color } from '../props'
-import { CCard, CCardBody } from './../card'
-import { CProgress } from '../progress/CProgress'
+import { CCard, CCardBody } from '../card'
+import { CProgress } from '../progress'
+
+import { Color } from '../../props'
 
 const CWidgetStatsB = defineComponent({
   name: 'CWidgetStatsB',
@@ -17,11 +18,7 @@ const CWidgetStatsB = defineComponent({
     /**
      * Colors have been inverted from their default dark shade.
      */
-    inverse: {
-      type: Boolean,
-      default: undefined,
-      require: false,
-    },
+    inverse: Boolean,
     progress: shape({
       /**
        * Sets the color context of the progress bar to one of CoreUI’s themed colors
@@ -40,26 +37,17 @@ const CWidgetStatsB = defineComponent({
     /**
      * Helper text for your component. If you want to pass non-string value please use dedicated slot `<template #text>...</template>`
      */
-    text: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    text: String,
     /**
      * Title for your component. If you want to pass non-string value please use dedicated slot `<template #title>...</template>`
      */
-    title: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
+    title: String,
     /**
      * Value for your component. If you want to pass non-string or non-number value please use dedicated slot `<template #value>...</template>`
      */
     value: {
       type: [Number, String],
-      default: 0,
-      require: false,
+      default: 0
     },
   },
   setup(props, { slots }) {