tav-ui/lib/packages/components/context-menu/src/context-menu2.js

Tav UI

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var antDesignVue = require('ant-design-vue');
var index = require('../../icon/index2.js');
var types = require('./types2.js');

function _isSlot(s) {
  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !vue.isVNode(s);
}
const prefixCls = "context-menu";
const ItemContent = (props) => {
  const {
    item
  } = props;
  return vue.createVNode("span", {
    "style": "display: inline-block; width: 100%; ",
    "class": "px-4",
    "onClick": props.handler.bind(null, item)
  }, [props.showIcon && item.icon && vue.createVNode(index.TaIcon, {
    "class": "mr-2",
    "icon": item.icon
  }, null), vue.createVNode("span", null, [item.label])]);
};
var ContextMenu = vue.defineComponent({
  name: "TaContextMenu",
  props: types.contextMenuProps,
  setup(props) {
    const wrapRef = vue.ref(null);
    const showRef = vue.ref(false);
    const getStyle = vue.computed(() => {
      const {
        axis,
        items,
        styles,
        width
      } = props;
      const {
        x,
        y
      } = axis || {
        x: 0,
        y: 0
      };
      const menuHeight = (items || []).length * 40;
      const menuWidth = width;
      const body = document.body;
      const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
      const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
      return {
        ...styles,
        width: `${width}px`,
        left: `${left + 1}px`,
        top: `${top + 1}px`
      };
    });
    vue.onMounted(() => {
      vue.nextTick(() => showRef.value = true);
    });
    vue.onUnmounted(() => {
      const el = vue.unref(wrapRef);
      el && document.body.removeChild(el);
    });
    function handleAction(item, e) {
      const {
        handler,
        disabled
      } = item;
      if (disabled)
        return;
      showRef.value = false;
      e?.stopPropagation();
      e?.preventDefault();
      handler?.();
    }
    function renderMenuItem(items) {
      return items.map((item) => {
        const {
          disabled,
          label,
          children,
          divider = false
        } = item;
        const contentProps = {
          item,
          handler: handleAction,
          showIcon: props.showIcon
        };
        if (!children || children.length === 0) {
          return vue.createVNode(vue.Fragment, null, [vue.createVNode(antDesignVue.Menu.Item, {
            "disabled": disabled,
            "class": `${prefixCls}__item`,
            "key": label
          }, {
            default: () => [vue.createVNode(ItemContent, contentProps, null)]
          }), divider ? vue.createVNode(antDesignVue.Divider, {
            "key": `d-${label}`
          }, null) : null]);
        }
        if (!vue.unref(showRef))
          return null;
        return vue.createVNode(antDesignVue.Menu.SubMenu, {
          "key": label,
          "disabled": disabled,
          "popupClassName": `${prefixCls}__popup`
        }, {
          title: () => vue.createVNode(ItemContent, contentProps, null),
          default: () => renderMenuItem(children)
        });
      });
    }
    return () => {
      let _slot;
      if (!vue.unref(showRef))
        return null;
      const {
        items
      } = props;
      return vue.createVNode(antDesignVue.Menu, {
        "inlineIndent": 12,
        "mode": "vertical",
        "class": prefixCls,
        "ref": wrapRef,
        "style": vue.unref(getStyle)
      }, _isSlot(_slot = renderMenuItem(items)) ? _slot : {
        default: () => [_slot]
      });
    };
  }
});

exports["default"] = ContextMenu;
//# sourceMappingURL=context-menu2.js.map