150 lines
6.5 KiB
JavaScript
150 lines
6.5 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = void 0;
|
|
var _vue = require("vue");
|
|
var _comp = require("../../../ui/src/comp");
|
|
var _xeUtils = _interopRequireDefault(require("xe-utils"));
|
|
var _ui = require("../../../ui");
|
|
var _utils = require("../../../ui/src/utils");
|
|
var _vn = require("../../../ui/src/vn");
|
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
const {
|
|
getIcon,
|
|
renderEmptyElement
|
|
} = _ui.VxeUI;
|
|
var _default = exports.default = (0, _comp.defineVxeComponent)({
|
|
name: 'VxeTableMenuPanel',
|
|
setup(props, context) {
|
|
const xID = _xeUtils.default.uniqueId();
|
|
const $xeTable = (0, _vue.inject)('$xeTable', {});
|
|
const {
|
|
reactData: tableReactData
|
|
} = $xeTable;
|
|
const refElem = (0, _vue.ref)();
|
|
const refMaps = {
|
|
refElem
|
|
};
|
|
const $xeMenuPanel = {
|
|
xID,
|
|
props,
|
|
context,
|
|
getRefMaps: () => refMaps
|
|
};
|
|
const renderVN = () => {
|
|
const {
|
|
ctxMenuStore
|
|
} = tableReactData;
|
|
const {
|
|
computeMenuOpts
|
|
} = $xeTable.getComputeMaps();
|
|
const menuOpts = computeMenuOpts.value;
|
|
const {
|
|
transfer,
|
|
destroyOnClose
|
|
} = menuOpts;
|
|
const {
|
|
visible,
|
|
list,
|
|
className
|
|
} = ctxMenuStore;
|
|
return (0, _vue.h)(_vue.Teleport, {
|
|
to: 'body',
|
|
disabled: !transfer
|
|
}, [(0, _vue.h)('div', {
|
|
ref: refElem,
|
|
class: ['vxe-table--context-menu-wrapper', className, {
|
|
'is--visible': visible
|
|
}],
|
|
style: ctxMenuStore.style
|
|
}, (destroyOnClose ? visible : true) ? list.map((options, gIndex) => {
|
|
return options.every(item => item.visible === false) ? renderEmptyElement($xeTable) : (0, _vue.h)('ul', {
|
|
class: 'vxe-context-menu--option-wrapper',
|
|
key: gIndex
|
|
}, options.map((item, index) => {
|
|
const hasChildMenus = item.children && item.children.some(child => child.visible !== false);
|
|
const prefixOpts = Object.assign({}, item.prefixConfig);
|
|
const prefixIcon = prefixOpts.icon || item.prefixIcon;
|
|
const suffixOpts = Object.assign({}, item.suffixConfig);
|
|
const suffixIcon = suffixOpts.icon || item.suffixIcon;
|
|
const menuContent = (0, _utils.getFuncText)(item.name);
|
|
return item.visible === false ? renderEmptyElement($xeTable) : (0, _vue.h)('li', {
|
|
class: [item.className, {
|
|
'link--disabled': item.disabled,
|
|
'link--active': item === ctxMenuStore.selected
|
|
}],
|
|
key: `${gIndex}_${index}`
|
|
}, [(0, _vue.h)('a', {
|
|
class: 'vxe-context-menu--link',
|
|
onClick(evnt) {
|
|
$xeTable.ctxMenuLinkEvent(evnt, item);
|
|
},
|
|
onMouseover(evnt) {
|
|
$xeTable.ctxMenuMouseoverEvent(evnt, item);
|
|
},
|
|
onMouseout(evnt) {
|
|
$xeTable.ctxMenuMouseoutEvent(evnt, item);
|
|
}
|
|
}, [(0, _vue.h)('div', {
|
|
class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
|
|
}, [prefixIcon && _xeUtils.default.isFunction(prefixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(prefixIcon({}))) : (0, _vue.h)('i', {
|
|
class: prefixIcon
|
|
}), prefixOpts.content ? (0, _vue.h)('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
|
|
class: 'vxe-context-menu--link-content',
|
|
title: menuContent
|
|
}, menuContent), (0, _vue.h)('div', {
|
|
class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
|
|
}, [suffixIcon && _xeUtils.default.isFunction(suffixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(suffixIcon({}))) : (0, _vue.h)('i', {
|
|
class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
|
|
}), suffixOpts.content ? (0, _vue.h)('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)])]), hasChildMenus && item.children ? (0, _vue.h)('ul', {
|
|
class: ['vxe-table--context-menu-clild-wrapper', {
|
|
'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
|
|
}]
|
|
}, item.children.map((child, cIndex) => {
|
|
const childPrefixOpts = Object.assign({}, child.prefixConfig);
|
|
const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
|
|
const childSuffixOpts = Object.assign({}, child.suffixConfig);
|
|
const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon;
|
|
const childMenuContent = (0, _utils.getFuncText)(child.name);
|
|
return child.visible === false ? null : (0, _vue.h)('li', {
|
|
class: [child.className, {
|
|
'link--disabled': child.disabled,
|
|
'link--active': child === ctxMenuStore.selectChild
|
|
}],
|
|
key: `${gIndex}_${index}_${cIndex}`
|
|
}, [(0, _vue.h)('a', {
|
|
class: 'vxe-context-menu--link',
|
|
onClick(evnt) {
|
|
$xeTable.ctxMenuLinkEvent(evnt, child);
|
|
},
|
|
onMouseover(evnt) {
|
|
$xeTable.ctxMenuMouseoverEvent(evnt, item, child);
|
|
},
|
|
onMouseout(evnt) {
|
|
$xeTable.ctxMenuMouseoutEvent(evnt, item);
|
|
}
|
|
}, [(0, _vue.h)('div', {
|
|
class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
|
|
}, [childPrefixIcon && _xeUtils.default.isFunction(childPrefixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(childPrefixIcon({}))) : (0, _vue.h)('i', {
|
|
class: childPrefixIcon
|
|
}), childPrefixOpts.content ? (0, _vue.h)('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
|
|
class: 'vxe-context-menu--link-content',
|
|
title: childMenuContent
|
|
}, childMenuContent), (0, _vue.h)('div', {
|
|
class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
|
|
}, [childSuffixIcon && _xeUtils.default.isFunction(childSuffixIcon) ? (0, _vue.h)('span', {}, (0, _vn.getSlotVNs)(childSuffixIcon({}))) : (0, _vue.h)('i', {
|
|
class: childSuffixIcon
|
|
}), childSuffixOpts.content ? (0, _vue.h)('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)])])]);
|
|
})) : null]);
|
|
}));
|
|
}) : [])]);
|
|
};
|
|
$xeMenuPanel.renderVN = renderVN;
|
|
return $xeMenuPanel;
|
|
},
|
|
render() {
|
|
return this.renderVN();
|
|
}
|
|
}); |