bkui-vue 0.0.1-beta.41 → 0.0.1-beta.44

package/lib/message/message.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-message {
   position: fixed;
@@ -137,10 +138,19 @@
 .bk-message-success .bk-message-icon {
   color: var(--success-color);
 }
-.bk-message-danger {
+.bk-message-error {
   background: var(--message-danger-bg-color);
   border: 1px solid var(--message-danger-border-color);
 }
-.bk-message-danger .bk-message-icon {
+.bk-message-error .bk-message-icon {
   color: var(--danger-color);
 }
+.bk-fade-enter-active,
+.bk-fade-leave-active {
+  transition: margin 0.2s linear;
+}
+.bk-fade-enter-from,
+.bk-fade-leave-to {
+  margin-top: -50px;
+  opacity: 0;
+}

package/lib/message/messageConstructor.d.ts

@@ -17,11 +17,26 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-    offset: import("vue-types").VueTypeValidableDef<number> & {
+    dismissable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    offsetY: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    spacing: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
         default: number;
     };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
@@ -32,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
         zIndex: number;
     }>;
     visible: import("vue").Ref<boolean>;
-    handleClose: () => void;
+    close: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "destory"[], "destory", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
@@ -52,11 +67,26 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: number;
     };
-    offset: import("vue-types").VueTypeValidableDef<number> & {
+    dismissable: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    offsetY: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    spacing: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
         default: number;
     };
+    extCls: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
     onClose: import("vue-types").VueTypeValidableDef<(...args: any[]) => any> & {
         default: (...args: any[]) => any;
     };
@@ -64,10 +94,13 @@ declare const _default: import("vue").DefineComponent<{
     onDestory?: (...args: any[]) => any;
 }, {
     id: string;
-    offset: number;
     onClose: (...args: any[]) => any;
     theme: string;
+    extCls: string;
     message: string;
+    spacing: number;
     delay: number;
+    dismissable: boolean;
+    offsetY: number;
 }>;
 export default _default;

package/lib/navigation/navigation.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-navigation {
   display: flex;

package/lib/notify/notify.js

@@ -1 +1 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("@babel/runtime/helpers/defineProperty"),require("../icon"),require("../shared"));else if("function"==typeof define&&define.amd)define(["vue","@babel/runtime/helpers/defineProperty","../icon","../shared"],t);else{var o="object"==typeof exports?t(require("vue"),require("@babel/runtime/helpers/defineProperty"),require("../icon"),require("../shared")):t(e.vue,e["@babel/runtime/helpers/defineProperty"],e["../icon"],e["../shared"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o,r)=>(()=>{"use strict";var n={6870:e=>{e.exports=o},4212:e=>{e.exports=r},311:e=>{e.exports=t},748:t=>{t.exports=e}},i={};function s(e){var t=i[e];if(void 0!==t)return t.exports;var o=i[e]={exports:{}};return n[e](o,o.exports,s),o.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{s.r(a),s.d(a,{default:()=>f});var e=s(748),t={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},o=1;var r=s(311),n=s.n(r),i=s(6870),l=s(4212),u={id:l.PropTypes.string.def(""),title:l.PropTypes.string.def(""),message:l.PropTypes.string.def(""),theme:l.PropTypes.theme(["primary","warning","success","danger"]).def("primary"),position:l.PropTypes.position().def("top-right"),delay:l.PropTypes.number.def(3e3),offset:l.PropTypes.number.def(0),onClose:l.PropTypes.func};const c=(0,e.defineComponent)({name:"Notify",props:u,emits:["destory"],setup:function(t,o){var r=o.emit,i=(0,e.computed)((function(){return["bk-notify","bk-notify-".concat(t.theme)]})),s=l.bkZIndexManager.getMessageNextIndex(),a=(0,e.computed)((function(){return t.position.indexOf("right")>1?"right":"left"})),u=(0,e.computed)((function(){return t.position.startsWith("top")?"top":"bottom"})),c=(0,e.computed)((function(){var e;return e={},n()(e,a.value,"10px"),n()(e,u.value,"".concat(t.offset,"px")),n()(e,"zIndex",s),e})),f=(0,e.ref)(!1),p=null;return(0,e.onMounted)((function(){p=setTimeout((function(){f.value=!1}),t.delay),f.value=!0})),(0,e.onUnmounted)((function(){clearTimeout(p)})),(0,e.watch)(f,(function(){f.value||r("destory",t.id)})),{classNames:i,styles:c,visible:f,handleClose:function(){f.value=!1}}},render:function(){var t=this;return(0,e.createVNode)(e.Transition,{name:"bk-notify-fade"},{default:function(){return[(0,e.withDirectives)((0,e.createVNode)("div",{class:t.classNames,style:t.styles},[(0,e.createVNode)("div",{class:"bk-notify-content"},[(0,e.createVNode)("div",{class:"bk-notify-icon"},[{primary:(0,e.createVNode)(i.Info,null,null),warning:(0,e.createVNode)(i.Warn,null,null),success:(0,e.createVNode)(i.Success,null,null),danger:(0,e.createVNode)(i.Close,null,null)}[t.theme]]),t.title?(0,e.createVNode)("h3",{class:"bk-notify-content-header"},[t.title]):"",(0,e.createVNode)("div",{class:"bk-notify-content-text"},[t.message])]),(0,e.createVNode)(i.Error,{class:"bk-notify-icon bk-notify-close",onClick:t.handleClose},null)]),[[e.vShow,t.visible]])]}})}}),f=function(r){!function(r,n){var i=n,s=i.position||"top-right";"string"==typeof n&&(i={message:n});var a=n.onClose,l=i.offset||20;t[s].forEach((function(e){l+=(e.el.offsetHeight||0)+16})),l+=16;var u="message_".concat(o+=1);i=Object.assign(Object.assign({},i),{offset:l,id:u});var c=document.createElement("div"),f=(0,e.createVNode)(r,i);f.props.onDestory=function(o){!function(e,o,r){null==r||r();var n=o.startsWith("top")?"top":"bottom",i=-1;t[o].forEach((function(t,o){t.props.id===e&&(i=o)}));for(var s=t[o][i].el.offsetHeight,a=t[o].length,l=i;l<a;l++){var u=parseInt(t[o][l].el.style[n],10)-s-16;t[o][l].component.props.offset=u}t[o].splice(i,1)}(o,s,a),(0,e.render)(null,c)},(0,e.render)(f,c),t[s].push(f),document.body.appendChild(c.firstElementChild)}(c,r)}})(),a})()));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("vue"),require("@babel/runtime/helpers/defineProperty"),require("../icon"),require("../shared"));else if("function"==typeof define&&define.amd)define(["vue","@babel/runtime/helpers/defineProperty","../icon","../shared"],t);else{var o="object"==typeof exports?t(require("vue"),require("@babel/runtime/helpers/defineProperty"),require("../icon"),require("../shared")):t(e.vue,e["@babel/runtime/helpers/defineProperty"],e["../icon"],e["../shared"]);for(var r in o)("object"==typeof exports?exports:e)[r]=o[r]}}(self,((e,t,o,r)=>(()=>{"use strict";var n={6870:e=>{e.exports=o},4212:e=>{e.exports=r},311:e=>{e.exports=t},748:t=>{t.exports=e}},i={};function s(e){var t=i[e];if(void 0!==t)return t.exports;var o=i[e]={exports:{}};return n[e](o,o.exports,s),o.exports}s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},s.d=(e,t)=>{for(var o in t)s.o(t,o)&&!s.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{s.r(a),s.d(a,{default:()=>f});var e=s(748),t={"top-left":[],"top-right":[],"bottom-left":[],"bottom-right":[]},o=1;var r=s(311),n=s.n(r),i=s(6870),l=s(4212),u={id:l.PropTypes.string.def(""),title:l.PropTypes.string.def(""),message:l.PropTypes.string.def(""),theme:l.PropTypes.theme(["primary","warning","success","danger"]).def("primary"),position:l.PropTypes.position().def("top-right"),delay:l.PropTypes.number.def(3e3),offset:l.PropTypes.number.def(0),onClose:l.PropTypes.func};const c=(0,e.defineComponent)({name:"Notify",props:u,emits:["destory"],setup:function(t,o){var r=o.emit,i=(0,e.computed)((function(){return["bk-notify","bk-notify-".concat(t.theme)]})),s=l.bkZIndexManager.getMessageNextIndex(),a=(0,e.computed)((function(){return t.position.indexOf("right")>1?"right":"left"})),u=(0,e.computed)((function(){return t.position.startsWith("top")?"top":"bottom"})),c=(0,e.computed)((function(){var e;return e={},n()(e,a.value,"10px"),n()(e,u.value,"".concat(t.offset,"px")),n()(e,"zIndex",s),e})),f=(0,e.ref)(!1),p=null;return(0,e.onMounted)((function(){p=setTimeout((function(){f.value=!1}),t.delay),f.value=!0})),(0,e.onUnmounted)((function(){clearTimeout(p)})),(0,e.watch)(f,(function(){f.value||r("destory",t.id)})),{classNames:i,styles:c,visible:f,handleClose:function(){f.value=!1}}},render:function(){var t=this;return(0,e.createVNode)(e.Transition,{name:"bk-notify-fade"},{default:function(){return[(0,e.withDirectives)((0,e.createVNode)("div",{class:t.classNames,style:t.styles},[(0,e.createVNode)("div",{class:"bk-notify-content"},[(0,e.createVNode)("div",{class:"bk-notify-icon"},[{primary:(0,e.createVNode)(i.Info,null,null),warning:(0,e.createVNode)(i.Warn,null,null),success:(0,e.createVNode)(i.Success,null,null),danger:(0,e.createVNode)(i.Close,null,null)}[t.theme]]),t.title?(0,e.createVNode)("h3",{class:"bk-notify-content-header"},[t.title]):"",(0,e.createVNode)("div",{class:"bk-notify-content-text"},[t.message])]),(0,e.createVNode)(i.Error,{class:"bk-notify-icon bk-notify-close",onClick:t.handleClose},null)]),[[e.vShow,t.visible]])]}})}}),f=function(r){!function(r,n){var i=n,s=i.position||"top-right";"string"==typeof n&&(i={message:n});var a=n.onClose,l=i.offsetY||30,u=i.spacing,c=void 0===u?10:u;t[s].forEach((function(e){l+=(e.el.offsetHeight||0)+c}));var f="message_".concat(o+=1);i=Object.assign(Object.assign({},i),{offsetY:l,id:f});var p=document.createElement("div"),d=(0,e.createVNode)(r,i);d.props.onDestory=function(o){!function(e,o,r,n){null==n||n();var i=o.startsWith("top")?"top":"bottom",s=-1;t[o].forEach((function(t,o){t.props.id===e&&(s=o)}));for(var a=t[o][s].el.offsetHeight,l=t[o].length,u=s;u<l;u++){var c=parseInt(t[o][u].el.style[i],10)-a-r;t[o][u].component.props.offsetY=c}t[o].splice(s,1)}(o,s,c,a),(0,e.render)(null,p)},(0,e.render)(d,p),t[s].push(d),document.body.appendChild(p.firstElementChild)}(c,r)}})(),a})()));

package/lib/notify/notify.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-notify {
   position: fixed;

package/lib/pagination/pagination.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-pagination {
   display: flex;

package/lib/popover/popover.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-popover .bk-popover-reference {
   display: inline-block;

package/lib/process/process.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 * {
   box-sizing: border-box;

package/lib/progress/progress.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/radio/radio.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-radio {
   display: inline-block;

package/lib/resize-layout/resize-layout.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-resize-layout {
   display: flex;

package/lib/select/select.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/sideslider/sideslider.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-modal-wrapper.bk-sideslider-wrapper {
   position: fixed;

package/lib/slider/slider.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-slider {
   display: flex;

package/lib/steps/steps.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 * {
   box-sizing: border-box;

package/lib/styles/themes/themes.less

@@ -124,3 +124,4 @@
 
 @table-body-font-color: #575961;
 @table-row-hover-bg-color: #f5f7fa;
+@table-row-active-bg-color: #f0f1f5;

package/lib/switcher/switcher.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 @keyframes loading-scale-animate {
   0% {

package/lib/tab/tab.variable.css

@@ -90,6 +90,7 @@
   --table-head-font-color: #313238;
   --table-body-font-color: #575961;
   --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
 }
 .bk-tab {
   position: relative;

package/lib/table/index.d.ts

@@ -44,6 +44,7 @@ declare const BkTable: {
             } & {
                 default: boolean;
             };
+            thead: import("vue-types").VueTypeShape<import("./props").Thead>;
             virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
@@ -112,6 +113,7 @@ declare const BkTable: {
             } & {
                 default: boolean;
             };
+            thead: import("vue-types").VueTypeShape<import("./props").Thead>;
             virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
                 default: boolean;
             } & {
@@ -200,6 +202,7 @@ declare const BkTable: {
         } & {
             default: boolean;
         };
+        thead: import("vue-types").VueTypeShape<import("./props").Thead>;
         virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
             default: boolean;
         } & {
@@ -258,6 +261,7 @@ declare const BkTable: {
     } & {
         default: boolean;
     };
+    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/table/props.d.ts

@@ -1,4 +1,8 @@
 import { ExtractPropTypes } from 'vue';
+export declare enum SortScope {
+    CURRENT = "current",
+    ALL = "all"
+}
 export declare const tableProps: {
     /**
      * 渲染列表
@@ -60,6 +64,10 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * table header config
+     */
+    thead: import("vue-types").VueTypeShape<Thead>;
     /**
      * 是否启用虚拟渲染 & 滚动
      * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
@@ -99,9 +107,20 @@ export declare const tableProps: {
 };
 export declare type Column = {
     label: Function | string;
-    field: Function | string;
+    field?: Function | string;
     render?: Function | string;
     width?: number | string;
+    type?: string;
+    sort?: {
+        sortby?: string;
+        sortFn?: Function;
+        sortScope?: string;
+    } | boolean;
+};
+export declare type Thead = {
+    height?: Number;
+    isShow?: boolean;
+    cellFn?: Function;
 };
 export declare type GroupColumn = {
     calcWidth?: number;

package/lib/table/render.d.ts

@@ -1,11 +1,21 @@
 import { TablePlugins } from './plugins/index';
 import { GroupColumn, IColumnActive, IReactiveProp, TablePropTypes } from './props';
+export declare const enum EVENTS {
+    /** 点击排序事件 */
+    ON_SORT_BY_CLICK = "onSortByClick"
+}
+/** 排序方式 */
+export declare const enum SortType {
+    ASC = "asc",
+    DESC = "desc"
+}
 export default class TableRender {
     props: TablePropTypes;
     context: any;
     reactiveProp: any;
     colgroups: GroupColumn[];
     uuid: string;
+    events: Map<string, any[]>;
     plugins: TablePlugins;
     constructor(props: any, ctx: any, reactiveProp: IReactiveProp, colgroups: GroupColumn[]);
     get propActiveCols(): IColumnActive[];
@@ -22,6 +32,19 @@ export default class TableRender {
      */
     renderTableBodySchema(rows: any[]): JSX.Element;
     renderTableFooter(options: any): JSX.Element;
+    /**
+     * 注册监听事件
+     * @param eventName
+     * @param wartcher
+     */
+    on(eventName: string, wartcher: Function): this;
+    destroy(): void;
+    /**
+     * 派发事件
+     * @param eventName
+     * @param args
+     */
+    private emitEvent;
     private handlePageLimitChange;
     private hanlePageChange;
     /**
@@ -62,6 +85,15 @@ export default class TableRender {
      * @param rows
      */
     private handleRowDblClick;
+    /**
+     * 获取当前行指定列的内容
+     * @param row 当前行
+     * @param key 指定列名
+     * @param column 列配置
+     * @param index 当前行Index
+     * @returns
+     */
+    private getRowText;
     /**
      * 渲染表格Cell内容
      * @param row 当前行

package/lib/table/table.css

@@ -27,6 +27,8 @@
 .bk-table .bk-table-body table th .cell,
 .bk-table .bk-table-head table td .cell,
 .bk-table .bk-table-body table td .cell {
+  display: flex;
+  align-items: center;
   padding: 0 15px;
   overflow: hidden;
   line-height: var(--row-height);
@@ -37,9 +39,6 @@
 }
 .bk-table .bk-table-head table thead th,
 .bk-table .bk-table-body table thead th {
-  position: sticky;
-  top: 0;
-  z-index: 1;
   color: #313238;
   background-color: #fafbfd;
 }
@@ -49,6 +48,33 @@
 .bk-table .bk-table-body table thead th:hover {
   background: #f0f1f5;
 }
+.bk-table .bk-table-head table thead th .head-cell-sort,
+.bk-table .bk-table-body table thead th .head-cell-sort {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+  font-size: 10px;
+}
+.bk-table .bk-table-head table thead th .head-cell-sort .sort-action,
+.bk-table .bk-table-body table thead th .head-cell-sort .sort-action {
+  display: flex;
+  width: 18px;
+  height: calc(var(--row-height)/2);
+  color: #c0c4cc;
+  cursor: pointer;
+}
+.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.active,
+.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.active {
+  color: #3a84ff;
+}
+.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-asc,
+.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-asc {
+  align-items: flex-end;
+}
+.bk-table .bk-table-head table thead th .head-cell-sort .sort-action.sort-desc,
+.bk-table .bk-table-body table thead th .head-cell-sort .sort-action.sort-desc {
+  align-items: flex-start;
+}
 .bk-table .bk-table-head table tbody tr:hover td,
 .bk-table .bk-table-body table tbody tr:hover td {
   background: #f5f7fa;

package/lib/table/table.d.ts

@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -75,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    thead: import("vue-types").VueTypeShape<import("./props").Thead>;
     virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {

package/lib/table/table.js

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

package/lib/table/table.less

@@ -23,6 +23,8 @@
         min-width: 80px;
 
         .cell {
+          display: flex;
+          align-items: center;
           padding: 0 15px;
           overflow: hidden;
           line-height: var(--row-height);
@@ -35,15 +37,39 @@
 
       thead {
         th {
-          position: sticky; 
-          top: 0; 
-          z-index: 1;
           color: @table-head-font-color;
           background-color: @table-head-bg-color;
 
           &.active,
           &:hover {
-            background: #f0f1f5;
+            background: @table-row-active-bg-color;
+          }
+
+          .head-cell-sort {
+            display: flex;
+            flex-direction: column;
+            margin-left: 4px;
+            font-size: 10px;
+
+            .sort-action {
+              display: flex;
+              width: 18px;
+              height: calc(var(--row-height)/2);
+              color: #c0c4cc;
+              cursor: pointer;
+
+              &.active {
+                color: #3a84ff;
+              }
+
+              &.sort-asc {
+                align-items: flex-end;
+              }
+
+              &.sort-desc {
+                align-items: flex-start;
+              }
+            }
           }
         }
       }
@@ -108,7 +134,7 @@
 
       &.active {
         position: relative;
-        background: #f0f1f5;
+        background: @table-row-active-bg-color;
       }
     }
   }