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

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',

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