vxe-pc-ui 4.5.1 → 4.5.3
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/README.md +2 -0
- package/es/icon/style.css +1 -1
- package/es/list/src/list.js +3 -2
- package/es/print/src/util.js +2 -1
- package/es/split/src/split-item.js +16 -0
- package/es/split/src/split.js +220 -53
- package/es/split/style.css +82 -13
- package/es/split/style.min.css +1 -1
- package/es/style.css +1 -1
- package/es/style.min.css +1 -1
- package/es/ui/index.js +7 -2
- package/es/ui/src/dom.js +0 -1
- package/es/ui/src/log.js +1 -1
- package/es/vxe-split/style.css +82 -13
- package/es/vxe-split/style.min.css +1 -1
- package/lib/icon/style/style.css +1 -1
- package/lib/icon/style/style.min.css +1 -1
- package/lib/index.umd.js +294 -53
- package/lib/index.umd.min.js +1 -1
- package/lib/list/src/list.js +2 -1
- package/lib/list/src/list.min.js +1 -1
- package/lib/print/src/util.js +2 -1
- package/lib/print/src/util.min.js +1 -1
- package/lib/split/src/split-item.js +16 -0
- package/lib/split/src/split-item.min.js +1 -1
- package/lib/split/src/split.js +265 -47
- package/lib/split/src/split.min.js +1 -1
- package/lib/split/style/style.css +82 -13
- package/lib/split/style/style.min.css +1 -1
- package/lib/style.css +1 -1
- package/lib/style.min.css +1 -1
- package/lib/ui/index.js +7 -2
- package/lib/ui/index.min.js +1 -1
- package/lib/ui/src/dom.js +0 -2
- package/lib/ui/src/dom.min.js +1 -1
- package/lib/ui/src/log.js +1 -1
- package/lib/ui/src/log.min.js +1 -1
- package/lib/vxe-split/style/style.css +82 -13
- package/lib/vxe-split/style/style.min.css +1 -1
- package/package.json +1 -1
- package/packages/list/src/list.ts +4 -2
- package/packages/print/src/util.ts +3 -1
- package/packages/split/src/split-item.ts +18 -0
- package/packages/split/src/split.ts +230 -52
- package/packages/ui/index.ts +7 -1
- package/packages/ui/src/dom.ts +0 -2
- package/styles/components/split.scss +105 -12
- package/types/components/split-item.d.ts +5 -1
- package/types/components/split.d.ts +88 -1
- package/types/ui/global-icon.d.ts +6 -0
- /package/es/icon/{iconfont.1743051559265.ttf → iconfont.1743080348682.ttf} +0 -0
- /package/es/icon/{iconfont.1743051559265.woff → iconfont.1743080348682.woff} +0 -0
- /package/es/icon/{iconfont.1743051559265.woff2 → iconfont.1743080348682.woff2} +0 -0
- /package/es/{iconfont.1743051559265.ttf → iconfont.1743080348682.ttf} +0 -0
- /package/es/{iconfont.1743051559265.woff → iconfont.1743080348682.woff} +0 -0
- /package/es/{iconfont.1743051559265.woff2 → iconfont.1743080348682.woff2} +0 -0
- /package/lib/icon/style/{iconfont.1743051559265.ttf → iconfont.1743080348682.ttf} +0 -0
- /package/lib/icon/style/{iconfont.1743051559265.woff → iconfont.1743080348682.woff} +0 -0
- /package/lib/icon/style/{iconfont.1743051559265.woff2 → iconfont.1743080348682.woff2} +0 -0
- /package/lib/{iconfont.1743051559265.ttf → iconfont.1743080348682.ttf} +0 -0
- /package/lib/{iconfont.1743051559265.woff → iconfont.1743080348682.woff} +0 -0
- /package/lib/{iconfont.1743051559265.woff2 → iconfont.1743080348682.woff2} +0 -0
package/lib/list/src/list.js
CHANGED
|
@@ -37,6 +37,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
37
37
|
emit
|
|
38
38
|
} = context;
|
|
39
39
|
const xID = _xeUtils.default.uniqueId();
|
|
40
|
+
const browseObj = _xeUtils.default.browse();
|
|
40
41
|
const {
|
|
41
42
|
computeSize
|
|
42
43
|
} = (0, _ui.useSize)(props);
|
|
@@ -181,7 +182,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
181
182
|
if (scrollYLoad) {
|
|
182
183
|
const scrollBodyElem = refVirtualWrapper.value;
|
|
183
184
|
const visibleYSize = Math.max(8, Math.ceil(scrollBodyElem.clientHeight / rowHeight));
|
|
184
|
-
const offsetYSize = sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) :
|
|
185
|
+
const offsetYSize = sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : browseObj.edge ? 10 : 0;
|
|
185
186
|
scrollYStore.offsetSize = offsetYSize;
|
|
186
187
|
scrollYStore.visibleSize = visibleYSize;
|
|
187
188
|
scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
|
package/lib/list/src/list.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeList",props:{data:Array,height:[Number,String],maxHeight:[Number,String],loading:Boolean,className:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().list.size||(0,_ui.getConfig)().size},autoResize:{type:Boolean,default:()=>(0,_ui.getConfig)().list.autoResize},syncResize:[Boolean,String,Number],virtualYConfig:Object,scrollY:Object},emits:["scroll"],setup(u,e){const{slots:n,emit:r}=e;var t=_xeUtils.default.uniqueId();const c=(0,_ui.useSize)(u)["computeSize"],d=(0,_vue.reactive)({scrollYLoad:!1,bodyHeight:0,customHeight:0,customMaxHeight:0,parentHeight:0,topSpaceHeight:0,items:[]}),s={resizeObserver:void 0,fullData:[],lastScrollLeft:0,lastScrollTop:0,scrollYStore:{startIndex:0,endIndex:0,visibleSize:0,offsetSize:0,rowHeight:0}},v=(0,_vue.ref)(),g=(0,_vue.ref)(),h=(0,_vue.ref)(),l={refElem:v},f={xID:t,props:u,context:e,reactData:d,internalData:s,getRefMaps:()=>l},
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_loading=_interopRequireDefault(require("../../loading/src/loading"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeList",props:{data:Array,height:[Number,String],maxHeight:[Number,String],loading:Boolean,className:[String,Function],size:{type:String,default:()=>(0,_ui.getConfig)().list.size||(0,_ui.getConfig)().size},autoResize:{type:Boolean,default:()=>(0,_ui.getConfig)().list.autoResize},syncResize:[Boolean,String,Number],virtualYConfig:Object,scrollY:Object},emits:["scroll"],setup(u,e){const{slots:n,emit:r}=e;var t=_xeUtils.default.uniqueId();const o=_xeUtils.default.browse(),c=(0,_ui.useSize)(u)["computeSize"],d=(0,_vue.reactive)({scrollYLoad:!1,bodyHeight:0,customHeight:0,customMaxHeight:0,parentHeight:0,topSpaceHeight:0,items:[]}),s={resizeObserver:void 0,fullData:[],lastScrollLeft:0,lastScrollTop:0,scrollYStore:{startIndex:0,endIndex:0,visibleSize:0,offsetSize:0,rowHeight:0}},v=(0,_vue.ref)(),g=(0,_vue.ref)(),h=(0,_vue.ref)(),l={refElem:v},f={xID:t,props:u,context:e,reactData:d,internalData:s,getRefMaps:()=>l},_=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().list.virtualYConfig||(0,_ui.getConfig)().list.scrollY,u.virtualYConfig||u.scrollY)),x=(0,_vue.computed)(()=>{var{height:e,maxHeight:t}=u,{customHeight:l,customMaxHeight:r}=d,i={};return e?i.height=l+"px":t&&(i.height="auto",i.maxHeight=r+"px"),i}),a=(e,t,l)=>{r(e,(0,_ui.createEvent)(l,{$list:f},t))},i=e=>{var t=d["parentHeight"],e=u[e];let l=0;return l=e?"100%"===e||"auto"===e?t:(l=(0,_dom.isScale)(e)?Math.floor((_xeUtils.default.toInteger(e)||1)/100*t):_xeUtils.default.toNumber(e),Math.max(40,l)):l},m=()=>{var e=d["scrollYLoad"],{scrollYStore:t,fullData:l}=s;d.bodyHeight=e?l.length*t.rowHeight:0,d.topSpaceHeight=e?Math.max(t.startIndex*t.rowHeight,0):0},p=()=>{var e=d["scrollYLoad"],{fullData:t,scrollYStore:l}=s;return d.items=e?t.slice(l.startIndex,l.endIndex):t.slice(0),(0,_vue.nextTick)()},S=()=>{p(),m()},b=()=>(0,_vue.nextTick)().then(()=>{var e=d["scrollYLoad"],t=s["scrollYStore"],l=h.value,r=_.value;let i=0,a;(a=l?(a=r.sItem?l.querySelector(r.sItem):a)||l.children[0]:a)&&(i=a.offsetHeight),i=Math.max(12,i),t.rowHeight=i,(e?(l=g.value,e=Math.max(8,Math.ceil(l.clientHeight/i)),l=r.oSize?_xeUtils.default.toNumber(r.oSize):o.edge?10:0,t.offsetSize=l,t.visibleSize=e,t.endIndex=Math.max(t.startIndex+e+l,t.endIndex),S):m)()}),H=()=>{var e=g.value;return e&&(e.scrollTop=0),(0,_vue.nextTick)()},z=(e,t)=>{var l=g.value;return _xeUtils.default.isNumber(e)&&(l.scrollLeft=e),_xeUtils.default.isNumber(t)&&(l.scrollTop=t),d.scrollYLoad?new Promise(e=>{setTimeout(()=>{(0,_vue.nextTick)(()=>{e()})},50)}):(0,_vue.nextTick)()},T=()=>{const{lastScrollLeft:e,lastScrollTop:t}=s;return H().then(()=>{if(e||t)return s.lastScrollLeft=0,s.lastScrollTop=0,z(e,t)})},Y=()=>{var e=v.value;if(e){var t=e.parentElement;if(d.parentHeight=t?t.clientHeight:0,d.customHeight=i("height"),d.customMaxHeight=i("maxHeight"),e.clientWidth&&e.clientHeight)return b()}return(0,_vue.nextTick)()},I=e=>{var t=s["scrollYStore"],{startIndex:l,endIndex:r,visibleSize:i,offsetSize:a,rowHeight:o}=t,e=e.target.scrollTop,e=Math.floor(e/o),o=Math.max(0,e-1-a),a=e+i+a;!(e<=l||r-i-1<=e)||l===o&&r===a||(t.startIndex=o,t.endIndex=a,S())},L=e=>{var t=e.target,l=t.scrollTop,t=t.scrollLeft,r=t!==s.lastScrollLeft,i=l!==s.lastScrollTop;s.lastScrollTop=l,s.lastScrollLeft=t,d.scrollYLoad&&I(e),a("scroll",{scrollLeft:t,scrollTop:l,isX:r,isY:i},e)},M=e=>{var t=s["scrollYStore"],l=_.value,e=e||[];return Object.assign(t,{startIndex:0,endIndex:1,visibleSize:0}),s.fullData=e,d.scrollYLoad=!!l.enabled&&-1<l.gt&&(0===l.gt||l.gt<=e.length),p(),b().then(()=>{T()})};t={dispatchEvent:a,loadData:M,reloadData(e){return H(),M(e)},recalculate:Y,scrollTo:z,refreshScroll:T,clearScroll:H};Object.assign(f,t);const y=(0,_vue.ref)(0);(0,_vue.watch)(()=>u.data?u.data.length:-1,()=>{y.value++}),(0,_vue.watch)(()=>u.data,()=>{y.value++}),(0,_vue.watch)(y,()=>{M(u.data||[])}),(0,_vue.watch)(()=>u.height,()=>{Y()}),(0,_vue.watch)(()=>u.maxHeight,()=>{Y()}),(0,_vue.watch)(()=>u.syncResize,e=>{e&&(Y(),(0,_vue.nextTick)(()=>setTimeout(()=>Y())))}),(0,_vue.onActivated)(()=>{Y().then(()=>T())}),(0,_vue.nextTick)(()=>{M(u.data||[])}),(0,_vue.onMounted)(()=>{var e,t;Y(),u.autoResize&&(e=v.value,(t=_ui.globalResize.create(()=>Y())).observe(e),e&&t.observe(e.parentElement),s.resizeObserver=t),_ui.globalEvents.on(f,"resize",Y)}),(0,_vue.onUnmounted)(()=>{var e=s["resizeObserver"];e&&e.disconnect(),_ui.globalEvents.off(f,"resize")});return f.renderVN=()=>{var{className:e,loading:t}=u,{bodyHeight:l,topSpaceHeight:r,items:i}=d,a=n.default,o=c.value,s=x.value;return(0,_vue.h)("div",{ref:v,class:["vxe-list",e?_xeUtils.default.isFunction(e)?e({$list:f}):e:"",{["size--"+o]:o,"is--loading":t}]},[(0,_vue.h)("div",{ref:g,class:"vxe-list--virtual-wrapper",style:s,onScroll:L},[(0,_vue.h)("div",{class:"vxe-list--y-space",style:{height:l?l+"px":""}}),(0,_vue.h)("div",{ref:h,class:"vxe-list--body",style:{marginTop:r?r+"px":""}},a?a({items:i,$list:f}):[])]),(0,_vue.h)(_loading.default,{class:"vxe-list--loading",modelValue:t})])},f},render(){return this.renderVN()}});
|
package/lib/print/src/util.js
CHANGED
|
@@ -9,6 +9,7 @@ exports.destroyPageBreak = destroyPageBreak;
|
|
|
9
9
|
exports.printHtml = void 0;
|
|
10
10
|
var _xeUtils = _interopRequireDefault(require("xe-utils"));
|
|
11
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
const browseObj = _xeUtils.default.browse();
|
|
12
13
|
// 打印
|
|
13
14
|
let printFrame;
|
|
14
15
|
// 默认导出或打印的 HTML 样式
|
|
@@ -63,7 +64,7 @@ function handlePrint(opts, printHtml = '') {
|
|
|
63
64
|
printHtml = createHtmlPage(opts, printHtml);
|
|
64
65
|
const blob = getExportBlobByString(printHtml, 'html');
|
|
65
66
|
return new Promise(resolve => {
|
|
66
|
-
if (
|
|
67
|
+
if (browseObj.msie) {
|
|
67
68
|
removeFrame();
|
|
68
69
|
printFrame = createPrintFrame();
|
|
69
70
|
appendPrintFrame();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.assemblePageBreak=assemblePageBreak,exports.createPrintFrame=createPrintFrame,exports.destroyPageBreak=destroyPageBreak,exports.printHtml=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let printFrame;const defaultHtmlStyle='body{margin:0;padding:0;color:#000000;font-size:14px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table:not(.is--print){table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{border-color:#D0D0D0;border-style:solid;border-width:0}.vxe-table.is--print{width:100%}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:.5em .4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table:not(.is--print) .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}';function createPrintFrame(){var e=document.createElement("iframe");return e.className="vxe-table--print-frame",e}function appendPrintFrame(){printFrame.parentNode||document.body.appendChild(printFrame)}function afterPrintEvent(){requestAnimationFrame(removeFrame)}function removeFrame(){if(printFrame){if(printFrame.parentNode){try{printFrame.contentDocument.write("")}catch(e){}printFrame.parentNode.removeChild(printFrame)}printFrame=null}}function getExportBlobByString(e,t){return new Blob([e],{type:`text/${t};charset=utf-8;`})}const printMargin=80;function createHtmlPage(e,t){var r=e["customStyle"];return["<!DOCTYPE html><html>","<head>",'<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',`<title>${e.title}</title>`,e._pageBreaks||e.pageBreaks&&e.pageBreaks.length?'<style media="print">@page {size: auto;margin: 0mm;}</style>':"",`<style>.vxe-print-slots{display: none;}.vxe-print-page-break.align--center{text-align:center;}.vxe-print-page-break.align--left{text-align:left;}.vxe-print-page-break.align--right{text-align:right;}.vxe-print-page-break--header-title{font-size:1.8em;text-align:center;line-height:${printMargin}px;}.vxe-print-page-break{page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow: hidden;}.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;width:${printMargin}px;height:100%;}.vxe-print-page-break--header,.vxe-print-page-break--footer{flex-shrink:0;height:${printMargin}px;width:100%;}.vxe-print-page-break--content{flex-grow: 1;overflow: hidden;}.vxe-print-page-break--footer-page-number{line-height:${printMargin}px;text-align:center;}</style>`,"<style>.vxe-table{white-space:pre;}</style>",`<style>${defaultHtmlStyle}</style>`,r?`<style>${r}</style>`:"","</head>","<body>",""+t,"</body>","</html>"].join("")}function handlePrint(e,r=""){var t=e["beforeMethod"];const a=getExportBlobByString(r=createHtmlPage(e,r=t?t({content:r,html:r,options:e})||"":r),"html");return new Promise(t=>{
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.assemblePageBreak=assemblePageBreak,exports.createPrintFrame=createPrintFrame,exports.destroyPageBreak=destroyPageBreak,exports.printHtml=void 0;var _xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const browseObj=_xeUtils.default.browse();let printFrame;const defaultHtmlStyle='body{margin:0;padding:0;color:#000000;font-size:14px;font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}body *{-webkit-box-sizing:border-box;box-sizing:border-box}.vxe-table{border-collapse:collapse;text-align:left;border-spacing:0}.vxe-table:not(.is--print){table-layout:fixed}.vxe-table,.vxe-table th,.vxe-table td,.vxe-table td{border-color:#D0D0D0;border-style:solid;border-width:0}.vxe-table.is--print{width:100%}.border--default,.border--full,.border--outer{border-top-width:1px}.border--default,.border--full,.border--outer{border-left-width:1px}.border--outer,.border--default th,.border--default td,.border--full th,.border--full td,.border--outer th,.border--inner th,.border--inner td{border-bottom-width:1px}.border--default,.border--outer,.border--full th,.border--full td{border-right-width:1px}.border--default th,.border--full th,.border--outer th{background-color:#f8f8f9}.vxe-table td>div,.vxe-table th>div{padding:.5em .4em}.col--center{text-align:center}.col--right{text-align:right}.vxe-table:not(.is--print) .col--ellipsis>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vxe-table--tree-node{text-align:left}.vxe-table--tree-node-wrapper{position:relative}.vxe-table--tree-icon-wrapper{position:absolute;top:50%;width:1em;height:1em;text-align:center;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.vxe-table--tree-unfold-icon,.vxe-table--tree-fold-icon{position:absolute;width:0;height:0;border-style:solid;border-width:.5em;border-right-color:transparent;border-bottom-color:transparent}.vxe-table--tree-unfold-icon{left:.3em;top:0;border-left-color:#939599;border-top-color:transparent}.vxe-table--tree-fold-icon{left:0;top:.3em;border-left-color:transparent;border-top-color:#939599}.vxe-table--tree-cell{display:block;padding-left:1.5em}.vxe-table input[type="checkbox"]{margin:0}.vxe-table input[type="checkbox"],.vxe-table input[type="radio"],.vxe-table input[type="checkbox"]+span,.vxe-table input[type="radio"]+span{vertical-align:middle;padding-left:0.4em}';function createPrintFrame(){var e=document.createElement("iframe");return e.className="vxe-table--print-frame",e}function appendPrintFrame(){printFrame.parentNode||document.body.appendChild(printFrame)}function afterPrintEvent(){requestAnimationFrame(removeFrame)}function removeFrame(){if(printFrame){if(printFrame.parentNode){try{printFrame.contentDocument.write("")}catch(e){}printFrame.parentNode.removeChild(printFrame)}printFrame=null}}function getExportBlobByString(e,t){return new Blob([e],{type:`text/${t};charset=utf-8;`})}const printMargin=80;function createHtmlPage(e,t){var r=e["customStyle"];return["<!DOCTYPE html><html>","<head>",'<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">',`<title>${e.title}</title>`,e._pageBreaks||e.pageBreaks&&e.pageBreaks.length?'<style media="print">@page {size: auto;margin: 0mm;}</style>':"",`<style>.vxe-print-slots{display: none;}.vxe-print-page-break.align--center{text-align:center;}.vxe-print-page-break.align--left{text-align:left;}.vxe-print-page-break.align--right{text-align:right;}.vxe-print-page-break--header-title{font-size:1.8em;text-align:center;line-height:${printMargin}px;}.vxe-print-page-break{page-break-before:always;display:flex;flex-direction:column;height:100vh;overflow:hidden;}.vxe-print-page-break--body{display:flex;flex-direction:row;flex-grow:1;overflow: hidden;}.vxe-print-page-break--left,.vxe-print-page-break--right{flex-shrink:0;width:${printMargin}px;height:100%;}.vxe-print-page-break--header,.vxe-print-page-break--footer{flex-shrink:0;height:${printMargin}px;width:100%;}.vxe-print-page-break--content{flex-grow: 1;overflow: hidden;}.vxe-print-page-break--footer-page-number{line-height:${printMargin}px;text-align:center;}</style>`,"<style>.vxe-table{white-space:pre;}</style>",`<style>${defaultHtmlStyle}</style>`,r?`<style>${r}</style>`:"","</head>","<body>",""+t,"</body>","</html>"].join("")}function handlePrint(e,r=""){var t=e["beforeMethod"];const a=getExportBlobByString(r=createHtmlPage(e,r=t?t({content:r,html:r,options:e})||"":r),"html");return new Promise(t=>{browseObj.msie?(removeFrame(),printFrame=createPrintFrame(),appendPrintFrame(),printFrame.contentDocument.write(r),printFrame.contentDocument.execCommand("print"),setTimeout(()=>{t({status:!0})},300)):(printFrame||((printFrame=createPrintFrame()).onload=e=>{e.target.src&&(e.target.contentWindow.onafterprint=afterPrintEvent,e.target.contentWindow.print()),t({status:!0})},printFrame.onerror=()=>{t({status:!1})}),appendPrintFrame(),printFrame.src=URL.createObjectURL(a))})}function createPageBreak(d){const{title:s,showPageNumber:p,align:c,headerAlign:b,footerAlign:m,showAllPageTitle:g}=d;var e=d.pageBreaks||[];const u=e.length;return e.map((e,t)=>{var r=e.bodyHtml,a=e.headerHtml||d.headerHtml,i=e.footerHtml||d.footerHtml,n=e.leftHtml||d.leftHtml,e=e.rightHtml||d.rightHtml,o=t+1,l={currentPage:o,pageCount:u};return[`<div class="${["vxe-print-page-break",c?"align--"+c:""].join(" ")}">`,`<div class="${["vxe-print-page-break--header",b?"align--"+b:""].join(" ")}">`,a?""+(_xeUtils.default.isFunction(a)?a(l):a||""):!s||!g&&t?"":`<div class="vxe-print-page-break--header-title">${s||""}</div>`,"</div>",'<div class="vxe-print-page-break--body">',`<div class="vxe-print-page-break--left">${_xeUtils.default.isFunction(n)?n(l):n||""}</div>`,`<div class="vxe-print-page-break--content">${_xeUtils.default.isFunction(r)?r(l):r||""}</div>`,`<div class="vxe-print-page-break--right">${_xeUtils.default.isFunction(e)?e(l):e||""}</div>`,"</div>",`<div class="${["vxe-print-page-break--footer",m?"align--"+m:""].join(" ")}">`,i?""+(_xeUtils.default.isFunction(i)?i(l):i||""):p?`<div class="vxe-print-page-break--footer-page-number">${o}/${u}</div>`:"","</div>","</div>"].join("")}).join("")}const printHtml=e=>{e=Object.assign({_pageBreaks:!1,customLayout:!0},e);return e.sheetName&&(e.title=e.title||e.sheetName),e.style&&(e.customStyle=e.customStyle||e.style),e.beforePrintMethod&&(e.beforeMethod=e.beforeMethod||e.beforePrintMethod),e.pageBreaks&&e.pageBreaks.length?handlePrint(e,createPageBreak(e)):handlePrint(e,e.html||e.content)};function assemblePageBreak(e,t,r){var a=e.reactData.staticPageBreaks,i=t.parentNode;i&&a&&(a.splice(_xeUtils.default.arrayIndexOf(i.children,t),0,r),e.reactData.staticPageBreaks=a.slice(0))}function destroyPageBreak(e,t){e.reactData.staticPageBreaks=e.reactData.staticPageBreaks.filter(e=>e.id!==t.id)}exports.printHtml=printHtml;
|
|
@@ -12,8 +12,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
12
12
|
var _default = exports.default = (0, _vue.defineComponent)({
|
|
13
13
|
name: 'VxeSplitItem',
|
|
14
14
|
props: {
|
|
15
|
+
name: [Number, String],
|
|
15
16
|
width: [Number, String],
|
|
16
17
|
height: [Number, String],
|
|
18
|
+
showAction: Boolean,
|
|
17
19
|
minWidth: {
|
|
18
20
|
type: [Number, String],
|
|
19
21
|
default: () => null
|
|
@@ -34,12 +36,20 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
34
36
|
const refElem = (0, _vue.ref)();
|
|
35
37
|
const chunkConfig = (0, _vue.reactive)({
|
|
36
38
|
id: xID,
|
|
39
|
+
name: props.name,
|
|
37
40
|
width: props.width,
|
|
38
41
|
height: props.height,
|
|
39
42
|
minWidth: props.minWidth,
|
|
40
43
|
minHeight: props.minHeight,
|
|
44
|
+
showAction: props.showAction,
|
|
45
|
+
isVisible: true,
|
|
46
|
+
isExpand: true,
|
|
41
47
|
renderWidth: 0,
|
|
48
|
+
resizeWidth: 0,
|
|
49
|
+
foldWidth: 0,
|
|
42
50
|
renderHeight: 0,
|
|
51
|
+
resizeHeight: 0,
|
|
52
|
+
foldHeight: 0,
|
|
43
53
|
slots: slots
|
|
44
54
|
});
|
|
45
55
|
const reactData = (0, _vue.reactive)({});
|
|
@@ -72,6 +82,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
72
82
|
ref: refElem
|
|
73
83
|
});
|
|
74
84
|
};
|
|
85
|
+
(0, _vue.watch)(() => props.name, val => {
|
|
86
|
+
chunkConfig.name = val;
|
|
87
|
+
});
|
|
75
88
|
(0, _vue.watch)(() => props.width, val => {
|
|
76
89
|
chunkConfig.width = val;
|
|
77
90
|
});
|
|
@@ -84,6 +97,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
84
97
|
(0, _vue.watch)(() => props.minHeight, val => {
|
|
85
98
|
chunkConfig.minHeight = val;
|
|
86
99
|
});
|
|
100
|
+
(0, _vue.watch)(() => props.showAction, val => {
|
|
101
|
+
chunkConfig.showAction = val;
|
|
102
|
+
});
|
|
87
103
|
(0, _vue.onMounted)(() => {
|
|
88
104
|
const elem = refElem.value;
|
|
89
105
|
if ($xeSplit && elem) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_util=require("./util"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplitItem",props:{width:[Number,String],height:[Number,String],minWidth:{type:[Number,String],default:()=>null},minHeight:{type:[Number,String],default:()=>null}},emits:[],setup(e,t){const{emit:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_util=require("./util"),_xeUtils=_interopRequireDefault(require("xe-utils"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeSplitItem",props:{name:[Number,String],width:[Number,String],height:[Number,String],showAction:Boolean,minWidth:{type:[Number,String],default:()=>null},minHeight:{type:[Number,String],default:()=>null}},emits:[],setup(e,t){const{emit:n,slots:i}=t;var r=_xeUtils.default.uniqueId();const u=(0,_vue.inject)("$xeSplit",null),h=(0,_vue.ref)(),a=(0,_vue.reactive)({id:r,name:e.name,width:e.width,height:e.height,minWidth:e.minWidth,minHeight:e.minHeight,showAction:e.showAction,isVisible:!0,isExpand:!0,renderWidth:0,resizeWidth:0,foldWidth:0,renderHeight:0,resizeHeight:0,foldHeight:0,slots:i});var d=(0,_vue.reactive)({});const l={},o={refElem:h},s={xID:r,props:e,context:t,reactData:d,internalData:{},getRefMaps:()=>o,getComputeMaps:()=>l};Object.assign(s,{dispatchEvent:(e,t,i)=>{n(e,(0,_ui.createEvent)(i,{$splitItem:s},t))}},{});return(0,_vue.watch)(()=>e.name,e=>{a.name=e}),(0,_vue.watch)(()=>e.width,e=>{a.width=e}),(0,_vue.watch)(()=>e.height,e=>{a.height=e}),(0,_vue.watch)(()=>e.minWidth,e=>{a.minWidth=e}),(0,_vue.watch)(()=>e.minHeight,e=>{a.minHeight=e}),(0,_vue.watch)(()=>e.showAction,e=>{a.showAction=e}),(0,_vue.onMounted)(()=>{var e=h.value;u&&e&&(0,_util.assembleSplitItem)(u,e,a)}),(0,_vue.onUnmounted)(()=>{u&&(0,_util.destroySplitItem)(u,a)}),(0,_vue.provide)("$xeSplitItem",s),s.renderVN=()=>(0,_vue.h)("div",{ref:h}),s},render(){return this.renderVN()}});
|
package/lib/split/src/split.js
CHANGED
|
@@ -24,9 +24,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
24
24
|
type: Boolean,
|
|
25
25
|
default: () => (0, _ui.getConfig)().split.border
|
|
26
26
|
},
|
|
27
|
-
|
|
27
|
+
padding: {
|
|
28
|
+
type: Boolean,
|
|
29
|
+
default: () => (0, _ui.getConfig)().split.padding
|
|
30
|
+
},
|
|
31
|
+
itemConfig: Object,
|
|
32
|
+
barConfig: Object,
|
|
33
|
+
actionConfig: Object
|
|
28
34
|
},
|
|
29
|
-
emits: [],
|
|
35
|
+
emits: ['action-dblclick', 'action-click', 'resize-start', 'resize-drag', 'resize-end'],
|
|
30
36
|
setup(props, context) {
|
|
31
37
|
const {
|
|
32
38
|
emit,
|
|
@@ -41,8 +47,36 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
41
47
|
const computeItemOpts = (0, _vue.computed)(() => {
|
|
42
48
|
return Object.assign({}, (0, _ui.getConfig)().split.itemConfig, props.itemConfig);
|
|
43
49
|
});
|
|
50
|
+
const computeBarOpts = (0, _vue.computed)(() => {
|
|
51
|
+
return Object.assign({}, (0, _ui.getConfig)().split.barConfig, props.barConfig);
|
|
52
|
+
});
|
|
53
|
+
const computeActionOpts = (0, _vue.computed)(() => {
|
|
54
|
+
return Object.assign({}, (0, _ui.getConfig)().split.actionConfig, props.actionConfig);
|
|
55
|
+
});
|
|
56
|
+
const computeIsFoldNext = (0, _vue.computed)(() => {
|
|
57
|
+
const actionOpts = computeActionOpts.value;
|
|
58
|
+
return actionOpts.direction === 'next';
|
|
59
|
+
});
|
|
60
|
+
const computeBarStyle = (0, _vue.computed)(() => {
|
|
61
|
+
const barOpts = computeBarOpts.value;
|
|
62
|
+
const {
|
|
63
|
+
width,
|
|
64
|
+
height
|
|
65
|
+
} = barOpts;
|
|
66
|
+
const stys = {};
|
|
67
|
+
if (height) {
|
|
68
|
+
stys.height = (0, _dom.toCssUnit)(height);
|
|
69
|
+
}
|
|
70
|
+
if (width) {
|
|
71
|
+
stys.width = (0, _dom.toCssUnit)(width);
|
|
72
|
+
}
|
|
73
|
+
return stys;
|
|
74
|
+
});
|
|
44
75
|
const computeMaps = {
|
|
45
|
-
computeItemOpts
|
|
76
|
+
computeItemOpts,
|
|
77
|
+
computeBarOpts,
|
|
78
|
+
computeActionOpts,
|
|
79
|
+
computeIsFoldNext
|
|
46
80
|
};
|
|
47
81
|
const refMaps = {
|
|
48
82
|
refElem
|
|
@@ -72,6 +106,40 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
72
106
|
}
|
|
73
107
|
return [];
|
|
74
108
|
};
|
|
109
|
+
const getDefaultActionIcon = item => {
|
|
110
|
+
const {
|
|
111
|
+
vertical
|
|
112
|
+
} = props;
|
|
113
|
+
const {
|
|
114
|
+
showAction,
|
|
115
|
+
isExpand
|
|
116
|
+
} = item;
|
|
117
|
+
const isFoldNext = computeIsFoldNext.value;
|
|
118
|
+
const topIcon = 'SPLIT_TOP_ACTION';
|
|
119
|
+
const bottomIcon = 'SPLIT_BOTTOM_ACTION';
|
|
120
|
+
const leftIcon = 'SPLIT_LEFT_ACTION';
|
|
121
|
+
const rightIcon = 'SPLIT_RIGHT_ACTION';
|
|
122
|
+
if (showAction) {
|
|
123
|
+
let iconName = '';
|
|
124
|
+
if (isFoldNext) {
|
|
125
|
+
if (vertical) {
|
|
126
|
+
iconName = isExpand ? bottomIcon : topIcon;
|
|
127
|
+
} else {
|
|
128
|
+
iconName = isExpand ? rightIcon : leftIcon;
|
|
129
|
+
}
|
|
130
|
+
} else {
|
|
131
|
+
if (vertical) {
|
|
132
|
+
iconName = isExpand ? topIcon : bottomIcon;
|
|
133
|
+
} else {
|
|
134
|
+
iconName = isExpand ? leftIcon : rightIcon;
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
if (iconName) {
|
|
138
|
+
return (0, _ui.getIcon)()[iconName];
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
return '';
|
|
142
|
+
};
|
|
75
143
|
const recalculate = () => {
|
|
76
144
|
return (0, _vue.nextTick)().then(() => {
|
|
77
145
|
const {
|
|
@@ -154,30 +222,35 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
154
222
|
const {
|
|
155
223
|
staticItems
|
|
156
224
|
} = reactData;
|
|
157
|
-
const
|
|
225
|
+
const barEl = evnt.currentTarget;
|
|
226
|
+
const handleEl = barEl.parentElement;
|
|
158
227
|
const el = refElem.value;
|
|
159
228
|
if (!el) {
|
|
160
229
|
return;
|
|
161
230
|
}
|
|
162
|
-
const itemId = handleEl.getAttribute('
|
|
231
|
+
const itemId = handleEl.getAttribute('itemid');
|
|
163
232
|
const itemIndex = _xeUtils.default.findIndexOf(staticItems, item => item.id === itemId);
|
|
164
233
|
const item = staticItems[itemIndex];
|
|
165
234
|
if (!item) {
|
|
166
235
|
return;
|
|
167
236
|
}
|
|
237
|
+
if (!item.isExpand) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
const isFoldNext = computeIsFoldNext.value;
|
|
168
241
|
const itemOpts = computeItemOpts.value;
|
|
169
242
|
const allMinWidth = _xeUtils.default.toNumber(itemOpts.minWidth);
|
|
170
243
|
const allMinHeight = _xeUtils.default.toNumber(itemOpts.minHeight);
|
|
171
|
-
const
|
|
172
|
-
const
|
|
173
|
-
const currItemEl = item ? el.querySelector(`.vxe-split-item[
|
|
174
|
-
const
|
|
244
|
+
const targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)];
|
|
245
|
+
const targetItemEl = targetItem ? el.querySelector(`.vxe-split-item[itemid="${targetItem.id}"]`) : null;
|
|
246
|
+
const currItemEl = item ? el.querySelector(`.vxe-split-item[itemid="${item.id}"]`) : null;
|
|
247
|
+
const targetWidth = targetItemEl ? targetItemEl.clientWidth : 0;
|
|
175
248
|
const currWidth = currItemEl ? currItemEl.clientWidth : 0;
|
|
176
|
-
const
|
|
249
|
+
const targetHeight = targetItemEl ? targetItemEl.clientHeight : 0;
|
|
177
250
|
const currHeight = currItemEl ? currItemEl.clientHeight : 0;
|
|
178
|
-
const
|
|
251
|
+
const targetMinWidth = _xeUtils.default.toNumber(targetItem ? (0, _utils.getGlobalDefaultConfig)(targetItem.minWidth, allMinWidth) : allMinWidth);
|
|
179
252
|
const currMinWidth = _xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minWidth, allMinWidth));
|
|
180
|
-
const
|
|
253
|
+
const targetMinHeight = _xeUtils.default.toNumber(targetItem ? (0, _utils.getGlobalDefaultConfig)(targetItem.minHeight, allMinHeight) : allMinHeight);
|
|
181
254
|
const currMinHeight = _xeUtils.default.toNumber((0, _utils.getGlobalDefaultConfig)(item.minHeight, allMinHeight));
|
|
182
255
|
const disX = evnt.clientX;
|
|
183
256
|
const disY = evnt.clientY;
|
|
@@ -185,46 +258,146 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
185
258
|
document.onmousemove = evnt => {
|
|
186
259
|
evnt.preventDefault();
|
|
187
260
|
if (vertical) {
|
|
188
|
-
const offsetTop = evnt.clientY - disY;
|
|
261
|
+
const offsetTop = isFoldNext ? disY - evnt.clientY : evnt.clientY - disY;
|
|
189
262
|
if (offsetTop > 0) {
|
|
190
|
-
if (
|
|
263
|
+
if (targetItem) {
|
|
191
264
|
if (currHeight - offsetTop >= currMinHeight) {
|
|
192
|
-
|
|
193
|
-
|
|
265
|
+
const reHeight = currHeight - offsetTop;
|
|
266
|
+
targetItem.resizeHeight = targetHeight + offsetTop;
|
|
267
|
+
item.resizeHeight = reHeight;
|
|
268
|
+
dispatchEvent('resize-drag', {
|
|
269
|
+
item,
|
|
270
|
+
name: item.name,
|
|
271
|
+
offsetHeight: offsetTop,
|
|
272
|
+
resizeHeight: reHeight,
|
|
273
|
+
offsetWidth: 0,
|
|
274
|
+
resizeWidth: 0
|
|
275
|
+
}, evnt);
|
|
194
276
|
}
|
|
195
277
|
}
|
|
196
278
|
} else {
|
|
197
|
-
if (
|
|
198
|
-
if (
|
|
199
|
-
|
|
200
|
-
|
|
279
|
+
if (targetItem) {
|
|
280
|
+
if (targetHeight + offsetTop >= targetMinHeight) {
|
|
281
|
+
const reHeight = currHeight - offsetTop;
|
|
282
|
+
targetItem.resizeHeight = targetHeight + offsetTop;
|
|
283
|
+
item.resizeHeight = reHeight;
|
|
284
|
+
dispatchEvent('resize-drag', {
|
|
285
|
+
item,
|
|
286
|
+
name: item.name,
|
|
287
|
+
offsetHeight: offsetTop,
|
|
288
|
+
resizeHeight: reHeight,
|
|
289
|
+
offsetWidth: 0,
|
|
290
|
+
resizeWidth: 0
|
|
291
|
+
}, evnt);
|
|
201
292
|
}
|
|
202
293
|
}
|
|
203
294
|
}
|
|
204
295
|
} else {
|
|
205
|
-
const offsetLeft = evnt.clientX - disX;
|
|
296
|
+
const offsetLeft = isFoldNext ? disX - evnt.clientX : evnt.clientX - disX;
|
|
206
297
|
if (offsetLeft > 0) {
|
|
207
|
-
if (
|
|
298
|
+
if (targetItem) {
|
|
208
299
|
if (currWidth - offsetLeft >= currMinWidth) {
|
|
209
|
-
|
|
210
|
-
|
|
300
|
+
const reWidth = currWidth - offsetLeft;
|
|
301
|
+
targetItem.resizeWidth = targetWidth + offsetLeft;
|
|
302
|
+
item.resizeWidth = reWidth;
|
|
303
|
+
dispatchEvent('resize-drag', {
|
|
304
|
+
item,
|
|
305
|
+
name: item.name,
|
|
306
|
+
offsetHeight: 0,
|
|
307
|
+
resizeHeight: 0,
|
|
308
|
+
offsetWidth: offsetLeft,
|
|
309
|
+
resizeWidth: reWidth
|
|
310
|
+
}, evnt);
|
|
211
311
|
}
|
|
212
312
|
}
|
|
213
313
|
} else {
|
|
214
|
-
if (
|
|
215
|
-
if (
|
|
216
|
-
|
|
217
|
-
|
|
314
|
+
if (targetItem) {
|
|
315
|
+
if (targetWidth + offsetLeft >= targetMinWidth) {
|
|
316
|
+
const reWidth = currWidth - offsetLeft;
|
|
317
|
+
targetItem.resizeWidth = targetWidth + offsetLeft;
|
|
318
|
+
item.resizeWidth = reWidth;
|
|
319
|
+
dispatchEvent('resize-drag', {
|
|
320
|
+
item,
|
|
321
|
+
name: item.name,
|
|
322
|
+
offsetHeight: 0,
|
|
323
|
+
resizeHeight: 0,
|
|
324
|
+
offsetWidth: offsetLeft,
|
|
325
|
+
resizeWidth: reWidth
|
|
326
|
+
}, evnt);
|
|
218
327
|
}
|
|
219
328
|
}
|
|
220
329
|
}
|
|
221
330
|
}
|
|
222
331
|
};
|
|
223
|
-
document.onmouseup =
|
|
332
|
+
document.onmouseup = evnt => {
|
|
224
333
|
document.onmousemove = null;
|
|
225
334
|
document.onmouseup = null;
|
|
226
335
|
(0, _dom.removeClass)(el, 'is--drag');
|
|
336
|
+
dispatchEvent('resize-end', {
|
|
337
|
+
item,
|
|
338
|
+
name: item.name,
|
|
339
|
+
resizeHeight: item.resizeHeight,
|
|
340
|
+
resizeWidth: item.resizeWidth
|
|
341
|
+
}, evnt);
|
|
227
342
|
};
|
|
343
|
+
dispatchEvent('resize-start', {
|
|
344
|
+
item,
|
|
345
|
+
name: item.name
|
|
346
|
+
}, evnt);
|
|
347
|
+
};
|
|
348
|
+
const handleItemActionEvent = evnt => {
|
|
349
|
+
const el = refElem.value;
|
|
350
|
+
if (!el) {
|
|
351
|
+
return;
|
|
352
|
+
}
|
|
353
|
+
const {
|
|
354
|
+
vertical
|
|
355
|
+
} = props;
|
|
356
|
+
const {
|
|
357
|
+
staticItems
|
|
358
|
+
} = reactData;
|
|
359
|
+
const isFoldNext = computeIsFoldNext.value;
|
|
360
|
+
const btnEl = evnt.currentTarget;
|
|
361
|
+
const handleEl = btnEl.parentElement;
|
|
362
|
+
const itemId = handleEl.getAttribute('itemid');
|
|
363
|
+
const itemIndex = _xeUtils.default.findIndexOf(staticItems, item => item.id === itemId);
|
|
364
|
+
const item = staticItems[itemIndex];
|
|
365
|
+
const targetItem = staticItems[itemIndex + (isFoldNext ? 1 : -1)];
|
|
366
|
+
if (item) {
|
|
367
|
+
const {
|
|
368
|
+
showAction,
|
|
369
|
+
isExpand
|
|
370
|
+
} = item;
|
|
371
|
+
if (showAction) {
|
|
372
|
+
if (vertical) {
|
|
373
|
+
if (targetItem) {
|
|
374
|
+
targetItem.isVisible = !isExpand;
|
|
375
|
+
targetItem.foldHeight = 0;
|
|
376
|
+
item.isExpand = !isExpand;
|
|
377
|
+
item.isVisible = true;
|
|
378
|
+
item.foldHeight = isExpand ? (targetItem.resizeHeight || targetItem.renderHeight) + (item.resizeHeight || item.renderHeight) : 0;
|
|
379
|
+
}
|
|
380
|
+
} else {
|
|
381
|
+
if (targetItem) {
|
|
382
|
+
targetItem.isVisible = !isExpand;
|
|
383
|
+
targetItem.foldWidth = 0;
|
|
384
|
+
item.isExpand = !isExpand;
|
|
385
|
+
item.isVisible = true;
|
|
386
|
+
item.foldWidth = isExpand ? (targetItem.resizeWidth || targetItem.renderWidth) + (item.resizeWidth || item.renderWidth) : 0;
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
dispatchEvent(evnt.type === 'dblclick' ? 'action-dblclick' : 'action-click', {
|
|
390
|
+
item,
|
|
391
|
+
name: item.name,
|
|
392
|
+
targetItem,
|
|
393
|
+
targetName: targetItem ? targetItem.name : '',
|
|
394
|
+
expanded: item.isExpand
|
|
395
|
+
}, evnt);
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
};
|
|
399
|
+
const handleGlobalResizeEvent = () => {
|
|
400
|
+
recalculate();
|
|
228
401
|
};
|
|
229
402
|
const splitMethods = {
|
|
230
403
|
dispatchEvent,
|
|
@@ -232,51 +405,90 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
232
405
|
};
|
|
233
406
|
const splitPrivateMethods = {};
|
|
234
407
|
Object.assign($xeSplit, splitMethods, splitPrivateMethods);
|
|
408
|
+
const renderHandleBar = item => {
|
|
409
|
+
const barStyle = computeBarStyle.value;
|
|
410
|
+
const actionOpts = computeActionOpts.value;
|
|
411
|
+
const isFoldNext = computeIsFoldNext.value;
|
|
412
|
+
const {
|
|
413
|
+
id,
|
|
414
|
+
isExpand,
|
|
415
|
+
showAction
|
|
416
|
+
} = item;
|
|
417
|
+
const btnOns = {};
|
|
418
|
+
if (actionOpts.trigger === 'dblclick') {
|
|
419
|
+
btnOns.onDblclick = handleItemActionEvent;
|
|
420
|
+
} else {
|
|
421
|
+
btnOns.onClick = handleItemActionEvent;
|
|
422
|
+
}
|
|
423
|
+
return (0, _vue.h)('div', {
|
|
424
|
+
itemid: id,
|
|
425
|
+
class: ['vxe-split-item-handle', isFoldNext ? 'to--next' : 'to--prev']
|
|
426
|
+
}, [(0, _vue.h)('div', {
|
|
427
|
+
class: 'vxe-split-item-handle-bar',
|
|
428
|
+
style: barStyle,
|
|
429
|
+
onMousedown: dragEvent
|
|
430
|
+
}), showAction ? (0, _vue.h)('span', Object.assign({
|
|
431
|
+
class: 'vxe-split-item-action-btn'
|
|
432
|
+
}, btnOns), [(0, _vue.h)('i', {
|
|
433
|
+
class: (isExpand ? actionOpts.openIcon : actionOpts.closeIcon) || getDefaultActionIcon(item)
|
|
434
|
+
})]) : (0, _ui.renderEmptyElement)($xeSplit)]);
|
|
435
|
+
};
|
|
235
436
|
const renderItems = () => {
|
|
236
437
|
const {
|
|
237
438
|
border,
|
|
439
|
+
padding,
|
|
238
440
|
vertical
|
|
239
441
|
} = props;
|
|
240
442
|
const {
|
|
241
443
|
staticItems
|
|
242
444
|
} = reactData;
|
|
445
|
+
const isFoldNext = computeIsFoldNext.value;
|
|
243
446
|
const itemVNs = [];
|
|
244
447
|
staticItems.forEach((item, index) => {
|
|
245
448
|
const {
|
|
246
449
|
id,
|
|
247
450
|
slots,
|
|
248
451
|
renderHeight,
|
|
249
|
-
|
|
452
|
+
resizeHeight,
|
|
453
|
+
foldHeight,
|
|
454
|
+
renderWidth,
|
|
455
|
+
resizeWidth,
|
|
456
|
+
foldWidth,
|
|
457
|
+
isVisible,
|
|
458
|
+
isExpand
|
|
250
459
|
} = item;
|
|
251
460
|
const defaultSlot = slots ? slots.default : null;
|
|
252
461
|
const stys = {};
|
|
462
|
+
const itemWidth = isVisible ? foldWidth || resizeWidth || renderWidth : 0;
|
|
463
|
+
const itemHeight = isVisible ? foldHeight || resizeHeight || renderHeight : 0;
|
|
253
464
|
if (vertical) {
|
|
254
|
-
if (
|
|
255
|
-
stys.height = (0, _dom.toCssUnit)(
|
|
465
|
+
if (itemHeight) {
|
|
466
|
+
stys.height = (0, _dom.toCssUnit)(itemHeight);
|
|
256
467
|
}
|
|
257
468
|
} else {
|
|
258
|
-
if (
|
|
259
|
-
stys.width = (0, _dom.toCssUnit)(
|
|
469
|
+
if (itemWidth) {
|
|
470
|
+
stys.width = (0, _dom.toCssUnit)(itemWidth);
|
|
260
471
|
}
|
|
261
472
|
}
|
|
262
473
|
itemVNs.push((0, _vue.h)('div', {
|
|
263
|
-
|
|
474
|
+
itemid: id,
|
|
264
475
|
class: ['vxe-split-item', vertical ? 'is--vertical' : 'is--horizontal', {
|
|
476
|
+
'is--padding': padding,
|
|
265
477
|
'is--border': border,
|
|
266
|
-
'is--height':
|
|
267
|
-
'is--width':
|
|
268
|
-
'is--fill': !
|
|
269
|
-
'is--handle': index > 0
|
|
478
|
+
'is--height': itemHeight,
|
|
479
|
+
'is--width': itemWidth,
|
|
480
|
+
'is--fill': isVisible && !itemHeight && !itemWidth,
|
|
481
|
+
'is--handle': index > 0,
|
|
482
|
+
'is--expand': isExpand,
|
|
483
|
+
'is--hidden': !isVisible
|
|
270
484
|
}],
|
|
271
485
|
style: stys
|
|
272
|
-
}, [index ? (0, _vue.h)('div', {
|
|
273
|
-
|
|
274
|
-
class: 'vxe-split-item-handle',
|
|
275
|
-
onMousedown: dragEvent
|
|
276
|
-
}) : (0, _ui.renderEmptyElement)($xeSplit), (0, _vue.h)('div', {
|
|
277
|
-
xid: id,
|
|
486
|
+
}, [index && !isFoldNext ? renderHandleBar(item) : (0, _ui.renderEmptyElement)($xeSplit), (0, _vue.h)('div', {
|
|
487
|
+
itemid: id,
|
|
278
488
|
class: 'vxe-split-item--wrapper'
|
|
279
|
-
},
|
|
489
|
+
}, [(0, _vue.h)('div', {
|
|
490
|
+
class: 'vxe-split-item--inner'
|
|
491
|
+
}, defaultSlot ? callSlot(defaultSlot, {}) : [])]), isFoldNext && index < staticItems.length - 1 ? renderHandleBar(item) : (0, _ui.renderEmptyElement)($xeSplit)]));
|
|
280
492
|
});
|
|
281
493
|
return (0, _vue.h)('div', {
|
|
282
494
|
class: 'vxe-split-wrapper'
|
|
@@ -308,7 +520,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
|
|
|
308
520
|
recalculate();
|
|
309
521
|
});
|
|
310
522
|
(0, _vue.onMounted)(() => {
|
|
311
|
-
|
|
523
|
+
(0, _vue.nextTick)(() => {
|
|
524
|
+
recalculate();
|
|
525
|
+
});
|
|
526
|
+
_ui.globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
|
|
527
|
+
});
|
|
528
|
+
(0, _vue.onUnmounted)(() => {
|
|
529
|
+
_ui.globalEvents.off($xeSplit, 'resize');
|
|
312
530
|
});
|
|
313
531
|
(0, _vue.onActivated)(() => {
|
|
314
532
|
recalculate();
|
|
@@ -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},itemConfig:Object},emits:[],setup(
|
|
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:n}=e;var t=_xeUtils.default.uniqueId();const C=(0,_vue.ref)(),H=(0,_vue.reactive)({staticItems:[]});const W=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.itemConfig,z.itemConfig)),l=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.barConfig,z.barConfig)),o=(0,_vue.computed)(()=>Object.assign({},(0,_ui.getConfig)().split.actionConfig,z.actionConfig)),E=(0,_vue.computed)(()=>{return"next"===o.value.direction}),d=(0,_vue.computed)(()=>{var{width:e,height:t}=l.value,i={};return t&&(i.height=(0,_dom.toCssUnit)(t)),e&&(i.width=(0,_dom.toCssUnit)(e)),i}),i={computeItemOpts:W,computeBarOpts:l,computeActionOpts:o,computeIsFoldNext:E},r={refElem:C},x={xID:t,props:z,context:e,reactData:H,internalData:{},getRefMaps:()=>r,getComputeMaps:()=>i},U=(e,t,i)=>{s(e,(0,_ui.createEvent)(i,{$split:x},t))},b=(e,t)=>e&&(_xeUtils.default.isString(e)&&(e=n[e]||null),_xeUtils.default.isFunction(e))?(0,_vn.getSlotVNs)(e(t)):[],a=()=>(0,_vue.nextTick)().then(()=>{var e=z["vertical"],t=H["staticItems"],i=C.value;if(i){const l=i.clientWidth,n=i.clientHeight;if(l&&n){i=W.value;const r=_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)?n*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderHeight=i):o.push(e),s+=i}),o.length){const d=(n-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)?l*_xeUtils.default.toNumber(t):_xeUtils.default.toNumber(t),e.renderWidth=i):o.push(e),s+=i}),o.length){const u=(l-s)/o.length;o.forEach(e=>{e.renderWidth=Math.max(_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(e.minWidth,r)),u)})}}}}}),u=e=>{e.preventDefault();const s=z["vertical"];var t=H["staticItems"],i=e.currentTarget.parentElement;const l=C.value;if(l){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 n=W.value,r=_xeUtils.default.toNumber(n.minWidth),n=_xeUtils.default.toNumber(n.minHeight);const u=t[i+(d?1:-1)];t=u?l.querySelector(`.vxe-split-item[itemid="${u.id}"]`):null,i=o?l.querySelector(`.vxe-split-item[itemid="${o.id}"]`):null;const c=t?t.clientWidth:0,h=i?i.clientWidth:0,m=t?t.clientHeight:0,g=i?i.clientHeight:0,f=_xeUtils.default.toNumber(u?(0,_utils.getGlobalDefaultConfig)(u.minWidth,r):r),v=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minWidth,r)),_=_xeUtils.default.toNumber(u?(0,_utils.getGlobalDefaultConfig)(u.minHeight,n):n),p=_xeUtils.default.toNumber((0,_utils.getGlobalDefaultConfig)(o.minHeight,n)),x=e.clientX,b=e.clientY;(0,_dom.addClass)(l,"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=m+t,o.resizeHeight=i,U("resize-drag",{item:o,name:o.name,offsetHeight:t,resizeHeight:i,offsetWidth:0,resizeWidth:0},e)):u&&m+t>=_&&(i=g-t,u.resizeHeight=m+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&&h-t>=v&&(i=h-t,u.resizeWidth=c+t,o.resizeWidth=i,U("resize-drag",{item:o,name:o.name,offsetHeight:0,resizeHeight:0,offsetWidth:t,resizeWidth:i},e)):u&&c+t>=f&&(i=h-t,u.resizeWidth=c+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)(l,"is--drag"),U("resize-end",{item:o,name:o.name,resizeHeight:o.resizeHeight,resizeWidth:o.resizeWidth},e)},U("resize-start",{item:o,name:o.name},e)}}},c=e=>{if(C.value){var t=z["vertical"],i=H["staticItems"],s=E.value;const r=e.currentTarget.parentElement.getAttribute("itemid");var l=_xeUtils.default.findIndexOf(i,e=>e.id===r),n=i[l],i=i[l+(s?1:-1)];n&&({showAction:l,isExpand:s}=n,l)&&(t?i&&(i.isVisible=!s,i.foldHeight=0,n.isExpand=!s,n.isVisible=!0,n.foldHeight=s?(i.resizeHeight||i.renderHeight)+(n.resizeHeight||n.renderHeight):0):i&&(i.isVisible=!s,i.foldWidth=0,n.isExpand=!s,n.isVisible=!0,n.foldWidth=s?(i.resizeWidth||i.renderWidth)+(n.resizeWidth||n.renderWidth):0),U("dblclick"===e.type?"action-dblclick":"action-click",{item:n,name:n.name,targetItem:i,targetName:i?i.name:"",expanded:n.isExpand},e))}},h=()=>{a()};t={dispatchEvent:U,recalculate:a};Object.assign(x,t,{});const I=e=>{var t=d.value,i=o.value,s=E.value,{id:l,isExpand:n,showAction:r}=e,a={};return"dblclick"===i.trigger?a.onDblclick=c:a.onClick=c,(0,_vue.h)("div",{itemid:l,class:["vxe-split-item-handle",s?"to--next":"to--prev"]},[(0,_vue.h)("div",{class:"vxe-split-item-handle-bar",style:t,onMousedown:u}),r?(0,_vue.h)("span",Object.assign({class:"vxe-split-item-action-btn"},a),[(0,_vue.h)("i",{class:(n?i.openIcon:i.closeIcon)||(e=>{var t=z["vertical"],{showAction:e,isExpand:i}=e,s=E.value,l="SPLIT_TOP_ACTION",n="SPLIT_BOTTOM_ACTION",r="SPLIT_LEFT_ACTION",a="SPLIT_RIGHT_ACTION";if(e){let e="";if(e=s?t?i?n:l:i?a:r:t?i?l:n:i?r:a)return(0,_ui.getIcon)()[e]}return""})(e)})]):(0,_ui.renderEmptyElement)(x)])};return(0,_vue.watch)(()=>H.staticItems,()=>{a()}),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{a()}),_ui.globalEvents.on(x,"resize",h)}),(0,_vue.onUnmounted)(()=>{_ui.globalEvents.off(x,"resize")}),(0,_vue.onActivated)(()=>{a()}),(0,_vue.provide)("$xeSplit",x),x.renderVN=()=>{var{vertical:e,width:t,height:i}=z,s=n.default,l={};return i&&(l.height=(0,_dom.toCssUnit)(i)),t&&(l.width=(0,_dom.toCssUnit)(t)),(0,_vue.h)("div",{ref:C,class:["vxe-split",e?"is--vertical":"is--horizontal"],style:l},[(0,_vue.h)("div",{class:"vxe-split-slots"},s?s({}):[]),(()=>{const{border:m,padding:g,vertical:f}=z,v=H["staticItems"],_=E.value,p=[];return v.forEach((e,t)=>{var{id:i,slots:s,renderHeight:l,resizeHeight:n,foldHeight:r,renderWidth:a,resizeWidth:o,foldWidth:d,isVisible:u,isExpand:c}=e,s=s?s.default:null,h={},d=u?d||o||a:0,o=u?r||n||l:0;f?o&&(h.height=(0,_dom.toCssUnit)(o)):d&&(h.width=(0,_dom.toCssUnit)(d)),p.push((0,_vue.h)("div",{itemid:i,class:["vxe-split-item",f?"is--vertical":"is--horizontal",{"is--padding":g,"is--border":m,"is--height":o,"is--width":d,"is--fill":u&&!o&&!d,"is--handle":0<t,"is--expand":c,"is--hidden":!u}],style:h},[t&&!_?I(e):(0,_ui.renderEmptyElement)(x),(0,_vue.h)("div",{itemid:i,class:"vxe-split-item--wrapper"},[(0,_vue.h)("div",{class:"vxe-split-item--inner"},s?b(s,{}):[])]),_&&t<v.length-1?I(e):(0,_ui.renderEmptyElement)(x)]))}),(0,_vue.h)("div",{class:"vxe-split-wrapper"},p)})()])},x},render(){return this.renderVN()}});
|