bkui-vue 0.0.1-beta.9 → 0.0.1-beta.92

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-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,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,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;
+}