@opensig/opendesign
Version:
356 lines (355 loc) • 16.8 kB
JavaScript
;
const vue = require("vue");
require("../table/index.js");
const vueUtils = require("../_utils/vue-utils.js");
const index = require("../checkbox/index.js");
const icons = require("../_utils/icons.js");
const is = require("../_utils/is.js");
const helper = require("../_utils/helper.js");
const TableCellRenderer_vue_vue_type_script_setup_true_lang = require("./TableCellRenderer.vue.js");
const provide = require("./provide.js");
const utils = require("./utils.js");
const useTableMeta = require("../table/useTableMeta.js");
const _hoisted_1 = ["data-level"];
const _hoisted_2 = ["data-cell-index"];
const _hoisted_3 = { class: "o-table-cell__inner" };
const _hoisted_4 = {
key: 0,
class: "o-table-row-icon-placeholder"
};
const _hoisted_5 = {
key: 0,
class: "o-data-table-header-divider-v"
};
const _hoisted_6 = ["colspan"];
const _hoisted_7 = { class: "o-table-cell__inner o-table-expand-cell__inner" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "TableRow",
props: {
row: {},
rowIndex: {},
level: {}
},
setup(__props) {
const props = __props;
const { row, rowIndex, level } = vue.toRefs(props);
const slots = vue.useSlots();
const tdSlotNames = vue.computed(() => Object.keys(slots).filter((name) => name.startsWith("td_")));
const {
getRowKey,
data,
border,
headerStyle,
spanMethod,
selection,
checkStrictly,
dataColumns,
groupColumns,
hasExpandSlot,
expandMethod,
expandedRowKeys,
isBodyCellRemoved,
isLastLeftFixedCell,
isFirstRightFixedCell,
rowKeyMap,
toFilteredSelectable,
selectedKeys,
handleTableSelection,
handleLoadChildren
} = vue.inject(provide.dataTableInjectKey);
const { isLevelExpandable } = vue.inject(provide.dataTableRowInjectKey);
const rowKey = vue.computed(() => getRowKey(row.value, rowIndex.value));
const expandBy = vue.computed(() => {
if (hasExpandSlot.value || !is.isNil(expandMethod == null ? void 0 : expandMethod.value)) {
return "expand";
}
return "children";
});
const indeterminate = vue.computed(() => {
if (checkStrictly.value || selectedKeys.value.includes(rowKey.value)) {
return void 0;
}
const { descendantRowKeys } = rowKeyMap.value.get(rowKey.value);
const selectableDescendantRowKeys = toFilteredSelectable(descendantRowKeys);
const someChecked = selectableDescendantRowKeys.some((v) => selectedKeys.value.includes(v));
const someUncheck = selectableDescendantRowKeys.some((v) => !selectedKeys.value.includes(v));
return someChecked && someUncheck;
});
const handleRowSelection = (newVal) => {
if (checkStrictly.value) {
return;
}
const { ancestorRowKeys, descendantRowKeys } = rowKeyMap.value.get(rowKey.value);
let _selectedKeys = selectedKeys.value.filter((v) => !descendantRowKeys.includes(v));
if (newVal.includes(rowKey.value)) {
_selectedKeys.push(...toFilteredSelectable(descendantRowKeys));
} else {
_selectedKeys = _selectedKeys.filter((v) => !descendantRowKeys.includes(v));
}
ancestorRowKeys.forEach((v) => {
const { descendantRowKeys: ancestorDescendantRowKeys } = rowKeyMap.value.get(v);
if (toFilteredSelectable(ancestorDescendantRowKeys).every((x) => _selectedKeys.includes(x))) {
_selectedKeys.push(v);
} else {
_selectedKeys = _selectedKeys.filter((x) => x !== v);
}
});
selectedKeys.value = Array.from(new Set(_selectedKeys));
handleTableSelection(rowKey.value, newVal);
};
const expandLoading = vue.ref(false);
const isRowExpandable = vue.computed(() => {
if (!isLevelExpandable.value.expandable) {
return false;
}
return isLevelExpandable.value.expandableRowIndexes.includes(rowIndex.value);
});
const isRowExpanded = vue.computed(() => expandedRowKeys.value.includes(rowKey.value));
const toggleRowExpand = () => {
const index2 = expandedRowKeys.value.findIndex((v) => v === rowKey.value);
if (index2 !== -1) {
expandedRowKeys.value.splice(index2, 1);
return;
}
expandedRowKeys.value.push(rowKey.value);
};
vue.watch(
expandedRowKeys,
() => {
var _a;
const index2 = expandedRowKeys.value.findIndex((v) => v === rowKey.value);
if (index2 === -1) {
return;
}
if (!is.isArray(row.value.children) && row.value.children) {
return;
}
if (!row.value.hasChildren || ((_a = row.value.children) == null ? void 0 : _a.length)) {
return;
}
const { reject, resolve, promise } = helper.promiseWithResolvers();
expandLoading.value = true;
handleLoadChildren({ row: row.value, rowIndex: rowIndex.value, rowKey: rowKey.value, reject, resolve });
promise.catch(() => expandedRowKeys.value.splice(index2, 1)).finally(() => expandLoading.value = false);
},
{ deep: true }
);
vue.provide(provide.dataTableRowInjectKey, {
isLevelExpandable: vue.computed(() => utils.getIsLevelExpandable({ list: row.value.children, hasExpandSlot, expandMethod: expandMethod == null ? void 0 : expandMethod.value }))
});
return (_ctx, _cache) => {
var _a;
const _component_TableRow = vue.resolveComponent("TableRow", true);
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
null,
[
vue.createElementVNode("tr", {
class: vue.normalizeClass([
"o-table-row",
"o-table-body-row",
{
[vue.unref(useTableMeta.DEFAULT_ROW_LAST_MARKER)]: vue.unref(rowIndex) === vue.unref(data).length - 1 && !isRowExpandable.value,
"o-table-row-disabled": (_a = vue.unref(rowKeyMap).get(rowKey.value)) == null ? void 0 : _a.disabled
}
]),
"data-level": vue.unref(level)
}, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(dataColumns), (column, colIndex) => {
var _a2, _b, _c, _d;
return vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{
key: column.key
},
[
!vue.unref(isBodyCellRemoved)(vue.unref(rowIndex), colIndex) ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 0,
ref_for: true
}, (_a2 = vue.unref(spanMethod)) == null ? void 0 : _a2({ row: vue.unref(row), column, cellValue: vue.unref(utils.getCellValue)({ row: vue.unref(row), column }), rowIndex: vue.unref(rowIndex), colIndex }), {
class: {
"o-table-cell": true,
"o-table-body-cell": true,
"o-table-column-as-header": column.asHeader,
"o-cell-last-row": vue.unref(rowIndex) === vue.unref(data).length - 1 && !isRowExpandable.value,
"o-table-cell-fixed": column.fixed,
"o-table-cell-fixed-left": column.fixed === "left",
"o-table-cell-fixed-right": column.fixed === "right",
"o-table-cell-last-left-fixed": vue.unref(isLastLeftFixedCell)(vue.unref(rowIndex), colIndex),
"o-table-cell-first-right-fixed": vue.unref(isFirstRightFixedCell)(vue.unref(rowIndex), colIndex),
[vue.unref(useTableMeta.DEFAULT_CELL_FIRST_COL_MARKER)]: column.isFirstCol,
[vue.unref(useTableMeta.DEFAULT_CELL_LAST_COL_MARKER)]: column.isLastCol,
"o-table-cell-tooltip": column.showOverflowToolTip,
"o-table-cell-wrappable": vue.unref(is.isNumber)(column.showOverflowToolTip) && column.showOverflowToolTip > 1
},
style: {
...vue.unref(utils.getColumnPosition)({
column,
dataColumns: vue.unref(dataColumns),
groupColumns: vue.unref(groupColumns),
border: vue.unref(border),
colSpan: (_c = (_b = vue.unref(spanMethod)) == null ? void 0 : _b({ row: vue.unref(row), column, cellValue: vue.unref(utils.getCellValue)({ row: vue.unref(row), column }), rowIndex: vue.unref(rowIndex), colIndex })) == null ? void 0 : _c.colSpan
}),
"--cell-max-row": vue.unref(is.isNumber)(column.showOverflowToolTip) ? column.showOverflowToolTip : 1
},
"data-cell-index": `td_${vue.unref(rowIndex)}_${colIndex}`
}), [
vue.createElementVNode("span", _hoisted_3, [
column.isFirstCol && vue.unref(selection) ? (vue.openBlock(), vue.createBlock(vue.unref(index.OCheckbox), {
key: 0,
modelValue: vue.unref(selectedKeys),
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(selectedKeys) ? selectedKeys.value = $event : null),
indeterminate: indeterminate.value,
value: vue.unref(getRowKey)(vue.unref(row), vue.unref(rowIndex)),
disabled: (_d = vue.unref(rowKeyMap).get(rowKey.value)) == null ? void 0 : _d.disabled,
class: "o-table-row-checkbox",
onChange: handleRowSelection
}, null, 8, ["modelValue", "indeterminate", "value", "disabled"])) : vue.createCommentVNode("v-if", true),
column.isFirstCol ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
[
vue.unref(level) > 0 && !vue.unref(isLevelExpandable).expandable ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4)) : vue.createCommentVNode("v-if", true),
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(vue.unref(level), (i) => {
return vue.openBlock(), vue.createElementBlock("span", {
key: i,
class: "o-table-row-icon-placeholder"
});
}),
128
/* KEYED_FRAGMENT */
))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
column.isFirstCol && vue.unref(isLevelExpandable).expandable ? (vue.openBlock(), vue.createElementBlock(
vue.Fragment,
{ key: 2 },
[
expandLoading.value ? (vue.openBlock(), vue.createBlock(vue.unref(icons.IconLoadingSmall), {
key: 0,
class: "o-rotating o-table-row-expand-trigger loading"
})) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconChevronRightSmall), {
key: 1,
class: vue.normalizeClass({
"o-table-row-expand-trigger": true,
expandable: isRowExpandable.value,
expanded: isRowExpanded.value
}),
onClick: toggleRowExpand
}, null, 8, ["class"]))
],
64
/* STABLE_FRAGMENT */
)) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, `td_${column.key}`, {
row: vue.unref(row),
column,
cellValue: vue.unref(utils.getCellValue)({ row: vue.unref(row), column }),
index: vue.unref(rowIndex)
}, () => [
vue.createVNode(TableCellRenderer_vue_vue_type_script_setup_true_lang, {
row: vue.unref(row),
column,
"cell-value": vue.unref(utils.getCellValue)({ row: vue.unref(row), column }),
"row-index": vue.unref(rowIndex),
"col-index": colIndex
}, null, 8, ["row", "column", "cell-value", "row-index", "col-index"])
])
]),
vue.unref(headerStyle) === "split-line" && column.asHeader ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5)) : vue.createCommentVNode("v-if", true)
], 16, _hoisted_2)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
}),
128
/* KEYED_FRAGMENT */
))
], 10, _hoisted_1),
isRowExpandable.value && expandBy.value === "expand" && isRowExpanded.value ? (vue.openBlock(), vue.createElementBlock(
"tr",
{
key: 0,
class: vue.normalizeClass([
"o-table-row",
"o-table-body-row",
"o-table-row-expand",
{
[vue.unref(useTableMeta.DEFAULT_ROW_LAST_MARKER)]: vue.unref(rowIndex) === vue.unref(data).length - 1
}
])
},
[
vue.createElementVNode("td", {
colspan: vue.unref(dataColumns).length,
class: vue.normalizeClass({
"o-table-cell": true,
"o-table-body-cell": true,
"o-table-expand-cell": true,
"o-cell-last-row": vue.unref(rowIndex) === vue.unref(data).length - 1
})
}, [
vue.createElementVNode("span", _hoisted_7, [
vue.renderSlot(_ctx.$slots, "expand", {
row: vue.unref(row),
rowIndex: vue.unref(rowIndex)
}, () => {
var _a2;
return [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(vueUtils.getRenderableComponent)((_a2 = vue.unref(expandMethod)) == null ? void 0 : _a2(vue.unref(row), vue.unref(rowIndex))))))
];
})
])
], 10, _hoisted_6)
],
2
/* CLASS */
)) : vue.unref(is.isArray)(vue.unref(row).children) && vue.unref(row).children.length && isRowExpanded.value ? (vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
{ key: 1 },
vue.renderList(vue.unref(row).children, (child, childIndex) => {
return vue.openBlock(), vue.createBlock(_component_TableRow, {
key: vue.unref(getRowKey)(child, childIndex),
row: child,
"row-index": childIndex,
level: vue.unref(level) + 1
}, vue.createSlots({
expand: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "expand", {
row: child,
rowIndex: childIndex
})
]),
_: 2
/* DYNAMIC */
}, [
vue.renderList(tdSlotNames.value, (name) => {
return {
name,
fn: vue.withCtx((slotProps) => [
vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps))
])
};
})
]), 1032, ["row", "row-index", "level"]);
}),
128
/* KEYED_FRAGMENT */
)) : vue.createCommentVNode("v-if", true)
],
64
/* STABLE_FRAGMENT */
);
};
}
});
module.exports = _sfc_main;