@opensig/opendesign
Version:
208 lines (207 loc) • 9.02 kB
JavaScript
;
const vue = require("vue");
const icons = require("../_utils/icons.js");
const types = require("./types.js");
const table = require("./table.js");
const useTableMeta = require("./useTableMeta.js");
const useTableCommon = require("./useTableCommon.js");
const _hoisted_1 = { key: 0 };
const _hoisted_2 = ["rowspan", "colspan"];
const _hoisted_3 = {
key: 0,
class: "o-table-tip-wrap"
};
const _hoisted_4 = { class: "o-table-empty-label" };
const _hoisted_5 = {
key: 0,
class: "o-table-loading-wrap"
};
const _hoisted_6 = { class: "o-table-loading-label" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "OTable",
props: types.tableProps,
setup(__props) {
const props = __props;
const columnData = vue.computed(() => table.getColumnData(props.columns));
const tableData = vue.computed(() => table.getBodyData(columnData, props.data, props.cellSpan));
const tableEl = vue.ref();
const { emptyLabel, loadingLabel, borderClass, handleMouseOver, clearHighlight, handleTouchStart } = useTableCommon.useTableCommon({ ...vue.toRefs(props), tableEl });
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-table", [
{
"o-table-stripe": props.stripe,
"o-table-small": props.small,
"o-table-medium": !props.small
}
]])
},
[
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-table-wrap", vue.unref(borderClass)])
},
[
vue.createElementVNode(
"table",
{
ref_key: "tableEl",
ref: tableEl
},
[
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({ [vue.unref(useTableMeta.DEFAULT_CELL_LAST_COL_MARKER)]: 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",
{
key: 1,
onMousemove: _cache[0] || (_cache[0] = //@ts-ignore
(...args) => vue.unref(handleMouseOver) && vue.unref(handleMouseOver)(...args)),
onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
(...args) => vue.unref(clearHighlight) && vue.unref(clearHighlight)(...args)),
onTouchstart: _cache[2] || (_cache[2] = //@ts-ignore
(...args) => vue.unref(handleTouchStart) && vue.unref(handleTouchStart)(...args))
},
[
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({ [vue.unref(useTableMeta.DEFAULT_ROW_LAST_MARKER)]: 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", {
key: col.key || idx,
rowspan: col.rowspan,
colspan: col.colspan,
class: vue.normalizeClass({ [vue.unref(useTableMeta.DEFAULT_CELL_LAST_COL_MARKER)]: col.last })
}, [
vue.renderSlot(_ctx.$slots, `td_${col.key}`, {
row: props.data ? props.data[rIdx] : {},
rowIndex: rIdx
}, () => [
vue.createTextVNode(
vue.toDisplayString(col.value),
1
/* TEXT */
)
])
], 10, _hoisted_2);
}),
128
/* KEYED_FRAGMENT */
))
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])
],
32
/* NEED_HYDRATION */
)) : vue.createCommentVNode("v-if", true)
],
512
/* NEED_PATCH */
),
!props.data || props.data.length === 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
!props.loading ? vue.renderSlot(_ctx.$slots, "empty", { key: 0 }, () => [
vue.createElementVNode(
"div",
_hoisted_4,
vue.toDisplayString(vue.unref(emptyLabel)),
1
/* TEXT */
)
]) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
),
props.loading ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.renderSlot(_ctx.$slots, "loading", {}, () => [
vue.createVNode(vue.unref(icons.IconLoading), { class: "o-rotating" }),
vue.createElementVNode(
"div",
_hoisted_6,
vue.toDisplayString(vue.unref(loadingLabel)),
1
/* TEXT */
)
])
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
);
};
}
});
module.exports = _sfc_main;