diff --git a/dist/index.js b/dist/index.js index 18a6b37..6794d6f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1 +1,15 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("FlexTable",[],t):"object"==typeof exports?exports.FlexTable=t():e.FlexTable=t()}(window,function(){return n={},e.m=t=[function(e,t,n){"use strict";function o(e,t,n,o,i,r,l,a){var s,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),l?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(l)},d._ssrRegister=s):i&&(s=a?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(d.functional){d._injectStyles=s;var c=d.render;d.render=function(e,t){return s.call(t),c(e,t)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,s):[s]}return{exports:e,options:d}}n.d(t,"a",function(){return o})},function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o={props:{calWidth:{type:Object,required:!0}},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},methods:{setCellStyle:function(e){var t=this.calWidth[e.key],n={};return t&&(n.width="".concat(t,"px"),n.flex="none"),e.align&&(n["text-align"]=e.align),n}}};t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o={name:"TableExpand",functional:!(t.default=void 0),props:{class:String,row:Object,render:Function,index:Number,column:{type:Object,default:null}},render:function(e,t){var n={row:t.props.row,index:t.props.index};return t.props.column&&(n.column=t.props.column),t.props.render(e,n)}};t.default=o},function(e,t,n){"use strict";n.r(t);var o=n(5),i=n.n(o);for(var r in o)"default"!==r&&function(e){n.d(t,e,function(){return o[e]})}(r);t.default=i.a},function(e,t,n){"use strict";var o=n(1);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=o(n(35)),r=o(n(36)),l=o(n(40)),a=o(n(41)),s=o(n(42)),d=o(n(46)),c=n(48),u="flex-table",f=1,h={name:"flexTable",components:{tableHead:i.default,tableBody:r.default,tableFoot:l.default,tableScrollBar:a.default,Spinner:s.default},props:{data:{type:Array,default:function(){return[]}},sum:{type:[Object,Boolean]},columns:{type:Array,default:function(){return[]}},loading:{type:Boolean,default:!1},height:{type:Number},resizable:{type:Boolean,default:!1},noData:{type:String,default:"No Data"},size:{type:String,default:"default"},theme:{type:String,default:"light"},initRowNumber:{type:Number,default:10},minWidth:{type:Number,default:c.MIN_WIDTH},maxWidth:{type:Number}},data:function(){return{tableId:f++,rowHeight:{header:0,footer:0},dataList:[],style:{},calWidth:{},tableColumns:[],headerH:38,bodyH:0,footH:54,maxHeight:0,shouldEachRenderQueue:!1,hasFixedLeft:!1,hasFixedRight:!1,bodyScrolling:!1,fixedBodyScrolling:!1,fixedRightBodyScrolling:!1,scrollYScrolling:!1,colResize:{onColResizing:!1,originX:0,currentX:0,resizeIndex:-1,minX:0}}},computed:{wrapClasses:function(){var e=["".concat(u,"-wrap")];return"big"===this.size?e.push("".concat(u,"-big")):"small"===this.size&&e.push("".concat(u,"-small")),"dark"===this.theme&&e.push("".concat(u,"-dark")),this.showScrollBar&&e.push("has-scroll-bar"),e},fixedLeftWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"left"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},fixedRightWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"right"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},showScrollBar:function(){return this.bodyH>this.maxHeight}},mounted:function(){this.doLayout(),window.addEventListener("resize",this.doLayout),this.resizable&&(window.addEventListener("mouseup",this.onColResizeEnd),this.$el.addEventListener("mousemove",this.onColResizeMove))},watch:{data:{handler:function(){this.initData(),this.doLayout()},deep:!0,immediate:!0},height:function(e){this.calHeight()},columns:{handler:function(e){var t=[],n=[],o=[];e.forEach(function(e){"left"===e.fixed?t.push(e):"right"===e.fixed?n.push(e):o.push(e)}),this.tableColumns=[].concat(t,o,n)},immediate:!0},tableColumns:{handler:function(e){var t=this;this.doLayout(),this.$nextTick(function(){t.hasFixedLeft=t.computedFixedLeft(),t.hasFixedRight=t.computedFixedRight()}),this.$emit("update:columns",e)},deep:!0,immediate:!0},sum:function(){this.calHeight()}},updated:function(){},beforeDestroy:function(){this.shouldEachRenderQueue=!1,this._queueId=null,window.removeEventListener("resize",this.doLayout),window.removeEventListener("mouseup",this.onColResizeEnd),this.$el.removeEventListener("mousemove",this.onColResizeMove)},methods:{doLayout:(0,d.default)(function(){var e=this;this.$nextTick(function(){e.resize(),e.calHeight()})},50,{leading:!0}),computedFixedLeft:function(){return this.tableColumns.some(function(e){return"left"===e.fixed})},computedFixedRight:function(){return this.tableColumns.some(function(e){return"right"===e.fixed})},initData:function(){var e=this;this._queueId=(new Date).getTime(),this.rowHeight={header:0,footer:0},this.dataList=[],this.data.slice(0,this.initRowNumber).forEach(function(t,n){e.copyItem(t,n)}),this.data.length>this.initRowNumber?(this.shouldEachRenderQueue=!0,this.eachQueue(this.data,this.initRowNumber,this._queueId)):this.$emit("on-render-done")},copyItem:function(e,t){var n=JSON.parse(JSON.stringify(e));n._isChecked=!!n._checked,n._isDisabled=!!n._disabled,n._expanded=n.expandStatus||!!n._expanded,n._disableExpand=!!n._disableExpand,this.$set(this.rowHeight,t,0),this.dataList.push(n)},eachQueue:function(e,t,n){var o=this;if(this.shouldEachRenderQueue)return new Promise(function(i,r){requestAnimationFrame(function(){o._queueId!==n?r():(o.copyItem(e[t],t++),i())})}).then(function(){e.length<=t?(o.doLayout(),o.$emit("on-render-done"),o.shouldEachRenderQueue=!1):o.eachQueue(e,t,n)}).catch(function(){})},toggleSelect:function(e){var t=this.dataList[e];t._isDisabled||(t._isChecked=!t._isChecked);var n=this.getSelection(),o=JSON.parse(JSON.stringify(t));t._isChecked||this.$emit("on-selection-cancel",o),this.$emit("on-selection-change",n,o)},getSelection:function(){var e=[];return this.dataList.forEach(function(t){t._isChecked&&e.push(t)}),JSON.parse(JSON.stringify(e))},selectAll:function(e){var t=this.getSelection();this.dataList.forEach(function(t){t._isDisabled||(t._isChecked=e)});var n=this.getSelection();e?this.$emit("on-selection-change",n):this.$emit("on-all-cancel",t)},onColResizeMove:function(e){var t=this.colResize;if(t.onColResizing){var n=e.clientX-t.nTableLeft;n-t.originX>=t.minX&&(t.currentX=n)}},onColResizeEnd:function(e){var t=this.colResize;if(t.onColResizing){var n=this.tableColumns[t.resizeIndex],o=t.currentX-t.originX,i=Math.max((n.width||this.calWidth[n.key])+o,this.minWidth);void 0!==this.maxWidth&&(i=Math.min(i,this.maxWidth)),n.width?n.width=i:this.$set(n,"width",i),t.onColResizing=!1,t.currentX=0,t.resizeIndex=-1}},onColResizeStart:function(e,t){if(e.target.classList.contains("j-col-resize")){e.stopPropagation();var n=this.colResize,o=this.tableColumns[t],i=o.width||this.calWidth[o.key];n.onColResizing=!0,n.resizeIndex=t,n.nTableLeft=this.$el.getBoundingClientRect().left,n.originX=n.currentX=e.clientX-n.nTableLeft,n.minX=this.minWidth-i}},handleFixedBodyScroll:function(e){if(!(this.bodyScrolling||this.scrollYScrolling||this.fixedRightBodyScrolling)){this.fixedBodyScrolling=!0;var t=e.target.scrollTop;this.$refs.tableBody.$el.scrollTop=t,this.hasFixedRight&&(this.$refs.fixedRightBody.$el.scrollTop=t),this.bodyH>this.maxHeight&&(this.$refs.scrollYBody.$refs.scrollYBody.scrollTop=t)}},handleFixedRightBodyScroll:function(e){if(!(this.bodyScrolling||this.scrollYScrolling||this.fixedBodyScrolling)){this.fixedRightBodyScrolling=!0;var t=e.target.scrollTop;this.$refs.tableBody.$el.scrollTop=t,this.hasFixedLeft&&(this.$refs.fixedLeftBody.$el.scrollTop=t),this.bodyH>this.maxHeight&&(this.$refs.scrollYBody.$refs.scrollYBody.scrollTop=t)}},onTableScrollX:function(e){this.$emit("on-scroll-x",e)},handleBodyScroll:function(e){if(!(this.scrollYScrolling||this.fixedBodyScrolling||this.fixedRightBodyScrolling)){this.bodyScrolling=!0;var t=e.target.scrollTop;this.hasFixedLeft&&(this.$refs.fixedLeftBody.$el.scrollTop=t),this.hasFixedRight&&(this.$refs.fixedRightBody.$el.scrollTop=t),this.bodyH>this.maxHeight&&(this.$refs.scrollYBody.$refs.scrollYBody.scrollTop=t)}},handleScrollYScroll:function(e){if(!(this.bodyScrolling||this.fixedBodyScrolling||this.fixedRightBodyScrolling)){this.scrollYScrolling=!0;var t=e.target.scrollTop;this.$refs.tableBody.$el.scrollTop=t,this.hasFixedLeft&&(this.$refs.fixedLeftBody.$el.scrollTop=t),this.hasFixedRight&&(this.$refs.fixedRightBody.$el.scrollTop=t)}},bodyScrollOver:function(){this.bodyScrolling=!0,this.fixedBodyScrolling=!1,this.fixedRightBodyScrolling=!1,this.scrollYScrolling=!1},fixedScrollOver:function(){this.bodyScrolling=!1,this.fixedBodyScrolling=!0,this.fixedRightBodyScrolling=!1,this.scrollYScrolling=!1},fixedRightScrollOver:function(){this.bodyScrolling=!1,this.fixedBodyScrolling=!1,this.fixedRightBodyScrolling=!0,this.scrollYScrolling=!1},scrollScrollOver:function(){this.bodyScrolling=!1,this.fixedBodyScrolling=!1,this.fixedRightBodyScrolling=!1,this.scrollYScrolling=!0},onSortChange:function(e){this.$emit("on-sort-change",e)},calHeight:function(){if(this.height){var e=this.$refs,t=e.tableFoot,n=e.tableBody.$el.querySelector(".flex-table-tr"),o=e.tableHeader.$el.offsetHeight,i=n?n.offsetHeight:0,r=t?t.$el.offsetHeight:0;this.headerH=o,this.footH=r,this.bodyH=i,this.maxHeight=this.height-o-r}},resize:function(){var e=this;requestAnimationFrame(function(){var t=e.showScrollBar?16:0,n=e.$el.offsetWidth-2-t,o={},i=0,r=0,l=0;if(e.tableColumns.forEach(function(t){var n=t.key||t.title,r=t.width;r?(r=Math.max(r,e.minWidth),o[n]=r,i+=r):l++}),0e.maxHeight?n("div",{staticClass:"flex-table-scroll-y"},[n("div",{staticClass:"flex-table-scroll-y-head",style:{height:e.headerH+"px"}}),e._v(" "),n("div",{ref:"scrollYBody",staticClass:"flex-table-scroll-y-body",style:{height:e.maxHeight+"px"},on:{scroll:e.scroll,mouseover:e.hover}},[n("div",{style:{height:e.bodyH+"px"}})]),e._v(" "),e.sum?n("div",{staticClass:"flex-table-scroll-y-foot"}):e._e()]):e._e()}var i=[];n.d(t,"a",function(){return o}),n.d(t,"b",function(){return i})},function(e,t,n){"use strict";function o(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"flex-table-foot",style:{height:e.height}},[n("div",{staticClass:"flex-table-row"},e._l(e.columns,function(t,o){return n("div",{key:o,staticClass:"flex-table-col",style:e.setCellStyle(t)},[e.shouldRender(t)?[t.render?n("Expand",{attrs:{row:e.sum,column:t,index:o,render:t.render}}):n("p",[e._v(e._s(e.sum[t.key]))]),e._v(" "),n("p",{staticClass:"foot-label"},[e._v(e._s(t.title))])]:e._e()],2)}),0)])}var i=[];n.d(t,"a",function(){return o}),n.d(t,"b",function(){return i})},function(e,t,n){"use strict";function o(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"flex-table-row",style:{height:e.height}},e._l(e.columns,function(t,o){return n("table-td",{key:t.key+"_"+o+"_"+e.rowIndex,attrs:{column:t,index:o,"cal-width":e.calWidth,row:e.row,rowIndex:e.rowIndex,onlyFixed:e.onlyFixed},on:{"on-toggle-select":e.toggleSelect,"on-toggle-expand":e.toggleExpand}})}),1)}var i=[];n.d(t,"a",function(){return o}),n.d(t,"b",function(){return i})},function(e,t,n){"use strict";function o(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"cell",class:{"flex-table-col":!0,"flex-table-col-icon":"expand"===e.renderType,"flex-table-expand-disabled":"expand"===e.renderType&&e.row._disableExpand},style:e.setCellStyle(e.column),on:{click:e.onToggleExpand}},[e.isHidden?e._e():["selection"===e.renderType?[n("Checkbox",{attrs:{checked:e.row._isChecked,disabled:e.row._isDisabled},on:{input:e.toggleSelect}})]:e._e(),e._v(" "),"expand"===e.renderType?[n("i",{class:{"flex-table-arrow-right":!e.expandOpen,"flex-table-arrow-down":e.expandOpen}})]:"render"===e.renderType?n("Expand",{attrs:{row:e.row,column:e.column,index:e.rowIndex,render:e.column.render}}):"slot"===e.renderType?n("TableSlot",{attrs:{row:e.row,column:e.column,index:e.rowIndex,owner:e.owner}}):"normal"===e.renderType?[e._v(e._s(e.row[e.column.key]))]:"html"===e.renderType?[n("span",{domProps:{innerHTML:e._s(e.row[e.column.key])}})]:e._e()]],2)}var i=[];n.d(t,"a",function(){return o}),n.d(t,"b",function(){return i})},function(e,t,n){e.exports=function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=7)}([function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",o=e[3];if(!o)return n;if(t&&"function"==typeof btoa){var i=function(e){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e))))+" */"}(o);return[n].concat(o.sources.map(function(e){return"/*# sourceURL="+o.sourceRoot+e+" */"})).concat([i]).join("\n")}return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var o={},i=0;in.parts.length&&(o.parts.length=n.parts.length)}else{var l=[];for(i=0;iinput{opacity:0;position:absolute}.radio-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:50%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.radio-component>input+label>.input-box>.input-box-circle{display:block;margin:50%;width:0;height:0%;background:#000;border-radius:50%;opacity:0;transition:width .15s ease-in,height .15s ease-in,margin .15s ease-in}.radio-component>input:checked+label>.input-box>.input-box-circle{opacity:1;margin:22%;width:56%;height:56%}.radio-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px #73b9ff}.radio-component>input:disabled+label{opacity:.7}",""])},function(e,t,n){(e.exports=n(0)(void 0)).push([e.i,".checkbox-component>input{opacity:0;position:absolute}.checkbox-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:14%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.checkbox-component>input+label>.input-box>.input-box-tick{width:100%;height:100%}.checkbox-component>input+label>.input-box>.input-box-tick>path{opacity:0;stroke:#000;stroke-width:2.3px;stroke-dashoffset:20;stroke-dasharray:20;transition:stroke-dashoffset .15s ease-in}.checkbox-component>input:checked+label>.input-box>.input-box-tick>path{opacity:1;stroke-dashoffset:0}.checkbox-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px rgba(115,185,255,.69)}.checkbox-component>input:disabled+label{opacity:.7}",""])},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"radio-component"},[n("input",{class:e.className,attrs:{type:"radio",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[e._m(0)]),e._v(" "),e._t("default")],2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"input-box"},[t("span",{staticClass:"input-box-circle"})])}]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"checkbox-component"},[n("input",{class:e.className,attrs:{type:"checkbox",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[n("span",{staticClass:"input-box"},[n("svg",{staticClass:"input-box-tick",attrs:{viewBox:"0 0 16 16"}},[n("path",{attrs:{fill:"none",d:"M1.7,7.8l3.8,3.4l9-8.8"}})])])]),e._v(" "),e._t("default")],2)])},staticRenderFns:[]}},function(e,t,n){var o=n(8);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("141dde0d",o,!0)},function(e,t,n){var o=n(9);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("0734c2c4",o,!0)},function(e,t){e.exports=function(e,t){for(var n=[],o={},i=0;i input + label > .input-box {\n border-color: #fff;\n}\n.flex-table-layout {\n max-width: 100%;\n overflow: auto;\n flex: 1;\n flex-shrink: 0;\n}\n.flex-table-scroll-y {\n width: 15px;\n flex-shrink: 0;\n border-left: 1px solid #dddee1;\n}\n.flex-table-scroll-y-head {\n width: 100%;\n height: 38px;\n padding: 10px 0;\n overflow: hidden;\n border-bottom: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-scroll-y-body {\n width: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n}\n.flex-table-scroll-y-body div {\n overflow: hidden;\n}\n.flex-table-scroll-y-foot {\n width: 100%;\n padding: 10px 0;\n overflow: hidden;\n border-top: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-head {\n border-bottom: 1px solid #e9eaec;\n font-weight: 700;\n user-select: none;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:nth-child(odd) {\n background: #f9f9f9;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:last-child {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:hover {\n background-color: #ebf7ff;\n}\n.flex-table-fixed-header {\n overflow-y: auto;\n overflow-x: hidden;\n}\n.flex-table-fixed-header::-webkit-scrollbar {\n display: none;\n}\n.flex-table-foot {\n border-top: 1px solid #e9eaec;\n text-align: right;\n}\n.flex-table-foot p {\n margin: 0;\n}\n.flex-table-foot .foot-label {\n color: #999;\n}\n.flex-table-row {\n display: flex;\n align-items: stretch;\n height: 100%;\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-row:last-child {\n border: none;\n}\n.flex-table-expanded {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-expanded:last-child {\n border: none;\n}\n.flex-table-col {\n position: relative;\n flex: 1;\n width: 100%;\n padding: 10px;\n font-size: 12px;\n color: #495060;\n border-right: 1px solid #e9eaec;\n word-break: break-word;\n box-sizing: border-box;\n}\n.flex-table-col:last-child {\n border: none;\n}\n.flex-table-col-resize {\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 4px;\n cursor: col-resize;\n}\n.flex-table-col-resize:hover {\n background-color: #0b8df8;\n}\n.flex-table-col-hidden {\n visibility: hidden;\n}\n.flex-table-col-icon {\n text-align: center;\n cursor: pointer;\n}\n.flex-table-col-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flex-table-col .ivu-checkbox-wrapper {\n margin-right: 0;\n margin-bottom: 0;\n}\n.flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #ccc;\n}\n.flex-table-tip {\n text-align: center;\n}\n.flex-table-sort {\n display: inline-block;\n width: 14px;\n height: 12px;\n margin-top: -1px;\n margin-left: 5px;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n}\n.flex-table-sort i {\n display: block;\n height: 0;\n line-height: 0;\n overflow: hidden;\n position: absolute;\n transition: color 0.2s ease-in-out;\n}\n.flex-table-sort i:first-child {\n top: -5px;\n}\n.flex-table-sort i:last-child {\n bottom: -5px;\n}\n.flex-table-fixed-left,\n.flex-table-fixed-right-wrap {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n background-color: #fff;\n box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-left .flex-table-body,\n.flex-table-fixed-right-wrap .flex-table-body {\n margin-right: -13px;\n}\n.flex-table-fixed-right-wrap {\n height: 100%;\n left: auto;\n right: 0;\n box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-right-wrap .flex-table-fixed-right {\n position: absolute;\n right: 0;\n}\n.flex-table-reference-line {\n position: absolute;\n top: 0;\n height: 100%;\n border-right: 1px solid transparent;\n cursor: col-resize;\n}\n.flex-table-reference-line.cur {\n border-color: #0b8df8;\n}\n.flex-table-arrow-dropup,\n.flex-table-arrow-dropdown {\n border: 5px solid transparent;\n}\n.flex-table-arrow-dropup {\n border-bottom-color: #c5c8ce;\n}\n.flex-table-arrow-dropup.on {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropup:hover {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropdown {\n border-top-color: #c5c8ce;\n}\n.flex-table-arrow-dropdown.on {\n border-top-color: #333;\n}\n.flex-table-arrow-dropdown:hover {\n border-top-color: #333;\n}\n.flex-table-arrow-right,\n.flex-table-arrow-down {\n display: inline-block;\n vertical-align: middle;\n width: 4px;\n height: 4px;\n margin: auto;\n background-color: transparent;\n border: 1px solid transparent;\n border-right-color: #333;\n border-bottom-color: #333;\n transform: rotate(-45deg);\n}\n.flex-table-arrow-down {\n transform: rotate(45deg);\n}\n.flex-table-expand-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.has-scroll-bar .flex-table-fixed-right-wrap {\n right: 15px;\n}\n.checkbox-component > input:disabled + label {\n opacity: 0.1 !important;\n}\n",""])}],e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(e){return t[e]}.bind(null,i));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.p="/dist/",e(e.s=33);function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var t,n}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("FlexTable",[],t):"object"==typeof exports?exports.FlexTable=t():e.FlexTable=t()}(window,function(){return n={},e.m=t=[function(e,t,n){"use strict";function o(e,t,n,o,i,r,a,l){var s,d="function"==typeof e?e.options:e;if(t&&(d.render=t,d.staticRenderFns=n,d._compiled=!0),o&&(d.functional=!0),r&&(d._scopeId="data-v-"+r),a?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=s):i&&(s=l?function(){i.call(this,this.$root.$options.shadowRoot)}:i),s)if(d.functional){d._injectStyles=s;var u=d.render;d.render=function(e,t){return s.call(t),u(e,t)}}else{var c=d.beforeCreate;d.beforeCreate=c?[].concat(c,s):[s]}return{exports:e,options:d}}n.d(t,"a",function(){return o})},function(e,t){e.exports=function(e){return e&&e.__esModule?e:{default:e}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var o={props:{calWidth:{type:Object,required:!0}},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},methods:{setCellStyle:function(e){var t=this.calWidth[e.key],n={};return t&&(n.width="".concat(t,"px"),n.flex="none"),e.align&&(n["text-align"]=e.align),n}}};t.default=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o={name:"TableExpand",functional:!(t.default=void 0),props:{class:String,row:Object,render:Function,index:Number,column:{type:Object,default:null}},render:function(e,t){var n={row:t.props.row,index:t.props.index};return t.props.column&&(n.column=t.props.column),t.props.render(e,n)}};t.default=o},function(e,t,n){"use strict";n.r(t);var o=n(5),i=n.n(o);for(var r in o)"default"!==r&&function(e){n.d(t,e,function(){return o[e]})}(r);t.default=i.a},function(e,t,n){"use strict";var o=n(1);Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var i=o(n(35)),r=o(n(36)),a=o(n(40)),l=o(n(41)),s=o(n(42)),d=o(n(46)),u=o(n(48)),c=n(53),f="flex-table",h=1,p={name:"flexTable",components:{tableHead:i.default,tableBody:r.default,tableFoot:a.default,tableScrollBar:l.default,Spinner:s.default},props:{data:{type:Array,default:function(){return[]}},sum:{type:[Object,Boolean]},columns:{type:Array,default:function(){return[]}},loading:{type:Boolean,default:!1},height:{type:Number},resizable:{type:Boolean,default:!1},noData:{type:String,default:"No Data"},size:{type:String,default:"default"},theme:{type:String,default:"light"},asyncRender:{type:Number,default:0},minWidth:{type:Number,default:c.MIN_WIDTH},maxWidth:{type:Number}},data:function(){return{tableId:h++,rowHeight:{header:0,footer:0},dataList:[],style:{},calWidth:{},tableColumns:[],headerH:38,bodyH:0,footH:54,maxHeight:0,scrollTop:0,shouldEachRenderQueue:!1,hasFixedLeft:!1,hasFixedRight:!1,scrollYScrolling:!1,hoverIndex:void 0,colResize:{onColResizing:!1,originX:0,currentX:0,resizeIndex:-1,minX:0,maxX:1/0}}},computed:{wrapClasses:function(){var e=["".concat(f,"-wrap")];return"big"===this.size?e.push("".concat(f,"-big")):"small"===this.size&&e.push("".concat(f,"-small")),"dark"===this.theme&&e.push("".concat(f,"-dark")),this.showScrollBar&&e.push("has-scroll-bar"),e},fixedLeftWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"left"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},fixedRightWidth:function(){var e=this;return this.tableColumns.reduce(function(t,n){return"right"===n.fixed&&(t+=e.calWidth[n.key]),t},0)},showScrollBar:function(){return this.bodyH>this.maxHeight}},mounted:function(){this.doLayout(),window.addEventListener("resize",this.doLayout),this.resizable&&(window.addEventListener("mouseup",this.onColResizeEnd),this.$el.addEventListener("mousemove",this.onColResizeMove))},watch:{data:{handler:function(){this.initData(),this.doLayout()},deep:!0,immediate:!0},height:function(e){this.calHeight()},columns:{handler:function(e){var t=[],n=[],o=[];e.forEach(function(e){"left"===e.fixed?t.push(e):"right"===e.fixed?n.push(e):o.push(e)}),this.tableColumns=[].concat(t,o,n)},immediate:!0},tableColumns:{handler:function(e){var t=this;this.doLayout(),this.$nextTick(function(){t.hasFixedLeft=t.computedFixedLeft(),t.hasFixedRight=t.computedFixedRight()}),this.$emit("update:columns",e)},deep:!0,immediate:!0},sum:function(){this.calHeight()}},updated:function(){},beforeDestroy:function(){this.shouldEachRenderQueue=!1,this._queueId=null,window.removeEventListener("resize",this.doLayout),window.removeEventListener("mouseup",this.onColResizeEnd),this.$el.removeEventListener("mousemove",this.onColResizeMove)},methods:{updateHoverIndex:(0,d.default)(function(e){this.hoverIndex=e},50),handleMousewheel:function(e){var t=(0,u.default)(e);if(0o;(i||r)&&(e.preventDefault(),this.scrollTop+=Math.ceil(t.pixelY))}},doLayout:(0,d.default)(function(){var e=this;this.$nextTick(function(){e.resize(),e.calHeight()})},50,{leading:!0}),computedFixedLeft:function(){return this.tableColumns.some(function(e){return"left"===e.fixed})},computedFixedRight:function(){return this.tableColumns.some(function(e){return"right"===e.fixed})},initData:function(){var e=this;this._queueId=(new Date).getTime(),this.rowHeight={header:0,footer:0},this.dataList=[],0this.asyncRender?(this.shouldEachRenderQueue=!0,this.eachQueue(this.data,this.asyncRender,this._queueId)):this.$emit("on-render-done")):this.data.forEach(function(t,n){e.copyItem(t,n)})},copyItem:function(e,t){var n=JSON.parse(JSON.stringify(e));n._isChecked=!!n._checked,n._isDisabled=!!n._disabled,n._expanded=n.expandStatus||!!n._expanded,n._disableExpand=!!n._disableExpand,this.$set(this.rowHeight,t,0),this.dataList.push(n)},eachQueue:function(e,t,n){var o=this;if(this.shouldEachRenderQueue)return new Promise(function(i,r){requestAnimationFrame(function(){o._queueId!==n?r():(o.copyItem(e[t],t++),i())})}).then(function(){e.length<=t?(o.doLayout(),o.$emit("on-render-done"),o.shouldEachRenderQueue=!1):o.eachQueue(e,t,n)}).catch(function(){})},toggleSelect:function(e){var t=this.dataList[e];t._isDisabled||(t._isChecked=!t._isChecked);var n=this.getSelection(),o=JSON.parse(JSON.stringify(t));t._isChecked||this.$emit("on-selection-cancel",o),this.$emit("on-selection-change",n,o)},getSelection:function(){var e=[];return this.dataList.forEach(function(t){t._isChecked&&e.push(t)}),JSON.parse(JSON.stringify(e))},selectAll:function(e){var t=this.getSelection();this.dataList.forEach(function(t){t._isDisabled||(t._isChecked=e)});var n=this.getSelection();e?this.$emit("on-selection-change",n):this.$emit("on-all-cancel",t)},onColResizeMove:function(e){var t=this.colResize;if(t.onColResizing){var n=e.clientX-t.nTableLeft,o=n-t.originX;o<0&&o>=t.minX?t.currentX=n:0n.parts.length&&(o.parts.length=n.parts.length)}else{var a=[];for(i=0;iinput{opacity:0;position:absolute}.radio-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:50%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.radio-component>input+label>.input-box>.input-box-circle{display:block;margin:50%;width:0;height:0%;background:#000;border-radius:50%;opacity:0;transition:width .15s ease-in,height .15s ease-in,margin .15s ease-in}.radio-component>input:checked+label>.input-box>.input-box-circle{opacity:1;margin:22%;width:56%;height:56%}.radio-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px #73b9ff}.radio-component>input:disabled+label{opacity:.7}",""])},function(e,t,n){(e.exports=n(0)(void 0)).push([e.i,".checkbox-component>input{opacity:0;position:absolute}.checkbox-component>input+label>.input-box{display:inline-block;border:1px solid #000;border-radius:14%;margin:0;padding:0;width:1em;height:1em;background:#fff;overflow:hidden;vertical-align:-5%;user-select:none}.checkbox-component>input+label>.input-box>.input-box-tick{width:100%;height:100%}.checkbox-component>input+label>.input-box>.input-box-tick>path{opacity:0;stroke:#000;stroke-width:2.3px;stroke-dashoffset:20;stroke-dasharray:20;transition:stroke-dashoffset .15s ease-in}.checkbox-component>input:checked+label>.input-box>.input-box-tick>path{opacity:1;stroke-dashoffset:0}.checkbox-component>input:focus+label>.input-box{box-shadow:0 0 2px 3px rgba(115,185,255,.69)}.checkbox-component>input:disabled+label{opacity:.7}",""])},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"radio-component"},[n("input",{class:e.className,attrs:{type:"radio",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[e._m(0)]),e._v(" "),e._t("default")],2)])},staticRenderFns:[function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"input-box"},[t("span",{staticClass:"input-box-circle"})])}]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"checkbox-component"},[n("input",{class:e.className,attrs:{type:"checkbox",id:e.id,name:e.name,required:e.required,disabled:e.disabled},domProps:{value:e.value,checked:e.state},on:{change:e.onChange}}),e._v(" "),n("label",{attrs:{for:e.id}},[e._t("input-box",[n("span",{staticClass:"input-box"},[n("svg",{staticClass:"input-box-tick",attrs:{viewBox:"0 0 16 16"}},[n("path",{attrs:{fill:"none",d:"M1.7,7.8l3.8,3.4l9-8.8"}})])])]),e._v(" "),e._t("default")],2)])},staticRenderFns:[]}},function(e,t,n){var o=n(8);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("141dde0d",o,!0)},function(e,t,n){var o=n(9);"string"==typeof o&&(o=[[e.i,o,""]]),o.locals&&(e.exports=o.locals),n(2)("0734c2c4",o,!0)},function(e,t){e.exports=function(e,t){for(var n=[],o={},i=0;i input + label > .input-box {\n border-color: #fff;\n}\n.flex-table-layout {\n max-width: 100%;\n overflow: auto;\n flex: 1;\n flex-shrink: 0;\n}\n.flex-table-scroll-y {\n width: 15px;\n flex-shrink: 0;\n border-left: 1px solid #dddee1;\n}\n.flex-table-scroll-y-head {\n width: 100%;\n height: 38px;\n padding: 10px 0;\n overflow: hidden;\n border-bottom: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-scroll-y-body {\n width: 100%;\n overflow-x: hidden;\n overflow-y: auto;\n}\n.flex-table-scroll-y-body div {\n overflow: hidden;\n}\n.flex-table-scroll-y-foot {\n width: 100%;\n padding: 10px 0;\n overflow: hidden;\n border-top: 1px solid #dddee1;\n box-sizing: border-box;\n}\n.flex-table-head {\n border-bottom: 1px solid #e9eaec;\n font-weight: 700;\n user-select: none;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:nth-child(odd) {\n background: #f9f9f9;\n}\n.flex-table-body .flex-table-tr > .flex-table-row:last-child {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-body .flex-table-tr > .flex-table-row.flex-table-hover {\n background-color: #ebf7ff;\n}\n.flex-table-fixed-header {\n overflow-y: auto;\n overflow-x: hidden;\n}\n.flex-table-fixed-header::-webkit-scrollbar {\n display: none;\n}\n.flex-table-foot {\n border-top: 1px solid #e9eaec;\n text-align: right;\n}\n.flex-table-foot p {\n margin: 0;\n}\n.flex-table-foot .foot-label {\n color: #999;\n}\n.flex-table-row {\n display: flex;\n align-items: stretch;\n height: 100%;\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-row:last-child {\n border: none;\n}\n.flex-table-expanded {\n border-bottom: 1px solid #e9eaec;\n}\n.flex-table-expanded:last-child {\n border: none;\n}\n.flex-table-col {\n position: relative;\n flex: 1;\n width: 100%;\n padding: 10px;\n font-size: 12px;\n color: #495060;\n border-right: 1px solid #e9eaec;\n word-break: break-word;\n box-sizing: border-box;\n}\n.flex-table-col:last-child {\n border: none;\n}\n.flex-table-col-resize {\n position: absolute;\n right: 0;\n top: 0;\n height: 100%;\n width: 4px;\n cursor: col-resize;\n}\n.flex-table-col-resize:hover {\n background-color: #0b8df8;\n}\n.flex-table-col-hidden {\n visibility: hidden;\n}\n.flex-table-col-icon {\n text-align: center;\n cursor: pointer;\n}\n.flex-table-col-ellipsis {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.flex-table-col .ivu-checkbox-wrapper {\n margin-right: 0;\n margin-bottom: 0;\n}\n.flex-table-col .checkbox-component > input + label > .input-box {\n border-color: #ccc;\n}\n.flex-table-hidden {\n visibility: hidden;\n}\n.flex-table-tip {\n text-align: center;\n}\n.flex-table-sort {\n display: inline-block;\n width: 14px;\n height: 12px;\n margin-top: -1px;\n margin-left: 5px;\n vertical-align: middle;\n overflow: hidden;\n cursor: pointer;\n position: relative;\n}\n.flex-table-sort i {\n display: block;\n height: 0;\n line-height: 0;\n overflow: hidden;\n position: absolute;\n transition: color 0.2s ease-in-out;\n}\n.flex-table-sort i:first-child {\n top: -5px;\n}\n.flex-table-sort i:last-child {\n bottom: -5px;\n}\n.flex-table-fixed-left,\n.flex-table-fixed-right-wrap {\n position: absolute;\n top: 0;\n left: 0;\n overflow: hidden;\n background-color: #fff;\n box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-left .flex-table-body,\n.flex-table-fixed-right-wrap .flex-table-body {\n margin-right: -13px;\n}\n.flex-table-fixed-right-wrap {\n height: 100%;\n left: auto;\n right: 0;\n box-shadow: -2px 0 6px -2px rgba(0, 0, 0, 0.2);\n}\n.flex-table-fixed-right-wrap .flex-table-fixed-right {\n position: absolute;\n right: 0;\n}\n.flex-table-reference-line {\n position: absolute;\n top: 0;\n height: 100%;\n border-right: 1px solid transparent;\n cursor: col-resize;\n}\n.flex-table-reference-line.cur {\n border-color: #0b8df8;\n}\n.flex-table-arrow-dropup,\n.flex-table-arrow-dropdown {\n border: 5px solid transparent;\n}\n.flex-table-arrow-dropup {\n border-bottom-color: #c5c8ce;\n}\n.flex-table-arrow-dropup.on {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropup:hover {\n border-bottom-color: #333;\n}\n.flex-table-arrow-dropdown {\n border-top-color: #c5c8ce;\n}\n.flex-table-arrow-dropdown.on {\n border-top-color: #333;\n}\n.flex-table-arrow-dropdown:hover {\n border-top-color: #333;\n}\n.flex-table-arrow-right,\n.flex-table-arrow-down {\n display: inline-block;\n vertical-align: middle;\n width: 4px;\n height: 4px;\n margin: auto;\n background-color: transparent;\n border: 1px solid transparent;\n border-right-color: #333;\n border-bottom-color: #333;\n transform: rotate(-45deg);\n}\n.flex-table-arrow-down {\n transform: rotate(45deg);\n}\n.flex-table-expand-disabled {\n opacity: 0.3;\n cursor: not-allowed;\n}\n.has-scroll-bar .flex-table-fixed-right-wrap {\n right: 15px;\n}\n.checkbox-component > input:disabled + label {\n opacity: 0.1 !important;\n}\n",""])}],e.c=n,e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:o})},e.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(e.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var i in t)e.d(o,i,function(e){return t[e]}.bind(null,i));return o},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},e.p="/dist/",e(e.s=33);function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var t,n}); \ No newline at end of file diff --git a/package.json b/package.json index 7239a9a..a4a80af 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tm-flextable", - "version": "0.1.0", + "version": "0.2.0", "description": "Use div to build flexible、efficiently updated table components with Vue.js", "main": "dist/index.js", "typings": "types/index.d.ts",