tav-ui
Version:
132 lines (129 loc) • 3.64 kB
JavaScript
import { isVNode, createVNode, defineComponent, ref, computed, onMounted, nextTick, onUnmounted, unref, Fragment } from 'vue';
import { Menu, Divider } from 'ant-design-vue';
import { TaIcon } from '../../icon/index2.mjs';
import { contextMenuProps } from './types2.mjs';
function _isSlot(s) {
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
}
const prefixCls = "context-menu";
const ItemContent = (props) => {
const {
item
} = props;
return createVNode("span", {
"style": "display: inline-block; width: 100%; ",
"class": "px-4",
"onClick": props.handler.bind(null, item)
}, [props.showIcon && item.icon && createVNode(TaIcon, {
"class": "mr-2",
"icon": item.icon
}, null), createVNode("span", null, [item.label])]);
};
var ContextMenu = defineComponent({
name: "TaContextMenu",
props: contextMenuProps,
setup(props) {
const wrapRef = ref(null);
const showRef = ref(false);
const getStyle = 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`
};
});
onMounted(() => {
nextTick(() => showRef.value = true);
});
onUnmounted(() => {
const el = 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 createVNode(Fragment, null, [createVNode(Menu.Item, {
"disabled": disabled,
"class": `${prefixCls}__item`,
"key": label
}, {
default: () => [createVNode(ItemContent, contentProps, null)]
}), divider ? createVNode(Divider, {
"key": `d-${label}`
}, null) : null]);
}
if (!unref(showRef))
return null;
return createVNode(Menu.SubMenu, {
"key": label,
"disabled": disabled,
"popupClassName": `${prefixCls}__popup`
}, {
title: () => createVNode(ItemContent, contentProps, null),
default: () => renderMenuItem(children)
});
});
}
return () => {
let _slot;
if (!unref(showRef))
return null;
const {
items
} = props;
return createVNode(Menu, {
"inlineIndent": 12,
"mode": "vertical",
"class": prefixCls,
"ref": wrapRef,
"style": unref(getStyle)
}, _isSlot(_slot = renderMenuItem(items)) ? _slot : {
default: () => [_slot]
});
};
}
});
export { ContextMenu as default };
//# sourceMappingURL=context-menu2.mjs.map