vxe-pc-ui 4.5.4 → 4.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/collapse/src/collapse.js +5 -1
- package/es/form/src/form.js +12 -16
- package/es/icon/style.css +1 -1
- package/es/modal/src/modal.js +1 -2
- package/es/split/src/split.js +113 -30
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/ui/index.js +1 -1
- package/es/ui/src/log.js +1 -1
- package/es/upload/src/upload.js +15 -15
- package/es/upload/style.css +1 -1
- package/es/upload/style.min.css +1 -1
- package/es/vxe-upload/style.css +1 -1
- package/es/vxe-upload/style.min.css +1 -1
- package/lib/collapse/src/collapse.js +8 -1
- package/lib/collapse/src/collapse.min.js +1 -1
- package/lib/form/src/form.js +12 -16
- package/lib/form/src/form.min.js +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/index.umd.js +164 -65
- package/lib/index.umd.min.js +1 -1
- package/lib/modal/src/modal.js +1 -2
- package/lib/modal/src/modal.min.js +1 -1
- package/lib/split/src/split.js +128 -30
- package/lib/split/src/split.min.js +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/ui/index.js +1 -1
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/upload/src/upload.js +16 -16
- package/lib/upload/src/upload.min.js +1 -1
- package/lib/upload/style/style.css +1 -1
- package/lib/upload/style/style.min.css +1 -1
- package/lib/vxe-upload/style/style.css +1 -1
- package/lib/vxe-upload/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/collapse/src/collapse.ts +5 -1
- package/packages/form/src/form.ts +12 -16
- package/packages/modal/src/modal.ts +1 -2
- package/packages/split/src/split.ts +120 -33
- package/packages/upload/src/upload.ts +15 -15
- package/styles/components/upload.scss +1 -1
- package/types/components/carousel.d.ts +13 -3
- package/types/components/collapse.d.ts +23 -4
- package/types/components/split-item.d.ts +3 -0
- package/types/components/split.d.ts +62 -1
- /package/es/icon/{iconfont.1743125694154.ttf → iconfont.1743222214469.ttf} +0 -0
- /package/es/icon/{iconfont.1743125694154.woff → iconfont.1743222214469.woff} +0 -0
- /package/es/icon/{iconfont.1743125694154.woff2 → iconfont.1743222214469.woff2} +0 -0
- /package/es/{iconfont.1743125694154.ttf → iconfont.1743222214469.ttf} +0 -0
- /package/es/{iconfont.1743125694154.woff → iconfont.1743222214469.woff} +0 -0
- /package/es/{iconfont.1743125694154.woff2 → iconfont.1743222214469.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1743125694154.ttf → iconfont.1743222214469.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1743125694154.woff → iconfont.1743222214469.woff} +0 -0
- /package/lib/icon/style/{iconfont.1743125694154.woff2 → iconfont.1743222214469.woff2} +0 -0
- /package/lib/{iconfont.1743125694154.ttf → iconfont.1743222214469.ttf} +0 -0
- /package/lib/{iconfont.1743125694154.woff → iconfont.1743222214469.woff} +0 -0
- /package/lib/{iconfont.1743125694154.woff2 → iconfont.1743222214469.woff2} +0 -0
package/lib/modal/src/modal.js
CHANGED
|
@@ -1238,7 +1238,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
1238
1238
|
showMaximize,
|
|
1239
1239
|
draggable
|
|
1240
1240
|
} = props;
|
|
1241
|
-
const isMsg = computeIsMsg.value;
|
|
1242
1241
|
const headerSlot = slots.header || propSlots.header;
|
|
1243
1242
|
if (props.showHeader) {
|
|
1244
1243
|
const headerOns = {};
|
|
@@ -1251,7 +1250,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
1251
1250
|
return (0, _vue.h)('div', Object.assign({
|
|
1252
1251
|
ref: refHeaderElem,
|
|
1253
1252
|
class: ['vxe-modal--header', {
|
|
1254
|
-
'is--ellipsis':
|
|
1253
|
+
'is--ellipsis': props.showTitleOverflow
|
|
1255
1254
|
}]
|
|
1256
1255
|
}, headerOns), headerSlot ? (0, _vn.getSlotVNs)(headerSlot({
|
|
1257
1256
|
$modal: $xeModal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.allActiveModals=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_ui=require("../../ui"),_button=_interopRequireDefault(require("../../button/src/button")),_index=_interopRequireDefault(require("../../loading/index")),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const allActiveModals=exports.allActiveModals=[],msgQueue=[],notifyQueue=[],lockScrollAttrKey="data-vxe-lock-scroll",lockScrollCssWidthKey="--vxe-ui-modal-lock-scroll-view-width";var _default=exports.default=(0,_vue.defineComponent)({name:"VxeModal",props:{modelValue:Boolean,id:String,type:{type:String,default:"modal"},loading:{type:Boolean,default:null},status:String,iconStatus:String,className:String,top:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.top},position:[String,Object],title:String,duration:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.duration},content:[Number,String],showCancelButton:{type:Boolean,default:null},cancelButtonText:{type:String,default:()=>(0,_ui.getConfig)().modal.cancelButtonText},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showConfirmButton},confirmButtonText:{type:String,default:()=>(0,_ui.getConfig)().modal.confirmButtonText},lockView:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.mask},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.maskClosable},escClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.escClosable},cancelClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.cancelClosable},confirmClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.confirmClosable},resize:Boolean,showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showHeader},showFooter:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showFooter},showZoom:Boolean,zoomConfig:Object,showMaximize:{type:Boolean,default:()=>(0,_utils.handleBooleanDefaultValue)((0,_ui.getConfig)().modal.showMaximize)},showMinimize:{type:Boolean,default:()=>(0,_utils.handleBooleanDefaultValue)((0,_ui.getConfig)().modal.showMinimize)},showClose:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showClose},dblclickZoom:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.dblclickZoom},width:[Number,String],height:[Number,String],minWidth:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.minWidth},minHeight:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.minHeight},zIndex:Number,marginSize:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.marginSize},fullscreen:Boolean,draggable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.draggable},remember:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.remember},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showTitleOverflow},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.transfer},storage:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.storage},storageKey:{type:String,default:()=>(0,_ui.getConfig)().modal.storageKey},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.padding},size:{type:String,default:()=>(0,_ui.getConfig)().modal.size||(0,_ui.getConfig)().size},beforeHideMethod:Function,slots:Object,message:[Number,String],animat:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.animat}},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","zoom","resize","move"],setup(w,e){const{slots:N,emit:s}=e,a=_xeUtils.default.uniqueId(),o=(0,_vue.inject)("$xeModal",null),L=(0,_vue.inject)("$xeDrawer",null),A=(0,_vue.inject)("$xeTable",null),$=(0,_vue.inject)("$xeForm",null),k=(0,_ui.useSize)(w)["computeSize"],B=(0,_vue.reactive)({initialized:!1,visible:!1,contentVisible:!1,modalTop:0,modalZindex:0,prevZoomStatus:"",zoomStatus:"",revertLocat:null,prevLocat:null,firstOpen:!0}),t={msgTimeout:void 0},M=(0,_vue.ref)(),O=(0,_vue.ref)(),T=(0,_vue.ref)(),n=(0,_vue.ref)(),u=(0,_vue.ref)(),E={refElem:M},Z=(0,_vue.computed)(()=>{var e=w["transfer"];if(null===e){var t=(0,_ui.getConfig)().modal.transfer;if(_xeUtils.default.isBoolean(t))return t;if(A||o||L||$)return!0}return e}),V=(0,_vue.computed)(()=>"message"===w.type||"notification"===w.type),U=(0,_vue.computed)(()=>"minimize"===B.zoomStatus),H=(0,_vue.computed)(()=>"maximize"===B.zoomStatus),l=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().modal.zoomConfig,w.zoomConfig)),j={computeSize:k,computeZoomOpts:l},D={xID:a,props:w,context:e,reactData:B,internalData:t,getRefMaps:()=>E,getComputeMaps:()=>j};const z=()=>{return O.value},d=()=>{var{width:e,height:t}=w,o=z();return o&&(o.style.width=e?(0,_dom.toCssUnit)(e):"",o.style.height=t?(0,_dom.toCssUnit)(t):""),(0,_vue.nextTick)()},r=()=>{var e=w["zIndex"],t=B["modalZindex"];e?B.modalZindex=e:t<(0,_utils.getLastZIndex)()&&(B.modalZindex=(0,_utils.nextZIndex)())},c=()=>(0,_vue.nextTick)().then(()=>{var o=w["position"],i=_xeUtils.default.toNumber(w.marginSize),l=z();if(l){var a=document.documentElement.clientWidth||document.body.clientWidth,s=document.documentElement.clientHeight||document.body.clientHeight,n="center"===o,{top:o,left:u}=_xeUtils.default.isString(o)?{top:o,left:o}:Object.assign({},o),r=n||"center"===o;let e="",t="";t=u&&!(n||"center"===u)?isNaN(u)?u:u+"px":Math.max(i,a/2-l.offsetWidth/2)+"px",e=o&&!r?isNaN(o)?o:o+"px":Math.max(i,s/2-l.offsetHeight/2)+"px",l.style.top=e,l.style.left=t}}),v=()=>{(0,_vue.nextTick)(()=>{var e=w["type"],e="notification"===e?notifyQueue:msgQueue;let o=0;e.forEach(e=>{var t=e.getBox();t&&(o+=_xeUtils.default.toNumber(e.props.top),e.reactData.modalTop=o,o+=t.clientHeight)})})},m=()=>{var e=w["type"],e="notification"===e?notifyQueue:msgQueue;-1<e.indexOf(D)&&_xeUtils.default.remove(e,e=>e===D),v()},i=e=>{const t=w["remember"];var o=B["visible"];const i=V.value;var l=w.beforeHideMethod||(0,_ui.getConfig)().modal.beforeHideMethod;const a={type:e};return o&&Promise.resolve(l?l(a):null).then(e=>{_xeUtils.default.isError(e)||(i&&m(),B.contentVisible=!1,t||y(),_xeUtils.default.remove(allActiveModals,e=>e===D),S("before-hide",a,null),setTimeout(()=>{B.visible=!1,s("update:modelValue",!1),S("hide",a,null)},200),h())}).catch(e=>e),(0,_vue.nextTick)()},W=e=>{var t="close";S(t,{type:t},e),i(t)},K=e=>{var t=w["confirmClosable"],o="confirm";S(o,{type:o},e),t&&i(o)},q=e=>{var t=w["cancelClosable"],o="cancel";S(o,{type:o},e),t&&i(o)},f=e=>{var t=(0,_ui.getConfig)().version,e=_xeUtils.default.toStringJSON(localStorage.getItem(e)||"");return e&&e._v===t?e:{_v:t}},C=()=>{var{id:e,storage:t,storageKey:o}=w,{zoomStatus:i,revertLocat:l}=B;i||e&&t&&(i=z())&&((t=f(o))[e]=[i.style.left,i.style.top,i.style.width,i.style.height].concat(l?[l.left,l.top,l.width,l.height]:[]).map(e=>e?_xeUtils.default.toNumber(e):"").join(","),localStorage.setItem(o,_xeUtils.default.toJSONString(t)))},g=()=>{const{minimizeLayout:e,minimizeMaxSize:t,minimizeHorizontalOffset:s,minimizeVerticalOffset:n,minimizeOffsetMethod:u}=l.value,r="horizontal"===e,m=B.zoomStatus,o=[],i=[],d=(allActiveModals.forEach(e=>{e.xID!==D.xID&&"modal"===e.props.type&&"minimize"===e.reactData.zoomStatus&&("horizontal"===e.getComputeMaps().computeZoomOpts.value.minimizeLayout?o:i).push(e)}),r?o:i);return t&&d.length>=t?(_ui.VxeUI.modal&&_ui.VxeUI.modal.message({status:"error",content:(0,_ui.getI18n)("vxe.modal.miniMaxSize",[t])}),Promise.resolve({status:!1})):(B.prevZoomStatus=m,B.zoomStatus="minimize",(0,_vue.nextTick)().then(()=>{var e=z();if(!e)return{status:!1};var t=T.value;if(!t)return{status:!1};var o=(0,_dom.getDomNode)()["visibleHeight"],i=(m||(B.revertLocat={top:e.offsetTop,left:e.offsetLeft,width:e.offsetWidth+(e.style.width?0:1),height:e.offsetHeight+(e.style.height?0:1)}),_xeUtils.default[r?"max":"min"](d,e=>{e=e.getBox();return e?_xeUtils.default.toNumber(e.style[r?"left":"top"]):0}));let l=o-t.offsetHeight-16,a=16;if(i){o=i.getBox();if(o){i=_xeUtils.default.toNumber(o.style.left),o=_xeUtils.default.toNumber(o.style.top);let e={};e=r?Object.assign({},s):Object.assign({},n),a=i+_xeUtils.default.toNumber(e.left),l=o+_xeUtils.default.toNumber(e.top),u&&(e=u({$modal:D,left:a,top:l}),a=_xeUtils.default.toNumber(e.left),l=_xeUtils.default.toNumber(e.top))}}return Object.assign(e.style,{top:l+"px",left:a+"px",width:"200px",height:t.offsetHeight+"px"}),C(),{status:!0}}))},p=()=>{const l=B.zoomStatus;return B.prevZoomStatus=l,B.zoomStatus="maximize",(0,_vue.nextTick)().then(()=>{var e,t,o,i=z();return i&&(l||(e=_xeUtils.default.toNumber(w.marginSize),t=document.documentElement.clientWidth||document.body.clientWidth,o=document.documentElement.clientHeight||document.body.clientHeight,B.revertLocat={top:Math.max(e,o/2-i.offsetHeight/2),left:Math.max(e,t/2-i.offsetWidth/2),width:i.offsetWidth+(i.style.width?0:1),height:i.offsetHeight+(i.style.height?0:1)}),Object.assign(i.style,{top:"0",left:"0",width:"100%",height:"100%"})),C(),{status:!0}})},_=()=>{var e=w["duration"];-1!==e&&(t.msgTimeout=setTimeout(()=>i("close"),_xeUtils.default.toNumber(e)))},h=()=>{var e=document.documentElement,t=e.getAttribute(lockScrollAttrKey);t&&((t=t.split(",").filter(e=>e!==a)).length?e.setAttribute(lockScrollAttrKey,t.join(",")):(e.removeAttribute(lockScrollAttrKey),e.style.removeProperty(lockScrollCssWidthKey)))},x=()=>{const{remember:m,showFooter:o}=w;var e,{initialized:t,visible:i}=B,l=V.value;return t||(B.initialized=!0),i||(t=w.lockScroll,i=V.value,t&&!i&&(t=document.documentElement,i=document.body.clientWidth,(e=(e=t.getAttribute(lockScrollAttrKey))?e.split(","):[]).includes(a)||(e.push(a),t.setAttribute(lockScrollAttrKey,e.join(","))),t.style.setProperty(lockScrollCssWidthKey,i+"px")),B.visible=!0,B.contentVisible=!1,r(),allActiveModals.push(D),setTimeout(()=>{B.contentVisible=!0,(0,_vue.nextTick)(()=>{o&&(e=n.value,t=u.value,e=e||t)&&e.focus();var e,t={type:""};s("update:modelValue",!0),S("show",t,null)})},10),l?(-1===(e="notification"===(e=w.type)?notifyQueue:msgQueue).indexOf(D)&&e.push(D),v(),_()):(0,_vue.nextTick)(()=>{var e,t,o,i,l,a,s,n,u=w["fullscreen"],r=B["firstOpen"];r?(B.firstOpen=!1,(()=>{var{id:e,storage:t,storageKey:o}=w;return!!(e&&t&&f(o)[e])})()?({id:r,storage:s,storageKey:n}=w,r&&s&&(s=f(n)[r])&&(n=z(),[r,s,e,t,o,i,l,a]=s.split(","),n&&(r&&(n.style.left=r+"px"),s&&(n.style.top=s+"px"),e&&(n.style.width=e+"px"),t)&&(n.style.height=t+"px"),o)&&i&&(B.revertLocat={left:o,top:i,width:l,height:a})):u?(0,_vue.nextTick)(()=>p()):(d(),c().then(()=>{setTimeout(()=>c(),20)}))):m||(d(),c().then(()=>{setTimeout(()=>c(),20)}))})),(0,_vue.nextTick)()},P=e=>{var t=M.value;w.maskClosable&&e.target===t&&i("mask")},Y=()=>{var e=t["msgTimeout"];e&&V.value&&(clearTimeout(e),t.msgTimeout=void 0)},F=()=>{var e=t["msgTimeout"];e||V.value&&_()},X=e=>{if(_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE)){const t=_xeUtils.default.max(allActiveModals,e=>e.reactData.modalZindex);t&&setTimeout(()=>{t===D&&t.props.escClosable&&(S("close",{type:"exit"},e),i("exit"))},10)}};const y=()=>(B.prevZoomStatus=B.zoomStatus,(B.zoomStatus="",_vue.nextTick)().then(()=>{var e,t=B["revertLocat"];return t?(e=z(),B.revertLocat=null,e&&Object.assign(e.style,{top:t.top+"px",left:t.left+"px",width:t.width+"px",height:t.height+"px"}),C(),(0,_vue.nextTick)().then(()=>({status:!0}))):{status:!1}})),b=t=>{const o=B["zoomStatus"];return new Promise(e=>{if(t)return"maximize"===t?void e(p()):"minimize"===t?void e(g()):void e(y());e((o?y:p)())}).then(()=>B.zoomStatus||"revert")},Q=t=>{var{zoomStatus:e,prevZoomStatus:o}=B;return b("minimize"===e?o||"revert":"minimize").then(e=>{e={type:e};S("zoom",e,t)})},I=t=>b().then(e=>{e={type:e};S("zoom",e,t)});const R=()=>{const t=B["modalZindex"];allActiveModals.some(e=>e.reactData.visible&&e.reactData.modalZindex>t)&&r()},J=e=>{const t=w["storage"];var o=B["zoomStatus"];const n=_xeUtils.default.toNumber(w.marginSize),u=z();if(u&&"maximize"!==o&&0===e.button&&!(0,_dom.getEventTargetNode)(e,u,"trigger--btn").flag){e.preventDefault();const i=document.onmousemove,l=document.onmouseup,r=e.clientX-u.offsetLeft,m=e.clientY-u.offsetTop,{visibleHeight:d,visibleWidth:c}=(0,_dom.getDomNode)();document.onmousemove=e=>{e.preventDefault();var t=u.offsetWidth,o=u.offsetHeight,i=n,t=c-t-n-1,l=n,o=d-o-n-1;let a=e.clientX-r,s=e.clientY-m;(a=a>t?t:a)<i&&(a=i),(s=s>o?o:s)<l&&(s=l),u.style.left=a+"px",u.style.top=s+"px",u.className=u.className.replace(/\s?is--drag/,"")+" is--drag",S("move",{type:"move"},e)},document.onmouseup=()=>{document.onmousemove=i,document.onmouseup=l,t&&(0,_vue.nextTick)(()=>{C()}),setTimeout(()=>{u.className=u.className.replace(/\s?is--drag/,"")},50)}}},G=e=>{e.preventDefault();const a=w["storage"],{visibleHeight:s,visibleWidth:n}=(0,_dom.getDomNode)(),u=_xeUtils.default.toNumber(w.marginSize);const r=e.target.getAttribute("type"),m=_xeUtils.default.toNumber(w.minWidth),d=_xeUtils.default.toNumber(w.minHeight),c=n,v=s,f=z(),g=f.clientWidth,p=f.clientHeight,_=e.clientX,h=e.clientY,x=f.offsetTop,y=f.offsetLeft,b={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,o,i,l;switch(r){case"wl":t=_-e.clientX,i=t+g,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px");break;case"swst":t=_-e.clientX,o=h-e.clientY,i=t+g,l=o+p,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px"),x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"swlb":t=_-e.clientX,o=e.clientY-h,i=t+g,l=o+p,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px"),x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`);break;case"st":o=h-e.clientY,l=p+o,x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"wr":t=e.clientX-_,i=t+g,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`);break;case"sest":t=e.clientX-_,o=h-e.clientY,i=t+g,l=o+p,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`),x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"selb":t=e.clientX-_,o=e.clientY-h,i=t+g,l=o+p,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`),x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`);break;case"sb":o=e.clientY-h,l=o+p,x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`)}f.className=f.className.replace(/\s?is--drag/,"")+" is--drag",a&&C(),S("resize",b,e)},document.onmouseup=()=>{B.revertLocat=null,document.onmousemove=null,document.onmouseup=null,setTimeout(()=>{f.className=f.className.replace(/\s?is--drag/,"")},50)}},S=(e,t,o)=>{s(e,(0,_ui.createEvent)(o,{$modal:D},t))},ee=(e={dispatchEvent:S,open:x,close(){return i("close")},getBox:z,getPosition:()=>{if(!V.value){var e=z();if(e)return{top:e.offsetTop,left:e.offsetLeft}}return null},setPosition:(e,t)=>{var o;return V.value||(o=z())&&(_xeUtils.default.isNumber(e)&&(o.style.top=e+"px"),_xeUtils.default.isNumber(t))&&(o.style.left=t+"px"),(0,_vue.nextTick)()},isMinimized:()=>"minimize"===B.zoomStatus,isMaximized:()=>"maximize"===B.zoomStatus,zoom(){return b()},minimize(){return B.visible?g():Promise.resolve({status:!1})},maximize(){return B.visible?p():Promise.resolve({status:!1})},revert(){return B.visible?y():Promise.resolve({status:!1})}},Object.assign(D,e),()=>{var{slots:e={},showClose:t,showZoom:o,showMaximize:i,showMinimize:l,title:a}=w,s=B["zoomStatus"],n=N.title||e.title,e=N.corner||e.corner,u=U.value,r=H.value;return[(0,_vue.h)("div",{class:"vxe-modal--header-title"},n?(0,_vn.getSlotVNs)(n({$modal:D,minimized:u,maximized:r})):a?(0,_utils.getFuncText)(a):(0,_ui.getI18n)("vxe.alert.title")),(0,_vue.h)("div",{class:"vxe-modal--header-right"},[e&&!u?(0,_vue.h)("div",{class:"vxe-modal--corner-wrapper"},(0,_vn.getSlotVNs)(e({$modal:D}))):(0,_vue.createCommentVNode)(),(_xeUtils.default.isBoolean(l)?l:o)?(0,_vue.h)("div",{class:["vxe-modal--zoom-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.zoom"+("minimize"===s?"Out":"Min")),onClick:Q},[(0,_vue.h)("i",{class:"minimize"===s?(0,_ui.getIcon)().MODAL_ZOOM_REVERT:(0,_ui.getIcon)().MODAL_ZOOM_MIN})]):(0,_vue.createCommentVNode)(),(_xeUtils.default.isBoolean(i)?i:o)&&"minimize"!==s?(0,_vue.h)("div",{class:["vxe-modal--zoom-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.zoom"+("maximize"===s?"Out":"In")),onClick:I},[(0,_vue.h)("i",{class:"maximize"===s?(0,_ui.getIcon)().MODAL_ZOOM_OUT:(0,_ui.getIcon)().MODAL_ZOOM_IN})]):(0,_vue.createCommentVNode)(),t?(0,_vue.h)("div",{class:["vxe-modal--close-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.close"),onClick:W},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().MODAL_CLOSE})]):(0,_vue.createCommentVNode)()])]}),te=()=>{var{slots:e={},showCancelButton:t,showConfirmButton:o,type:i,loading:l}=w,a=N.leftfoot||e.leftfoot,e=N.rightfoot||e.rightfoot,s=[];return(_xeUtils.default.isBoolean(t)?t:"confirm"===i)&&s.push((0,_vue.h)(_button.default,{key:1,ref:u,content:w.cancelButtonText||(0,_ui.getI18n)("vxe.button.cancel"),onClick:q})),(_xeUtils.default.isBoolean(o)?o:"confirm"===i||"alert"===i)&&s.push((0,_vue.h)(_button.default,{key:2,ref:n,loading:l,status:"primary",content:w.confirmButtonText||(0,_ui.getI18n)("vxe.button.confirm"),onClick:K})),(0,_vue.h)("div",{class:"vxe-modal--footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-modal--footer-left"},a?(0,_vn.getSlotVNs)(a({$modal:D})):[]),(0,_vue.h)("div",{class:"vxe-modal--footer-right"},e?(0,_vn.getSlotVNs)(e({$modal:D})):s)])};return D.renderVN=()=>{var{slots:e={},className:t,type:o,animat:i,draggable:l,iconStatus:a,position:s,loading:n,destroyOnClose:u,status:r,lockScroll:m,padding:d,lockView:c,mask:v,resize:f}=w,{initialized:g,modalTop:p,contentVisible:_,visible:h,zoomStatus:x}=B,e=N.aside||e.aside,y=k.value,b=V.value,z=U.value,C=Z.value,S={};return b&&(S.onMouseover=Y,S.onMouseout=F),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!C||!g},[(0,_vue.h)("div",Object.assign({ref:M,class:["vxe-modal--wrapper","type--"+o,"zoom--"+(x||"revert"),t||"",s?"pos--"+s:"",{["size--"+y]:y,["status--"+r]:r,"is--padding":d,"is--animat":i,"lock--scroll":m,"lock--view":c,"is--draggable":l,"is--resize":f,"is--mask":v,"is--visible":_,"is--active":h,"is--loading":n}],style:{zIndex:B.modalZindex,top:p?p+"px":null},onClick:P},S),[(0,_vue.h)("div",{ref:O,class:"vxe-modal--box",onMousedown:R},[!b&&!e||z?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-modal--aside"},e?(0,_vn.getSlotVNs)(e({$modal:D})):[r||a?(0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",a||(0,_ui.getIcon)()[("MODAL_"+r).toLocaleUpperCase()]]})]):(0,_vue.createCommentVNode)()]),(0,_vue.h)("div",{class:"vxe-modal--container"},!B.initialized||u&&!B.visible?[]:[(()=>{var e,{slots:t={},showZoom:o,showMaximize:i,draggable:l}=w,a=V.value,t=N.header||t.header;return w.showHeader?(e={},l&&(e.onMousedown=J),(_xeUtils.default.isBoolean(i)?i:o)&&w.dblclickZoom&&"modal"===w.type&&(e.onDblclick=I),(0,_vue.h)("div",Object.assign({ref:T,class:["vxe-modal--header",{"is--ellipsis":!a&&w.showTitleOverflow}]},e),t?(0,_vn.getSlotVNs)(t({$modal:D})):ee())):(0,_vue.createCommentVNode)()})(),(()=>{var{slots:e={},status:t,message:o,iconStatus:i}=w,o=w.content||o,l=V.value,a=N.default||e.default,s=N.left||e.left,e=N.right||e.right,n=[];return l||!t&&!i||n.push((0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",i||(0,_ui.getIcon)()[("MODAL_"+t).toLocaleUpperCase()]]})])),n.push((0,_vue.h)("div",{class:"vxe-modal--content"},a?(0,_vn.getSlotVNs)(a({$modal:D})):(0,_utils.getFuncText)(o))),(0,_vue.h)("div",{class:"vxe-modal--body"},[s?(0,_vue.h)("div",{class:"vxe-modal--body-left"},(0,_vn.getSlotVNs)(s({$modal:D}))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-modal--body-default"},n),e?(0,_vue.h)("div",{class:"vxe-modal--body-right"},(0,_vn.getSlotVNs)(e({$modal:D}))):(0,_vue.createCommentVNode)(),l?(0,_vue.createCommentVNode)():(0,_vue.h)(_index.default,{class:"vxe-modal--loading",modelValue:w.loading})])})(),(()=>{var{slots:e={}}=w,e=N.footer||e.footer;return w.showFooter?(0,_vue.h)("div",{class:"vxe-modal--footer"},e?(0,_vn.getSlotVNs)(e({$modal:D})):[te()]):(0,_vue.createCommentVNode)()})(),!b&&f?(0,_vue.h)("span",{class:"vxe-modal--resize"},["wl","wr","swst","sest","st","swlb","selb","sb"].map(e=>(0,_vue.h)("span",{class:e+"-resize",type:e,onMousedown:G}))):(0,_vue.createCommentVNode)()])])])])},(0,_vue.watch)(()=>w.width,d),(0,_vue.watch)(()=>w.height,d),(0,_vue.watch)(()=>w.modelValue,e=>{e?x():i("model")}),(0,_vue.onMounted)(()=>{"development"===process.env.NODE_ENV&&"modal"===w.type&&w.showFooter&&!(w.showConfirmButton||w.showCancelButton||N.footer)&&(0,_log.warnLog)("vxe.modal.footPropErr"),(0,_vue.nextTick)(()=>{w.storage&&!w.id&&(0,_log.errLog)("vxe.error.reqProp",["modal.id"]),w.modelValue&&x(),d()}),w.escClosable&&_ui.globalEvents.on(D,"keydown",X)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(D,"keydown"),m(),h()}),(0,_vue.provide)("$xeModal",D),D},render(){return this.renderVN()}});
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.allActiveModals=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_ui=require("../../ui"),_button=_interopRequireDefault(require("../../button/src/button")),_index=_interopRequireDefault(require("../../loading/index")),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const allActiveModals=exports.allActiveModals=[],msgQueue=[],notifyQueue=[],lockScrollAttrKey="data-vxe-lock-scroll",lockScrollCssWidthKey="--vxe-ui-modal-lock-scroll-view-width";var _default=exports.default=(0,_vue.defineComponent)({name:"VxeModal",props:{modelValue:Boolean,id:String,type:{type:String,default:"modal"},loading:{type:Boolean,default:null},status:String,iconStatus:String,className:String,top:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.top},position:[String,Object],title:String,duration:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.duration},content:[Number,String],showCancelButton:{type:Boolean,default:null},cancelButtonText:{type:String,default:()=>(0,_ui.getConfig)().modal.cancelButtonText},showConfirmButton:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showConfirmButton},confirmButtonText:{type:String,default:()=>(0,_ui.getConfig)().modal.confirmButtonText},lockView:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.lockView},lockScroll:Boolean,mask:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.mask},maskClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.maskClosable},escClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.escClosable},cancelClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.cancelClosable},confirmClosable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.confirmClosable},resize:Boolean,showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showHeader},showFooter:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showFooter},showZoom:Boolean,zoomConfig:Object,showMaximize:{type:Boolean,default:()=>(0,_utils.handleBooleanDefaultValue)((0,_ui.getConfig)().modal.showMaximize)},showMinimize:{type:Boolean,default:()=>(0,_utils.handleBooleanDefaultValue)((0,_ui.getConfig)().modal.showMinimize)},showClose:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showClose},dblclickZoom:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.dblclickZoom},width:[Number,String],height:[Number,String],minWidth:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.minWidth},minHeight:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.minHeight},zIndex:Number,marginSize:{type:[Number,String],default:()=>(0,_ui.getConfig)().modal.marginSize},fullscreen:Boolean,draggable:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.draggable},remember:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.remember},destroyOnClose:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.destroyOnClose},showTitleOverflow:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.showTitleOverflow},transfer:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.transfer},storage:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.storage},storageKey:{type:String,default:()=>(0,_ui.getConfig)().modal.storageKey},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.padding},size:{type:String,default:()=>(0,_ui.getConfig)().modal.size||(0,_ui.getConfig)().size},beforeHideMethod:Function,slots:Object,message:[Number,String],animat:{type:Boolean,default:()=>(0,_ui.getConfig)().modal.animat}},emits:["update:modelValue","show","hide","before-hide","close","confirm","cancel","zoom","resize","move"],setup(w,e){const{slots:N,emit:s}=e,a=_xeUtils.default.uniqueId(),o=(0,_vue.inject)("$xeModal",null),L=(0,_vue.inject)("$xeDrawer",null),A=(0,_vue.inject)("$xeTable",null),$=(0,_vue.inject)("$xeForm",null),k=(0,_ui.useSize)(w)["computeSize"],B=(0,_vue.reactive)({initialized:!1,visible:!1,contentVisible:!1,modalTop:0,modalZindex:0,prevZoomStatus:"",zoomStatus:"",revertLocat:null,prevLocat:null,firstOpen:!0}),t={msgTimeout:void 0},M=(0,_vue.ref)(),O=(0,_vue.ref)(),T=(0,_vue.ref)(),n=(0,_vue.ref)(),u=(0,_vue.ref)(),E={refElem:M},Z=(0,_vue.computed)(()=>{var e=w["transfer"];if(null===e){var t=(0,_ui.getConfig)().modal.transfer;if(_xeUtils.default.isBoolean(t))return t;if(A||o||L||$)return!0}return e}),V=(0,_vue.computed)(()=>"message"===w.type||"notification"===w.type),U=(0,_vue.computed)(()=>"minimize"===B.zoomStatus),H=(0,_vue.computed)(()=>"maximize"===B.zoomStatus),l=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().modal.zoomConfig,w.zoomConfig)),j={computeSize:k,computeZoomOpts:l},D={xID:a,props:w,context:e,reactData:B,internalData:t,getRefMaps:()=>E,getComputeMaps:()=>j};const z=()=>{return O.value},d=()=>{var{width:e,height:t}=w,o=z();return o&&(o.style.width=e?(0,_dom.toCssUnit)(e):"",o.style.height=t?(0,_dom.toCssUnit)(t):""),(0,_vue.nextTick)()},r=()=>{var e=w["zIndex"],t=B["modalZindex"];e?B.modalZindex=e:t<(0,_utils.getLastZIndex)()&&(B.modalZindex=(0,_utils.nextZIndex)())},c=()=>(0,_vue.nextTick)().then(()=>{var o=w["position"],i=_xeUtils.default.toNumber(w.marginSize),l=z();if(l){var a=document.documentElement.clientWidth||document.body.clientWidth,s=document.documentElement.clientHeight||document.body.clientHeight,n="center"===o,{top:o,left:u}=_xeUtils.default.isString(o)?{top:o,left:o}:Object.assign({},o),r=n||"center"===o;let e="",t="";t=u&&!(n||"center"===u)?isNaN(u)?u:u+"px":Math.max(i,a/2-l.offsetWidth/2)+"px",e=o&&!r?isNaN(o)?o:o+"px":Math.max(i,s/2-l.offsetHeight/2)+"px",l.style.top=e,l.style.left=t}}),v=()=>{(0,_vue.nextTick)(()=>{var e=w["type"],e="notification"===e?notifyQueue:msgQueue;let o=0;e.forEach(e=>{var t=e.getBox();t&&(o+=_xeUtils.default.toNumber(e.props.top),e.reactData.modalTop=o,o+=t.clientHeight)})})},m=()=>{var e=w["type"],e="notification"===e?notifyQueue:msgQueue;-1<e.indexOf(D)&&_xeUtils.default.remove(e,e=>e===D),v()},i=e=>{const t=w["remember"];var o=B["visible"];const i=V.value;var l=w.beforeHideMethod||(0,_ui.getConfig)().modal.beforeHideMethod;const a={type:e};return o&&Promise.resolve(l?l(a):null).then(e=>{_xeUtils.default.isError(e)||(i&&m(),B.contentVisible=!1,t||y(),_xeUtils.default.remove(allActiveModals,e=>e===D),S("before-hide",a,null),setTimeout(()=>{B.visible=!1,s("update:modelValue",!1),S("hide",a,null)},200),h())}).catch(e=>e),(0,_vue.nextTick)()},W=e=>{var t="close";S(t,{type:t},e),i(t)},K=e=>{var t=w["confirmClosable"],o="confirm";S(o,{type:o},e),t&&i(o)},q=e=>{var t=w["cancelClosable"],o="cancel";S(o,{type:o},e),t&&i(o)},f=e=>{var t=(0,_ui.getConfig)().version,e=_xeUtils.default.toStringJSON(localStorage.getItem(e)||"");return e&&e._v===t?e:{_v:t}},C=()=>{var{id:e,storage:t,storageKey:o}=w,{zoomStatus:i,revertLocat:l}=B;i||e&&t&&(i=z())&&((t=f(o))[e]=[i.style.left,i.style.top,i.style.width,i.style.height].concat(l?[l.left,l.top,l.width,l.height]:[]).map(e=>e?_xeUtils.default.toNumber(e):"").join(","),localStorage.setItem(o,_xeUtils.default.toJSONString(t)))},g=()=>{const{minimizeLayout:e,minimizeMaxSize:t,minimizeHorizontalOffset:s,minimizeVerticalOffset:n,minimizeOffsetMethod:u}=l.value,r="horizontal"===e,m=B.zoomStatus,o=[],i=[],d=(allActiveModals.forEach(e=>{e.xID!==D.xID&&"modal"===e.props.type&&"minimize"===e.reactData.zoomStatus&&("horizontal"===e.getComputeMaps().computeZoomOpts.value.minimizeLayout?o:i).push(e)}),r?o:i);return t&&d.length>=t?(_ui.VxeUI.modal&&_ui.VxeUI.modal.message({status:"error",content:(0,_ui.getI18n)("vxe.modal.miniMaxSize",[t])}),Promise.resolve({status:!1})):(B.prevZoomStatus=m,B.zoomStatus="minimize",(0,_vue.nextTick)().then(()=>{var e=z();if(!e)return{status:!1};var t=T.value;if(!t)return{status:!1};var o=(0,_dom.getDomNode)()["visibleHeight"],i=(m||(B.revertLocat={top:e.offsetTop,left:e.offsetLeft,width:e.offsetWidth+(e.style.width?0:1),height:e.offsetHeight+(e.style.height?0:1)}),_xeUtils.default[r?"max":"min"](d,e=>{e=e.getBox();return e?_xeUtils.default.toNumber(e.style[r?"left":"top"]):0}));let l=o-t.offsetHeight-16,a=16;if(i){o=i.getBox();if(o){i=_xeUtils.default.toNumber(o.style.left),o=_xeUtils.default.toNumber(o.style.top);let e={};e=r?Object.assign({},s):Object.assign({},n),a=i+_xeUtils.default.toNumber(e.left),l=o+_xeUtils.default.toNumber(e.top),u&&(e=u({$modal:D,left:a,top:l}),a=_xeUtils.default.toNumber(e.left),l=_xeUtils.default.toNumber(e.top))}}return Object.assign(e.style,{top:l+"px",left:a+"px",width:"200px",height:t.offsetHeight+"px"}),C(),{status:!0}}))},p=()=>{const l=B.zoomStatus;return B.prevZoomStatus=l,B.zoomStatus="maximize",(0,_vue.nextTick)().then(()=>{var e,t,o,i=z();return i&&(l||(e=_xeUtils.default.toNumber(w.marginSize),t=document.documentElement.clientWidth||document.body.clientWidth,o=document.documentElement.clientHeight||document.body.clientHeight,B.revertLocat={top:Math.max(e,o/2-i.offsetHeight/2),left:Math.max(e,t/2-i.offsetWidth/2),width:i.offsetWidth+(i.style.width?0:1),height:i.offsetHeight+(i.style.height?0:1)}),Object.assign(i.style,{top:"0",left:"0",width:"100%",height:"100%"})),C(),{status:!0}})},_=()=>{var e=w["duration"];-1!==e&&(t.msgTimeout=setTimeout(()=>i("close"),_xeUtils.default.toNumber(e)))},h=()=>{var e=document.documentElement,t=e.getAttribute(lockScrollAttrKey);t&&((t=t.split(",").filter(e=>e!==a)).length?e.setAttribute(lockScrollAttrKey,t.join(",")):(e.removeAttribute(lockScrollAttrKey),e.style.removeProperty(lockScrollCssWidthKey)))},x=()=>{const{remember:m,showFooter:o}=w;var e,{initialized:t,visible:i}=B,l=V.value;return t||(B.initialized=!0),i||(t=w.lockScroll,i=V.value,t&&!i&&(t=document.documentElement,i=document.body.clientWidth,(e=(e=t.getAttribute(lockScrollAttrKey))?e.split(","):[]).includes(a)||(e.push(a),t.setAttribute(lockScrollAttrKey,e.join(","))),t.style.setProperty(lockScrollCssWidthKey,i+"px")),B.visible=!0,B.contentVisible=!1,r(),allActiveModals.push(D),setTimeout(()=>{B.contentVisible=!0,(0,_vue.nextTick)(()=>{o&&(e=n.value,t=u.value,e=e||t)&&e.focus();var e,t={type:""};s("update:modelValue",!0),S("show",t,null)})},10),l?(-1===(e="notification"===(e=w.type)?notifyQueue:msgQueue).indexOf(D)&&e.push(D),v(),_()):(0,_vue.nextTick)(()=>{var e,t,o,i,l,a,s,n,u=w["fullscreen"],r=B["firstOpen"];r?(B.firstOpen=!1,(()=>{var{id:e,storage:t,storageKey:o}=w;return!!(e&&t&&f(o)[e])})()?({id:r,storage:s,storageKey:n}=w,r&&s&&(s=f(n)[r])&&(n=z(),[r,s,e,t,o,i,l,a]=s.split(","),n&&(r&&(n.style.left=r+"px"),s&&(n.style.top=s+"px"),e&&(n.style.width=e+"px"),t)&&(n.style.height=t+"px"),o)&&i&&(B.revertLocat={left:o,top:i,width:l,height:a})):u?(0,_vue.nextTick)(()=>p()):(d(),c().then(()=>{setTimeout(()=>c(),20)}))):m||(d(),c().then(()=>{setTimeout(()=>c(),20)}))})),(0,_vue.nextTick)()},P=e=>{var t=M.value;w.maskClosable&&e.target===t&&i("mask")},Y=()=>{var e=t["msgTimeout"];e&&V.value&&(clearTimeout(e),t.msgTimeout=void 0)},F=()=>{var e=t["msgTimeout"];e||V.value&&_()},X=e=>{if(_ui.globalEvents.hasKey(e,_ui.GLOBAL_EVENT_KEYS.ESCAPE)){const t=_xeUtils.default.max(allActiveModals,e=>e.reactData.modalZindex);t&&setTimeout(()=>{t===D&&t.props.escClosable&&(S("close",{type:"exit"},e),i("exit"))},10)}};const y=()=>(B.prevZoomStatus=B.zoomStatus,(B.zoomStatus="",_vue.nextTick)().then(()=>{var e,t=B["revertLocat"];return t?(e=z(),B.revertLocat=null,e&&Object.assign(e.style,{top:t.top+"px",left:t.left+"px",width:t.width+"px",height:t.height+"px"}),C(),(0,_vue.nextTick)().then(()=>({status:!0}))):{status:!1}})),b=t=>{const o=B["zoomStatus"];return new Promise(e=>{if(t)return"maximize"===t?void e(p()):"minimize"===t?void e(g()):void e(y());e((o?y:p)())}).then(()=>B.zoomStatus||"revert")},Q=t=>{var{zoomStatus:e,prevZoomStatus:o}=B;return b("minimize"===e?o||"revert":"minimize").then(e=>{e={type:e};S("zoom",e,t)})},I=t=>b().then(e=>{e={type:e};S("zoom",e,t)});const R=()=>{const t=B["modalZindex"];allActiveModals.some(e=>e.reactData.visible&&e.reactData.modalZindex>t)&&r()},J=e=>{const t=w["storage"];var o=B["zoomStatus"];const n=_xeUtils.default.toNumber(w.marginSize),u=z();if(u&&"maximize"!==o&&0===e.button&&!(0,_dom.getEventTargetNode)(e,u,"trigger--btn").flag){e.preventDefault();const i=document.onmousemove,l=document.onmouseup,r=e.clientX-u.offsetLeft,m=e.clientY-u.offsetTop,{visibleHeight:d,visibleWidth:c}=(0,_dom.getDomNode)();document.onmousemove=e=>{e.preventDefault();var t=u.offsetWidth,o=u.offsetHeight,i=n,t=c-t-n-1,l=n,o=d-o-n-1;let a=e.clientX-r,s=e.clientY-m;(a=a>t?t:a)<i&&(a=i),(s=s>o?o:s)<l&&(s=l),u.style.left=a+"px",u.style.top=s+"px",u.className=u.className.replace(/\s?is--drag/,"")+" is--drag",S("move",{type:"move"},e)},document.onmouseup=()=>{document.onmousemove=i,document.onmouseup=l,t&&(0,_vue.nextTick)(()=>{C()}),setTimeout(()=>{u.className=u.className.replace(/\s?is--drag/,"")},50)}}},G=e=>{e.preventDefault();const a=w["storage"],{visibleHeight:s,visibleWidth:n}=(0,_dom.getDomNode)(),u=_xeUtils.default.toNumber(w.marginSize);const r=e.target.getAttribute("type"),m=_xeUtils.default.toNumber(w.minWidth),d=_xeUtils.default.toNumber(w.minHeight),c=n,v=s,f=z(),g=f.clientWidth,p=f.clientHeight,_=e.clientX,h=e.clientY,x=f.offsetTop,y=f.offsetLeft,b={type:"resize"};document.onmousemove=e=>{e.preventDefault();let t,o,i,l;switch(r){case"wl":t=_-e.clientX,i=t+g,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px");break;case"swst":t=_-e.clientX,o=h-e.clientY,i=t+g,l=o+p,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px"),x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"swlb":t=_-e.clientX,o=e.clientY-h,i=t+g,l=o+p,y-t>u&&i>m&&(f.style.width=`${i<c?i:c}px`,f.style.left=y-t+"px"),x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`);break;case"st":o=h-e.clientY,l=p+o,x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"wr":t=e.clientX-_,i=t+g,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`);break;case"sest":t=e.clientX-_,o=h-e.clientY,i=t+g,l=o+p,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`),x-o>u&&l>d&&(f.style.height=`${l<v?l:v}px`,f.style.top=x-o+"px");break;case"selb":t=e.clientX-_,o=e.clientY-h,i=t+g,l=o+p,y+i+u<n&&i>m&&(f.style.width=`${i<c?i:c}px`),x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`);break;case"sb":o=e.clientY-h,l=o+p,x+l+u<s&&l>d&&(f.style.height=`${l<v?l:v}px`)}f.className=f.className.replace(/\s?is--drag/,"")+" is--drag",a&&C(),S("resize",b,e)},document.onmouseup=()=>{B.revertLocat=null,document.onmousemove=null,document.onmouseup=null,setTimeout(()=>{f.className=f.className.replace(/\s?is--drag/,"")},50)}},S=(e,t,o)=>{s(e,(0,_ui.createEvent)(o,{$modal:D},t))},ee=(e={dispatchEvent:S,open:x,close(){return i("close")},getBox:z,getPosition:()=>{if(!V.value){var e=z();if(e)return{top:e.offsetTop,left:e.offsetLeft}}return null},setPosition:(e,t)=>{var o;return V.value||(o=z())&&(_xeUtils.default.isNumber(e)&&(o.style.top=e+"px"),_xeUtils.default.isNumber(t))&&(o.style.left=t+"px"),(0,_vue.nextTick)()},isMinimized:()=>"minimize"===B.zoomStatus,isMaximized:()=>"maximize"===B.zoomStatus,zoom(){return b()},minimize(){return B.visible?g():Promise.resolve({status:!1})},maximize(){return B.visible?p():Promise.resolve({status:!1})},revert(){return B.visible?y():Promise.resolve({status:!1})}},Object.assign(D,e),()=>{var{slots:e={},showClose:t,showZoom:o,showMaximize:i,showMinimize:l,title:a}=w,s=B["zoomStatus"],n=N.title||e.title,e=N.corner||e.corner,u=U.value,r=H.value;return[(0,_vue.h)("div",{class:"vxe-modal--header-title"},n?(0,_vn.getSlotVNs)(n({$modal:D,minimized:u,maximized:r})):a?(0,_utils.getFuncText)(a):(0,_ui.getI18n)("vxe.alert.title")),(0,_vue.h)("div",{class:"vxe-modal--header-right"},[e&&!u?(0,_vue.h)("div",{class:"vxe-modal--corner-wrapper"},(0,_vn.getSlotVNs)(e({$modal:D}))):(0,_vue.createCommentVNode)(),(_xeUtils.default.isBoolean(l)?l:o)?(0,_vue.h)("div",{class:["vxe-modal--zoom-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.zoom"+("minimize"===s?"Out":"Min")),onClick:Q},[(0,_vue.h)("i",{class:"minimize"===s?(0,_ui.getIcon)().MODAL_ZOOM_REVERT:(0,_ui.getIcon)().MODAL_ZOOM_MIN})]):(0,_vue.createCommentVNode)(),(_xeUtils.default.isBoolean(i)?i:o)&&"minimize"!==s?(0,_vue.h)("div",{class:["vxe-modal--zoom-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.zoom"+("maximize"===s?"Out":"In")),onClick:I},[(0,_vue.h)("i",{class:"maximize"===s?(0,_ui.getIcon)().MODAL_ZOOM_OUT:(0,_ui.getIcon)().MODAL_ZOOM_IN})]):(0,_vue.createCommentVNode)(),t?(0,_vue.h)("div",{class:["vxe-modal--close-btn","trigger--btn"],title:(0,_ui.getI18n)("vxe.modal.close"),onClick:W},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().MODAL_CLOSE})]):(0,_vue.createCommentVNode)()])]}),te=()=>{var{slots:e={},showCancelButton:t,showConfirmButton:o,type:i,loading:l}=w,a=N.leftfoot||e.leftfoot,e=N.rightfoot||e.rightfoot,s=[];return(_xeUtils.default.isBoolean(t)?t:"confirm"===i)&&s.push((0,_vue.h)(_button.default,{key:1,ref:u,content:w.cancelButtonText||(0,_ui.getI18n)("vxe.button.cancel"),onClick:q})),(_xeUtils.default.isBoolean(o)?o:"confirm"===i||"alert"===i)&&s.push((0,_vue.h)(_button.default,{key:2,ref:n,loading:l,status:"primary",content:w.confirmButtonText||(0,_ui.getI18n)("vxe.button.confirm"),onClick:K})),(0,_vue.h)("div",{class:"vxe-modal--footer-wrapper"},[(0,_vue.h)("div",{class:"vxe-modal--footer-left"},a?(0,_vn.getSlotVNs)(a({$modal:D})):[]),(0,_vue.h)("div",{class:"vxe-modal--footer-right"},e?(0,_vn.getSlotVNs)(e({$modal:D})):s)])};return D.renderVN=()=>{var{slots:e={},className:t,type:o,animat:i,draggable:l,iconStatus:a,position:s,loading:n,destroyOnClose:u,status:r,lockScroll:m,padding:d,lockView:c,mask:v,resize:f}=w,{initialized:g,modalTop:p,contentVisible:_,visible:h,zoomStatus:x}=B,e=N.aside||e.aside,y=k.value,b=V.value,z=U.value,C=Z.value,S={};return b&&(S.onMouseover=Y,S.onMouseout=F),(0,_vue.h)(_vue.Teleport,{to:"body",disabled:!C||!g},[(0,_vue.h)("div",Object.assign({ref:M,class:["vxe-modal--wrapper","type--"+o,"zoom--"+(x||"revert"),t||"",s?"pos--"+s:"",{["size--"+y]:y,["status--"+r]:r,"is--padding":d,"is--animat":i,"lock--scroll":m,"lock--view":c,"is--draggable":l,"is--resize":f,"is--mask":v,"is--visible":_,"is--active":h,"is--loading":n}],style:{zIndex:B.modalZindex,top:p?p+"px":null},onClick:P},S),[(0,_vue.h)("div",{ref:O,class:"vxe-modal--box",onMousedown:R},[!b&&!e||z?(0,_vue.createCommentVNode)():(0,_vue.h)("div",{class:"vxe-modal--aside"},e?(0,_vn.getSlotVNs)(e({$modal:D})):[r||a?(0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",a||(0,_ui.getIcon)()[("MODAL_"+r).toLocaleUpperCase()]]})]):(0,_vue.createCommentVNode)()]),(0,_vue.h)("div",{class:"vxe-modal--container"},!B.initialized||u&&!B.visible?[]:[(()=>{var e,{slots:t={},showZoom:o,showMaximize:i,draggable:l}=w,t=N.header||t.header;return w.showHeader?(e={},l&&(e.onMousedown=J),(_xeUtils.default.isBoolean(i)?i:o)&&w.dblclickZoom&&"modal"===w.type&&(e.onDblclick=I),(0,_vue.h)("div",Object.assign({ref:T,class:["vxe-modal--header",{"is--ellipsis":w.showTitleOverflow}]},e),t?(0,_vn.getSlotVNs)(t({$modal:D})):ee())):(0,_vue.createCommentVNode)()})(),(()=>{var{slots:e={},status:t,message:o,iconStatus:i}=w,o=w.content||o,l=V.value,a=N.default||e.default,s=N.left||e.left,e=N.right||e.right,n=[];return l||!t&&!i||n.push((0,_vue.h)("div",{class:"vxe-modal--status-wrapper"},[(0,_vue.h)("i",{class:["vxe-modal--status-icon",i||(0,_ui.getIcon)()[("MODAL_"+t).toLocaleUpperCase()]]})])),n.push((0,_vue.h)("div",{class:"vxe-modal--content"},a?(0,_vn.getSlotVNs)(a({$modal:D})):(0,_utils.getFuncText)(o))),(0,_vue.h)("div",{class:"vxe-modal--body"},[s?(0,_vue.h)("div",{class:"vxe-modal--body-left"},(0,_vn.getSlotVNs)(s({$modal:D}))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-modal--body-default"},n),e?(0,_vue.h)("div",{class:"vxe-modal--body-right"},(0,_vn.getSlotVNs)(e({$modal:D}))):(0,_vue.createCommentVNode)(),l?(0,_vue.createCommentVNode)():(0,_vue.h)(_index.default,{class:"vxe-modal--loading",modelValue:w.loading})])})(),(()=>{var{slots:e={}}=w,e=N.footer||e.footer;return w.showFooter?(0,_vue.h)("div",{class:"vxe-modal--footer"},e?(0,_vn.getSlotVNs)(e({$modal:D})):[te()]):(0,_vue.createCommentVNode)()})(),!b&&f?(0,_vue.h)("span",{class:"vxe-modal--resize"},["wl","wr","swst","sest","st","swlb","selb","sb"].map(e=>(0,_vue.h)("span",{class:e+"-resize",type:e,onMousedown:G}))):(0,_vue.createCommentVNode)()])])])])},(0,_vue.watch)(()=>w.width,d),(0,_vue.watch)(()=>w.height,d),(0,_vue.watch)(()=>w.modelValue,e=>{e?x():i("model")}),(0,_vue.onMounted)(()=>{"development"===process.env.NODE_ENV&&"modal"===w.type&&w.showFooter&&!(w.showConfirmButton||w.showCancelButton||N.footer)&&(0,_log.warnLog)("vxe.modal.footPropErr"),(0,_vue.nextTick)(()=>{w.storage&&!w.id&&(0,_log.errLog)("vxe.error.reqProp",["modal.id"]),w.modelValue&&x(),d()}),w.escClosable&&_ui.globalEvents.on(D,"keydown",X)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(D,"keydown"),m(),h()}),(0,_vue.provide)("$xeModal",D),D},render(){return this.renderVN()}});
|
package/lib/split/src/split.js
CHANGED
|
@@ -9,6 +9,7 @@ var _ui = require("../../ui");
|
|
|
9
9
|
var _vn = require("../../ui/src/vn");
|
|
10
10
|
var _dom = require("../../ui/src/dom");
|
|
11
11
|
var _utils = require("../../ui/src/utils");
|
|
12
|
+
var _log = require("../../ui/src/log");
|
|
12
13
|
var _xeUtils = _interopRequireDefault(require("xe-utils"));
|
|
13
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
14
15
|
var _default = exports.default = (0, _vue.defineComponent)({
|
|
@@ -28,11 +29,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
28
29
|
type: Boolean,
|
|
29
30
|
default: () => (0, _ui.getConfig)().split.padding
|
|
30
31
|
},
|
|
32
|
+
items: Array,
|
|
31
33
|
itemConfig: Object,
|
|
32
34
|
barConfig: Object,
|
|
33
35
|
actionConfig: Object
|
|
34
36
|
},
|
|
35
|
-
emits: ['action-dblclick', 'action-click', 'resize-start', 'resize-drag', 'resize-end'],
|
|
37
|
+
emits: ['action-dblclick', 'action-click', 'toggle-expand', 'resize-start', 'resize-drag', 'resize-end'],
|
|
36
38
|
setup(props, context) {
|
|
37
39
|
const {
|
|
38
40
|
emit,
|
|
@@ -41,7 +43,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
41
43
|
const xID = _xeUtils.default.uniqueId();
|
|
42
44
|
const refElem = (0, _vue.ref)();
|
|
43
45
|
const reactData = (0, _vue.reactive)({
|
|
44
|
-
staticItems: []
|
|
46
|
+
staticItems: [],
|
|
47
|
+
itemList: []
|
|
45
48
|
});
|
|
46
49
|
const internalData = {};
|
|
47
50
|
const computeItemOpts = (0, _vue.computed)(() => {
|
|
@@ -142,9 +145,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
142
145
|
};
|
|
143
146
|
const reset = () => {
|
|
144
147
|
const {
|
|
145
|
-
|
|
148
|
+
itemList
|
|
146
149
|
} = reactData;
|
|
147
|
-
|
|
150
|
+
itemList.forEach(item => {
|
|
148
151
|
item.isExpand = true;
|
|
149
152
|
item.isVisible = true;
|
|
150
153
|
item.foldHeight = 0;
|
|
@@ -154,13 +157,52 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
154
157
|
});
|
|
155
158
|
return (0, _vue.nextTick)();
|
|
156
159
|
};
|
|
160
|
+
const handleLoadItem = (list, isReset) => {
|
|
161
|
+
const {
|
|
162
|
+
staticItems
|
|
163
|
+
} = reactData;
|
|
164
|
+
const itemDef = {
|
|
165
|
+
isVisible: true,
|
|
166
|
+
isExpand: true,
|
|
167
|
+
renderWidth: 0,
|
|
168
|
+
resizeWidth: 0,
|
|
169
|
+
foldWidth: 0,
|
|
170
|
+
renderHeight: 0,
|
|
171
|
+
resizeHeight: 0,
|
|
172
|
+
foldHeight: 0
|
|
173
|
+
};
|
|
174
|
+
reactData.itemList = list.map(item => {
|
|
175
|
+
if (item.slots) {
|
|
176
|
+
_xeUtils.default.each(item.slots, func => {
|
|
177
|
+
if (!_xeUtils.default.isFunction(func)) {
|
|
178
|
+
if (!slots[func]) {
|
|
179
|
+
(0, _log.errLog)('vxe.error.notSlot', [func]);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
});
|
|
183
|
+
}
|
|
184
|
+
return Object.assign({}, isReset ? null : itemDef, item, isReset ? itemDef : null, {
|
|
185
|
+
id: _xeUtils.default.uniqueId()
|
|
186
|
+
});
|
|
187
|
+
});
|
|
188
|
+
if (staticItems.length) {
|
|
189
|
+
(0, _log.errLog)('vxe.error.errConflicts', ['<vxe-split-item ...>', 'items']);
|
|
190
|
+
}
|
|
191
|
+
return recalculate();
|
|
192
|
+
};
|
|
193
|
+
const loadItem = list => {
|
|
194
|
+
return handleLoadItem(list || [], false);
|
|
195
|
+
};
|
|
196
|
+
const reloadItem = list => {
|
|
197
|
+
return handleLoadItem(list || [], true);
|
|
198
|
+
};
|
|
157
199
|
const recalculate = () => {
|
|
158
200
|
return (0, _vue.nextTick)().then(() => {
|
|
159
201
|
const {
|
|
160
202
|
vertical
|
|
161
203
|
} = props;
|
|
162
204
|
const {
|
|
163
|
-
|
|
205
|
+
itemList
|
|
164
206
|
} = reactData;
|
|
165
207
|
const el = refElem.value;
|
|
166
208
|
if (!el) {
|
|
@@ -177,7 +219,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
177
219
|
const residueItems = [];
|
|
178
220
|
if (vertical) {
|
|
179
221
|
let countHeight = 0;
|
|
180
|
-
|
|
222
|
+
itemList.forEach(item => {
|
|
181
223
|
const {
|
|
182
224
|
height
|
|
183
225
|
} = item;
|
|
@@ -202,7 +244,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
202
244
|
}
|
|
203
245
|
} else {
|
|
204
246
|
let countWidth = 0;
|
|
205
|
-
|
|
247
|
+
itemList.forEach(item => {
|
|
206
248
|
const {
|
|
207
249
|
width
|
|
208
250
|
} = item;
|
|
@@ -234,7 +276,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
234
276
|
vertical
|
|
235
277
|
} = props;
|
|
236
278
|
const {
|
|
237
|
-
|
|
279
|
+
itemList
|
|
238
280
|
} = reactData;
|
|
239
281
|
const barEl = evnt.currentTarget;
|
|
240
282
|
const handleEl = barEl.parentElement;
|
|
@@ -243,8 +285,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
243
285
|
return;
|
|
244
286
|
}
|
|
245
287
|
const itemId = handleEl.getAttribute('itemid');
|
|
246
|
-
const itemIndex = _xeUtils.default.findIndexOf(
|
|
247
|
-
const item =
|
|
288
|
+
const itemIndex = _xeUtils.default.findIndexOf(itemList, item => item.id === itemId);
|
|
289
|
+
const item = itemList[itemIndex];
|
|
248
290
|
if (!item) {
|
|
249
291
|
return;
|
|
250
292
|
}
|
|
@@ -255,7 +297,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
255
297
|
const itemOpts = computeItemOpts.value;
|
|
256
298
|
const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
|
|
257
299
|
const allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
|
|
258
|
-
const targetItem =
|
|
300
|
+
const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
|
|
259
301
|
const targetItemEl = targetItem ? el.querySelector(`.vxe-split-item[itemid="${targetItem.id}"]`) : null;
|
|
260
302
|
const currItemEl = item ? el.querySelector(`.vxe-split-item[itemid="${item.id}"]`) : null;
|
|
261
303
|
const targetWidth = targetItemEl ? targetItemEl.clientWidth : 0;
|
|
@@ -369,15 +411,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
369
411
|
vertical
|
|
370
412
|
} = props;
|
|
371
413
|
const {
|
|
372
|
-
|
|
414
|
+
itemList
|
|
373
415
|
} = reactData;
|
|
374
416
|
const isFoldNext = computeIsFoldNext.value;
|
|
375
417
|
const btnEl = evnt.currentTarget;
|
|
376
418
|
const handleEl = btnEl.parentElement;
|
|
377
419
|
const itemId = handleEl.getAttribute('itemid');
|
|
378
|
-
const itemIndex = _xeUtils.default.findIndexOf(
|
|
379
|
-
const item =
|
|
380
|
-
const targetItem =
|
|
420
|
+
const itemIndex = _xeUtils.default.findIndexOf(itemList, item => item.id === itemId);
|
|
421
|
+
const item = itemList[itemIndex];
|
|
422
|
+
const targetItem = itemList[itemIndex + (isFoldNext ? 1 : -1)];
|
|
381
423
|
if (item) {
|
|
382
424
|
const {
|
|
383
425
|
showAction,
|
|
@@ -401,7 +443,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
401
443
|
item.foldWidth = isExpand ? (targetItem.resizeWidth || targetItem.renderWidth) + (item.resizeWidth || item.renderWidth) : 0;
|
|
402
444
|
}
|
|
403
445
|
}
|
|
404
|
-
dispatchEvent(
|
|
446
|
+
dispatchEvent('toggle-expand', {
|
|
405
447
|
item,
|
|
406
448
|
name: item.name,
|
|
407
449
|
targetItem,
|
|
@@ -412,13 +454,51 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
412
454
|
}
|
|
413
455
|
}
|
|
414
456
|
};
|
|
457
|
+
const handleActionDblclickEvent = evnt => {
|
|
458
|
+
const {
|
|
459
|
+
itemList
|
|
460
|
+
} = reactData;
|
|
461
|
+
const actionOpts = computeActionOpts.value;
|
|
462
|
+
const btnEl = evnt.currentTarget;
|
|
463
|
+
const handleEl = btnEl.parentElement;
|
|
464
|
+
const itemId = handleEl.getAttribute('itemid');
|
|
465
|
+
const itemIndex = _xeUtils.default.findIndexOf(itemList, item => item.id === itemId);
|
|
466
|
+
const item = itemList[itemIndex];
|
|
467
|
+
if (actionOpts.trigger === 'dblclick') {
|
|
468
|
+
handleItemActionEvent(evnt);
|
|
469
|
+
}
|
|
470
|
+
dispatchEvent('action-dblclick', {
|
|
471
|
+
item,
|
|
472
|
+
name: item ? item.name : ''
|
|
473
|
+
}, evnt);
|
|
474
|
+
};
|
|
475
|
+
const handleActionClickEvent = evnt => {
|
|
476
|
+
const {
|
|
477
|
+
itemList
|
|
478
|
+
} = reactData;
|
|
479
|
+
const actionOpts = computeActionOpts.value;
|
|
480
|
+
const btnEl = evnt.currentTarget;
|
|
481
|
+
const handleEl = btnEl.parentElement;
|
|
482
|
+
const itemId = handleEl.getAttribute('itemid');
|
|
483
|
+
const itemIndex = _xeUtils.default.findIndexOf(itemList, item => item.id === itemId);
|
|
484
|
+
const item = itemList[itemIndex];
|
|
485
|
+
if (actionOpts.trigger !== 'dblclick') {
|
|
486
|
+
handleItemActionEvent(evnt);
|
|
487
|
+
}
|
|
488
|
+
dispatchEvent('action-click', {
|
|
489
|
+
item,
|
|
490
|
+
name: item ? item.name : ''
|
|
491
|
+
}, evnt);
|
|
492
|
+
};
|
|
415
493
|
const handleGlobalResizeEvent = () => {
|
|
416
494
|
recalculate();
|
|
417
495
|
};
|
|
418
496
|
const splitMethods = {
|
|
419
497
|
dispatchEvent,
|
|
420
498
|
recalculate,
|
|
421
|
-
reset
|
|
499
|
+
reset,
|
|
500
|
+
loadItem,
|
|
501
|
+
reloadItem
|
|
422
502
|
};
|
|
423
503
|
const splitPrivateMethods = {};
|
|
424
504
|
Object.assign($xeSplit, splitMethods, splitPrivateMethods);
|
|
@@ -431,12 +511,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
431
511
|
isExpand,
|
|
432
512
|
showAction
|
|
433
513
|
} = item;
|
|
434
|
-
const btnOns = {};
|
|
435
|
-
if (actionOpts.trigger === 'dblclick') {
|
|
436
|
-
btnOns.onDblclick = handleItemActionEvent;
|
|
437
|
-
} else {
|
|
438
|
-
btnOns.onClick = handleItemActionEvent;
|
|
439
|
-
}
|
|
440
514
|
return (0, _vue.h)('div', {
|
|
441
515
|
itemid: id,
|
|
442
516
|
class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
|
|
@@ -444,9 +518,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
444
518
|
class: 'vxe-split-item-handle-bar',
|
|
445
519
|
style: barStyle,
|
|
446
520
|
onMousedown: dragEvent
|
|
447
|
-
}), showAction ? (0, _vue.h)('span',
|
|
448
|
-
class: 'vxe-split-item-action-btn'
|
|
449
|
-
|
|
521
|
+
}), showAction ? (0, _vue.h)('span', {
|
|
522
|
+
class: 'vxe-split-item-action-btn',
|
|
523
|
+
onDblclick: handleActionDblclickEvent,
|
|
524
|
+
onClick: handleActionClickEvent
|
|
525
|
+
}, [(0, _vue.h)('i', {
|
|
450
526
|
class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
|
|
451
527
|
})]) : (0, _ui.renderEmptyElement)($xeSplit)]);
|
|
452
528
|
};
|
|
@@ -457,13 +533,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
457
533
|
vertical
|
|
458
534
|
} = props;
|
|
459
535
|
const {
|
|
460
|
-
|
|
536
|
+
itemList
|
|
461
537
|
} = reactData;
|
|
462
538
|
const isFoldNext = computeIsFoldNext.value;
|
|
463
539
|
const itemVNs = [];
|
|
464
|
-
|
|
540
|
+
itemList.forEach((item, index) => {
|
|
465
541
|
const {
|
|
466
542
|
id,
|
|
543
|
+
name,
|
|
467
544
|
slots,
|
|
468
545
|
renderHeight,
|
|
469
546
|
resizeHeight,
|
|
@@ -505,7 +582,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
505
582
|
class: 'vxe-split-item--wrapper'
|
|
506
583
|
}, [(0, _vue.h)('div', {
|
|
507
584
|
class: 'vxe-split-item--inner'
|
|
508
|
-
}, defaultSlot ? callSlot(defaultSlot, {
|
|
585
|
+
}, defaultSlot ? callSlot(defaultSlot, {
|
|
586
|
+
name,
|
|
587
|
+
isVisible,
|
|
588
|
+
isExpand
|
|
589
|
+
}) : [])]), isFoldNext && index < itemList.length - 1 ? renderHandleBar(item) : (0, _ui.renderEmptyElement)($xeSplit)]));
|
|
509
590
|
});
|
|
510
591
|
return (0, _vue.h)('div', {
|
|
511
592
|
class: 'vxe-split-wrapper'
|
|
@@ -533,7 +614,21 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
533
614
|
class: 'vxe-split-slots'
|
|
534
615
|
}, defaultSlot ? defaultSlot({}) : []), renderItems()]);
|
|
535
616
|
};
|
|
536
|
-
(0, _vue.
|
|
617
|
+
const itemFlag = (0, _vue.ref)(0);
|
|
618
|
+
(0, _vue.watch)(() => props.items ? props.items.length : -1, () => {
|
|
619
|
+
itemFlag.value++;
|
|
620
|
+
});
|
|
621
|
+
(0, _vue.watch)(() => props.items, () => {
|
|
622
|
+
itemFlag.value++;
|
|
623
|
+
});
|
|
624
|
+
(0, _vue.watch)(itemFlag, () => {
|
|
625
|
+
loadItem(props.items || []);
|
|
626
|
+
});
|
|
627
|
+
(0, _vue.watch)(() => reactData.staticItems, val => {
|
|
628
|
+
if (props.items && props.items.length) {
|
|
629
|
+
(0, _log.errLog)('vxe.error.errConflicts', ['<vxe-split-item ...>', 'items']);
|
|
630
|
+
}
|
|
631
|
+
reactData.itemList = val;
|
|
537
632
|
recalculate();
|
|
538
633
|
});
|
|
539
634
|
(0, _vue.onMounted)(() => {
|
|
@@ -548,6 +643,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
548
643
|
(0, _vue.onActivated)(() => {
|
|
549
644
|
recalculate();
|
|
550
645
|
});
|
|
646
|
+
if (props.items) {
|
|
647
|
+
loadItem(props.items);
|
|
648
|
+
}
|
|
551
649
|
(0, _vue.provide)('$xeSplit', $xeSplit);
|
|
552
650
|
$xeSplit.renderVN = renderVN;
|
|
553
651
|
return $xeSplit;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplit",props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().split.vertical},border:{type:Boolean,default:()=>(0,_ui.getConfig)().split.border},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().split.padding},itemConfig:Object,barConfig:Object,actionConfig:Object},emits:["action-dblclick","action-click","resize-start","resize-drag","resize-end"],setup(z,e){const{emit:s,slots:l}=e;var t=_xeUtils.default.uniqueId();const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_dom=require("../../ui/src/dom"),_utils=require("../../ui/src/utils"),_log=require("../../ui/src/log"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplit",props:{width:[Number,String],height:[Number,String],vertical:{type:Boolean,default:()=>(0,_ui.getConfig)().split.vertical},border:{type:Boolean,default:()=>(0,_ui.getConfig)().split.border},padding:{type:Boolean,default:()=>(0,_ui.getConfig)().split.padding},items:Array,itemConfig:Object,barConfig:Object,actionConfig:Object},emits:["action-dblclick","action-click","toggle-expand","resize-start","resize-drag","resize-end"],setup(z,e){const{emit:s,slots:l}=e;var t=_xeUtils.default.uniqueId();const H=(0,_vue.ref)(),C=(0,_vue.reactive)({staticItems:[],itemList:[]});const W=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.itemConfig,z.itemConfig)),r=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.barConfig,z.barConfig)),a=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.actionConfig,z.actionConfig)),E=(0,_vue.computed)(()=>{return"next"===a.value.direction}),o=(0,_vue.computed)(()=>{var{width:e,height:t}=r.value,i={};return t&&(i.height=(0,_dom.toCssUnit)(t)),e&&(i.width=(0,_dom.toCssUnit)(e)),i}),i={computeItemOpts:W,computeBarOpts:r,computeActionOpts:a,computeIsFoldNext:E},n={refElem:H},b={xID:t,props:z,context:e,reactData:C,internalData:{},getRefMaps:()=>n,getComputeMaps:()=>i},U=(e,t,i)=>{s(e,(0,_ui.createEvent)(i,{$split:b},t))},I=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=l[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[];const d=(e,t)=>{var i=C["staticItems"];const s={isVisible:!0,isExpand:!0,renderWidth:0,resizeWidth:0,foldWidth:0,renderHeight:0,resizeHeight:0,foldHeight:0};return C.itemList=e.map(e=>(e.slots&&_xeUtils.default.each(e.slots,e=>{_xeUtils.default.isFunction(e)||l[e]||(0,_log.errLog)("vxe.error.notSlot",[e])}),Object.assign({},t?null:s,e,t?s:null,{id:_xeUtils.default.uniqueId()}))),i.length&&(0,_log.errLog)("vxe.error.errConflicts",["<vxe-split-item ...>","items"]),N()},u=e=>d(e||[],!1);const N=()=>(0,_vue.nextTick)().then(()=>{var e=z["vertical"],t=C["itemList"],i=H.value;if(i){const r=i.clientWidth,l=i.clientHeight;if(r&&l){i=W.value;const n=_xeUtils.default.toNumber(i.minWidth),a=_xeUtils.default.toNumber(i.minHeight),o=[];if(e){let s=0;if(t.forEach(e=>{var t=e["height"];let i=0;t?(i=(0,_dom.isScale)(t)?l*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderHeight=i):o.push(e),s+=i}),o.length){const d=(l-s)/o.length;o.forEach(e=>{e.renderHeight=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minHeight,a)),d)})}}else{let s=0;if(t.forEach(e=>{var t=e["width"];let i=0;t?(i=(0,_dom.isScale)(t)?r*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderWidth=i):o.push(e),s+=i}),o.length){const u=(r-s)/o.length;o.forEach(e=>{e.renderWidth=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minWidth,n)),u)})}}}}}),m=e=>{e.preventDefault();const s=z["vertical"];var t=C["itemList"],i=e.currentTarget.parentElement;const r=H.value;if(r){const a=i.getAttribute("itemid");i=_xeUtils.default.findIndexOf(t,e=>e.id===a);const o=t[i];if(o&&o.isExpand){const d=E.value;var l=W.value,n=_xeUtils.default.toNumber(l.minWidth),l=_xeUtils.default.toNumber(l.minHeight);const u=t[i+(d?1:-1)];t=u?r.querySelector(`.vxe-split-item[itemid="${u.id}"]`):null,i=o?r.querySelector(`.vxe-split-item[itemid="${o.id}"]`):null;const m=t?t.clientWidth:0,c=i?i.clientWidth:0,h=t?t.clientHeight:0,g=i?i.clientHeight:0,f=_xeUtils.default.toNumber(u?(0,_utils.getGlobalDefaultConfig)(u.minWidth,n):n),v=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minWidth,n)),_=_xeUtils.default.toNumber(u?(0,_utils.getGlobalDefaultConfig)(u.minHeight,l):l),p=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minHeight,l)),x=e.clientX,b=e.clientY;(0,_dom.addClass)(r,"is--drag"),document.onmousemove=e=>{var t,i;e.preventDefault(),s?0<(t=d?b-e.clientY:e.clientY-b)?u&&g-t>=p&&(i=g-t,u.resizeHeight=h+t,o.resizeHeight=i,U("resize-drag",{item:o,name:o.name,offsetHeight:t,resizeHeight:i,offsetWidth:0,resizeWidth:0},e)):u&&h+t>=_&&(i=g-t,u.resizeHeight=h+t,o.resizeHeight=i,U("resize-drag",{item:o,name:o.name,offsetHeight:t,resizeHeight:i,offsetWidth:0,resizeWidth:0},e)):0<(t=d?x-e.clientX:e.clientX-x)?u&&c-t>=v&&(i=c-t,u.resizeWidth=m+t,o.resizeWidth=i,U("resize-drag",{item:o,name:o.name,offsetHeight:0,resizeHeight:0,offsetWidth:t,resizeWidth:i},e)):u&&m+t>=f&&(i=c-t,u.resizeWidth=m+t,o.resizeWidth=i,U("resize-drag",{item:o,name:o.name,offsetHeight:0,resizeHeight:0,offsetWidth:t,resizeWidth:i},e))},document.onmouseup=e=>{document.onmousemove=null,(document.onmouseup=null,_dom.removeClass)(r,"is--drag"),U("resize-end",{item:o,name:o.name,resizeHeight:o.resizeHeight,resizeWidth:o.resizeWidth},e),N()},U("resize-start",{item:o,name:o.name},e)}}},c=e=>{if(H.value){var t=z["vertical"],i=C["itemList"],s=E.value;const n=e.currentTarget.parentElement.getAttribute("itemid");var r=_xeUtils.default.findIndexOf(i,e=>e.id===n),l=i[r],i=i[r+(s?1:-1)];l&&({showAction:r,isExpand:s}=l,r)&&(t?i&&(i.isVisible=!s,i.foldHeight=0,l.isExpand=!s,l.isVisible=!0,l.foldHeight=s?(i.resizeHeight||i.renderHeight)+(l.resizeHeight||l.renderHeight):0):i&&(i.isVisible=!s,i.foldWidth=0,l.isExpand=!s,l.isVisible=!0,l.foldWidth=s?(i.resizeWidth||i.renderWidth)+(l.resizeWidth||l.renderWidth):0),U("toggle-expand",{item:l,name:l.name,targetItem:i,targetName:i?i.name:"",expanded:l.isExpand},e),N())}},h=e=>{var t=C["itemList"],i=a.value;const s=e.currentTarget.parentElement.getAttribute("itemid");t=t[_xeUtils.default.findIndexOf(t,e=>e.id===s)];"dblclick"===i.trigger&&c(e),U("action-dblclick",{item:t,name:t?t.name:""},e)},g=e=>{var t=C["itemList"],i=a.value;const s=e.currentTarget.parentElement.getAttribute("itemid");t=t[_xeUtils.default.findIndexOf(t,e=>e.id===s)];"dblclick"!==i.trigger&&c(e),U("action-click",{item:t,name:t?t.name:""},e)},f=()=>{N()};t={dispatchEvent:U,recalculate:N,reset:()=>{var e=C["itemList"];return e.forEach(e=>{e.isExpand=!0,e.isVisible=!0,e.foldHeight=0,e.foldWidth=0,e.resizeHeight=0,e.resizeWidth=0}),(0,_vue.nextTick)()},loadItem:u,reloadItem:e=>d(e||[],!0)};Object.assign(b,t,{});const O=e=>{var t=o.value,i=a.value,s=E.value,{id:r,isExpand:l,showAction:n}=e;return(0,_vue.h)("div",{itemid:r,class:["vxe-split-item-handle",s?"to--next":"to--prev"]},[(0,_vue.h)("div",{class:"vxe-split-item-handle-bar",style:t,onMousedown:m}),n?(0,_vue.h)("span",{class:"vxe-split-item-action-btn",onDblclick:h,onClick:g},[(0,_vue.h)("i",{class:(l?i.openIcon:i.closeIcon)||(e=>{var t=z["vertical"],{showAction:e,isExpand:i}=e,s=E.value,r="SPLIT_TOP_ACTION",l="SPLIT_BOTTOM_ACTION",n="SPLIT_LEFT_ACTION",a="SPLIT_RIGHT_ACTION";if(e){let e="";if(e=s?t?i?l:r:i?a:n:t?i?r:l:i?n:a)return(0,_ui.getIcon)()[e]}return""})(e)})]):(0,_ui.renderEmptyElement)(b)])};const v=(0,_vue.ref)(0);return(0,_vue.watch)(()=>z.items?z.items.length:-1,()=>{v.value++}),(0,_vue.watch)(()=>z.items,()=>{v.value++}),(0,_vue.watch)(v,()=>{u(z.items||[])}),(0,_vue.watch)(()=>C.staticItems,e=>{z.items&&z.items.length&&(0,_log.errLog)("vxe.error.errConflicts",["<vxe-split-item ...>","items"]),C.itemList=e,N()}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{N()}),_ui.globalEvents.on(b,"resize",f)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(b,"resize")}),(0,_vue.onActivated)(()=>{N()}),z.items&&u(z.items),(0,_vue.provide)("$xeSplit",b),b.renderVN=()=>{var{vertical:e,width:t,height:i}=z,s=l.default,r={};return i&&(r.height=(0,_dom.toCssUnit)(i)),t&&(r.width=(0,_dom.toCssUnit)(t)),(0,_vue.h)("div",{ref:H,class:["vxe-split",e?"is--vertical":"is--horizontal"],style:r},[(0,_vue.h)("div",{class:"vxe-split-slots"},s?s({}):[]),(()=>{const{border:g,padding:f,vertical:v}=z,_=C["itemList"],p=E.value,x=[];return _.forEach((e,t)=>{var{id:i,name:s,slots:r,renderHeight:l,resizeHeight:n,foldHeight:a,renderWidth:o,resizeWidth:d,foldWidth:u,isVisible:m,isExpand:c}=e,r=r?r.default:null,h={},u=m?u||d||o:0,d=m?a||n||l:0;v?d&&(h.height=(0,_dom.toCssUnit)(d)):u&&(h.width=(0,_dom.toCssUnit)(u)),x.push((0,_vue.h)("div",{itemid:i,class:["vxe-split-item",v?"is--vertical":"is--horizontal",{"is--padding":f,"is--border":g,"is--height":d,"is--width":u,"is--fill":m&&!d&&!u,"is--handle":0<t,"is--expand":c,"is--hidden":!m}],style:h},[t&&!p?O(e):(0,_ui.renderEmptyElement)(b),(0,_vue.h)("div",{itemid:i,class:"vxe-split-item--wrapper"},[(0,_vue.h)("div",{class:"vxe-split-item--inner"},r?I(r,{name:s,isVisible:m,isExpand:c}):[])]),p&&t<_.length-1?O(e):(0,_ui.renderEmptyElement)(b)]))}),(0,_vue.h)("div",{class:"vxe-split-wrapper"},x)})()])},b},render(){return this.renderVN()}});
|