220 lines
5.0 KiB
JavaScript
220 lines
5.0 KiB
JavaScript
import { h } from 'vue';
|
|
import { ElCheckbox } from '../../checkbox/index.mjs';
|
|
import { ElIcon } from '../../icon/index.mjs';
|
|
import { ArrowRight, Loading } from '@element-plus/icons-vue';
|
|
import { isNumber, isBoolean } from '../../../utils/types.mjs';
|
|
import { isFunction } from '@vue/shared';
|
|
import { getProp } from '../../../utils/objects.mjs';
|
|
|
|
const defaultClassNames = {
|
|
selection: "table-column--selection",
|
|
expand: "table__expand-column"
|
|
};
|
|
const cellStarts = {
|
|
default: {
|
|
order: ""
|
|
},
|
|
selection: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: ""
|
|
},
|
|
expand: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: ""
|
|
},
|
|
index: {
|
|
width: 48,
|
|
minWidth: 48,
|
|
realWidth: 48,
|
|
order: ""
|
|
}
|
|
};
|
|
const getDefaultClassName = (type) => {
|
|
return defaultClassNames[type] || "";
|
|
};
|
|
const cellForced = {
|
|
selection: {
|
|
renderHeader({
|
|
store,
|
|
column
|
|
}) {
|
|
var _a;
|
|
function isDisabled() {
|
|
return store.states.data.value && store.states.data.value.length === 0;
|
|
}
|
|
return h(ElCheckbox, {
|
|
disabled: isDisabled(),
|
|
size: store.states.tableSize.value,
|
|
indeterminate: store.states.selection.value.length > 0 && !store.states.isAllSelected.value,
|
|
"onUpdate:modelValue": (_a = store.toggleAllSelection) != null ? _a : void 0,
|
|
modelValue: store.states.isAllSelected.value,
|
|
ariaLabel: column.label
|
|
});
|
|
},
|
|
renderCell({
|
|
row,
|
|
column,
|
|
store,
|
|
$index
|
|
}) {
|
|
return h(ElCheckbox, {
|
|
disabled: column.selectable ? !column.selectable.call(null, row, $index) : false,
|
|
size: store.states.tableSize.value,
|
|
onChange: () => {
|
|
store.commit("rowSelectedChanged", row);
|
|
},
|
|
onClick: (event) => event.stopPropagation(),
|
|
modelValue: store.isSelected(row),
|
|
ariaLabel: column.label
|
|
});
|
|
},
|
|
sortable: false,
|
|
resizable: false
|
|
},
|
|
index: {
|
|
renderHeader({
|
|
column
|
|
}) {
|
|
return column.label || "#";
|
|
},
|
|
renderCell({
|
|
column,
|
|
$index
|
|
}) {
|
|
let i = $index + 1;
|
|
const index = column.index;
|
|
if (isNumber(index)) {
|
|
i = $index + index;
|
|
} else if (isFunction(index)) {
|
|
i = index($index);
|
|
}
|
|
return h("div", {}, [i]);
|
|
},
|
|
sortable: false
|
|
},
|
|
expand: {
|
|
renderHeader({
|
|
column
|
|
}) {
|
|
return column.label || "";
|
|
},
|
|
renderCell({
|
|
column,
|
|
row,
|
|
store,
|
|
expanded
|
|
}) {
|
|
const { ns } = store;
|
|
const classes = [ns.e("expand-icon")];
|
|
if (!column.renderExpand && expanded) {
|
|
classes.push(ns.em("expand-icon", "expanded"));
|
|
}
|
|
const callback = function(e) {
|
|
e.stopPropagation();
|
|
store.toggleRowExpansion(row);
|
|
};
|
|
return h("div", {
|
|
class: classes,
|
|
onClick: callback
|
|
}, {
|
|
default: () => {
|
|
if (column.renderExpand) {
|
|
return [
|
|
column.renderExpand({
|
|
expanded
|
|
})
|
|
];
|
|
}
|
|
return [
|
|
h(ElIcon, null, {
|
|
default: () => {
|
|
return [h(ArrowRight)];
|
|
}
|
|
})
|
|
];
|
|
}
|
|
});
|
|
},
|
|
sortable: false,
|
|
resizable: false
|
|
}
|
|
};
|
|
function defaultRenderCell({
|
|
row,
|
|
column,
|
|
$index
|
|
}) {
|
|
var _a;
|
|
const property = column.property;
|
|
const value = property && getProp(row, property).value;
|
|
if (column && column.formatter) {
|
|
return column.formatter(row, column, value, $index);
|
|
}
|
|
return ((_a = value == null ? void 0 : value.toString) == null ? void 0 : _a.call(value)) || "";
|
|
}
|
|
function treeCellPrefix({
|
|
row,
|
|
treeNode,
|
|
store
|
|
}, createPlaceholder = false) {
|
|
const { ns } = store;
|
|
if (!treeNode) {
|
|
if (createPlaceholder) {
|
|
return [
|
|
h("span", {
|
|
class: ns.e("placeholder")
|
|
})
|
|
];
|
|
}
|
|
return null;
|
|
}
|
|
const ele = [];
|
|
const callback = function(e) {
|
|
e.stopPropagation();
|
|
if (treeNode.loading) {
|
|
return;
|
|
}
|
|
store.loadOrToggle(row);
|
|
};
|
|
if (treeNode.indent) {
|
|
ele.push(h("span", {
|
|
class: ns.e("indent"),
|
|
style: { "padding-left": `${treeNode.indent}px` }
|
|
}));
|
|
}
|
|
if (isBoolean(treeNode.expanded) && !treeNode.noLazyChildren) {
|
|
const expandClasses = [
|
|
ns.e("expand-icon"),
|
|
treeNode.expanded ? ns.em("expand-icon", "expanded") : ""
|
|
];
|
|
let icon = ArrowRight;
|
|
if (treeNode.loading) {
|
|
icon = Loading;
|
|
}
|
|
ele.push(h("div", {
|
|
class: expandClasses,
|
|
onClick: callback
|
|
}, {
|
|
default: () => {
|
|
return [
|
|
h(ElIcon, { class: { [ns.is("loading")]: treeNode.loading } }, {
|
|
default: () => [h(icon)]
|
|
})
|
|
];
|
|
}
|
|
}));
|
|
} else {
|
|
ele.push(h("span", {
|
|
class: ns.e("placeholder")
|
|
}));
|
|
}
|
|
return ele;
|
|
}
|
|
|
|
export { cellForced, cellStarts, defaultRenderCell, getDefaultClassName, treeCellPrefix };
|
|
//# sourceMappingURL=config.mjs.map
|