@zhsz/cool-design-dv
Version:
226 lines (225 loc) • 7.43 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const index = require("../dv-box/index.js");
const ColGroup_vue_vue_type_script_setup_true_lang = require("./ColGroup.vue.js");
const index$1 = require("../dv-marquee/index.js");
const util = require("../../utils/util.js");
require("./style.css");
const _hoisted_1 = {
key: 0,
class: "my-dv-list__body",
cellspacing: "0",
cellpadding: "0"
};
const _hoisted_2 = {
key: 1,
class: "my-dv-list__empty"
};
const __default__ = vue.defineComponent({
name: "DvList"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...__default__,
props: {
columns: {
type: Array,
default() {
return [];
}
},
rows: {
type: Array,
default() {
return [];
}
},
header: {
type: Boolean,
default: true
},
border: Boolean,
radius: Boolean,
background: Boolean,
scroll: [Boolean, Object],
customStyle: Object
},
setup(__props) {
const props = __props;
const marquee = vue.ref();
const headerHeight = vue.ref(0);
const headerWidth = vue.ref(0);
const contentHeight = vue.ref("auto");
const headerRef = vue.ref();
const $attrs = vue.useAttrs();
const _uid = util.uid();
const tableColumns = vue.computed(() => {
return props.columns.map((col) => {
return typeof col === "object" ? col : { label: col };
});
});
const classes = vue.computed(() => {
return {
"is-border": props.border,
"is-radius": props.radius,
"is-no-header": !props.header,
"is-odd": props.rows.length % 2 === 0,
"is-no-background": !props.background
};
});
const bodyStyle = vue.computed(() => {
return {
height: `calc(100% - ${headerHeight.value}px)`,
...props.customStyle
};
});
const scrollProps = vue.computed(() => {
if (typeof props.scroll === "boolean") {
return {
disabled: !props.scroll,
speed: 0.5
};
}
if (typeof props.scroll === "object") {
return {
disabled: false,
speed: 0.5,
...props.scroll
};
}
return {
disabled: true,
speed: 0.5
};
});
const cellWidth = vue.computed(() => {
let total = headerWidth.value;
let count = 0;
tableColumns.value.forEach((n) => {
if (n.width || n.minWidth) {
total -= n.width || n.minWidth || 0;
} else {
++count;
}
});
return count > 0 ? total / count : 0;
});
function getRow(row) {
if (Array.isArray(row)) {
return row.slice(0, props.columns.length);
}
return tableColumns.value.map((col) => row[col.prop]);
}
function getSlotName(itemIndex) {
const col = tableColumns.value[itemIndex];
return col == null ? void 0 : col.prop;
}
function updateHeaderHeight() {
const rect = headerRef.value.getBoundingClientRect();
headerHeight.value = rect ? rect.height : 0;
headerWidth.value = rect ? rect.width : 0;
if (marquee.value) {
vue.nextTick(marquee.value.renderCopyHtml);
}
}
function marqueeResize({ height }) {
if ($attrs.height) {
contentHeight.value = $attrs.height;
} else {
contentHeight.value = height ? `${height}px` : "auto";
}
}
vue.watch(
() => props.header,
() => {
updateHeaderHeight();
}
);
vue.onMounted(() => {
updateHeaderHeight();
marqueeResize({});
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createBlock(vue.unref(index.default), vue.mergeProps({
class: ["my-dv-list", classes.value],
"default-height": contentHeight.value
}, vue.unref($attrs)), {
default: vue.withCtx(() => [
__props.header ? (vue.openBlock(), vue.createElementBlock("table", {
key: 0,
ref_key: "headerRef",
ref: headerRef,
class: "my-dv-list__header",
cellspacing: "0",
cellpadding: "0"
}, [
vue.createVNode(ColGroup_vue_vue_type_script_setup_true_lang.default, {
columns: tableColumns.value,
"default-width": cellWidth.value
}, null, 8, ["columns", "default-width"]),
vue.createElementVNode("thead", null, [
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(tableColumns.value, (col, index2) => {
return vue.openBlock(), vue.createElementBlock("th", {
key: `tr_${vue.unref(_uid)}_col_${index2}`
}, [
vue.renderSlot(_ctx.$slots, "column", {
col,
index: index2
}, () => [
vue.createTextVNode(vue.toDisplayString(col.label), 1)
])
]);
}), 128))
])
])
], 512)) : vue.createCommentVNode("", true),
vue.createVNode(vue.unref(index$1.default), vue.mergeProps({
class: "my-dv-list__body-wrapper",
ref_key: "marquee",
ref: marquee,
data: __props.rows,
style: bodyStyle.value,
onResize: marqueeResize
}, scrollProps.value), {
default: vue.withCtx(() => [
__props.rows.length ? (vue.openBlock(), vue.createElementBlock("table", _hoisted_1, [
vue.createVNode(ColGroup_vue_vue_type_script_setup_true_lang.default, {
columns: tableColumns.value,
"default-width": cellWidth.value
}, null, 8, ["columns", "default-width"]),
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.rows, (row, rowIndex) => {
return vue.openBlock(), vue.createElementBlock("tr", {
key: `row_${rowIndex}`
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(getRow(row), (item, itemIndex) => {
return vue.openBlock(), vue.createElementBlock("td", {
key: `item_${itemIndex}`
}, [
vue.renderSlot(_ctx.$slots, getSlotName(itemIndex), {
row,
item,
index: itemIndex,
rowIndex
}, () => [
vue.createTextVNode(vue.toDisplayString(item), 1)
])
]);
}), 128))
]);
}), 128))
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createTextVNode("暂无数据")
])
]))
]),
_: 3
}, 16, ["data", "style"])
]),
_: 3
}, 16, ["class", "default-height"]);
};
}
});
exports.default = _sfc_main;