@coreui/vue-pro 5.10.0 → 5.12.0

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

@@ -287,6 +287,13 @@ const CSmartTable = defineComponent({
      * @property {number} itemsPerPageNumber - items per page number
      */
     'itemsPerPageChange',
+    /**
+     * Row checked callback.
+     *
+     * @property {object} item
+     * @property {boolean} value - true if row is checked, false otherwise
+     */
+    'rowChecked',
     /**
      * Row click callback.
      *
@@ -328,7 +335,7 @@ const CSmartTable = defineComponent({
     const items = ref<Item[]>(
       props.items.map((item: Item, index: number) => {
         return { ...item, _id: index }
-      }),
+      })
     )
     const itemsPerPage = ref<number>(props.itemsPerPage)
     const selected = ref<Item[]>([])
@@ -338,7 +345,7 @@ const CSmartTable = defineComponent({
         ? Array.isArray(props.sorterValue)
           ? props.sorterValue
           : [props.sorterValue]
-        : [],
+        : []
     )
     const tableFilterState = ref(props.tableFilterValue ?? '')
 
@@ -348,7 +355,7 @@ const CSmartTable = defineComponent({
       () => props.activePage,
       () => {
         activePage.value = props.activePage
-      },
+      }
     )
 
     watch(
@@ -357,7 +364,7 @@ const CSmartTable = defineComponent({
         if (props.columnFilterValue) {
           columnFilterState.value = props.columnFilterValue
         }
-      },
+      }
     )
 
     watch(
@@ -386,21 +393,21 @@ const CSmartTable = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     watch(
       () => props.itemsPerPage,
       () => {
         itemsPerPage.value = props.itemsPerPage
-      },
+      }
     )
 
     watch(
       () => props.selected,
       () => {
         selected.value = props.selected
-      },
+      }
     )
 
     watch(
@@ -411,7 +418,7 @@ const CSmartTable = defineComponent({
             ? props.sorterValue
             : [props.sorterValue]
         }
-      },
+      }
     )
 
     watch(itemsPerPage, () => {
@@ -445,7 +452,7 @@ const CSmartTable = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     onMounted(() => {
@@ -464,7 +471,7 @@ const CSmartTable = defineComponent({
           props.columns,
           props.columnSorter,
           itemsDataColumns.value,
-          columnNames.value,
+          columnNames.value
         )
       ) {
         return
@@ -523,13 +530,15 @@ const CSmartTable = defineComponent({
     }
 
     const handleRowChecked = (item: Item, value: boolean) => {
+      emit('rowChecked', item, value)
+      
       if (value && !isObjectInArray(selected.value, item, ITEM_INTERNAL_KEYS)) {
         selected.value = [...selected.value, item]
         return
       }
 
       selected.value = selected.value.filter(
-        (_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS),
+        (_item: Item) => !isObjectInArray([_item], item, ITEM_INTERNAL_KEYS)
       )
     }
 
@@ -546,12 +555,12 @@ const CSmartTable = defineComponent({
       }
 
       const selectable = items.value.filter(
-        (item) => item._selectable !== false || item._selected === true,
+        (item) => item._selectable !== false || item._selected === true
       )
 
       if (selectable.length === selected.value.length) {
         selected.value = items.value.filter(
-          (item) => item._selectable === false && item._selected === true,
+          (item) => item._selectable === false && item._selected === true
         )
         return
       }
@@ -616,7 +625,7 @@ const CSmartTable = defineComponent({
     const columnNames = computed(() => getColumnNames(props.columns, items.value))
 
     const itemsDataColumns = computed(() =>
-      columnNames.value.filter((name) => getColumnNamesFromItems(items.value).includes(name)),
+      columnNames.value.filter((name) => getColumnNamesFromItems(items.value).includes(name))
     )
 
     const filteredColumns = computed(() =>
@@ -624,8 +633,8 @@ const CSmartTable = defineComponent({
         items.value,
         props.columnFilter,
         columnFilterState.value,
-        itemsDataColumns.value,
-      ),
+        itemsDataColumns.value
+      )
     )
 
     const filteredTable = computed(() =>
@@ -633,8 +642,8 @@ const CSmartTable = defineComponent({
         filteredColumns.value,
         props.tableFilter,
         tableFilterState.value,
-        itemsDataColumns.value,
-      ),
+        itemsDataColumns.value
+      )
     )
 
     const sortedItems = computed(() =>
@@ -643,8 +652,8 @@ const CSmartTable = defineComponent({
         props.columnSorter,
         filteredTable.value,
         itemsDataColumns.value,
-        sorterState.value,
-      ),
+        sorterState.value
+      )
     )
 
     watch(sortedItems, () => {
@@ -652,20 +661,20 @@ const CSmartTable = defineComponent({
     })
 
     const numberOfPages = computed(() =>
-      itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1,
+      itemsPerPage.value ? Math.ceil(sortedItems.value.length / itemsPerPage.value) : 1
     )
 
     const firstItemOnActivePageIndex = computed(() =>
-      activePage.value ? (activePage.value - 1) * itemsPerPage.value : 0,
+      activePage.value ? (activePage.value - 1) * itemsPerPage.value : 0
     )
 
     const currentItems = computed(() =>
       activePage.value
         ? sortedItems.value.slice(
             firstItemOnActivePageIndex.value,
-            firstItemOnActivePageIndex.value + itemsPerPage.value,
+            firstItemOnActivePageIndex.value + itemsPerPage.value
           )
-        : sortedItems.value,
+        : sortedItems.value
     )
 
     return () =>
@@ -698,7 +707,7 @@ const CSmartTable = defineComponent({
                             },
                             {
                               default: () => props.tableFilterLabel,
-                            },
+                            }
                           ),
                           h(
                             'div',
@@ -709,22 +718,22 @@ const CSmartTable = defineComponent({
                               onInput: (e) => {
                                 handleTableFilterChange(
                                   (e.target as HTMLInputElement).value,
-                                  'input',
+                                  'input'
                                 )
                               },
                               onChange: (e) => {
                                 handleTableFilterChange(
                                   (e.target as HTMLInputElement).value,
-                                  'change',
+                                  'change'
                                 )
                               },
                               placeholder: props.tableFilterPlaceholder,
                               value: tableFilterState.value,
-                            }),
+                            })
                           ),
                         ],
-                      },
-                    ),
+                      }
+                    )
                 ),
               props.cleaner &&
                 h(
@@ -749,10 +758,10 @@ const CSmartTable = defineComponent({
                     },
                     slots.cleanerIcon
                       ? slots.cleanerIcon()
-                      : h(CIcon, { width: '18', content: cilFilterX }),
-                  ),
+                      : h(CIcon, { width: '18', content: cilFilterX })
+                  )
                 ),
-            ],
+            ]
           ),
         h(
           'div',
@@ -779,6 +788,7 @@ const CSmartTable = defineComponent({
                           columns: props.columns ?? columnNames.value,
                           columnSorter: props.columnSorter,
                           items: items.value,
+                          scopedSlots: slots,
                           selectable: props.selectable,
                           selectAll: props.selectAll,
                           selectedAll: selectedAll.value,
@@ -827,7 +837,7 @@ const CSmartTable = defineComponent({
                                   role: 'img',
                                   innerHTML: cilArrowBottom[1],
                                 }),
-                        },
+                        }
                       ),
                     h(CSmartTableBody, {
                       clickableRows: props.clickableRows,
@@ -841,7 +851,7 @@ const CSmartTable = defineComponent({
                         item: Item,
                         index: number,
                         columnName: string,
-                        event: MouseEvent | boolean,
+                        event: MouseEvent | boolean
                       ) => props.clickableRows && emit('rowClick', item, index, columnName, event),
                       scopedSlots: slots,
                       selectable: props.selectable,
@@ -856,6 +866,7 @@ const CSmartTable = defineComponent({
                         columnFilter: false,
                         columnSorter: false,
                         columns: props.columns ?? columnNames.value,
+                        scopedSlots: slots,
                         selectable: props.selectable,
                         selectAll: props.selectAll,
                         selectedAll: selectedAll.value,
@@ -886,16 +897,16 @@ const CSmartTable = defineComponent({
                                         {
                                           default: () =>
                                             typeof item === 'object' ? item.label : item,
-                                        },
-                                      ),
+                                        }
+                                      )
                                     ),
                                 ],
-                              },
+                              }
                             ),
-                        },
+                        }
                       ),
                   ],
-                },
+                }
               ),
               props.loading &&
                 h(
@@ -911,10 +922,10 @@ const CSmartTable = defineComponent({
                     ...(slots.elementCover && {
                       default: () => slots.elementCover && slots.elementCover(),
                     }),
-                  },
+                  }
                 ),
             ],
-          },
+          }
         ),
         (props.pagination || props.itemsPerPageSelect) &&
           h(
@@ -939,7 +950,7 @@ const CSmartTable = defineComponent({
                           ? emit('activePageChange', page)
                           : handleActivePageChange(page),
                     })
-                  : '',
+                  : ''
               ),
               props.itemsPerPageSelect &&
                 h(
@@ -961,7 +972,7 @@ const CSmartTable = defineComponent({
                           },
                           {
                             default: () => props.itemsPerPageLabel,
-                          },
+                          }
                         ),
                         h(
                           'div',
@@ -984,17 +995,17 @@ const CSmartTable = defineComponent({
                                       value: number,
                                       key: index,
                                     },
-                                    number,
+                                    number
                                   )
                                 }),
-                            },
-                          ),
+                            }
+                          )
                         ),
                       ],
-                    },
-                  ),
+                    }
+                  )
                 ),
-            ],
+            ]
           ),
       ])
   },

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

@@ -34,6 +34,7 @@ const CSmartTableHead = defineComponent({
       type: Array as PropType<Item[]>,
       default: () => [],
     },
+    scopedSlots: Object,
     selectable: Boolean,
     selectAll: [Boolean, Object] as PropType<boolean | { external?: boolean }>,
     selectedAll: [Boolean, String],
@@ -60,7 +61,7 @@ const CSmartTableHead = defineComponent({
       },
       {
         immediate: true,
-      },
+      }
     )
 
     watch([selectedAll, seleactAllCheckboxRef], () => {
@@ -87,7 +88,7 @@ const CSmartTableHead = defineComponent({
         return h(
           'span',
           { class: 'opacity-25 float-end me-1' },
-          slots.sortingIcon && slots.sortingIcon(),
+          slots.sortingIcon && slots.sortingIcon()
         )
       }
 
@@ -95,7 +96,7 @@ const CSmartTableHead = defineComponent({
         return h(
           'span',
           { class: 'float-end me-1' },
-          slots.sortingIconAscending && slots.sortingIconAscending(),
+          slots.sortingIconAscending && slots.sortingIconAscending()
         )
       }
 
@@ -103,7 +104,7 @@ const CSmartTableHead = defineComponent({
         return h(
           'span',
           { class: 'float-end me-1' },
-          slots.sortingIconDescending && slots.sortingIconDescending(),
+          slots.sortingIconDescending && slots.sortingIconDescending()
         )
       }
 
@@ -129,8 +130,8 @@ const CSmartTableHead = defineComponent({
                         colspan: cell.colspan,
                         ...getTableHeaderCellProps(cell),
                       },
-                      () => cell.label,
-                    ),
+                      () => cell.label
+                    )
                   ),
                 ]),
               ]),
@@ -153,7 +154,7 @@ const CSmartTableHead = defineComponent({
                             selectedAll.value = selectedAll.value !== 'reset' ? 'reset' : ''
                             emit('selectAllChecked')
                           },
-                        }),
+                        })
                     ),
                   columns.value.map((column, index: number) => {
                     const isSortable =
@@ -195,7 +196,13 @@ const CSmartTableHead = defineComponent({
                             {
                               class: 'd-inline',
                             },
-                            getColumnLabel(column),
+                            props.scopedSlots &&
+                              props.scopedSlots[getColumnKey(column)] &&
+                              typeof props.scopedSlots[`${getColumnKey(column)}Header`] === 'function'
+                              ? props.scopedSlots[`${getColumnKey(column)}Header`]({
+                                  label: getColumnLabel(column),
+                                })
+                              : getColumnLabel(column)
                           ),
                           props.columnSorter &&
                             (typeof column === 'object'
@@ -205,11 +212,11 @@ const CSmartTableHead = defineComponent({
                               : true) &&
                             columnSorterIcon(column),
                         ],
-                      },
+                      }
                     )
                   }),
                 ],
-              },
+              }
             ),
             props.columnFilter &&
               h(
@@ -238,7 +245,7 @@ const CSmartTableHead = defineComponent({
                                     getColumnValues(props.items, getColumnKey(column)),
                                     (value: any) => {
                                       emit('customFilterChange', getColumnKey(column), value)
-                                    },
+                                    }
                                   )
                                 : h(CFormInput, {
                                     size: 'sm',
@@ -246,18 +253,18 @@ const CSmartTableHead = defineComponent({
                                       emit(
                                         'filterInput',
                                         getColumnKey(column),
-                                        (event.target as HTMLInputElement).value,
+                                        (event.target as HTMLInputElement).value
                                       )
                                     },
                                     onChange: (event: Event) => {
                                       emit(
                                         'filterChange',
                                         getColumnKey(column),
-                                        (event.target as HTMLInputElement).value,
+                                        (event.target as HTMLInputElement).value
                                       )
                                     },
                                     'aria-label': `column name: '${getColumnLabel(
-                                      column,
+                                      column
                                     )}' filter input`,
                                     ...(props.columnFilterValue &&
                                       props.columnFilterValue[getColumnKey(column)] && {
@@ -265,14 +272,14 @@ const CSmartTableHead = defineComponent({
                                       }),
                                   })
                               : '',
-                        },
+                        }
                       )
                     }),
                   ],
-                },
+                }
               ),
           ],
-        },
+        }
       )
   },
 })