bkui-vue 0.0.1-beta.4 → 0.0.1-beta.42

package/lib/table/table.d.ts

@@ -1,67 +1,119 @@
-import type { ExtractPropTypes } from 'vue';
-export declare const tableProps: {
-    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+import { Column } from './props';
+declare const _default: import("vue").DefineComponent<{
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    headerBorder: import("vue-types").VueTypeValidableDef<boolean> & {
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    defaultSort: import("vue-types").VueTypeValidableDef<{
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
         [key: string]: any;
     }> & {
-        default: () => {
+        default: boolean | (() => {
             [key: string]: any;
-        };
+        });
+    };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
     } & {
-        default: () => {
-            [key: string]: any;
-        };
+        default: boolean;
     };
-};
-export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
-declare const _default: import("vue").DefineComponent<{
-    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick")[], "columnPick" | "pageLimitChange" | "pageValueChange" | "rowClick" | "rowDblClick", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    showHead: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    headerBorder: import("vue-types").VueTypeValidableDef<boolean> & {
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
         default: boolean;
     };
-    defaultSort: import("vue-types").VueTypeValidableDef<{
+    border: import("vue-types").VueTypeDef<string[]> & {
+        default: () => string[];
+    };
+    pagination: import("vue-types").VueTypeDef<boolean | {
         [key: string]: any;
     }> & {
-        default: () => {
+        default: boolean | (() => {
             [key: string]: any;
-        };
+        });
+    };
+    remotePagination: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
     } & {
-        default: () => {
-            [key: string]: any;
-        };
+        default: boolean;
     };
+}>> & {
+    onColumnPick?: (...args: any[]) => any;
+    onPageLimitChange?: (...args: any[]) => any;
+    onPageValueChange?: (...args: any[]) => any;
+    onRowClick?: (...args: any[]) => any;
+    onRowDblClick?: (...args: any[]) => any;
 }, {
-    handleHeaderFooterMousewheel: (_event: any, data: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    showHeader?: unknown;
-    headerBorder?: unknown;
-    defaultSort?: unknown;
-} & {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
-        [key: string]: any;
-    };
-} & {}> & {}, {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
+    height: string | number;
+    data: any[];
+    minHeight: string | number;
+    border: string[];
+    headHeight: number;
+    pagination: boolean | {
         [key: string]: any;
     };
+    columnPick: string;
+    rowHeight: any;
+    showHead: boolean;
+    virtualEnabled: boolean;
+    remotePagination: boolean;
 }>;
 export default _default;

package/lib/table/table.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"),require("../virtual-render"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("../pagination"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/toConsumableArray"),require("lodash"));else if("function"==typeof define&&define.amd)define(["../shared","@babel/runtime/helpers/defineProperty","vue","../virtual-render","@babel/runtime/helpers/classCallCheck","@babel/runtime/helpers/createClass","../pagination","@babel/runtime/helpers/typeof","@babel/runtime/helpers/toConsumableArray","lodash"],t);else{var r="object"==typeof exports?t(require("../shared"),require("@babel/runtime/helpers/defineProperty"),require("vue"),require("../virtual-render"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("../pagination"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/toConsumableArray"),require("lodash")):t(e["../shared"],e["@babel/runtime/helpers/defineProperty"],e.vue,e["../virtual-render"],e["@babel/runtime/helpers/classCallCheck"],e["@babel/runtime/helpers/createClass"],e["../pagination"],e["@babel/runtime/helpers/typeof"],e["@babel/runtime/helpers/toConsumableArray"],e.lodash);for(var n in r)("object"==typeof exports?exports:e)[n]=r[n]}}(self,((e,t,r,n,o,a,i,l,c,s)=>(()=>{"use strict";var u={5801:e=>{e.exports=i},4212:t=>{t.exports=e},3511:e=>{e.exports=n},3162:e=>{e.exports=o},5111:e=>{e.exports=a},311:e=>{e.exports=t},642:e=>{e.exports=c},8541:e=>{e.exports=l},467:e=>{e.exports=s},748:e=>{e.exports=r}},p={};function d(e){var t=p[e];if(void 0!==t)return t.exports;var r=p[e]={exports:{}};return u[e](r,r.exports,d),r.exports}d.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return d.d(t,{a:t}),t},d.d=(e,t)=>{for(var r in t)d.o(t,r)&&!d.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},d.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),d.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var f={};return(()=>{d.r(f),d.d(f,{default:()=>q});var e=d(4212),t=d(311),r=d.n(t),n=d(748),o=d(3511),a=d.n(o),i=["none","row","col","outer"],l={data:e.PropTypes.arrayOf(e.PropTypes.any).def([]),columns:e.PropTypes.arrayOf(e.PropTypes.shape({label:e.PropTypes.oneOfType([e.PropTypes.func.def((function(){return""})),e.PropTypes.string.def("")]),field:e.PropTypes.oneOfType([e.PropTypes.func.def((function(){return""})),e.PropTypes.string.def("")]),render:e.PropTypes.oneOfType([e.PropTypes.func.def((function(){return""})),e.PropTypes.string.def("")]),width:e.PropTypes.oneOfType([e.PropTypes.number.def(void 0),e.PropTypes.string.def("auto")])})),activeColumn:e.PropTypes.oneOfType([e.PropTypes.number.def(-1),e.PropTypes.arrayOf(e.PropTypes.number.def(-1))]),columnPick:e.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled"),height:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def("auto"),minHeight:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def("auto"),rowHeight:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.func]).def(40),headHeight:e.PropTypes.number.def(40),showHead:e.PropTypes.bool.def(!0),virtualEnabled:e.PropTypes.bool.def(!1),border:e.PropTypes.arrayOf(e.PropTypes.commonType(i,"border")).def(["row"]),pagination:e.PropTypes.oneOfType([e.PropTypes.bool.def(!1),e.PropTypes.object.def({})]).def(!1),remotePagination:e.PropTypes.bool.def(!1)},c=d(3162),s=d.n(c),u=d(5111),p=d.n(u),h=d(5801),v=d.n(h),m=p()((function e(t,r){s()(this,e),this.props=null,this.ctx=null,this.props=t,this.ctx=r})),b=d(8541),y=d.n(b),g=d(642),C=d.n(g),P=d(467),T=void 0,x=function(e,t,r){var n;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(n=e[t]).call.apply(n,[T].concat(C()(r))):e[t]},k=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:O(e.activeColumn):Array.isArray(e.activeColumn)?O(e.activeColumn[0]):O(e.activeColumn):[]},O=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},w=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"100%",r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,n="";return n=/^auto|null|undefined$/gi.test("".concat(e))?t:/^\d+\.?\d+$/.test("".concat(e))?"".concat(e,"px"):e,r&&(n="calc(".concat(n," - ").concat(r,")")),n},j=function(e,t){if(e){if("object"===y()(e)){var r=Object.prototype.hasOwnProperty.call(e,"current")?e.current:e.value;return/\d+/.test(r)||(r=1),Object.assign(Object.assign(Object.assign({},t),e),{current:r})}return t}return{}},N=function(){function t(r,n,o,a){var i=this;s()(this,t),this.getColumnClass=function(e){return"".concat(i.uuid,"-column-").concat(e)},this.props=r,this.context=n,this.reactiveProp=o,this.colgroups=a,this.plugins=new m(r,n),this.uuid=(0,e.random)(8)}return p()(t,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableHeadSchema",value:function(){return this.$createElement,(0,n.createVNode)("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader()])}},{key:"renderTableBodySchema",value:function(e){return this.$createElement,(0,n.createVNode)("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderTBody(e)])}},{key:"renderTableFooter",value:function(e){var t=this;return this.$createElement,(0,n.createVNode)(v(),(0,n.mergeProps)(e,{modelValue:e.current,onLimitChange:function(e){return t.handlePageLimitChange(e)},onChange:function(e){return t.hanlePageChange(e)}}),null)}},{key:"handlePageLimitChange",value:function(e){Object.assign(this.props.pagination,{limit:e}),this.context.emit("pageLimitChange",e)}},{key:"hanlePageChange",value:function(e){Object.assign(this.props.pagination,{current:e,value:e}),this.context.emit("pageValueChange",e)}},{key:"setColumnActive",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=this.propActiveCols.find((function(t){return t.index===e}));Object.assign(r,{active:!r.active}),t&&this.propActiveCols.filter((function(t){return t.index!==e&&t.active})).forEach((function(e){Object.assign(e,{active:!1})}))}},{key:"handleColumnHeadClick",value:function(e){"disabled"!==this.props.columnPick&&(this.setColumnActive(e,"single"===this.props.columnPick),this.context.emit("column-pick",this.propActiveCols))}},{key:"renderHeader",value:function(){var t=this,r=(this.$createElement,{"--row-height":"".concat(x(this.props,"headHeight",["thead"]),"px")});return(0,n.createVNode)("thead",{style:r},[(0,n.createVNode)("tr",null,[this.props.columns.map((function(r,o){return(0,n.createVNode)("th",{colspan:1,rowspan:1,class:(0,e.classes)({active:t.isColActive(o)}),onClick:function(){return t.handleColumnHeadClick(o)}},[(0,n.createVNode)("div",{class:"cell"},[x(r,"label",[r])])])}))])])}},{key:"renderTBody",value:function(e){var t=this;return this.$createElement,(0,n.createVNode)("tbody",null,[e.map((function(r,o){var a={"--row-height":"".concat(x(t.props,"rowHeight",["tbody",r,o]),"px")};return(0,n.createVNode)("tr",{style:a,onClick:function(n){return t.handleRowClick(n,r,o,e)},onDblclick:function(n){return t.handleRowDblClick(n,r,o,e)}},[t.props.columns.map((function(o,a){return(0,n.createVNode)("td",{class:t.getColumnClass(a),colspan:1,rowspan:1},[(0,n.createVNode)("div",{class:"cell"},[t.renderCell(r,o,a,e)])])}))])}))])}},{key:"handleRowClick",value:function(e,t,r,n){this.context.emit("rowClick",e,t,r,n,this)}},{key:"handleRowDblClick",value:function(e,t,r,n){this.context.emit("rowDblClick",e,t,r,n,this)}},{key:"renderCell",value:function(e,t,r,n){var o=e[x(t,"field",[t,e])];return"function"==typeof t.render?t.render(o,e,r,n):o}},{key:"isColActive",value:function(e){return"disabled"!==this.props.columnPick&&this.propActiveCols.some((function(t){return t.index===e&&t.active}))}},{key:"renderColGroup",value:function(){var t=this;return this.$createElement,(0,n.createVNode)("colgroup",null,[(this.colgroups||[]).map((function(r,o){var a,i=(0,e.classes)({active:t.isColActive(o)}),l="".concat((a=r.calcWidth,w(a,"auto"))).replace(/px$/i,"");return(0,n.createVNode)("col",{class:i,width:l},null)}))])}}]),t}();const V=(0,n.defineComponent)({name:"Table",props:l,emits:["columnPick","rowClick","rowDblClick","pageLimitChange","pageValueChange"],setup:function(t,o){this.$createElement;var l=(0,n.reactive)(k(t)),c=(0,n.reactive)(t.columns.map((function(e){return Object.assign(Object.assign({},e),{calcWidth:null})}))),s=(0,n.ref)(0),u=(0,n.ref)(0),p=(0,n.reactive)({count:0,limit:10,current:1});p=j(t.pagination,p);var d=function(){if(!t.pagination||t.remotePagination)return s.value=0,void(u.value=t.data.length);s.value=(p.current-1)*p.limit,u.value=p.current*p.limit};d();var f=null,h=(0,n.ref)(),v=function(){return(t.columns||[]).map((function(e,t){return{index:t,active:l.some((function(e){return e===t})),_column:e}}))},m=(0,n.reactive)({activeColumns:v(),scrollTranslateY:0});(0,n.watch)((function(){return[t.activeColumn,t.columns]}),(function(){(0,n.nextTick)((function(){m.activeColumns=v();var e=k(t);m.activeColumns.forEach((function(t,r){Object.assign(t,{active:e.some((function(e){return e===r}))})}))}))}),{deep:!0});var b=new N(t,o,m,c),y=(0,n.computed)((function(){return{minHeight:w(t.minHeight,"auto")}}));(0,n.watchEffect)((function(){p=j(t.pagination,p),d()}));var g=(0,n.computed)((function(){return t.data.slice(s.value,u.value)})),T=(0,n.computed)((function(){return t.pagination?t.remotePagination?p:Object.assign(Object.assign({},p),{count:t.data.length}):null})),x=(0,n.computed)((function(){var e,r=w(t.height),n=t.showHead?w(t.headHeight):"0",o=(e=t.height,!/^\d+\.?\d*(px|%)?$/.test("".concat(e))),a=t.pagination?40:0,i="calc(".concat(r," - ").concat(n," - ").concat(a,"px - 2px)");return Object.assign({display:"block"},o?{maxHeight:i}:{height:i})})),O=(0,n.computed)((function(){return(0,e.classes)(r()({},(0,e.resolveClassName)("table"),!0),(o=["row"],"string"==typeof(n=t.border)&&o.push(n),Array.isArray(n)&&o.push.apply(o,C()(n.filter((function(e){return i.includes(e)})))),C()(new Set(o)).map((function(e){return"bordered-".concat(e)})).join(" ")));var n,o})),V=(0,e.classes)(r()({},(0,e.resolveClassName)("table-head"),!0)),q=(0,e.classes)(r()({},(0,e.resolveClassName)("table-body"),!0)),A=(0,e.classes)(r()({},(0,e.resolveClassName)("table-footer"),!0)),H=function(e){var t=e[1];m.scrollTranslateY=t.translateY};return(0,n.onMounted)((function(){f=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:60,n=arguments.length>3&&void 0!==arguments[3]&&arguments[3],o=(0,P.throttle)((function(){"function"==typeof t&&t()}),r),a=new ResizeObserver((function(){o()}));return n&&"function"==typeof t&&t(),{start:function(){a.observe(e)},stop:function(){a.disconnect(),a.unobserve(e)}}}(h.value,(function(){!function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:20,n=(e.getBoundingClientRect()||{}).width-4,o=[],a=function(e,t){var r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];Object.assign(e,{calcWidth:t}),r&&(n-=t)<0&&(n=0)};if(t.forEach((function(e,t){var i=String(e.width),l=!0;if(/^\d+\.?\d*(px)?$/.test(i)){var c=Number(i.replace("px",""));a(e,c),l=!1}if(/^\d+\.?\d*%$/.test(i)){var s=r;if(n>0){var u=Number(i.replace("%",""));s=n*u/100}a(e,s),l=!1}l&&o.push(t)})),o.length>0){var i=r;n>0&&(i=n/o.length,o.forEach((function(e){return a(t[e],i,!1)})))}}(h.value,c,20)}),60,!0),f.start()})),(0,n.onBeforeUnmount)((function(){f.stop(),f=null})),o.expose({plugins:b.plugins}),function(){return(0,n.createVNode)("div",{class:O.value,style:y.value,ref:h},[(0,n.createVNode)("div",{class:V},[t.showHead&&b.renderTableHeadSchema()]),(0,n.createVNode)(a(),{lineHeight:t.rowHeight,class:q,style:x.value,list:g.value,onContentScroll:H,throttleDelay:0,enabled:t.virtualEnabled},{default:function(e){return b.renderTableBodySchema(e.data||t.data)},afterContent:function(){return(0,n.createVNode)("div",{class:(0,e.resolveClassName)("table-fixed")},null)}}),(0,n.createVNode)("div",{class:A},[t.pagination&&b.renderTableFooter(T.value)])])}}}),q=(0,e.withInstall)(V)})(),f})()));

package/lib/table/table.less

@@ -1,5 +1,115 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-table {
-  
+  height: 100%;
+  overflow: hidden;
+  border-top: 1px solid @table-border-color;
+  border-bottom: 1px solid @table-border-color;
+  .@{bk-prefix}-table-body {
+    overflow: auto;
+  }
+
+  .@{bk-prefix}-table-head,
+  .@{bk-prefix}-table-body {
+    background: @table-bg-color;
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      table-layout: fixed;
+      
+      th,
+      td {
+        min-width: 80px;
+
+        .cell {
+          padding: 0 15px;
+          overflow: hidden;
+          line-height: var(--row-height);
+          color: @table-body-font-color;
+          text-align: left;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      thead {
+        th {
+          position: sticky; 
+          top: 0; 
+          z-index: 1;
+          color: @table-head-font-color;
+          background-color: @table-head-bg-color;
+
+          &.active,
+          &:hover {
+            background: #f0f1f5;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          &:hover {
+            td {
+              background: @table-row-hover-bg-color;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .@{bk-prefix}-table-footer {
+    line-height: 40px;
+  }
+
+  &.bordered-row {
+    td,
+    th { 
+      border-bottom: 1px solid @table-border-color;
+    }
+  }
+
+  &.bordered-outer {
+    border-right: 1px solid @table-border-color;
+    border-left: 1px solid @table-border-color;
+  }
+
+  &.bordered-col {
+    th,
+    td {
+      border-right: 1px solid @table-border-color;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+
+  }
+
+  &.bordered-none {
+    th,
+    td {
+      border-top: none;
+      border-right: none;
+      border-bottom: none;
+      border-left: none;
+    }
+  }
+
+  .@{bk-prefix}-table-fixed {
+    width: 100%;
+  }
+
+  colgroup {
+    col {
+      background: @table-bg-color;
+
+      &.active {
+        position: relative;
+        background: #f0f1f5;
+      }
+    }
+  }
 }

package/lib/table/table.variable.css

@@ -1,10 +1,12 @@
 :root {
   --bk-prefix: bk;
+  --popover-max-height: 216px;
   --primary-color: #3a84ff;
   --success-color: #2dcb56;
   --warning-color: #ff9c01;
   --danger-color: #ea3636;
   --default-color: #63656e;
+  --gray-color: #979ba5;
   --light-gray: #c4c6cc;
   --white-color: white;
   --disable-color: #dcdee5;
@@ -58,4 +60,125 @@
   --link-success-disabled-color: #94f5a4;
   --link-warning-disabled-color: #ffd695;
   --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+}
+.bk-table {
+  height: 100%;
+  overflow: hidden;
+  border-top: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table .bk-table-body {
+  overflow: auto;
+}
+.bk-table .bk-table-head,
+.bk-table .bk-table-body {
+  background: var(--table-bg-color);
+}
+.bk-table .bk-table-head table,
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.bk-table .bk-table-head table th,
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-head table td,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+}
+.bk-table .bk-table-head table th .cell,
+.bk-table .bk-table-body table th .cell,
+.bk-table .bk-table-head table td .cell,
+.bk-table .bk-table-body table td .cell {
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: var(--row-height);
+  color: var(--table-body-font-color);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-head table thead th,
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  color: var(--table-head-font-color);
+  background-color: var(--table-head-bg-color);
+}
+.bk-table .bk-table-head table thead th.active,
+.bk-table .bk-table-body table thead th.active,
+.bk-table .bk-table-head table thead th:hover,
+.bk-table .bk-table-body table thead th:hover {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-head table tbody tr:hover td,
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: var(--table-row-hover-bg-color);
+}
+.bk-table .bk-table-footer {
+  line-height: 40px;
+}
+.bk-table.bordered-row td,
+.bk-table.bordered-row th {
+  border-bottom: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-outer {
+  border-right: 1px solid var(--table-border-color);
+  border-left: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th,
+.bk-table.bordered-col td {
+  border-right: 1px solid var(--table-border-color);
+}
+.bk-table.bordered-col th:last-child,
+.bk-table.bordered-col td:last-child {
+  border-right: none;
+}
+.bk-table.bordered-none th,
+.bk-table.bordered-none td {
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  border-left: none;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: var(--table-bg-color);
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
 }

package/lib/table/utils.d.ts

@@ -0,0 +1,69 @@
+import { GroupColumn, TablePropTypes } from './props';
+/**
+ * 解析Prop值 | 可能为多种类型 & 函数返回的场景
+ * @param prop 当前Prop
+ * @param key 要处理的Key
+ * @param args 如果是函数，传递参数
+ * @returns
+ */
+export declare const resolvePropVal: (prop: any, key: string, args: any[]) => any;
+/**
+ * 处理Props中的ActiveColumn，解析为统一的数组格式
+ * @param props
+ * @returns
+ */
+export declare const resolveActiveColumns: (props: TablePropTypes) => number[];
+/**
+ * 统一处理数字类型参数
+ * @param prop
+ * @returns
+ */
+export declare const resolveNumberToNumArray: (prop: number) => number[];
+export declare const resolveWidth: (propWidth: string | number) => string | number;
+/**
+ * 解析可为数字或者字符串设置的样式配置
+ * @param val 配置值
+ * @param defaultValue 默认值
+ * @param offset 偏移量
+ * @returns 标准化px string
+ */
+export declare const resolveNumberOrStringToPix: (val: string | number, defaultValue?: string | number, offset?: any) => string | number;
+/**
+ * 格式化Border配置为标准Class
+ * @param val
+ * @returns
+ */
+export declare const resolvePropBorderToClassStr: (val: string | string[]) => string;
+/**
+ * 根据Props Column配置计算并设置列宽度
+ * @param root 当前根元素
+ * @param colgroups Columns配置
+ * @param autoWidth 自动填充宽度
+ */
+export declare const resolveColumnWidth: (root: HTMLElement, colgroups: GroupColumn[], autoWidth?: number) => void;
+/**
+ * 监听目标元素的Resize事件
+ * @param root 目标元素
+ * @param callbackFn 执行函数
+ * @param delay 延迟执行时间，默认 60
+ * @param immediate 是否立即执行回调函数
+ * @returns "{ start: () => void, stop: () => void }"
+ */
+export declare const observerResize: (root: HTMLElement, callbackFn: () => void, delay?: number, immediate?: boolean) => {
+    start: () => void;
+    stop: () => void;
+};
+/**
+ * 判定为数值 | px | %
+ * @param val
+ * @returns
+ */
+export declare const isPercentPixOrNumber: (val: string | number) => boolean;
+/**
+ * 处理 Prop中的分页配置
+ * prop中的配置会覆盖本地的配置
+ * @param propPagination 用户传入的配置
+ * @param defVal 默认配置
+ * @returns 返回值
+ */
+export declare const resolvePaginationOption: (propPagination: any, defVal: any) => any;