vxe-pc-ui 4.9.3 → 4.9.5

package/lib/menu/src/menu.js

@@ -300,25 +300,28 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         icon,
         isExpand,
-        hasChild,
-        slots: itemSlots
+        hasChild
       } = item;
-      const optionSlot = itemSlots ? itemSlots.default : slots.option;
+      const itemSlots = item.slots || {};
+      const optionSlot = itemSlots.default || slots.option;
+      const titleSlot = itemSlots.title || slots.optionTitle || slots['option-title'];
+      const iconSlot = itemSlots.icon || slots.optionIcon || slots['option-icon'];
       const title = getMenuTitle(item);
       const isCollapsed = computeIsCollapsed.value;
-      return [(0, _vue.h)('div', {
+      const params = {
+        option: item,
+        collapsed: isCollapsed
+      };
+      return [optionSlot ? (0, _ui.renderEmptyElement)($xeMenu) : (0, _vue.h)('div', {
         class: 'vxe-menu--item-link-icon'
-      }, icon ? [(0, _vue.h)('i', {
+      }, iconSlot ? callSlot(iconSlot, params) : icon ? [(0, _vue.h)('i', {
         class: icon
       })] : []), optionSlot ? (0, _vue.h)('div', {
         class: 'vxe-menu--item-custom-title'
-      }, callSlot(optionSlot, {
-        option: item,
-        collapsed: isCollapsed
-      })) : (0, _vue.h)('div', {
+      }, callSlot(optionSlot, params)) : (0, _vue.h)('div', {
         class: 'vxe-menu--item-link-title',
         title
-      }, title), hasChild ? (0, _vue.h)('div', {
+      }, titleSlot ? callSlot(titleSlot, params) : title), hasChild ? (0, _vue.h)('div', {
         class: 'vxe-menu--item-link-collapse',
         onClick(evnt) {
           handleClickIconCollapse(evnt, item, itemList);

package/lib/menu/src/menu.min.js

@@ -1 +1 @@
-"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"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>(0,_ui.getConfig)().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>(0,_ui.getConfig)().menu.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","click"],setup(r,e){const{emit:l,slots:u}=e;var i=_xeUtils.default.uniqueId();const t=(0,_vue.inject)("$xeLayoutAside",null),c=(0,_vue.ref)(),d=(0,_vue.ref)(),v=(0,_ui.useSize)(r)["computeSize"],p=(0,_vue.reactive)({initialized:!!r.collapsed,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:r.modelValue,menuList:[],itemHeight:1}),s={refElem:c},m=(0,_vue.computed)(()=>{var e=r["collapsed"];return _xeUtils.default.isBoolean(e)?e:!!t&&!!t.props.collapsed}),a=(0,_vue.computed)(()=>{let e="";return e=t?t.props.collapseWidth||"":e}),o=(0,_vue.computed)(()=>{let e="";return e=t?t.props.width||"":e}),n={computeSize:v},_={xID:i,props:r,context:e,reactData:p,getRefMaps:()=>s,getComputeMaps:()=>n},h=a=>{const o=p["activeName"];_xeUtils.default.eachTree(p.menuList,(e,i,t,l,s,n)=>{e.itemKey===o?(n.forEach(e=>{e.isActive=!0,a&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},x=()=>{const{options:e,expandAll:n}=r;p.menuList=_xeUtils.default.mapTree(e,(e,i,t,l,s)=>{return Object.assign(Object.assign({},e),{parentKey:s?s.name||l.slice(0,l.length-1).join(","):"",level:l.length,itemKey:e.name||l.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!n,hasChild:e.children&&0<e.children.length})},{children:"children",mapChildren:"childList"})},E=()=>{var e=r["collapseFixed"];e&&(0,_vue.nextTick)(()=>{var e,i=p["isEnterCollapse"],t=m.value,l=o.value,s=a.value,n=c.value;n&&(e=n.getBoundingClientRect(),n=n.parentNode,p.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(n.clientHeight),width:i?l?(0,_dom.toCssUnit)(l):"":s?(0,_dom.toCssUnit)(s):"",zIndex:p.collapseZindex}:{})})},f=()=>{var e=r["collapseFixed"];e&&(e=p["initialized"],m.value&&!e&&(p.initialized=!0,(0,_vue.nextTick)(()=>{var e=d.value;e&&document.body.appendChild(e)})),p.isEnterCollapse=!1,p.collapseZindex<(0,_utils.getLastZIndex)()&&(p.collapseZindex=(0,_utils.nextZIndex)()),E())},g=(e,i,t)=>{var l=r["accordion"],{hasChild:s,isExpand:n}=i;s&&(e.stopPropagation(),e.preventDefault(),l&&t.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=!n)},C=e=>{p.activeName=e,l("update:modelValue",e)},y=(e,i,t)=>{var{itemKey:l,routerLink:s,hasChild:n}=i;!s&&n?g(e,i,t):(C(l),A()),N("click",{menu:i},e)},k=()=>{var e=p["collapseStyle"],i=o.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i):""}),p.isEnterCollapse=!0},U=()=>{var e=p["isEnterCollapse"];e||k()},A=()=>{var e=p["collapseStyle"],i=c.value;p.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),p.isEnterCollapse=!1},N=(e,i,t)=>{l(e,(0,_ui.createEvent)(t,{$menu:_},i))};i={dispatchEvent:N};Object.assign(_,i,{});const z=(i,t)=>{var{icon:e,isExpand:l,hasChild:s,slots:n}=i,n=n?n.default:u.option,a=""+((a=i).title||a.name),o=m.value;return[(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},e?[(0,_vue.h)("i",{class:e})]:[]),n?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},(e={option:i,collapsed:o},(o=n)&&(_xeUtils.default.isString(o)&&(o=u[o]||null),_xeUtils.default.isFunction(o))?(0,_vn.getSlotVNs)(o(e)):[])):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:a},a),s?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){g(e,i,t)}},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().MENU_ITEM_EXPAND_OPEN:(0,_ui.getIcon)().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(_)]},S=(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,isExpand:o,routerLink:u,childList:r}=i;var c=p["isEnterCollapse"],d=m.value;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n,"is--expand":(!d||c)&&o}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:u,onClick(e){y(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},z(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>S(e,r))):(0,_ui.renderEmptyElement)(_)])};const w=(0,_vue.ref)(0);return(0,_vue.watch)(()=>r.options?r.options.length:-1,()=>{w.value++}),(0,_vue.watch)(()=>r.options,()=>{w.value++}),(0,_vue.watch)(w,()=>{x(),h(!0)}),(0,_vue.watch)(()=>r.modelValue,e=>{p.activeName=e}),(0,_vue.watch)(()=>p.activeName,()=>{h(!0)}),(0,_vue.watch)(m,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(_,"resize",E),E()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(_,"resize");var e,i=d.value;i&&(e=i.parentNode)&&e.removeChild(i)}),x(),h(!0),_.renderVN=()=>{var{loading:e,collapseFixed:i}=r;const{initialized:t,menuList:l,collapseStyle:s,isEnterCollapse:n}=p;var a=v.value;const o=m.value;let u={};return i&&(u={onMouseenter:k,onMouseover:U,onMouseleave:A}),(0,_vue.h)("div",{ref:c,class:["vxe-menu",{["size--"+a]:a,"is--collapsed":o,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>(o?(i,t)=>{const{itemKey:e,level:l,hasChild:s,isActive:n,isExactActive:a,routerLink:o,childList:u}=i;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(_):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":n}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:o,onClick(e){y(e,i,t)}},{default:()=>z(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},z(i,t)),s?(0,_vue.h)("div",{class:"vxe-menu--item-group"},u.map(e=>S(e,u))):(0,_ui.renderEmptyElement)(_)])}:S)(e,l))),t?(0,_vue.h)("div",Object.assign({ref:d,class:["vxe-menu--collapse-wrapper",{["size--"+a]:a,"is--collapsed":o,"is--enter":n,"is--loading":e}],style:s},u),[o?(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>S(e,l))):(0,_ui.renderEmptyElement)(_)]):(0,_ui.renderEmptyElement)(_),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},_},render(){return this.renderVN()}});
+"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"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_vn=require("../../ui/src/vn"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeMenu",props:{modelValue:[String,Number],expandAll:Boolean,accordion:{type:Boolean,default:()=>(0,_ui.getConfig)().menu.accordion},collapsed:{type:Boolean,default:null},collapseFixed:Boolean,loading:Boolean,options:{type:Array,default:()=>[]},size:{type:String,default:()=>(0,_ui.getConfig)().menu.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","click"],setup(r,e){const{emit:l,slots:c}=e;var i=_xeUtils.default.uniqueId();const t=(0,_vue.inject)("$xeLayoutAside",null),d=(0,_vue.ref)(),v=(0,_vue.ref)(),p=(0,_ui.useSize)(r)["computeSize"],m=(0,_vue.reactive)({initialized:!!r.collapsed,isEnterCollapse:!1,collapseStyle:{},collapseZindex:0,activeName:r.modelValue,menuList:[],itemHeight:1}),n={refElem:d},_=(0,_vue.computed)(()=>{var e=r["collapsed"];return _xeUtils.default.isBoolean(e)?e:!!t&&!!t.props.collapsed}),a=(0,_vue.computed)(()=>{let e="";return e=t?t.props.collapseWidth||"":e}),o=(0,_vue.computed)(()=>{let e="";return e=t?t.props.width||"":e}),s={computeSize:p},h={xID:i,props:r,context:e,reactData:m,getRefMaps:()=>n,getComputeMaps:()=>s},u=a=>{const o=m["activeName"];_xeUtils.default.eachTree(m.menuList,(e,i,t,l,n,s)=>{e.itemKey===o?(s.forEach(e=>{e.isActive=!0,a&&(e.isExpand=!0)}),e.isExactActive=!0):(e.isExactActive=!1,e.isActive=!1)},{children:"childList"})},x=()=>{const{options:e,expandAll:s}=r;m.menuList=_xeUtils.default.mapTree(e,(e,i,t,l,n)=>{return Object.assign(Object.assign({},e),{parentKey:n?n.name||l.slice(0,l.length-1).join(","):"",level:l.length,itemKey:e.name||l.join(","),isExactActive:!1,isActive:!1,isExpand:_xeUtils.default.isBoolean(e.expanded)?e.expanded:!!s,hasChild:e.children&&0<e.children.length})},{children:"children",mapChildren:"childList"})},E=()=>{var e=r["collapseFixed"];e&&(0,_vue.nextTick)(()=>{var e,i=m["isEnterCollapse"],t=_.value,l=o.value,n=a.value,s=d.value;s&&(e=s.getBoundingClientRect(),s=s.parentNode,m.collapseStyle=t?{top:(0,_dom.toCssUnit)(e.top),left:(0,_dom.toCssUnit)(e.left),height:(0,_dom.toCssUnit)(s.clientHeight),width:i?l?(0,_dom.toCssUnit)(l):"":n?(0,_dom.toCssUnit)(n):"",zIndex:m.collapseZindex}:{})})},f=()=>{var e=r["collapseFixed"];e&&(e=m["initialized"],_.value&&!e&&(m.initialized=!0,(0,_vue.nextTick)(()=>{var e=v.value;e&&document.body.appendChild(e)})),m.isEnterCollapse=!1,m.collapseZindex<(0,_utils.getLastZIndex)()&&(m.collapseZindex=(0,_utils.nextZIndex)()),E())},g=(e,i,t)=>{var l=r["accordion"],{hasChild:n,isExpand:s}=i;n&&(e.stopPropagation(),e.preventDefault(),l&&t.forEach(e=>{e!==i&&(e.isExpand=!1)}),i.isExpand=!s)},C=e=>{m.activeName=e,l("update:modelValue",e)},y=(e,i,t)=>{var{itemKey:l,routerLink:n,hasChild:s}=i;!n&&s?g(e,i,t):(C(l),A()),z("click",{menu:i},e)},k=()=>{var e=m["collapseStyle"],i=o.value;m.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i):""}),m.isEnterCollapse=!0},U=()=>{var e=m["isEnterCollapse"];e||k()},A=()=>{var e=m["collapseStyle"],i=d.value;m.collapseStyle=Object.assign({},e,{width:i?(0,_dom.toCssUnit)(i.offsetWidth):""}),m.isEnterCollapse=!1},N=(e,i)=>e&&(_xeUtils.default.isString(e)&&(e=c[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(i)):[],z=(e,i,t)=>{l(e,(0,_ui.createEvent)(t,{$menu:h},i))};i={dispatchEvent:z};Object.assign(h,i,{});const S=(i,t)=>{var{icon:e,isExpand:l,hasChild:n}=i,s=i.slots||{},a=s.default||c.option,o=s.title||c.optionTitle||c["option-title"],s=s.icon||c.optionIcon||c["option-icon"],u=""+((u=i).title||u.name),r=_.value,r={option:i,collapsed:r};return[a?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{class:"vxe-menu--item-link-icon"},s?N(s,r):e?[(0,_vue.h)("i",{class:e})]:[]),a?(0,_vue.h)("div",{class:"vxe-menu--item-custom-title"},N(a,r)):(0,_vue.h)("div",{class:"vxe-menu--item-link-title",title:u},o?N(o,r):u),n?(0,_vue.h)("div",{class:"vxe-menu--item-link-collapse",onClick(e){g(e,i,t)}},[(0,_vue.h)("i",{class:l?(0,_ui.getIcon)().MENU_ITEM_EXPAND_OPEN:(0,_ui.getIcon)().MENU_ITEM_EXPAND_CLOSE})]):(0,_ui.renderEmptyElement)(h)]},w=(i,t)=>{const{itemKey:e,level:l,hasChild:n,isActive:s,isExactActive:a,isExpand:o,routerLink:u,childList:r}=i;var c=m["isEnterCollapse"],d=_.value;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":s,"is--expand":(!d||c)&&o}]},[u?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:u,onClick(e){y(e,i,t)}},{default:()=>S(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},S(i,t)),n?(0,_vue.h)("div",{class:"vxe-menu--item-group"},r.map(e=>w(e,r))):(0,_ui.renderEmptyElement)(h)])};const L=(0,_vue.ref)(0);return(0,_vue.watch)(()=>r.options?r.options.length:-1,()=>{L.value++}),(0,_vue.watch)(()=>r.options,()=>{L.value++}),(0,_vue.watch)(L,()=>{x(),u(!0)}),(0,_vue.watch)(()=>r.modelValue,e=>{m.activeName=e}),(0,_vue.watch)(()=>m.activeName,()=>{u(!0)}),(0,_vue.watch)(_,()=>{f()}),(0,_vue.onMounted)(()=>{_ui.globalEvents.on(h,"resize",E),E()}),(0,_vue.onBeforeUnmount)(()=>{_ui.globalEvents.off(h,"resize");var e,i=v.value;i&&(e=i.parentNode)&&e.removeChild(i)}),x(),u(!0),h.renderVN=()=>{var{loading:e,collapseFixed:i}=r;const{initialized:t,menuList:l,collapseStyle:n,isEnterCollapse:s}=m;var a=p.value;const o=_.value;let u={};return i&&(u={onMouseenter:k,onMouseover:U,onMouseleave:A}),(0,_vue.h)("div",{ref:d,class:["vxe-menu",{["size--"+a]:a,"is--collapsed":o,"is--loading":e}]},[(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>(o?(i,t)=>{const{itemKey:e,level:l,hasChild:n,isActive:s,isExactActive:a,routerLink:o,childList:u}=i;return i.permissionCode&&!_ui.permission.checkVisible(i.permissionCode)?(0,_ui.renderEmptyElement)(h):(0,_vue.h)("div",{key:e,class:["vxe-menu--item-wrapper","vxe-menu--item-level"+l,{"is--exact-active":a,"is--active":s}]},[o?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-menu--item-link",to:o,onClick(e){y(e,i,t)}},{default:()=>S(i,t)}):(0,_vue.h)("div",{class:"vxe-menu--item-link",onClick(e){y(e,i,t)}},S(i,t)),n?(0,_vue.h)("div",{class:"vxe-menu--item-group"},u.map(e=>w(e,u))):(0,_ui.renderEmptyElement)(h)])}:w)(e,l))),t?(0,_vue.h)("div",Object.assign({ref:v,class:["vxe-menu--collapse-wrapper",{["size--"+a]:a,"is--collapsed":o,"is--enter":s,"is--loading":e}],style:n},u),[o?(0,_vue.h)("div",{class:"vxe-menu--item-list"},l.map(e=>w(e,l))):(0,_ui.renderEmptyElement)(h)]):(0,_ui.renderEmptyElement)(h),(0,_vue.h)(_loading.default,{class:"vxe-list-view--loading",modelValue:e})])},h},render(){return this.renderVN()}});