@coreui/vue-pro 4.8.2 → 4.9.0-beta.1

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

@@ -1,4 +1,4 @@
-import { defineComponent, h, PropType } from 'vue'
+import { computed, defineComponent, h, PropType } from 'vue'
 
 import { CFormCheck, CFormInput } from '../form/'
 import { CTableFoot, CTableHead, CTableHeaderCell, CTableRow } from '../table/'
@@ -6,6 +6,8 @@ import { CTableFoot, CTableHead, CTableHeaderCell, CTableRow } from '../table/'
 import {
   getColumnKey,
   getColumnLabel,
+  getColumnGroups,
+  getColumns,
   getColumnSorterState,
   getColumnValues,
   getTableHeaderCellProps,
@@ -35,10 +37,17 @@ const CSmartTableHead = defineComponent({
     selectable: Boolean,
     selectAll: [Boolean, Object] as PropType<boolean | { external?: boolean }>,
     selectedAll: [Boolean, String],
+    showGroups: {
+      type: Boolean,
+      default: true,
+    },
     sorterState: Object as PropType<SorterValue>,
   },
   emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
   setup(props, { slots, emit }) {
+    const columns = computed(() => getColumns(props.columns))
+    const groups = computed(() => getColumnGroups(props.columns))
+
     const columnSorterIcon = (column: Column | string) => {
       if (getColumnSorterState(getColumnKey(column), props.sorterState) === 0) {
         return h(
@@ -73,6 +82,24 @@ const CSmartTableHead = defineComponent({
         {},
         {
           default: () => [
+            props.showGroups &&
+              groups.value &&
+              groups.value.length > 0 &&
+              groups.value.map((row) => [
+                h(CTableRow, {}, () => [
+                  props.selectable && h(CTableHeaderCell),
+                  row.map((cell) =>
+                    h(
+                      CTableHeaderCell,
+                      {
+                        colspan: cell.colspan,
+                        ...getTableHeaderCellProps(cell),
+                      },
+                      () => cell.label,
+                    ),
+                  ),
+                ]),
+              ]),
             h(
               CTableRow,
               {},
@@ -81,14 +108,14 @@ const CSmartTableHead = defineComponent({
                   props.selectable &&
                     h(CTableHeaderCell, {}, () =>
                       h(CFormCheck, {
-                        checked: typeof props.selectedAll === 'boolean' ? props.selectAll : false,
+                        checked: typeof props.selectedAll === 'boolean' ? props.selectedAll : false,
                         indeterminate: props.selectedAll === 'indeterminate' ? true : false,
                         onChange: () => {
                           emit('selectAllChecked')
                         },
                       }),
                     ),
-                  props.columns.map((column, index: number) =>
+                  columns.value.map((column, index: number) =>
                     h(
                       CTableHeaderCell,
                       {
@@ -108,11 +135,11 @@ const CSmartTableHead = defineComponent({
                             getColumnLabel(column),
                           ),
                           props.columnSorter &&
-                            (typeof column !== 'object'
-                              ? true
-                              : typeof column.sorter === 'undefined'
-                              ? true
-                              : column.sorter) &&
+                            (typeof column === 'object'
+                              ? typeof column.sorter === 'undefined'
+                                ? true
+                                : column.sorter
+                              : true) &&
                             columnSorterIcon(column),
                         ],
                       },
@@ -128,7 +155,7 @@ const CSmartTableHead = defineComponent({
                 {
                   default: () => [
                     props.selectable && h(CTableHeaderCell),
-                    props.columns.map((column: Column | string) =>
+                    columns.value.map((column: Column | string) =>
                       h(
                         CTableHeaderCell,
                         {
@@ -137,11 +164,11 @@ const CSmartTableHead = defineComponent({
                         {
                           default: () =>
                             (
-                              typeof column !== 'object'
-                                ? true
-                                : typeof column.filter === 'undefined'
-                                ? true
-                                : column.filter
+                              typeof column === 'object'
+                                ? column.filter === undefined
+                                  ? true
+                                  : column.filter
+                                : true
                             )
                               ? typeof column !== 'string' && typeof column.filter === 'function'
                                 ? column.filter(

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

@@ -1,7 +1,9 @@
 import { VNode } from 'vue'
 
 export type Column = {
+  children?: Column[]
   filter?: boolean | ((values: any[], onChange: (value: any) => void) => VNode)
+  group?: string
   key: string
   label?: string
   sorter?: boolean
@@ -23,6 +25,17 @@ export type FooterItem = {
   _props?: any
 }
 
+export type Group = {
+  children?: Group[] | Column[]
+  colspan?: number
+  deep?: number
+  group?: string
+  key: string
+  label?: string
+  _style?: any
+  _props?: any
+}
+
 export type Item = {
   [key: string]: number | string | any
   _cellProps?: any

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

@@ -2,6 +2,7 @@ import type {
   Column,
   ColumnFilter,
   ColumnFilterValue,
+  Group,
   Item,
   Sorter,
   SorterValue,
@@ -77,13 +78,123 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
-export const getColumnNames = (columns: (string | Column)[] | undefined, items: Item[]) =>
-  columns
-    ? columns.map((column: Column | string) => {
-        if (typeof column === 'object') return column.key
-        else return column
+export const getColumnNames = (
+  columns: (string | Column)[] | undefined,
+  items: Item[],
+): string[] => {
+  if (columns) {
+    const _columns = []
+
+    for (const column of columns) {
+      if (typeof column === 'object' && column.children) {
+        _columns.push(...getColumnNames(column.children, []))
+        continue
+      }
+
+      typeof column === 'object' ? _columns.push(column.key) : _columns.push(column)
+    }
+
+    return _columns
+  }
+
+  return getColumnNamesFromItems(items)
+}
+
+export const getColumns = (_columns: (Column | Group | string)[]): (Column | string)[] => {
+  const columns = []
+
+  for (const column of _columns) {
+    if (typeof column === 'object' && column.group && column.children) {
+      columns.push(...getColumns(column.children))
+      continue
+    }
+
+    if (typeof column === 'object' && column.children) {
+      columns.push(...getColumns(column.children))
+    }
+
+    columns.push(column)
+  }
+
+  return columns
+}
+
+export const countColumns = (columns: Column[], counter = 0) => {
+  let _counter = counter
+  for (const column of columns) {
+    if (!column.children) {
+      _counter++
+    }
+
+    if (column.children) {
+      _counter = countColumns(column.children, _counter)
+    }
+  }
+
+  return _counter
+}
+
+export const getColumnGroups = (columns: (string | Column)[] | undefined) => {
+  const groups = []
+
+  const traverseColumns = (column: Column, deep = 0, colSpan = 0): Group[] => {
+    const groups = []
+
+    if (column.children) {
+      for (const _column of column.children) {
+        if (!_column.group) {
+          colSpan++
+        }
+        groups.push(...traverseColumns(_column, deep + 1, colSpan))
+      }
+    }
+
+    if (typeof column === 'object' && column.group) {
+      const { children, group, ...rest } = column
+      groups.push({
+        deep: deep,
+        label: group,
+        ...(children && { colspan: countColumns(children) }),
+        ...rest,
       })
-    : getColumnNamesFromItems(items)
+    }
+
+    return groups
+  }
+
+  if (columns) {
+    for (const column of columns) {
+      if (typeof column === 'object' && column.group) {
+        const objects = traverseColumns(column)
+
+        if (objects) {
+          for (const object of objects) {
+            const { deep, ...rest } = object
+
+            if (deep === undefined) {
+              continue
+            }
+
+            for (let i = 0; i < deep; i++) {
+              if (groups[i]) {
+                continue
+              }
+
+              groups.push([])
+            }
+
+            if (groups[deep]) {
+              groups[deep].push(rest)
+            } else {
+              groups.push([rest])
+            }
+          }
+        }
+      }
+    }
+  }
+  return groups
+}
 
 export const getColumnNamesFromItems = (items: Item[]) =>
   Object.keys(items[0] || {}).filter((el) => el.charAt(0) !== '_')
@@ -132,7 +243,7 @@ export const getTableHeaderCellStyles = (
   if (
     columnSorter &&
     (typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter)))
   ) {
     style['cursor'] = 'pointer'
   }
@@ -143,19 +254,6 @@ export const getTableHeaderCellStyles = (
   return style
 }
 
-export const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
-  array.some((_item: T) => {
-    let result = true
-    for (const key in item) {
-      if (!ignore.includes(key) && item[key] !== _item[key]) {
-        result = false
-        break
-      }
-    }
-
-    return result
-  })
-
 export const isSortable = (
   i: number,
   columns: (string | Column)[] | undefined,
@@ -170,7 +268,7 @@ export const isSortable = (
     columnSorter &&
     (!columns ||
       typeof column !== 'object' ||
-      (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter))) &&
+      (typeof column === 'object' && (column.sorter === undefined || column.sorter))) &&
     isDataColumn
   )
 }

package/src/components/spinner/CSpinner.ts

@@ -68,8 +68,10 @@ const CSpinner = defineComponent({
         {
           class: [
             `spinner-${props.variant}`,
-            `text-${props.color}`,
-            props.size && `spinner-${props.variant}-${props.size}`,
+            {
+              [`spinner-${props.variant}-${props.size}`]: props.size,
+              [`text-${props.color}`]: props.color,
+            },
           ],
           role: 'status',
         },

package/src/components/table/CTable.ts

@@ -236,24 +236,25 @@ const CTable = defineComponent({
                           },
                           {
                             default: () => [
-                              columnNames.value && columnNames.value.map(
-                                (colName: string) =>
-                                  item[colName] &&
-                                  h(
-                                    CTableDataCell,
-                                    {
-                                      ...(item._cellProps &&
-                                        item._cellProps['all'] && { ...item._cellProps['all'] }),
-                                      ...(item._cellProps &&
-                                        item._cellProps[colName] && {
-                                          ...item._cellProps[colName],
-                                        }),
-                                    },
-                                    {
-                                      default: () => item[colName],
-                                    },
-                                  ),
-                              ),
+                              columnNames.value &&
+                                columnNames.value.map(
+                                  (colName: string) =>
+                                    item[colName] !== undefined &&
+                                    h(
+                                      CTableDataCell,
+                                      {
+                                        ...(item._cellProps &&
+                                          item._cellProps['all'] && { ...item._cellProps['all'] }),
+                                        ...(item._cellProps &&
+                                          item._cellProps[colName] && {
+                                            ...item._cellProps[colName],
+                                          }),
+                                      },
+                                      {
+                                        default: () => item[colName],
+                                      },
+                                    ),
+                                ),
                             ],
                           },
                         ),

package/src/components/table/types.ts

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