@arco-vue-pro-components/pro-components
Version:
基于@arco-design/web-vue组件的高级组件，包括pro-table
231 lines (230 loc) • 7.15 kB
JavaScript
;
var vue = require("vue");
var icon = require("@arco-design/web-vue/es/icon");
var webVue = require("@arco-design/web-vue");
var columnSetting = require("./column-setting.js");
var index = require("../../locale/index.js");
var index$3 = require("../../_utils/index.js");
var densityIcon = require("./density-icon.js");
var fullscreenIcon = require("./fullscreen-icon.js");
var context = require("../form/context.js");
var is = require("../../_utils/is.js");
var index$1 = require("../my-tool-tip/index.js");
var index$2 = require("../utils/index.js");
function getSettingItem(setting, slots) {
if (vue.isVNode(setting)) {
return setting;
}
if (setting) {
const settingConfig = setting;
const {
icon: icon2,
tooltip,
onClick,
key
} = settingConfig;
if (icon2 && tooltip) {
return vue.createVNode(index$1, null, {
default: () => [vue.createVNode("span", {
"key": key,
"onClick": () => {
if (onClick) {
onClick(key);
}
}
}, [icon2])],
content: () => {
return tooltip;
}
});
}
return icon2;
}
return null;
}
function getButtonText({
getMessage
}, options) {
var _a;
return {
reload: {
text: getMessage("tableToolBar.reload", "\u5237\u65B0"),
icon: (_a = options.reloadIcon) != null ? _a : vue.createVNode(icon.IconRefresh, null, null)
},
density: {
text: getMessage("tableToolBar.density", "\u8868\u683C\u5BC6\u5EA6"),
icon: vue.createVNode(densityIcon, {
"icon": options.densityIcon
}, null)
},
fullScreen: {
text: getMessage("tableToolBar.fullScreen", "\u5168\u5C4F"),
icon: vue.createVNode(fullscreenIcon, null, null)
}
};
}
function renderDefaultOption(options, defaultOptions, actions, columns, slots) {
return Object.keys(options).filter((item) => item).map((key) => {
const value = options[key];
if (!value) {
return null;
}
let onClick = value === true ? defaultOptions[key] : (event) => {
value == null ? void 0 : value(event, actions);
};
if (typeof onClick !== "function") {
onClick = () => {
};
}
if (key === "setting") {
return vue.createVNode(columnSetting, vue.mergeProps(options[key], {
"columns": columns,
"key": key,
"icon": options.settingIcon
}), slots);
}
if (key === "fullScreen") {
return vue.createVNode("span", {
"key": key,
"onClick": onClick
}, [vue.createVNode(fullscreenIcon, null, null)]);
}
const optionItem = getButtonText(defaultOptions, options)[key];
if (optionItem) {
return vue.createVNode("span", {
"key": key,
"onClick": onClick
}, [vue.createVNode(index$1, null, {
default: () => [slots[`${key}-icon`] ? slots[`${key}-icon`]() : optionItem.icon],
content: () => {
return optionItem.text;
}
})]);
}
return null;
}).filter((item) => item);
}
var ToolBar = vue.defineComponent({
name: "ProToolBar",
props: {
toolBarRender: {
type: [Boolean, Function],
default: void 0
},
optionsRender: {
type: [Boolean, Function],
default: false
},
options: {
type: [Object, Boolean],
default: false
},
headerTitle: {
type: [String, Boolean, Object, Function],
default: "\u5217\u8868\u6570\u636E"
}
},
setup(props, {
slots
}) {
const tableCtx = vue.inject(context.proTableInjectionKey, {});
const propsOptions = vue.toRef(props, "options");
const prefixCls = index$3.getPrefixCls("pro-table");
const {
getMessage
} = index.useI18n();
const optionDom = vue.computed(() => {
const defaultOptions = {
reload: () => {
var _a;
return (_a = tableCtx.action) == null ? void 0 : _a.reload();
},
density: true,
setting: true,
fullScreen: () => {
var _a, _b;
return (_b = (_a = tableCtx.action) == null ? void 0 : _a.fullScreen) == null ? void 0 : _b.call(_a);
}
};
if (propsOptions.value === false) {
return [];
}
const options = {
...defaultOptions,
fullScreen: false,
...propsOptions.value === true ? {} : propsOptions.value
};
const settings = renderDefaultOption(options, {
...defaultOptions,
getMessage
}, tableCtx.action, tableCtx.columns, slots);
if (slots["options-render"]) {
return slots["options-render"]({
headerTitle: props.headerTitle,
toolBarRender: props.toolBarRender,
action: tableCtx.action,
options: propsOptions.value,
selectedRowKeys: tableCtx.selectedRowKeys || [],
selectedRows: tableCtx.selectedRows || [],
columns: tableCtx.columns || [],
optionsRender: props.optionsRender
}, settings);
}
if (props.optionsRender) {
return props.optionsRender(
{
headerTitle: props.headerTitle,
toolBarRender: props.toolBarRender,
action: tableCtx.action,
options: propsOptions.value,
selectedRowKeys: tableCtx.selectedRowKeys || [],
selectedRows: tableCtx.selectedRows || [],
columns: tableCtx.columns || [],
optionsRender: props.optionsRender
},
settings
);
}
return settings;
});
const render = () => {
var _a, _b;
const data = {
action: tableCtx.action,
selectedRowKeys: tableCtx.selectedRowKeys || [],
selectedRows: tableCtx.selectedRows || []
};
const actions = props.toolBarRender ? props.toolBarRender(data) : [];
return vue.createVNode("div", {
"class": `${prefixCls}-toolbarContainer`
}, [vue.createVNode("div", {
"class": `${prefixCls}-title`
}, [(_b = (_a = slots["header-title"]) == null ? void 0 : _a.call(slots, data)) != null ? _b : index$2.runFunction(props.headerTitle, data)]), vue.createVNode(webVue.Space, null, {
default: () => {
var _a2, _b2;
return [(_a2 = slots["tool-bar"]) == null ? void 0 : _a2.call(slots, data), actions.filter((item) => !!item).map((node, index2) => vue.createVNode(vue.Fragment, {
"key": index2
}, [node])), is.isArray(optionDom.value) && ((_b2 = optionDom.value) == null ? void 0 : _b2.length) ? vue.createVNode("div", {
"class": `${prefixCls}-setting`
}, [optionDom.value.map((setting, index2) => {
const settingItem = getSettingItem(setting);
if (!settingItem) {
return null;
}
return vue.createVNode("div", {
"key": index2,
"class": `${prefixCls}-setting-item`
}, [settingItem]);
})]) : null];
}
})]);
};
return {
render
};
},
render() {
return this.render();
}
});
module.exports = ToolBar;