comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
175 lines (174 loc) • 6.37 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
require("../style/table.css");
const index = require("./table-header/index.js");
const index$1 = require("./table-body/index.js");
const index$2 = require("./table-footer/index.js");
const type = require("./type.js");
const main_props = require("./main.props.js");
const useTable = require("./util/use-table.js");
const useTableStyle = require("./util/use-table-style.js");
const config = require("../../../utils/config.js");
const tools = require("../../../utils/tools.js");
const typescript = require("../../../utils/typescript.js");
require("@vueuse/core");
const MIN_SIZE = 80;
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{
name: "CuTable"
},
__name: "main",
props: main_props.tableProps,
emits: main_props.tableEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const { globalSize } = config.useGlobal();
const columns = vue.ref([]);
const hiddenColumnRef = vue.ref();
const containerRef = vue.ref();
const tableData = vue.computed(() => props.data);
const table = useTable.useTable(tableData, { emit, props, columns });
const tableStyle = useTableStyle.useTableStyle({ containerRef, props, columns, MIN_SIZE });
const style = vue.computed(() => {
let obj = {};
obj["height"] = tools.getCssHeight(props.height);
obj["max-height"] = tools.getCssHeight(props.maxHeight);
if (props.highlightColor) {
obj["--cu-table-highlight-color"] = props.highlightColor;
}
if (props.stripe && typescript.isArray(props.stripeColors)) {
obj["--cu-table-stripe-color1"] = props.stripeColors[0];
obj["--cu-table-stripe-color2"] = props.stripeColors[1];
}
return obj;
});
function addColumn(column) {
columns.value.push(column);
}
function removeColumn(uid) {
const index2 = columns.value.findIndex((col) => col.uid === uid);
if (index2 > -1) {
columns.value.splice(index2, 1);
}
}
async function sortColumn() {
await vue.nextTick();
let arr = Array.from(hiddenColumnRef.value.children).map((v) => v.getAttribute("col-name")).filter(Boolean);
let k = "cu-table-column__key_";
const priority = { left: 1, null: 2, right: 3 };
columns.value.sort((a, b) => arr.indexOf(k + a.uid) - arr.indexOf(k + b.uid)).sort((a, b) => priority[a.fixed] - priority[b.fixed]);
updateColStyle();
}
const getFixedIndex = vue.computed(() => {
return {
left: columns.value.findLastIndex((item) => item.fixed === "left"),
right: columns.value.findIndex((item) => item.fixed === "right")
};
});
function getStickyLeft(index2) {
var _a;
let left = 0;
if (index2 > 0) {
for (let i = 0; i < index2; i++) {
let item = (_a = columns.value) == null ? void 0 : _a[i];
left += item.fixed === "left" ? Number(item.props.width) || MIN_SIZE : 0;
}
}
return left;
}
function getStickyRight(index2) {
var _a, _b, _c;
let right = 0;
if (index2 < ((_a = columns.value) == null ? void 0 : _a.length) - 1) {
for (let i = ((_b = columns.value) == null ? void 0 : _b.length) - 1; i > index2; i--) {
let item = (_c = columns.value) == null ? void 0 : _c[i];
right += item.fixed === "right" ? Number(item.props.width) || MIN_SIZE : 0;
}
}
return right;
}
function updateColStyle() {
columns.value.forEach((col, idx) => {
if (col.fixed === "left") {
col.style.left = getStickyLeft(idx) + "px";
} else if (col.fixed === "right") {
col.style.right = getStickyRight(idx) + "px";
}
});
}
vue.watch(
() => columns.value.length,
() => {
sortColumn();
}
);
vue.watch(
() => tableStyle.barWidth.value,
() => {
updateColStyle();
}
);
vue.provide(type.TABLE_PROVIDE, {
props,
columns,
getFixedIndex,
addColumn,
removeColumn,
...table,
...tableStyle
});
__expose({
selectAll: table.selectAll
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["cu-table", [
{ "cu-table--border": _ctx.border },
{ "show-left-shadow": vue.unref(tableStyle).leftShadow.value },
{ "show-right-shadow": vue.unref(tableStyle).rightShadow.value },
{ "scroll-table": vue.unref(tableStyle).barWidth.value > 0 },
{ "cu-table--stripe": _ctx.stripe },
_ctx.size ?? vue.unref(globalSize)
]]),
style: vue.normalizeStyle(style.value)
}, [
vue.createElementVNode("div", {
class: "hidden-column",
ref_key: "hiddenColumnRef",
ref: hiddenColumnRef
}, [
vue.renderSlot(_ctx.$slots, "default")
], 512),
vue.createElementVNode("div", {
class: "cu-table--warpper",
ref_key: "containerRef",
ref: containerRef,
onScroll: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(tableStyle).onscroll && vue.unref(tableStyle).onscroll(...args))
}, [
_ctx.showHeader ? (vue.openBlock(), vue.createBlock(vue.unref(index.default), { key: 0 })) : vue.createCommentVNode("", true),
vue.createVNode(vue.unref(index$1.default), null, vue.createSlots({ _: 2 }, [
_ctx.$slots["empty"] ? {
name: "empty",
fn: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty")
]),
key: "0"
} : void 0,
_ctx.$slots["expand"] ? {
name: "expand",
fn: vue.withCtx(({ row }) => [
vue.renderSlot(_ctx.$slots, "expand", { row })
]),
key: "1"
} : void 0
]), 1024),
_ctx.showSummary ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.default), { key: 1 })) : vue.createCommentVNode("", true)
], 544)
], 6);
};
}
});
exports.default = _sfc_main;