bkui-vue 0.0.1-beta.13 → 0.0.1-beta.132

package/lib/virtual-render/index.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("lodash"));else if("function"==typeof define&&define.amd)define(["../shared","vue","lodash"],t);else{var o="object"==typeof exports?t(require("../shared"),require("vue"),require("lodash")):t(e["../shared"],e.vue,e.lodash);for(var n in o)("object"==typeof exports?exports:e)[n]=o[n]}}(self,((e,t,o)=>(()=>{"use strict";var n={4212:t=>{t.exports=e},467:e=>{e.exports=o},748:e=>{e.exports=t}},r={};function l(e){var t=r[e];if(void 0!==t)return t.exports;var o=r[e]={exports:{}};return n[e](o,o.exports,l),o.exports}l.d=(e,t)=>{for(var o in t)l.o(t,o)&&!l.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var s={};return(()=>{l.r(s),l.d(s,{default:()=>h});var e=l(4212);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}function o(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,o){if(e){if("string"==typeof e)return t(e,o);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,o):void 0}}(e)||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.")}()}function n(e){return n="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},n(e)}var r=l(748),i={onContentScroll:Function},a=Object.assign({list:e.PropTypes.array.def([]),enabled:e.PropTypes.bool.def(!0),scrollEvent:e.PropTypes.bool.def(!1),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((0,e.resolveClassName)("F-scroll-x")),scrollYName:e.PropTypes.string.def((0,e.resolveClassName)("F-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),u=l(467),c=void 0;function p(e,t,o,n){for(var r=0,l=0,s=0,i=0;r<e;r++){if(l+(i=n(r,[r*o,(r+1)*o,"virtual"]))>t){s=t-l;break}l+=i}return{startIndex:r,height:l,diffHeight:s}}function f(e,t,o,n,r){if(n){var l=n.scrollTop,s=n.scrollLeft,i=o.scrollTop,a=o.count,u=o.groupItemCount,c=o.startIndex,f=o.endIndex,d=n.offsetHeight,y=0,v=0,m=0;if("number"==typeof e&&(y=Math.floor(l/e),v=Math.ceil(d/e)+y,m=l%e),"function"==typeof e){var h=p(a,l,u,e);y=h.startIndex>0?h.startIndex:0,m=h.diffHeight,v=p(a,d,u,e).startIndex+y+1}if(l!==i||y!==c||v!==f){var g=n.scrollHeight-n.offsetHeight-n.scrollTop;"function"==typeof t&&t(r,y,v,l,m,s,{bottom:g>=0?g:0})}}}function d(e,t,o){var n=o.value,r=n.lineHeight,l=void 0===r?30:r,s=n.handleScrollCallback,i=n.pagination,a=void 0===i?{}:i;if(n.onlyScroll){var u=t.scrollTop,c=t.scrollLeft,p=t.scrollHeight-t.offsetHeight-t.scrollTop;s(e,null,null,u,u,c,{bottom:p>=0?p:0})}else{var d=a.startIndex,y=a.endIndex,v=a.groupItemCount,m=a.count;f(l,s,{scrollTop:a.scrollTop,startIndex:d,endIndex:y,groupItemCount:v,count:m},t,e)}}var y=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:60;return(0,u.throttle)((function(e,t,o){return d(e,t,o)}),e)};const v={mounted:function(e,t){var o=e.parentNode,n=t.value.throttleDelay;o.addEventListener("scroll",(function(e){!function(e,t,o){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:60;Reflect.apply(y(n),c,[e,t,o])}(e,o,t,n)}))},unbind:function(e){if(e){var t=e.parentNode;if(!t)return;t.removeEventListener("scroll",y)}}},m=(0,r.defineComponent)({name:"VirtualRender",directives:{bkVirtualRender:v},props:a,emits:["content-scroll"],setup:function(t,l){var s=this,i=t.renderAs,a=t.contentAs,u=function(e){return"string"==typeof e?[e]:"object"!==n(e)||Array.isArray(e)?e:[e]};if(!t.enabled){var c=function(e,t){var o=e.renderAs,n=e.contentAs,l=(0,r.resolveDirective)("bkVirtualRender"),s={lineHeight:e.lineHeight,handleScrollCallback:function(e,o,n,r,l,s,i){t.emit("content-scroll",[e,{translateY:l,translateX:s,pos:i}])},pagination:{},throttleDelay:e.throttleDelay,onlyScroll:e.scrollEvent};return{rendAsTag:function(){var i,a,u,c,p,f,d,y,v;return(0,r.h)(o,{class:e.className},[null!==(u=null===(a=(i=t.slots).beforeContent)||void 0===a?void 0:a.call(i))&&void 0!==u?u:"",(0,r.withDirectives)((0,r.h)(n,{class:e.contentClassName,style:e.contentStyle},[null!==(f=null===(p=(c=t.slots).default)||void 0===p?void 0:p.call(c,{data:e.list}))&&void 0!==f?f:""]),[[l,s]]),null!==(v=null===(y=(d=t.slots).afterContent)||void 0===y?void 0:y.call(d))&&void 0!==v?v:""])}}}(t,l);return c.rendAsTag}var p=(0,r.ref)(null),d=(0,r.reactive)({startIndex:0,endIndex:0,scrollTop:1,translateY:0,translateX:0,count:0,pos:{},groupItemCount:t.groupItemCount}),y=function(e,t,o,n,r,s,i){d.startIndex=t,d.endIndex=o,d.scrollTop=n,d.translateY=r,d.translateX=s,d.pos=i,l.emit("content-scroll",[e,d])};(0,r.onMounted)((function(){(0,r.nextTick)((function(){g(t.list),b()}))})),(0,r.watch)((function(){return t.list}),(function(){v(),b()}),{deep:!0}),(0,r.watch)((function(){return t.lineHeight}),(function(){v(),b()}));var v=function(){g(t.list)},m=(0,r.ref)(0),h=(0,r.ref)(0),g=function(e){if(m.value=Math.ceil((e||[]).length/t.groupItemCount),d.count=m.value,d.startIndex=0,d.endIndex=0,d.translateY=0,d.scrollTop=0,"string"==typeof t.abosuteHeight&&"auto"===t.abosuteHeight)if("function"==typeof t.lineHeight){h.value=0;for(var o=0,n=0;n<m.value;n++){var r=t.lineHeight.call(s,n,e.slice(n*t.groupItemCount,t.groupItemCount));o+="number"==typeof r?r:0}h.value=o}else h.value=t.lineHeight*m.value;else h.value=t.abosuteHeight},b=function(){var e,o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],n=null===(e=p.value)||void 0===e?void 0:e.parentNode;f(t.lineHeight,y,d,n,null),o&&p.value&&p.value.scrollTo(0,0)},T=(0,r.computed)((function(){return(t.list||[]).map((function(e,t){return Object.assign(Object.assign({},e),{$index:t})}))})),P=(0,r.computed)((function(){return T.value.slice(d.startIndex*t.groupItemCount,(d.endIndex+t.preloadItemCount)*t.groupItemCount)})),x=(0,r.computed)((function(){return"content"===t.scrollPosition?{top:"".concat(d.scrollTop+t.scrollOffsetTop,"px"),transform:"translateY(-".concat(d.translateY,"px)")}:{}})),I=(0,r.computed)((function(){return Object.assign({height:"number"==typeof t.height?"".concat(t.height,"px"):t.height,width:"number"==typeof t.width?"".concat(t.width,"px"):t.width,display:"inline-block"},"container"===t.scrollPosition?x.value:{})})),C=(0,r.computed)((function(){var e="number"==typeof t.abosuteHeight&&0===t.abosuteHeight;return{height:"".concat(h.value<t.minHeight?t.minHeight:h.value,"px"),display:e?"none":"block"}})),H=(0,r.computed)((function(){return[(0,e.resolveClassName)("virtual-render"),t.scrollXName,t.scrollYName].concat(o(u(t.className)),["container"===t.scrollPosition?(0,e.resolveClassName)("virtual-content"):""])})),O=(0,r.computed)((function(){return["content"===t.scrollPosition?(0,e.resolveClassName)("virtual-content"):""].concat(o(u(t.contentClassName)))})),S=(0,r.resolveDirective)("bkVirtualRender"),j={lineHeight:t.lineHeight,handleScrollCallback:y,pagination:d,throttleDelay:t.throttleDelay};return l.expose({reset:function(){v(),b()}}),function(){var o,n,s,u,c,f,d,y,v;return(0,r.h)(i||"div",{ref:p,class:H.value,style:I.value},[null!==(s=null===(n=(o=l.slots).beforeContent)||void 0===n?void 0:n.call(o))&&void 0!==s?s:"",(0,r.withDirectives)((0,r.h)(a||"div",{class:O.value,style:Object.assign(Object.assign({},x.value),t.contentStyle)},[null!==(f=null===(c=(u=l.slots).default)||void 0===c?void 0:c.call(u,{data:P.value}))&&void 0!==f?f:""]),[[S,j]]),null!==(v=null===(y=(d=l.slots).afterContent)||void 0===y?void 0:y.call(d))&&void 0!==v?v:"",(0,r.h)("div",{class:[(0,e.resolveClassName)("virtual-section")],style:C.value})])}}}),h=(0,e.withInstall)(m)})(),s})()));

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

@@ -0,0 +1,167 @@
+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;
+    };
+    /**
+     * 是否启用内置的Scroll Listener
+     * 当启用虚拟滚动时（enabled = true），滚动监听为内置生效
+     * 只有当（enabled = false)时此配置项才生效
+     */
+    scrollEvent: 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/use-tag-render.d.ts

@@ -0,0 +1,7 @@
+import { VirtualRenderProps } from './props';
+declare const _default: (props: VirtualRenderProps, ctx: any) => {
+    rendAsTag: () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+        [key: string]: any;
+    }>;
+};
+export default _default;

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

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

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

@@ -0,0 +1,33 @@
+.bk-F-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-F-scroll-x::-webkit-scrollbar {
+  height: 6px;
+}
+.bk-F-scroll-y {
+  overflow-y: auto;
+}
+.bk-F-scroll-y::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-F-scroll-y::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+.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;
+}

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

@@ -0,0 +1,255 @@
+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;
+    };
+    scrollEvent: 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;
+    };
+    scrollEvent: 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;
+    };
+}>>, {
+    enabled: boolean;
+    width: string | number;
+    height: string | number;
+    list: unknown[];
+    lineHeight: any;
+    minHeight: number;
+    className: string | {
+        [key: string]: any;
+    };
+    scrollEvent: boolean;
+    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.less

@@ -0,0 +1,22 @@
+@import '../styles/themes/themes.less';
+@import '../styles/mixins/scroll.less';
+
+.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;
+  }
+}
+ 

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

@@ -0,0 +1,135 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --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: 40px;
+  --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: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --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;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --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;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #575961;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #eaf3ff;
+  --cascader-panel-active: #f4f6fa;
+  --cascader-panel-disabled-bg: #fff;
+}
+.bk-F-scroll-x {
+  overflow-x: auto;
+  scrollbar-color: #a0a0a0 transparent;
+  scrollbar-width: thin;
+}
+.bk-F-scroll-x::-webkit-scrollbar {
+  height: 6px;
+}
+.bk-F-scroll-y {
+  overflow-y: auto;
+}
+.bk-F-scroll-y::-webkit-scrollbar {
+  width: 4px;
+}
+.bk-F-scroll-y::-webkit-scrollbar-thumb {
+  border-radius: 4px;
+}
+.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;
+}

package/lib/volar.components.d.ts

@@ -0,0 +1,31 @@
+import * as globalComponents from './components';
+declare module '@vue/runtime-core' {
+    type ExtendOriginComponent<T> = {
+        [K in keyof T as (K extends string ? `Bk${K}` : never)]: T[K] extends {
+            C: infer COM;
+        } ? COM : never;
+    };
+    interface GlobalComponents extends ExtendOriginComponent<typeof globalComponents> {
+        BkBreadcrumbItem: typeof globalComponents.Breadcrumb.Item;
+        BkButtonGroup: typeof globalComponents.Button.ButtonGroup;
+        BkCascaderPanel: typeof globalComponents.Cascader.CascaderPanel;
+        BkCheckboxGroup: typeof globalComponents.Checkbox.Group;
+        BkRow: typeof globalComponents.Container.Row;
+        BkCol: typeof globalComponents.Container.Col;
+        BkDropdownMenu: typeof globalComponents.Dropdown.DropdownMenu;
+        BkDropdownItem: typeof globalComponents.Dropdown.DropdownItem;
+        BkFormItem: typeof globalComponents.Form.FormItem;
+        BkComposeFormItem: typeof globalComponents.Form.ComposeFormItem;
+        BkLoadingMode: typeof globalComponents.Loading.BkLoadingMode;
+        BkLoadingSize: typeof globalComponents.Loading.BkLoadingSize;
+        BkMenuItem: typeof globalComponents.Menu.Item;
+        BkSubmenu: typeof globalComponents.Menu.Submenu;
+        BkMenuGroup: typeof globalComponents.Menu.Group;
+        BkRadioGroup: typeof globalComponents.Radio.Group;
+        BkRadioButton: typeof globalComponents.Radio.Button;
+        BkOption: typeof globalComponents.Select.Option;
+        BkOptionGroup: typeof globalComponents.Select.Group;
+        BkTabPanel: typeof globalComponents.Tab.TabPanel;
+    }
+}
+export {};