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

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

@@ -1,76 +1,40 @@
 import { defineComponent, h, PropType } from 'vue'
 
-import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 import { CFormCheck } from '../form/'
+import { CTableBody, CTableDataCell, CTableRow } from '../table/'
 
-import { Item } from './CSmartTableInterface'
+import { getClickedColumnName, getTableDataCellProps, isObjectInArray } from './utils'
+
+import type { Item } from './types'
 
 const CSmartTableBody = defineComponent({
   name: 'CSmartTableBody',
   props: {
-    clickableRows: {
-      type: Boolean,
-      require: false,
+    clickableRows: Boolean,
+    columnNames: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+      require: true,
     },
     currentItems: {
       type: Array as PropType<Item[]>,
       default: () => [],
-      required: false,
     },
     firstItemOnActivePageIndex: {
       type: Number,
       require: true,
       default: 0,
     },
-    noItemLabel: {
-      type: String,
-      default: undefined,
-      require: false,
-    },
-    rawColumnNames: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-      require: true,
-    },
-    scopedSlots: {
-      type: Object,
-      default: undefined,
-      require: false,
-    },
+    noItemsLabel: String,
+    scopedSlots: Object,
     selectable: Boolean,
+    selected: Array as PropType<Item[]>,
   },
   emits: ['rowChecked', 'rowClick'],
   setup(props, { emit }) {
-    const handleRowClick = (
-      item: Item,
-      index: number,
-      columnName: string,
-      event: MouseEvent | boolean,
-    ) => {
-      emit('rowClick', item, index, columnName, event)
-    }
-
-    const handleRowChecked = (id: number, value: boolean) => {
-      emit('rowChecked', id, value)
-    }
-
-    const tableDataCellProps = (item: Item, colName: string) => {
-      const props = item._cellProps && {
-        ...(item._cellProps['all'] && { ...item._cellProps['all'] }),
-        ...(item._cellProps[colName] && { ...item._cellProps[colName] }),
-      }
-
-      return props
-    }
-
-    const getColumnName = (event: MouseEvent): string => {
-      const target = event.target as HTMLTextAreaElement
-      const closest = target.closest('tr')
-      const children = closest ? Array.from(closest.children) : []
-      const clickedCell = children.filter((child) => child.contains(target))[0]
-      return props.rawColumnNames[children.indexOf(clickedCell)]
-    }
-
+    const colspan: number = props.selectable
+      ? props.columnNames.length + 1
+      : props.columnNames.length
     return () =>
       h(
         CTableBody,
@@ -79,102 +43,127 @@ const CSmartTableBody = defineComponent({
         },
         {
           default: () =>
-            props.currentItems.map((item: Item, trIndex) => [
-              h(
-                CTableRow,
-                {
-                  ...(item._props && { ...item._props }),
-                  ...(props.clickableRows && { tabindex: 0 }),
-                  onClick: (event: MouseEvent) =>
-                    handleRowClick(
-                      item,
-                      trIndex + props.firstItemOnActivePageIndex,
-                      getColumnName(event),
-                      event,
-                    ),
-                },
-                {
-                  default: () => [
-                    props.selectable &&
-                      h(CTableDataCell, {}, () =>
-                        h(CFormCheck, {
-                          checked: item._selected ? item._selected : false,
-                          onChange: (event: Event) =>
-                            handleRowChecked(item._id, (event.target as HTMLInputElement).checked),
-                        }),
-                      ),
-                    props.rawColumnNames.map((colName) =>
-                      props.scopedSlots &&
-                      props.scopedSlots[colName] &&
-                      typeof props.scopedSlots[colName] === 'function'
-                        ? h(props.scopedSlots[colName], { item: item })
-                        : h(
-                            CTableDataCell,
-                            {
-                              ...tableDataCellProps(item, colName),
-                            },
-                            {
-                              default: () => String(item[colName]),
-                            },
-                          ),
-                    ),
-                  ],
-                },
-              ),
-              props.scopedSlots &&
-                props.scopedSlots['details'] && [
-                  h(CTableRow, {
-                    colspan: props.selectable
-                      ? props.rawColumnNames.length + 1
-                      : props.rawColumnNames.length,
-                    class: 'p-0',
-                    style: { 'border-bottom-width': '0' },
-                    tabindex: '-1',
-                  }),
+            props.currentItems.length
+              ? props.currentItems.map((item: Item, trIndex) => [
                   h(
                     CTableRow,
                     {
-                      class: 'p-0',
-                      key: `details${trIndex}`,
-                      onClick: (event: MouseEvent) =>
-                        handleRowClick(
+                      ...(item._props && { ...item._props }),
+                      ...(props.clickableRows && { tabindex: 0 }),
+                      onClick: (event: MouseEvent) => {
+                        emit(
+                          'rowClick',
                           item,
                           trIndex + props.firstItemOnActivePageIndex,
-                          getColumnName(event),
-                          true,
-                        ),
+                          getClickedColumnName(
+                            event.target as HTMLTextAreaElement,
+                            props.columnNames,
+                          ),
+                          event,
+                        )
+                      },
                     },
                     {
-                      default: () =>
-                        h(
-                          CTableDataCell,
-                          {
-                            colspan: props.selectable
-                              ? props.rawColumnNames.length + 1
-                              : props.rawColumnNames.length,
-                            class: 'p-0',
-                            style: { border: 0 },
-                          },
-                          {
-                            default: () =>
-                              props.scopedSlots &&
-                              props.scopedSlots['details'] &&
-                              h(props.scopedSlots['details'], {
-                                item: item,
-                                onClick: (event: MouseEvent) =>
-                                  handleRowClick(
-                                    item,
-                                    trIndex + props.firstItemOnActivePageIndex,
-                                    getColumnName(event),
-                                    true,
-                                  ),
-                              }),
-                          },
+                      default: () => [
+                        props.selectable &&
+                          h(CTableDataCell, {}, () =>
+                            h(CFormCheck, {
+                              checked:
+                                props.selected &&
+                                isObjectInArray(props.selected, item, [
+                                  '_cellProps',
+                                  '_props',
+                                  '_selected',
+                                ]),
+                              onChange: (event: Event) => {
+                                emit('rowChecked', item, (event.target as HTMLInputElement).checked)
+                              },
+                            }),
+                          ),
+                        props.columnNames.map((colName) =>
+                          props.scopedSlots &&
+                          props.scopedSlots[colName] &&
+                          typeof props.scopedSlots[colName] === 'function'
+                            ? h(props.scopedSlots[colName], { item: item })
+                            : h(
+                                CTableDataCell,
+                                {
+                                  ...getTableDataCellProps(item, colName),
+                                },
+                                {
+                                  default: () => String(item[colName]),
+                                },
+                              ),
                         ),
+                      ],
                     },
                   ),
-                ],
-            ]),
+                  props.scopedSlots &&
+                    props.scopedSlots['details'] && [
+                      h(CTableRow, {
+                        colspan: props.selectable
+                          ? props.columnNames.length + 1
+                          : props.columnNames.length,
+                        class: 'p-0',
+                        style: { 'border-bottom-width': '0' },
+                        tabindex: '-1',
+                      }),
+                      h(
+                        CTableRow,
+                        {
+                          class: 'p-0',
+                          key: `details${trIndex}`,
+                          onClick: (event: MouseEvent) => {
+                            emit(
+                              'rowClick',
+                              item,
+                              trIndex + props.firstItemOnActivePageIndex,
+                              getClickedColumnName(
+                                event.target as HTMLTextAreaElement,
+                                props.columnNames,
+                              ),
+                              true,
+                            )
+                          },
+                        },
+                        {
+                          default: () =>
+                            h(
+                              CTableDataCell,
+                              {
+                                colspan: props.selectable
+                                  ? props.columnNames.length + 1
+                                  : props.columnNames.length,
+                                class: 'p-0',
+                                style: { border: 0 },
+                              },
+                              {
+                                default: () =>
+                                  props.scopedSlots &&
+                                  props.scopedSlots['details'] &&
+                                  h(props.scopedSlots['details'], {
+                                    item: item,
+                                  }),
+                              },
+                            ),
+                        },
+                      ),
+                    ],
+                ])
+              : h(
+                  CTableRow,
+                  {},
+                  {
+                    default: () =>
+                      h(
+                        CTableDataCell,
+                        { colspan: colspan },
+                        {
+                          default: () => props.noItemsLabel,
+                        },
+                      ),
+                  },
+                ),
         },
       )
   },

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

@@ -1,164 +1,70 @@
 import { defineComponent, h, PropType } from 'vue'
-import { CTableHead, CTableFoot } from '../table/'
-import { CTableHeaderCell } from '../table/CTableHeaderCell'
-import { CTableRow } from '../table/CTableRow'
 
 import { CFormCheck, CFormInput } from '../form/'
+import { CTableFoot, CTableHead, CTableHeaderCell, CTableRow } from '../table/'
 
 import {
-  Column,
-  ColumnFilter,
-  ColumnFilterValue,
-  Item,
-  Sorter,
-  SorterValue,
-} from './CSmartTableInterface'
+  getColumnKey,
+  getColumnLabel,
+  getColumnSorterState,
+  getColumnValues,
+  getTableHeaderCellProps,
+  getTableHeaderCellStyles,
+} from './utils'
+
+import type { Column, ColumnFilter, ColumnFilterValue, Item, Sorter, SorterValue } from './types'
 
 const CSmartTableHead = defineComponent({
   name: 'CSmartTableHead',
   props: {
-    clearSorterAndFilter: {
-      type: String,
-      require: false,
-      default: '',
-    },
-    columnFilter: {
-      type: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-      require: false,
-    },
-    columnFilterValue: {
-      type: Object as PropType<ColumnFilterValue>,
-      required: false,
-    },
-    columnSorter: {
-      type: [Boolean, Object] as PropType<boolean | Sorter>,
-      default: undefined,
-      require: false,
-    },
+    columnFilter: [Boolean, Object] as PropType<boolean | ColumnFilter>,
+    columnFilterValue: Object as PropType<ColumnFilterValue>,
+    columnSorter: [Boolean, Object] as PropType<boolean | Sorter>,
     component: {
       type: String,
       default: 'head',
-      require: false,
     },
     columns: {
       type: Array as PropType<(Column | string)[]>,
       default: () => [],
-      required: false,
     },
     items: {
       type: Array as PropType<Item[]>,
       default: () => [],
-      required: false,
     },
     selectable: Boolean,
-    selectAll: [Boolean, String],
-    sorterState: {
-      type: Object as PropType<SorterValue>,
-      default: undefined,
-      require: false,
-    },
+    selectAll: [Boolean, Object] as PropType<boolean | { external?: boolean }>,
+    selectedAll: [Boolean, String],
+    sorterState: Object as PropType<SorterValue>,
   },
   emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
   setup(props, { slots, emit }) {
-    const handleSortClick = (key: string, index: number) => {
-      emit('sortClick', key, index)
-    }
-
-    const tableHeaderCellProps = (column: Column | string) => {
-      if (typeof column === 'object' && column._props) {
-        return column._props
-      }
-      return {}
-    }
-
-    const tableHeaderCellStyles = (column: Column | string) => {
-      const style = { verticalAlign: 'middle', overflow: 'hidden', cursor: '' }
-      if (
-        props.columnSorter &&
-        (typeof column !== 'object' ||
-          (typeof column === 'object' && (typeof column.sorter === 'undefined' || column.sorter)))
-      ) {
-        style.cursor = 'pointer'
-      }
-
-      if (typeof column === 'object' && column._style) {
-        return { ...style, ...column._style }
-      }
-      return style
-    }
-
-    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)
-
-    const key = (column: Column | string) => (typeof column === 'object' ? column.key : column)
-
-    const getColumnSorterState = (key: string): string | number => {
-      if (props.sorterState && props.sorterState.column === key) {
-        if (props.sorterState.state) {
-          return props.sorterState.state
-        }
-        return 0
-      }
-      return 0
-    }
-
-    const getValues = (items: Item[], key: string) => {
-      return items.map((a) => a[key])
-    }
-
     const columnSorterIcon = (column: Column | string) => {
-      if (getColumnSorterState(key(column)) === 0) {
+      if (getColumnSorterState(getColumnKey(column), props.sorterState) === 0) {
         return h(
           'span',
           { class: 'opacity-25 float-end me-1' },
           slots.sortingIcon && slots.sortingIcon(),
         )
       }
-      if (getColumnSorterState(key(column)) === 'asc') {
+
+      if (getColumnSorterState(getColumnKey(column), props.sorterState) === 'asc') {
         return h(
           'span',
           { class: 'float-end me-1' },
           slots.sortingIconAscending && slots.sortingIconAscending(),
         )
       }
-      if (getColumnSorterState(key(column)) === 'desc') {
+
+      if (getColumnSorterState(getColumnKey(column), props.sorterState) === 'desc') {
         return h(
           'span',
           { class: 'float-end me-1' },
           slots.sortingIconDescending && slots.sortingIconDescending(),
         )
       }
-      return
-    }
 
-    const handleOnCustomFilterChange = (key: string, value: any) => {
-      emit('customFilterChange', key, value)
-    }
-
-    const handleFilterInput = (key: string, value: string) => {
-      emit('filterInput', key, value)
-    }
-
-    const handleFilterChange = (key: string, value: string) => {
-      emit('filterChange', key, value)
-    }
-
-    const handleSelectAllChecked = () => {
-      emit('selectAllChecked')
+      return
     }
 
     return () =>
@@ -175,18 +81,22 @@ const CSmartTableHead = defineComponent({
                   props.selectable &&
                     h(CTableHeaderCell, {}, () =>
                       h(CFormCheck, {
-                        checked: typeof props.selectAll === 'boolean' ? props.selectAll : false,
-                        indeterminate: props.selectAll === 'indeterminate' ? true : false,
-                        onChange: () => handleSelectAllChecked(),
+                        checked: typeof props.selectedAll === 'boolean' ? props.selectAll : false,
+                        indeterminate: props.selectedAll === 'indeterminate' ? true : false,
+                        onChange: () => {
+                          emit('selectAllChecked')
+                        },
                       }),
                     ),
                   props.columns.map((column, index: number) =>
                     h(
                       CTableHeaderCell,
                       {
-                        ...tableHeaderCellProps(column),
-                        onClick: () => handleSortClick(key(column), index),
-                        style: tableHeaderCellStyles(column),
+                        ...getTableHeaderCellProps(column),
+                        onClick: () => {
+                          emit('sortClick', getColumnKey(column), index)
+                        },
+                        style: getTableHeaderCellStyles(column, props.columnSorter),
                       },
                       {
                         default: () => [
@@ -195,7 +105,7 @@ const CSmartTableHead = defineComponent({
                             {
                               class: 'd-inline',
                             },
-                            label(column),
+                            getColumnLabel(column),
                           ),
                           props.columnSorter &&
                             (typeof column !== 'object'
@@ -222,7 +132,7 @@ const CSmartTableHead = defineComponent({
                       h(
                         CTableHeaderCell,
                         {
-                          ...tableHeaderCellProps(column),
+                          ...getTableHeaderCellProps(column),
                         },
                         {
                           default: () =>
@@ -234,25 +144,30 @@ const CSmartTableHead = defineComponent({
                                 : column.filter
                             )
                               ? typeof column !== 'string' && typeof column.filter === 'function'
-                                ? column.filter(getValues(props.items, key(column)), (value: any) =>
-                                    handleOnCustomFilterChange(key(column), value),
+                                ? column.filter(
+                                    getColumnValues(props.items, getColumnKey(column)),
+                                    (value: any) => {
+                                      emit('customFilterChange', getColumnKey(column), value)
+                                    },
                                   )
                                 : h(CFormInput, {
                                     size: 'sm',
-                                    onInput: (event: Event) =>
-                                      handleFilterInput(
-                                        key(column),
-                                        (event.target as HTMLInputElement).value,
-                                      ),
-                                    onChange: (event: Event) =>
-                                      handleFilterChange(
-                                        key(column),
+                                    onInput: (event: Event) => {
+                                      emit(
+                                        'filterInput',
+                                        getColumnKey(column),
                                         (event.target as HTMLInputElement).value,
-                                      ),
-                                    'aria-label': `column name: '${label(column)}' filter input`,
+                                      )
+                                    },
+                                    onChange: (event: Event) => {
+                                      emit('filterChange', (event.target as HTMLInputElement).value)
+                                    },
+                                    'aria-label': `column name: '${getColumnLabel(
+                                      column,
+                                    )}' filter input`,
                                     ...(props.columnFilterValue &&
-                                      props.columnFilterValue[key(column)] && {
-                                        value: props.columnFilterValue[key(column)],
+                                      props.columnFilterValue[getColumnKey(column)] && {
+                                        value: props.columnFilterValue[getColumnKey(column)],
                                       }),
                                   })
                               : '',

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

@@ -33,7 +33,7 @@ export type FooterItem = {
 
 export type Item = {
   [key: string]: number | string | any
-  _id: number
+  _cellProps?: any
   _props: Object
   _selected: boolean
 }

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

@@ -0,0 +1,61 @@
+import { VNode } from 'vue'
+
+export type Column = {
+  filter?: boolean | ((values: any[], onChange: (value: any) => void) => VNode)
+  key: string
+  label?: string
+  sorter?: boolean
+  _style?: any
+  _props?: any
+}
+
+export type ColumnFilter = {
+  lazy?: boolean
+  external?: boolean
+}
+
+export type ColumnFilterValue = {
+  [key: string]: any
+}
+
+export type FooterItem = {
+  label?: string
+  _props?: any
+}
+
+export type Item = {
+  [key: string]: number | string | any
+  _cellProps?: any
+  _props?: any
+  _selected?: boolean
+}
+
+export type ItemsPerPageSelect = {
+  external?: boolean
+  label?: string
+  values?: Array<number>
+}
+
+export type Pagination = {
+  external?: boolean
+}
+
+export type Sorter = {
+  resetable?: boolean
+  external?: boolean
+}
+
+export type ScopedColumns = {
+  [key: string]: any
+  details?: (a: Item, b: number) => VNode
+}
+
+export type SorterValue = {
+  column?: string
+  state?: number | string
+}
+
+export type TableFilter = {
+  lazy?: boolean
+  external?: boolean
+}