vxe-table-demonic/lib/menu/src/panel.js

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _vue = require("vue");
var _utils = require("../../tools/utils");
var _xeUtils = _interopRequireDefault(require("xe-utils"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = (0, _vue.defineComponent)({
  name: 'VxeTableContextMenu',
  setup: function (props, context) {
    var xID = _xeUtils.default.uniqueId();
    var $xetable = (0, _vue.inject)('$xetable', {});
    var tableReactData = $xetable.reactData;
    var refElem = (0, _vue.ref)();
    var refMaps = {
      refElem: refElem
    };
    var $xemenupanel = {
      xID: xID,
      props: props,
      context: context,
      getRefMaps: function () {
        return refMaps;
      }
    };
    var renderVN = function () {
      var ctxMenuStore = tableReactData.ctxMenuStore;
      var computeMenuOpts = $xetable.getComputeMaps().computeMenuOpts;
      var menuOpts = computeMenuOpts.value;
      return (0, _vue.h)(_vue.Teleport, {
        to: 'body',
        disabled: false
      }, [(0, _vue.h)('div', {
        ref: refElem,
        class: ['vxe-table--context-menu-wrapper', menuOpts.className, {
          'is--visible': ctxMenuStore.visible
        }],
        style: ctxMenuStore.style
      }, ctxMenuStore.list.map(function (options, gIndex) {
        return options.every(function (item) {
          return item.visible === false;
        }) ? (0, _vue.createCommentVNode)() : (0, _vue.h)('ul', {
          class: 'vxe-context-menu--option-wrapper',
          key: gIndex
        }, options.map(function (item, index) {
          var hasChildMenus = item.children && item.children.some(function (child) {
            return child.visible !== false;
          });
          return item.visible === false ? null : (0, _vue.h)('li', {
            class: [item.className, {
              'link--disabled': item.disabled,
              'link--active': item === ctxMenuStore.selected
            }],
            key: "".concat(gIndex, "_").concat(index)
          }, [(0, _vue.h)('a', {
            class: 'vxe-context-menu--link',
            onClick: function (evnt) {
              $xetable.ctxMenuLinkEvent(evnt, item);
            },
            onMouseover: function (evnt) {
              $xetable.ctxMenuMouseoverEvent(evnt, item);
            },
            onMouseout: function (evnt) {
              $xetable.ctxMenuMouseoutEvent(evnt, item);
            }
          }, [(0, _vue.h)('i', {
            class: ['vxe-context-menu--link-prefix', item.prefixIcon]
          }), (0, _vue.h)('span', {
            class: 'vxe-context-menu--link-content'
          }, (0, _utils.getFuncText)(item.name)), (0, _vue.h)('i', {
            class: ['vxe-context-menu--link-suffix', hasChildMenus ? item.suffixIcon || 'suffix--haschild' : item.suffixIcon]
          })]), hasChildMenus ? (0, _vue.h)('ul', {
            class: ['vxe-table--context-menu-clild-wrapper', {
              'is--show': item === ctxMenuStore.selected && ctxMenuStore.showChild
            }]
          }, item.children.map(function (child, cIndex) {
            return child.visible === false ? null : (0, _vue.h)('li', {
              class: [child.className, {
                'link--disabled': child.disabled,
                'link--active': child === ctxMenuStore.selectChild
              }],
              key: "".concat(gIndex, "_").concat(index, "_").concat(cIndex)
            }, [(0, _vue.h)('a', {
              class: 'vxe-context-menu--link',
              onClick: function (evnt) {
                $xetable.ctxMenuLinkEvent(evnt, child);
              },
              onMouseover: function (evnt) {
                $xetable.ctxMenuMouseoverEvent(evnt, item, child);
              },
              onMouseout: function (evnt) {
                $xetable.ctxMenuMouseoutEvent(evnt, item);
              }
            }, [(0, _vue.h)('i', {
              class: ['vxe-context-menu--link-prefix', child.prefixIcon]
            }), (0, _vue.h)('span', {
              class: 'vxe-context-menu--link-content'
            }, (0, _utils.getFuncText)(child.name))])]);
          })) : null]);
        }));
      }))]);
    };
    $xemenupanel.renderVN = renderVN;
    return $xemenupanel;
  },
  render: function () {
    return this.renderVN();
  }
});
exports.default = _default;