double-ui-vue
Version:
377 lines (376 loc) • 13.9 kB
JavaScript
import { openBlock, createElementBlock, createElementVNode, defineComponent, normalizeStyle, Fragment, renderList, normalizeClass, toDisplayString, ref, renderSlot, toRaw, useSlots, computed, watch, nextTick, createCommentVNode, withModifiers, createVNode, unref, createSlots, withCtx } from "vue";
const _hoisted_1$3 = {
viewBox: "0 0 16 16",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", {
d: "M8 1a6 7 0 0 1 7 6",
class: "svg-stroke-grey-500",
fill: "none"
}, [
/* @__PURE__ */ createElementVNode("animateTransform", {
attributeName: "transform",
type: "rotate",
from: "0 8 8",
to: "360 8 8",
dur: "0.5s",
repeatCount: "indefinite"
})
], -1);
const _hoisted_3 = [
_hoisted_2$3
];
function render(_ctx, _cache) {
return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3);
}
var LoadingGreySvg = { render };
var V = (e, t) => {
let r = e.tagName.toLocaleLowerCase();
return r === "body" || t.some((o) => o.toLocaleLowerCase() === r) ? e : V(e.parentNode, t);
}, M = V;
var Ot = (e = 8, t = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") => {
let r = "";
for (let o = e; o > 0; --o)
r += t[Math.floor(Math.random() * t.length)];
return r;
}, $t = Ot;
var _t = (e, t) => {
let r = e.target;
t && (r = M(r, [t]));
let { clientWidth: o, scrollWidth: n } = r;
n > o ? r.title = r.innerText : r.title = "";
}, Kt = _t;
var TableHeader_vue_vue_type_style_index_0_lang = "";
const _hoisted_1$2 = ["width"];
const _hoisted_2$2 = { class: "x-table-tr x-table-header_row" };
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
__name: "TableHeader",
props: {
colsWidth: { default: () => [] },
data: { default: () => [] },
scrollLeftValue: { default: 0 },
fixedRight: { type: Boolean, default: false },
width: { default: 0 }
},
setup(__props) {
const setHtmlTagTitle = (e) => Kt(e);
return (_ctx, _cache) => {
return openBlock(), createElementBlock("table", {
class: "x-table-header",
style: normalizeStyle(__props.width && { width: `${__props.width}px` })
}, [
createElementVNode("colgroup", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.colsWidth, (c) => {
return openBlock(), createElementBlock("col", {
key: c.id,
width: c.w
}, null, 8, _hoisted_1$2);
}), 128))
]),
createElementVNode("thead", null, [
createElementVNode("tr", _hoisted_2$2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (h) => {
return openBlock(), createElementBlock("td", {
class: normalizeClass(["x-table-td", [
h.fixed === "left" && __props.scrollLeftValue && "x-table-td-fixed_left",
h.fixed === "right" && __props.fixedRight && "x-table-td-fixed_right"
]]),
key: h.key
}, [
createElementVNode("div", {
class: "x-table-col x-header-col",
onMouseenter: setHtmlTagTitle
}, toDisplayString(h.text), 33)
], 2);
}), 128))
])
])
], 4);
};
}
});
var TableBody_vue_vue_type_style_index_0_lang = "";
const _hoisted_1$1 = ["width"];
const _hoisted_2$1 = {
key: 1,
class: "x-table-col x-body-col"
};
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
__name: "TableBody",
props: {
width: { default: 0 },
scrollLeftValue: { default: 0 },
fixedRight: { type: Boolean, default: false },
colsWidth: { default: () => [] },
column: { default: () => [] },
data: { default: () => [] }
},
setup(__props, { expose }) {
const setHtmlTagTitle = (e) => Kt(e);
const bodyRef = ref(null);
expose({
instance: bodyRef
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("table", {
class: "x-table-body",
style: normalizeStyle(__props.width && { width: `${__props.width}px` }),
ref_key: "bodyRef",
ref: bodyRef
}, [
createElementVNode("colgroup", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.colsWidth, (c) => {
return openBlock(), createElementBlock("col", {
key: c.id,
width: c.w
}, null, 8, _hoisted_1$1);
}), 128))
]),
createElementVNode("tbody", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (d) => {
return openBlock(), createElementBlock("tr", {
class: "x-table-tr x-table-body_row",
key: d.id
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.column, (h) => {
return openBlock(), createElementBlock("td", {
class: normalizeClass(["x-table-td", [
h.fixed === "left" && __props.scrollLeftValue && "x-table-td-fixed_left",
h.fixed === "right" && __props.fixedRight && "x-table-td-fixed_right"
]]),
key: h.key
}, [
h.slot ? renderSlot(_ctx.$slots, h.key, {
key: 0,
body: toRaw(d)
}) : (openBlock(), createElementBlock("div", _hoisted_2$1, [
createElementVNode("span", {
class: "x-body-text",
onMouseenter: setHtmlTagTitle
}, toDisplayString(d[h.key]), 33)
]))
], 2);
}), 128))
]);
}), 128))
])
], 4);
};
}
});
const MIN_WIDTH = 440;
const setColsWidth = (column, width, border, tableGridRef) => {
const len = column.length;
if (!len)
return;
let tableWidth = 0;
const propsWidth = width;
if (propsWidth)
tableWidth = propsWidth < MIN_WIDTH ? MIN_WIDTH : propsWidth;
let totalWidth = Math.floor(tableWidth || tableGridRef.value.clientWidth);
totalWidth = totalWidth < MIN_WIDTH ? MIN_WIDTH : totalWidth;
const aveWidth = Math.floor(totalWidth / len);
const remWidth = totalWidth % len;
let cols = Array.from(new Array(len - 1), () => ({ id: $t(5), w: aveWidth }));
cols.push({ id: $t(5), w: aveWidth + remWidth });
if (border) {
cols = cols.map((d, i) => {
if (i)
d.w -= 1;
return d;
});
}
return { cols, tw: tableWidth };
};
const useScroll = () => {
const scrollLeftValue = ref(0);
const headerRef = ref();
const bodyRef = ref();
const bodyVerticalBarRef = ref();
const horizontalBarRef = ref();
const bodyScrollHandle = (e) => {
const { scrollTop, scrollLeft } = e.target;
scrollLeftValue.value = scrollLeft;
bodyVerticalBarRef.value && (bodyVerticalBarRef.value.scrollTop = scrollTop);
headerRef.value.scrollLeft = scrollLeft;
horizontalBarRef.value.scrollLeft = scrollLeft;
};
const barScrollBodyHandle = (e) => {
const { scrollTop } = e.target;
bodyRef.value.scrollTop = scrollTop;
};
const barScrollHandle = (e) => {
const { scrollLeft } = e.target;
scrollLeftValue.value = scrollLeft;
headerRef.value.scrollLeft = scrollLeft;
bodyRef.value.scrollLeft = scrollLeft;
};
return {
scrollLeftValue,
headerRef,
bodyRef,
bodyVerticalBarRef,
horizontalBarRef,
bodyScrollHandle,
barScrollBodyHandle,
barScrollHandle
};
};
const setBodyData = (len, data, size = 50) => {
if (len < 200)
return [{ id: $t(5), data }];
const dataNum = Math.ceil(data.length / size);
const arr = [];
let index = 0;
while (index < dataNum) {
arr[index] = { id: $t(5), data: data.slice(index * size, (index + 1) * size) };
index++;
}
return arr;
};
var TableGrid_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "x-table-main_body" };
const _hoisted_2 = {
key: 1,
class: "x-table-loading_body"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "TableGrid",
props: {
column: { default: () => [] },
data: { default: () => [] },
border: { type: Boolean, default: false },
loading: { type: Boolean, default: false },
width: { default: 0 },
height: { default: 0 }
},
setup(__props) {
const props = __props;
const slots = useSlots();
const styleHeight = computed(() => props.height ? { height: `${props.height}px` } : null);
const colsWidth = ref([]);
const tableWidth = ref(0);
const tableGridRef = ref(null);
watch([() => props.column, () => props.width, () => props.border], ([column, width, border]) => {
if (!column.length)
return;
nextTick(() => {
const { cols = [], tw = 0 } = setColsWidth(column, width, border, tableGridRef) || {};
colsWidth.value = cols;
tableWidth.value = tw;
});
}, { immediate: true });
const {
scrollLeftValue,
headerRef,
bodyRef,
bodyVerticalBarRef,
horizontalBarRef,
bodyScrollHandle,
barScrollBodyHandle,
barScrollHandle
} = useScroll();
const tableBodyRef = ref(null);
const fixedRight = computed(() => {
var _a, _b, _c, _d;
const tableClientWidth = (_b = (_a = tableGridRef.value) == null ? void 0 : _a.clientWidth) != null ? _b : 0;
return tableClientWidth + scrollLeftValue.value < ((_d = (_c = tableBodyRef.value) == null ? void 0 : _c.instance.clientWidth) != null ? _d : 0) || !scrollLeftValue.value && tableClientWidth < tableWidth.value;
});
const bodyData = ref([]);
const styleScrollHeight = ref({ height: "0" });
watch(() => props.data, (n) => {
const len = n.length;
if (!len)
return;
bodyData.value = setBodyData(len, n);
styleScrollHeight.value = { height: `${len * 48 + len - 1}px` };
}, { immediate: true });
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "tableGridRef",
ref: tableGridRef,
class: normalizeClass(["x-table-grid", __props.border ? "x-table-grid_border" : "x-table-grid_normal"])
}, [
createCommentVNode("\u8868\u5934"),
createElementVNode("div", {
ref_key: "headerRef",
ref: headerRef,
class: "x-table-container x-table-container_header x-table-scroll_0",
onWheel: _cache[0] || (_cache[0] = withModifiers(() => {
}, ["prevent"]))
}, [
createVNode(_sfc_main$2, {
width: tableWidth.value,
"cols-width": colsWidth.value,
data: __props.column,
"scroll-left-value": unref(scrollLeftValue),
"fixed-right": unref(fixedRight)
}, null, 8, ["width", "cols-width", "data", "scroll-left-value", "fixed-right"])
], 544),
createCommentVNode("\u8868\u4F53"),
createElementVNode("div", _hoisted_1, [
createElementVNode("div", {
ref_key: "bodyRef",
ref: bodyRef,
class: "x-table-container x-table-container_body x-table-scroll_0",
style: normalizeStyle(unref(styleHeight)),
onScroll: _cache[1] || (_cache[1] = (...args) => unref(bodyScrollHandle) && unref(bodyScrollHandle)(...args))
}, [
createVNode(_sfc_main$1, {
ref_key: "tableBodyRef",
ref: tableBodyRef,
width: tableWidth.value,
"cols-width": colsWidth.value,
column: __props.column,
data: __props.data,
"scroll-left-value": unref(scrollLeftValue),
"fixed-right": unref(fixedRight)
}, createSlots({ _: 2 }, [
renderList(Object.keys(unref(slots)), (k) => {
return {
name: k,
fn: withCtx(({ body }) => [
renderSlot(_ctx.$slots, k, {
key: k,
item: body
})
])
};
})
]), 1032, ["width", "cols-width", "column", "data", "scroll-left-value", "fixed-right"])
], 36),
createCommentVNode("\u8868\u4F53\u7AD6\u5411\u6EDA\u52A8\u6761"),
unref(styleHeight) ? (openBlock(), createElementBlock("div", {
key: 0,
ref_key: "bodyVerticalBarRef",
ref: bodyVerticalBarRef,
class: "x-table-scroll_body",
style: normalizeStyle(unref(styleHeight)),
onScroll: _cache[2] || (_cache[2] = (...args) => unref(barScrollBodyHandle) && unref(barScrollBodyHandle)(...args))
}, [
createElementVNode("div", {
class: "x-table-scrollbar_body",
style: normalizeStyle(styleScrollHeight.value)
}, null, 4)
], 36)) : createCommentVNode("v-if", true),
__props.loading ? (openBlock(), createElementBlock("i", _hoisted_2, [
createVNode(unref(LoadingGreySvg))
])) : createCommentVNode("v-if", true)
]),
createCommentVNode("\u6A2A\u5411\u6EDA\u52A8\u6761"),
createElementVNode("div", {
ref_key: "horizontalBarRef",
ref: horizontalBarRef,
class: "x-table-scroll",
onScroll: _cache[3] || (_cache[3] = (...args) => unref(barScrollHandle) && unref(barScrollHandle)(...args))
}, [
createElementVNode("div", {
class: "x-table-scrollbar",
style: normalizeStyle(tableWidth.value && { width: `${tableWidth.value}px` })
}, null, 4)
], 544)
], 2);
};
}
});
export { _sfc_main as default };