| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- "use strict";
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _ui = require("../../../ui");
- var _xeUtils = _interopRequireDefault(require("xe-utils"));
- 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 = {
- name: 'VxeTableMenuPanel',
- props: {
- ctxMenuStore: Object,
- ctxMenuOpts: Object
- },
- inject: {
- $xeTable: {
- default: null
- }
- },
- mounted() {
- const $xeMenuPanel = this;
- const $xeTable = $xeMenuPanel.$xeTable;
- const menuOpts = $xeTable.computeMenuOpts;
- const {
- transfer
- } = menuOpts;
- const el = this.$refs.refElem;
- if (transfer && el) {
- document.body.appendChild(el);
- }
- },
- beforeDestroy() {
- const el = this.$refs.refElem;
- if (el && el.parentNode) {
- el.parentNode.removeChild(el);
- }
- },
- render(h) {
- const $xeMenuPanel = this;
- const $xeTable = $xeMenuPanel.$xeTable;
- const tableReactData = $xeTable;
- const {
- ctxMenuStore
- } = tableReactData;
- const menuOpts = $xeTable.computeMenuOpts;
- const {
- destroyOnClose
- } = menuOpts;
- const {
- visible,
- list,
- className
- } = ctxMenuStore;
- return 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) : 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) : 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 || '']
- }, [prefixIcon && _xeUtils.default.isFunction(prefixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(prefixIcon.call($xeTable, {}))) : h('i', {
- class: prefixIcon
- }), prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)]), h('span', {
- class: 'vxe-context-menu--link-content',
- attrs: {
- title: menuContent
- }
- }, menuContent), h('div', {
- class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
- }, [suffixIcon && _xeUtils.default.isFunction(suffixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(suffixIcon.call($xeTable, {}))) : h('i', {
- class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
- }), suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)])]), hasChildMenus && item.children ? 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 : 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 || '']
- }, [childPrefixIcon && _xeUtils.default.isFunction(childPrefixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(childPrefixIcon.call($xeTable, {}))) : h('i', {
- class: childPrefixIcon
- }), childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)]), h('span', {
- class: 'vxe-context-menu--link-content',
- attrs: {
- title: childMenuContent
- }
- }, childMenuContent), h('div', {
- class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
- }, [childSuffixIcon && _xeUtils.default.isFunction(childSuffixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(childSuffixIcon.call($xeTable, {}))) : h('i', {
- class: childSuffixIcon
- }), childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)])])]);
- })) : null]);
- }));
- }) : []);
- }
- };
|