hongluan-business-ui
Version:
Hongluan Business Component Library for Vue 3
213 lines (208 loc) • 8.95 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var util = require('../../../utils/util.js');
var colConfig = require('./col-config.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "TableToolbar",
components: { HlGroup: hongluanUi.HlGroup, HlButton: hongluanUi.HlButton, HlDropdown: hongluanUi.HlDropdown, HlDropdownMenu: hongluanUi.HlDropdownMenu, HlDropdownItem: hongluanUi.HlDropdownItem, ColConfig: colConfig["default"], HlIcon: hongluanUi.HlIcon, SystemFilter: hongluanUi.SystemFilter, SystemMore: hongluanUi.SystemMore },
props: {
selection: {
type: Object,
default: () => ({ show: false, count: "--", total: "--" })
},
action: {
type: Object,
default: () => ({ show: true, showCount: 1, actions: [] })
},
extra: {
type: Object,
default: () => ({
showColConfig: true,
colConfig: {}
})
}
},
emits: ["action", "col-change"],
setup(props, { emit }) {
const { prefix } = util.usePrefix();
const shownActionItems = vue.computed(() => {
let arr = [];
if (props.action.showCount > 0) {
arr = props.action.actions.filter((a) => a.show || !("show" in a)).slice(0, props.action.showCount);
}
return arr;
});
const hiddenActionItems = vue.computed(() => {
let arr = [];
if (props.action.showCount > 0) {
arr = props.action.actions.filter((a) => a.show || !("show" in a)).slice(props.action.showCount);
}
arr = arr.filter((item) => "show" in item ? item.show : true);
return arr;
});
const doAction = (item) => {
emit("action", item);
};
return {
prefix,
shownActionItems,
hiddenActionItems,
doAction
};
}
});
const _hoisted_1 = {
key: 0,
class: "table-counts static"
};
const _hoisted_2 = /* @__PURE__ */ vue.createTextVNode("\u5F53\u524D\u5171 ");
const _hoisted_3 = /* @__PURE__ */ vue.createTextVNode(" \u6761\u6570\u636E");
const _hoisted_4 = { key: 0 };
const _hoisted_5 = /* @__PURE__ */ vue.createTextVNode("\uFF0C\u5DF2\u9009\u4E2D ");
const _hoisted_6 = /* @__PURE__ */ vue.createTextVNode(" \u6761");
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_hl_button = vue.resolveComponent("hl-button");
const _component_system_more = vue.resolveComponent("system-more");
const _component_hl_icon = vue.resolveComponent("hl-icon");
const _component_hl_dropdown_item = vue.resolveComponent("hl-dropdown-item");
const _component_hl_dropdown_menu = vue.resolveComponent("hl-dropdown-menu");
const _component_hl_dropdown = vue.resolveComponent("hl-dropdown");
const _component_hl_group = vue.resolveComponent("hl-group");
const _component_system_filter = vue.resolveComponent("system-filter");
const _component_col_config = vue.resolveComponent("col-config");
return vue.openBlock(), vue.createBlock(_component_hl_group, {
full: "full-x",
align: "items-middle items-between",
gap: "var(--lg)",
class: vue.normalizeClass(_ctx.prefix + "-table-toolbar")
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "selection", {}, () => [
_ctx.selection.show || false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
_hoisted_2,
vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.selection.total), 1),
_hoisted_3,
_ctx.selection.count > 0 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
_hoisted_5,
vue.createElementVNode("strong", null, vue.toDisplayString(_ctx.selection.count), 1),
_hoisted_6
])) : vue.createCommentVNode("v-if", true)
])) : vue.createCommentVNode("v-if", true)
]),
vue.createVNode(_component_hl_group, { class: "toolbar-batch" }, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_group, {
gap: "var(--xs)",
class: vue.normalizeClass(["batch-wrap", _ctx.action.show ? "show" : ""])
}, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.shownActionItems, (item, idx) => {
return vue.withDirectives((vue.openBlock(), vue.createBlock(_component_hl_button, vue.mergeProps({ key: idx }, item, {
onClick: ($event) => _ctx.doAction(item)
}), {
icon: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "action-icon", { item })
]),
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.label) + " ", 1)
]),
_: 2
}, 1040, ["onClick"])), [
[vue.vShow, "show" in item ? item.show : true]
]);
}), 128)),
_ctx.hiddenActionItems.length > 0 ? (vue.openBlock(), vue.createBlock(_component_hl_dropdown, { key: 0 }, {
dropdown: vue.withCtx(() => [
vue.createVNode(_component_hl_dropdown_menu, null, {
default: vue.withCtx(() => [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.hiddenActionItems, (item, idx) => {
return vue.openBlock(), vue.createBlock(_component_hl_dropdown_item, vue.mergeProps({ key: idx }, item, {
onClick: ($event) => _ctx.doAction(item)
}), {
icon: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "action-icon", { item })
]),
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(item.label) + " ", 1)
]),
_: 2
}, 1040, ["onClick"]);
}), 128))
]),
_: 3
})
]),
default: vue.withCtx(() => [
vue.createVNode(_component_hl_button, {
type: "link",
equal: ""
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_icon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_more)
]),
_: 1
})
]),
_: 1
})
]),
_: 3
})) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["class"])
]),
_: 3
}),
vue.createVNode(_component_hl_group, {
class: "static toolbar-setting",
gap: "var(--xs)"
}, {
default: vue.withCtx(() => {
var _a, _b, _c, _d;
return [
vue.renderSlot(_ctx.$slots, "extra-before"),
_ctx.extra.showColConfig ? (vue.openBlock(), vue.createBlock(_component_col_config, {
key: 0,
cols: (_a = _ctx.extra.colConfig) == null ? void 0 : _a.cols,
"store-key": (_b = _ctx.extra.colConfig) == null ? void 0 : _b.storeKey,
version: (_c = _ctx.extra.colConfig) == null ? void 0 : _c.version,
"col-label-field": (_d = _ctx.extra.colConfig) == null ? void 0 : _d.colLabelField,
onColChange: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("col-change"))
}, {
reference: vue.withCtx(() => [
vue.createVNode(_component_hl_button, {
type: "primary",
equal: "",
effect: "light"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_hl_icon, null, {
default: vue.withCtx(() => [
vue.createVNode(_component_system_filter)
]),
_: 1
})
]),
_: 1
})
]),
_: 1
}, 8, ["cols", "store-key", "version", "col-label-field"])) : vue.createCommentVNode("v-if", true),
vue.renderSlot(_ctx.$slots, "extra-after")
];
}),
_: 3
})
]),
_: 3
}, 8, ["class"]);
}
var TableToolbar = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);
exports["default"] = TableToolbar;
//# sourceMappingURL=index.js.map