comic-plus
Version:
<p align="center"> <img width="200px" src="./logo.png"/> </p>
175 lines (174 loc) • 6.25 kB
JavaScript
import { defineComponent, ref, computed, watch, provide, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, createElementVNode, renderSlot, createBlock, createCommentVNode, createVNode, createSlots, withCtx, nextTick } from "vue";
import "../style/table.css";
import TableHeader from "./table-header/index.mjs";
import TableBody from "./table-body/index.mjs";
import TableFooter from "./table-footer/index.mjs";
import { TABLE_PROVIDE } from "./type.mjs";
import { tableProps, tableEmits } from "./main.props.mjs";
import { useTable } from "./util/use-table.mjs";
import { useTableStyle } from "./util/use-table-style.mjs";
import { useGlobal } from "../../../utils/config.mjs";
import { getCssHeight } from "../../../utils/tools.mjs";
import { isArray } from "../../../utils/typescript.mjs";
import "@vueuse/core";
const MIN_SIZE = 80;
const _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "CuTable"
},
__name: "main",
props: tableProps,
emits: tableEmits,
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const { globalSize } = useGlobal();
const columns = ref([]);
const hiddenColumnRef = ref();
const containerRef = ref();
const tableData = computed(() => props.data);
const table = useTable(tableData, { emit, props, columns });
const tableStyle = useTableStyle({ containerRef, props, columns, MIN_SIZE });
const style = computed(() => {
let obj = {};
obj["height"] = getCssHeight(props.height);
obj["max-height"] = getCssHeight(props.maxHeight);
if (props.highlightColor) {
obj["--cu-table-highlight-color"] = props.highlightColor;
}
if (props.stripe && 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 index = columns.value.findIndex((col) => col.uid === uid);
if (index > -1) {
columns.value.splice(index, 1);
}
}
async function sortColumn() {
await 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 = computed(() => {
return {
left: columns.value.findLastIndex((item) => item.fixed === "left"),
right: columns.value.findIndex((item) => item.fixed === "right")
};
});
function getStickyLeft(index) {
var _a;
let left = 0;
if (index > 0) {
for (let i = 0; i < index; 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(index) {
var _a, _b, _c;
let right = 0;
if (index < ((_a = columns.value) == null ? void 0 : _a.length) - 1) {
for (let i = ((_b = columns.value) == null ? void 0 : _b.length) - 1; i > index; 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";
}
});
}
watch(
() => columns.value.length,
() => {
sortColumn();
}
);
watch(
() => tableStyle.barWidth.value,
() => {
updateColStyle();
}
);
provide(TABLE_PROVIDE, {
props,
columns,
getFixedIndex,
addColumn,
removeColumn,
...table,
...tableStyle
});
__expose({
selectAll: table.selectAll
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["cu-table", [
{ "cu-table--border": _ctx.border },
{ "show-left-shadow": unref(tableStyle).leftShadow.value },
{ "show-right-shadow": unref(tableStyle).rightShadow.value },
{ "scroll-table": unref(tableStyle).barWidth.value > 0 },
{ "cu-table--stripe": _ctx.stripe },
_ctx.size ?? unref(globalSize)
]]),
style: normalizeStyle(style.value)
}, [
createElementVNode("div", {
class: "hidden-column",
ref_key: "hiddenColumnRef",
ref: hiddenColumnRef
}, [
renderSlot(_ctx.$slots, "default")
], 512),
createElementVNode("div", {
class: "cu-table--warpper",
ref_key: "containerRef",
ref: containerRef,
onScroll: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => unref(tableStyle).onscroll && unref(tableStyle).onscroll(...args))
}, [
_ctx.showHeader ? (openBlock(), createBlock(unref(TableHeader), { key: 0 })) : createCommentVNode("", true),
createVNode(unref(TableBody), null, createSlots({ _: 2 }, [
_ctx.$slots["empty"] ? {
name: "empty",
fn: withCtx(() => [
renderSlot(_ctx.$slots, "empty")
]),
key: "0"
} : void 0,
_ctx.$slots["expand"] ? {
name: "expand",
fn: withCtx(({ row }) => [
renderSlot(_ctx.$slots, "expand", { row })
]),
key: "1"
} : void 0
]), 1024),
_ctx.showSummary ? (openBlock(), createBlock(unref(TableFooter), { key: 1 })) : createCommentVNode("", true)
], 544)
], 6);
};
}
});
export {
_sfc_main as default
};