vue-stability-table - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/vue-stability-table.es.js

@@ -702,2 +702,4 @@ const columns = {
     init() {
+      if (!this.dataSource.length || !this.columns.length)
+        return;
       this.setHead();
@@ -704,0 +706,0 @@ this.virtual = new Virtual({

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:null,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:""},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(i){return t.scrollBarDown(i,"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(i){return t.scrollBarDown(i,"scrollBarY")}}}):t._e()])},_=[];function b(t,e,s,i,r,l,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),i&&(o.functional=!0),l&&(o._scopeId="data-v-"+l);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 B={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",i=t-this.initTop,r=e-this.initLeft;this.initTop=t,this.initLeft=e;const l=()=>{this.$emit("scroll-hit",s,{top:t,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};i!==0&&this.scrollBarY.height&&(i<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&l(),t===0&&s==="top"&&l()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",e===0&&s==="left"||this.scrollContentWidth-this.scrollWidth-e==0||(s="xMiddle"),l())},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 i=t.clientX-e;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+i*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let i=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+i*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 C=b(B,y,_,!1,z,null,null,null);function z(t){for(let e in S)this[e]=S[e]}var X=function(){return C.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,i,r){if(this.opts.rowsNum<=60)return null;if(!e||Math.abs(e-this.scrollTop)>this.opts.rowSize){this.scrollTop=e;let l,n,c={top:0,middle:0,bottom:0};if(e<this.opts.viewHeight)l=0,n=30;else if(i.offsetTop-e<this.opts.viewHeight){if(l=this.rowEnd-10,n=l+30,n>this.opts.rowsNum&&(n=this.opts.rowsNum),this.opts.expandSize)for(const o in s)o<l&&(c.top+=this.opts.expandSize)}else if(r&&e-r.clientHeight<100&&(l=this.rowStart-20,n=this.rowEnd-20,this.opts.expandSize))for(const o in s)o<l?c.top+=this.opts.expandSize:o>n&&(c.bottom+=this.opts.expandSize);if(l!==void 0&&n!==void 0&&l!==this.rowStart&&n!==this.rowEnd)return this.rowStart=l,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,i=Math.floor(this.opts.viewWidth/s);if(this.opts.colsNum<=i*3)return null;let r,l,n;if(e<this.opts.viewWidth)r=0,l=i*2;else{r=Math.floor(e/s)-i;let c=r+i*3;l=c,c>this.opts.colsNum&&(l=this.opts.colsNum,this.rightDistance=0,n=!0)}if((r!==this.colStart||l!==this.colEnd)&&l-this.colEnd>5||this.colEnd-l>5||n)return this.colStart=r,this.colEnd=l,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(i,r){return s("th",{key:i.prop,class:{"sticky-left":r===t.head.left.length-1},style:t.getSticky(i,r),attrs:{sticky:"left",title:i.label}},[s("div",{staticClass:"stability-table-cell cell-th",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(l){return t.dragSizeDown(l,i)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(i){return s("th",{key:i.prop,style:t.getThStyle(i)},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,i)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(i,r){return s("th",{key:i.prop,class:{"sticky-right":r===0},style:t.getSticky(i,t.head.right.length-1-r),attrs:{sticky:"right",title:i.label}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(l){return t.dragSizeDown(l,i)}}}):t._e()])})],2)]),s("tbody",[t.virtualScrollY?s("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(i,r){return[s("tr",{key:i.id,staticClass:"stability-wrapper-table-tbody-tr",on:{click:function(l){t.trClick(i,t.expandKey(r))}}},[t._l(t.head.left,function(l,n){return s("td",{key:l.prop,class:{"sticky-left":n===t.head.left.length-1},style:t.getSticky(l,n),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(n)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.cols,function(l){return s("td",{key:l.prop},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.head.right,function(l,n){return s("td",{key:l.prop,class:{"sticky-right":n===0},style:t.getSticky(l,t.head.right.length-1-n),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?s("tr",{key:i.id+"expand"},[s("td",{attrs:{colspan:t.columns.length}},[s("div",{staticStyle:{height:"100px"}},[t._t("expand",null,{row:i,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 W(t,e,s,i,r,l,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),i&&(o.functional=!0),l&&(o._scopeId="data-v-"+l);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:X},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.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=[],i=this.columns.length,r=null,l=null;for(let n=0,c=i-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)):l=c,r!==null&&l!==null)break}e=r!==0&&l!==i?this.columns.slice(r,l):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){let e={};const s=t.minWidth||d.minWidth;let i=t.width||s;return e["min-width"]=i>0?i+"px":i,t.width&&(e.width=t.width>0?t.width+"px":t.width,e["max-width"]=e.width),e},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||d.align]]},getSticky(t,e){let s=t;const i=t.minWidth||d.minWidth;t.fixed==="left"&&(s=e?this.head.left[e-1]:t),t.fixed==="right"&&(s=e?this.head.right[e]:t);let r={"min-width":(t.width>0?t.width:i)+"px",[t.fixed]:e*(s.width||i)+"px"};return t.width&&(r.width=t.width>0?t.width+"px":t.width),r},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))},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 T=W(k,H,Y,!1,E,null,null,null);function E(t){for(let e in w)this[e]=w[e]}var N=function(){return T.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:null,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:""},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(i){return t.scrollBarDown(i,"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(i){return t.scrollBarDown(i,"scrollBarY")}}}):t._e()])},_=[];function b(t,e,s,i,r,l,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),i&&(o.functional=!0),l&&(o._scopeId="data-v-"+l);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 B={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",i=t-this.initTop,r=e-this.initLeft;this.initTop=t,this.initLeft=e;const l=()=>{this.$emit("scroll-hit",s,{top:t,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};i!==0&&this.scrollBarY.height&&(i<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&l(),t===0&&s==="top"&&l()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",e===0&&s==="left"||this.scrollContentWidth-this.scrollWidth-e==0||(s="xMiddle"),l())},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 i=t.clientX-e;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+i*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let i=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+i*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 C=b(B,y,_,!1,z,null,null,null);function z(t){for(let e in S)this[e]=S[e]}var X=function(){return C.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,i,r){if(this.opts.rowsNum<=60)return null;if(!e||Math.abs(e-this.scrollTop)>this.opts.rowSize){this.scrollTop=e;let l,n,c={top:0,middle:0,bottom:0};if(e<this.opts.viewHeight)l=0,n=30;else if(i.offsetTop-e<this.opts.viewHeight){if(l=this.rowEnd-10,n=l+30,n>this.opts.rowsNum&&(n=this.opts.rowsNum),this.opts.expandSize)for(const o in s)o<l&&(c.top+=this.opts.expandSize)}else if(r&&e-r.clientHeight<100&&(l=this.rowStart-20,n=this.rowEnd-20,this.opts.expandSize))for(const o in s)o<l?c.top+=this.opts.expandSize:o>n&&(c.bottom+=this.opts.expandSize);if(l!==void 0&&n!==void 0&&l!==this.rowStart&&n!==this.rowEnd)return this.rowStart=l,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,i=Math.floor(this.opts.viewWidth/s);if(this.opts.colsNum<=i*3)return null;let r,l,n;if(e<this.opts.viewWidth)r=0,l=i*2;else{r=Math.floor(e/s)-i;let c=r+i*3;l=c,c>this.opts.colsNum&&(l=this.opts.colsNum,this.rightDistance=0,n=!0)}if((r!==this.colStart||l!==this.colEnd)&&l-this.colEnd>5||this.colEnd-l>5||n)return this.colStart=r,this.colEnd=l,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(i,r){return s("th",{key:i.prop,class:{"sticky-left":r===t.head.left.length-1},style:t.getSticky(i,r),attrs:{sticky:"left",title:i.label}},[s("div",{staticClass:"stability-table-cell cell-th",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(l){return t.dragSizeDown(l,i)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(i){return s("th",{key:i.prop,style:t.getThStyle(i)},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,i)}}}):t._e()])}),t.virtualScrollX?s("td",{style:{"min-width":t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(i,r){return s("th",{key:i.prop,class:{"sticky-right":r===0},style:t.getSticky(i,t.head.right.length-1-r),attrs:{sticky:"right",title:i.label}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._v(" "+t._s(i.label)+" ")]),i.resizable&&i.width>0?s("span",{staticClass:"resize-handle",on:{mousedown:function(l){return t.dragSizeDown(l,i)}}}):t._e()])})],2)]),s("tbody",[t.virtualScrollY?s("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(i,r){return[s("tr",{key:i.id,staticClass:"stability-wrapper-table-tbody-tr",on:{click:function(l){t.trClick(i,t.expandKey(r))}}},[t._l(t.head.left,function(l,n){return s("td",{key:l.prop,class:{"sticky-left":n===t.head.left.length-1},style:t.getSticky(l,n),attrs:{sticky:"left"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(n)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.cols,function(l){return s("td",{key:l.prop},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?s("td"):t._e(),t._l(t.head.right,function(l,n){return s("td",{key:l.prop,class:{"sticky-right":n===0},style:t.getSticky(l,t.head.right.length-1-n),attrs:{sticky:"right"}},[s("div",{staticClass:"stability-table-cell",class:t.getCellClass(l)},[t._t("content",function(){return[t._v(t._s(i.id))]},{row:i,column:l,content:i.id,rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?s("tr",{key:i.id+"expand"},[s("td",{attrs:{colspan:t.columns.length}},[s("div",{staticStyle:{height:"100px"}},[t._t("expand",null,{row:i,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 W(t,e,s,i,r,l,n,c){var o=typeof t=="function"?t.options:t;e&&(o.render=e,o.staticRenderFns=s,o._compiled=!0),i&&(o.functional=!0),l&&(o._scopeId="data-v-"+l);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:X},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=[],i=this.columns.length,r=null,l=null;for(let n=0,c=i-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)):l=c,r!==null&&l!==null)break}e=r!==0&&l!==i?this.columns.slice(r,l):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){let e={};const s=t.minWidth||d.minWidth;let i=t.width||s;return e["min-width"]=i>0?i+"px":i,t.width&&(e.width=t.width>0?t.width+"px":t.width,e["max-width"]=e.width),e},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||d.align]]},getSticky(t,e){let s=t;const i=t.minWidth||d.minWidth;t.fixed==="left"&&(s=e?this.head.left[e-1]:t),t.fixed==="right"&&(s=e?this.head.right[e]:t);let r={"min-width":(t.width>0?t.width:i)+"px",[t.fixed]:e*(s.width||i)+"px"};return t.width&&(r.width=t.width>0?t.width+"px":t.width),r},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))},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 T=W(k,H,Y,!1,E,null,null,null);function E(t){for(let e in w)this[e]=w[e]}var N=function(){return T.exports}();return N});

package.json

 {
   "name": "vue-stability-table",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Stability table for large amount of data display",
@@ -24,3 +24,2 @@ "author": {
   "dependencies": {
-    "vue": "^2.6.14",
     "vue-agile-scrollbar": "^1.0.12"
@@ -33,3 +32,4 @@ },
     "vite-plugin-vue2": "^1.9.0",
-    "vue-template-compiler": "^2.6.14"
+    "vue-template-compiler": "^2.6.14",
+    "vue": "^2.6.14"
   },
@@ -36,0 +36,0 @@ "engines": {

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

54715

increased by0.23%

Dependency count

1

decreased by-50%

Lines of code

947

increased by0.21%

Worsened metrics

Dev dependency count

6

increased by20%

Dependency changes

• - Removedvue@^2.6.14

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.2(transitive)

• - Removed@babel/types@7.26.0(transitive)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.8(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.4.49(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedvue@2.7.16(transitive)