bkui-vue 0.0.1-beta.14 → 0.0.1-beta.15

package/lib/table/props.d.ts

@@ -23,6 +23,44 @@ export declare const tableProps: {
     columnPick: import("vue-types").VueTypeDef<string> & {
         default: string;
     };
+    /**
+     * 设置表格高度
+     * 默认：auto，依赖外层高度
+     */
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 设置表格最小高度
+     * 默认：auto，依赖外层高度
+     */
+    minHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 行高，可以为固定数值类型
+     * 可以是函数，返回当前行的高度，返回值为数值类型
+     */
+    rowHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    /**
+     * Thead行高，可以为固定数值类型
+     */
+    headHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 是否启用虚拟渲染 & 滚动
+     * 当数据量很大时，启用虚拟渲染可以解决压面卡顿问题
+     */
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 };
 export declare type Column = {
     label: Function | string;

package/lib/table/render.d.ts

@@ -11,7 +11,7 @@ export default class TableRender {
      * @param activeColumns 当前选中的列
      * @returns
      */
-    renderTableBodySchema(): JSX.Element;
+    renderTableBodySchema(rows: any[]): JSX.Element;
     /**
      * 指定列选中状态
      * @param index 指定选中的列Index

package/lib/table/table.css

@@ -1,6 +1,7 @@
-.bk-table .bk-table-body {
-  height: 500px;
+.bk-table {
   overflow: auto;
+}
+.bk-table .bk-table-body {
   background: white;
 }
 .bk-table .bk-table-body table {
@@ -8,10 +9,10 @@
   border-collapse: collapse;
 }
 .bk-table .bk-table-body table .cell {
-  height: 40px;
+  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
-  line-height: 40px;
+  line-height: var(--row-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -25,6 +26,7 @@
   top: 0;
   z-index: 1;
   background-color: #fff;
+  transform: translateY(var(--translate-y));
 }
 .bk-table .bk-table-body table thead th.active {
   background: #f0f1f5;

package/lib/table/table.d.ts

@@ -8,19 +8,53 @@ declare const _default: import("vue").DefineComponent<{
     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;
+    };
+    virtualEnabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, () => 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;
+    height?: unknown;
+    minHeight?: unknown;
+    rowHeight?: unknown;
+    headHeight?: unknown;
+    virtualEnabled?: unknown;
 } & {
     data: any[];
+    height: string | number;
+    headHeight: number;
     columnPick: string;
+    minHeight: string | number;
+    virtualEnabled: boolean;
 } & {
     columns?: Column[];
     activeColumn?: number | number[];
+    rowHeight?: any;
 }> & ({} | {}), {
     data: any[];
+    height: string | number;
+    headHeight: number;
     columnPick: string;
+    minHeight: string | number;
+    rowHeight: any;
+    virtualEnabled: boolean;
 }>;
 export default _default;

package/lib/table/table.less

@@ -1,9 +1,8 @@
 @import '../styles/themes/themes.less';
 
 .@{bk-prefix}-table {
+  overflow: auto;
   .@{bk-prefix}-table-body {
-    height: 500px;
-    overflow: auto;
     background: @white-color;
 
     table {
@@ -11,10 +10,10 @@
       border-collapse: collapse;
 
       .cell {
-        height: 40px;
+        height: var(--row-height);
         padding: 0 15px;
         overflow: hidden;
-        line-height: 40px;
+        line-height: var(--row-height);
         text-overflow: ellipsis;
         white-space: nowrap;
       }
@@ -31,6 +30,7 @@
           top: 0; 
           z-index: 1;
           background-color: #fff;
+          transform: translateY(var(--translate-y));
 
           &.active {
             background: #f0f1f5;

package/lib/table/table.variable.css

@@ -84,9 +84,10 @@
   --date-picker-dropdown-mb: 4px;
   --date-picker-dropdown-bg: #fff;
 }
-.bk-table .bk-table-body {
-  height: 500px;
+.bk-table {
   overflow: auto;
+}
+.bk-table .bk-table-body {
   background: var(--white-color);
 }
 .bk-table .bk-table-body table {
@@ -94,10 +95,10 @@
   border-collapse: collapse;
 }
 .bk-table .bk-table-body table .cell {
-  height: 40px;
+  height: var(--row-height);
   padding: 0 15px;
   overflow: hidden;
-  line-height: 40px;
+  line-height: var(--row-height);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -111,6 +112,7 @@
   top: 0;
   z-index: 1;
   background-color: #fff;
+  transform: translateY(var(--translate-y));
 }
 .bk-table .bk-table-body table thead th.active {
   background: #f0f1f5;

package/lib/table/utils.d.ts

@@ -20,3 +20,10 @@ export declare const resolveActiveColumns: (props: TablePropTypes) => number[];
  */
 export declare const resolveNumberToNumArray: (prop: number) => number[];
 export declare const resolveWidth: (propWidth: string | number) => string | number;
+/**
+ * 解析可为数字或者字符串设置的样式配置
+ * @param val 配置值
+ * @param defaultValue 默认值
+ * @returns 标准化px string
+ */
+export declare const resolveNumberOrStringToPix: (val: string | number, defaultValue?: string | number) => string | number;

package/lib/tree/index.d.ts

@@ -5,8 +5,9 @@ declare const BkTree: {
         $props: Partial<{
             data: any[];
             children: string;
-            indent: number;
             lineHeight: number;
+            indent: number;
+            virtualRender: boolean;
         }> & Omit<Readonly<{
             data?: unknown;
             label?: unknown;
@@ -14,15 +15,17 @@ declare const BkTree: {
             indent?: unknown;
             lineHeight?: unknown;
             levelLine?: unknown;
+            virtualRender?: unknown;
         } & {
             data: any[];
             children: string;
-            indent: number;
             lineHeight: number;
+            indent: number;
+            virtualRender: boolean;
         } & {
             label?: any;
             levelLine?: any;
-        }> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "children" | "indent" | "lineHeight">;
+        }> & {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data" | "children" | "lineHeight" | "indent" | "virtualRender">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -43,11 +46,13 @@ declare const BkTree: {
             indent?: unknown;
             lineHeight?: unknown;
             levelLine?: unknown;
+            virtualRender?: unknown;
         } & {
             data: any[];
             children: string;
-            indent: number;
             lineHeight: number;
+            indent: number;
+            virtualRender: boolean;
         } & {
             label?: any;
             levelLine?: any;
@@ -61,11 +66,13 @@ declare const BkTree: {
             hanldeTreeNodeClick: (item: any) => void;
             getActionIcon: (item: any) => JSX.Element;
             getRootIcon: (item: any) => JSX.Element;
+            getVirtualLines: (node: any) => JSX.Element[];
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
             data: any[];
             children: string;
-            indent: number;
             lineHeight: number;
+            indent: number;
+            virtualRender: boolean;
         }> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -93,11 +100,13 @@ declare const BkTree: {
         indent?: unknown;
         lineHeight?: unknown;
         levelLine?: unknown;
+        virtualRender?: unknown;
     } & {
         data: any[];
         children: string;
-        indent: number;
         lineHeight: number;
+        indent: number;
+        virtualRender: boolean;
     } & {
         label?: any;
         levelLine?: any;
@@ -111,6 +120,7 @@ declare const BkTree: {
         hanldeTreeNodeClick: (item: any) => void;
         getActionIcon: (item: any) => JSX.Element;
         getRootIcon: (item: any) => JSX.Element;
+        getVirtualLines: (node: any) => JSX.Element[];
     }> & {} & {} & import("vue").ComponentCustomProperties;
     __isFragment?: never;
     __isTeleport?: never;
@@ -122,11 +132,13 @@ declare const BkTree: {
     indent?: unknown;
     lineHeight?: unknown;
     levelLine?: unknown;
+    virtualRender?: unknown;
 } & {
     data: any[];
     children: string;
-    indent: number;
     lineHeight: number;
+    indent: number;
+    virtualRender: boolean;
 } & {
     label?: any;
     levelLine?: any;
@@ -140,10 +152,12 @@ declare const BkTree: {
     hanldeTreeNodeClick: (item: any) => void;
     getActionIcon: (item: any) => JSX.Element;
     getRootIcon: (item: any) => JSX.Element;
+    getVirtualLines: (node: any) => JSX.Element[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
     data: any[];
     children: string;
-    indent: number;
     lineHeight: number;
+    indent: number;
+    virtualRender: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("@vue/runtime-core").Plugin;
 export default BkTree;

package/lib/tree/index.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("crypto"),require("@bkui-vue/icon/")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","crypto","@bkui-vue/icon/"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e.require$$0,e._)}(this,(function(e,t,n,o,r){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(o);function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var u={exports:{}};!function(e){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.default=e.exports,e.exports.__esModule=!0}(u);var s=a(u.exports),c={exports:{}};!function(e){function t(n){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?(e.exports=t=function(e){return typeof e},e.exports.default=e.exports,e.exports.__esModule=!0):(e.exports=t=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.default=e.exports,e.exports.__esModule=!0),t(n)}e.exports=t,e.exports.default=e.exports,e.exports.__esModule=!0}(c);var p=a(c.exports),d={exports:{}},f={exports:{}},v={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o},e.exports.default=e.exports,e.exports.__esModule=!0}(v),function(e){var t=v.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.default=e.exports,e.exports.__esModule=!0}(f);var h={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}(h);var _={exports:{}};!function(e){var t=v.exports;e.exports=function(e,n){if(e){if("string"==typeof e)return t(e,n);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,n):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0}(_);var y={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}(y),function(e){var t=f.exports,n=h.exports,o=_.exports,r=y.exports;e.exports=function(e){return t(e)||n(e)||o(e)||r()},e.exports.default=e.exports,e.exports.__esModule=!0}(d);for(var x=a(d.exports),b=l.default,g=function(){return b.randomBytes(16)},m=[],O=0;O<256;++O)m[O]=(O+256).toString(16).substr(1);var j,N,T=function(e,t){var n=t||0,o=m;return[o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],"-",o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]],o[e[n++]]].join("")},S=g,w=T,P=0,C=0;var k=function(e,t,n){var o=t&&n||0,r=t||[],i=(e=e||{}).node||j,l=void 0!==e.clockseq?e.clockseq:N;if(null==i||null==l){var a=S();null==i&&(i=j=[1|a[0],a[1],a[2],a[3],a[4],a[5]]),null==l&&(l=N=16383&(a[6]<<8|a[7]))}var u=void 0!==e.msecs?e.msecs:(new Date).getTime(),s=void 0!==e.nsecs?e.nsecs:C+1,c=u-P+(s-C)/1e4;if(c<0&&void 0===e.clockseq&&(l=l+1&16383),(c<0||u>P)&&void 0===e.nsecs&&(s=0),s>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");P=u,C=s,N=l;var p=(1e4*(268435455&(u+=122192928e5))+s)%4294967296;r[o++]=p>>>24&255,r[o++]=p>>>16&255,r[o++]=p>>>8&255,r[o++]=255&p;var d=u/4294967296*1e4&268435455;r[o++]=d>>>8&255,r[o++]=255&d,r[o++]=d>>>24&15|16,r[o++]=d>>>16&255,r[o++]=l>>>8|128,r[o++]=255&l;for(var f=0;f<6;++f)r[o+f]=i[f];return t||w(r)},L=g,M=T;var A=function(e,t,n){var o=t&&n||0;"string"==typeof e&&(t="binary"===e?new Array(16):null,e=null);var r=(e=e||{}).random||(e.rng||L)();if(r[6]=15&r[6]|64,r[8]=63&r[8]|128,t)for(var i=0;i<16;++i)t[o+i]=r[i];return t||M(r)},V=k,I=A,q=I;q.v1=V,q.v4=I;var R=q,D=void 0,$="1px dashed #c3cdd7",E={data:n.PropTypes.arrayOf(n.PropTypes.any).def([]),label:n.PropTypes.oneOfType([n.PropTypes.func.def(void 0),n.PropTypes.string.def("label")]),children:n.PropTypes.string.def("children"),indent:n.PropTypes.number.def(18),lineHeight:n.PropTypes.number.def(32),levelLine:n.PropTypes.oneOfType([n.PropTypes.bool.def(!1),n.PropTypes.func.def(void 0),n.PropTypes.string.def("1px dashed #c3cdd7")])},F=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,n=e.data,o=e.children,r=[],i=0,l={};function a(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"",c=0;c<e.length;c++){var d=e[c];if(Array.isArray(d))a(d,t,n,u);else{var f=Object.assign({},d);if("object"===p(f)&&null!==f){var v=R.v4(),h=""!==u?"".concat(u,"-").concat(c):"".concat(c),_=s({__depth:t,__index:c,__uuid:v,__parentId:n,__hasChild:!!(d[o]||[]).length,__path:h,__isRoot:null===n,__order:i},o,null);Object.assign(f,_),Object.assign(l,s({},h,{__isOpen:!1,__showLines:0})),i+=1,r.push(f),Object.prototype.hasOwnProperty.call(d,o)&&a(d[o],t+1,v,h)}}}}return a(t||n),[r,l]},H=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,r=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[],l=e[t];return"boolean"==typeof l?l?o:r:B(n,e,t,i)},B=function(e,t,n){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],r=t[n];if("string"==typeof r)return"object"===p(e)&&null!==e?(Object.prototype.hasOwnProperty.call(e,r)||console.error("cannot find node label with key ".concat(r)),e[r]):r;if("function"==typeof r){var i=r.apply(D,[e].concat(x(o)));return"string"==typeof i?i:void console.error("props label with function return value is not string, please check and return string")}},U=function(e,t){return B(e,t,"label")},W=function(e,t){return{"--level-line":H(t,"levelLine",e,$,null,["tree"]),"--lineHeight":"".concat(t.lineHeight,"px"),"--indent":"".concat(t.indent,"px"),padding:0}},z=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},o=n[e.__path]||{},r=o.childNodeCount,i=void 0===r?0:r,l=o.isLeaf,a=void 0!==l&&l,u=o.lastNode,s=void 0===u?null:u,c=a?0:(n[s]||{childNodeCount:0}).childNodeCount;return Object.assign({"--depth":e.__depth,paddingLeft:0,"--lines":i-c},"function"==typeof t.levelLine?{"--level-line":H(t,"levelLine",e,$,null,["node"])}:{})},G=function(e,t){return{"is-root":e.__isRoot,"bk-tree-node":!0,"is-open":t[e.__path].__isOpen}},J=t.defineComponent({name:"Tree",props:E,setup:function(e){var n=F(e),o=t.reactive({data:n[0],schema:n[1],levelLineSchema:{}});t.watch((function(){return[e.data]}),(function(t){var n=F(e,t);o.data=n[0],o.schema=n[1],u()}),{deep:!0}),t.watch((function(){return[e.levelLine]}),(function(){u()}));var i=t.computed((function(){return o.data.filter((function(e){return d(e)}))})),l=t.computed((function(){return i.value.map((function(e){return e.__path}))})),a=function(e){return"object"===p(e)?(o.schema[e.__path]||{}).__isOpen:"string"==typeof e&&(o.schema[e]||{}).__isOpen},u=function(){e.levelLine?setTimeout((function(){for(var e=i.value.length,t={},n=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,o=arguments.length>2&&void 0!==arguments[2]&&arguments[2];Object.prototype.hasOwnProperty.call(t,e)||Object.assign(t,s({},e,Object.assign(Object.assign({childNodeCount:0,isLastNode:!1},null!==n?{lastNode:n}:{}),null!==o?{isLeaf:o}:{})))};e>0;e--){var r=i.value[e-1],a=c(r),u=!l.value.includes("".concat(r.__path,"-0"));n(r.__path,null,u),n(a,r.__path);var p=t[a],d=t[r.__path],f=d.childNodeCount,v=void 0===f?0:f;d.childNodeCount=v+1,d.isLastNode=p.lastNode===r.__path,p.childNodeCount+=d.childNodeCount}o.levelLineSchema=t})):o.levelLineSchema={}},c=function(e){if(e.__isRoot)return null;var t="-".concat(e.__index).length;return String.prototype.substring.call(e.__path,0,e.__path.length-t)},d=function(e){return e.__isRoot||a(e)||a(c(e))};return u(),{renderData:i,flatData:o,hanldeTreeNodeClick:function(e){if(e.__hasChild){var t=!a(e);Object.assign(e,{__isOpen:t}),i.value.filter((function(t){return String.prototype.startsWith.call(t.__path,e.__path)})).forEach((function(e){return Object.assign(o.schema[e.__path],{__isOpen:t})})),u()}},getActionIcon:function(e){return e.__hasChild?a(e)?t.createVNode(r.DownShape,null,null):t.createVNode(r.RightShape,null,null):null},getRootIcon:function(e){return a(e)?t.createVNode(r.FolderShapeOpen,{class:"bk-tree-icon"},null):t.createVNode(r.Folder,{class:"bk-tree-icon"},null)}}},render:function(){var e=this,n=this.$props;return t.createVNode("div",{class:"bk-tree",style:W(null,n)},[this.renderData.map((function(o){return t.createVNode("div",{class:G(o,e.flatData.schema),style:z(o,n,e.flatData.levelLineSchema),onClick:function(){return e.hanldeTreeNodeClick(o)}},[[e.getActionIcon(o),o.__isRoot?e.getRootIcon(o):t.createVNode(r.TextFile,{class:"bk-tree-icon"},null)],t.createVNode("span",null,[U(o,n)])])}))])}}),K=n.withInstall(J);e.default=K,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("crypto"),require("@bkui-vue/icon/"),require("../shared"),require("../virtual-render")):"function"==typeof define&&define.amd?define(["exports","vue","crypto","@bkui-vue/icon/","../shared","../virtual-render"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.require$$0,e._,e.Shared,e["@bkui-vue/virtual-render"])}(this,(function(e,t,n,r,o,i){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n),u=l(i);function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var c={exports:{}};!function(e){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var p=s(c.exports),d={exports:{}};!function(e){function t(n){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(n)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(d);var f=s(d.exports),v={exports:{}},h={exports:{}},_={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r},e.exports.__esModule=!0,e.exports.default=e.exports}(_),function(e){var t=_.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var y={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var b={exports:{}};!function(e){var t=_.exports;e.exports=function(e,n){if(e){if("string"==typeof e)return t(e,n);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?t(e,n):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(b);var g={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.__esModule=!0,e.exports.default=e.exports}(g),function(e){var t=h.exports,n=y.exports,r=b.exports,o=g.exports;e.exports=function(e){return t(e)||n(e)||r(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(v);for(var x=s(v.exports),m=a.default,O=function(){return m.randomBytes(16)},j=[],N=0;N<256;++N)j[N]=(N+256).toString(16).substr(1);var T,P,w=function(e,t){var n=t||0,r=j;return[r[e[n++]],r[e[n++]],r[e[n++]],r[e[n++]],"-",r[e[n++]],r[e[n++]],"-",r[e[n++]],r[e[n++]],"-",r[e[n++]],r[e[n++]],"-",r[e[n++]],r[e[n++]],r[e[n++]],r[e[n++]],r[e[n++]],r[e[n++]]].join("")},S=O,L=w,k=0,C=0;var R=function(e,t,n){var r=t&&n||0,o=t||[],i=(e=e||{}).node||T,l=void 0!==e.clockseq?e.clockseq:P;if(null==i||null==l){var a=S();null==i&&(i=T=[1|a[0],a[1],a[2],a[3],a[4],a[5]]),null==l&&(l=P=16383&(a[6]<<8|a[7]))}var u=void 0!==e.msecs?e.msecs:(new Date).getTime(),s=void 0!==e.nsecs?e.nsecs:C+1,c=u-k+(s-C)/1e4;if(c<0&&void 0===e.clockseq&&(l=l+1&16383),(c<0||u>k)&&void 0===e.nsecs&&(s=0),s>=1e4)throw new Error("uuid.v1(): Can't create more than 10M uuids/sec");k=u,C=s,P=l;var p=(1e4*(268435455&(u+=122192928e5))+s)%4294967296;o[r++]=p>>>24&255,o[r++]=p>>>16&255,o[r++]=p>>>8&255,o[r++]=255&p;var d=u/4294967296*1e4&268435455;o[r++]=d>>>8&255,o[r++]=255&d,o[r++]=d>>>24&15|16,o[r++]=d>>>16&255,o[r++]=l>>>8|128,o[r++]=255&l;for(var f=0;f<6;++f)o[r+f]=i[f];return t||L(o)},A=O,M=w;var V=function(e,t,n){var r=t&&n||0;"string"==typeof e&&(t="binary"===e?new Array(16):null,e=null);var o=(e=e||{}).random||(e.rng||A)();if(o[6]=15&o[6]|64,o[8]=63&o[8]|128,t)for(var i=0;i<16;++i)t[r+i]=o[i];return t||M(o)},I=R,q=V,D=q;D.v1=I,D.v4=q;var H=D,$=void 0,E="1px dashed #c3cdd7",F=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,n=e.data,r=e.children,o=[],i=0,l={};function a(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,s=0;s<e.length;s++){var c=e[s];if(Array.isArray(c))a(c,t,n,u);else{var d=Object.assign({},c);if("object"===f(d)&&null!==d){var v=H.v4(),h=null!==u?"".concat(u,"-").concat(s):"".concat(s),_=p({__depth:t,__index:s,__uuid:v,__parentId:n,__parentPath:u,__hasChild:!!(c[r]||[]).length,__path:h,__isRoot:null===n,__order:i},r,null);Object.assign(d,_),Object.assign(l,p({},h,{__isOpen:!1,__showLines:0,__isRoot:null===n})),i+=1,o.push(d),Object.prototype.hasOwnProperty.call(c,r)&&a(c[r],t+1,v,h)}}}}return a(t||n),[o,l]},B=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null,i=arguments.length>5&&void 0!==arguments[5]?arguments[5]:[],l=e[t];return"boolean"==typeof l?l?r:o:U(n,e,t,i)},U=function(e,t,n){var r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:[],o=t[n];if("string"==typeof o)return"object"===f(e)&&null!==e?(Object.prototype.hasOwnProperty.call(e,o)||console.error("cannot find node label with key ".concat(o)),e[o]):o;if("function"==typeof o){var i=o.apply($,[e].concat(x(r)));return"string"==typeof i?i:void console.error("props label with function return value is not string, please check and return string")}},W=function(e,t){return U(e,t,"label")},z=function(e,t){return{"--level-line":B(t,"levelLine",e,E,null,["tree"]),"--lineHeight":"".concat(t.lineHeight,"px"),"--indent":"".concat(t.indent,"px"),padding:0}},G=function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n[e.__path]||{},o=r.childNodeCount,i=void 0===o?0:o,l=r.isLeaf,a=void 0!==l&&l,u=r.lastNode,s=void 0===u?null:u,c=a?0:(n[s]||{childNodeCount:0}).childNodeCount;return Object.assign({"--depth":e.__depth,paddingLeft:0,"--lines":i-c},"function"==typeof t.levelLine?{"--level-line":B(t,"levelLine",e,E,null,["node"])}:{})},J=function(e,t,n){return{"is-root":e.__isRoot,"bk-tree-node":!0,"is-open":t[e.__path].__isOpen,"is-virtual-render":n.virtualRender}},K={data:o.PropTypes.arrayOf(o.PropTypes.any).def([]),label:o.PropTypes.oneOfType([o.PropTypes.func.def(void 0),o.PropTypes.string.def("label")]),children:o.PropTypes.string.def("children"),indent:o.PropTypes.number.def(18),lineHeight:o.PropTypes.number.def(32),levelLine:o.PropTypes.oneOfType([o.PropTypes.bool.def(!1),o.PropTypes.func.def(void 0),o.PropTypes.string.def("1px dashed #c3cdd7")]),virtualRender:o.PropTypes.bool.def(!1)},Q=t.defineComponent({name:"Tree",props:K,setup:function(e){var n=F(e),o=t.reactive({data:n[0],schema:n[1],levelLineSchema:{}});t.watch((function(){return[e.data]}),(function(t){var n=F(e,t);o.data=n[0],o.schema=n[1],u()}),{deep:!0}),t.watch((function(){return[e.levelLine]}),(function(){u()}));var i=t.computed((function(){return o.data.filter((function(e){return c(e)}))})),l=t.computed((function(){return i.value.map((function(e){return e.__path}))})),a=function(e){return"object"===f(e)?(o.schema[e.__path]||{}).__isOpen:"string"==typeof e&&(o.schema[e]||{}).__isOpen},u=function(){e.levelLine?setTimeout((function(){for(var e=i.value.length,t={},n=function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];Object.prototype.hasOwnProperty.call(t,e)||Object.assign(t,p({},e,Object.assign(Object.assign({childNodeCount:0,isLastNode:!1},null!==n?{lastNode:n}:{}),null!==r?{isLeaf:r}:{})))};e>0;e--){var r=i.value[e-1],a=s(r),u=!l.value.includes("".concat(r.__path,"-0"));n(r.__path,null,u),n(a,r.__path);var c=t[a],d=t[r.__path],f=d.childNodeCount,v=void 0===f?0:f;d.childNodeCount=v+1,d.isLastNode=c.lastNode===r.__path,c.childNodeCount+=d.childNodeCount}o.levelLineSchema=t})):o.levelLineSchema={}},s=function(e){if(e.__isRoot)return null;var t="-".concat(e.__index).length;return String.prototype.substring.call(e.__path,0,e.__path.length-t)},c=function(e){return e.__isRoot||a(e)||a(s(e))};return u(),{renderData:i,flatData:o,hanldeTreeNodeClick:function(e){if(e.__hasChild){var t=!a(e);Object.assign(e,{__isOpen:t}),i.value.filter((function(t){return String.prototype.startsWith.call(t.__path,e.__path)})).forEach((function(e){return Object.assign(o.schema[e.__path],{__isOpen:t})})),u()}},getActionIcon:function(e){return e.__hasChild?a(e)?t.createVNode(r.DownShape,null,null):t.createVNode(r.RightShape,null,null):null},getRootIcon:function(e){return a(e)?t.createVNode(r.FolderShapeOpen,{class:"bk-tree-icon"},null):t.createVNode(r.Folder,{class:"bk-tree-icon"},null)},getVirtualLines:function(n){if(!e.virtualRender)return null;var r=n.__depth+1;return new Array(r).fill("").map((function(e,t){return t})).filter((function(e){return function(e,t){if(t.__isRoot)return!1;var n="".concat(t.__path).split("-").slice(0,e+1);if(n.join("-")===t.__path)return!0;var r=n.pop(),i=parseInt(r,10);n.push("".concat(i+1));var l=n.join("-"),a=Object.prototype.hasOwnProperty.call(o.schema,l);return console.log("nextNodePath",l,t.__path,a),a}(e,n)})).filter((function(e){return e>0})).map((function(e){return t.createVNode("span",{class:"node-virtual-line",style:(n=r-e,{"--depth":n})},null);var n}))}}},render:function(){var e=this,n=this.$props,o=function(o){return t.createVNode("div",{class:J(o,e.flatData.schema,n),style:G(o,n,e.flatData.levelLineSchema),onClick:function(){return e.hanldeTreeNodeClick(o)}},[[e.getActionIcon(o),o.__isRoot?e.getRootIcon(o):t.createVNode(r.TextFile,{class:"bk-tree-icon"},null)],t.createVNode("span",null,[W(o,n)]),e.getVirtualLines(o)])};return t.createVNode(u.default,{class:"bk-tree",style:z(null,n),list:this.renderData,lineHeight:n.lineHeight,enabled:n.virtualRender},{default:function(e){return(e.data||[]).map(o)}})}}),X=o.withInstall(Q);e.default=X,Object.defineProperty(e,"__esModule",{value:!0})}));

package/lib/tree/props.d.ts

@@ -0,0 +1,52 @@
+import { ExtractPropTypes } from 'vue';
+export declare const treeProps: {
+    /**
+     * 渲染列表
+     */
+    data: import("vue-types").VueTypeDef<any[]> & {
+        default: () => any[];
+    };
+    /**
+     * 指定节点标签为节点对象的某个属性值
+     */
+    label: import("vue-types").VueTypeDef<any>;
+    /**
+     * 子节点 Key, 用于读取子节点
+     * 默认 children
+     */
+    children: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 相邻级节点间的水平缩进，单位为像素
+     */
+    indent: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 设置行高
+     */
+    lineHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 设置层级连线
+     */
+    levelLine: import("vue-types").VueTypeDef<any>;
+    /**
+     * 是否开启虚拟滚动
+     * 默认虚拟滚动是开启的，数据量大的情况下有利于性能优化，可以通过设置 virtualRender = false 关闭虚拟滚动
+     */
+    virtualRender: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+};
+export declare type TreePropTypes = Readonly<ExtractPropTypes<typeof treeProps>>;

package/lib/tree/tree.css

@@ -5,13 +5,13 @@
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -21,15 +21,24 @@
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  width: calc(var(--indent) - 6px);
   height: 0;
   pointer-events: none;
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }

package/lib/tree/tree.d.ts

@@ -1,4 +1,4 @@
-import { TreePropTypes as defineTypes } from './util';
+import { TreePropTypes as defineTypes } from './props';
 export declare type TreePropTypes = defineTypes;
 declare const _default: import("vue").DefineComponent<{
     data: import("vue-types").VueTypeDef<any[]> & {
@@ -9,10 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     } & {
         default: string;
-    }; /**
-     * 扁平化数据
-     * schema: 需要展示连线时，用于计算连线高度
-     */
+    };
     indent: import("vue-types").VueTypeValidableDef<number> & {
         default: number;
     } & {
@@ -24,6 +21,11 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
     levelLine: import("vue-types").VueTypeDef<any>;
+    virtualRender: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, {
     renderData: import("vue").ComputedRef<any[]>;
     flatData: {
@@ -34,6 +36,7 @@ declare const _default: import("vue").DefineComponent<{
     hanldeTreeNodeClick: (item: any) => void;
     getActionIcon: (item: any) => JSX.Element;
     getRootIcon: (item: any) => JSX.Element;
+    getVirtualLines: (node: any) => JSX.Element[];
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     data?: unknown;
     label?: unknown;
@@ -41,18 +44,21 @@ declare const _default: import("vue").DefineComponent<{
     indent?: unknown;
     lineHeight?: unknown;
     levelLine?: unknown;
+    virtualRender?: unknown;
 } & {
     data: any[];
     children: string;
-    indent: number;
     lineHeight: number;
+    indent: number;
+    virtualRender: boolean;
 } & {
     label?: any;
     levelLine?: any;
 }> & {}, {
     data: any[];
     children: string;
-    indent: number;
     lineHeight: number;
+    indent: number;
+    virtualRender: boolean;
 }>;
 export default _default;

package/lib/tree/tree.less

@@ -7,16 +7,18 @@
     cursor: pointer;
 
     &.is-open {
-      &::after {
-        position: absolute;
-        top: calc(var(--lineHeight) / 2);
-        left: 0;
-        z-index: 1;
-        width: 0;
-        height: calc(var(--lines) * var(--lineHeight));
-        pointer-events: none;
-        border-left: var(--level-line);
-        content: '';
+      &:not(.is-virtual-render) {
+        &::after {
+          position: absolute;
+          top: calc(var(--lineHeight) / 2 + 6px);
+          left: 6px;
+          z-index: 1;
+          width: 0;
+          height: calc(var(--lines) * var(--lineHeight) - 6px);
+          pointer-events: none;
+          border-left: var(--level-line);
+          content: '';
+        }
       }
     }
 
@@ -25,27 +27,25 @@
 
       &::before {
         position: absolute;
-        top: 50%;
-        left: calc(0px - var(--indent));
+        top: calc(50% + 1px);
+        left: calc(0px - var(--indent) + 6px);
         z-index: 1;
-        width: var(--indent);
+        width: calc(var(--indent) - 6px);
         height: 0;
         pointer-events: none;
         border-bottom: var(--level-line);
         content: '';
       }
+    }
 
-      // &::after {
-      //   position: absolute;
-      //   top: -50%;
-      //   bottom: 50%;
-      //   left: calc(0px - var(--indent) * var(--depth));
-      //   z-index: 1;
-      //   width: 0;
-      //   pointer-events: none;
-      //   border-left: var(--level-line);
-      //   content: '';
-      // }
+    .node-virtual-line {
+      display: inline-block;
+      position: absolute;
+      left: calc(var(--depth) * var(--indent) * -1 + 6px);
+      top: -12px;
+      bottom: 50%;
+      width: 0;
+      border-left: var(--level-line);
     }
 
     .bk-tree-icon {

package/lib/tree/tree.variable.css

@@ -5,13 +5,13 @@
   line-height: var(--lineHeight);
   cursor: pointer;
 }
-.bk-tree .bk-tree-node.is-open::after {
+.bk-tree .bk-tree-node.is-open:not(.is-virtual-render)::after {
   position: absolute;
-  top: calc(var(--lineHeight) / 2);
-  left: 0;
+  top: calc(var(--lineHeight) / 2 + 6px);
+  left: 6px;
   z-index: 1;
   width: 0;
-  height: calc(var(--lines) * var(--lineHeight));
+  height: calc(var(--lines) * var(--lineHeight) - 6px);
   pointer-events: none;
   border-left: var(--level-line);
   content: '';
@@ -21,15 +21,24 @@
 }
 .bk-tree .bk-tree-node:not(.is-root)::before {
   position: absolute;
-  top: 50%;
-  left: calc(0px - var(--indent));
+  top: calc(50% + 1px);
+  left: calc(0px - var(--indent) + 6px);
   z-index: 1;
-  width: var(--indent);
+  width: calc(var(--indent) - 6px);
   height: 0;
   pointer-events: none;
   border-bottom: var(--level-line);
   content: '';
 }
+.bk-tree .bk-tree-node .node-virtual-line {
+  display: inline-block;
+  position: absolute;
+  left: calc(var(--depth) * var(--indent) * -1 + 6px);
+  top: -12px;
+  bottom: 50%;
+  width: 0;
+  border-left: var(--level-line);
+}
 .bk-tree .bk-tree-node .bk-tree-icon {
   margin: 0 6px 0 4px;
 }