@coreui/vue-pro 5.0.0-alpha.0 → 5.0.0-alpha.1

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

@@ -156,8 +156,6 @@ const CSmartTable = defineComponent({
     },
     /**
      * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
-     * - label (String) - replaces default label text
-     * - values (Array) - custom array of pagination values
      * - external (Boolean) - disables automatic 'itemsPerPage' change (use to change pages externaly by 'pagination-change' event).
      */
     itemsPerPageSelect: {
@@ -330,7 +328,6 @@ const CSmartTable = defineComponent({
       }),
     )
     const itemsNumber = ref(props.itemsNumber)
-    // eslint-disable-next-line unicorn/explicit-length-check
     const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
     const selected = ref<Item[]>([])
     const selectedAll = ref<boolean | string>()
@@ -375,8 +372,9 @@ const CSmartTable = defineComponent({
         })
 
         if (Array.isArray(props.items)) {
-          items.value = props.items
-          // eslint-disable-next-line unicorn/explicit-length-check
+          items.value = props.items.map((item: Item, index: number) => {
+            return { ...item, _id: index }
+          })
           itemsNumber.value = props.itemsNumber || props.items.length
         }
       },
@@ -458,7 +456,7 @@ const CSmartTable = defineComponent({
       }
     })
 
-    const handleSorterChange = (column: string, index: number) => {
+    const handleSorterChange = (column: string, index: number, order?: 'asc' | 'desc') => {
       if (
         !isSortable(
           index,
@@ -474,8 +472,14 @@ const CSmartTable = defineComponent({
       //if column changed or sort was descending change asc to true
       const state = sorterState.value
 
+      if (order) {
+        state.state = order
+      }
+
       if (state.column === column) {
-        if (state.state === 0) {
+        if (order) {
+          state.state = order
+        } else if (state.state === 0) {
           state.state = 'asc'
         } else if (state.state === 'asc') {
           state.state = 'desc'
@@ -488,7 +492,7 @@ const CSmartTable = defineComponent({
         }
       } else {
         state.column = column
-        state.state = 'asc'
+        state.state = order || 'asc'
       }
 
       sorterState.value.column = state.column
@@ -605,6 +609,10 @@ const CSmartTable = defineComponent({
       sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value),
     )
 
+    watch(sortedItems, () => {
+      emit('filteredItemsChange', sortedItems.value)
+    })
+
     const numberOfPages = computed(() =>
       itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1,
     )
@@ -744,8 +752,8 @@ const CSmartTable = defineComponent({
                           onFilterChange: (key: string, value: string) =>
                             handleColumnFilterChange(key, value, 'change'),
                           onSelectAllChecked: () => handleSelectAllChecked(),
-                          onSortClick: (key: string, index: number) =>
-                            handleSorterChange(key, index),
+                          onSortClick: (key: string, index: number, order: 'asc' | 'desc') =>
+                            handleSorterChange(key, index, order),
                         },
                         {
                           // @slot Sorter icon when items are unsorted.
@@ -768,7 +776,7 @@ const CSmartTable = defineComponent({
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
                                   role: 'img',
-                                  innerHTML: cilArrowBottom[1],
+                                  innerHTML: cilArrowTop[1],
                                 }),
                           // @slot  Sorter icon when items are sorted descending.
                           sortingIconDescending: () =>
@@ -779,13 +787,14 @@ const CSmartTable = defineComponent({
                                   class: 'icon',
                                   viewBox: '0 0 512 512',
                                   role: 'img',
-                                  innerHTML: cilArrowTop[1],
+                                  innerHTML: cilArrowBottom[1],
                                 }),
                         },
                       ),
                     h(CSmartTableBody, {
                       clickableRows: props.clickableRows,
                       columnNames: columnNames.value,
+                      columns: props.columns ?? columnNames.value,
                       currentItems: currentItems.value,
                       firstItemOnActivePageIndex: firstItemOnActivePageIndex.value,
                       noItemsLabel: props.noItemsLabel,

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

@@ -5,8 +5,13 @@ import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
 import { isObjectInArray } from '../../utils'
 
-import { getClickedColumnName, getTableDataCellProps } from './utils'
-import type { Item } from './types'
+import {
+  getClickedColumnName,
+  getColumnName,
+  getTableDataCellProps,
+  getTableDataCellStyles,
+} from './utils'
+import type { Column, Item } from './types'
 
 const CSmartTableBody = defineComponent({
   name: 'CSmartTableBody',
@@ -17,6 +22,11 @@ const CSmartTableBody = defineComponent({
       default: () => [],
       require: true,
     },
+    columns: {
+      type: Array as PropType<(Column | string)[]>,
+      default: () => [],
+      require: true,
+    },
     currentItems: {
       type: Array as PropType<Item[]>,
       default: () => [],
@@ -33,9 +43,7 @@ const CSmartTableBody = defineComponent({
   },
   emits: ['rowChecked', 'rowClick'],
   setup(props, { emit }) {
-    const colspan: number = props.selectable
-      ? props.columnNames.length + 1
-      : props.columnNames.length
+    const colspan: number = props.selectable ? props.columns.length + 1 : props.columns.length
     return () =>
       h(
         CTableBody,
@@ -59,6 +67,7 @@ const CSmartTableBody = defineComponent({
                           getClickedColumnName(
                             event.target as HTMLTextAreaElement,
                             props.columnNames,
+                            props.selectable,
                           ),
                           event,
                         )
@@ -81,22 +90,24 @@ const CSmartTableBody = defineComponent({
                               },
                             }),
                           ),
-                        props.columnNames.map((colName) =>
-                          props.scopedSlots &&
-                          props.scopedSlots[colName] &&
-                          typeof props.scopedSlots[colName] === 'function'
+                        props.columns.map((column) => {
+                          const colName = getColumnName(column)
+                          return props.scopedSlots &&
+                            props.scopedSlots[colName] &&
+                            typeof props.scopedSlots[colName] === 'function'
                             ? h(props.scopedSlots[colName], { item: item })
                             : typeof item[colName] !== 'undefined' &&
-                              h(
-                                CTableDataCell,
-                                {
-                                  ...getTableDataCellProps(item, colName),
-                                },
-                                {
-                                  default: () => String(item[colName]),
-                                },
-                              ),
-                        ),
+                                h(
+                                  CTableDataCell,
+                                  {
+                                    ...getTableDataCellProps(column, item, colName),
+                                    style: getTableDataCellStyles(column, item, colName),
+                                  },
+                                  {
+                                    default: () => String(item[colName]),
+                                  },
+                                )
+                        }),
                       ],
                     },
                   ),
@@ -115,18 +126,6 @@ const CSmartTableBody = defineComponent({
                         {
                           class: 'p-0',
                           key: `details${trIndex}`,
-                          onClick: (event: MouseEvent) => {
-                            emit(
-                              'rowClick',
-                              item,
-                              trIndex + props.firstItemOnActivePageIndex,
-                              getClickedColumnName(
-                                event.target as HTMLTextAreaElement,
-                                props.columnNames,
-                              ),
-                              true,
-                            )
-                          },
                         },
                         {
                           default: () =>

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

@@ -115,15 +115,38 @@ const CSmartTableHead = defineComponent({
                         },
                       }),
                     ),
-                  columns.value.map((column, index: number) =>
-                    h(
+                  columns.value.map((column, index: number) => {
+                    const isSortable =
+                    props.columnSorter &&
+                    (typeof column === 'object'
+                      ? column.sorter === undefined
+                        ? true
+                        : column.sorter
+                      : true)
+                    return h(
                       CTableHeaderCell,
                       {
                         ...getTableHeaderCellProps(column),
-                        onClick: () => {
-                          emit('sortClick', getColumnKey(column), index)
-                        },
                         style: getTableHeaderCellStyles(column, props.columnSorter),
+                        ...isSortable && {
+                          tabindex: 0,
+                          onClick: () => emit('sortClick', getColumnKey(column), index),
+                          onKeydown: (event: KeyboardEvent) => {
+                            if (event.key === 'Enter') {
+                              emit('sortClick', getColumnKey(column), index)
+                            }
+        
+                            if (event.key === 'ArrowUp') {
+                              event.preventDefault()
+                              emit('sortClick', getColumnKey(column), index, 'asc')
+                            }
+        
+                            if (event.key === 'ArrowDown') {
+                              event.preventDefault()
+                              emit('sortClick', getColumnKey(column), index, 'desc')
+                            }
+                          },
+                        }
                       },
                       {
                         default: () => [
@@ -143,8 +166,8 @@ const CSmartTableHead = defineComponent({
                             columnSorterIcon(column),
                         ],
                       },
-                    ),
-                  ),
+                    )
+                  }),
                 ],
               },
             ),
@@ -155,8 +178,8 @@ const CSmartTableHead = defineComponent({
                 {
                   default: () => [
                     props.selectable && h(CTableHeaderCell),
-                    columns.value.map((column: Column | string) =>
-                      h(
+                    columns.value.map((column: Column | string) => {
+                      return h(
                         CTableHeaderCell,
                         {
                           ...getTableHeaderCellProps(column),
@@ -187,7 +210,11 @@ const CSmartTableHead = defineComponent({
                                       )
                                     },
                                     onChange: (event: Event) => {
-                                      emit('filterChange', (event.target as HTMLInputElement).value)
+                                      emit(
+                                        'filterChange',
+                                        getColumnKey(column),
+                                        (event.target as HTMLInputElement).value,
+                                      )
                                     },
                                     'aria-label': `column name: '${getColumnLabel(
                                       column,
@@ -199,8 +226,8 @@ const CSmartTableHead = defineComponent({
                                   })
                               : '',
                         },
-                      ),
-                    ),
+                      )
+                    }),
                   ],
                 },
               ),

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

@@ -9,6 +9,8 @@ export type Column = {
   sorter?: boolean
   _style?: any
   _props?: any
+  _colStyle?: any
+  _colProps?: any
 }
 
 export type ColumnFilter = {
@@ -45,8 +47,6 @@ export type Item = {
 
 export type ItemsPerPageSelect = {
   external?: boolean
-  label?: string
-  values?: Array<number>
 }
 
 export type Pagination = {

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

@@ -61,11 +61,12 @@ export const filterTable = (
 export const getClickedColumnName = (
   target: HTMLTextAreaElement,
   columnNames: string[],
+  selectable: boolean | undefined
 ): string => {
   const closest = target.closest('tr')
   const children = closest ? Array.from(closest.children) : []
   const clickedCell = children.filter((child) => child.contains(target))[0]
-  return columnNames[children.indexOf(clickedCell)]
+  return selectable ? columnNames[children.indexOf(clickedCell) - 1]  : columnNames[children.indexOf(clickedCell)]
 }
 
 export const getColumnKey = (column: Column | string) =>
@@ -78,6 +79,14 @@ export const getColumnLabel = (column: Column | string) =>
       : pretifyName(column.key)
     : pretifyName(column)
 
+export const getColumnName = (column: string | Column) => {
+  if (typeof column === 'object') {
+    return column.key
+  }
+
+  return column
+}
+
 export const getColumnNames = (
   columns: (string | Column)[] | undefined,
   items: Item[],
@@ -217,15 +226,42 @@ export const getColumnValues = (items: Item[], key: string) => {
   return items.map((item) => item[key])
 }
 
-export const getTableDataCellProps = (item: Item, colName: string) => {
-  const props = item._cellProps && {
-    ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-    ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
+export const getTableDataCellProps = (column: Column | string, item: Item, colName: string) => {
+  const props = {}
+
+  if (typeof column === 'object' && column._colProps) {
+    Object.assign(props, column._colProps)
+  }
+
+  if (item._cellProps && item._cellProps['all']) {
+    Object.assign(props, item._cellProps['all'])
+  }
+
+  if (item._cellProps && item._cellProps[colName]) {
+    Object.assign(props, item._cellProps[colName])
   }
 
   return props
 }
 
+export const getTableDataCellStyles = (column: Column | string, item: Item, colName: string) => {
+  const styles = {}
+
+  if (typeof column === 'object' && column._colStyle) {
+    Object.assign(styles, column._colStyle)
+  }
+
+  if (item._cellStyle && item._cellStyle['all']) {
+    Object.assign(styles, item._cellStyle['all'])
+  }
+
+  if (item._cellStyle && item._cellStyle[colName]) {
+    Object.assign(styles, item._cellStyle[colName])
+  }
+
+  return styles
+}
+
 export const getTableHeaderCellProps = (column: Column | string) => {
   if (typeof column === 'object' && column._props) {
     return column._props

package/src/components/time-picker/CTimePicker.ts

@@ -293,7 +293,9 @@ const CTimePicker = defineComponent({
       listOfSeconds: [],
       hour12: false,
     })
-    const isValid = ref(props.valid || (props.invalid && false))
+    const isValid = ref<boolean | undefined>(
+      props.valid ?? (props.invalid === true ? false : undefined),
+    )
 
     watch(
       () => props.time,
@@ -305,7 +307,7 @@ const CTimePicker = defineComponent({
     watch(
       () => [props.valid, props.invalid],
       () => {
-        isValid.value = props.valid || (props.invalid && false)
+        isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
       },
     )
 

package/src/components/tooltip/CTooltip.ts

@@ -104,7 +104,7 @@ const CTooltip = defineComponent({
     const tooltipRef = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
-    
+
     const delay =
       typeof props.delay === 'number' ? { show: props.delay, hide: props.delay } : props.delay
 

package/src/components/widgets/CWidgetStatsA.ts

@@ -33,9 +33,7 @@ const CWidgetStatsA = defineComponent({
       h(
         CCard,
         {
-          class: [
-            { [`bg-${props.color}`]: props.color, 'text-high-emphasis-inverse': props.color },
-          ],
+          class: [{ [`bg-${props.color}`]: props.color, 'text-white': props.color }],
         },
         () => [
           h(

package/src/components/widgets/CWidgetStatsB.ts

@@ -57,7 +57,7 @@ const CWidgetStatsB = defineComponent({
         {
           class: [
             {
-              'text-high-emphasis-inverse': props.inverse,
+              'text-white': props.inverse,
             },
           ],
           color: props.color,
@@ -98,9 +98,7 @@ const CWidgetStatsB = defineComponent({
                 h(
                   'small',
                   {
-                    class: [
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
-                    ],
+                    class: [props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary'],
                   },
                   {
                     default: () => (slots.text && slots.text()) || props.text,

package/src/components/widgets/CWidgetStatsC.ts

@@ -75,7 +75,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-end mb-4',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   slots.icon && slots.icon(),
@@ -96,7 +96,7 @@ const CWidgetStatsC = defineComponent({
                   {
                     class: [
                       'text-uppercase fw-semibold small',
-                      props.inverse ? 'text-medium-emphasis-inverse' : 'text-medium-emphasis',
+                      props.inverse ? 'text-white text-opacity-75' : 'text-body-secondary',
                     ],
                   },
                   {

package/src/components/widgets/CWidgetStatsD.ts

@@ -74,7 +74,7 @@ const CWidgetStatsD = defineComponent({
                           h(CCol, { class: 'fs-5 fw-semibold' }, () => value.value),
                           h(
                             CCol,
-                            { class: 'text-uppercase text-medium-emphasis small' },
+                            { class: 'text-uppercase text-body-secondary small' },
                             () => value.title,
                           ),
                         ],

package/src/components/widgets/CWidgetStatsE.ts

@@ -35,7 +35,7 @@ const CWidgetStatsE = defineComponent({
               h(
                 'div',
                 {
-                  class: 'text-muted small text-uppercase font-weight-bold',
+                  class: 'text-body-secondary small text-uppercase font-weight-bold',
                 },
                 {
                   default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/CWidgetStatsF.ts

@@ -81,7 +81,7 @@ const CWidgetStatsF = defineComponent({
                     h(
                       'div',
                       {
-                        class: 'text-medium-emphasis text-uppercase fw-semibold small',
+                        class: 'text-body-secondary text-uppercase fw-semibold small',
                       },
                       {
                         default: () => (slots.title && slots.title()) || props.title,

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsE.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`Loads and display CWidgetStatsE component renders correctly 1`] = `
 "<div class="card">
   <div class="card-body text-center">
-    <div class="text-muted small text-uppercase font-weight-bold">title</div>
+    <div class="text-body-secondary small text-uppercase font-weight-bold">title</div>
     <div class="h2 py-3">value</div>chartdefault
   </div>
 </div>"

package/src/composables/index.ts

@@ -1,4 +1,5 @@
 import { useColorModes } from './useColorModes'
+import { useDebouncedCallback } from './useDebouncedCallback'
 import { usePopper } from './usePopper'
 
-export { useColorModes, usePopper }
+export { useColorModes, useDebouncedCallback, usePopper }

package/src/composables/useDebouncedCallback.ts

@@ -0,0 +1,16 @@
+import { ref } from 'vue'
+
+export const useDebouncedCallback = <F extends Function>(callback: F, delay: number) => {
+  const timeout = ref<ReturnType<typeof setTimeout>>()
+  const debouncedFn = (...args: any[]) => {
+    const handler = () => {
+      clearTimeout(timeout.value)
+      callback(...args)
+    }
+
+    clearTimeout(timeout.value)
+    timeout.value = setTimeout(handler, delay)
+  }
+
+  return debouncedFn()
+}

package/src/utils/isObjectInArray.ts

@@ -1,7 +1,7 @@
 const isObjectInArray = <T>(array: T[], item: T, ignore: string[] = []) =>
   array.some((_item: T) => {
     let result = true
-    for (const key in item) {
+    for (const key in _item) {
       if (!ignore.includes(key) && item[key] !== _item[key]) {
         result = false
         break