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

A vue based PC component library

"use strict";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){const n=e["emit"];var t=_xeUtils.default.uniqueId();const s=(0,_vue.ref)(),a=(0,_ui.useSize)(r)["computeSize"],i=createInternalData(),c=(0,_vue.reactive)(createReactData()),l={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];C(l)&&i.push(l)}}return i});var u=(0,_vue.computed)(()=>{var{x:e,y:t}=r;return""+e+t});const d={},_={xID:t,props:r,context:e,reactData:c,getRefMaps:()=>l,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"];c.visible=!0,h();{var{zIndex:i,transfer:n}=r,l=c.popupStyle,u=l.zIndex;i?l.zIndex=_xeUtils.default.toNumber(i):u<(0,_utils.getLastZIndex)()&&(l.zIndex=(n?(0,_utils.nextSubZIndex):(0,_utils.nextZIndex))())}return!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:u,position:a}=r,o=c["popupStyle"];u&&(u=s.value)&&({visibleWidth:e,visibleHeight:t}=(0,_dom.getDomNode)(),n=getComputedStyle(u),i=_xeUtils.default.toNumber(n.top),n=_xeUtils.default.toNumber(n.left),l=u.offsetWidth,u=u.offsetHeight,"absolute"!==a)&&(t<i+u&&(o.top=Math.max(0,i-u)+"px"),e<n+l)&&(o.left=Math.max(0,n-l)+"px"),E()},E=()=>{const n=s.value;if(n){const l=(0,_dom.getDomNode)()["visibleWidth"],e=()=>{var e=getComputedStyle(n),e=_xeUtils.default.toNumber(e.left),t=n.offsetWidth,i=n.querySelector(".vxe-context-menu--children-wrapper"),i=i?i.offsetWidth:t;e+t>l-i?c.childOffsetX=2-i:c.childOffsetX=t-2};e(),(0,_vue.nextTick)(()=>{e()})}},b=()=>{var e=r["modelValue"];(e?m:x)()};t={dispatchEvent:p,open:m,close:x};const O=e=>{e=e.children;return e&&e.some(e=>!1!==e.visible)},y=(e,t)=>{e.preventDefault(),e.stopPropagation(),O(t)||(p("option-click",{option:t},e),x())},N=()=>{c.activeOption=null,c.activeChildOption=null},C=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(C(i))return i}return null},I=e=>{var t=c["visible"];t&&(t=s.value,(0,_dom.getEventTargetNode)(e,t,"").flag||x())},T=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),u=_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ARROW_DOWN),a=_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;C(l)&&(n=l)}if(!n)for(let e=i.length-1;0<=e;e--){var u=i[e];if(C(u))return u}}return n})(i,n),E()):u?(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 u=n[e];if(l||C(u)&&(l=u),t){if(C(u))return u}else t=i===u}}return l})(i,n),E()):a&&(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):u?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()}},D=e=>{var t=c["visible"];t&&(t=s.value,(0,_dom.getEventTargetNode)(e,t,"").flag||x())},k=()=>{var e=c["visible"];e&&x()};Object.assign(_,t,{});const L=(n,l,e)=>{var t,i,u,a,{visible:o,disabled:r,loading:s}=n;return!1===o?(0,_ui.renderEmptyElement)(_):(t=(o=Object.assign({},n.prefixConfig)).icon||n.prefixIcon,u=(i=Object.assign({},n.suffixConfig)).icon||n.suffixIcon,a=s?(0,_ui.getI18n)("vxe.contextMenu.loadingText"):(0,_utils.getFuncText)(n.name),(0,_vue.h)("div",{class:["vxe-context-menu--item-inner",{"is--disabled":r,"is--loading":s}],onClick(e){y(e,n)},onMouseenter(e){var t,i;t=n,i=l,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)},onMouseleave:N},[(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})])]:[t&&_xeUtils.default.isFunction(t)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(t({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:t})]),o.content?(0,_vue.h)("span",{key:"4"},""+(o.content||"")):(0,_ui.renderEmptyElement)(_)]),(0,_vue.h)("div",{class:"vxe-context-menu--item-label"},a),s||!u&&!i.content?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{class:["vxe-context-menu--item-suffix",i.className||""]},[u&&_xeUtils.default.isFunction(u)?(0,_vue.h)("span",{key:"2"},(0,_vn.getSlotVNs)(u({}))):(0,_vue.h)("span",{key:"3"},[(0,_vue.h)("i",{class:u})]),i.content?(0,_vue.h)("span",{key:"4"},""+(i.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)(u,()=>{h(),(0,_vue.nextTick)(()=>{g()})}),(0,_vue.watch)(()=>r.modelValue,()=>{b()}),b(),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(_,"mousewheel",I),_ui.globalEvents.on(_,"keydown",T),_ui.globalEvents.on(_,"mousedown",D),_ui.globalEvents.on(_,"blur",k)}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(_,"mousewheel"),_ui.globalEvents.off(_,"keydown"),_ui.globalEvents.off(_,"mousedown"),_ui.globalEvents.off(_,"blur"),_xeUtils.default.assign(c,createReactData()),_xeUtils.default.assign(i,createInternalData())}),_.renderVN=()=>{var{className:e,position:t,destroyOnClose:i}=r,{visible:n,popupStyle:l}=c,u=a.value;return(0,_vue.h)("div",{ref:s,class:["vxe-context-menu vxe-context-menu--wrapper","absolute"===t?"is--"+t:"is--fixed",e||"",{["size--"+u]:u,"is--visible":n}],style:l},!i||n?(()=>{const{activeOption:r,activeChildOption:s,childOffsetX:v}=c;var e=o.value;const t=[];return e.forEach((e,a)=>{const o=[];e.forEach((t,e)=>{var i=t["children"],n=i&&i.some(e=>!1!==e.visible),l=r===t,u=l&&!!s;o.push((0,_vue.h)("div",{key:a+"_"+e,class:["vxe-context-menu--item-wrapper vxe-context-menu--first-item",t.className||"",{"is--active":l,"is--subactive":l&&!!s}]},[n&&u?(0,_vue.h)("div",{class:"vxe-context-menu--children-wrapper",style:{transform:`translate(${v}px, -5px)`}},i.map(e=>(0,_vue.h)("div",{class:["vxe-context-menu--item-wrapper vxe-context-menu--child-item",e.className||"",{"is--active":s===e}]},[L(e,t)]))):(0,_ui.renderEmptyElement)(_),L(t,null,n)]))}),t.push((0,_vue.h)("div",{key:a,class:"vxe-context-menu--group-wrapper"},o))}),t})():[])},_},render(){return this.renderVN()}});