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