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

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,40 @@
+.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: 8px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar-thumb {
+  background-color: #a0a0a0;
+  border-radius: 8px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  background-color: #dcdee5;
+  border-radius: 6px;
+}

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;
+    }; /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
+    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;
+    }; /** 指令触发Scroll事件，计算当前startIndex & endIndex & scrollTop & translateY */
+    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[];
+    className: string | {
+        [key: string]: any;
+    };
+    minHeight: number;
+    lineHeight: 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.less

@@ -0,0 +1,51 @@
+
+.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: 8px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #a0a0a0;
+      border-radius: 8px;
+    }
+  }
+    
+  &.bk-scroll-y {
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #dcdee5;
+      border-radius: 6px;
+    }
+  }
+}
+ 

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

@@ -0,0 +1,40 @@
+.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: 8px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-x::-webkit-scrollbar-thumb {
+  background-color: #a0a0a0;
+  border-radius: 8px;
+}
+.bk-virtual-render.bk-scroll-y {
+  overflow-y: auto;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar {
+  width: 6px;
+  background-color: transparent;
+}
+.bk-virtual-render.bk-scroll-y::-webkit-scrollbar-thumb {
+  background-color: #dcdee5;
+  border-radius: 6px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bkui-vue",
-  "version": "0.0.1-beta.14",
+  "version": "0.0.1-beta.17",
   "workspaces": {
     "packages": [
       "packages/!(**.bak)*"
@@ -64,19 +64,20 @@
     "eslint-plugin-node": "~11.1.0",
     "eslint-plugin-promise": "~5.1.0",
     "eslint-plugin-vue": "~7.15.1",
-    "highlight.js": "~11.3.1",
+    "highlight.js": "~11.5.0",
     "husky": "~7.0.1",
     "jest": "~27.0.6",
     "jest-transform-stub": "~2.0.0",
     "lerna": "~4.0.0",
     "less": "~4.1.1",
     "lint-staged": "~11.1.1",
+    "markdown-it-container": "~3.0.0",
     "normalize-wheel": "~1.0.1",
     "ora": "~5.4.1",
     "plop": "~2.7.4",
     "postcss": "~8.3.6",
     "postcss-less": "~5.0.0",
-    "prismjs": "~1.25.0",
+    "prismjs": "~1.27.0",
     "rimraf": "~3.0.2",
     "rollup": "~2.55.1",
     "rollup-plugin-progress": "~1.1.2",
@@ -91,14 +92,14 @@
     "ttypescript": "~1.5.12",
     "typescript": "~4.3.5",
     "vite": "~2.4.4",
-    "vue": "3.2.2",
+    "vite-plugin-md": "~0.12.4",
+    "vue": "^3",
     "vue-jest": "~5.0.0-alpha.8",
     "vue-router": "~4.0.10",
     "vue-types": "~4.0.1"
   },
   "peerDependencies": {
-    "vue": "3.2.x",
-    "vue-types": "~4.0.1"
+    "vue": "3.2.x"
   },
   "main": "dist/bkui-vue.umd.js",
   "module": "dist/bkui-vue.esm.js",
@@ -119,6 +120,7 @@
   "dependencies": {
     "@popperjs/core": "~2.11.0",
     "date-fns": "~2.25.0",
-    "js-calendar": "~1.2.3"
+    "js-calendar": "~1.2.3",
+    "vue-types": "~4.0.1"
   }
 }