bkui-vue 0.0.1-beta.10 → 0.0.1-beta.11

package/lib/tab/tab.variable.css

@@ -0,0 +1,233 @@
+:root {
+  --bk-prefix: bk;
+  --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;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 38px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 10px;
+  --input-block-color: #f4f6fa;
+  --input-icon-size: var(--font-size-large);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --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;
+}
+.bk-tab {
+  position: relative;
+  display: flex;
+  width: 100%;
+}
+.bk-tab--top {
+  flex-direction: column;
+}
+.bk-tab--right {
+  flex-direction: row-reverse;
+}
+.bk-tab-header {
+  display: flex;
+  color: var(--default-color);
+}
+.bk-tab-header > div {
+  display: flex;
+  margin-bottom: -1px;
+  flex-wrap: nowrap;
+}
+.bk-tab--card .bk-tab-header > div,
+.bk-tab--border-card .bk-tab-header > div {
+  border-right: 1px solid var(--disable-color);
+}
+.bk-tab--top .bk-tab-header-nav {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.bk-tab--left .bk-tab-header-nav,
+.bk-tab--right .bk-tab-header-nav {
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.bk-tab--card .bk-tab-header-nav,
+.bk-tab--border-card .bk-tab-header-nav {
+  border-left: 1px solid var(--disable-color);
+}
+.bk-tab-header-nav::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header {
+  border-right: 1px solid var(--disable-color);
+}
+.bk-tab--right .bk-tab-header {
+  border-left: 1px solid var(--disable-color);
+}
+.bk-tab--left .bk-tab-header,
+.bk-tab--right .bk-tab-header {
+  flex-direction: column;
+}
+.bk-tab--left .bk-tab-header > div,
+.bk-tab--right .bk-tab-header > div {
+  flex-direction: column;
+}
+.bk-tab--card .bk-tab-header {
+  border-bottom: 1px solid var(--disable-color);
+}
+.bk-tab--border-card .bk-tab-header {
+  background: #FAFBFD;
+  border: solid var(--disable-color);
+  border-width: 1px 1px 1px 0;
+}
+.bk-tab--unborder-card .bk-tab-header {
+  border-bottom: 1px solid var(--disable-color);
+}
+.bk-tab-header-item {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+  justify-content: center;
+  align-items: center;
+}
+.bk-tab-header-item:hover {
+  color: var(--primary-color);
+}
+.bk-tab-header-item:hover .bk-tab-header-item-close {
+  display: block;
+  margin-left: 10px;
+  color: var(--danger-color);
+}
+.bk-tab--top .bk-tab-header-item {
+  padding: 0 20px;
+}
+.bk-tab--left .bk-tab-header-item,
+.bk-tab--right .bk-tab-header-item {
+  padding: 0 12px;
+}
+.bk-tab--left .bk-tab-header-item {
+  text-align: right;
+}
+.bk-tab--card .bk-tab-header-item {
+  border-top: 1px solid var(--disable-color);
+}
+.bk-tab--card .bk-tab-header-item,
+.bk-tab--border-card .bk-tab-header-item {
+  border-right: 1px solid var(--disable-color);
+  border-bottom: 1px solid var(--disable-color);
+}
+.bk-tab--card .bk-tab-header-item:last-of-type,
+.bk-tab--border-card .bk-tab-header-item:last-of-type {
+  border-right: none;
+}
+.bk-tab-header-operation .bk-tab-header-item {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.bk-tab-header-item-close {
+  display: none;
+  color: var(--light-gray);
+}
+.bk-tab-header--active {
+  color: var(--primary-color);
+}
+.bk-tab--card .bk-tab-header--active,
+.bk-tab--border-card .bk-tab-header--active {
+  border-bottom-color: var(--white-color);
+}
+.bk-tab--unborder-card .bk-tab-header--active {
+  border-bottom: 2px solid var(--primary-color);
+}
+.bk-tab--left .bk-tab-header--active {
+  border-right: 2px solid var(--primary-color);
+}
+.bk-tab--right .bk-tab-header--active {
+  border-left: 2px solid var(--primary-color);
+}
+.bk-tab-header--disabled {
+  color: #aaa;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.bk-tab-content {
+  flex: 1;
+  padding: 10px;
+}
+.bk-tab--border-card .bk-tab-content {
+  border: solid var(--disable-color);
+  border-width: 0 1px 1px;
+}
+.bk-tab-panel {
+  height: 100%;
+}

package/lib/table/index.d.ts

@@ -3,22 +3,31 @@ declare const BkTable: {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            showHeader: boolean;
-            headerBorder: boolean;
-            defaultSort: {
-                [key: string]: any;
-            };
-        }> & Omit<Readonly<{
-            showHeader?: unknown;
-            headerBorder?: unknown;
-            defaultSort?: unknown;
+            data: any[];
+            columnPick: string;
+        }> & Omit<({} & (Readonly<{
+            data?: unknown;
+            columns?: unknown;
+            activeColumn?: unknown;
+            columnPick?: unknown;
         } & {
-            showHeader: boolean;
-            headerBorder: boolean;
-            defaultSort: {
-                [key: string]: any;
-            };
-        } & {}> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "showHeader" | "headerBorder" | "defaultSort">;
+            data: any[];
+            columnPick: string;
+        } & {
+            columns?: import("./props").Column[];
+            activeColumn?: number | number[];
+        }> & ({} | {}))) & (import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<{
+            data?: unknown;
+            columns?: unknown;
+            activeColumn?: unknown;
+            columnPick?: unknown;
+        } & {
+            data: any[];
+            columnPick: string;
+        } & {
+            columns?: import("./props").Column[];
+            activeColumn?: number | number[];
+        }> & ({} | {})), "data" | "columnPick">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -30,26 +39,22 @@ declare const BkTable: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
-        $emit: (event: string, ...args: any[]) => void;
+        $emit: ((event: string, ...args: any[]) => void) | ((event: string, ...args: any[]) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<{
-            showHeader?: unknown;
-            headerBorder?: unknown;
-            defaultSort?: unknown;
+            data?: unknown;
+            columns?: unknown;
+            activeColumn?: unknown;
+            columnPick?: unknown;
         } & {
-            showHeader: boolean;
-            headerBorder: boolean;
-            defaultSort: {
-                [key: string]: any;
-            };
-        } & {}> & {}, {
-            handleHeaderFooterMousewheel: (_event: any, data: any) => void;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-            showHeader: boolean;
-            headerBorder: boolean;
-            defaultSort: {
-                [key: string]: any;
-            };
+            data: any[];
+            columnPick: string;
+        } & {
+            columns?: import("./props").Column[];
+            activeColumn?: number | number[];
+        }> & ({} | {}), () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
+            data: any[];
+            columnPick: string;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -70,39 +75,45 @@ declare const BkTable: {
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean>): import("vue").WatchStopHandle;
-    } & Readonly<{
-        showHeader?: unknown;
-        headerBorder?: unknown;
-        defaultSort?: unknown;
+    } & (Readonly<{
+        data?: unknown;
+        columns?: unknown;
+        activeColumn?: unknown;
+        columnPick?: unknown;
     } & {
-        showHeader: boolean;
-        headerBorder: boolean;
-        defaultSort: {
-            [key: string]: any;
-        };
-    } & {}> & {} & import("vue").ShallowUnwrapRef<{
-        handleHeaderFooterMousewheel: (_event: any, data: any) => void;
-    }> & {} & {} & import("vue").ComponentCustomProperties;
+        data: any[];
+        columnPick: string;
+    } & {
+        columns?: import("./props").Column[];
+        activeColumn?: number | number[];
+    }> & ({} | {})) & import("vue").ShallowUnwrapRef<() => JSX.Element> & {} & {} & import("vue").ComponentCustomProperties & Readonly<{
+        data?: unknown;
+        columns?: unknown;
+        activeColumn?: unknown;
+        columnPick?: unknown;
+    } & {
+        data: any[];
+        columnPick: string;
+    } & {
+        columns?: import("./props").Column[];
+        activeColumn?: number | number[];
+    }> & ({} | {});
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<{
-    showHeader?: unknown;
-    headerBorder?: unknown;
-    defaultSort?: unknown;
+    data?: unknown;
+    columns?: unknown;
+    activeColumn?: unknown;
+    columnPick?: unknown;
+} & {
+    data: any[];
+    columnPick: string;
 } & {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
-        [key: string]: any;
-    };
-} & {}> & {}, {
-    handleHeaderFooterMousewheel: (_event: any, data: any) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
-        [key: string]: any;
-    };
+    columns?: import("./props").Column[];
+    activeColumn?: number | number[];
+}> & ({} | {}), () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, {
+    data: any[];
+    columnPick: string;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default BkTable;

package/lib/table/index.js

@@ -1 +1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports,require("vue"),require("../shared"),require("../directives")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../directives"],r):r((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.Directives)}(this,(function(e,r,t,o){"use strict";function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var a={exports:{}};!function(e){e.exports=function(e,r){if(!(e instanceof r))throw new TypeError("Cannot call a class as a function")},e.exports.default=e.exports,e.exports.__esModule=!0}(a);var i=s(a.exports),n=function e(o){var s=this;i(this,e),this.table=null,this.showHeader=!0,this.headerHeight=r.ref(44),this.bodyWidth=r.ref(null),this.scrollY=r.ref(!1),this.gutterWidth=t.scrollbarWidth(),this.bodyHeight=r.ref(null),this.footerHeight=r.ref(44),this.paginationHeight=r.ref(0),Object.keys(o).forEach((function(e){r.isRef(s[e])?s[e].value=o[e]:s[e]=o[e]}))},l={showHeader:t.PropTypes.bool.def(!0),headerBorder:t.PropTypes.bool.def(!0),defaultSort:t.PropTypes.object.def({prop:"",order:""})},d=r.defineComponent({name:"BkTable",props:l,directives:{mousewheel:o.mousewheel},setup:function(e){var t,o=(t=r.getCurrentInstance().refs,{handleHeaderFooterMousewheel:function(e,r){var o=r.pixelX,s=r.pixelY;Math.abs(o)>=Math.abs(s)&&(t.bodyWrapper.scrollLeft+=r.pixelX/5)}}).handleHeaderFooterMousewheel,s=r.getCurrentInstance(),a=new n({table:s,showHeader:e.showHeader});return console.error("layout",a),{handleHeaderFooterMousewheel:o}},render:function(){var e=t.classes({"bk-table":!0});return r.createVNode("div",{class:e},[this.showHeader?r.withDirectives(r.createVNode("div",{ref:"headerWrapper",class:"bk-table-header-wrapper"},null),[[r.resolveDirective("mousewheel"),this.handleHeaderFooterMousewheel]]):""])}}),h=t.withInstall(d);e.default=h,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared")):"function"==typeof define&&define.amd?define(["exports","vue","../shared"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared)}(this,(function(e,t,r){"use strict";function o(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var n={exports:{}};!function(e){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.default=e.exports,e.exports.__esModule=!0}(n);var s=o(n.exports),i={data:r.PropTypes.arrayOf(r.PropTypes.any).def([]),columns:r.PropTypes.arrayOf(r.PropTypes.shape({label:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),field:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),render:r.PropTypes.oneOfType([r.PropTypes.func.def((function(){return""})),r.PropTypes.string.def("")]),width:r.PropTypes.oneOfType([r.PropTypes.number.def(void 0),r.PropTypes.string.def("auto")])})),activeColumn:r.PropTypes.oneOfType([r.PropTypes.number.def(-1),r.PropTypes.arrayOf(r.PropTypes.number.def(-1))]),columnPick:r.PropTypes.commonType(["multi","single","disabled"],"columnPick").def("disabled")},a={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.default=e.exports,e.exports.__esModule=!0}(a);var u=o(a.exports),c={exports:{}};!function(e){function t(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}e.exports=function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e},e.exports.default=e.exports,e.exports.__esModule=!0}(c);var l=o(c.exports),p={exports:{}},d={exports:{}},f={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o},e.exports.default=e.exports,e.exports.__esModule=!0}(f),function(e){var t=f.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.default=e.exports,e.exports.__esModule=!0}(d);var v={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.default=e.exports,e.exports.__esModule=!0}(v);var y={exports:{}};!function(e){var t=f.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,r):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0}(y);var m={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.default=e.exports,e.exports.__esModule=!0}(m),function(e){var t=d.exports,r=v.exports,o=y.exports,n=m.exports;e.exports=function(e){return t(e)||r(e)||o(e)||n()},e.exports.default=e.exports,e.exports.__esModule=!0}(p);var x=o(p.exports),h=void 0,b=function(e,t,r){var o;if(Object.prototype.hasOwnProperty.call(e,t))return"function"==typeof e[t]?(o=e[t]).call.apply(o,[h].concat(x(r))):e[t]},T=function(e){return"disabled"!==e.columnPick?"multi"===e.columnPick?Array.isArray(e.activeColumn)?e.activeColumn:C(e.activeColumn):Array.isArray(e.activeColumn)?C(e.activeColumn[0]):C(e.activeColumn):[]},C=function(e){return/^\d+$/.test("".concat(e))?[parseInt("".concat(e),10)]:[]},P=function(){function e(t,r,o){u(this,e),this.props=t,this.context=r,this.reactiveProp=o}return l(e,[{key:"propActiveCols",get:function(){return this.reactiveProp.activeColumns}},{key:"renderTableBodySchema",value:function(){return t.createVNode("table",{cellpadding:0,cellspacing:0},[this.renderColGroup(),this.renderHeader(),this.renderTBody()])}},{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 e=this;return t.createVNode("thead",null,[t.createVNode("tr",null,[this.props.columns.map((function(o,n){return t.createVNode("th",{colspan:1,rowspan:1,class:r.classes({active:e.isColActive(n)}),onClick:function(){return e.handleColumnHeadClick(n)}},[t.createVNode("div",{class:"cell"},[b(o,"label",[o])])])}))])])}},{key:"renderTBody",value:function(){var e=this;return t.createVNode("tbody",null,[this.props.data.map((function(r){return t.createVNode("tr",null,[e.props.columns.map((function(e){return t.createVNode("td",{colspan:1,rowspan:1},[t.createVNode("div",{class:"cell"},[r[b(e,"field",[e,r])]])])}))])}))])}},{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 t.createVNode("colgroup",null,[(this.props.columns||[]).map((function(o,n){var s,i=r.classes({active:e.isColActive(n)}),a={width:(s=o.width,/^auto|null|undefined$/gi.test("".concat(s))?"auto":/^\d+\.?\d+$/.test("".concat(s))?"".concat(s,"px"):s)};return t.createVNode("col",{class:i,style:a},null)}))])}}]),e}(),g=t.defineComponent({name:"BkTable",props:i,setup:function(e,o){var n=t.reactive(T(e)),i=function(){return(e.columns||[]).map((function(e,t){return{index:t,active:n.some((function(e){return e===t})),_column:e}}))},a=t.reactive({activeColumns:i()});t.watch((function(){return[e.activeColumn,e.columns]}),(function(){t.nextTick((function(){a.activeColumns=i();var t=T(e);a.activeColumns.forEach((function(e,r){Object.assign(e,{active:t.some((function(e){return e===r}))})}))}))}),{deep:!0});var u=new P(e,o,a),c=r.classes(s({},r.resolveClassName("table"),!0));return function(){return t.createVNode("div",{class:c},[t.createVNode("div",{class:r.resolveClassName("table-body")},[u.renderTableBodySchema()]),t.createVNode("div",{class:r.resolveClassName("table-fixed")},null)])}}}),k=r.withInstall(g);e.default=k,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/table/props.d.ts

@@ -0,0 +1,41 @@
+import { ExtractPropTypes } from 'vue';
+export declare const tableProps: {
+    /**
+     * 渲染列表
+     */
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    /**
+     * Table 列渲染
+     */
+    columns: import("vue-types").VueTypeDef<Column[]>;
+    /**
+     * 当前选中列
+     * 当设置选中多列时（columnPick = multi），配置为数组[index1, index2, index3]，只能选中单列时，可以为数值或者数组[index]
+     */
+    activeColumn: import("vue-types").VueTypeDef<number | number[]>;
+    /**
+     * 表格列选中方式
+     * 支持：单列（single），多列（multi），禁用（disabled）
+     * 默认：disabled
+     */
+    columnPick: import("vue-types").VueTypeDef<string> & {
+        default: string;
+    };
+};
+export declare type Column = {
+    label: Function | string;
+    field: Function | string;
+    render?: Function | string;
+    width?: number | string;
+};
+export declare type Columns = ReadonlyArray<Column>;
+export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
+export declare type IColumnActive = {
+    index: number;
+    active: boolean;
+};
+export declare type IReactiveProp = {
+    activeColumns: IColumnActive[];
+};

package/lib/table/render.d.ts

@@ -0,0 +1,47 @@
+import { SetupContext } from 'vue';
+import { IColumnActive, IReactiveProp, TablePropTypes } from './props';
+export default class TableRender {
+    props: TablePropTypes;
+    context: SetupContext;
+    reactiveProp: any;
+    constructor(props: TablePropTypes, ctx: SetupContext, reactiveProp: IReactiveProp);
+    get propActiveCols(): IColumnActive[];
+    /**
+     * 渲染Table主体
+     * @param activeColumns 当前选中的列
+     * @returns
+     */
+    renderTableBodySchema(): JSX.Element;
+    /**
+     * 指定列选中状态
+     * @param index 指定选中的列Index
+     * @param single 是否重置其他列，当只允许选中一列的情况下需要先重置
+     */
+    private setColumnActive;
+    /**
+     * 点击选中一列事件
+     * @param index 当前选中列Index
+     */
+    private handleColumnHeadClick;
+    /**
+     * 渲染Table Header
+     * @returns
+     */
+    private renderHeader;
+    /**
+     * 渲染Table Body
+     * @returns
+     */
+    private renderTBody;
+    /**
+     * 判定指定列是否为选中状态
+     * @param colIndex 指定列Index
+     * @returns
+     */
+    private isColActive;
+    /**
+   * 渲染表格Col分组
+   * @returns
+   */
+    private renderColGroup;
+}

package/lib/table/table.css

@@ -0,0 +1,44 @@
+.bk-table .bk-table-body {
+  height: 500px;
+  overflow: auto;
+  background: white;
+}
+.bk-table .bk-table-body table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.bk-table .bk-table-body table .cell {
+  height: 40px;
+  padding: 0 15px;
+  overflow: hidden;
+  line-height: 40px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk-table .bk-table-body table th,
+.bk-table .bk-table-body table td {
+  min-width: 80px;
+  border-bottom: 1px solid #dfe0e5;
+}
+.bk-table .bk-table-body table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background-color: #fff;
+}
+.bk-table .bk-table-body table thead th.active {
+  background: #f0f1f5;
+}
+.bk-table .bk-table-body table tbody tr:hover td {
+  background: #f5f7fa;
+}
+.bk-table .bk-table-fixed {
+  width: 100%;
+}
+.bk-table colgroup col {
+  background: #fff;
+}
+.bk-table colgroup col.active {
+  position: relative;
+  background: #f0f1f5;
+}

package/lib/table/table.d.ts

@@ -1,67 +1,26 @@
-import type { ExtractPropTypes } from 'vue';
-export declare const tableProps: {
-    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    headerBorder: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    defaultSort: import("vue-types").VueTypeValidableDef<{
-        [key: string]: any;
-    }> & {
-        default: () => {
-            [key: string]: any;
-        };
-    } & {
-        default: () => {
-            [key: string]: any;
-        };
-    };
-};
-export declare type TablePropTypes = Readonly<ExtractPropTypes<typeof tableProps>>;
+import { Column } from './props';
 declare const _default: import("vue").DefineComponent<{
-    showHeader: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    headerBorder: import("vue-types").VueTypeValidableDef<boolean> & {
-        default: boolean;
-    } & {
-        default: boolean;
-    };
-    defaultSort: import("vue-types").VueTypeValidableDef<{
-        [key: string]: any;
-    }> & {
-        default: () => {
-            [key: string]: any;
-        };
-    } & {
-        default: () => {
-            [key: string]: 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;
+    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;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    data?: unknown;
+    columns?: unknown;
+    activeColumn?: unknown;
+    columnPick?: unknown;
 } & {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
-        [key: string]: any;
-    };
-} & {}> & {}, {
-    showHeader: boolean;
-    headerBorder: boolean;
-    defaultSort: {
-        [key: string]: any;
-    };
+    data: any[];
+    columnPick: string;
+} & {
+    columns?: Column[];
+    activeColumn?: number | number[];
+}> & ({} | {}), {
+    data: any[];
+    columnPick: string;
 }>;
 export default _default;