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

UI Components Library for Vue.js

'use strict';

var vue = require('vue');
require('../form/CForm.js');
var CFormCheck = require('../form/CFormCheck.js');
require('../form/CFormFeedback.js');
require('../form/CFormFloating.js');
require('../form/CFormInput.js');
require('../form/CFormLabel.js');
require('../form/CFormRange.js');
require('../form/CFormSelect.js');
require('../form/CFormSwitch.js');
require('../form/CFormText.js');
require('../form/CFormTextarea.js');
require('../form/CInputGroup.js');
require('../form/CInputGroupText.js');
require('../table/CTable.js');
var CTableBody = require('../table/CTableBody.js');
require('../table/CTableCaption.js');
var CTableDataCell = require('../table/CTableDataCell.js');
require('../table/CTableFoot.js');
require('../table/CTableHead.js');
require('../table/CTableHeaderCell.js');
var CTableRow = require('../table/CTableRow.js');
var isObjectInArray = require('../../utils/isObjectInArray.js');
var consts = require('./consts.js');
var utils = require('./utils.js');

const CSmartTableBody = vue.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 = vue.computed(() => utils.getColumns(props.columns));
        return () => vue.h(CTableBody.CTableBody, {
            ...(props.clickableRows && { style: 'cursor:pointer;' }),
        }, {
            default: () => props.currentItems.length > 0
                ? props.currentItems.map((item, trIndex) => [
                    vue.h(CTableRow.CTableRow, {
                        ...(item._props && { ...item._props }),
                        ...(props.clickableRows && { tabindex: 0 }),
                        onClick: (event) => {
                            emit('rowClick', item, trIndex + props.firstItemOnActivePageIndex, utils.getClickedColumnName(event.target, props.columnNames, props.selectable), event);
                        },
                    }, {
                        default: () => [
                            props.selectable &&
                                vue.h(CTableDataCell.CTableDataCell, {}, () => vue.h(CFormCheck.CFormCheck, {
                                    checked: props.selected &&
                                        isObjectInArray.default(props.selected, item, consts.ITEM_INTERNAL_KEYS),
                                    disabled: item._selectable === false,
                                    onChange: (event) => {
                                        emit('rowChecked', item, event.target.checked);
                                    },
                                })),
                            columns.value.map((column) => {
                                const colName = utils.getColumnName(column);
                                return props.scopedSlots &&
                                    props.scopedSlots[colName] &&
                                    typeof props.scopedSlots[colName] === 'function'
                                    ? vue.h(props.scopedSlots[colName], { item: item })
                                    : typeof item[colName] !== 'undefined' &&
                                        vue.h(CTableDataCell.CTableDataCell, {
                                            ...utils.getTableDataCellProps(column, item, colName),
                                            style: utils.getTableDataCellStyles(column, item, colName),
                                        }, {
                                            default: () => String(item[colName]),
                                        });
                            }),
                        ],
                    }),
                    props.scopedSlots &&
                        props.scopedSlots['details'] && [
                        vue.h(CTableRow.CTableRow, {
                            colspan: props.selectable
                                ? props.columnNames.length + 1
                                : props.columnNames.length,
                            class: 'p-0',
                            style: { 'border-bottom-width': '0' },
                            tabindex: '-1',
                        }),
                        vue.h(CTableRow.CTableRow, {
                            class: 'p-0',
                            key: `details${trIndex}`,
                        }, {
                            default: () => vue.h(CTableDataCell.CTableDataCell, {
                                colspan: props.selectable
                                    ? props.columnNames.length + 1
                                    : props.columnNames.length,
                                class: 'p-0',
                                style: { border: 0 },
                            }, {
                                default: () => props.scopedSlots &&
                                    props.scopedSlots['details'] &&
                                    vue.h(props.scopedSlots['details'], {
                                        item: item,
                                    }),
                            }),
                        }),
                    ],
                ])
                : vue.h(CTableRow.CTableRow, {}, {
                    default: () => vue.h(CTableDataCell.CTableDataCell, { colspan: colspan }, {
                        default: () => props.noItemsLabel,
                    }),
                }),
        });
    },
});

exports.CSmartTableBody = CSmartTableBody;
//# sourceMappingURL=CSmartTableBody.js.map