hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
305 lines (300 loc) • 10.6 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var index = require('../../table-toolbar/index.js');
var index$1 = require('../../table-searchbar/index.js');
var util = require('../../../utils/util.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "SimpleTableList",
components: {
HbTableToolbar: index.HbTableToolbar,
HbTableSearchbar: index$1.HbTableSearchbar,
HlSimpleTable: hongluanUi.HlSimpleTable,
HlPagination: hongluanUi.HlPagination,
HlScrollbar: hongluanUi.HlScrollbar
},
directives: {
loading: hongluanUi.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 } = hongluanUi.useLocale();
const { prefix } = util.usePrefix();
const searchbarRef = vue.ref();
const toolbarRef = vue.ref();
const simpleTableRef = vue.ref();
const paginationRef = vue.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 = vue.computed(() => {
const result = [];
getSlotCols(props.cols, (col) => col.slotName, result);
return result;
});
const headerSlotCols = vue.computed(() => {
const result = [];
getSlotCols(props.cols, (col) => col.headerSlotName, result);
return result;
});
const filterSlotCols = vue.computed(() => {
const result = [];
getSlotCols(props.cols, (col) => {
var _a;
return (_a = col.filter) == null ? void 0 : _a.slotName;
}, result);
return result;
});
const expandSlotCols = vue.computed(() => {
const result = [];
getSlotCols(props.cols, (col) => {
var _a;
return (_a = col.expand) == null ? void 0 : _a.slotName;
}, result);
return result;
});
const selectorSlots = vue.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 = vue.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__ */ vue.createElementVNode("div", { style: { "width": "100%" } }, null, -1);
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hb_table_searchbar = vue.resolveComponent("hb-table-searchbar");
const _component_hb_table_toolbar = vue.resolveComponent("hb-table-toolbar");
const _component_hl_simple_table = vue.resolveComponent("hl-simple-table");
const _component_hl_scrollbar = vue.resolveComponent("hl-scrollbar");
const _component_hl_pagination = vue.resolveComponent("hl-pagination");
const _directive_loading = vue.resolveDirective("loading");
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(_ctx.prefix + "-simple-table-list"),
style: vue.normalizeStyle([_ctx.padding ? `--table-list-padding: ${_ctx.padding}` : ""])
}, [
_ctx.searchbar.show ? vue.renderSlot(_ctx.$slots, "searchbar", { key: 0 }, () => [
vue.createVNode(_component_hb_table_searchbar, vue.mergeProps({
ref: "searchbarRef",
gap: "var(--sm)"
}, _ctx.searchbar, { onChange: _ctx.onSearchbarChanged }), vue.createSlots({
prefix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "searchbar-prefix")
]),
suffix: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "searchbar-suffix")
]),
_: 2
}, [
vue.renderList(_ctx.selectorSlots, (name) => {
return {
name,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
})
]), 1040, ["onChange"])
]) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "toolbar", {}, () => [
vue.createVNode(_component_hb_table_toolbar, vue.mergeProps({ ref: "toolbarRef" }, _ctx.tableToolbar), {
"extra-after": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar-extra-after")
]),
"extra-before": vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "toolbar-extra-before")
]),
"action-icon": vue.withCtx(({ item }) => [
vue.renderSlot(_ctx.$slots, "toolbar-action-icon", { item })
]),
_: 3
}, 16)
]),
vue.createVNode(_component_hl_scrollbar, vue.normalizeProps(vue.guardReactiveProps(_ctx.scrollbarProps)), {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_simple_table, vue.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))
}), vue.createSlots({
empty: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "empty", {}, () => [
vue.createElementVNode("span", null, vue.toDisplayString(_ctx.t("hl.table.emptyText")), 1)
])
]),
unknown: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "unknown")
]),
_: 2
}, [
vue.renderList(_ctx.slotCols, (col) => {
return {
name: col.slotName,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, col.slotName, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
}),
vue.renderList(_ctx.headerSlotCols, (col) => {
return {
name: col.headerSlotName,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, col.headerSlotName, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
}),
vue.renderList(_ctx.filterSlotCols, (col) => {
return {
name: col.filter.slotName,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, col.filter.slotName, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
}),
vue.renderList(_ctx.expandSlotCols, (col) => {
return {
name: col.expand.slotName,
fn: vue.withCtx((colData) => [
vue.renderSlot(_ctx.$slots, col.expand.slotName, vue.normalizeProps(vue.guardReactiveProps(colData)))
])
};
})
]), 1040, ["cols", "data"])
]),
_: 3
}, 16),
_ctx.pagination.show ? vue.renderSlot(_ctx.$slots, "pagination", { key: 1 }, () => {
var _a;
return [
((_a = _ctx.tableData) == null ? void 0 : _a.length) > 0 ? (vue.openBlock(), vue.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: vue.withCtx(() => [
_hoisted_1
]),
_: 1
}, 8, ["page-size", "current-page", "total", "onCurrentChange", "onSizeChange"])) : vue.createCommentVNode("v-if", true)
];
}) : vue.createCommentVNode("v-if", true)
], 6)), [
[_directive_loading, _ctx.loading]
]);
}
var SimpleTableList = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = SimpleTableList;
//# sourceMappingURL=index.js.map