vue-stability-table - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

dist/vue-stability-table.es.js

@@ -591,7 +591,7 @@ const columns = {
         return [_c("div", { staticClass: "text-content", attrs: { "title": row[item.prop] } }, [_vm._v(_vm._s(row[item.prop]))])];
-      }, { "row": row, "column": item, "content": row.id, "rowIndex": _vm.expandKey(i2) })], 2)]);
+      }, { "row": row, "column": item, "content": row[item.prop], "rowIndex": _vm.expandKey(i2) })], 2)]);
     }), _vm.virtualScrollX ? _c("td") : _vm._e(), _vm._l(_vm.cols, function(item) {
       return _c("td", { key: item.prop }, [_c("div", { staticClass: "stability-table-cell", class: _vm.getCellClass(item) }, [_vm._t("content", function() {
         return [_c("div", { staticClass: "text-content", attrs: { "title": row[item.prop] } }, [_vm._v(_vm._s(row[item.prop]))])];
-      }, { "row": row, "column": item, "content": row.id, "rowIndex": _vm.expandKey(i) })], 2)]);
+      }, { "row": row, "column": item, "content": row[item.prop], "rowIndex": _vm.expandKey(i) })], 2)]);
     }), _vm.virtualScrollX ? _c("td") : _vm._e(), _vm._l(_vm.head.right, function(item, j) {
@@ -598,0 +598,0 @@ return _c("td", { key: item.prop, class: { "sticky-right": j === 0 }, style: _vm.getSticky(item, _vm.head.right.length - 1 - j), attrs: { "sticky": "right" } }, [_c("div", { staticClass: "stability-table-cell", class: _vm.getCellClass(item) }, [_vm._t("content", function() {

dist/vue-stability-table.umd.js

@@ -1,1 +0,1 @@
-(function(d,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f():typeof define=="function"&&define.amd?define(f):(d=typeof globalThis!="undefined"?globalThis:d||self,d["vue-stability-table"]=f())})(this,function(){"use strict";const d={label:"",prop:"",align:"left",fixed:!1,key:"",resizable:!1,width:100,minWidth:80,maxWidth:null,formatter:null};var f={columns:{type:Array},dataSource:{type:Array},sticky:{type:Boolean,default:!1},childrenColumnName:{type:String,default:"children"},defaultExpandAllRows:{type:Boolean,default:!1},pagination:{type:[Boolean,Object],default:!1},rowClassName:{type:String,default:""},rowKey:{type:String,default:"id"},rowSize:{type:Number,default:50},expandSize:{type:Number,default:null},colSize:{type:Number,default:80},emptyText:{type:String,default:"\u6682\u65E0\u6570\u636E"}},m={minBarSize:{type:Number,default:50},scrollTop:{type:[Number,Function],default:0},scrollLeft:{type:[Number,Function],default:0},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},offsetHit:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},y=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{ref:"scrollBox",staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY}},[s("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[s("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),t.scrollBarX.show?s("div",{staticClass:"agile-scroll-bar-x",class:{act:t.scrollBarX.clientX||t.scrollBarY.clientY},style:{left:t.scrollBarX.left+"px",width:t.scrollBarX.width+"px",bottom:t.scrollBarX.bottom},on:{mousedown:function(l){return t.scrollBarDown(l,"scrollBarX")}}}):t._e(),t.scrollBarY.show?s("div",{staticClass:"agile-scroll-bar-y",class:{act:t.scrollBarY.clientY||t.scrollBarX.clientX},style:{top:t.scrollBarY.top+"px",height:t.scrollBarY.height+"px"},on:{mousedown:function(l){return t.scrollBarDown(l,"scrollBarY")}}}):t._e()])},_=[];function b(t,e,s,l,r,i,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var a;if(n?(a=function(h){h=h||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!h&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(h=__VUE_SSR_CONTEXT__),r&&r.call(this,h),h&&h._registeredComponents&&h._registeredComponents.add(n)},o._ssrRegister=a):r&&(a=c?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(o.functional){o._injectStyles=a;var g=o.render;o.render=function(v,p){return a.call(p),g(v,p)}}else{var u=o.beforeCreate;o.beforeCreate=u?[].concat(u,a):[a]}return{exports:t,options:o}}const C={props:m,data(){return{scrollBarY:{show:!0,clientY:null,height:0,top:this.offsetTop,multiple:1},scrollBarX:{show:!0,clientX:null,width:0,bottom:0,left:this.offsetLeft,multiple:1},scrollWidth:0,scrollHeight:0,scrollContentWidth:0,scrollContentHeight:0}},watch:{offsetLeft(){this.setScrollBarLeft()},offsetRight(){this.setScrollBarLeft()},offsetTop(){this.setScrollBarTop()},offsetBottom(){this.setScrollBarTop()}},mounted(){this.$scrollBox=this.$refs.scrollBox,this.$scroll=this.$refs.scroll,this.$scrollContent=this.$refs.scrollContent,this.updated(),this.isAutoUpdate&&(this.observer=new MutationObserver(this.updated),this.observer.observe(this.$refs.scrollContent,{attributes:!0,childList:!0,subtree:!0})),this.addDragEvent()},methods:{initContainer(){this.scrollWidth=this.$scrollBox.offsetWidth,this.scrollHeight=this.$scrollBox.offsetHeight,this.scrollContentWidth=this.$scrollContent.offsetWidth,this.scrollContentHeight=this.$scrollContent.offsetHeight},initScrollBar(){if(this.scrollContentWidth>this.scrollWidth){const t=this.scrollWidth-(this.scrollContentWidth-this.scrollWidth)-this.offsetLeft-this.offsetRight;this.scrollBarX.show=!0,this.scrollBarX.width=t<this.minBarSize?this.minBarSize:t,this.scrollBarX.multiple=(this.scrollContentWidth-this.scrollWidth)/(this.scrollWidth-this.scrollBarX.width-this.offsetLeft-this.offsetRight)}else this.scrollBarX.show=!1;if(this.scrollContentHeight>this.scrollHeight){const t=this.scrollHeight-(this.scrollContentHeight-this.scrollHeight)-this.offsetTop-this.offsetBottom;this.scrollBarY.show=!0,this.scrollBarY.height=t<this.minBarSize?this.minBarSize:t,this.scrollBarY.multiple=(this.scrollContentHeight-this.scrollHeight)/(this.scrollHeight-this.scrollBarY.height-this.offsetTop-this.offsetBottom),this.scrollBarX.bottom=0}else this.scrollBarY.show=!1,this.scrollBarX.bottom=this.scrollHeight-this.scrollContentHeight+"px"},updated(){this.initContainer(),this.initScrollBar(),this.$emit("updated",{scrollBarY:this.scrollBarY.show,scrollBarX:this.scrollBarX.show,top:this.$scroll.scrollTop,left:this.$scroll.scrollLeft,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})},setScrollBarLeft(){const t=this.$scroll.scrollLeft,e=this.offsetLeft+Math.floor(t/this.scrollBarX.multiple);return e!==this.scrollBarX.left&&(this.scrollBarX.left=e),t},setScrollBarTop(){const t=this.$scroll.scrollTop,e=this.offsetTop+Math.floor(t/this.scrollBarY.multiple);return e!==this.scrollBarY.top&&(this.scrollBarY.top=e),t},onScroll(t){this.ticking||(window.requestAnimationFrame(()=>{const e=this.setScrollBarTop(),s=this.setScrollBarLeft();this.$emit("scroll",{top:e,left:s,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight},t),this._events["scroll-hit"]&&this.onScrollHit(e,s),this.ticking=!1}),this.ticking=!0)},onScrollHit(t,e){let s="top",l=t-this.initTop,r=e-this.initLeft;this.initTop=t,this.initLeft=e;const i=()=>{this.$emit("scroll-hit",s,{top:t,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};l!==0&&this.scrollBarY.height&&(l<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&i(),t===0&&s==="top"&&i()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",e===0&&s==="left"||this.scrollContentWidth-this.scrollWidth-e==0||(s="xMiddle"),i())},scrollBarDown(t,e){e==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),e==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const e=this.scrollBarX.clientX,s=this.scrollBarY.clientY;if(e){let l=t.clientX-e;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+l*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let l=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+l*this.scrollBarY.multiple*this.dragSpeedY}},scrollBarUp(){this.scrollBarX.clientX=null,this.scrollBarY.clientY=null,window.removeEventListener("mousemove",this.scrollBarDrag)},addDragEvent(){window.addEventListener("mouseup",this.scrollBarUp)},removeDragEvent(){window.removeEventListener("mouseup",this.scrollBarUp)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},S={};var B=b(C,y,_,!1,X,null,null,null);function X(t){for(let e in S)this[e]=S[e]}var z=function(){return B.exports}(),D="";class x{constructor(e){this.opts=Object.assign({},{rowsNum:0,colsNum:0,rowSize:50,colSize:100,expandSize:null,fixedColNum:0,viewHeight:500,viewWidth:800},e),this.rowStart=null,this.rowEnd=null,this.colStart=null,this.colEnd=null,this.topDistance=0,this.bottomDistance=0,this.leftDistance=0,this.rightDistance=0,this.scrollTop=0}getRowsRegion(e,s,l,r){if(this.opts.rowsNum<=60)return null;if(!e||Math.abs(e-this.scrollTop)>this.opts.rowSize){this.scrollTop=e;let i,n,c={top:0,middle:0,bottom:0};if(e<this.opts.viewHeight)i=0,n=30;else if(l.offsetTop-e<this.opts.viewHeight){if(i=this.rowEnd-10,n=i+30,n>this.opts.rowsNum&&(n=this.opts.rowsNum),s)for(const o in s)o<i&&(c.top+=s[o])}else if(r&&e-r.clientHeight<100&&(i=this.rowStart-20,n=this.rowEnd-20,s))for(const o in s)o<i?c.top+=s[o]:o>n&&(c.bottom+=s[o]);if(console.log(c),i!==void 0&&n!==void 0&&i!==this.rowStart&&n!==this.rowEnd)return this.rowStart=i,this.rowEnd=n,this.topDistance=this.rowStart*this.opts.rowSize+c.top,this.bottomDistance=(this.opts.rowsNum-this.rowEnd)*this.opts.rowSize+c.bottom,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}}getColRegion(e){const s=this.opts.colSize,l=Math.floor(this.opts.viewWidth/s);if(this.opts.colsNum<=l*3)return null;let r,i,n;if(e<this.opts.viewWidth)r=0,i=l*2;else{r=Math.floor(e/s)-l;let c=r+l*3;i=c,c>this.opts.colsNum&&(i=this.opts.colsNum,this.rightDistance=0,n=!0)}if((r!==this.colStart||i!==this.colEnd)&&i-this.colEnd>5||this.colEnd-i>5||n)return this.colStart=r,this.colEnd=i,this.leftDistance=this.colStart*s,this.rightDistance=(this.opts.colsNum-this.colEnd)*s,{start:this.colStart,end:this.colEnd,left:this.leftDistance,right:this.rightDistance}}}var $={data(){return{dragSize:{clientX:null,dWidth:0,height:0,rulerLeft:0,colItem:null}}},mounted(){this.addDragEvent()},methods:{dragSizeDown(t,e){this.dragSize.rulerLeft=t.clientX-this.$refs.tableBox.getBoundingClientRect().x,this.dragSize.height=this.$refs.scroll.scrollHeight,this.dragSize.clientX=t.clientX,this.dragSize.width=e.width,this.dragSize.colItem=e,this.dragSize.element=t.target,window.addEventListener("mousemove",this.dragSizeMove),this.dragSize.element.setAttribute("data-darg-act","true")},dragSizeMove(t){const e=this.dragSize.clientX;if(e){let s=t.clientX-e;this.dragSize.dWidth=s,this.$refs.dargSizeRuler.style.left=this.dragSize.rulerLeft+s+"px"}},dragSizeUp(){if(this.dragSize.clientX){this.dragSize.clientX=null,this.dragSize.element.setAttribute("data-darg-act","false");const t=this.dragSize.colItem.minWidth||d.minWidth;let e=this.dragSize.width+this.dragSize.dWidth;e<t&&(e=t),this.dragSize.colItem.width=e,window.removeEventListener("mousemove",this.dragSizeMove)}},addDragEvent(){window.addEventListener("mouseup",this.dragSizeUp)},removeDragEvent(){window.removeEventListener("mouseup",this.dragSizeUp)}},beforeDestroy(){this.removeDragEvent()}},H=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"vue-stability-table",class:{"not-user-select":t.dragSize.clientX}},[s("div",{ref:"tableBox",staticClass:"vue-stability-table-wrapper"},[s("vueAgileScrollbar",{ref:"scroll",attrs:{offsetLeft:t.offsetLeft,offsetRight:t.offsetRight,offsetTop:t.offsetTop},on:{scroll:t.scroll,updated:t.scrollUpdated,"scroll-hit":t.scrollHit}},[s("table",{staticClass:"stability-wrapper-table",class:{"not-sticky":!t.stickyType,"not-sticky-left":t.stickyType==="left","not-sticky-right":t.stickyType==="right"},attrs:{cellpadding:"0",cellspacing:"0"}},[s("thead",{ref:"tabelHead",staticClass:"stability-wrapper-table-head"},[s("tr",[t._l(t.head.left,function(l,r){return s("th",{key:l.prop,class:{"sticky-left":r===t.head.left.length-1},style:t.getSticky(l,r),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell cell-th",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(l){return s("th",{key:l.prop,style:t.getThStyle(l)},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,l)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(l,r){return s("th",{key:l.prop,class:{"sticky-right":r===0},style:t.getSticky(l,t.head.right.length-1-r),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])})],2)]),s("tbody",[t.virtualScrollY?s("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(l,r){return[s("tr",{key:l[t.rowKey],staticClass:"stability-wrapper-table-tbody-tr",on:{click:function(i){t.trClick(l,t.expandKey(r))}}},[t._l(t.head.left,function(i,n){return s("td",{key:i.prop,class:{"sticky-left":n===t.head.left.length-1},style:t.getSticky(i,n),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l.id,rowIndex:t.expandKey(n)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.cols,function(i){return s("td",{key:i.prop},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l.id,rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.head.right,function(i,n){return s("td",{key:i.prop,class:{"sticky-right":n===0},style:t.getSticky(i,t.head.right.length-1-n),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l[i.prop],rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?s("tr",{key:l[t.rowKey]+"expand",ref:l[t.rowKey]+"expand",refInFor:!0},[s("td",{attrs:{colspan:t.columns.length}},[t._t("expand",null,{row:l,rowIndex:t.expandKey(r)})],2)]):t._e()]}),t.virtualScrollY?s("tr",{ref:"virtualBottom",style:{height:t.virtualScrollY.bottom+"px"}}):t._e()],2)])]),s("div",{directives:[{name:"show",rawName:"v-show",value:t.dragSize.clientX,expression:"dragSize.clientX"}],ref:"dargSizeRuler",staticClass:"darg-size-ruler",style:{left:t.dragSize.rulerLeft+"px",height:t.dragSize.height+"px"}})],1)])},Y=[],L="";function T(t,e,s,l,r,i,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var a;if(n?(a=function(h){h=h||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!h&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(h=__VUE_SSR_CONTEXT__),r&&r.call(this,h),h&&h._registeredComponents&&h._registeredComponents.add(n)},o._ssrRegister=a):r&&(a=c?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(o.functional){o._injectStyles=a;var g=o.render;o.render=function(v,p){return a.call(p),g(v,p)}}else{var u=o.beforeCreate;o.beforeCreate=u?[].concat(u,a):[a]}return{exports:t,options:o}}const k={components:{vueAgileScrollbar:z},props:f,mixins:[$],data(){return{head:{rowNumber:1,left:[],middle:[],right:[]},rows:[],cols:[],expand:{},virtualScrollX:null,virtualScrollY:null,offsetTop:0,stickyType:""}},computed:{offsetLeft(){let t=5;return this.head.left.forEach(e=>{t+=e.width>0?e.width:d.minWidth}),t},offsetRight(){let t=5;return this.head.right.forEach(e=>{t+=e.width>0?e.width:d.minWidth}),t}},watch:{columns(){this.init()},dataSource(){this.init()}},created(){},mounted(){this.init(),this.expand=this.$scopedSlots.expand?{}:null},methods:{init(){!this.dataSource.length||!this.columns.length||(this.setHead(),this.virtual=new x({rowsNum:this.dataSource.length,colsNum:this.columns.length,rowSize:this.rowSize,expandSize:this.expandSize,colSize:this.colSize}),this.setCols(0),this.setRows(0))},setHead(){let t=[],e=[],s=[],l=this.columns.length,r=null,i=null;for(let n=0,c=l-1;c>=0;n++,c--){const o=this.columns[n],a=this.columns[c];if(o.fixed?(o.fixed="left",t.push(o)):r=n,a.fixed?(a.fixed="right",s.unshift(a)):i=c,r!==null&&i!==null)break}e=r!==0&&i!==l?this.columns.slice(r,i):this.columns,this.head={left:t,middle:e,right:s},this.$refs.tabelHead&&(this.offsetTop=this.$refs.tabelHead.offsetHeight+5)},setRows(t){let e=this.virtual.getRowsRegion(t,this.expand,this.$refs.virtualBottom,this.$refs.virtualTop);e?(this.virtualScrollY=e,this.rows=this.dataSource.slice(this.virtualScrollY.start,this.virtualScrollY.end)):e===null&&(this.rows=this.dataSource)},setCols(t){let e=this.virtual.getColRegion(t);e?(this.virtualScrollX=e,this.cols=this.head.middle.slice(this.virtualScrollX.start,this.virtualScrollX.end)):e===null&&(this.cols=this.head.middle)},getThStyle(t){return{width:(t.width>0?t.width:d.width)+"px"}},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||d.align]]},getSticky(t,e){let s=t;return t.fixed==="left"&&(s=e?this.head.left[e-1]:t),t.fixed==="right"&&(s=e?this.head.right[e]:t),{width:(t.width>0?t.width:d.width)+"px",[t.fixed]:e*(s.width||d.width)+"px"}},scroll(t){this.virtualScrollX&&this.setCols(t.left),this.virtualScrollY&&this.setRows(t.top)},trClick(t,e){this.expand&&(this.expand[e]?this.expand[e]=!1:this.$set(this.expand,e,!0),this.$nextTick(()=>{this.expand[e]&&(this.expand[e]=this.$refs[t[this.rowKey]+"expand"][0].offsetHeight)}))},expandKey(t){return this.virtualScrollY?t+this.virtualScrollY.start:t},scrollUpdated(t){this.dragSize.height=t.scrollContentHeight>t.scrollHeight?t.scrollHeight:t.scrollContentHeight,t.scrollBarX?t.left===0&&(this.stickyType="left"):this.stickyType=""},scrollHit(t){this.stickyType=t}}},w={};var W=T(k,H,Y,!1,E,null,null,null);function E(t){for(let e in w)this[e]=w[e]}var N=function(){return W.exports}();return N});
+(function(d,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f():typeof define=="function"&&define.amd?define(f):(d=typeof globalThis!="undefined"?globalThis:d||self,d["vue-stability-table"]=f())})(this,function(){"use strict";const d={label:"",prop:"",align:"left",fixed:!1,key:"",resizable:!1,width:100,minWidth:80,maxWidth:null,formatter:null};var f={columns:{type:Array},dataSource:{type:Array},sticky:{type:Boolean,default:!1},childrenColumnName:{type:String,default:"children"},defaultExpandAllRows:{type:Boolean,default:!1},pagination:{type:[Boolean,Object],default:!1},rowClassName:{type:String,default:""},rowKey:{type:String,default:"id"},rowSize:{type:Number,default:50},expandSize:{type:Number,default:null},colSize:{type:Number,default:80},emptyText:{type:String,default:"\u6682\u65E0\u6570\u636E"}},y={minBarSize:{type:Number,default:50},scrollTop:{type:[Number,Function],default:0},scrollLeft:{type:[Number,Function],default:0},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},offsetHit:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},m=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{ref:"scrollBox",staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY}},[s("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[s("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),t.scrollBarX.show?s("div",{staticClass:"agile-scroll-bar-x",class:{act:t.scrollBarX.clientX||t.scrollBarY.clientY},style:{left:t.scrollBarX.left+"px",width:t.scrollBarX.width+"px",bottom:t.scrollBarX.bottom},on:{mousedown:function(l){return t.scrollBarDown(l,"scrollBarX")}}}):t._e(),t.scrollBarY.show?s("div",{staticClass:"agile-scroll-bar-y",class:{act:t.scrollBarY.clientY||t.scrollBarX.clientX},style:{top:t.scrollBarY.top+"px",height:t.scrollBarY.height+"px"},on:{mousedown:function(l){return t.scrollBarDown(l,"scrollBarY")}}}):t._e()])},_=[];function b(t,e,s,l,r,i,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var a;if(n?(a=function(h){h=h||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!h&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(h=__VUE_SSR_CONTEXT__),r&&r.call(this,h),h&&h._registeredComponents&&h._registeredComponents.add(n)},o._ssrRegister=a):r&&(a=c?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(o.functional){o._injectStyles=a;var g=o.render;o.render=function(v,p){return a.call(p),g(v,p)}}else{var u=o.beforeCreate;o.beforeCreate=u?[].concat(u,a):[a]}return{exports:t,options:o}}const C={props:y,data(){return{scrollBarY:{show:!0,clientY:null,height:0,top:this.offsetTop,multiple:1},scrollBarX:{show:!0,clientX:null,width:0,bottom:0,left:this.offsetLeft,multiple:1},scrollWidth:0,scrollHeight:0,scrollContentWidth:0,scrollContentHeight:0}},watch:{offsetLeft(){this.setScrollBarLeft()},offsetRight(){this.setScrollBarLeft()},offsetTop(){this.setScrollBarTop()},offsetBottom(){this.setScrollBarTop()}},mounted(){this.$scrollBox=this.$refs.scrollBox,this.$scroll=this.$refs.scroll,this.$scrollContent=this.$refs.scrollContent,this.updated(),this.isAutoUpdate&&(this.observer=new MutationObserver(this.updated),this.observer.observe(this.$refs.scrollContent,{attributes:!0,childList:!0,subtree:!0})),this.addDragEvent()},methods:{initContainer(){this.scrollWidth=this.$scrollBox.offsetWidth,this.scrollHeight=this.$scrollBox.offsetHeight,this.scrollContentWidth=this.$scrollContent.offsetWidth,this.scrollContentHeight=this.$scrollContent.offsetHeight},initScrollBar(){if(this.scrollContentWidth>this.scrollWidth){const t=this.scrollWidth-(this.scrollContentWidth-this.scrollWidth)-this.offsetLeft-this.offsetRight;this.scrollBarX.show=!0,this.scrollBarX.width=t<this.minBarSize?this.minBarSize:t,this.scrollBarX.multiple=(this.scrollContentWidth-this.scrollWidth)/(this.scrollWidth-this.scrollBarX.width-this.offsetLeft-this.offsetRight)}else this.scrollBarX.show=!1;if(this.scrollContentHeight>this.scrollHeight){const t=this.scrollHeight-(this.scrollContentHeight-this.scrollHeight)-this.offsetTop-this.offsetBottom;this.scrollBarY.show=!0,this.scrollBarY.height=t<this.minBarSize?this.minBarSize:t,this.scrollBarY.multiple=(this.scrollContentHeight-this.scrollHeight)/(this.scrollHeight-this.scrollBarY.height-this.offsetTop-this.offsetBottom),this.scrollBarX.bottom=0}else this.scrollBarY.show=!1,this.scrollBarX.bottom=this.scrollHeight-this.scrollContentHeight+"px"},updated(){this.initContainer(),this.initScrollBar(),this.$emit("updated",{scrollBarY:this.scrollBarY.show,scrollBarX:this.scrollBarX.show,top:this.$scroll.scrollTop,left:this.$scroll.scrollLeft,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})},setScrollBarLeft(){const t=this.$scroll.scrollLeft,e=this.offsetLeft+Math.floor(t/this.scrollBarX.multiple);return e!==this.scrollBarX.left&&(this.scrollBarX.left=e),t},setScrollBarTop(){const t=this.$scroll.scrollTop,e=this.offsetTop+Math.floor(t/this.scrollBarY.multiple);return e!==this.scrollBarY.top&&(this.scrollBarY.top=e),t},onScroll(t){this.ticking||(window.requestAnimationFrame(()=>{const e=this.setScrollBarTop(),s=this.setScrollBarLeft();this.$emit("scroll",{top:e,left:s,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight},t),this._events["scroll-hit"]&&this.onScrollHit(e,s),this.ticking=!1}),this.ticking=!0)},onScrollHit(t,e){let s="top",l=t-this.initTop,r=e-this.initLeft;this.initTop=t,this.initLeft=e;const i=()=>{this.$emit("scroll-hit",s,{top:t,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};l!==0&&this.scrollBarY.height&&(l<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&i(),t===0&&s==="top"&&i()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",e===0&&s==="left"||this.scrollContentWidth-this.scrollWidth-e==0||(s="xMiddle"),i())},scrollBarDown(t,e){e==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),e==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const e=this.scrollBarX.clientX,s=this.scrollBarY.clientY;if(e){let l=t.clientX-e;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+l*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let l=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+l*this.scrollBarY.multiple*this.dragSpeedY}},scrollBarUp(){this.scrollBarX.clientX=null,this.scrollBarY.clientY=null,window.removeEventListener("mousemove",this.scrollBarDrag)},addDragEvent(){window.addEventListener("mouseup",this.scrollBarUp)},removeDragEvent(){window.removeEventListener("mouseup",this.scrollBarUp)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},S={};var B=b(C,m,_,!1,X,null,null,null);function X(t){for(let e in S)this[e]=S[e]}var z=function(){return B.exports}(),D="";class x{constructor(e){this.opts=Object.assign({},{rowsNum:0,colsNum:0,rowSize:50,colSize:100,expandSize:null,fixedColNum:0,viewHeight:500,viewWidth:800},e),this.rowStart=null,this.rowEnd=null,this.colStart=null,this.colEnd=null,this.topDistance=0,this.bottomDistance=0,this.leftDistance=0,this.rightDistance=0,this.scrollTop=0}getRowsRegion(e,s,l,r){if(this.opts.rowsNum<=60)return null;if(!e||Math.abs(e-this.scrollTop)>this.opts.rowSize){this.scrollTop=e;let i,n,c={top:0,middle:0,bottom:0};if(e<this.opts.viewHeight)i=0,n=30;else if(l.offsetTop-e<this.opts.viewHeight){if(i=this.rowEnd-10,n=i+30,n>this.opts.rowsNum&&(n=this.opts.rowsNum),s)for(const o in s)o<i&&(c.top+=s[o])}else if(r&&e-r.clientHeight<100&&(i=this.rowStart-20,n=this.rowEnd-20,s))for(const o in s)o<i?c.top+=s[o]:o>n&&(c.bottom+=s[o]);if(console.log(c),i!==void 0&&n!==void 0&&i!==this.rowStart&&n!==this.rowEnd)return this.rowStart=i,this.rowEnd=n,this.topDistance=this.rowStart*this.opts.rowSize+c.top,this.bottomDistance=(this.opts.rowsNum-this.rowEnd)*this.opts.rowSize+c.bottom,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}}getColRegion(e){const s=this.opts.colSize,l=Math.floor(this.opts.viewWidth/s);if(this.opts.colsNum<=l*3)return null;let r,i,n;if(e<this.opts.viewWidth)r=0,i=l*2;else{r=Math.floor(e/s)-l;let c=r+l*3;i=c,c>this.opts.colsNum&&(i=this.opts.colsNum,this.rightDistance=0,n=!0)}if((r!==this.colStart||i!==this.colEnd)&&i-this.colEnd>5||this.colEnd-i>5||n)return this.colStart=r,this.colEnd=i,this.leftDistance=this.colStart*s,this.rightDistance=(this.opts.colsNum-this.colEnd)*s,{start:this.colStart,end:this.colEnd,left:this.leftDistance,right:this.rightDistance}}}var $={data(){return{dragSize:{clientX:null,dWidth:0,height:0,rulerLeft:0,colItem:null}}},mounted(){this.addDragEvent()},methods:{dragSizeDown(t,e){this.dragSize.rulerLeft=t.clientX-this.$refs.tableBox.getBoundingClientRect().x,this.dragSize.height=this.$refs.scroll.scrollHeight,this.dragSize.clientX=t.clientX,this.dragSize.width=e.width,this.dragSize.colItem=e,this.dragSize.element=t.target,window.addEventListener("mousemove",this.dragSizeMove),this.dragSize.element.setAttribute("data-darg-act","true")},dragSizeMove(t){const e=this.dragSize.clientX;if(e){let s=t.clientX-e;this.dragSize.dWidth=s,this.$refs.dargSizeRuler.style.left=this.dragSize.rulerLeft+s+"px"}},dragSizeUp(){if(this.dragSize.clientX){this.dragSize.clientX=null,this.dragSize.element.setAttribute("data-darg-act","false");const t=this.dragSize.colItem.minWidth||d.minWidth;let e=this.dragSize.width+this.dragSize.dWidth;e<t&&(e=t),this.dragSize.colItem.width=e,window.removeEventListener("mousemove",this.dragSizeMove)}},addDragEvent(){window.addEventListener("mouseup",this.dragSizeUp)},removeDragEvent(){window.removeEventListener("mouseup",this.dragSizeUp)}},beforeDestroy(){this.removeDragEvent()}},H=function(){var t=this,e=t.$createElement,s=t._self._c||e;return s("div",{staticClass:"vue-stability-table",class:{"not-user-select":t.dragSize.clientX}},[s("div",{ref:"tableBox",staticClass:"vue-stability-table-wrapper"},[s("vueAgileScrollbar",{ref:"scroll",attrs:{offsetLeft:t.offsetLeft,offsetRight:t.offsetRight,offsetTop:t.offsetTop},on:{scroll:t.scroll,updated:t.scrollUpdated,"scroll-hit":t.scrollHit}},[s("table",{staticClass:"stability-wrapper-table",class:{"not-sticky":!t.stickyType,"not-sticky-left":t.stickyType==="left","not-sticky-right":t.stickyType==="right"},attrs:{cellpadding:"0",cellspacing:"0"}},[s("thead",{ref:"tabelHead",staticClass:"stability-wrapper-table-head"},[s("tr",[t._l(t.head.left,function(l,r){return s("th",{key:l.prop,class:{"sticky-left":r===t.head.left.length-1},style:t.getSticky(l,r),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell cell-th",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(l){return s("th",{key:l.prop,style:t.getThStyle(l)},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,l)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(l,r){return s("th",{key:l.prop,class:{"sticky-right":r===0},style:t.getSticky(l,t.head.right.length-1-r),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("headerText",function(){return[s("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(t._s(l.label))])]},{column:l})],2),l.resizable&&l.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])})],2)]),s("tbody",[t.virtualScrollY?s("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(l,r){return[s("tr",{key:l[t.rowKey],staticClass:"stability-wrapper-table-tbody-tr",on:{click:function(i){t.trClick(l,t.expandKey(r))}}},[t._l(t.head.left,function(i,n){return s("td",{key:i.prop,class:{"sticky-left":n===t.head.left.length-1},style:t.getSticky(i,n),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l[i.prop],rowIndex:t.expandKey(n)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.cols,function(i){return s("td",{key:i.prop},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l[i.prop],rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.head.right,function(i,n){return s("td",{key:i.prop,class:{"sticky-right":n===0},style:t.getSticky(i,t.head.right.length-1-n),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[s("div",{staticClass:"text-content",attrs:{title:l[i.prop]}},[t._v(t._s(l[i.prop]))])]},{row:l,column:i,content:l[i.prop],rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?s("tr",{key:l[t.rowKey]+"expand",ref:l[t.rowKey]+"expand",refInFor:!0},[s("td",{attrs:{colspan:t.columns.length}},[t._t("expand",null,{row:l,rowIndex:t.expandKey(r)})],2)]):t._e()]}),t.virtualScrollY?s("tr",{ref:"virtualBottom",style:{height:t.virtualScrollY.bottom+"px"}}):t._e()],2)])]),s("div",{directives:[{name:"show",rawName:"v-show",value:t.dragSize.clientX,expression:"dragSize.clientX"}],ref:"dargSizeRuler",staticClass:"darg-size-ruler",style:{left:t.dragSize.rulerLeft+"px",height:t.dragSize.height+"px"}})],1)])},Y=[],L="";function T(t,e,s,l,r,i,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var a;if(n?(a=function(h){h=h||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!h&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(h=__VUE_SSR_CONTEXT__),r&&r.call(this,h),h&&h._registeredComponents&&h._registeredComponents.add(n)},o._ssrRegister=a):r&&(a=c?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),a)if(o.functional){o._injectStyles=a;var g=o.render;o.render=function(v,p){return a.call(p),g(v,p)}}else{var u=o.beforeCreate;o.beforeCreate=u?[].concat(u,a):[a]}return{exports:t,options:o}}const k={components:{vueAgileScrollbar:z},props:f,mixins:[$],data(){return{head:{rowNumber:1,left:[],middle:[],right:[]},rows:[],cols:[],expand:{},virtualScrollX:null,virtualScrollY:null,offsetTop:0,stickyType:""}},computed:{offsetLeft(){let t=5;return this.head.left.forEach(e=>{t+=e.width>0?e.width:d.minWidth}),t},offsetRight(){let t=5;return this.head.right.forEach(e=>{t+=e.width>0?e.width:d.minWidth}),t}},watch:{columns(){this.init()},dataSource(){this.init()}},created(){},mounted(){this.init(),this.expand=this.$scopedSlots.expand?{}:null},methods:{init(){!this.dataSource.length||!this.columns.length||(this.setHead(),this.virtual=new x({rowsNum:this.dataSource.length,colsNum:this.columns.length,rowSize:this.rowSize,expandSize:this.expandSize,colSize:this.colSize}),this.setCols(0),this.setRows(0))},setHead(){let t=[],e=[],s=[],l=this.columns.length,r=null,i=null;for(let n=0,c=l-1;c>=0;n++,c--){const o=this.columns[n],a=this.columns[c];if(o.fixed?(o.fixed="left",t.push(o)):r=n,a.fixed?(a.fixed="right",s.unshift(a)):i=c,r!==null&&i!==null)break}e=r!==0&&i!==l?this.columns.slice(r,i):this.columns,this.head={left:t,middle:e,right:s},this.$refs.tabelHead&&(this.offsetTop=this.$refs.tabelHead.offsetHeight+5)},setRows(t){let e=this.virtual.getRowsRegion(t,this.expand,this.$refs.virtualBottom,this.$refs.virtualTop);e?(this.virtualScrollY=e,this.rows=this.dataSource.slice(this.virtualScrollY.start,this.virtualScrollY.end)):e===null&&(this.rows=this.dataSource)},setCols(t){let e=this.virtual.getColRegion(t);e?(this.virtualScrollX=e,this.cols=this.head.middle.slice(this.virtualScrollX.start,this.virtualScrollX.end)):e===null&&(this.cols=this.head.middle)},getThStyle(t){return{width:(t.width>0?t.width:d.width)+"px"}},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||d.align]]},getSticky(t,e){let s=t;return t.fixed==="left"&&(s=e?this.head.left[e-1]:t),t.fixed==="right"&&(s=e?this.head.right[e]:t),{width:(t.width>0?t.width:d.width)+"px",[t.fixed]:e*(s.width||d.width)+"px"}},scroll(t){this.virtualScrollX&&this.setCols(t.left),this.virtualScrollY&&this.setRows(t.top)},trClick(t,e){this.expand&&(this.expand[e]?this.expand[e]=!1:this.$set(this.expand,e,!0),this.$nextTick(()=>{this.expand[e]&&(this.expand[e]=this.$refs[t[this.rowKey]+"expand"][0].offsetHeight)}))},expandKey(t){return this.virtualScrollY?t+this.virtualScrollY.start:t},scrollUpdated(t){this.dragSize.height=t.scrollContentHeight>t.scrollHeight?t.scrollHeight:t.scrollContentHeight,t.scrollBarX?t.left===0&&(this.stickyType="left"):this.stickyType=""},scrollHit(t){this.stickyType=t}}},w={};var W=T(k,H,Y,!1,E,null,null,null);function E(t){for(let e in w)this[e]=w[e]}var N=function(){return W.exports}();return N});

package.json

 {
   "name": "vue-stability-table",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Stability table for large amount of data display",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55942

increased by0.09%

No dependency changes