You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

127 lines
4.5 KiB

"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _ui = require("../../../ui");
var _utils = require("../../../ui/src/utils");
const {
getIcon
} = _ui.VxeUI;
var _default = exports.default = {
name: 'VxeTableMenuPanel',
props: {
ctxMenuStore: Object,
ctxMenuOpts: Object
},
mounted() {
document.body.appendChild(this.$el);
},
beforeDestroy() {
const {
$el
} = this;
if ($el.parentNode) {
$el.parentNode.removeChild($el);
}
},
render(h) {
const $xeTable = this.$parent;
const {
_e,
ctxMenuOpts,
ctxMenuStore
} = this;
return h('div', {
class: ['vxe-table--context-menu-wrapper', ctxMenuOpts.className, {
'is--visible': ctxMenuStore.visible
}],
style: ctxMenuStore.style
}, ctxMenuStore.list.map((options, gIndex) => {
return options.every(item => item.visible === false) ? _e() : 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 suffixOpts = Object.assign({}, item.suffixConfig);
const menuContent = (0, _utils.getFuncText)(item.name);
return item.visible === false ? null : h('li', {
class: [item.className, {
'link--disabled': item.disabled,
'link--active': item === ctxMenuStore.selected
}],
key: `${gIndex}_${index}`
}, [h('a', {
class: 'vxe-context-menu--link',
on: {
click(evnt) {
$xeTable.ctxMenuLinkEvent(evnt, item);
},
mouseover(evnt) {
$xeTable.ctxMenuMouseoverEvent(evnt, item);
},
mouseout(evnt) {
$xeTable.ctxMenuMouseoutEvent(evnt, item);
}
}
}, [h('div', {
class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
}, [h('i', {
class: prefixOpts.icon || item.prefixIcon
}), prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : _e()]), h('span', {
class: 'vxe-context-menu--link-content',
attrs: {
title: menuContent
}
}, menuContent), h('div', {
class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
}, [h('i', {
class: suffixOpts.icon || item.suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
}), suffixOpts.content ? h('span', `${suffixOpts.content}`) : _e()])]), hasChildMenus ? 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 childSuffixOpts = Object.assign({}, child.suffixConfig);
const childMenuContent = (0, _utils.getFuncText)(child.name);
return child.visible === false ? null : h('li', {
class: [child.className, {
'link--disabled': child.disabled,
'link--active': child === ctxMenuStore.selectChild
}],
key: `${gIndex}_${index}_${cIndex}`
}, [h('a', {
class: 'vxe-context-menu--link',
on: {
click(evnt) {
$xeTable.ctxMenuLinkEvent(evnt, child);
},
mouseover(evnt) {
$xeTable.ctxMenuMouseoverEvent(evnt, item, child);
},
mouseout(evnt) {
$xeTable.ctxMenuMouseoutEvent(evnt, item);
}
}
}, [h('div', {
class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
}, [h('i', {
class: childPrefixOpts.icon || child.prefixIcon
}), childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : _e()]), h('span', {
class: 'vxe-context-menu--link-content',
attrs: {
title: childMenuContent
}
}, childMenuContent), h('div', {
class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
}, [h('i', {
class: childSuffixOpts.icon
}), childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : _e()])])]);
})) : null]);
}));
}));
}
};