tav-ui
Version:
221 lines (216 loc) • 8.55 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var iconsVue = require('@ant-design/icons-vue');
var antDesignVue = require('ant-design-vue');
var index$2 = require('../../../button-modal/index2.js');
var index$1 = require('../../../dropdown/index2.js');
var index = require('../../../icon/index2.js');
var useGlobalConfig = require('../../../../hooks/global/useGlobalConfig2.js');
var is = require('../../../../utils/is2.js');
var propTypes = require('../../../../utils/propTypes2.js');
var _const = require('../const2.js');
var useTableContext = require('../hooks/useTableContext2.js');
var useColumnAutoWidth = require('../hooks/useColumnAutoWidth2.js');
var pluginVue_exportHelper = require('../../../../../_virtual/plugin-vue_export-helper.js');
const _sfc_main = vue.defineComponent({
name: "TableAction",
components: {
Icon: index.TaIcon,
Divider: antDesignVue.Divider,
Dropdown: index$1.TaDropdown,
MoreOutlined: iconsVue.MoreOutlined,
ModalButton: index$2.TaButtonModal,
AButton: antDesignVue.Button
},
props: {
actions: {
type: Array,
default: null
},
dropDownActions: {
type: Array,
default: null
},
divider: propTypes.propTypes.bool.def(true),
outside: propTypes.propTypes.bool,
stopButtonPropagation: propTypes.propTypes.bool.def(true)
},
setup(props) {
const prefixCls = "ta-basic-table-action";
let table = {};
if (!props.outside) {
table = useTableContext.useTableContext();
}
const id = _const.buildTableActionId();
function isIfShow(action) {
const ifShow = action.ifShow;
let isIfShow2 = true;
if (is.isBoolean(ifShow)) {
isIfShow2 = ifShow;
}
if (is.isFunction(ifShow)) {
isIfShow2 = ifShow(action);
}
return isIfShow2;
}
const Permissions = useGlobalConfig.useGlobalConfig("permissions");
const getPermissonFilterActions = vue.computed(() => {
return (vue.toRaw(props.actions) || []).filter((action) => {
return action.permission ? vue.unref(Permissions)[action.permission]?.ifShow && isIfShow(action) : isIfShow(action);
});
});
let restActions = [];
const Actions = vue.computed(() => {
const actions = getPermissonFilterActions.value;
if (actions.length <= _const.MAX_ACTION_NUMBER) {
restActions = [];
const isOverMax = useColumnAutoWidth.isOverMaxWidth(actions);
if (isOverMax) {
const handleActions = useColumnAutoWidth.limitActionLabel(actions);
const total = useColumnAutoWidth.useColumnActionAutoWidth(vue.unref(getPermissonFilterActions));
table.setCacheActionWidths({ key: id, value: total });
return handleActions;
} else {
const total = useColumnAutoWidth.useColumnActionAutoWidth(vue.unref(getPermissonFilterActions), false);
table.setCacheActionWidths({ key: id, value: total });
return actions;
}
} else {
const _actions = actions.slice(0, _const.MAX_ACTION_NUMBER - 1);
restActions = actions.slice(_const.MAX_ACTION_NUMBER - 1);
const isOverMax = useColumnAutoWidth.isOverMaxWidth(actions);
if (isOverMax) {
const handleActions = useColumnAutoWidth.limitActionLabel(_actions);
const total = useColumnAutoWidth.useColumnActionAutoWidth(vue.unref(getPermissonFilterActions));
table.setCacheActionWidths({ key: id, value: total });
return handleActions;
} else {
const total = useColumnAutoWidth.useColumnActionAutoWidth(vue.unref(getPermissonFilterActions), false);
table.setCacheActionWidths({ key: id, value: total });
return _actions;
}
}
});
const DropdownActions = vue.computed(() => {
const actions = [...restActions, ...vue.toRaw(props.dropDownActions) || []];
return actions;
});
const getActions = vue.computed(() => {
return Actions.value.map((action) => {
return {
type: "link",
size: "small",
...action
};
});
});
const getDropdownList = vue.computed(() => {
return DropdownActions.value.map((action, index, list) => {
const { label } = action;
return {
type: "link",
size: "small",
...action,
text: label,
divider: index < list.length - 1 ? props.divider : false
};
});
});
const getAlign = vue.computed(() => {
const columns = table?.getColumns?.() || [];
const actionColumn = columns.find((item) => item.flag === _const.ACTION_COLUMN_FLAG);
return actionColumn?.align ?? "left";
});
function getTooltip(data) {
return {
getPopupContainer: () => vue.unref(table?.wrapRef.value) ?? document.body,
placement: "bottom",
...is.isString(data) ? { title: data } : data
};
}
async function onCellClick(e) {
if (!props.stopButtonPropagation)
return;
const path = e.composedPath();
const isInButton = path.find((ele) => {
return ele.tagName?.toUpperCase() === "BUTTON";
});
isInButton && e.stopPropagation();
}
return {
id,
prefixCls,
getActions,
getDropdownList,
getAlign,
onCellClick,
getTooltip,
DropdownActions
};
}
});
const _hoisted_1 = ["id"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Icon = vue.resolveComponent("Icon");
const _component_ModalButton = vue.resolveComponent("ModalButton");
const _component_Divider = vue.resolveComponent("Divider");
const _component_MoreOutlined = vue.resolveComponent("MoreOutlined");
const _component_a_button = vue.resolveComponent("a-button");
const _component_Dropdown = vue.resolveComponent("Dropdown");
return vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.id,
class: vue.normalizeClass([_ctx.prefixCls, _ctx.getAlign]),
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onCellClick && _ctx.onCellClick(...args))
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.getActions, (action, index) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: `${index}-${action.label}`
}, [
vue.createVNode(_component_ModalButton, vue.normalizeProps(vue.guardReactiveProps(action)), {
default: vue.withCtx(() => [
action.icon ? (vue.openBlock(), vue.createBlock(_component_Icon, {
key: 0,
icon: action.icon,
class: vue.normalizeClass({ "mr-1": !!action.label })
}, null, 8, ["icon", "class"])) : vue.createCommentVNode("v-if", true),
action.label ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createTextVNode(vue.toDisplayString(action.label), 1)
], 2112)) : vue.createCommentVNode("v-if", true)
]),
_: 2
}, 1040),
_ctx.divider && index < _ctx.getActions.length - 1 ? (vue.openBlock(), vue.createBlock(_component_Divider, {
key: 0,
type: "vertical",
class: "action-divider"
})) : vue.createCommentVNode("v-if", true)
], 64);
}), 128)),
_ctx.DropdownActions.length || _ctx.dropDownActions && _ctx.getDropdownList.length > 0 ? (vue.openBlock(), vue.createBlock(_component_Dropdown, {
key: 0,
trigger: ["hover"],
"drop-menu-list": _ctx.getDropdownList,
placement: "bottomCenter",
popconfirm: ""
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "more"),
!_ctx.$slots.more ? (vue.openBlock(), vue.createBlock(_component_a_button, {
key: 0,
type: "link",
size: "small"
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_MoreOutlined, { class: "icon-more" })
]),
_: 1
})) : vue.createCommentVNode("v-if", true)
]),
_: 3
}, 8, ["drop-menu-list"])) : vue.createCommentVNode("v-if", true)
], 10, _hoisted_1);
}
var tableAction = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/table/src/components/TableAction.vue"]]);
exports["default"] = tableAction;
//# sourceMappingURL=TableAction2.js.map