hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
301 lines (298 loc) • 10.4 kB
JavaScript
import { defineComponent, ref, computed, createElementVNode, resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createVNode, mergeProps, createSlots, withCtx, renderList, normalizeProps, guardReactiveProps, createCommentVNode, toDisplayString, createBlock } from 'vue';
import { HlSimpleTable, HlPagination, HlScrollbar, HlLoading, useLocale } from 'hongluan-ui';
import { HbTableToolbar } from '../../table-toolbar/index.mjs';
import { HbTableSearchbar } from '../../table-searchbar/index.mjs';
import { usePrefix } from '../../../utils/util.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
const _sfc_main = defineComponent({
name: "SimpleTableList",
components: {
HbTableToolbar,
HbTableSearchbar,
HlSimpleTable,
HlPagination,
HlScrollbar
},
directives: {
loading: HlLoading.directive
},
props: {
loading: {
type: Boolean,
default: false
},
tableProps: {
type: Object,
default: () => ({
size: ""
})
},
scrollbarProps: {
type: Object,
default: () => ({})
},
tableData: {
type: Array,
default: () => []
},
cols: {
type: Array,
default: () => []
},
searchbar: {
type: Object,
default: () => ({
show: true,
searcher: {
show: true,
placeholder: "\u8BF7\u8F93\u5165\u641C\u7D22\u6761\u4EF6"
}
})
},
toolbar: {
type: Object,
default: () => ({})
},
pagination: {
type: Object,
default: () => ({
show: true,
total: 0,
pageSize: 10,
currentPage: 1
})
},
padding: {
type: String,
default: ""
}
},
emits: ["cell-click", "current-change", "searchbar-change", "size-change", "row-click", "expand", "sort-change"],
setup(props, { emit }) {
const { t } = useLocale();
const { prefix } = usePrefix();
const searchbarRef = ref();
const toolbarRef = ref();
const simpleTableRef = ref();
const paginationRef = ref();
const getSlotCols = (cols, filter, result) => {
cols.forEach((col) => {
if (filter(col) && shouldShowCol(col)) {
result.push(col);
}
if (col.children && Array.isArray(col.children)) {
getSlotCols(col.children, filter, result);
}
});
};
const slotCols = computed(() => {
const result = [];
getSlotCols(props.cols, (col) => col.slotName, result);
return result;
});
const headerSlotCols = computed(() => {
const result = [];
getSlotCols(props.cols, (col) => col.headerSlotName, result);
return result;
});
const filterSlotCols = computed(() => {
const result = [];
getSlotCols(props.cols, (col) => {
var _a;
return (_a = col.filter) == null ? void 0 : _a.slotName;
}, result);
return result;
});
const expandSlotCols = computed(() => {
const result = [];
getSlotCols(props.cols, (col) => {
var _a;
return (_a = col.expand) == null ? void 0 : _a.slotName;
}, result);
return result;
});
const selectorSlots = computed(() => {
var _a, _b, _c;
return (_c = (_b = (_a = props.searchbar.selector) == null ? void 0 : _a.items) == null ? void 0 : _b.map((s) => s.slotName)) != null ? _c : [];
});
const tableToolbar = computed(() => {
return {
selection: {
show: props.toolbar.showSelectionText,
count: props.toolbar.selectionCount,
total: props.pagination.total
},
action: props.toolbar.action,
extra: {
showColConfig: "showColConfig" in props.toolbar ? props.toolbar.showColConfig : true,
colConfig: {
cols: props.cols,
colLabelField: "title"
}
}
};
});
const shouldShowCol = (col) => {
return !("$show$" in col) || col.$show$;
};
const onSearchbarChanged = (urlParams, mapParams, originalParams) => {
emit("searchbar-change", urlParams, mapParams, originalParams);
};
const handleCurrentChange = (currentPage) => {
emit("current-change", currentPage);
};
const handleSizeChange = (size) => {
emit("size-change", size);
};
return {
t,
prefix,
searchbarRef,
toolbarRef,
simpleTableRef,
paginationRef,
slotCols,
headerSlotCols,
filterSlotCols,
expandSlotCols,
selectorSlots,
tableToolbar,
onSearchbarChanged,
handleCurrentChange,
handleSizeChange
};
}
});
const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { style: { "width": "100%" } }, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hb_table_searchbar = resolveComponent("hb-table-searchbar");
const _component_hb_table_toolbar = resolveComponent("hb-table-toolbar");
const _component_hl_simple_table = resolveComponent("hl-simple-table");
const _component_hl_scrollbar = resolveComponent("hl-scrollbar");
const _component_hl_pagination = resolveComponent("hl-pagination");
const _directive_loading = resolveDirective("loading");
return withDirectives((openBlock(), createElementBlock("div", {
class: normalizeClass(_ctx.prefix + "-simple-table-list"),
style: normalizeStyle([_ctx.padding ? `--table-list-padding: ${_ctx.padding}` : ""])
}, [
_ctx.searchbar.show ? renderSlot(_ctx.$slots, "searchbar", { key: 0 }, () => [
createVNode(_component_hb_table_searchbar, mergeProps({
ref: "searchbarRef",
gap: "var(--sm)"
}, _ctx.searchbar, { onChange: _ctx.onSearchbarChanged }), createSlots({
prefix: withCtx(() => [
renderSlot(_ctx.$slots, "searchbar-prefix")
]),
suffix: withCtx(() => [
renderSlot(_ctx.$slots, "searchbar-suffix")
]),
_: 2
}, [
renderList(_ctx.selectorSlots, (name) => {
return {
name,
fn: withCtx((colData) => [
renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(colData)))
])
};
})
]), 1040, ["onChange"])
]) : createCommentVNode("v-if", true),
renderSlot(_ctx.$slots, "toolbar", {}, () => [
createVNode(_component_hb_table_toolbar, mergeProps({ ref: "toolbarRef" }, _ctx.tableToolbar), {
"extra-after": withCtx(() => [
renderSlot(_ctx.$slots, "toolbar-extra-after")
]),
"extra-before": withCtx(() => [
renderSlot(_ctx.$slots, "toolbar-extra-before")
]),
"action-icon": withCtx(({ item }) => [
renderSlot(_ctx.$slots, "toolbar-action-icon", { item })
]),
_: 3
}, 16)
]),
createVNode(_component_hl_scrollbar, normalizeProps(guardReactiveProps(_ctx.scrollbarProps)), {
default: withCtx(() => [
createVNode(_component_hl_simple_table, mergeProps({ ref: "simpleTableRef" }, _ctx.tableProps, {
cols: _ctx.cols,
data: _ctx.tableData,
onRowClick: _cache[0] || (_cache[0] = (...args) => _ctx.$emit("row-click", ...args)),
onCellClick: _cache[1] || (_cache[1] = (...args) => _ctx.$emit("cell-click", ...args)),
onExpand: _cache[2] || (_cache[2] = (...args) => _ctx.$emit("expand", ...args)),
onSortChange: _cache[3] || (_cache[3] = (...args) => _ctx.$emit("sort-change", ...args))
}), createSlots({
empty: withCtx(() => [
renderSlot(_ctx.$slots, "empty", {}, () => [
createElementVNode("span", null, toDisplayString(_ctx.t("hl.table.emptyText")), 1)
])
]),
unknown: withCtx(() => [
renderSlot(_ctx.$slots, "unknown")
]),
_: 2
}, [
renderList(_ctx.slotCols, (col) => {
return {
name: col.slotName,
fn: withCtx((colData) => [
renderSlot(_ctx.$slots, col.slotName, normalizeProps(guardReactiveProps(colData)))
])
};
}),
renderList(_ctx.headerSlotCols, (col) => {
return {
name: col.headerSlotName,
fn: withCtx((colData) => [
renderSlot(_ctx.$slots, col.headerSlotName, normalizeProps(guardReactiveProps(colData)))
])
};
}),
renderList(_ctx.filterSlotCols, (col) => {
return {
name: col.filter.slotName,
fn: withCtx((colData) => [
renderSlot(_ctx.$slots, col.filter.slotName, normalizeProps(guardReactiveProps(colData)))
])
};
}),
renderList(_ctx.expandSlotCols, (col) => {
return {
name: col.expand.slotName,
fn: withCtx((colData) => [
renderSlot(_ctx.$slots, col.expand.slotName, normalizeProps(guardReactiveProps(colData)))
])
};
})
]), 1040, ["cols", "data"])
]),
_: 3
}, 16),
_ctx.pagination.show ? renderSlot(_ctx.$slots, "pagination", { key: 1 }, () => {
var _a;
return [
((_a = _ctx.tableData) == null ? void 0 : _a.length) > 0 ? (openBlock(), createBlock(_component_hl_pagination, {
key: 0,
ref: "paginationRef",
"page-size": _ctx.pagination.pageSize,
"current-page": _ctx.pagination.currentPage,
total: _ctx.pagination.total,
layout: "sizes, slot, prev, pager, next, jumper",
justify: "between",
onCurrentChange: _ctx.handleCurrentChange,
onSizeChange: _ctx.handleSizeChange
}, {
default: withCtx(() => [
_hoisted_1
]),
_: 1
}, 8, ["page-size", "current-page", "total", "onCurrentChange", "onSizeChange"])) : createCommentVNode("v-if", true)
];
}) : createCommentVNode("v-if", true)
], 6)), [
[_directive_loading, _ctx.loading]
]);
}
var SimpleTableList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { SimpleTableList as default };
//# sourceMappingURL=index.mjs.map