@coreui/vue-pro/dist/esm/components/smart-table/CSmartTableBody.js

UI Components Library for Vue.js

import { defineComponent, computed, h } from 'vue';
import '../form/CForm.js';
import { CFormCheck } from '../form/CFormCheck.js';
import '../form/CFormFeedback.js';
import '../form/CFormFloating.js';
import '../form/CFormInput.js';
import '../form/CFormLabel.js';
import '../form/CFormRange.js';
import '../form/CFormSelect.js';
import '../form/CFormSwitch.js';
import '../form/CFormText.js';
import '../form/CFormTextarea.js';
import '../form/CInputGroup.js';
import '../form/CInputGroupText.js';
import '../table/CTable.js';
import { CTableBody } from '../table/CTableBody.js';
import '../table/CTableCaption.js';
import { CTableDataCell } from '../table/CTableDataCell.js';
import '../table/CTableFoot.js';
import '../table/CTableHead.js';
import '../table/CTableHeaderCell.js';
import { CTableRow } from '../table/CTableRow.js';
import isObjectInArray from '../../utils/isObjectInArray.js';
import { ITEM_INTERNAL_KEYS } from './consts.js';
import { getColumns, getClickedColumnName, getColumnName, getTableDataCellProps, getTableDataCellStyles } from './utils.js';

const CSmartTableBody = defineComponent({
    name: 'CSmartTableBody',
    props: {
        clickableRows: Boolean,
        columnNames: {
            type: Array,
            default: () => [],
        },
        columns: {
            type: Array,
            default: () => [],
        },
        currentItems: {
            type: Array,
            default: () => [],
        },
        firstItemOnActivePageIndex: {
            type: Number,
            default: 0,
        },
        noItemsLabel: String,
        scopedSlots: Object,
        selectable: Boolean,
        selected: Array,
    },
    emits: ['rowChecked', 'rowClick'],
    setup(props, { emit }) {
        const colspan = props.selectable ? props.columns.length + 1 : props.columns.length;
        const columns = computed(() => getColumns(props.columns));
        return () => h(CTableBody, {
            ...(props.clickableRows && { style: 'cursor:pointer;' }),
        }, {
            default: () => props.currentItems.length > 0
                ? props.currentItems.map((item, trIndex) => [
                    h(CTableRow, {
                        ...(item._props && { ...item._props }),
                        ...(props.clickableRows && { tabindex: 0 }),
                        onClick: (event) => {
                            emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, getClickedColumnName(event.target, props.columnNames, props.selectable), event);
                        },
                    }, {
                        default: () => [
                            props.selectable &&
                                h(CTableDataCell, {}, () => h(CFormCheck, {
                                    checked: props.selected &&
                                        isObjectInArray(props.selected, item, ITEM_INTERNAL_KEYS),
                                    disabled: item._selectable === false,
                                    onChange: (event) => {
                                        emit('rowChecked', item, event.target.checked);
                                    },
                                })),
                            columns.value.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(column, item, colName),
                                            style: getTableDataCellStyles(column, 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}`,
                        }, {
                            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,
                    }),
                }),
        });
    },
});

export { CSmartTableBody };
//# sourceMappingURL=CSmartTableBody.js.map