@coreui/vue-pro 5.4.0 → 5.6.0

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

@@ -91,8 +91,9 @@ const CSmartTable = defineComponent({
      * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
      *
      * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
-     * - external (Boolean) - Disables automatic sorting inside component.
-     * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
+     * - external (Boolean) - Disables automatic sorting inside the component, allowing for external sorting control.
+     * - multiple (Boolean) - Enables sorting by multiple columns simultaneously. The sorting order will be maintained across multiple columns based on the order of interaction.
+     * - resetable (Boolean) - If set to true, clicking on the sorter cycles through three states: ascending, descending, and null (no sorting). The third click on the sorter will reset the sorting and restore the table to its original order.
      */
     columnSorter: {
       type: [Boolean, Object] as PropType<boolean | Sorter>,
@@ -196,6 +197,7 @@ const CSmartTable = defineComponent({
      */
     selectAll: {
       type: [Boolean, Object] as PropType<boolean | { external?: boolean }>,
+      default: true,
     },
     /**
      * Array of selected objects, where each object represents one item - row in table.
@@ -213,7 +215,7 @@ const CSmartTable = defineComponent({
      * { column: 'status', state: 'asc' }
      */
     sorterValue: {
-      type: Object as PropType<SorterValue>,
+      type: [Array, Object] as PropType<SorterValue[] | SorterValue>,
     },
     /**
      * Properties to [CTableBody](https://coreui.io/vue/docs/components/table/#ctablebody) component.
@@ -309,7 +311,8 @@ const CSmartTable = defineComponent({
     /**
      * Sorter value change callback.
      *
-     * @property {object} SorterValue { column?: string, state?: number | string}
+     * @property {object} SorterValue | SorterValue[] { column?: string, state?: number | string}
+     * @property {array} SorterValue[]
      */
     'sorterChange',
     /**
@@ -327,13 +330,20 @@ const CSmartTable = defineComponent({
         return { ...item, _id: index }
       }),
     )
-    const itemsNumber = ref(props.itemsNumber)
-    const itemsPerPage = ref<number>(props.itemsPerPage || items.value.length)
+    const itemsPerPage = ref<number>(props.itemsPerPage)
     const selected = ref<Item[]>([])
     const selectedAll = ref<boolean | string>()
-    const sorterState = ref<SorterValue>(props.sorterValue || {})
+    const sorterState = ref<SorterValue[]>(
+      props.sorterValue
+        ? Array.isArray(props.sorterValue)
+          ? props.sorterValue
+          : [props.sorterValue]
+        : [],
+    )
     const tableFilterState = ref(props.tableFilterValue ?? '')
 
+    const itemsNumber = computed(() => props.itemsNumber ?? props.items.length)
+
     watch(
       () => props.activePage,
       () => {
@@ -353,10 +363,7 @@ const CSmartTable = defineComponent({
     watch(
       () => props.items,
       () => {
-        if (
-          props.items &&
-          props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value
-        ) {
+        if (props.items.length < itemsPerPage.value * activePage.value - itemsPerPage.value) {
           activePage.value = 1
         }
 
@@ -364,10 +371,10 @@ const CSmartTable = defineComponent({
           if (item._selected) {
             const _item = { ...item }
             for (const key of ITEM_INTERNAL_KEYS) {
-              delete _item[key]
+              delete _item[key] // Remove internal keys
             }
 
-            selected.value = [...selected.value, _item]
+            selected.value = [...selected.value, _item] // Add cleaned item to selected array
           }
         })
 
@@ -375,7 +382,6 @@ const CSmartTable = defineComponent({
           items.value = props.items.map((item: Item, index: number) => {
             return { ...item, _id: index }
           })
-          itemsNumber.value = props.itemsNumber || props.items.length
         }
       },
       {
@@ -383,13 +389,6 @@ const CSmartTable = defineComponent({
       },
     )
 
-    watch(
-      () => props.itemsNumber,
-      () => {
-        itemsNumber.value = props.itemsNumber
-      },
-    )
-
     watch(
       () => props.itemsPerPage,
       () => {
@@ -408,7 +407,9 @@ const CSmartTable = defineComponent({
       () => props.sorterValue,
       () => {
         if (props.sorterValue) {
-          sorterState.value = props.sorterValue
+          sorterState.value = Array.isArray(props.sorterValue)
+            ? props.sorterValue
+            : [props.sorterValue]
         }
       },
     )
@@ -469,36 +470,42 @@ const CSmartTable = defineComponent({
         return
       }
 
-      //if column changed or sort was descending change asc to true
-      const state = sorterState.value
+      const existingColumnState = sorterState.value.find((x) => x.column === column)
+      const multiple = typeof props.columnSorter === 'object' && props.columnSorter.multiple
 
-      if (order) {
-        state.state = order
-      }
+      // If the column already has a sort state
+      if (existingColumnState) {
+        // No need to update if the order is already the same
+        if (existingColumnState.state === order) {
+          return
+        }
 
-      if (state.column === column) {
-        if (order) {
-          state.state = order
-        } else if (state.state === 0) {
-          state.state = 'asc'
-        } else if (state.state === 'asc') {
-          state.state = 'desc'
+        // Remove the column from sorting if resetable and descending
+        if (
+          typeof props.columnSorter === 'object' &&
+          props.columnSorter.resetable &&
+          existingColumnState.state === 'desc' &&
+          order !== 'asc'
+        ) {
+          sorterState.value = multiple ? sorterState.value.filter((x) => x.column !== column) : []
         } else {
-          if (typeof props.columnSorter === 'object' && !props.columnSorter.resetable) {
-            state.state = 'asc'
-          } else {
-            state.state = 0
+          // Toggle between ascending and descending
+          const newState = {
+            column,
+            state: order || (existingColumnState.state === 'asc' ? 'desc' : 'asc'),
           }
+
+          sorterState.value = multiple
+            ? sorterState.value.map((item) => (item.column === column ? newState : item))
+            : [newState]
         }
       } else {
-        state.column = column
-        state.state = order || 'asc'
+        // If the column is not yet sorted, add it with the default or provided order
+        const newSorter = { column, state: order || 'asc' }
+        sorterState.value = multiple ? [...sorterState.value, newSorter] : [newSorter]
       }
 
-      sorterState.value.column = state.column
-      sorterState.value.state = state.state
-
-      emit('sorterChange', sorterState.value)
+      emit('sorterChange', multiple ? sorterState.value : sorterState.value[0])
     }
 
     const handleActivePageChange = (page: number) => {
@@ -527,13 +534,13 @@ const CSmartTable = defineComponent({
     }
 
     const handleSelectAllChecked = () => {
+      emit('selectAll')
+
       if (selectedAll.value === true) {
         selected.value = items.value.filter((item) => item._selectable === false)
         return
       }
 
-      emit('selectAll')
-
       if (props.selectAll && typeof props.selectAll === 'object' && props.selectAll.external) {
         return
       }
@@ -571,8 +578,16 @@ const CSmartTable = defineComponent({
         return
       }
 
+      const newState = { ...columnFilterState.value }
+
+      if (value === '') {
+        delete newState[colName]
+      } else {
+        newState[colName] = value
+      }
+
       activePage.value = 1
-      columnFilterState.value = { ...columnFilterState.value, [`${colName}`]: value }
+      columnFilterState.value = newState
 
       emit('columnFilterChange', columnFilterState.value)
     }
@@ -595,7 +610,7 @@ const CSmartTable = defineComponent({
     const handleClean = () => {
       tableFilterState.value = ''
       columnFilterState.value = {}
-      sorterState.value = {}
+      sorterState.value = []
     }
 
     const columnNames = computed(() => getColumnNames(props.columns, items.value))
@@ -623,7 +638,13 @@ const CSmartTable = defineComponent({
     )
 
     const sortedItems = computed(() =>
-      sortItems(props.columnSorter, filteredTable.value, itemsDataColumns.value, sorterState.value),
+      sortItems(
+        props.columns,
+        props.columnSorter,
+        filteredTable.value,
+        itemsDataColumns.value,
+        sorterState.value,
+      ),
     )
 
     watch(sortedItems, () => {
@@ -718,7 +739,7 @@ const CSmartTable = defineComponent({
                       class: 'btn btn-transparent',
                       ...(!(
                         tableFilterState.value ||
-                        sorterState.value.column ||
+                        sorterState.value.length > 0 ||
                         Object.values(columnFilterState.value).join('')
                       ) && { disabled: true, tabIndex: -1 }),
                       onClick: () => handleClean(),

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

@@ -1,4 +1,4 @@
-import { defineComponent, h, PropType } from 'vue'
+import { computed, defineComponent, h, PropType } from 'vue'
 
 import { CFormCheck } from '../form/'
 import { CTableBody, CTableDataCell, CTableRow } from '../table/'
@@ -22,12 +22,10 @@ const CSmartTableBody = defineComponent({
     columnNames: {
       type: Array as PropType<string[]>,
       default: () => [],
-      require: true,
     },
     columns: {
       type: Array as PropType<(Column | string)[]>,
       default: () => [],
-      require: true,
     },
     currentItems: {
       type: Array as PropType<Item[]>,
@@ -35,7 +33,6 @@ const CSmartTableBody = defineComponent({
     },
     firstItemOnActivePageIndex: {
       type: Number,
-      require: true,
       default: 0,
     },
     noItemsLabel: String,
@@ -46,7 +43,8 @@ const CSmartTableBody = defineComponent({
   emits: ['rowChecked', 'rowClick'],
   setup(props, { emit }) {
     const colspan: number = props.selectable ? props.columns.length + 1 : props.columns.length
-    const columns = getColumns(props.columns)
+    const columns = computed(() => getColumns(props.columns))
+
     return () =>
       h(
         CTableBody,
@@ -68,7 +66,7 @@ const CSmartTableBody = defineComponent({
                           item,
                           trIndex + props.firstItemOnActivePageIndex,
                           getClickedColumnName(
-                            event.target as HTMLTextAreaElement,
+                            event.target as HTMLElement,
                             props.columnNames,
                             props.selectable,
                           ),
@@ -90,7 +88,7 @@ const CSmartTableBody = defineComponent({
                               },
                             }),
                           ),
-                        columns.map((column) => {
+                        columns.value.map((column) => {
                           const colName = getColumnName(column)
                           return props.scopedSlots &&
                             props.scopedSlots[colName] &&

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

@@ -41,7 +41,10 @@ const CSmartTableHead = defineComponent({
       type: Boolean,
       default: true,
     },
-    sorterState: Object as PropType<SorterValue>,
+    sorterState: {
+      type: Array as PropType<SorterValue[]>,
+      default: () => [],
+    },
   },
   emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
   setup(props, { slots, emit }) {
@@ -137,21 +140,20 @@ const CSmartTableHead = defineComponent({
               {
                 default: () => [
                   props.selectable &&
-                    h(CTableHeaderCell, {}, () =>
-                      h('input', {
-                        class: 'form-check-input',
-                        type: 'checkbox',
-                        ref: seleactAllCheckboxRef,
-                        onClick: () => {
-                          if (selectedAll.value !== 'reset') {
-                            selectedAll.value = 'reset'
-                          } else {
-                            selectedAll.value = ''
-                          }
-
-                          emit('selectAllChecked')
-                        },
-                      }),
+                    h(
+                      CTableHeaderCell,
+                      {},
+                      () =>
+                        props.selectAll &&
+                        h('input', {
+                          class: 'form-check-input',
+                          type: 'checkbox',
+                          ref: seleactAllCheckboxRef,
+                          onClick: () => {
+                            selectedAll.value = selectedAll.value !== 'reset' ? 'reset' : ''
+                            emit('selectAllChecked')
+                          },
+                        }),
                     ),
                   columns.value.map((column, index: number) => {
                     const isSortable =

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

@@ -6,7 +6,7 @@ export type Column = {
   group?: string
   key: string
   label?: string
-  sorter?: boolean
+  sorter?: boolean | ((a: any, b: any) => number)
   _style?: any
   _props?: any
   _colStyle?: any
@@ -55,8 +55,9 @@ export type Pagination = {
 }
 
 export type Sorter = {
-  resetable?: boolean
   external?: boolean
+  multiple?: boolean
+  resetable?: boolean
 }
 
 export type ScopedColumns = {
@@ -65,8 +66,8 @@ export type ScopedColumns = {
 }
 
 export type SorterValue = {
-  column?: string
-  state?: number | string
+  column: string
+  state: 'asc' | 'desc' | 0
 }
 
 export type TableFilter = {