vue-stability-table - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

dist/vue-stability-table.es.js

@@ -14,3 +14,3 @@ const columns = {
   sortable: false,
-  class: ""
+  className: ""
 };
@@ -130,5 +130,5 @@ var props$1 = {
     "scrollbar-hide": _vm.displayType === "hide"
-  } }, [_c("div", { ref: "scroll", staticClass: "agile-scroll-content", on: { "scroll": _vm.onScroll } }, [_c("div", { ref: "scrollContent", staticClass: "agile-scroll-wrapper" }, [_vm._t("default")], 2)]), _vm.scrollBarX.show ? _c("div", { staticClass: "agile-scroll-bar-x", class: { act: _vm.scrollBarX.clientX || _vm.scrollBarY.clientY }, style: { left: _vm.scrollBarX.left + "px", width: _vm.scrollBarX.width + "px", bottom: _vm.scrollBarX.bottom }, on: { "mousedown": function($event) {
+  } }, [_c("div", { ref: "scroll", staticClass: "agile-scroll-content", on: { "scroll": _vm.onScroll } }, [_c("div", { ref: "scrollContent", staticClass: "agile-scroll-wrapper" }, [_vm._t("default")], 2)]), _vm.scrollBarX.show ? _c("div", { staticClass: "agile-scroll-bar-x", class: { act: _vm.scrollBarX.clientX }, style: { left: _vm.scrollBarX.left + "px", width: _vm.scrollBarX.width + "px", bottom: _vm.scrollBarX.bottom }, on: { "mousedown": function($event) {
     return _vm.scrollBarDown($event, "scrollBarX");
-  } } }) : _vm._e(), _vm.scrollBarY.show ? _c("div", { staticClass: "agile-scroll-bar-y", class: { act: _vm.scrollBarY.clientY || _vm.scrollBarX.clientX }, style: { top: _vm.scrollBarY.top + "px", height: _vm.scrollBarY.height + "px" }, on: { "mousedown": function($event) {
+  } } }) : _vm._e(), _vm.scrollBarY.show ? _c("div", { staticClass: "agile-scroll-bar-y", class: { act: _vm.scrollBarY.clientY }, style: { top: _vm.scrollBarY.top + "px", height: _vm.scrollBarY.height + "px" }, on: { "mousedown": function($event) {
     return _vm.scrollBarDown($event, "scrollBarY");
@@ -218,11 +218,13 @@ } } }) : _vm._e()]);
       this.setScrollBarLeft();
+      this.initScrollBar();
     },
     offsetRight() {
-      this.setScrollBarLeft();
+      this.initScrollBar();
     },
     offsetTop() {
       this.setScrollBarTop();
+      this.initScrollBar();
     },
     offsetBottom() {
-      this.setScrollBarTop();
+      this.initScrollBar();
     }
@@ -386,3 +388,3 @@ },
     removeDragEvent() {
-      window.removeEventListener("mouseup", this.scrollBarUp);
+      window.removeEventListener("mouseup", this.addDragEvent);
     },
@@ -607,2 +609,3 @@ setScrollLeft(number) {
         window.removeEventListener("mousemove", this.dragSizeMove);
+        this.$emit("resize-column", this.dragSize.colItem);
       }
@@ -837,23 +840,23 @@ },
   }, attrs: { "cellpadding": "0", "cellspacing": "0" }, on: { "click": _vm.tableClcik } }, [_c("thead", { ref: "tabelHead", staticClass: "stability-wrapper-table-head" }, [_c("tr", [_vm._l(_vm.head.left, function(item, i) {
-    return _c("th", { key: item.prop, class: [{ "sticky-left": i === _vm.head.left.length - 1 }, item.class, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, i), attrs: { "sticky": "left" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
+    return _c("th", { key: item.prop, class: [{ "sticky-left": i === _vm.head.left.length - 1 }, item.className, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, i), attrs: { "sticky": "left" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
       return _vm.sortChange(item);
-    } } }, [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._t("headerText", function() {
-      return [_vm._v(_vm._s(item.label))];
-    }, { "column": item })], 2), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 1), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
+    } } }, [_vm._t("header", function() {
+      return [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._v(" " + _vm._s(item.label) + " ")])];
+    }, { "column": item }), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 2), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
       return _vm.dragSizeDown($event, item);
     } } }) : _vm._e()]);
   }), _vm.virtualScrollX ? _c("td", { style: { "width": _vm.virtualScrollX.left + "px" } }) : _vm._e(), _vm._l(_vm.cols, function(item) {
-    return _c("th", { key: item.prop, class: [item.class, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getThStyle(item) }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
+    return _c("th", { key: item.prop, class: [item.className, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getThStyle(item) }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
       return _vm.sortChange(item);
-    } } }, [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._t("headerText", function() {
-      return [_vm._v(_vm._s(item.label))];
-    }, { "column": item })], 2), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 1), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
+    } } }, [_vm._t("header", function() {
+      return [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._v(" " + _vm._s(item.label) + " ")])];
+    }, { "column": item }), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 2), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
       return _vm.dragSizeDown($event, item);
     } } }) : _vm._e()]);
   }), _vm.virtualScrollX ? _c("td", { style: { "width": _vm.virtualScrollX.right + "px" } }) : _vm._e(), _vm._l(_vm.head.right, function(item, i) {
-    return _c("th", { key: item.prop, class: [{ "sticky-right": i === 0 }, item.class, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, _vm.head.right.length - 1 - i), attrs: { "sticky": "right" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
+    return _c("th", { key: item.prop, class: [{ "sticky-right": i === 0 }, item.className, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, _vm.head.right.length - 1 - i), attrs: { "sticky": "right" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item).concat([{ "sortable-column": item.sortable }]), on: { "click": function($event) {
       return _vm.sortChange(item);
-    } } }, [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._t("headerText", function() {
-      return [_vm._v(_vm._s(item.label))];
-    }, { "column": item })], 2), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 1), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
+    } } }, [_vm._t("header", function() {
+      return [_c("div", { staticClass: "text-content", attrs: { "title": item.label } }, [_vm._v(" " + _vm._s(item.label) + " ")])];
+    }, { "column": item }), item.sortable ? _c("Sort", { attrs: { "sort": item.prop, "sortOrders": _vm.sortOrders, "activeSort": _vm.activeSort } }) : _vm._e()], 2), item.resizable && item.width > 0 ? _c("span", { staticClass: "resize-handle", on: { "mousedown": function($event) {
       return _vm.dragSizeDown($event, item);
@@ -865,3 +868,3 @@ } } }) : _vm._e()]);
     } } }, [_vm._l(_vm.head.left, function(item, j) {
-      return _c("td", { key: item.prop, class: [{ "sticky-left": j === _vm.head.left.length - 1 }, item.class, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, j), attrs: { "sticky": "left" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item) }, [j === _vm.openIconColumn ? _c("span", { style: { width: row._treeIndex_ * 17 + "px" } }) : _vm._e(), j === _vm.openIconColumn && row[_vm.childrenColumnName] && row[_vm.childrenColumnName].length ? _c("open-icon", { attrs: { "active": _vm.tree[row[_vm.rowKey]] }, nativeOn: { "click": function($event) {
+      return _c("td", { key: item.prop, class: [{ "sticky-left": j === _vm.head.left.length - 1 }, item.className, { "act-sort": _vm.getActSortClass(item) }], style: _vm.getSticky(item, j), attrs: { "sticky": "left" } }, [_c("div", { staticClass: "stability-table-cell cell-flex", class: _vm.getCellClass(item) }, [j === _vm.openIconColumn ? _c("span", { style: { width: row._treeIndex_ * 17 + "px" } }) : _vm._e(), j === _vm.openIconColumn && row[_vm.childrenColumnName] && row[_vm.childrenColumnName].length ? _c("open-icon", { attrs: { "active": _vm.tree[row[_vm.rowKey]] }, nativeOn: { "click": function($event) {
         _vm.treeOpen(row, _vm.expandKey(i));
@@ -872,7 +875,7 @@ } } }) : _vm._e(), _vm._t("content", function() {
     }), _vm.virtualScrollX ? _c("td") : _vm._e(), _vm._l(_vm.cols, function(item, j) {
-      return _c("td", { key: item.prop, class: [item.class, { "act-sort": _vm.getActSortClass(item) }] }, [_c("div", { staticClass: "stability-table-cell", class: _vm.getCellClass(item) }, [_vm._t("content", function() {
+      return _c("td", { key: item.prop, class: [item.className, { "act-sort": _vm.getActSortClass(item) }] }, [_c("div", { staticClass: "stability-table-cell", class: _vm.getCellClass(item) }, [_vm._t("content", function() {
         return [_c("div", { staticClass: "text-content", attrs: { "title": _vm.getContent(row, item), "event-agent": "click", "row-index": _vm.expandKey(i), "col-index": _vm.head.left.length + j + (_vm.virtualScrollX ? _vm.virtualScrollX.start : 0) } }, [_vm._v(" " + _vm._s(_vm.getContent(row, item)) + " "), item.subProp ? [_c("br"), _c("span", { staticClass: "sub-text-content" }, [_vm._v(_vm._s(row[item.subProp]))])] : _vm._e()], 2)];
       }, { "row": row, "column": item, "content": _vm.getContent(row, item), "rowIndex": _vm.expandKey(i) })], 2)]);
     }), _vm.virtualScrollX ? _c("td") : _vm._e(), _vm._l(_vm.head.right, function(item, j) {
-      return _c("td", { key: item.prop, class: [{ "sticky-right": j === 0 }, item.class, { "act-sort": _vm.getActSortClass(item) }], 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() {
+      return _c("td", { key: item.prop, class: [{ "sticky-right": j === 0 }, item.className, { "act-sort": _vm.getActSortClass(item) }], 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() {
         return [_c("div", { staticClass: "text-content", attrs: { "title": _vm.getContent(row, item), "event-agent": "click", "row-index": _vm.expandKey(i), "col-index": _vm.head.left.length + _vm.head.middle.length + j } }, [_vm._v(" " + _vm._s(_vm.getContent(row, item)) + " "), item.subProp ? [_c("br"), _c("span", { staticClass: "sub-text-content" }, [_vm._v(_vm._s(row[item.subProp]))])] : _vm._e()], 2)];
@@ -1087,2 +1090,3 @@ }, { "row": row, "column": item, "content": _vm.getContent(row, item), "rowIndex": _vm.expandKey(i) })], 2)]);
       this.scrollTop = v.top;
+      this.$emit("scroll", ...arguments);
     },
@@ -1133,2 +1137,3 @@ trClick(row, rowIndex) {
       this.stickyType = v;
+      this.$emit("scroll-hit", ...arguments);
     },
@@ -1135,0 +1140,0 @@ treeOpen(row, rowIndex) {

dist/vue-stability-table.umd.js

@@ -1,1 +0,1 @@
-(function(f,g){typeof exports=="object"&&typeof module!="undefined"?module.exports=g():typeof define=="function"&&define.amd?define(g):(f=typeof globalThis!="undefined"?globalThis:f||self,f["vue-stability-table"]=g())})(this,function(){"use strict";const f={label:"",prop:"",subProp:"",align:"left",fixed:!1,key:"",resizable:!1,width:100,minWidth:80,maxWidth:null,formatter:null,sortable:!1,class:""};var g={columns:{type:Array},dataSource:{type:Array},sticky:{type:Boolean,default:!1},childrenColumnName:{type:String,default:"children"},indentSize:{type:Number,default:16},defaultExpandAllRows:{type:Boolean,default:!1},pagination:{type:[Boolean,Object],default:!1},rowKey:{type:String,default:"id"},rowSize:{type:Number,default:40},colSize:{type:Number,default:100},emptyText:{type:String,default:"\u6682\u65E0\u6570\u636E"},openIconColumn:{type:Number,default:0},scrollDisplayType:{type:String,default:"show"},sortMark:{type:Boolean,default:!0},rowClassName:{type:Function}},C={minBarSize:{type:Number,default:50},scrollTop:{type:Number,default:0},scrollLeft:{type:Number,default:0},displayType:{type:String,default:"hover"},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},m=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{ref:"scrollBox",staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY,"scrollbar-hover":t.displayType==="hover","scrollbar-hide":t.displayType==="hide"}},[e("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[e("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),t.scrollBarX.show?e("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?e("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()])},B=[];function x(t,s,e,l,r,i,a,h){var o=typeof t=="function"?t.options:t;s&&(o.render=s,o.staticRenderFns=e,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var n;if(a?(n=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),r&&r.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(a)},o._ssrRegister=n):r&&(n=h?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(o.functional){o._injectStyles=n;var p=o.render;o.render=function(u,v){return n.call(v),p(u,v)}}else{var d=o.beforeCreate;o.beforeCreate=d?[].concat(d,n):[n]}return{exports:t,options:o}}const $={name:"vueAgileScrollBar",props:C,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.setScrollLeft(),this.setScrollTop(),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,s=this.offsetLeft+Math.floor(t/this.scrollBarX.multiple);return s!==this.scrollBarX.left&&(this.scrollBarX.left=s),t},setScrollBarTop(){const t=this.$scroll.scrollTop,s=this.offsetTop+Math.floor(t/this.scrollBarY.multiple);return s!==this.scrollBarY.top&&(this.scrollBarY.top=s),t},onScroll(t){const s=this.setScrollBarTop(),e=this.setScrollBarLeft();this.$emit("scroll",{top:s,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight},t),this._events["scroll-hit"]&&this.onScrollHit(s,e)},onScrollHit(t,s){let e="top",l=t-this.initTop,r=s-this.initLeft;this.initTop=t,this.initLeft=s;const i=()=>{this.$emit("scroll-hit",e,{top:t,left:s,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};l!==0&&this.scrollBarY.height&&(l<0?e="top":e="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&i(),t===0&&e==="top"&&i()),r!==0&&this.scrollBarX.width&&(r<0?e="left":e="right",s===0&&e==="left"||this.scrollContentWidth-this.scrollWidth-s==0||(e="xMiddle"),i())},scrollBarDown(t,s){s==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),s==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const s=this.scrollBarX.clientX,e=this.scrollBarY.clientY;if(s){let l=t.clientX-s;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+l*(this.scrollBarX.multiple*this.dragSpeedX)}if(e){let l=t.clientY-e;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)},setScrollLeft(t){(t>=0||this.scrollLeft>=0)&&(this.$scroll.scrollLeft=t||this.scrollLeft)},setScrollTop(t){(t>=0||this.scrollTop>=0)&&(this.$scroll.scrollTop=t||this.scrollTop)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},_={};var X=x($,m,B,!1,z,null,null,null);function z(t){for(let s in _)this[s]=_[s]}var T=function(){return X.exports}(),tt="";class R{constructor(s){this.opts=Object.assign({},{rowsNum:0,colsNum:0,rowSize:50,colSize:100,expandSize:null,fixedColNum:0,viewHeight:500,viewWidth:800},s),this.topDistance=0,this.rowStart=null,this.rowEnd=null,this.bottomDistance=0,this.leftDistance=0,this.colStart=null,this.colEnd=null,this.rightDistance=0,this.scrollTop=0,this.scrollLeft=0}getRowsRegion(s,e){if(this.opts.rowsNum<=50)return null;let l,r,i={top:0,middle:0,bottom:0};const a=this.opts.rowsNum,h=this.opts.rowSize,o=this.opts.viewHeight,n=Math.ceil(o/h);if(e){let p=this.topDistance;if(s>this.scrollTop){for(let d=this.rowStart||0;d<a;d++)if(p+=h+(e&&e[d]||0),p>=s){l=d,r=l+n;break}}if(s<this.scrollTop&&p>=s){let d=0;for(let u=this.rowStart;u<this.rowEnd;u++)d+=h+(e&&e[u]||0);let c=0;for(const u in e)u<this.rowEnd&&(c+=e[u]);r=Math.floor((s+d-c)/h),r<n&&(r=n),l=r-n}for(const d in e)d<l?i.top+=e[d]:d>r&&(i.bottom+=e[d])}else l=Math.floor(s/h),r=l+n;if(r>a&&(r=a),l<0&&(l=0),l!==void 0&&r!==void 0&&(l!==this.rowStart||r!==this.rowEnd))return this.scrollTop=s,this.rowStart=l,this.rowEnd=r,this.topDistance=this.rowStart*this.opts.rowSize+i.top,this.bottomDistance=(a-this.rowEnd)*this.opts.rowSize+i.bottom,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}upRowsRegion(){const s=this.opts.rowsNum;return this.topDistance=this.rowStart*this.opts.rowSize,this.bottomDistance=(s>this.rowEnd?s-this.rowEnd:0)*this.opts.rowSize,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}emptyRowsRegion(){this.rowStart=null,this.rowEnd=null}getColRegion(s){const e=this.opts.colSize,l=Math.floor(this.opts.viewWidth/e);if(this.opts.colsNum<=30)return null;let r,i,a;if(s<this.opts.viewWidth)r=0,i=l*2;else{r=Math.floor(s/e)-l;let h=r+l*3;i=h,h>this.opts.colsNum&&(i=this.opts.colsNum,this.rightDistance=0,a=!0)}if(this.scrollLeft=s,(r!==this.colStart||i!==this.colEnd)&&i-this.colEnd>5||this.colEnd-i>5||a)return this.colStart=r,this.colEnd=i,this.leftDistance=this.colStart*e,this.rightDistance=(this.opts.colsNum-this.colEnd)*e,{start:this.colStart,end:this.colEnd,left:this.leftDistance,right:this.rightDistance}}}var k={data(){return{dragSize:{clientX:null,dWidth:0,height:0,rulerLeft:0,colItem:null}}},mounted(){this.addDragEvent()},methods:{dragSizeDown(t,s){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=s.width,this.dragSize.colItem=s,this.dragSize.element=t.target,window.addEventListener("mousemove",this.dragSizeMove),this.dragSize.element.setAttribute("data-darg-act","true")},dragSizeMove(t){const s=this.dragSize.clientX;if(s){let e=t.clientX-s;this.dragSize.dWidth=e,this.$refs.dargSizeRuler.style.left=this.dragSize.rulerLeft+e+"px"}},dragSizeUp(){if(this.dragSize.clientX){this.dragSize.clientX=null,this.dragSize.element.setAttribute("data-darg-act","false");const t=this.dragSize.colItem.minWidth||f.minWidth;let s=this.dragSize.width+this.dragSize.dWidth;s<t&&(s=t),this.dragSize.colItem.width=s,window.removeEventListener("mousemove",this.dragSizeMove)}},addDragEvent(){window.addEventListener("mouseup",this.dragSizeUp)},removeDragEvent(){window.removeEventListener("mouseup",this.dragSizeUp)}},beforeDestroy(){this.removeDragEvent()}},Y={data(){return{activeSort:"",sortOrders:""}},methods:{getActSortClass(t){return!!(this.sortMark&&t.sortable&&t.prop===this.activeSort)},sortChange(t){if(t.sortable)if(!this.activeSort||!this.sortOrders||this.sortOrders==="desc"||t.prop!==this.activeSort?this.sortOrders="asc":this.sortOrders==="asc"&&(this.sortOrders="desc"),this.activeSort=t.prop,this._events["on-sort-change"])this.$emit("on-sort-change",t.prop,this.sortOrders,t);else{let s=this.dataSource.slice(0);this.sortOrders&&s.sort((e,l)=>{let r=e[t.prop],i=l[t.prop];return r===i?0:typeof r==typeof i&&this.sortOrders==="asc"?r<i?-1:1:r>i?-1:1}),this.tree={},this.allRows=s,this.$refs.scroll.setScrollTop(0),this.virtualScrollY?(this.virtualScrollY=this.virtual.upRowsRegion(this.expand),this.rows=s.slice(this.virtualScrollY.start,this.virtualScrollY.end)):this.rows=s}}}},H=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("span",{staticClass:"stability-table-column-sorter"},[e("span",{staticClass:"stability-table-column-sorter-inner"},[e("span",{staticClass:"stability-table-column-sorter-up",class:{"sort-act":t.sort&&t.activeSort&&t.sort===t.activeSort&&t.sortOrders==="asc"},attrs:{role:"img"}},[e("svg",{attrs:{focusable:"false",width:"11",height:"11",fill:"currentColor","aria-hidden":"true",viewBox:"0 0 1024 1024"}},[e("path",{attrs:{d:"M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"}})])]),e("span",{staticClass:"stability-table-column-sorter-down",class:{"sort-act":t.sort&&t.activeSort&&t.sort===t.activeSort&&t.sortOrders==="desc"},attrs:{role:"img"}},[e("svg",{attrs:{focusable:"false",width:"11",height:"11",fill:"currentColor","aria-hidden":"true",viewBox:"0 0 1024 1024"}},[e("path",{attrs:{d:"M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"}})])])])])},E=[],et="";function S(t,s,e,l,r,i,a,h){var o=typeof t=="function"?t.options:t;s&&(o.render=s,o.staticRenderFns=e,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var n;if(a?(n=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),r&&r.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(a)},o._ssrRegister=n):r&&(n=h?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(o.functional){o._injectStyles=n;var p=o.render;o.render=function(u,v){return n.call(v),p(u,v)}}else{var d=o.beforeCreate;o.beforeCreate=d?[].concat(d,n):[n]}return{exports:t,options:o}}const L={props:{sort:{type:String,default:""},activeSort:{type:String,default:""},sortOrders:{type:String,default:""}},data(){return{}},methods:{}},w={};var W=S(L,H,E,!1,D,null,null,null);function D(t){for(let s in w)this[s]=w[s]}var N=function(){return W.exports}(),O=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("i",{staticClass:"stability-table-open-icon",class:{"rotate-down":t.active}},[e("svg",{attrs:{viewBox:"64 64 896 896","data-icon":"right",width:"10",height:"10",fill:"currentColor","aria-hidden":"true",focusable:"false"}},[e("path",{attrs:{d:"M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"}})])])},A=[],st="";const M={props:{active:{type:Boolean,default:!1}}},y={};var K=S(M,O,A,!1,U,null,null,null);function U(t){for(let s in y)this[s]=y[s]}var I=function(){return K.exports}();const V=function(t){let s={};for(let e=0;e<t.length;e++){let l=t[e],r={key:l.name,value:l.value};s[r.key]=r.value}return s};let F=function(t){return t.target||(t.target=t.srcElement,t.pageX=t.x,t.pageY=t.y),/mouseover/i.test(t.type)&&!t.relatedTarget?t.relatedTarget=t.fromElement:/mouseout/i.test(t.type)&&!t.relatedTarget&&(t.relatedTarget=t.toElement),t};const P=(t,s)=>{const e=F(t),l=e.currentTarget;let r=e.target,i,a,h;for(;r&&r!==l;){if(i=r.getAttribute("event-agent")||"",i=i.trim().toLowerCase().split(","),i.indexOf(e.type.toLowerCase())!==-1){h=V(r.attributes),a=!0;break}r=r.parentNode}a&&s&&s(r,h)};var j=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"stability-table",class:{"not-user-select":t.dragSize.clientX}},[e("div",{ref:"tableBox",staticClass:"stability-table-wrapper"},[e("vueAgileScrollbar",{ref:"scroll",attrs:{dragSpeedY:.6,displayType:t.scrollDisplayType,offsetLeft:t.offsetLeft,offsetRight:t.offsetRight,offsetTop:t.offsetTop},on:{scroll:t.scroll,updated:t.scrollUpdated,"scroll-hit":t.scrollHit}},[e("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"},on:{click:t.tableClcik}},[e("thead",{ref:"tabelHead",staticClass:"stability-wrapper-table-head"},[e("tr",[t._l(t.head.left,function(l,r){return e("th",{key:l.prop,class:[{"sticky-left":r===t.head.left.length-1},l.class,{"act-sort":t.getActSortClass(l)}],style:t.getSticky(l,r),attrs:{sticky:"left"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(i){return t.sortChange(l)}}},[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._t("headerText",function(){return[t._v(t._s(l.label))]},{column:l})],2),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],1),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])}),t.virtualScrollX?e("td",{style:{width:t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(l){return e("th",{key:l.prop,class:[l.class,{"act-sort":t.getActSortClass(l)}],style:t.getThStyle(l)},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(r){return t.sortChange(l)}}},[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._t("headerText",function(){return[t._v(t._s(l.label))]},{column:l})],2),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],1),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,l)}}}):t._e()])}),t.virtualScrollX?e("td",{style:{width:t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(l,r){return e("th",{key:l.prop,class:[{"sticky-right":r===0},l.class,{"act-sort":t.getActSortClass(l)}],style:t.getSticky(l,t.head.right.length-1-r),attrs:{sticky:"right"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(i){return t.sortChange(l)}}},[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._t("headerText",function(){return[t._v(t._s(l.label))]},{column:l})],2),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],1),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])})],2)]),e("tbody",[t.virtualScrollY?e("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(l,r){return[e("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,a){return e("td",{key:i.prop,class:[{"sticky-left":a===t.head.left.length-1},i.class,{"act-sort":t.getActSortClass(i)}],style:t.getSticky(i,a),attrs:{sticky:"left"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(i)},[a===t.openIconColumn?e("span",{style:{width:l._treeIndex_*17+"px"}}):t._e(),a===t.openIconColumn&&l[t.childrenColumnName]&&l[t.childrenColumnName].length?e("open-icon",{attrs:{active:t.tree[l[t.rowKey]]},nativeOn:{click:function(h){t.treeOpen(l,t.expandKey(r))}}}):t._e(),t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":a}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?e("td"):t._e(),t._l(t.cols,function(i,a){return e("td",{key:i.prop,class:[i.class,{"act-sort":t.getActSortClass(i)}]},[e("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":t.head.left.length+a+(t.virtualScrollX?t.virtualScrollX.start:0)}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?e("td"):t._e(),t._l(t.head.right,function(i,a){return e("td",{key:i.prop,class:[{"sticky-right":a===0},i.class,{"act-sort":t.getActSortClass(i)}],style:t.getSticky(i,t.head.right.length-1-a),attrs:{sticky:"right"}},[e("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":t.head.left.length+t.head.middle.length+a}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?e("tr",{key:l[t.rowKey]+"expand",ref:l[t.rowKey]+"expand",refInFor:!0},[e("td",{attrs:{colspan:t.columns.length}},[e("div",{staticClass:"tr-expand",style:{width:t.$refs.scroll.scrollWidth+"px"}},[t._t("expand",null,{row:l,rowIndex:t.expandKey(r)})],2)])]):t._e()]}),t.virtualScrollY?e("tr",{ref:"virtualBottom",style:{height:t.virtualScrollY.bottom+"px"}}):t._e()],2)])]),e("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)])},q=[],lt="";const G={components:{vueAgileScrollbar:T,Sort:N,openIcon:I},props:g,mixins:[k,Y],data(){return{allRows:[],head:{left:[],middle:[],right:[]},rows:[],cols:[],expand:null,tree:{},virtualScrollX:null,virtualScrollY:null,offsetTop:0,stickyType:""}},watch:{columns(t){this.updateColumns(t)},dataSource(t){this.updateRows(t)}},computed:{offsetLeft(){let t=5;return this.head.left.forEach(s=>{t+=s.width>0?s.width:f.minWidth}),t},offsetRight(){let t=5;return this.head.right.forEach(s=>{t+=s.width>0?s.width:f.minWidth}),t}},created(){this.init()},mounted(){this.setOffsetTop()},methods:{init(){!this.dataSource.length||!this.columns.length||(this.setHead(),this.allRows=this.dataSource.slice(0),this.setVirtual(),this.setCols(0),this.setRows(0))},updateColumns(t){this.$refs.scroll.setScrollLeft(0),this.head={left:[],middle:[],right:[]},this.cols=[],this.setVirtual({colsNum:t.length}),this.setHead(t),this.setCols(0)},updateRows(t){const s=t||this.dataSource;this.$refs.scroll.setScrollTop(0),this.allRows=s.slice(0),this.setVirtual({rowsNum:this.allRows.length}),this.setRows(0)},setVirtual(t={}){if(!this.virtual)this.virtual=new R({rowsNum:this.dataSource.length,colsNum:this.head.middle.length,rowSize:this.rowSize,colSize:this.colSize});else for(let s in t)this.virtual.opts[s]=t[s]},setHead(t){const s=t||this.columns;let e=[],l=[],r=[],i=s.length,a=null,h=null;for(let o=0;o<i;o++){const n=s[o];if(n.fixed)n.fixed="left",e.push(n);else{a=o;break}}for(let o=i-1;o>=0;o--){const n=s[o];if(n.fixed)n.fixed="right",r.unshift(n);else{h=o;break}}l=s.slice(a,h+1),this.head={left:e,middle:l,right:r},this.setOffsetTop()},setOffsetTop(){this.$refs.tabelHead&&(this.offsetTop=this.$refs.tabelHead.offsetHeight+5)},setRows(t){let s=this.virtual.getRowsRegion(t,this.expand);if(s){const e=s;this.rows=this.allRows.slice(e.start,e.end),this.virtualScrollY=e}else s===null&&(this.rows=this.allRows,this.virtualScrollY=null,this.virtual.emptyRowsRegion())},setCols(t){let s=this.virtual.getColRegion(t);s?(this.virtualScrollX=s,this.cols=this.head.middle.slice(this.virtualScrollX.start,this.virtualScrollX.end)):s===null&&(this.cols=this.head.middle)},getContent(t,s){let e=t[s.prop];return s.formatter&&typeof s.formatter=="function"&&e?s.formatter(e):e},getThStyle(t){return{width:(t.width>0?t.width:f.width)+"px"}},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||f.align]]},getSticky(t,s){let e=t;return t.fixed==="left"&&(e=s?this.head.left[s-1]:t),t.fixed==="right"&&(e=s?this.head.right[s]:t),{width:(t.width>0?t.width:f.width)+"px",[t.fixed]:s*(e.width||f.width)+"px"}},scroll(t){this.virtualScrollX&&this.setCols(t.left),(this.virtualScrollY||this.isUpdateRows)&&(this.setRows(t.top),this.isUpdateRows=!1),this.scrollTop=t.top},trClick(t,s){this.$scopedSlots.expand&&(this.expand||(this.expand={}),this.expand[s]?this.expand[s]=!1:this.$set(this.expand,s,!0),this.$nextTick(()=>{this.expand[s]&&(this.expand[s]=this.$refs[t[this.rowKey]+"expand"][0].offsetHeight)}),this.$emit("on-expand-change",t,this.expand[s]))},expandKey(t){return this.virtualScrollY?t+this.virtualScrollY.start:t},scrollUpdated(t){this.virtual&&(t.scrollHeight&&(this.virtual.opts.viewHeight=t.scrollHeight),t.scrollWidth&&(this.virtual.opts.viewWidth=t.scrollWidth)),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},treeOpen(t,s){let e=t[this.rowKey],l=t[this.childrenColumnName];this.tree[e]?(this.tree[e]=!1,this.allRows.splice(s+1,l.length)):(this.$set(this.tree,e,!0),l.forEach(r=>{let i=t._treeIndex_;i?r._treeIndex_=i+1:r._treeIndex_=1}),this.allRows.splice(s+1,0,...l)),this.isUpdateRows=!0,this.virtual.opts.rowsNum=this.allRows.length,this.virtualScrollY?(this.virtualScrollY=this.virtual.upRowsRegion(this.expand),this.rows=this.allRows.slice(this.virtualScrollY.start,this.virtualScrollY.end)):this.rows=this.allRows},doLayout(){this.setOffsetTop(),this.$refs.scroll.updated()},tableClcik(t){this._events["cell-text-click"]&&P(t,(s,e)=>{const l=e["row-index"],r=e["col-index"];this.$emit("cell-text-click",this.columns[r],this.allRows[l],s)})}}},b={};var J=S(G,j,q,!1,Q,null,null,null);function Q(t){for(let s in b)this[s]=b[s]}var Z=function(){return J.exports}();return Z});
+(function(f,g){typeof exports=="object"&&typeof module!="undefined"?module.exports=g():typeof define=="function"&&define.amd?define(g):(f=typeof globalThis!="undefined"?globalThis:f||self,f["vue-stability-table"]=g())})(this,function(){"use strict";const f={label:"",prop:"",subProp:"",align:"left",fixed:!1,key:"",resizable:!1,width:100,minWidth:80,maxWidth:null,formatter:null,sortable:!1,className:""};var g={columns:{type:Array},dataSource:{type:Array},sticky:{type:Boolean,default:!1},childrenColumnName:{type:String,default:"children"},indentSize:{type:Number,default:16},defaultExpandAllRows:{type:Boolean,default:!1},pagination:{type:[Boolean,Object],default:!1},rowKey:{type:String,default:"id"},rowSize:{type:Number,default:40},colSize:{type:Number,default:100},emptyText:{type:String,default:"\u6682\u65E0\u6570\u636E"},openIconColumn:{type:Number,default:0},scrollDisplayType:{type:String,default:"show"},sortMark:{type:Boolean,default:!0},rowClassName:{type:Function}},C={minBarSize:{type:Number,default:50},scrollTop:{type:Number,default:0},scrollLeft:{type:Number,default:0},displayType:{type:String,default:"hover"},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},m=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{ref:"scrollBox",staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY,"scrollbar-hover":t.displayType==="hover","scrollbar-hide":t.displayType==="hide"}},[e("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[e("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),t.scrollBarX.show?e("div",{staticClass:"agile-scroll-bar-x",class:{act:t.scrollBarX.clientX},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?e("div",{staticClass:"agile-scroll-bar-y",class:{act:t.scrollBarY.clientY},style:{top:t.scrollBarY.top+"px",height:t.scrollBarY.height+"px"},on:{mousedown:function(l){return t.scrollBarDown(l,"scrollBarY")}}}):t._e()])},B=[];function x(t,s,e,l,r,i,a,h){var o=typeof t=="function"?t.options:t;s&&(o.render=s,o.staticRenderFns=e,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var n;if(a?(n=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),r&&r.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(a)},o._ssrRegister=n):r&&(n=h?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(o.functional){o._injectStyles=n;var p=o.render;o.render=function(u,v){return n.call(v),p(u,v)}}else{var d=o.beforeCreate;o.beforeCreate=d?[].concat(d,n):[n]}return{exports:t,options:o}}const $={name:"vueAgileScrollBar",props:C,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(),this.initScrollBar()},offsetRight(){this.initScrollBar()},offsetTop(){this.setScrollBarTop(),this.initScrollBar()},offsetBottom(){this.initScrollBar()}},mounted(){this.$scrollBox=this.$refs.scrollBox,this.$scroll=this.$refs.scroll,this.$scrollContent=this.$refs.scrollContent,this.setScrollLeft(),this.setScrollTop(),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,s=this.offsetLeft+Math.floor(t/this.scrollBarX.multiple);return s!==this.scrollBarX.left&&(this.scrollBarX.left=s),t},setScrollBarTop(){const t=this.$scroll.scrollTop,s=this.offsetTop+Math.floor(t/this.scrollBarY.multiple);return s!==this.scrollBarY.top&&(this.scrollBarY.top=s),t},onScroll(t){const s=this.setScrollBarTop(),e=this.setScrollBarLeft();this.$emit("scroll",{top:s,left:e,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight},t),this._events["scroll-hit"]&&this.onScrollHit(s,e)},onScrollHit(t,s){let e="top",l=t-this.initTop,r=s-this.initLeft;this.initTop=t,this.initLeft=s;const i=()=>{this.$emit("scroll-hit",e,{top:t,left:s,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight})};l!==0&&this.scrollBarY.height&&(l<0?e="top":e="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&i(),t===0&&e==="top"&&i()),r!==0&&this.scrollBarX.width&&(r<0?e="left":e="right",s===0&&e==="left"||this.scrollContentWidth-this.scrollWidth-s==0||(e="xMiddle"),i())},scrollBarDown(t,s){s==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),s==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const s=this.scrollBarX.clientX,e=this.scrollBarY.clientY;if(s){let l=t.clientX-s;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+l*(this.scrollBarX.multiple*this.dragSpeedX)}if(e){let l=t.clientY-e;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.addDragEvent)},setScrollLeft(t){(t>=0||this.scrollLeft>=0)&&(this.$scroll.scrollLeft=t||this.scrollLeft)},setScrollTop(t){(t>=0||this.scrollTop>=0)&&(this.$scroll.scrollTop=t||this.scrollTop)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},_={};var z=x($,m,B,!1,X,null,null,null);function X(t){for(let s in _)this[s]=_[s]}var T=function(){return z.exports}(),tt="";class R{constructor(s){this.opts=Object.assign({},{rowsNum:0,colsNum:0,rowSize:50,colSize:100,expandSize:null,fixedColNum:0,viewHeight:500,viewWidth:800},s),this.topDistance=0,this.rowStart=null,this.rowEnd=null,this.bottomDistance=0,this.leftDistance=0,this.colStart=null,this.colEnd=null,this.rightDistance=0,this.scrollTop=0,this.scrollLeft=0}getRowsRegion(s,e){if(this.opts.rowsNum<=50)return null;let l,r,i={top:0,middle:0,bottom:0};const a=this.opts.rowsNum,h=this.opts.rowSize,o=this.opts.viewHeight,n=Math.ceil(o/h);if(e){let p=this.topDistance;if(s>this.scrollTop){for(let d=this.rowStart||0;d<a;d++)if(p+=h+(e&&e[d]||0),p>=s){l=d,r=l+n;break}}if(s<this.scrollTop&&p>=s){let d=0;for(let u=this.rowStart;u<this.rowEnd;u++)d+=h+(e&&e[u]||0);let c=0;for(const u in e)u<this.rowEnd&&(c+=e[u]);r=Math.floor((s+d-c)/h),r<n&&(r=n),l=r-n}for(const d in e)d<l?i.top+=e[d]:d>r&&(i.bottom+=e[d])}else l=Math.floor(s/h),r=l+n;if(r>a&&(r=a),l<0&&(l=0),l!==void 0&&r!==void 0&&(l!==this.rowStart||r!==this.rowEnd))return this.scrollTop=s,this.rowStart=l,this.rowEnd=r,this.topDistance=this.rowStart*this.opts.rowSize+i.top,this.bottomDistance=(a-this.rowEnd)*this.opts.rowSize+i.bottom,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}upRowsRegion(){const s=this.opts.rowsNum;return this.topDistance=this.rowStart*this.opts.rowSize,this.bottomDistance=(s>this.rowEnd?s-this.rowEnd:0)*this.opts.rowSize,{start:this.rowStart,end:this.rowEnd,top:this.topDistance,bottom:this.bottomDistance}}emptyRowsRegion(){this.rowStart=null,this.rowEnd=null}getColRegion(s){const e=this.opts.colSize,l=Math.floor(this.opts.viewWidth/e);if(this.opts.colsNum<=30)return null;let r,i,a;if(s<this.opts.viewWidth)r=0,i=l*2;else{r=Math.floor(s/e)-l;let h=r+l*3;i=h,h>this.opts.colsNum&&(i=this.opts.colsNum,this.rightDistance=0,a=!0)}if(this.scrollLeft=s,(r!==this.colStart||i!==this.colEnd)&&i-this.colEnd>5||this.colEnd-i>5||a)return this.colStart=r,this.colEnd=i,this.leftDistance=this.colStart*e,this.rightDistance=(this.opts.colsNum-this.colEnd)*e,{start:this.colStart,end:this.colEnd,left:this.leftDistance,right:this.rightDistance}}}var k={data(){return{dragSize:{clientX:null,dWidth:0,height:0,rulerLeft:0,colItem:null}}},mounted(){this.addDragEvent()},methods:{dragSizeDown(t,s){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=s.width,this.dragSize.colItem=s,this.dragSize.element=t.target,window.addEventListener("mousemove",this.dragSizeMove),this.dragSize.element.setAttribute("data-darg-act","true")},dragSizeMove(t){const s=this.dragSize.clientX;if(s){let e=t.clientX-s;this.dragSize.dWidth=e,this.$refs.dargSizeRuler.style.left=this.dragSize.rulerLeft+e+"px"}},dragSizeUp(){if(this.dragSize.clientX){this.dragSize.clientX=null,this.dragSize.element.setAttribute("data-darg-act","false");const t=this.dragSize.colItem.minWidth||f.minWidth;let s=this.dragSize.width+this.dragSize.dWidth;s<t&&(s=t),this.dragSize.colItem.width=s,window.removeEventListener("mousemove",this.dragSizeMove),this.$emit("resize-column",this.dragSize.colItem)}},addDragEvent(){window.addEventListener("mouseup",this.dragSizeUp)},removeDragEvent(){window.removeEventListener("mouseup",this.dragSizeUp)}},beforeDestroy(){this.removeDragEvent()}},Y={data(){return{activeSort:"",sortOrders:""}},methods:{getActSortClass(t){return!!(this.sortMark&&t.sortable&&t.prop===this.activeSort)},sortChange(t){if(t.sortable)if(!this.activeSort||!this.sortOrders||this.sortOrders==="desc"||t.prop!==this.activeSort?this.sortOrders="asc":this.sortOrders==="asc"&&(this.sortOrders="desc"),this.activeSort=t.prop,this._events["on-sort-change"])this.$emit("on-sort-change",t.prop,this.sortOrders,t);else{let s=this.dataSource.slice(0);this.sortOrders&&s.sort((e,l)=>{let r=e[t.prop],i=l[t.prop];return r===i?0:typeof r==typeof i&&this.sortOrders==="asc"?r<i?-1:1:r>i?-1:1}),this.tree={},this.allRows=s,this.$refs.scroll.setScrollTop(0),this.virtualScrollY?(this.virtualScrollY=this.virtual.upRowsRegion(this.expand),this.rows=s.slice(this.virtualScrollY.start,this.virtualScrollY.end)):this.rows=s}}}},H=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("span",{staticClass:"stability-table-column-sorter"},[e("span",{staticClass:"stability-table-column-sorter-inner"},[e("span",{staticClass:"stability-table-column-sorter-up",class:{"sort-act":t.sort&&t.activeSort&&t.sort===t.activeSort&&t.sortOrders==="asc"},attrs:{role:"img"}},[e("svg",{attrs:{focusable:"false",width:"11",height:"11",fill:"currentColor","aria-hidden":"true",viewBox:"0 0 1024 1024"}},[e("path",{attrs:{d:"M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"}})])]),e("span",{staticClass:"stability-table-column-sorter-down",class:{"sort-act":t.sort&&t.activeSort&&t.sort===t.activeSort&&t.sortOrders==="desc"},attrs:{role:"img"}},[e("svg",{attrs:{focusable:"false",width:"11",height:"11",fill:"currentColor","aria-hidden":"true",viewBox:"0 0 1024 1024"}},[e("path",{attrs:{d:"M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"}})])])])])},E=[],et="";function S(t,s,e,l,r,i,a,h){var o=typeof t=="function"?t.options:t;s&&(o.render=s,o.staticRenderFns=e,o._compiled=!0),l&&(o.functional=!0),i&&(o._scopeId="data-v-"+i);var n;if(a?(n=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(c=__VUE_SSR_CONTEXT__),r&&r.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(a)},o._ssrRegister=n):r&&(n=h?function(){r.call(this,(o.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(o.functional){o._injectStyles=n;var p=o.render;o.render=function(u,v){return n.call(v),p(u,v)}}else{var d=o.beforeCreate;o.beforeCreate=d?[].concat(d,n):[n]}return{exports:t,options:o}}const N={props:{sort:{type:String,default:""},activeSort:{type:String,default:""},sortOrders:{type:String,default:""}},data(){return{}},methods:{}},w={};var L=S(N,H,E,!1,W,null,null,null);function W(t){for(let s in w)this[s]=w[s]}var D=function(){return L.exports}(),O=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("i",{staticClass:"stability-table-open-icon",class:{"rotate-down":t.active}},[e("svg",{attrs:{viewBox:"64 64 896 896","data-icon":"right",width:"10",height:"10",fill:"currentColor","aria-hidden":"true",focusable:"false"}},[e("path",{attrs:{d:"M765.7 486.8L314.9 134.7A7.97 7.97 0 0 0 302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 0 0 0-50.4z"}})])])},A=[],st="";const M={props:{active:{type:Boolean,default:!1}}},y={};var K=S(M,O,A,!1,U,null,null,null);function U(t){for(let s in y)this[s]=y[s]}var I=function(){return K.exports}();const V=function(t){let s={};for(let e=0;e<t.length;e++){let l=t[e],r={key:l.name,value:l.value};s[r.key]=r.value}return s};let F=function(t){return t.target||(t.target=t.srcElement,t.pageX=t.x,t.pageY=t.y),/mouseover/i.test(t.type)&&!t.relatedTarget?t.relatedTarget=t.fromElement:/mouseout/i.test(t.type)&&!t.relatedTarget&&(t.relatedTarget=t.toElement),t};const P=(t,s)=>{const e=F(t),l=e.currentTarget;let r=e.target,i,a,h;for(;r&&r!==l;){if(i=r.getAttribute("event-agent")||"",i=i.trim().toLowerCase().split(","),i.indexOf(e.type.toLowerCase())!==-1){h=V(r.attributes),a=!0;break}r=r.parentNode}a&&s&&s(r,h)};var j=function(){var t=this,s=t.$createElement,e=t._self._c||s;return e("div",{staticClass:"stability-table",class:{"not-user-select":t.dragSize.clientX}},[e("div",{ref:"tableBox",staticClass:"stability-table-wrapper"},[e("vueAgileScrollbar",{ref:"scroll",attrs:{dragSpeedY:.6,displayType:t.scrollDisplayType,offsetLeft:t.offsetLeft,offsetRight:t.offsetRight,offsetTop:t.offsetTop},on:{scroll:t.scroll,updated:t.scrollUpdated,"scroll-hit":t.scrollHit}},[e("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"},on:{click:t.tableClcik}},[e("thead",{ref:"tabelHead",staticClass:"stability-wrapper-table-head"},[e("tr",[t._l(t.head.left,function(l,r){return e("th",{key:l.prop,class:[{"sticky-left":r===t.head.left.length-1},l.className,{"act-sort":t.getActSortClass(l)}],style:t.getSticky(l,r),attrs:{sticky:"left"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(i){return t.sortChange(l)}}},[t._t("header",function(){return[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(" "+t._s(l.label)+" ")])]},{column:l}),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],2),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])}),t.virtualScrollX?e("td",{style:{width:t.virtualScrollX.left+"px"}}):t._e(),t._l(t.cols,function(l){return e("th",{key:l.prop,class:[l.className,{"act-sort":t.getActSortClass(l)}],style:t.getThStyle(l)},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(r){return t.sortChange(l)}}},[t._t("header",function(){return[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(" "+t._s(l.label)+" ")])]},{column:l}),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],2),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(r){return t.dragSizeDown(r,l)}}}):t._e()])}),t.virtualScrollX?e("td",{style:{width:t.virtualScrollX.right+"px"}}):t._e(),t._l(t.head.right,function(l,r){return e("th",{key:l.prop,class:[{"sticky-right":r===0},l.className,{"act-sort":t.getActSortClass(l)}],style:t.getSticky(l,t.head.right.length-1-r),attrs:{sticky:"right"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(l).concat([{"sortable-column":l.sortable}]),on:{click:function(i){return t.sortChange(l)}}},[t._t("header",function(){return[e("div",{staticClass:"text-content",attrs:{title:l.label}},[t._v(" "+t._s(l.label)+" ")])]},{column:l}),l.sortable?e("Sort",{attrs:{sort:l.prop,sortOrders:t.sortOrders,activeSort:t.activeSort}}):t._e()],2),l.resizable&&l.width>0?e("span",{staticClass:"resize-handle",on:{mousedown:function(i){return t.dragSizeDown(i,l)}}}):t._e()])})],2)]),e("tbody",[t.virtualScrollY?e("tr",{ref:"virtualTop",style:{height:t.virtualScrollY.top+"px"}}):t._e(),t._l(t.rows,function(l,r){return[e("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,a){return e("td",{key:i.prop,class:[{"sticky-left":a===t.head.left.length-1},i.className,{"act-sort":t.getActSortClass(i)}],style:t.getSticky(i,a),attrs:{sticky:"left"}},[e("div",{staticClass:"stability-table-cell cell-flex",class:t.getCellClass(i)},[a===t.openIconColumn?e("span",{style:{width:l._treeIndex_*17+"px"}}):t._e(),a===t.openIconColumn&&l[t.childrenColumnName]&&l[t.childrenColumnName].length?e("open-icon",{attrs:{active:t.tree[l[t.rowKey]]},nativeOn:{click:function(h){t.treeOpen(l,t.expandKey(r))}}}):t._e(),t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":a}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?e("td"):t._e(),t._l(t.cols,function(i,a){return e("td",{key:i.prop,class:[i.className,{"act-sort":t.getActSortClass(i)}]},[e("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":t.head.left.length+a+(t.virtualScrollX?t.virtualScrollX.start:0)}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])}),t.virtualScrollX?e("td"):t._e(),t._l(t.head.right,function(i,a){return e("td",{key:i.prop,class:[{"sticky-right":a===0},i.className,{"act-sort":t.getActSortClass(i)}],style:t.getSticky(i,t.head.right.length-1-a),attrs:{sticky:"right"}},[e("div",{staticClass:"stability-table-cell",class:t.getCellClass(i)},[t._t("content",function(){return[e("div",{staticClass:"text-content",attrs:{title:t.getContent(l,i),"event-agent":"click","row-index":t.expandKey(r),"col-index":t.head.left.length+t.head.middle.length+a}},[t._v(" "+t._s(t.getContent(l,i))+" "),i.subProp?[e("br"),e("span",{staticClass:"sub-text-content"},[t._v(t._s(l[i.subProp]))])]:t._e()],2)]},{row:l,column:i,content:t.getContent(l,i),rowIndex:t.expandKey(r)})],2)])})],2),t.expand&&t.expand[t.expandKey(r)]?e("tr",{key:l[t.rowKey]+"expand",ref:l[t.rowKey]+"expand",refInFor:!0},[e("td",{attrs:{colspan:t.columns.length}},[e("div",{staticClass:"tr-expand",style:{width:t.$refs.scroll.scrollWidth+"px"}},[t._t("expand",null,{row:l,rowIndex:t.expandKey(r)})],2)])]):t._e()]}),t.virtualScrollY?e("tr",{ref:"virtualBottom",style:{height:t.virtualScrollY.bottom+"px"}}):t._e()],2)])]),e("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)])},q=[],lt="";const G={components:{vueAgileScrollbar:T,Sort:D,openIcon:I},props:g,mixins:[k,Y],data(){return{allRows:[],head:{left:[],middle:[],right:[]},rows:[],cols:[],expand:null,tree:{},virtualScrollX:null,virtualScrollY:null,offsetTop:0,stickyType:""}},watch:{columns(t){this.updateColumns(t)},dataSource(t){this.updateRows(t)}},computed:{offsetLeft(){let t=5;return this.head.left.forEach(s=>{t+=s.width>0?s.width:f.minWidth}),t},offsetRight(){let t=5;return this.head.right.forEach(s=>{t+=s.width>0?s.width:f.minWidth}),t}},created(){this.init()},mounted(){this.setOffsetTop()},methods:{init(){!this.dataSource.length||!this.columns.length||(this.setHead(),this.allRows=this.dataSource.slice(0),this.setVirtual(),this.setCols(0),this.setRows(0))},updateColumns(t){this.$refs.scroll.setScrollLeft(0),this.head={left:[],middle:[],right:[]},this.cols=[],this.setVirtual({colsNum:t.length}),this.setHead(t),this.setCols(0)},updateRows(t){const s=t||this.dataSource;this.$refs.scroll.setScrollTop(0),this.allRows=s.slice(0),this.setVirtual({rowsNum:this.allRows.length}),this.setRows(0)},setVirtual(t={}){if(!this.virtual)this.virtual=new R({rowsNum:this.dataSource.length,colsNum:this.head.middle.length,rowSize:this.rowSize,colSize:this.colSize});else for(let s in t)this.virtual.opts[s]=t[s]},setHead(t){const s=t||this.columns;let e=[],l=[],r=[],i=s.length,a=null,h=null;for(let o=0;o<i;o++){const n=s[o];if(n.fixed)n.fixed="left",e.push(n);else{a=o;break}}for(let o=i-1;o>=0;o--){const n=s[o];if(n.fixed)n.fixed="right",r.unshift(n);else{h=o;break}}l=s.slice(a,h+1),this.head={left:e,middle:l,right:r},this.setOffsetTop()},setOffsetTop(){this.$refs.tabelHead&&(this.offsetTop=this.$refs.tabelHead.offsetHeight+5)},setRows(t){let s=this.virtual.getRowsRegion(t,this.expand);if(s){const e=s;this.rows=this.allRows.slice(e.start,e.end),this.virtualScrollY=e}else s===null&&(this.rows=this.allRows,this.virtualScrollY=null,this.virtual.emptyRowsRegion())},setCols(t){let s=this.virtual.getColRegion(t);s?(this.virtualScrollX=s,this.cols=this.head.middle.slice(this.virtualScrollX.start,this.virtualScrollX.end)):s===null&&(this.cols=this.head.middle)},getContent(t,s){let e=t[s.prop];return s.formatter&&typeof s.formatter=="function"&&e?s.formatter(e):e},getThStyle(t){return{width:(t.width>0?t.width:f.width)+"px"}},getCellClass(t){return[{left:"align-left",center:"align-center",right:"align-right"}[t.align||f.align]]},getSticky(t,s){let e=t;return t.fixed==="left"&&(e=s?this.head.left[s-1]:t),t.fixed==="right"&&(e=s?this.head.right[s]:t),{width:(t.width>0?t.width:f.width)+"px",[t.fixed]:s*(e.width||f.width)+"px"}},scroll(t){this.virtualScrollX&&this.setCols(t.left),(this.virtualScrollY||this.isUpdateRows)&&(this.setRows(t.top),this.isUpdateRows=!1),this.scrollTop=t.top,this.$emit("scroll",...arguments)},trClick(t,s){this.$scopedSlots.expand&&(this.expand||(this.expand={}),this.expand[s]?this.expand[s]=!1:this.$set(this.expand,s,!0),this.$nextTick(()=>{this.expand[s]&&(this.expand[s]=this.$refs[t[this.rowKey]+"expand"][0].offsetHeight)}),this.$emit("on-expand-change",t,this.expand[s]))},expandKey(t){return this.virtualScrollY?t+this.virtualScrollY.start:t},scrollUpdated(t){this.virtual&&(t.scrollHeight&&(this.virtual.opts.viewHeight=t.scrollHeight),t.scrollWidth&&(this.virtual.opts.viewWidth=t.scrollWidth)),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,this.$emit("scroll-hit",...arguments)},treeOpen(t,s){let e=t[this.rowKey],l=t[this.childrenColumnName];this.tree[e]?(this.tree[e]=!1,this.allRows.splice(s+1,l.length)):(this.$set(this.tree,e,!0),l.forEach(r=>{let i=t._treeIndex_;i?r._treeIndex_=i+1:r._treeIndex_=1}),this.allRows.splice(s+1,0,...l)),this.isUpdateRows=!0,this.virtual.opts.rowsNum=this.allRows.length,this.virtualScrollY?(this.virtualScrollY=this.virtual.upRowsRegion(this.expand),this.rows=this.allRows.slice(this.virtualScrollY.start,this.virtualScrollY.end)):this.rows=this.allRows},doLayout(){this.setOffsetTop(),this.$refs.scroll.updated()},tableClcik(t){this._events["cell-text-click"]&&P(t,(s,e)=>{const l=e["row-index"],r=e["col-index"];this.$emit("cell-text-click",this.columns[r],this.allRows[l],s)})}}},b={};var J=S(G,j,q,!1,Q,null,null,null);function Q(t){for(let s in b)this[s]=b[s]}var Z=function(){return J.exports}();return Z});

package.json

 {
   "name": "vue-stability-table",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Stability table for large amount of data display",
@@ -26,3 +26,3 @@ "author": {
     "lodash": "^4.17.21",
-    "vue-agile-scrollbar": "^1.0.17"
+    "vue-agile-scrollbar": "^1.0.19"
   },
@@ -29,0 +29,0 @@ "devDependencies": {

README.md

@@ -9,5 +9,169 @@ # vue-stability-table
 
+通过npm 或者 yarn安装
+
+``` 
+yarn add vue-stability-table
+
+npm i vue-stability-table
+```
+
+引入
+
+``` js
+import 'vue-stability-table/dist/style.css'
+import vueStabilityTable from 'vue-stability-table'
+```
+
+``` vue
+<template>
+  <div style="height:432px;width:800px;">
+    <stabilityTable ref="stabiltyTable" :columns="columns" :dataSource="rows"></stabilityTable>
+  </div>
+</template>
+
+<script>
+import 'vue-stability-table/dist/style.css'
+import vueStabilityTable from 'vue-stability-table'
+
+export default {
+  components: { vueStabilityTable },
+  data () {
+    return {
+      columns: [],
+      rows: []
+    }
+  },
+  created () {
+    let columns = [{
+      label: '固定列asadfasdfas',
+      prop: 'table',
+      fixed: true,
+      width: 120,
+      className: 'table-1',
+      sortable: true,
+      resizable: true
+    }, {
+      label: '固定列2',
+      prop: 'fixedTable2',
+      fixed: true,
+      width: 120,
+      resizable: true
+    }]
+    
+    for (let i = 0; i <= 300; i++) {
+      columns.push({
+        label: '表头' + i,
+        prop: 'table' + i,
+        subProp: 'subTable' + i,
+        resizable: true,
+        sortable: true,
+        formatter: function(str) {
+          return str + 'bba'
+        }
+      })
+    }
+
+    columns.push({
+      label: '固定尾1',
+      prop: 'tableLast',
+      fixed: true,
+      width: 120,
+      resizable: true,
+      sortable: true,
+      align: 'center'
+    },{
+      label: '固定尾2',
+      prop: 'tableLast2',
+      fixed: true,
+      width: 120,
+      resizable: true,
+      sortable: true,
+      align: 'right'
+    })
+
+    let rows = []
+    for (let i = 0; i < 1000; i++) {
+      let obj = {
+        id: i,
+        table: '是否' + i,
+        fixedTable2: '收到',
+        table1: i,
+        table2: i,
+        subTable1: '20%',
+        children: []
+      }
+      for (let j = 0; j < 7; j++) {
+        obj.children.push({
+          id: i + 'ch' + j,
+          fixedTable2: '2021111' + j,
+          table1: '爱爱上爱上爱上爱上上',
+          table2: 'asfasdasfasdfsffsfasfasdasfasdfsffsf'
+        })
+      }
+      rows.push(obj)
+    }
+    this.columns = columns
+    this.rows = rows
+  }
+}
+</script>
+```
+
 # Api
 
+## table props
 
-# solt
+name|类型|默认值|说明
+--|:--:|--:|:--
+columns| Array | [] | 表格列的配置描述
+dataSource| Array | [] | 数据数组
+childrenColumnName| String | children | 指定树形结构的字段名
+indentSize| Number | 16 | 树形结构缩进宽度
+rowKey| String | id | 表格行key的字段名
+rowSize| Number | 40 | 单行平均高度，虚拟滚动时用到
+colSize| Number | 100 | 单列平均宽度，虚拟滚动时用到
+openIconColumn| Number | 0 | 展开图标显示列
+scrollDisplayType | String | show | 滚动条展示类型
+sortMark | Boolean | 1 | 是否显示排序背景色
+
+
+## columns props
+name|类型|默认值|说明
+--|:--:|--:|:--
+label| String | - | 列名
+prop| String | - | 表格内容对应的属性，支持多层访问：如
+subProp| String | - | 表格内容对应的子属性
+align| String | left | 对齐方式
+fixed| Boolean | false | 是否固定列
+resizable| Boolean | false | 是否可拖动调整宽度，此时 width 必须是 number 类型
+width| Number | 100 | 列宽度
+minWidth| Number | 80 | 列最小宽度
+maxWidth | Number | - | 列最大宽度
+formatter | Function | - | 本列格式化函数
+sortable | Boolean | false | 是否排序
+className |  String | - | 本列样式类名
+
+# 事件
+
+name|回调参数|说明
+--|:--:|:--
+on-expand-change | function(row: Object, expandState: Boolean) | 拓展行展开收起
+cell-text-click | function(columns: Object, row: Object, event: Element) | 点击单元格文本
+resize-column | function(columns: Object) | 拖拽列宽改变后
+on-sort-change | function(colProp: String, sortOrders: String, columns: Object) | 自定义排序，监听该事件后，系统默认排序会失效
+scroll | function(scrollValue: Object, $event) | 滚动会触发该事件
+scroll-hit | function(type: String, scrollValue: Object) | 滚动条触底、触顶、触左、触右后出发该事件
+# 方法
+
+name|参数|说明
+--|:--|:--
+updateColumns(columns) | - | 手动更新列数据(比直接改变props的columns性能高25%左右)
+updateRows(rows) | - | 手动更新行数据(比直接改变props的dataSource性能高25%左右)
+doLayout() | - | 表格重新布局
+
+# solt
+name|说明
+--|:--
+content | 行单元格内容 参数: {row, column, content, rowIndex}
+header | 表头内容 参数: { column }
+expand | 自定义扩展行内容  参数:{ row }

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

83935

increased by6.48%

Lines of code

1329

increased by0.53%

Number of lines in readme file

176

increased by1366.67%

Dependency changes

• Updatedvue-agile-scrollbar@^1.0.19