@coreui/vue-pro
Version:
UI Components Library for Vue.js
214 lines (210 loc) • 10.7 kB
JavaScript
;
var vue = require('vue');
require('../form/CForm.js');
require('../form/CFormCheck.js');
require('../form/CFormFeedback.js');
require('../form/CFormFloating.js');
var CFormInput = 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');
require('../table/CTableBody.js');
require('../table/CTableCaption.js');
require('../table/CTableDataCell.js');
var CTableFoot = require('../table/CTableFoot.js');
var CTableHead = require('../table/CTableHead.js');
var CTableHeaderCell = require('../table/CTableHeaderCell.js');
var CTableRow = require('../table/CTableRow.js');
var utils = require('./utils.js');
const CSmartTableHead = vue.defineComponent({
name: 'CSmartTableHead',
props: {
as: {
type: String,
default: 'head',
},
columnFilter: [Boolean, Object],
columnFilterValue: Object,
columnSorter: [Boolean, Object],
columns: {
type: Array,
default: () => [],
},
items: {
type: Array,
default: () => [],
},
selectable: Boolean,
selectAll: [Boolean, Object],
selectedAll: [Boolean, String],
showGroups: {
type: Boolean,
default: true,
},
sorterState: {
type: Array,
default: () => [],
}
},
emits: ['customFilterChange', 'filterInput', 'filterChange', 'selectAllChecked', 'sortClick'],
setup(props, { slots, emit }) {
const selectedAll = vue.ref();
const seleactAllCheckboxRef = vue.ref();
const columns = vue.computed(() => utils.getColumns(props.columns));
const groups = vue.computed(() => utils.getColumnGroups(props.columns));
vue.watch(() => props.selectedAll, () => {
selectedAll.value = props.selectedAll;
}, {
immediate: true,
});
vue.watch([selectedAll, seleactAllCheckboxRef], () => {
if (seleactAllCheckboxRef.value && props.selectedAll === true) {
seleactAllCheckboxRef.value.indeterminate = false;
seleactAllCheckboxRef.value.checked = true;
return;
}
if (seleactAllCheckboxRef.value && props.selectedAll === 'indeterminate') {
seleactAllCheckboxRef.value.checked = false;
seleactAllCheckboxRef.value.indeterminate = true;
return;
}
if (seleactAllCheckboxRef.value) {
seleactAllCheckboxRef.value.indeterminate = false;
seleactAllCheckboxRef.value.checked = false;
}
});
const columnSorterIcon = (column) => {
if (utils.getColumnSorterState(utils.getColumnKey(column), props.sorterState) === 0) {
return vue.h('span', { class: 'opacity-25 float-end me-1' }, slots.sortingIcon && slots.sortingIcon());
}
if (utils.getColumnSorterState(utils.getColumnKey(column), props.sorterState) === 'asc') {
return vue.h('span', { class: 'float-end me-1' }, slots.sortingIconAscending && slots.sortingIconAscending());
}
if (utils.getColumnSorterState(utils.getColumnKey(column), props.sorterState) === 'desc') {
return vue.h('span', { class: 'float-end me-1' }, slots.sortingIconDescending && slots.sortingIconDescending());
}
return;
};
return () => vue.h(props.as === 'head' ? CTableHead.CTableHead : CTableFoot.CTableFoot, {}, {
default: () => [
props.showGroups &&
groups.value &&
groups.value.length > 0 &&
groups.value.map((row) => [
vue.h(CTableRow.CTableRow, {}, () => [
props.selectable && vue.h(CTableHeaderCell.CTableHeaderCell),
row.map((cell) => vue.h(CTableHeaderCell.CTableHeaderCell, {
colspan: cell.colspan,
...utils.getTableHeaderCellProps(cell),
}, () => cell.label)),
]),
]),
vue.h(CTableRow.CTableRow, {}, {
default: () => [
props.selectable &&
vue.h(CTableHeaderCell.CTableHeaderCell, {}, () => vue.h('input', {
class: 'form-check-input',
type: 'checkbox',
ref: seleactAllCheckboxRef,
onClick: () => {
if (selectedAll.value !== 'reset') {
selectedAll.value = 'reset';
}
else {
selectedAll.value = '';
}
emit('selectAllChecked');
},
})),
columns.value.map((column, index) => {
const isSortable = props.columnSorter &&
(typeof column === 'object'
? column.sorter === undefined
? true
: column.sorter
: true);
return vue.h(CTableHeaderCell.CTableHeaderCell, {
...utils.getTableHeaderCellProps(column),
style: utils.getTableHeaderCellStyles(column, props.columnSorter),
...(isSortable && {
tabindex: 0,
onClick: () => emit('sortClick', utils.getColumnKey(column), index),
onKeydown: (event) => {
if (event.key === 'Enter') {
emit('sortClick', utils.getColumnKey(column), index);
}
if (event.key === 'ArrowUp') {
event.preventDefault();
emit('sortClick', utils.getColumnKey(column), index, 'asc');
}
if (event.key === 'ArrowDown') {
event.preventDefault();
emit('sortClick', utils.getColumnKey(column), index, 'desc');
}
},
}),
}, {
default: () => [
vue.h('div', {
class: 'd-inline',
}, utils.getColumnLabel(column)),
props.columnSorter &&
(typeof column === 'object'
? typeof column.sorter === 'undefined'
? true
: column.sorter
: true) &&
columnSorterIcon(column),
],
});
}),
],
}),
props.columnFilter &&
vue.h(CTableRow.CTableRow, {}, {
default: () => [
props.selectable && vue.h(CTableHeaderCell.CTableHeaderCell),
columns.value.map((column) => {
return vue.h(CTableHeaderCell.CTableHeaderCell, {
...utils.getTableHeaderCellProps(column),
}, {
default: () => (typeof column === 'object'
? column.filter === undefined
? true
: column.filter
: true)
? typeof column !== 'string' && typeof column.filter === 'function'
? column.filter(utils.getColumnValues(props.items, utils.getColumnKey(column)), (value) => {
emit('customFilterChange', utils.getColumnKey(column), value);
})
: vue.h(CFormInput.CFormInput, {
size: 'sm',
onInput: (event) => {
emit('filterInput', utils.getColumnKey(column), event.target.value);
},
onChange: (event) => {
emit('filterChange', utils.getColumnKey(column), event.target.value);
},
'aria-label': `column name: '${utils.getColumnLabel(column)}' filter input`,
...(props.columnFilterValue &&
props.columnFilterValue[utils.getColumnKey(column)] && {
value: props.columnFilterValue[utils.getColumnKey(column)],
}),
})
: '',
});
}),
],
}),
],
});
},
});
exports.CSmartTableHead = CSmartTableHead;
//# sourceMappingURL=CSmartTableHead.js.map