@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
191 lines (190 loc) • 7.75 kB
JavaScript
;
const vue = require("vue");
const types = require("./types.js");
const table = require("./table.js");
const icons = require("../_utils/icons.js");
const is = require("../_utils/is.js");
const index = require("../locale/index.js");
const _hoisted_1 = { key: 0 };
const _hoisted_2 = { key: 1 };
const _hoisted_3 = ["rowspan", "colspan"];
const _hoisted_4 = {
key: 0,
class: "o-table-tip-wrap"
};
const _hoisted_5 = { class: "o-table-empty-label" };
const _hoisted_6 = {
key: 0,
class: "o-table-loading-wrap"
};
const _hoisted_7 = { class: "o-table-loading-label" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OTable",
props: types.tableProps,
setup(__props) {
const props = __props;
const { t } = index.useI18n();
const columnData = vue.computed(() => table.getColumnData(props.columns));
const tableData = vue.computed(() => table.getBodyData(columnData, props.data, props.cellSpan));
const emptyLabel = vue.computed(() => props.emptyLabel || t("common.empty"));
const loadingLabel = vue.computed(() => props.loadingLabel || t("common.loading"));
const boderClass = vue.computed(() => {
if (is.isString(props.border)) {
return props.border.split("-").map((item) => `o-table-border-${item}`);
}
return "";
});
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-table", [
{
"o-table-small": props.small,
"o-table-medium": !props.small
}
]])
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-table-wrap", boderClass.value])
},
[
vue.createElementVNode("table", null, [
vue.createElementVNode("colgroup", null, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnData.value, (col) => {
return vue.openBlock(), vue.createElementBlock(
"col",
{
key: col.key,
style: vue.normalizeStyle(col.style)
},
null,
4
/* STYLE */
);
}),
128
/* KEYED_FRAGMENT */
))
]),
columnData.value.length > 1 ? (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1, [
vue.renderSlot(_ctx.$slots, "header", { columns: columnData.value }, () => [
vue.createElementVNode("tr", null, [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(columnData.value, (col, idx) => {
return vue.openBlock(), vue.createElementBlock(
"th",
{
key: col.key || idx,
class: vue.normalizeClass({ last: idx + 1 === columnData.value.length })
},
[
vue.renderSlot(_ctx.$slots, `th_${col.key}`, { column: col }, () => [
vue.createTextVNode(
vue.toDisplayString(col.label),
1
/* TEXT */
)
])
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
])
])) : vue.createCommentVNode("v-if", true),
tableData.value.length > 0 ? (vue.openBlock(), vue.createElementBlock("tbody", _hoisted_2, [
vue.renderSlot(_ctx.$slots, "body", { body: tableData.value }, () => [
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(tableData.value, (row, rIdx) => {
return vue.openBlock(), vue.createElementBlock(
"tr",
{
key: row.key || rIdx,
class: vue.normalizeClass({ last: rIdx + 1 === tableData.value.length })
},
[
(vue.openBlock(true), vue.createElementBlock(
vue.Fragment,
null,
vue.renderList(row.data, (col, idx) => {
return vue.openBlock(), vue.createElementBlock("td", {
rowspan: col.rowspan,
colspan: col.colspan,
class: vue.normalizeClass({ last: col.last }),
key: col.key || idx
}, [
vue.renderSlot(_ctx.$slots, `td_${col.key}`, {
row: props.data ? props.data[rIdx] : {}
}, () => [
vue.createTextVNode(
vue.toDisplayString(col.value),
1
/* TEXT */
)
])
], 10, _hoisted_3);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
])) : vue.createCommentVNode("v-if", true)
]),
!props.data || props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
!props.loading ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
vue.createElementVNode(
"div",
_hoisted_5,
vue.toDisplayString(emptyLabel.value),
1
/* TEXT */
)
]) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
vue.renderSlot(_ctx.$slots, "loading", {}, () => [
vue.createVNode(vue.unref(icons.IconLoading), { class: "o-rotating" }),
vue.createElementVNode(
"div",
_hoisted_7,
vue.toDisplayString(loadingLabel.value),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
module.exports = _sfc_main;