'use strict';
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
var vue = require('vue');
|
require('../../../../utils/index.js');
|
require('../../../../hooks/index.js');
|
var config = require('../config.js');
|
var util = require('../util.js');
|
var index = require('../../../../hooks/use-namespace/index.js');
|
var error = require('../../../../utils/error.js');
|
|
function useRender(props, slots, owner) {
|
const instance = vue.getCurrentInstance();
|
const columnId = vue.ref("");
|
const isSubColumn = vue.ref(false);
|
const realAlign = vue.ref();
|
const realHeaderAlign = vue.ref();
|
const ns = index.useNamespace("table");
|
vue.watchEffect(() => {
|
realAlign.value = props.align ? `is-${props.align}` : null;
|
realAlign.value;
|
});
|
vue.watchEffect(() => {
|
realHeaderAlign.value = props.headerAlign ? `is-${props.headerAlign}` : realAlign.value;
|
realHeaderAlign.value;
|
});
|
const columnOrTableParent = vue.computed(() => {
|
let parent = instance.vnode.vParent || instance.parent;
|
while (parent && !parent.tableId && !parent.columnId) {
|
parent = parent.vnode.vParent || parent.parent;
|
}
|
return parent;
|
});
|
const hasTreeColumn = vue.computed(() => {
|
const { store } = instance.parent;
|
if (!store)
|
return false;
|
const { treeData } = store.states;
|
const treeDataValue = treeData.value;
|
return treeDataValue && Object.keys(treeDataValue).length > 0;
|
});
|
const realWidth = vue.ref(util.parseWidth(props.width));
|
const realMinWidth = vue.ref(util.parseMinWidth(props.minWidth));
|
const setColumnWidth = (column) => {
|
if (realWidth.value)
|
column.width = realWidth.value;
|
if (realMinWidth.value) {
|
column.minWidth = realMinWidth.value;
|
}
|
if (!realWidth.value && realMinWidth.value) {
|
column.width = void 0;
|
}
|
if (!column.minWidth) {
|
column.minWidth = 80;
|
}
|
column.realWidth = Number(column.width === void 0 ? column.minWidth : column.width);
|
return column;
|
};
|
const setColumnForcedProps = (column) => {
|
const type = column.type;
|
const source = config.cellForced[type] || {};
|
Object.keys(source).forEach((prop) => {
|
const value = source[prop];
|
if (prop !== "className" && value !== void 0) {
|
column[prop] = value;
|
}
|
});
|
const className = config.getDefaultClassName(type);
|
if (className) {
|
const forceClass = `${vue.unref(ns.namespace)}-${className}`;
|
column.className = column.className ? `${column.className} ${forceClass}` : forceClass;
|
}
|
return column;
|
};
|
const checkSubColumn = (children) => {
|
if (Array.isArray(children)) {
|
children.forEach((child) => check(child));
|
} else {
|
check(children);
|
}
|
function check(item) {
|
var _a;
|
if (((_a = item == null ? void 0 : item.type) == null ? void 0 : _a.name) === "ElTableColumn") {
|
item.vParent = instance;
|
}
|
}
|
};
|
const setColumnRenders = (column) => {
|
if (props.renderHeader) {
|
error.debugWarn("TableColumn", "Comparing to render-header, scoped-slot header is easier to use. We recommend users to use scoped-slot header.");
|
} else if (column.type !== "selection") {
|
column.renderHeader = (scope) => {
|
instance.columnConfig.value["label"];
|
const renderHeader = slots.header;
|
return renderHeader ? renderHeader(scope) : column.label;
|
};
|
}
|
let originRenderCell = column.renderCell;
|
if (column.type === "expand") {
|
column.renderCell = (data) => vue.h("div", {
|
class: "cell"
|
}, [originRenderCell(data)]);
|
owner.value.renderExpanded = (data) => {
|
return slots.default ? slots.default(data) : slots.default;
|
};
|
} else {
|
originRenderCell = originRenderCell || config.defaultRenderCell;
|
column.renderCell = (data) => {
|
let children = null;
|
if (slots.default) {
|
const vnodes = slots.default(data);
|
children = vnodes.some((v) => v.type !== vue.Comment) ? vnodes : originRenderCell(data);
|
} else {
|
children = originRenderCell(data);
|
}
|
const { columns } = owner.value.store.states;
|
const firstUserColumnIndex = columns.value.findIndex((item) => item.type === "default");
|
const shouldCreatePlaceholder = hasTreeColumn.value && data.cellIndex === firstUserColumnIndex;
|
const prefix = config.treeCellPrefix(data, shouldCreatePlaceholder);
|
const props2 = {
|
class: "cell",
|
style: {}
|
};
|
if (column.showOverflowTooltip) {
|
props2.class = `${props2.class} ${vue.unref(ns.namespace)}-tooltip`;
|
props2.style = {
|
width: `${(data.column.realWidth || Number(data.column.width)) - 1}px`
|
};
|
}
|
checkSubColumn(children);
|
return vue.h("div", props2, [prefix, children]);
|
};
|
}
|
return column;
|
};
|
const getPropsData = (...propsKey) => {
|
return propsKey.reduce((prev, cur) => {
|
if (Array.isArray(cur)) {
|
cur.forEach((key) => {
|
prev[key] = props[key];
|
});
|
}
|
return prev;
|
}, {});
|
};
|
const getColumnElIndex = (children, child) => {
|
return Array.prototype.indexOf.call(children, child);
|
};
|
const updateColumnOrder = () => {
|
owner.value.store.commit("updateColumnOrder", instance.columnConfig.value);
|
};
|
return {
|
columnId,
|
realAlign,
|
isSubColumn,
|
realHeaderAlign,
|
columnOrTableParent,
|
setColumnWidth,
|
setColumnForcedProps,
|
setColumnRenders,
|
getPropsData,
|
getColumnElIndex,
|
updateColumnOrder
|
};
|
}
|
|
exports["default"] = useRender;
|
//# sourceMappingURL=render-helper.js.map
|
