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

package/lib/virtual-render/props.d.ts

@@ -0,0 +1,157 @@
+import { ExtractPropTypes } from 'vue';
+export declare const virtualRenderProps: {
+    onContentScroll: FunctionConstructor;
+    /** 传入原始数据源 */
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    /**
+     * 是否启用此功能
+     * 如果设置为false，则此组件只会渲染两层指定的 容器，默认渲染两层 div
+     * 设置为true才会启用所有的虚拟渲染 & 滚动相关计算
+     * 此属性设置为了兼容需要按需开启\关闭虚拟渲染场景，避免外层设计两套样式架构
+     * Note: 目前此属性不支持动态修改
+     */
+    enabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    /**
+     * 每行数据高度
+     * 默认为数值类型，默认高度 30px
+     * 如果每行高度不一致，可为回调函数：(index: number, row: any[]): number => {}
+     * 函数参数为当前行index & 当前行数据 row，row为数组，当不分组时，为当前行item
+     * 如果有分组展示， index 为当前分组 index， row为数组，当前行分组所有 item 数据
+     */
+    lineHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    /** 整体最小高度 */
+    minHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 整体高度
+     * 可设置具体值，如果设置为 100%，则组件会自动计算外层DOM元素offsetHeight，用于计算可渲染行数
+     */
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 渲染区域宽度
+     * 如果设置 100% 则自适应外层元素宽度
+     */
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /** 最外层元素ClassName */
+    className: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    /** 内层层元素ClassName */
+    contentClassName: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    /** 内层元素样式 */
+    contentStyle: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
+    } & {
+        default: () => {
+            [key: string]: any;
+        };
+    };
+    /** 用于自定义X轴滚动条样式 */
+    scrollXName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /** 用于自定义Y轴滚动条样式 */
+    scrollYName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /** 分组展示，一行数据可能有多条数据 */
+    groupItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /** 预加载行数，避免空白渲染 */
+    preloadItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /** 外层Dom元素需要渲染成的目标元素 */
+    renderAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /** 内容层渲染成目标元素 */
+    contentAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /** top 滚动填充 */
+    scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    /**
+     * 内置滚动位置
+     * 可选：container （最外层容器），content（内容层容器）
+     * Note: container 慎选，需要自己处理样式 & 位置
+     */
+    scrollPosition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    /**
+     * 绝对高度 | 实际高估
+     * 可选值： auto(根据行高和行数计算, LineHeight * List.length) number(外层给定高度，若为0，则不显示)
+     */
+    abosuteHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    /**
+     * 滚动刷新计算间隔时间
+     * 默认60 ms
+     */
+    throttleDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+};
+export declare type VirtualRenderProps = Readonly<ExtractPropTypes<typeof virtualRenderProps>>;

package/lib/virtual-render/v-virtual-render.d.ts

@@ -0,0 +1,7 @@
+export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, el: any, event: any): void;
+declare const _default: {
+    mounted(el: any, binding: any): void;
+    updated(el: any, binding: any): void;
+    unbind(el: any): void;
+};
+export default _default;

package/lib/virtual-render/virtual-render.css

@@ -0,0 +1,33 @@
+.bk-virtual-render {
+  position: relative;
+}
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.bk-virtual-render .bk-virtual-section {
+  width: 1px;
+  background: transparent;
+}
+.bk-virtual-render.bk-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar {
+  height: 6px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}

package/lib/virtual-render/virtual-render.d.ts

@@ -0,0 +1,244 @@
+declare const _default: import("vue").DefineComponent<{
+    onContentScroll: FunctionConstructor;
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    enabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    lineHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    minHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    className: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    contentClassName: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    contentStyle: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
+    } & {
+        default: () => {
+            [key: string]: any;
+        };
+    };
+    scrollXName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    scrollYName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    groupItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    preloadItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    renderAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    contentAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollPosition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    abosuteHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    throttleDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, "content-scroll", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    onContentScroll: FunctionConstructor;
+    list: import("vue-types").VueTypeValidableDef<unknown[]> & {
+        default: () => unknown[];
+    } & {
+        default: () => unknown[];
+    };
+    enabled: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
+    lineHeight: import("vue-types").VueTypeDef<any> & {
+        default: any;
+    };
+    minHeight: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    height: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    width: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    className: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    contentClassName: import("vue-types").VueTypeDef<string | string[] | {
+        [key: string]: any;
+    } | {
+        [key: string]: any;
+    }[]> & {
+        default: string | (() => {
+            [key: string]: any;
+        }) | (() => string[]) | (() => {
+            [key: string]: any;
+        }[]);
+    };
+    contentStyle: import("vue-types").VueTypeValidableDef<{
+        [key: string]: any;
+    }> & {
+        default: () => {
+            [key: string]: any;
+        };
+    } & {
+        default: () => {
+            [key: string]: any;
+        };
+    };
+    scrollXName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    scrollYName: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    groupItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    preloadItemCount: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    renderAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    contentAs: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    scrollOffsetTop: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+    scrollPosition: import("vue-types").VueTypeValidableDef<string> & {
+        default: string;
+    } & {
+        default: string;
+    };
+    abosuteHeight: import("vue-types").VueTypeDef<string | number> & {
+        default: string | number;
+    };
+    throttleDelay: import("vue-types").VueTypeValidableDef<number> & {
+        default: number;
+    } & {
+        default: number;
+    };
+}>>, {
+    width: string | number;
+    height: string | number;
+    list: unknown[];
+    enabled: boolean;
+    lineHeight: any;
+    minHeight: number;
+    className: string | {
+        [key: string]: any;
+    };
+    contentClassName: string | {
+        [key: string]: any;
+    };
+    contentStyle: {
+        [key: string]: any;
+    };
+    scrollXName: string;
+    scrollYName: string;
+    groupItemCount: number;
+    preloadItemCount: number;
+    renderAs: string;
+    contentAs: string;
+    scrollOffsetTop: number;
+    scrollPosition: string;
+    abosuteHeight: string | number;
+    throttleDelay: number;
+}>;
+export default _default;

package/lib/virtual-render/virtual-render.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("@babel/runtime/helpers/toConsumableArray"),require("@babel/runtime/helpers/typeof"),require("vue"),require("lodash"));else if("function"==typeof define&&define.amd)define(["../shared","@babel/runtime/helpers/toConsumableArray","@babel/runtime/helpers/typeof","vue","lodash"],t);else{var o="object"==typeof exports?t(require("../shared"),require("@babel/runtime/helpers/toConsumableArray"),require("@babel/runtime/helpers/typeof"),require("vue"),require("lodash")):t(e["../shared"],e["@babel/runtime/helpers/toConsumableArray"],e["@babel/runtime/helpers/typeof"],e.vue,e.lodash);for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,((e,t,o,n,r)=>(()=>{"use strict";var l={4212:t=>{t.exports=e},642:e=>{e.exports=t},8541:e=>{e.exports=o},467:e=>{e.exports=r},748:e=>{e.exports=n}},i={};function s(e){var t=i[e];if(void 0!==t)return t.exports;var o=i[e]={exports:{}};return l[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:()=>T});var e=s(4212),t=s(642),o=s.n(t),n=s(8541),r=s.n(n),l=s(748),i={onContentScroll:Function},u=Object.assign({list:e.PropTypes.array.def([]),enabled:e.PropTypes.bool.def(!0),lineHeight:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.func]).def(30),minHeight:e.PropTypes.number.def(30),height:e.PropTypes.oneOfType([e.PropTypes.string.def("100%"),e.PropTypes.number]).def("100%"),width:e.PropTypes.oneOfType([e.PropTypes.string.def("100%"),e.PropTypes.number]).def("100%"),className:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.string),e.PropTypes.object,e.PropTypes.arrayOf(e.PropTypes.object),e.PropTypes.string]).def(""),contentClassName:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.string),e.PropTypes.object,e.PropTypes.arrayOf(e.PropTypes.object),e.PropTypes.string]).def(""),contentStyle:e.PropTypes.object.def({}),scrollXName:e.PropTypes.string.def("bk-scroll-x"),scrollYName:e.PropTypes.string.def("bk-scroll-y"),groupItemCount:e.PropTypes.number.def(1),preloadItemCount:e.PropTypes.number.def(1),renderAs:e.PropTypes.string.def("div"),contentAs:e.PropTypes.string.def("div"),scrollOffsetTop:e.PropTypes.number.def(0),scrollPosition:e.PropTypes.string.def("content"),abosuteHeight:e.PropTypes.oneOfType([e.PropTypes.string.def("auto"),e.PropTypes.number]).def("auto"),throttleDelay:e.PropTypes.number.def(60)},i),p=s(467),c=void 0;function d(e,t,o,n){for(var r=0,l=0,i=0,s=0;r<e;r++){if(l+(s=n(r,[r*o,(r+1)*o]))>t){i=t-l;break}l+=s}return{startIndex:r,height:l,diffHeight:i}}function f(e,t,o,n,r){if(n){var l=n.scrollTop,i=o.scrollTop,s=o.count,a=o.groupItemCount,u=o.startIndex,p=o.endIndex,c=n.offsetHeight,f=0,y=0,v=0;if("number"==typeof e&&(f=Math.floor(l/e),y=Math.ceil(c/e)+f,v=l%e),"function"==typeof e){var b=d(s,l,a,e);f=b.startIndex>0?b.startIndex:0,v=b.diffHeight,y=d(s,c,a,e).startIndex+f+1}l===i&&f===u&&y===p||"function"==typeof t&&t(r,f,y,l,v)}}function y(e,t,o){var n=o.value,r=n.lineHeight,l=void 0===r?30:r,i=n.handleScrollCallback,s=n.pagination,a=void 0===s?{}:s,u=a.startIndex,p=a.endIndex,c=a.groupItemCount,d=a.count;f(l,i,{scrollTop:a.scrollTop,startIndex:u,endIndex:p,groupItemCount:c,count:d},t,e)}var v=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:60;return(0,p.throttle)((function(e,t,o){return y(e,t,o)}),e)},b=null,h=function(e,t,o){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:60;b||(b=v(n)),"function"==typeof b&&b.call(c,e,t,o)};const m={mounted:function(e,t){var o=e.parentNode,n=t.value.throttleDelay;o.addEventListener("scroll",(function(e){h(e,o,t,n)}))},updated:function(e,t){var o=e.parentNode,n=t.value.throttleDelay;h(null,o,t,n)},unbind:function(e){if(e){var t=e.parentNode;if(!t)return;t.removeEventListener("scroll",v)}}},g=(0,l.defineComponent)({name:"VirtualRender",directives:{bkVirtualRender:m},props:u,emits:["content-scroll"],setup:function(e,t){var n=this,i=e.renderAs,s=e.contentAs,a=function(e){return"string"==typeof e?[e]:"object"!==r()(e)||Array.isArray(e)?e:[e]};if(!e.enabled)return function(){var o,n,r,u,p,c,d,f,y;return(0,l.h)(i,{class:a(e.className)},[null!==(r=null===(n=(o=t.slots).beforeContent)||void 0===n?void 0:n.call(o))&&void 0!==r?r:"",(0,l.h)(s,{class:a(e.contentClassName),style:e.contentStyle},[null!==(c=null===(p=(u=t.slots).default)||void 0===p?void 0:p.call(u,{data:e.list}))&&void 0!==c?c:""]),null!==(y=null===(f=(d=t.slots).afterContent)||void 0===f?void 0:f.call(d))&&void 0!==y?y:""])};var u=(0,l.ref)(null),p=(0,l.reactive)({startIndex:0,endIndex:0,scrollTop:1,translateY:0,count:0,groupItemCount:e.groupItemCount}),c=function(e,o,n,r,l){p.startIndex=o,p.endIndex=n,p.scrollTop=r,p.translateY=l,t.emit("content-scroll",[e,p])};(0,l.onMounted)((function(){(0,l.nextTick)((function(){b(e.list),h()}))})),(0,l.watch)((function(){return e.list}),(function(){d(),h()}),{deep:!0}),(0,l.watch)((function(){return e.lineHeight}),(function(){d(),h()}));var d=function(){b(e.list)},y=(0,l.ref)(0),v=(0,l.ref)(0),b=function(t){if(y.value=Math.ceil((t||[]).length/e.groupItemCount),p.count=y.value,p.startIndex=0,p.endIndex=0,p.translateY=0,p.scrollTop=0,"string"==typeof e.abosuteHeight&&"auto"===e.abosuteHeight)if("function"==typeof e.lineHeight){v.value=0;for(var o=0,r=0;r<y.value;r++){var l=e.lineHeight.call(n,r,t.slice(r*e.groupItemCount,e.groupItemCount));o+="number"==typeof l?l:0}v.value=o}else v.value=e.lineHeight*y.value;else v.value=e.abosuteHeight},h=function(){var t,o=null===(t=u.value)||void 0===t?void 0:t.parentNode;f(e.lineHeight,c,p,o,null)},m=(0,l.computed)((function(){return(e.list||[]).map((function(e,t){return Object.assign(Object.assign({},e),{$index:t})}))})),g=(0,l.computed)((function(){return m.value.slice(p.startIndex*e.groupItemCount,(p.endIndex+e.preloadItemCount)*e.groupItemCount)})),T=(0,l.computed)((function(){return"content"===e.scrollPosition?{top:"".concat(p.scrollTop+e.scrollOffsetTop,"px"),transform:"translateY(-".concat(p.translateY,"px)")}:{}})),P=(0,l.computed)((function(){return Object.assign({height:"number"==typeof e.height?"".concat(e.height,"px"):e.height,width:"number"==typeof e.width?"".concat(e.width,"px"):e.width,display:"inline-block"},"container"===e.scrollPosition?T.value:{})})),x=(0,l.computed)((function(){var t="number"==typeof e.abosuteHeight&&0===e.abosuteHeight;return{height:"".concat(v.value<e.minHeight?e.minHeight:v.value,"px"),display:t?"none":"block"}})),I=(0,l.computed)((function(){return["bk-virtual-render",e.scrollXName,e.scrollYName].concat(o()(a(e.className)),["container"===e.scrollPosition?"bk-virtual-content":""])})),C=(0,l.computed)((function(){return["content"===e.scrollPosition?"bk-virtual-content":""].concat(o()(a(e.contentClassName)))})),O=(0,l.resolveDirective)("bkVirtualRender"),H={lineHeight:e.lineHeight,handleScrollCallback:c,pagination:p,throttleDelay:e.throttleDelay};return function(){var o,n,r,a,p,c,d,f,y;return(0,l.h)(i||"div",{ref:u,class:I.value,style:P.value},[null!==(r=null===(n=(o=t.slots).beforeContent)||void 0===n?void 0:n.call(o))&&void 0!==r?r:"",(0,l.withDirectives)((0,l.h)(s||"div",{class:C.value,style:Object.assign(Object.assign({},T.value),e.contentStyle)},[null!==(c=null===(p=(a=t.slots).default)||void 0===p?void 0:p.call(a,{data:g.value}))&&void 0!==c?c:""]),[[O,H]]),null!==(y=null===(f=(d=t.slots).afterContent)||void 0===f?void 0:f.call(d))&&void 0!==y?y:"",(0,l.h)("div",{class:["bk-virtual-section"],style:x.value})])}}}),T=(0,e.withInstall)(g)})(),a})()));

package/lib/virtual-render/virtual-render.less

@@ -0,0 +1,43 @@
+
+.bk-virtual-render {
+  position: relative;
+  
+  .bk-virtual-content,
+  &.bk-virtual-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .bk-virtual-section {
+    width: 1px;
+    background: transparent;
+  }
+
+         
+  &.bk-scroll-x {
+    overflow-x: auto;
+    scrollbar-color: #a0a0a0 transparent;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      height: 6px;
+    }
+  }
+    
+  &.bk-scroll-y {
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+    }
+  }
+}
+ 

package/lib/virtual-render/virtual-render.variable.css

@@ -0,0 +1,33 @@
+.bk-virtual-render {
+  position: relative;
+}
+.bk-virtual-render .bk-virtual-content,
+.bk-virtual-render.bk-virtual-content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.bk-virtual-render .bk-virtual-section {
+  width: 1px;
+  background: transparent;
+}
+.bk-virtual-render.bk-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar {
+  height: 6px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.1-beta.39",
+  "version": "0.0.1-beta.41",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*",
@@ -12,21 +12,22 @@
     "dist"
   ],
   "scripts": {
-    "lint": "eslint --ext .js,.ts,.tsx,.vue ./packages ./site ",
-    "lint:style": "stylelint --fix ./packages/**/*.{css,less} --custom-syntax",
-    "lint:fix": "eslint --fix ./packages ./site --ext .js,.ts,.tsx,.vue",
-    "test:unit": "jest --passWithNoTests",
+    "prepare": "husky install",
     "dev": "vite serve site",
     "build": "yarn build:dist && yarn build:lib",
     "build:site": "vite build site --mode development",
-    "build:dist": "rimraf dist && lerna run --scope cli --stream dist",
-    "build:lib": "rimraf lib && lerna run --scope cli --stream lib",
-    "build:release": "rimraf lib && lerna run --scope cli --stream release",
-    "cz": "git-cz",
+    "build:dist": "rimraf dist && lerna run --stream --scope cli dist",
+    "build:lib": "rimraf lib && lerna run --stream --scope cli lib",
+    "help:release": "lerna run --stream --scope cli release",
+    "release": "yarn build && rimraf package.json.bak && yarn help:release",
+    "analyze:lib": "rimraf lib && lerna run --stream --scope cli lib -- -a",
     "generate:icon": "lerna run --scope @bkui-vue/icon build",
-    "release": "yarn build && rimraf package.json.bak && yarn build:release",
     "changelog": "conventional-changelog -c .changelog.config.js -p angular -i CHANGELOG.md -s -l",
-    "prepare": "husky install"
+    "lint": "eslint --ext .js,.ts,.tsx,.vue ./packages ./site ",
+    "lint:style": "stylelint --fix ./packages/**/*.{css,less} --custom-syntax",
+    "lint:fix": "eslint --fix ./packages ./site --ext .js,.ts,.tsx,.vue",
+    "test:unit": "jest --passWithNoTests",
+    "cz": "git-cz"
   },
   "devDependencies": {
     "@commitlint/cli": "~16.2.3",