vxe-pc-ui/lib/context-menu/src/context-menu.min.js

A vue based PC component library

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_utils=require("../../ui/src/utils"),_dom=require("../../ui/src/dom"),_vn=require("../../ui/src/vn");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createInternalData(){return{}}function createReactData(){return{visible:!1,activeOption:null,activeChildOption:null,popupStyle:{top:"",left:"",zIndex:0},childOffsetX:0}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeContextMenu",props:{modelValue:Boolean,className:String,size:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.size||(0,_ui.getConfig)().size},options:Array,x:[Number,String],y:[Number,String],autoLocate:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.autoLocate},zIndex:[Number,String],position:{type:String,default:()=>(0,_ui.getConfig)().contextMenu.position},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.destroyOnClose},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().contextMenu.transfer}},emits:["update:modelValue","option-click","change","show","hide"],setup(r,e){let n=e.emit;var t=_xeUtils.default.uniqueId();let s=(0,_vue.ref)(),u=(0,_ui.useSize)(r).computeSize,l=createInternalData(),c=(0,_vue.reactive)(createReactData()),i={refElem:s},o=(0,_vue.computed)(()=>{var e=r.options;return e||[]}),v=(0,_vue.computed)(()=>{var t=o.value,i=[];for(let e=0;e<t.length;e++){var n=t[e];for(let e=0;e<n.length;e++){var l=n[e];T(l)&&i.push(l)}}return i});var a=(0,_vue.computed)(()=>{var{x:e,y:t}=r;return""+e+t});let d={},_={xID:t,props:r,context:e,reactData:c,getRefMaps:()=>i,getComputeMaps:()=>d},p=(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$contextMenu:_},t))},f=e=>{n("update:modelValue",e)},m=()=>{var e=r.modelValue,t=c.visible;return c.visible=!0,h(),(()=>{const{zIndex:e,transfer:t}=r,{popupStyle:i}=c,n=i.zIndex;if(e)i.zIndex=_xeUtils.default.toNumber(e);else if(n<(0,_utils.getLastZIndex)())i.zIndex=t?(0,_utils.nextSubZIndex)():(0,_utils.nextZIndex)()})(),!0!==e&&(f(!0),p("change",{value:!0},null)),!0!==t&&p("show",{visible:!0},null),(0,_vue.nextTick)().then(()=>{g()})},x=()=>{var e=r.modelValue,t=c.visible;return(c.visible=!1)!==e&&(f(!1),p("change",{value:!1},null)),!1!==t&&p("hide",{visible:!1},null),(0,_vue.nextTick)()},h=()=>{var{x:e,y:t}=r,i=c.popupStyle;i.left=(0,_dom.toCssUnit)(e||0),i.top=(0,_dom.toCssUnit)(t||0),g()},g=()=>{var e,t,i,n,l,{autoLocate:a,position:u}=r,o=c.popupStyle;a&&(a=s.value)&&({visibleWidth:e,visibleHeight:t}=(0,_dom.getDomNode)(),n=getComputedStyle(a),i=_xeUtils.default.toNumber(n.top),n=_xeUtils.default.toNumber(n.left),l=a.offsetWidth,a=a.offsetHeight,"absolute"!==u)&&(t<i+a&&(o.top=Math.max(0,i-a)+"px"),e<n+l)&&(o.left=Math.max(0,n-l)+"px"),E()},E=()=>{let l=s.value;if(l){let n=(0,_dom.getDomNode)().visibleWidth,e=()=>{var e=getComputedStyle(l),e=_xeUtils.default.toNumber(e.left),t=l.offsetWidth,i=l.querySelector(".vxe-context-menu--children-wrapper"),i=i?i.offsetWidth:t;e+t>n-i?c.childOffsetX=4-i:c.childOffsetX=t-4};e(),(0,_vue.nextTick)(()=>{e()})}},b=()=>{var e=r.modelValue;(e?m:x)()};t={dispatchEvent:p,open:m,close:x};let O=e=>{e=e.children;return e&&e.some(e=>!1!==e.visible)},y=(e,t)=>{e.preventDefault(),e.stopPropagation(),t.disabled||t.loading||O(t)||(p("option-click",{option:t},e),x())},N=(e,t,i)=>{var n=l.leaveTime;n&&clearTimeout(n),c.activeOption=i||t,i?(c.activeOption=i,c.activeChildOption=t):(c.activeOption=t,O(t)?(c.activeChildOption=S(t),(0,_vue.nextTick)(()=>{E()})):c.activeChildOption=null)},C=()=>{var e=l.leaveTime;e&&clearTimeout(e),l.leaveTime=setTimeout(()=>{l.leaveTime=null,c.activeOption=null,c.activeChildOption=null},300)},T=e=>!e.loading&&!e.disabled&&!1!==e.visible,S=e=>{var t=e.children;if(t)for(let e=0;e<t.length;e++){var i=t[e];if(T(i))return i}return null},I=e=>{var t=c.visible;t&&(t=s.value,(0,_dom.getEventTargetNode)(e,t,"").flag||x())},D=e=>{var{visible:t,activeOption:i,activeChildOption:n}=c,l=v.value;if(t){var t=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_UP),a=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_LEFT),o=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_RIGHT),r=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ENTER);if(!_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE))return r&&(i||n)?(e.preventDefault(),e.stopPropagation(),!n&&O(i)?(c.activeChildOption=S(i),void E()):void y(e,n||i)):void(n?t?(e.preventDefault(),c.activeChildOption=((e,t)=>{var i=e.children;let n=null;if(i){for(let e=0;e<i.length;e++){var l=i[e];if(t===l)break;T(l)&&(n=l)}if(!n)for(let e=i.length-1;0<=e;e--){var a=i[e];if(T(a))return a}}return n})(i,n),E()):a?(e.preventDefault(),c.activeChildOption=((e,i)=>{var n=e.children;let l=null;if(n){let t=!1;for(let e=0;e<n.length;e++){var a=n[e];if(l||T(a)&&(l=a),t){if(T(a))return a}else t=i===a}}return l})(i,n),E()):u&&(e.preventDefault(),c.activeChildOption=null):i?(e.preventDefault(),t?c.activeOption=((t,i)=>{for(let e=0;e<t.length;e++){var n=t[e];if(i===n&&0<e)return t[e-1]}return _xeUtils.default.last(t)})(l,i):a?c.activeOption=((t,i)=>{for(let e=0;e<t.length;e++)if(i===t[e]){var n=t[e+1];if(n)return n}return _xeUtils.default.first(t)})(l,i):O(i)&&o&&(c.activeChildOption=S(i),E())):(e.preventDefault(),c.activeOption=_xeUtils.default.first(l)));x()}},k=e=>{var t=c.visible;t&&(t=s.value,(0,_dom.getEventTargetNode)(e,t,"").flag||x())},L=()=>{var e=c.visible;e&&x()};Object.assign(_,t,{});let M=(t,i,e)=>{var n,l,a,u,{visible:o,disabled:r,loading:s}=t;return!1===o?(0,_ui.renderEmptyElement)(_):(n=(o=Object.assign({},t.prefixConfig)).icon||t.prefixIcon,a=(l=Object.assign({},t.suffixConfig)).icon||t.suffixIcon,u=s?(0,_ui.getI18n)("vxe.contextMenu.loadingText"):(0,_utils.getFuncText)(t.name),(0,_vue.h)("div",{class:["vxe-context-menu--item-inner",{"is--disabled":r,"is--loading":s}],onClick(e){y(e,t)},onMouseenter(e){N(e,t,i)},onMouseleave:C},[(0,_vue.h)("div",{class:["vxe-context-menu--item-prefix",o.className||""]},s?[(0,_vue.h)("span",{key:"1"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_OPTION_LOADING})])]:[n&&_xeUtils.default.isFunction(n)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(n({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:n})]),o.content?(0,_vue.h)("span",{key:"4"},""+(o.content||"")):(0,_ui.renderEmptyElement)(_)]),(0,_vue.h)("div",{class:"vxe-context-menu--item-label"},u),s||!a&&!l.content?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{class:["vxe-context-menu--item-suffix",l.className||""]},[a&&_xeUtils.default.isFunction(a)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(a({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:a})]),l.content?(0,_vue.h)("span",{key:"4"},""+(l.content||"")):(0,_ui.renderEmptyElement)(_)]),e?(0,_vue.h)("div",{class:"vxe-context-menu--item-subicon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().CONTEXT_MENU_CHILDREN})]):(0,_ui.renderEmptyElement)(_)]))};return(0,_vue.watch)(a,()=>{h(),(0,_vue.nextTick)(()=>{g()})}),(0,_vue.watch)(()=>r.modelValue,()=>{b()}),b(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(_,"mousewheel",I),_ui.globalEvents.on(_,"keydown",D),_ui.globalEvents.on(_,"mousedown",k),_ui.globalEvents.on(_,"blur",L)}),(0,_vue.onBeforeUnmount)(()=>{var e=l.leaveTime;e&&clearTimeout(e),_ui.globalEvents.off(_,"mousewheel"),_ui.globalEvents.off(_,"keydown"),_ui.globalEvents.off(_,"mousedown"),_ui.globalEvents.off(_,"blur"),_xeUtils.default.assign(c,createReactData()),_xeUtils.default.assign(l,createInternalData())}),_.renderVN=()=>{var{className:e,position:t,destroyOnClose:i}=r,{visible:n,popupStyle:l}=c,a=u.value;return(0,_vue.h)("div",{ref:s,class:["vxe-context-menu vxe-context-menu--wrapper","absolute"===t?"is--"+t:"is--fixed",e||"",{["size--"+a]:a,"is--visible":n}],style:l},!i||n?(()=>{let{activeOption:r,activeChildOption:s,childOffsetX:v}=c;var e=o.value;let t=[];return e.forEach((e,u)=>{let o=[];e.forEach((t,e)=>{var i=t.children,n=i&&i.some(e=>!1!==e.visible),l=r===t,a=l&&!!s;o.push((0,_vue.h)("div",{key:u+"_"+e,class:["vxe-context-menu--item-wrapper vxe-context-menu--first-item",t.className||"",{"is--active":l,"is--subactive":l&&!!s}]},[n&&a?(0,_vue.h)("div",{class:"vxe-context-menu--children-wrapper",style:{transform:`translate(${v}px, -2px)`}},i.map(e=>(0,_vue.h)("div",{class:["vxe-context-menu--item-wrapper vxe-context-menu--child-item",e.className||"",{"is--active":s===e}]},[M(e,t)]))):(0,_ui.renderEmptyElement)(_),M(t,null,n)]))}),t.push((0,_vue.h)("div",{key:u,class:"vxe-context-menu--group-wrapper"},o))}),t})():[])},_},render(){return this.renderVN()}});