@blueking/vxe-table/lib/table/src/header.min.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟树、列拖拽，懒加载、快捷菜单、数据校验、树形结构、打印、导入导出、自定义模板、渲染器、JSON 配置式...

Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_util=require("./util"),_dom=require("../../ui/src/dom");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let{getI18n,renderer,renderEmptyElement}=_ui.VxeUI,renderType="header";var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTableHeader",props:{tableData:Array,tableColumn:Array,tableGroupColumn:Array,fixedColumn:Array,fixedType:{type:String,default:null}},setup(V){let Y=(0,_vue.inject)("$xeTable",{}),{xID:f,props:m,reactData:K,internalData:J}=Y,{refElem:r,refLeftContainer:d,refRightContainer:s,refCellResizeBar:u,refCellResizeTip:c}=Y.getRefMaps(),{computeColumnOpts:g,computeColumnDragOpts:x,computeResizableOpts:v}=Y.getComputeMaps(),_=(0,_vue.ref)([]),S=(0,_vue.ref)(),b=(0,_vue.ref)(),C=(0,_vue.ref)(),y=(0,_vue.ref)(),w=(0,_vue.ref)(),D=(0,_vue.ref)(),M=(0,_vue.ref)(),Q=(0,_vue.computed)(()=>Boolean(Y.context.slots.settingColumn)&&"left"!==V.fixedType),t=()=>{var e=K.isGroup;_.value=e?(0,_util.convertHeaderColumnToRows)(V.tableGroupColumn):[]},Z=(e,a)=>{var l=a.column;let h=V.fixedType,{elemStore:t,visibleColumn:i}=J,f=v.value,m=r.value,g=d.value,x=s.value,_=u.value,b=c.value,C=e.clientX,y=S.value;var n=e.target;let w=l,D=(l.children&&l.children.length&&_xeUtils.default.eachTree(l.children,e=>{w=e}),n.parentNode);l=Object.assign(a,{cell:D});let M=0,T=(0,_util.getRefElem)(t["main-body-scroll"]);if(T){var o=(0,_dom.getOffsetPos)(n,y),n=n.clientWidth,E=Math.floor(n/2);let d=(0,_util.getColReMinWidth)(l)-E,s=o.left-D.clientWidth+n+d,u=o.left+E,t=document.onmousemove,r=document.onmouseup,c="left"===h,v="right"===h,p=0;if(c||v){var z=c?"nextElementSibling":"previousElementSibling";let e=D[z];for(;e&&!(0,_dom.hasClass)(e,"fixed--hidden");)(0,_dom.hasClass)(e,"col--group")||(p+=e.offsetWidth),e=e[z];v&&x&&(u=x.offsetLeft+p)}l=l=>{l.stopPropagation(),l.preventDefault();var t=l.clientX-C;let e=u+t;t=h?0:T.scrollLeft,c?e=Math.min(e,(x?x.offsetLeft:T.clientWidth)-p-d):v?(s=(g?g.clientWidth:0)+p+d,e=Math.min(e,u+D.clientWidth-d)):s=Math.max(T.scrollLeft,s),M=Math.max(e,s),t=Math.max(1,M-t);if(_.style.left=t+"px",f.showDragTip&&b){var r=m.clientWidth,a=y.getBoundingClientRect(),i=_.clientWidth,n=b.clientWidth,o=b.clientHeight;let e=-n;t<n+i?e=0:r<t&&(e+=r-t),b.style.left=e+"px",b.style.top=Math.min(m.clientHeight-o,Math.max(0,l.clientY-a.y-o/2))+"px",b.textContent=getI18n("vxe.table.resizeColTip",[w.renderWidth+(v?u-M:M-u)])}};K._isResize=!0,(0,_dom.addClass)(m,"drag--resize"),_.style.display="block",document.onmousemove=l,document.onmouseup=function(e){document.onmousemove=t,document.onmouseup=r;let l=w.renderWidth+(v?u-M:M-u);w.resizeWidth=l,"fixed"===f.dragMode&&i.forEach(e=>{e.id===w.id||e.resizeWidth||(e.resizeWidth=e.renderWidth)}),_.style.display="none",K._isResize=!1,J._lastResizeTime=Date.now(),Y.analyColumnWidth(),Y.recalculate(!0).then(()=>{Y.saveCustomStore("update:visible"),Y.updateCellAreas(),Y.dispatchEvent("resizable-change",Object.assign(Object.assign({},a),{resizeWidth:l}),e),setTimeout(()=>Y.recalculate(!0),300)}),(0,_dom.removeClass)(m,"drag--resize")},l(e),Y.closeMenu&&Y.closeMenu()}},T=(D,M,T,E)=>{let z=V.fixedType,{resizable:S,border:W,columnKey:R,headerCellClassName:H,headerCellStyle:I,showHeaderOverflow:O,headerAlign:k,align:U,mouseConfig:$}=m,{currentColumn:A,scrollXLoad:F,scrollYLoad:L,overflowX:j}=K,q=J.scrollXStore,X=g.value,G=x.value,{disabledMethod:N,isCrossDrag:B,isPeerDrag:P}=G;return T.map((e,l)=>{var{type:t,showHeaderOverflow:r,headerAlign:a,align:i,filters:n,headerClassName:o,editRender:d,cellRender:s}=e,u=e.id,d=d||s,s=d?renderer.get(d.name):null,d=e.children&&e.children.length,c=z?e.fixed!==z&&!d:!!e.fixed&&j,r=_xeUtils.default.eqNull(r)?O:r,a=a||(s?s.tableHeaderCellAlign:"")||k||i||(s?s.tableCellAlign:"")||U;let v="ellipsis"===r;i="title"===r,s=!0===r||"tooltip"===r;let p=i||s||v,h=!1,f=null;n&&(f=n[0],h=n.some(e=>e.checked));var r=Y.getColumnIndex(e),m=Y.getVTColumnIndex(e);let g={$table:Y,$grid:Y.xegrid,$rowIndex:E,column:e,columnIndex:r,$columnIndex:l,_columnIndex:m,firstFilterOption:f,fixed:z,type:renderType,isHidden:c,hasFilter:h};var r={colid:u,colspan:1<e.colSpan?e.colSpan:null,rowspan:1<e.rowSpan?e.rowSpan:null},x={onClick:e=>Y.triggerHeaderCellClickEvent(e,g),onDblclick:e=>Y.triggerHeaderCellDblclickEvent(e,g)},_=(F&&!p&&(v=p=!0),X.drag&&"cell"===G.trigger);let b=!1;_&&(b=!(!N||!N(g))),($||_)&&(x.onMousedown=e=>Y.triggerHeaderCellMousedownEvent(e,g)),X.drag&&(x.onDragstart=Y.handleHeaderCellDragDragstartEvent,x.onDragend=Y.handleHeaderCellDragDragendEvent,x.onDragover=Y.handleHeaderCellDragDragoverEvent,_)&&(x.onMouseup=Y.handleHeaderCellDragMouseupEvent);var _=l===T.length-1,C=_xeUtils.default.isBoolean(e.resizable)?e.resizable:X.resizable||S,y=!e.resizeWidth&&("auto"===e.minWidth||"auto"===e.width);let w=!1;return F&&!D&&!e.fixed&&(m<q.visibleStartIndex||m>q.visibleEndIndex)&&(w=!0),(0,_vue.h)("th",Object.assign(Object.assign(Object.assign({class:["vxe-header--column",u,{["col--"+a]:a,["col--"+t]:t,"col--last":_,"col--fixed":e.fixed,"col--group":d,"col--ellipsis":p,"fixed--width":!y,"fixed--hidden":c,"is--sortable":e.sortable,"col--filter":!!n,"is--filter-active":h,"is--drag-active":!e.fixed&&!b&&(B||P||!e.parentId),"is--drag-disabled":b,"col--current":A===e},o?_xeUtils.default.isFunction(o)?o(g):o:"",H?_xeUtils.default.isFunction(H)?H(g):H:""],style:I?_xeUtils.default.isFunction(I)?I(g):I:null},r),x),{key:R||F||L||X.useKey||X.drag||d?u:l}),[(0,_vue.h)("div",{class:["vxe-cell",{"c--title":i,"c--tooltip":s,"c--ellipsis":v}]},w||M&&c?[]:e.renderHeader(g)),!c&&C?(0,_vue.h)("div",{class:["vxe-resizable",{"is--line":!W||"none"===W}],onMousedown:e=>Z(e,g),onDblclick:e=>Y.handleResizeDblclickEvent(e,g)}):renderEmptyElement(Y)])}).concat(Q.value&&0===E?(0,_vue.h)("th",{class:"vxe-header--column vxe-header--setting-wrapper",rowspan:_.value.length},e()):[])},e=()=>{if(Y.context.slots.settingColumn)return Y.callSlot(Y.context.slots.settingColumn,{})};return(0,_vue.watch)(()=>V.tableColumn,t),(0,_vue.onMounted)(()=>{(0,_vue.nextTick)(()=>{var e=V.fixedType,l=Y.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=S,l[e+"scroll"]=b,l[e+"table"]=C,l[e+"colgroup"]=y,l[e+"list"]=w,l[e+"xSpace"]=D,l[e+"repair"]=M,t()})}),(0,_vue.onUnmounted)(()=>{var e=V.fixedType,l=Y.internalData,l=l.elemStore,e=`${e||"main"}-header-`;l[e+"wrapper"]=null,l[e+"scroll"]=null,l[e+"table"]=null,l[e+"colgroup"]=null,l[e+"list"]=null,l[e+"xSpace"]=null,l[e+"repair"]=null}),()=>{let{fixedType:l,fixedColumn:e,tableColumn:t}=V;var{showHeaderOverflow:r,spanMethod:a,footerSpanMethod:i}=m,{isGroup:n,scrollXLoad:o,scrollYLoad:d,dragCol:s}=K,{visibleColumn:u,fullColumnIdData:c}=J;let v=_.value,p=t,h=!1;return n?p=u:(!(o||d||r)||a||i||(h=!0),l&&(p=u,h)&&(p=e||[]),v=[p]),l||n||o&&s&&2<p.length&&(d=c[s.id])&&(r=d._index,a=p[0],i=p[p.length-1],u=c[a.id],o=c[i.id],u)&&o&&(d=u._index,a=o._index,r<d?(p=[s].concat(p),v=[[s].concat(v[0])].concat(v.slice(1))):a<r&&(p=p.concat([s]),v=[v[0].concat([s])].concat(v.slice(1)))),(0,_vue.h)("div",{ref:S,class:["vxe-table--header-wrapper",l?`fixed-${l}--wrapper`:"body--wrapper"],xid:f},[(0,_vue.h)("div",{ref:b,class:"vxe-table--header-inner-wrapper",onScroll(e){Y.triggerHeaderScrollEvent(e,l)}},[l?renderEmptyElement(Y):(0,_vue.h)("div",{ref:D,class:"vxe-body--x-space"}),(0,_vue.h)("table",{ref:C,class:"vxe-table--header",xid:f,cellspacing:0,cellpadding:0,border:0},[(0,_vue.h)("colgroup",{ref:y},p.map((e,l)=>(0,_vue.h)("col",{name:e.id,key:l})).concat(Q.value?(0,_vue.h)("col",{name:"col_setting"}):[])),(0,_vue.h)("thead",{ref:w},((r,a,e)=>{let i=V.fixedType,{headerRowClassName:n,headerRowStyle:o}=m,d=K.isDragColMove,s=g.value,u=x.value;return e.map((e,l)=>{var t={$table:Y,$rowIndex:l,fixed:i,type:renderType};return s.drag&&u.animation?(0,_vue.h)(_vue.TransitionGroup,{key:l,name:"vxe-header--col-list"+(d?"":"-disabled"),tag:"tr",class:["vxe-header--row",n?_xeUtils.default.isFunction(n)?n(t):n:""],style:o?_xeUtils.default.isFunction(o)?o(t):o:null},{default:()=>T(r,a,e,l)}):(0,_vue.h)("tr",{key:l,class:["vxe-header--row",n?_xeUtils.default.isFunction(n)?n(t):n:""],style:o?_xeUtils.default.isFunction(o)?o(t):o:null},T(r,a,e,l))})})(n,h,v))])]),(0,_vue.h)("div",{ref:M,class:"vxe-table--header-border-line"})])}}});