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