hongluan-ui
Version:
Hongluan Component Library for Vue 3
435 lines (430 loc) • 17.2 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
require('../../../hooks/index.js');
var lodashUnified = require('lodash-unified');
var sortable = require('./sortable.js');
var filter = require('./filter.js');
var row = require('./body/row.js');
var simpleTable = require('./simple-table2.js');
require('./composables/index.js');
var utils = require('./utils.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-namespace/index.js');
var useExpand = require('./composables/use-expand.js');
var useTooltip = require('./composables/use-tooltip.js');
var useTree = require('./composables/use-tree.js');
var useResizer = require('./composables/use-resizer.js');
var useScroll = require('./composables/use-scroll.js');
const _sfc_main = vue.defineComponent({
name: "SimpleTable",
components: { BodyRow: row["default"], SortableIcon: sortable["default"], FilterIcon: filter["default"] },
props: simpleTable.simpleTableProps,
emits: ["row-click", "cell-click", "sort-change", "expand", "tree-expand", "current-change"],
setup(props, { emit }) {
const { t } = index.useLocale();
const { namespace } = index$1.useNamespace("simple-table");
const tableRef = vue.ref();
const currentSelectedRow = vue.ref(null);
const fixedColumnsStyle = vue.ref("");
const hoverColIndex = vue.ref("");
const {
rowClassName,
rowStyle,
cellClassName,
cellStyle,
firstColumnIndex,
expandRowKeys,
defaultExpandAll,
cols
} = vue.toRefs(props);
const realColsInfo = vue.computed(() => utils.convertCols(lodashUnified.cloneDeep(cols.value)));
const slotNames = vue.computed(() => realColsInfo.value.realCols.filter((c) => c.slotName).map((c) => c.slotName));
const expandSlotNames = vue.computed(() => realColsInfo.value.realCols.filter((c) => {
var _a;
return (_a = c.expand) == null ? void 0 : _a.slotName;
}).map((c) => {
var _a;
return (_a = c.expand) == null ? void 0 : _a.slotName;
}));
const realData = vue.computed(() => {
var _a;
return (_a = props.data) != null ? _a : [];
});
const hasTreeData = vue.computed(() => realData.value.some((rd) => rd[props.treeProps.hasChildren] || Array.isArray(rd[props.treeProps.children]) && rd[props.treeProps.children].length));
const {
toggleExpandRow,
expandedKeyExisted,
toggleExpand
} = useExpand.useExpand({
expandRowKeys,
getRowKey,
defaultExpandAll
});
const {
isShowTooltipMap,
clearTooltip,
tdMouseover,
tdMouseleave
} = useTooltip.useTooltip(realColsInfo);
const {
tableTreeMap,
hasChildren,
toggleExpandTree,
walkTreeNode
} = useTree.useTree({
load: props.load,
treeProps: props.treeProps,
getRowKey,
expandRowKeys,
defaultExpandAll
});
useResizer.useResizer(props.resize, cols, tableRef);
const { scrollClass } = useScroll.useScroll(props.scrollContainer, realColsInfo, tableRef);
function getRowKey(row) {
const rowKey = props.rowKey;
if (!row)
throw new Error("Row is required when get row identity");
if (typeof rowKey === "string") {
if (rowKey.indexOf(".") < 0) {
return row[rowKey] + "";
}
const key = rowKey.split(".");
let current = row;
for (let i = 0; i < key.length; i++) {
current = current[key[i]];
}
return current + "";
} else if (typeof rowKey === "function") {
return rowKey.call(null, row);
}
}
const isShowCol = (col) => {
return !("$show$" in col) || col.$show$;
};
const toggleColumn = (index, show) => {
cols.value[index].$show$ = show != null ? show : !("$show$" in cols.value[index] ? cols.value[index].$show$ : true);
};
const getColFixed = (col, columnIndex) => {
var _a, _b;
const pos = (col2) => {
var _a2;
return typeof col2.fixed === "string" ? col2.fixed : (_a2 = col2.fixed) == null ? void 0 : _a2.position;
};
const result = {
hasShadow: false,
position: pos(col),
distance: typeof col.fixed === "string" ? 0 : ((_a = col.fixed) == null ? void 0 : _a.distance) === "auto" ? `var(--fixed-${pos(col)}-column-${columnIndex})` : (_b = col.fixed) == null ? void 0 : _b.distance
};
if (result.position === "left") {
result.hasShadow = lodashUnified.findLast(realColsInfo.value.realCols, (c) => pos(c) === "left") === col;
} else if (result.position === "right") {
result.hasShadow = realColsInfo.value.realCols.find((c) => pos(c) === "right") === col;
}
return result;
};
const getHeaderRowClass = ({ row, rowIndex }) => {
return typeof props.headerRowClassName === "string" ? props.headerRowClassName : props.headerRowClassName({ row, rowIndex });
};
const getHeaderRowStyle = ({ row, rowIndex }) => {
return typeof props.headerRowStyle === "function" ? props.headerRowStyle({ row, rowIndex }) : props.headerRowStyle;
};
const getHeaderCellClass = ({ row, column, rowIndex, columnIndex }) => {
return typeof props.headerCellClassName === "string" ? props.headerCellClassName : props.headerCellClassName({ row, column, rowIndex, columnIndex });
};
const getHeaderCellStyle = ({ row, column, rowIndex, columnIndex }) => {
return typeof props.headerCellStyle === "function" ? props.headerCellStyle({ row, column, rowIndex, columnIndex }) : props.headerCellStyle;
};
const rowClicked = (row, rowIndex, $event) => {
if (props.highlightCurrentRow) {
emit("current-change", row, lodashUnified.cloneDeep(currentSelectedRow.value));
currentSelectedRow.value = currentSelectedRow.value === row ? null : row;
}
emit("row-click", row, rowIndex, $event);
};
const setCurrentRow = (row) => {
if (props.highlightCurrentRow) {
emit("current-change", row, lodashUnified.cloneDeep(currentSelectedRow.value));
currentSelectedRow.value = row != null ? row : null;
}
};
const getSpan = ({ row, column, rowIndex, columnIndex }) => {
const span = { rowspan: 1, colspan: 1 };
if (props.spanMethod) {
const result = props.spanMethod({ row, column, rowIndex, columnIndex });
if (Array.isArray(result)) {
span.rowspan = result[0];
span.colspan = result[1];
} else if (typeof result === "object") {
Object.assign(span, result);
}
}
return span;
};
const handleFixedAutoDistance = () => {
const rows = tableRef.value.rows;
const widths = [];
if (!rows.length)
return;
const cellLen = rows[0].cells.length;
for (let i = 0; i < cellLen; i++) {
widths[i] = rows[0].cells[i].offsetWidth;
}
const fixedColumns = [];
for (let j = 0, fixedLeftWidth = 0, fixedRightWidth = 0; j < cellLen; j++) {
const lastIdx = cellLen - j - 1;
let cell = rows[0].cells[j];
if (cell.classList.contains("fixed-left")) {
if (cell.style.getPropertyValue("--table-fixed-distance").startsWith("var(--fixed")) {
fixedColumns.push(`--fixed-left-column-${j}:${fixedLeftWidth}px`);
}
fixedLeftWidth += widths[j];
}
cell = rows[0].cells[lastIdx];
if (cell.classList.contains("fixed-right")) {
if (cell.style.getPropertyValue("--table-fixed-distance").startsWith("var(--fixed")) {
fixedColumns.push(`--fixed-right-column-${cellLen - j - 1}:${fixedRightWidth}px`);
}
fixedRightWidth += widths[lastIdx];
}
}
fixedColumnsStyle.value = fixedColumns.join(";");
};
vue.watch(realData, () => {
walkTreeNode(realData.value);
});
vue.onMounted(() => {
walkTreeNode(realData.value);
handleFixedAutoDistance();
});
vue.provide(simpleTable.simpleTableContextKey, {
rowClassName,
rowStyle,
cellClassName,
cellStyle,
firstColumnIndex,
load: props.load,
getSpan,
currentSelectedRow,
slotNames,
expandSlotNames,
realColsInfo,
getRowKey,
toggleExpandRow,
expandedKeyExisted,
isShowTooltipMap,
tdMouseover,
tdMouseleave,
tableTreeMap,
hasChildren,
hasTreeData,
toggleExpandTree,
isShowCol,
getColFixed,
hoverColIndex
});
return {
t,
namespace,
tableRef,
fixedColumnsStyle,
isShowCol,
getColFixed,
realColsInfo,
slotNames,
expandSlotNames,
scrollClass,
realData,
getHeaderRowClass,
getHeaderRowStyle,
getHeaderCellClass,
getHeaderCellStyle,
setCurrentRow,
toggleExpand,
toggleExpandTree,
rowClicked,
toggleColumn,
clearTooltip,
hoverColIndex
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
var _a;
const _component_sortable_icon = vue.resolveComponent("sortable-icon");
const _component_filter_icon = vue.resolveComponent("filter-icon");
const _component_body_row = vue.resolveComponent("body-row");
return vue.openBlock(), vue.createElementBlock("table", {
ref: "tableRef",
class: vue.normalizeClass([
_ctx.namespace,
_ctx.size,
_ctx.border,
{
"hover": _ctx.hover,
"list": _ctx.list,
"auto-height": _ctx.autoHeight,
"table-fixed": _ctx.tableFixed
},
_ctx.stripe == "even" ? "striped-even" : "",
_ctx.stripe == "odd" ? "striped-odd" : "",
typeof _ctx.stripe === "boolean" && _ctx.stripe ? "striped-odd" : "",
_ctx.scrollClass
]),
style: vue.normalizeStyle([
_ctx.padding ? `--table-padding: ${_ctx.padding}` : "",
_ctx.cellPadding ? `--table-td-padding: ${_ctx.cellPadding}` : "",
_ctx.gap ? `--table-gap: ${_ctx.gap}` : "",
_ctx.gapX ? `--table-gap-x: ${_ctx.gapX}` : "",
_ctx.gapY ? `--table-gap-y: ${_ctx.gapY}` : "",
_ctx.fixedColumnsStyle
])
}, [
_ctx.crossHover ? (vue.openBlock(), vue.createElementBlock("colgroup", { key: 0 }, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.realColsInfo.realCols, (c, cIdx) => {
return vue.openBlock(), vue.createElementBlock("col", {
key: cIdx,
class: vue.normalizeClass({ hover: cIdx === _ctx.hoverColIndex })
}, null, 2);
}), 128))
])) : vue.createCommentVNode("v-if", true),
_ctx.showHeader ? (vue.openBlock(), vue.createElementBlock("thead", {
key: 1,
class: vue.normalizeClass({ "fixed-top": _ctx.fixedHeader })
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.realColsInfo.headerRows, (row, rowIndex) => {
return vue.openBlock(), vue.createElementBlock("tr", {
key: rowIndex,
class: vue.normalizeClass(_ctx.getHeaderRowClass({ row, rowIndex })),
style: vue.normalizeStyle(_ctx.getHeaderRowStyle({ row, rowIndex }))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(row, (column, columnIndex) => {
var _a2;
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("th", {
key: `${rowIndex}-${column.id}-thead`,
rowspan: column.rowSpan,
colspan: column.colSpan,
style: vue.normalizeStyle([
{
"width": column.width ? column.width : false,
"min-width": column.minWidth ? column.minWidth : false,
"max-width": column.maxWidth ? column.maxWidth : false,
..._ctx.getHeaderCellStyle({ row, column, rowIndex, columnIndex })
},
!!column.fixed && _ctx.getColFixed(column, columnIndex).distance ? "--table-fixed-distance:" + _ctx.getColFixed(column, columnIndex).distance : ""
]),
class: vue.normalizeClass([
{
["fixed-" + _ctx.getColFixed(column).position]: !!column.fixed,
"show-shadow": _ctx.getColFixed(column).hasShadow
},
_ctx.getHeaderCellClass({ row, column, rowIndex, columnIndex })
])
}, [
column.headerSlotName ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "cell",
style: vue.normalizeStyle(column.align ? `justify-content:${column.align}` : "")
}, [
vue.renderSlot(_ctx.$slots, column.headerSlotName, {
col: { ...column, columnIndex }
})
], 4)) : (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
class: "cell",
style: vue.normalizeStyle(column.align ? `justify-content:${column.align}` : "")
}, [
vue.createTextVNode(vue.toDisplayString(column.title) + " ", 1),
vue.createVNode(_component_sortable_icon, {
sortable: column.sortable,
onSortChange: (val) => _ctx.$emit("sort-change", column.prop, val)
}, null, 8, ["sortable", "onSortChange"]),
((_a2 = column.filter) == null ? void 0 : _a2.slotName) ? (vue.openBlock(), vue.createBlock(_component_filter_icon, {
key: 0,
placement: column.filter.placement,
effect: column.filter.effect,
"popper-class": column.filter.popperClass,
trigger: column.filter.trigger
}, {
default: vue.withCtx(({ close }) => [
vue.renderSlot(_ctx.$slots, column.filter.slotName, { close })
]),
_: 2
}, 1032, ["placement", "effect", "popper-class", "trigger"])) : vue.createCommentVNode("v-if", true)
], 4))
], 14, ["rowspan", "colspan"])), [
[vue.vShow, _ctx.isShowCol(column)]
]);
}), 128))
], 6);
}), 128))
], 2)) : vue.createCommentVNode("v-if", true),
vue.createElementVNode("tbody", null, [
vue.createVNode(_component_body_row, {
data: _ctx.realData,
onRowClick: (...args) => _ctx.rowClicked(...args),
onCellClick: (...args) => _ctx.$emit("cell-click", ...args)
}, vue.createSlots({ _: 2 }, [
vue.renderList(_ctx.slotNames, (name) => {
return {
name,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
}),
vue.renderList(_ctx.expandSlotNames, (name) => {
return {
name,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
})
]), 1032, ["data", "onRowClick", "onCellClick"]),
_ctx.$slots.more ? (vue.openBlock(), vue.createElementBlock("tr", {
key: 0,
class: "more-content"
}, [
vue.createElementVNode("td", {
colspan: _ctx.realColsInfo.realCols.length
}, [
vue.renderSlot(_ctx.$slots, "more", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.t("hl.select.loading")), 1)
])
], 8, ["colspan"])
])) : vue.createCommentVNode("v-if", true),
((_a = _ctx.data) == null ? void 0 : _a.length) === 0 ? (vue.openBlock(), vue.createElementBlock("tr", {
key: 1,
class: "empty-content"
}, [
vue.createElementVNode("td", {
colspan: _ctx.realColsInfo.realCols.length
}, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode(vue.toDisplayString(_ctx.t("hl.simpletable.emptyText")), 1)
])
], 8, ["colspan"])
])) : vue.createCommentVNode("v-if", true),
_ctx.data === null || _ctx.data === void 0 ? (vue.openBlock(), vue.createElementBlock("tr", {
key: 2,
class: "unknown-content"
}, [
vue.createElementVNode("td", {
colspan: _ctx.realColsInfo.realCols.length
}, [
vue.renderSlot(_ctx.$slots, "unknown")
], 8, ["colspan"])
])) : vue.createCommentVNode("v-if", true)
]),
vue.createElementVNode("tfoot", {
class: vue.normalizeClass({ "fixed-bottom": _ctx.fixedFooter })
}, [
vue.renderSlot(_ctx.$slots, "foot")
], 2)
], 6);
}
var SimpleTable = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = SimpleTable;
//# sourceMappingURL=simple-table.js.map