panel.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. var _ui = require("../../../ui");
  7. var _xeUtils = _interopRequireDefault(require("xe-utils"));
  8. var _utils = require("../../../ui/src/utils");
  9. var _vn = require("../../../ui/src/vn");
  10. function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
  11. const {
  12. getIcon,
  13. renderEmptyElement
  14. } = _ui.VxeUI;
  15. var _default = exports.default = {
  16. name: 'VxeTableMenuPanel',
  17. props: {
  18. ctxMenuStore: Object,
  19. ctxMenuOpts: Object
  20. },
  21. inject: {
  22. $xeTable: {
  23. default: null
  24. }
  25. },
  26. mounted() {
  27. const $xeMenuPanel = this;
  28. const $xeTable = $xeMenuPanel.$xeTable;
  29. const menuOpts = $xeTable.computeMenuOpts;
  30. const {
  31. transfer
  32. } = menuOpts;
  33. const el = this.$refs.refElem;
  34. if (transfer && el) {
  35. document.body.appendChild(el);
  36. }
  37. },
  38. beforeDestroy() {
  39. const el = this.$refs.refElem;
  40. if (el && el.parentNode) {
  41. el.parentNode.removeChild(el);
  42. }
  43. },
  44. render(h) {
  45. const $xeMenuPanel = this;
  46. const $xeTable = $xeMenuPanel.$xeTable;
  47. const tableReactData = $xeTable;
  48. const {
  49. ctxMenuStore
  50. } = tableReactData;
  51. const menuOpts = $xeTable.computeMenuOpts;
  52. const {
  53. destroyOnClose
  54. } = menuOpts;
  55. const {
  56. visible,
  57. list,
  58. className
  59. } = ctxMenuStore;
  60. return h('div', {
  61. ref: 'refElem',
  62. class: ['vxe-table--context-menu-wrapper', className, {
  63. 'is--visible': visible
  64. }],
  65. style: ctxMenuStore.style
  66. }, (destroyOnClose ? visible : true) ? list.map((options, gIndex) => {
  67. return options.every(item => item.visible === false) ? renderEmptyElement($xeTable) : h('ul', {
  68. class: 'vxe-context-menu--option-wrapper',
  69. key: gIndex
  70. }, options.map((item, index) => {
  71. const hasChildMenus = item.children && item.children.some(child => child.visible !== false);
  72. const prefixOpts = Object.assign({}, item.prefixConfig);
  73. const prefixIcon = prefixOpts.icon || item.prefixIcon;
  74. const suffixOpts = Object.assign({}, item.suffixConfig);
  75. const suffixIcon = suffixOpts.icon || item.suffixIcon;
  76. const menuContent = (0, _utils.getFuncText)(item.name);
  77. return item.visible === false ? renderEmptyElement($xeTable) : h('li', {
  78. class: [item.className, {
  79. 'link--disabled': item.disabled,
  80. 'link--active': item === ctxMenuStore.selected
  81. }],
  82. key: `${gIndex}_${index}`
  83. }, [h('a', {
  84. class: 'vxe-context-menu--link',
  85. on: {
  86. click(evnt) {
  87. $xeTable.ctxMenuLinkEvent(evnt, item);
  88. },
  89. mouseover(evnt) {
  90. $xeTable.ctxMenuMouseoverEvent(evnt, item);
  91. },
  92. mouseout(evnt) {
  93. $xeTable.ctxMenuMouseoutEvent(evnt, item);
  94. }
  95. }
  96. }, [h('div', {
  97. class: ['vxe-context-menu--link-prefix', prefixOpts.className || '']
  98. }, [prefixIcon && _xeUtils.default.isFunction(prefixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(prefixIcon.call($xeTable, {}))) : h('i', {
  99. class: prefixIcon
  100. }), prefixOpts.content ? h('span', {}, `${prefixOpts.content}`) : renderEmptyElement($xeTable)]), h('span', {
  101. class: 'vxe-context-menu--link-content',
  102. attrs: {
  103. title: menuContent
  104. }
  105. }, menuContent), h('div', {
  106. class: ['vxe-context-menu--link-suffix', suffixOpts.className || '']
  107. }, [suffixIcon && _xeUtils.default.isFunction(suffixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(suffixIcon.call($xeTable, {}))) : h('i', {
  108. class: suffixIcon || (hasChildMenus ? getIcon().TABLE_MENU_OPTIONS : '')
  109. }), suffixOpts.content ? h('span', `${suffixOpts.content}`) : renderEmptyElement($xeTable)])]), hasChildMenus && item.children ? h('ul', {
  110. class: ['vxe-table--context-menu-clild-wrapper', {
  111. 'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
  112. }]
  113. }, item.children.map((child, cIndex) => {
  114. const childPrefixOpts = Object.assign({}, child.prefixConfig);
  115. const childPrefixIcon = childPrefixOpts.icon || child.prefixIcon;
  116. const childSuffixOpts = Object.assign({}, child.suffixConfig);
  117. const childSuffixIcon = childSuffixOpts.icon || child.suffixIcon;
  118. const childMenuContent = (0, _utils.getFuncText)(child.name);
  119. return child.visible === false ? null : h('li', {
  120. class: [child.className, {
  121. 'link--disabled': child.disabled,
  122. 'link--active': child === ctxMenuStore.selectChild
  123. }],
  124. key: `${gIndex}_${index}_${cIndex}`
  125. }, [h('a', {
  126. class: 'vxe-context-menu--link',
  127. on: {
  128. click(evnt) {
  129. $xeTable.ctxMenuLinkEvent(evnt, child);
  130. },
  131. mouseover(evnt) {
  132. $xeTable.ctxMenuMouseoverEvent(evnt, item, child);
  133. },
  134. mouseout(evnt) {
  135. $xeTable.ctxMenuMouseoutEvent(evnt, item);
  136. }
  137. }
  138. }, [h('div', {
  139. class: ['vxe-context-menu--link-prefix', childPrefixOpts.className || '']
  140. }, [childPrefixIcon && _xeUtils.default.isFunction(childPrefixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(childPrefixIcon.call($xeTable, {}))) : h('i', {
  141. class: childPrefixIcon
  142. }), childPrefixOpts.content ? h('span', `${childPrefixOpts.content}`) : renderEmptyElement($xeTable)]), h('span', {
  143. class: 'vxe-context-menu--link-content',
  144. attrs: {
  145. title: childMenuContent
  146. }
  147. }, childMenuContent), h('div', {
  148. class: ['vxe-context-menu--link-suffix', childSuffixOpts.className || '']
  149. }, [childSuffixIcon && _xeUtils.default.isFunction(childSuffixIcon) ? h('span', {}, (0, _vn.getSlotVNs)(childSuffixIcon.call($xeTable, {}))) : h('i', {
  150. class: childSuffixIcon
  151. }), childSuffixOpts.content ? h('span', `${childSuffixOpts.content}`) : renderEmptyElement($xeTable)])])]);
  152. })) : null]);
  153. }));
  154. }) : []);
  155. }
  156. };