bkui-vue 1.0.3-beta.9 → 2.0.1-beta.10

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

@@ -0,0 +1,24 @@
+import { Ref } from 'vue';
+import BkScrollbar from '../scrollbar';
+import { VirtualRenderProps } from './props';
+declare const _default: (target: Ref<HTMLElement>, props: VirtualRenderProps) => {
+    init: (scrollFn?: any, delegateXContent?: any, delegateYContent?: any) => void;
+    instance: BkScrollbar;
+    scrollTo: (x: any, y: any) => void;
+    classNames: {
+        contentEl: string;
+        wrapper: string;
+        scrollbar: string;
+        track: string;
+        visible: string;
+        horizontal: string;
+        vertical: string;
+        hover: string;
+        dragging: string;
+        scrolling: string;
+        scrollable: string;
+        mouseEntered: string;
+    };
+    updateScrollHeight: (height: number) => void;
+};
+export default _default;

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

@@ -3,7 +3,7 @@ export declare function getMatchedIndex(maxCount: number, maxHeight: number, gro
     height: number;
     diffHeight: number;
 };
-export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, _el: any, event: any): {
+export declare function computedVirtualIndex(lineHeight: any, callback: any, pagination: any, wrapper: any, event: any): {
     targetStartIndex: number;
     targetEndIndex: number;
     elScrollTop: any;
@@ -20,6 +20,7 @@ export declare class VisibleRender {
     install(): void;
     uninstall(): void;
     setBinding(binding: any): void;
+    private getEvent;
 }
 declare const _default: {
     mounted(el: any, binding: any): void;

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

@@ -15,11 +15,85 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DCDEE5;
+  border-radius: 6px;
+  left: 1px;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

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

@@ -129,6 +129,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -137,6 +138,11 @@ declare const _default: import("vue").DefineComponent<{
     wrapperStyle: import("vue-types").VueTypeValidableDef<any> & {
         default: any;
     };
+    autoIndex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -264,6 +270,7 @@ declare const _default: import("vue").DefineComponent<{
     } & {
         default: boolean;
     };
+    scrollbar: import("vue-types").VueTypeDef<import("./props").IScrollbarOption>;
     autoReset: import("vue-types").VueTypeValidableDef<boolean> & {
         default: boolean;
     } & {
@@ -272,12 +279,20 @@ declare const _default: import("vue").DefineComponent<{
     wrapperStyle: import("vue-types").VueTypeValidableDef<any> & {
         default: any;
     };
+    autoIndex: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
 }>> & {
     [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
 }, {
     width: string | number;
     height: string | number;
     maxHeight: number;
+    contentClassName: string | {
+        [key: string]: any;
+    };
     enabled: boolean;
     list: unknown[];
     minHeight: number;
@@ -287,9 +302,6 @@ declare const _default: import("vue").DefineComponent<{
     };
     lineHeight: any;
     scrollEvent: boolean;
-    contentClassName: string | {
-        [key: string]: any;
-    };
     contentStyle: {
         [key: string]: any;
     };
@@ -306,6 +318,7 @@ declare const _default: import("vue").DefineComponent<{
     rowKey: string;
     keepAlive: boolean;
     autoReset: boolean;
+    autoIndex: boolean;
 }, SlotsType<{
     default?: any;
     beforeContent?: any;

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

@@ -1,11 +1,11 @@
 @import '../styles/themes/themes.less';
 @import '../styles/mixins/scroll.less';
+@import '../scrollbar/scrollbar.less';
 
 .@{bk-prefix}-virtual-render {
   position: relative;
 
-  .@{bk-prefix}-virtual-content,
-  &.@{bk-prefix}-virtual-content {
+  .@{bk-prefix}-virtual-content {
     position: absolute;
     top: 0;
     bottom: 0;
@@ -18,4 +18,4 @@
     width: 1px;
     background: transparent;
   }
-}
+}

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

@@ -12,6 +12,7 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
@@ -123,6 +124,8 @@
   --search-select-placeholder-color: var(--light-gray);
   --search-select-message-color: var(--danger-color);
   --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
 }
 .bk-F-scroll-x {
   overflow-x: auto;
@@ -141,11 +144,85 @@
 .bk-F-scroll-y::-webkit-scrollbar-thumb {
   border-radius: 4px;
 }
+.bk-scrollbar-wrapper {
+  position: relative;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-content-el {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track {
+  z-index: 1;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover {
+  background-color: #F0F1F5;
+  cursor: pointer;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-hover .bk-scrollbar::before {
+  background-color: #979BA5;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-vertical {
+  top: 0;
+  width: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal {
+  left: 0;
+  height: 8px;
+  transform: translate(var(--scroll-offset-x), var(--scroll-offset-y));
+}
+.bk-scrollbar-wrapper .bk-scrollbar-track.bk-scrollbar-horizontal.bk-scrollbar {
+  right: auto;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  min-height: 0;
+  min-width: 8px;
+  width: auto;
+}
+.bk-scrollbar-wrapper .bk-scrollbar-dragging {
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.bk-scrollbar-wrapper .bk-scrollbar {
+  position: absolute;
+  left: 0;
+  right: 0;
+  min-height: 8px;
+}
+.bk-scrollbar-wrapper .bk-scrollbar::before {
+  position: absolute;
+  content: '';
+  background: #DCDEE5;
+  border-radius: 6px;
+  left: 1px;
+  right: 1px;
+  top: 1px;
+  bottom: 1px;
+  opacity: 0;
+  transition: opacity 0.2s 0.9s linear;
+}
+.bk-scrollbar-wrapper .bk-scrollbar.bk-scrollbar-visible::before {
+  opacity: 0.9;
+  transition-delay: 0s;
+  transition-duration: 0s;
+}
 .bk-virtual-render {
   position: relative;
 }
-.bk-virtual-render .bk-virtual-content,
-.bk-virtual-render.bk-virtual-content {
+.bk-virtual-render .bk-virtual-content {
   position: absolute;
   top: 0;
   bottom: 0;

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "bkui-vue",
-  "version": "1.0.3-beta.9",
+  "version": "2.0.1-beta.10",
   "workspaces": {
     "packages": [
-      "packages/!(**.bak)*",
+      "packages/**",
       "scripts/cli",
       "site"
     ]
@@ -17,9 +17,6 @@
     "*.css",
     "*.less"
   ],
-  "engines": {
-    "node": ">=14.0.0"
-  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/",
@@ -41,16 +38,11 @@
     "analyze:lib": "rimraf lib && lerna run --stream --scope cli lib -- -a",
     "generate:icon": "lerna run --scope @bkui-vue/icon build",
     "changelog": "conventional-changelog -c .changelog.config.js -p angular -i CHANGELOG.md -s -l",
-    "lint:packages": "eslint ./packages --ext .js,.ts,.tsx --cache",
-    "lint:site": "eslint ./site --ext .js,.ts,.tsx,.vue --cache",
-    "lint:scripts": "eslint ./scripts --ext .js,.ts,.tsx --cache",
+    "lint:packages": "npx eslint --fix ./packages",
+    "lint:site": "npx eslint --fix ./site",
+    "lint:scripts": "npx eslint --fix ./scripts",
     "lint": "run-p lint:site lint:packages lint:scripts",
-    "fix:packages": "eslint ./packages --ext .js,.ts,.tsx --fix --cache",
-    "fix:site": "eslint ./site --ext .js,.ts,.tsx,.vue --fix --cache",
-    "fix:scripts": "eslint ./scripts --ext .js,.ts,.tsx --fix --cache",
-    "lint:fix": "run-p lint:site lint:packages lint:scripts",
-    "stylelint": "stylelint ./{packages,site}/**/*.{vue,less} --custom-syntax",
-    "stylelint:fix": "stylelint --fix ./{packages,site}/**/*.{vue,less} --custom-syntax",
+    "stylelint": "stylelint --fix ./{packages,site}/**/*.{vue,less} --custom-syntax",
     "test:unit": "jest --passWithNoTests --config=./jest.config.js",
     "test:alert": "lerna run --scope @bkui-vue/alert test",
     "cz": "git-cz"
@@ -60,17 +52,14 @@
     "@babel/plugin-transform-runtime": "~7.22.9",
     "@babel/preset-env": "~7.22.9",
     "@babel/preset-typescript": "~7.22.5",
+    "@blueking/bkui-lint": "0.0.3",
     "@commitlint/cli": "~16.2.3",
     "@commitlint/config-conventional": "~16.2.1",
     "@types/jest": "~29.5.3",
     "@types/lodash": "~4.14.196",
     "@types/node": "~20.4.5",
     "@types/postcss-less": "~4.0.2",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
-    "@typescript-eslint/parser": "^5.20.0",
     "@vue/babel-plugin-jsx": "~1.1.5",
-    "@vue/eslint-config-standard": "~6.1.0",
-    "@vue/eslint-config-typescript": "~10.0.0",
     "@vue/test-utils": "~2.4.1",
     "@vue/vue3-jest": "~29.2.4",
     "babel-jest": "~29.6.2",
@@ -80,14 +69,6 @@
     "cross-env": "~7.0.3",
     "css-loader": "~6.8.1",
     "cz-lerna-changelog": "~2.0.3",
-    "eslint": "8.26.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-tencent": "~1.0.4",
-    "eslint-plugin-codecc": "~0.3.0",
-    "eslint-plugin-import": "~2.28.0",
-    "eslint-plugin-prettier": "~5.0.0",
-    "eslint-plugin-simple-import-sort": "~10.0.0",
-    "eslint-plugin-vue": "~9.17.0",
     "highlight.js": "~11.8.0",
     "husky": "~7.0.1",
     "jest": "~29.6.2",
@@ -101,24 +82,14 @@
     "npm-run-all": "~4.1.5",
     "plop": "~3.1.2",
     "postcss": "~8.4.27",
-    "postcss-html": "~1.5.0",
-    "postcss-less": "~6.0.0",
-    "prettier": "~3.0.3",
     "prismjs": "~1.29.0",
     "resize-observer-polyfill": "~1.5.1",
     "rimraf": "~5.0.1",
-    "stylelint": "^15.10.3",
-    "stylelint-config-recess-order": "^4.3.0",
-    "stylelint-config-recommended-vue": "1.5.0",
-    "stylelint-config-standard": "^34.0.0",
-    "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^5.1.0",
     "ts-jest": "~29.1.1",
     "ts-node": "~10.9.1",
     "typescript": "~4.9.5",
     "uuid": "~9.0.1",
     "vue": "~3.3.4",
-    "vue-eslint-parser": "~9.3.1",
     "vue-types": "~4.1.1"
   },
   "peerDependencies": {
@@ -128,21 +99,14 @@
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
   "lint-staged": {
-    "scripts/**/*.(vue|ts|tsx|js)": [
-      "eslint ./scripts --ext .js,.tsx,.ts --cache --fix",
-      "git add"
-    ],
-    "site/**/*.(vue|ts|tsx|js)": [
-      "eslint ./site --ext .js,.tsx,.ts,.vue --cache --fix --ignore-pattern site/dist/",
-      "git add"
+    "*.{js,json}": [
+      "npx prettier --write"
     ],
-    "packages/**/*.(vue|ts|tsx|js)": [
-      "eslint ./packages --ext .js,.tsx,.ts --cache --fix",
-      "git add"
+    "*.{ts?(x)}": [
+      "npx eslint --fix --color"
     ],
-    "*.(vue|scss|css|sass|less)": [
-      "stylelint --cache --fix",
-      "git add"
+    "*.vue": [
+      "npx eslint --fix --color"
     ]
   },
   "config": {

package/lib/rate/star.css

@@ -1,27 +0,0 @@
-.bk-rate-stars {
-  padding: 0;
-  margin: 0;
-}
-.bk-rate-stars .bk-is-edit {
-  cursor: pointer;
-}
-.bk-rate-stars:after {
-  display: table;
-  clear: both;
-  content: '';
-}
-.bk-rate-stars .bk-rate-star {
-  float: left;
-  margin-right: 3px;
-  enable-background: new 0 0 64 64;
-  fill: #c5c7d1;
-}
-.bk-rate-stars .bk-rate-star.bk-is-select {
-  fill: #ffb848;
-}
-.bk-rate-stars .bk-rate-star.bk-is-hover {
-  transform: scale(1.2);
-}
-.bk-rate-stars .bk-rate-star:last-child {
-  margin-right: 0;
-}

package/lib/rate/star.less

@@ -1,34 +0,0 @@
-@import '../styles/themes/themes.less';
-
-.@{bk-prefix}-rate-stars {
-  padding: 0;
-  margin: 0;
-
-  .@{bk-prefix}-is-edit {
-    cursor: pointer;
-  }
-
-  &:after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-
-  .@{bk-prefix}-rate-star {
-    float: left;
-    margin-right: 3px;
-    enable-background: new 0 0 64 64;
-    fill: #c5c7d1;
-
-    &.@{bk-prefix}-is-select {
-      fill: #ffb848;
-    }
-    &.@{bk-prefix}-is-hover {
-      transform: scale(1.2);
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}

package/lib/shared/mask.d.ts

@@ -1,11 +0,0 @@
-type IMaskOption = {
-    el: HTMLElement;
-    mask?: HTMLElement;
-    backgroundColor?: string;
-    showMask?: boolean;
-};
-export declare const mask: {
-    showMask: (options: IMaskOption) => void;
-    hideMask: (options: IMaskOption) => void;
-};
-export {};